feat(component): add change log for component

demo/utils/ChangeLogButton.vue

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { ButtonProps } from 'naive-ui'
+import type { PropType } from 'vue'
+import HistoryIcon from '@vicons/fluent/History16Regular.js'
+import { defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import zhCN from '../../components-changelog-cn.json'
+import enUS from '../../components-changelog-en.json'
+
+export default defineComponent({
+  name: 'ChangeLogButton',
+  components: {
+    HistoryIcon
+  },
+  props: {
+    text: Boolean,
+    id: String,
+    quaternary: Boolean,
+    size: {
+      type: String as PropType<ButtonProps['size']>,
+      default: 'tiny'
+    }
+  },
+  setup(props) {
+    const route = useRoute()
+    const isCN = route.path.startsWith('/zh-CN')
+    const componentName = `n-${props.id?.split('-')?.[1]}`.toLocaleLowerCase()
+    const logs = isCN ? zhCN[componentName] : enUS[componentName]
+    const drawerRef = ref(false)
+    return { logs, drawerRef }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <n-button
+      class="edit-button"
+      :theme-overrides="
+        quaternary
+          ? {
+            paddingTiny: '4px',
+            heightTiny: '14px',
+          }
+          : undefined
+      "
+      :quaternary="quaternary"
+      :text="!quaternary"
+      :size="size"
+      @click="drawerRef = true"
+    >
+      <template #icon>
+        <n-icon>
+          <HistoryIcon />
+        </n-icon>
+      </template>
+    </n-button>
+    <n-drawer v-model:show="drawerRef" :style="{ width: '40vw' }" resizable>
+      <n-drawer-content>
+        <n-timeline>
+          <n-timeline-item v-for="log in logs" :key="log.version" type="info">
+            <template #header>
+              <n-flex justify="space-between">
+                <n-h3>
+                  {{ log.version }}
+                </n-h3>
+
+                <n-tag type="info" size="small">
+                  {{ log.date }}
+                </n-tag>
+              </n-flex>
+            </template>
+            <li
+              v-for="item in log.changes"
+              :key="item.version"
+              style="list-style: circle"
+            >
+              {{ item }}
+            </li>
+          </n-timeline-item>
+        </n-timeline>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
+</template>

demo/utils/EditOnGithubHeader.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { i18n } from '../utils/composables'
+import ChangeLogButton from './ChangeLogButton.vue'
 import EditOnGithubButton from './EditOnGithubButton.vue'
 
 export default defineComponent({
   name: 'EditOnGithubHeader',
   components: {
+    ChangeLogButton,
     EditOnGithubButton
   },
   props: {
@@ -22,10 +24,12 @@ export default defineComponent({
     return {
       ...i18n({
         'zh-CN': {
-          editOnGithub: '在 GitHub 上编辑'
+          editOnGithub: '在 GitHub 上编辑',
+          changeLog: '更新日志'
         },
         'en-US': {
-          editOnGithub: 'Edit on GitHub'
+          editOnGithub: 'Edit on GitHub',
+          changeLog: 'Change Log'
         }
       })
     }
@@ -40,7 +44,7 @@ export default defineComponent({
 
 <template>
   <n-h1 :id="id" class="naive-doc-title">
-    <span>{{ text }}</span>
+    {{ text }}
     <span class="edit-button">
       <n-tooltip placement="right" :show-arrow="false">
         <template #trigger>
@@ -54,6 +58,14 @@ export default defineComponent({
         {{ t('editOnGithub') }}
       </n-tooltip>
     </span>
+    <span class="edit-button">
+      <n-tooltip placement="right" :show-arrow="false">
+        <template #trigger>
+          <ChangeLogButton :id="id" text quaternary />
+        </template>
+        {{ t('changeLog') }}
+      </n-tooltip>
+    </span>
   </n-h1>
 </template>
 

scripts/gen-changelog.js

@@ -0,0 +1,83 @@
+const fs = require('node:fs')
+const path = require('node:path')
+
+function parseChangelog(content) {
+  const logs = {}
+  let version = ''
+  let date = ''
+  let isBreaking = false
+
+  content.split('\n').forEach((line) => {
+    line = line.trim()
+
+    const versionMatch = line.match(/^## ([\d.]+)/)
+    if (versionMatch) {
+      version = versionMatch[1]
+      isBreaking = false
+      return
+    }
+
+    const dateMatch = line.match(/^`(\d{4}-\d{2}-\d{2})`/)
+    if (dateMatch) {
+      date = dateMatch[1]
+      return
+    }
+
+    if (line === '### Breaking Changes') {
+      isBreaking = true
+      return
+    }
+    if (line.startsWith('### ') && line !== '### Breaking Changes') {
+      isBreaking = false
+      return
+    }
+
+    const componentMatch = line.match(/^- .*?`(n-[^`]*)`/)
+    if (!componentMatch)
+      return
+
+    const componentName = componentMatch[1]
+    const cleanLine = line.slice(2).replace(/`n-[^`]*`\s*的?/, '')
+    const content = `${isBreaking ? '⚠️ ' : ''}${cleanLine.trim()}`
+
+    if (!logs[componentName]) {
+      logs[componentName] = []
+    }
+
+    const existingLog = logs[componentName].find(
+      log => log.version === version && log.date === date
+    )
+
+    if (existingLog) {
+      existingLog.changes.push(content)
+    }
+    else {
+      logs[componentName].push({
+        version,
+        date,
+        changes: [content]
+      })
+    }
+  })
+
+  return logs
+}
+
+function main() {
+  const langs = ['cn', 'en']
+  langs.forEach((lang) => {
+    const content = fs.readFileSync(
+      path.resolve(
+        __dirname,
+        `../CHANGELOG.${lang === 'cn' ? 'zh-CN' : 'en-US'}.md`
+      ),
+      'utf-8'
+    )
+    fs.writeFileSync(
+      path.resolve(__dirname, `../components-changelog-${lang}.json`),
+      JSON.stringify(parseChangelog(content), null, 2)
+    )
+  })
+}
+
+main()