feat: add timeline for change log

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_kenko_drive",
-  "version": "0.1.0",
+  "version": "0.1.11",
   "private": true,
   "scripts": {
     "dev": "vite",

src/assets/changelog.json

@@ -0,0 +1,62 @@
+[
+  {
+    "version": "0.1.0",
+    "date": "2023-06-22",
+    "content": "创建项目"
+  },
+  {
+    "version": "0.1.1",
+    "date": "2023-06-25",
+    "content": "在顶栏显示用户名，动态问候语，添加悬浮二维码"
+  },
+  {
+    "version": "0.1.2",
+    "date": "2023-06-26",
+    "content": "添加仓库二维码"
+  },
+  {
+    "version": "0.1.3",
+    "date": "2023-06-27",
+    "content": "添加用户管理页面"
+  },
+  {
+    "version": "0.1.4",
+    "date": "2023-06-28",
+    "content": "添加定时更新检查"
+  },
+  {
+    "version": "0.1.5",
+    "date": "2023-06-29",
+    "content": "允许获取与删除用户"
+  },
+  {
+    "version": "0.1.6",
+    "date": "2023-07-01",
+    "content": "添加banner栏"
+  },
+  {
+    "version": "0.1.7",
+    "date": "2023-07-26",
+    "content": "允许获取后端版本"
+  },
+  {
+    "version": "0.1.8",
+    "date": "2023-07-27",
+    "content": "持久化菜单栏展开状态"
+  },
+  {
+    "version": "0.1.9",
+    "date": "2023-07-29",
+    "content": "允许登录与退出登录"
+  },
+  {
+    "version": "0.1.10",
+    "date": "2023-07-30",
+    "content": "允许获取与更新头像"
+  },
+  {
+    "version": "0.1.11",
+    "date": "2023-08-06",
+    "content": "添加更新时间线"
+  }
+]

src/views/AboutView.vue

@@ -17,16 +17,63 @@ onBeforeMount(() => {
     backendVersion.value = res.data
   })
 })
+
+const showRoadMap = ref(false)
+
+class OneVersion {
+  constructor(public version: string, public date: string, public content: string) {}
+}
+
+const road: OneVersion[] = []
+// 从assets/changelog.json中读取更新日志
+const changelogFileUrl = getAssetsUrl('changelog.json')
+fetch(changelogFileUrl)
+  .then((res) => res.json())
+  .then((res) => {
+    for (const version in res) {
+      if (Object.prototype.hasOwnProperty.call(res, version)) {
+        const versionStr = res[version].version
+        const date = res[version].date
+        const content = res[version].content
+        road.push(new OneVersion(versionStr, date, content))
+      }
+    }
+    road.sort((a, b) => {
+      // 根据时间倒序
+      return new Date(b.date).getTime() - new Date(a.date).getTime()
+    })
+  })
 </script>
 
 <template>
+  <n-drawer v-model:show="showRoadMap" :width="480">
+    <n-drawer-content title="更新日志" :native-scrollbar="false">
+      <n-timeline size="large">
+        <n-timeline-item
+          type="success"
+          v-for="item in road"
+          :key="item.version"
+          :time="item.date"
+          :title="item.version"
+          :content="item.content"
+        />
+      </n-timeline>
+    </n-drawer-content>
+  </n-drawer>
   <div style="padding: 24px">
     <n-h2>关于</n-h2>
     <n-space>
       <div style="width: 400px">
         <n-h3 prefix="bar"
           >Kenko Drive Vue 前端
-          <n-tag type="info">{{ frontendVersion }}</n-tag>
+          <n-popover trigger="hover">
+            <template #trigger>
+              <n-tag type="info" @click="showRoadMap = !showRoadMap" style="cursor: pointer"
+                >{{ frontendVersion }}
+              </n-tag>
+            </template>
+            <span>{{ road[0]?.content }}</span>
+          </n-popover>
         </n-h3>
         <p>
           Github: