feat: add mutil component name on a line

Author: jahnli

demo/utils/ChangeLogButton.vue

@@ -16,7 +16,6 @@ export default defineComponent({
     HistoryIcon
   },
   props: {
-    text: Boolean,
     quaternary: Boolean,
     size: {
       type: String as PropType<ButtonProps['size']>,
@@ -30,8 +29,8 @@ export default defineComponent({
       discrete: 'createDiscreteApi'
     }
     const isCN = route.path.startsWith('/zh-CN')
-    const name = route.fullPath.split('/').pop()
-    const componentName = miscMap[name as string] || `n-${name}`
+    const text = route.fullPath.match(/\/([^\/#?]+)(?:#.*)?$/)?.[1]
+    const componentName = miscMap[text as string] || `n-${text}`
     const logs = isCN ? zhCN[componentName] : enUS[componentName]
     const drawerRef = ref(false)
     const renderer = new marked.Renderer()

demo/utils/EditOnGithubHeader.vue

@@ -25,7 +25,8 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const components = zhComponentRoutes.map((route: any) => route.path)
-    const isComponent = components.includes(route.fullPath.split('/').pop())
+    const text = route.fullPath.match(/\/([^\/#?]+)(?:#.*)?$/)?.[1]
+    const isComponent = components.includes(text)
     return {
       ...i18n({
         'zh-CN': {

scripts/gen-component-changelog.js

@@ -1,6 +1,30 @@
 const fs = require('node:fs')
 const path = require('node:path')
 
+const extraKeys = ['createDiscreteApi']
+const componentMapping = {
+  'n-collapse-item': 'n-collapse',
+  'n-float-button-group': 'n-float-button',
+  'n-checkbox-group': 'n-checkbox',
+  'n-form-item': 'n-form',
+  'n-form-item-gi': 'n-form-item',
+  'n-input-group': 'n-input',
+  'n-upload-trigger': 'n-upload',
+  'n-descriptions-item': 'n-descriptions',
+  'n-image-group': 'n-image',
+  'n-list-item': 'n-list',
+  'n-timeline-item': 'n-timeline',
+  'n-anchor-link': 'n-anchor',
+  'n-breadcrumb-item': 'n-breadcrumb',
+  'n-tab-pane': 'n-tabs',
+  'n-drawer-content': 'n-drawer',
+  'n-layout-sider': 'n-layout',
+  'n-layout-header': 'n-layout',
+  'n-layout-footer': 'n-layout',
+  'n-layout-content': 'n-layout',
+  'n-grid-item': 'n-grid'
+}
+
 function parseChangelog(content) {
   const logs = {}
   let version = ''
@@ -32,35 +56,53 @@ function parseChangelog(content) {
       return
     }
 
-    const componentMatch = line.match(/^- .*?`(n-[^`]*)`/)
-    const apiMatch = line.match(/^- .*?`([^`]*Api)`/)
+    const componentMatches = Array.from(line.matchAll(/`(n-[^`]*)`/g)).map(
+      match => match[1]
+    )
 
-    const name = componentMatch
-      ? componentMatch[1]
-      : apiMatch
-        ? apiMatch[1]
-        : ''
+    const extraMatches = extraKeys.filter(key => line.includes(`\`${key}\``))
 
-    const content = isBreaking ? `${line.trim()} 🚨` : `${line.trim()}`
+    const names = new Set()
 
-    if (!logs[name]) {
-      logs[name] = []
-    }
+    componentMatches.forEach((name) => {
+      if (componentMapping[name]) {
+        names.add(componentMapping[name])
+      }
+      else {
+        names.add(name)
+      }
+    })
 
-    const existingLog = logs[name].find(
-      log => log.version === version && log.date === date
-    )
+    extraMatches.forEach((name) => {
+      names.add(name)
+    })
 
-    if (existingLog) {
-      existingLog.changes.push(content)
-    }
-    else {
-      logs[name].push({
-        version,
-        date,
-        changes: [content]
-      })
+    if (names.size === 0) {
+      names.add('')
     }
+
+    const content = isBreaking ? `${line.trim()} 🚨` : `${line.trim()}`
+
+    names.forEach((name) => {
+      if (!logs[name]) {
+        logs[name] = []
+      }
+
+      const existingLog = logs[name].find(
+        log => log.version === version && log.date === date
+      )
+
+      if (existingLog) {
+        existingLog.changes.push(content)
+      }
+      else {
+        logs[name].push({
+          version,
+          date,
+          changes: [content]
+        })
+      }
+    })
   })
 
   return logs

src/discrete/demos/zhCN/index.demo-entry.md

@@ -1,4 +1,4 @@
-# 脱离上下文的 API CreateDiscreteAPI
+# 脱离上下文的 API DiscreteAPI
 
 如果你想在 `setup` 外使用 `useDialog`、`useMessage`、`useNotification`、`useLoadingBar`，`useModal`，可以通过 `createDiscreteApi` 来构建对应的 API。