feat(工具箱): 添加工具信息和工具更新日志显示

src/App.vue

@@ -122,7 +122,8 @@ function initCssVars() {
     '--color-green': 'var(--color-success)',
     '--color-blue': 'var(--color-info)',
     '--color-orange': 'var(--color-warning)',
-    // 滚动条大小
+    // 元素大小
+    '--dialog-content-max-height': 'calc(100vh - 160px)',
     '--scrollbar-size': '8px',
   };
 
@@ -265,6 +266,11 @@ html {
 
 // -- Naive UI --
 
+.n-dialog-content--with-max-height {
+  max-height: var(--dialog-content-max-height);
+  overflow-y: auto;
+}
+
 .n-drawer--right-placement {
   .n-drawer-body {
     height: 0;

src/assets/js/toolbox-changelogs.js

@@ -0,0 +1,15 @@
+/** 工具更新日志 */
+export const CHANGE_LOGS = {
+  'json-formatter': [
+    '[2] - 2025-02-07\n优化“输出内容”显示样式，解决内容较多时行号显示不全的问题。',
+    '[1] - 2025-02-04\n初始版本。',
+  ],
+  'keep-screen-on': [
+    '[2] - 2024-10-13\n优化界面样式，背景添加圆角。',
+    '[1] - 2024-10-11\n初始版本。',
+  ],
+  'qrcode-reader-and-generator': [
+    '[2] - 2025-02-23\n支持生成二维码。\n支持解析剪贴板中的二维码图片。\n优化解析功能，在二维码所在位置添加矩形标记。',
+    '[1] - 2025-02-21\n初始版本。',
+  ],
+};

src/assets/js/toolbox-data.js

@@ -1,5 +1,7 @@
 // 工具箱
 
+import { CHANGE_LOGS } from './toolbox-changelogs';
+
 const MODULES = import.meta.glob('../../views/ToolboxView/**/*.vue');
 
 /**
@@ -84,6 +86,7 @@ export const toolList = [
         updatedAt: '2025-02-23',
         version: '2',
         enabled: true,
+        changelogs: CHANGE_LOGS['qrcode-reader-and-generator'],
       },
       {
         id: 'convert-text-structure',
@@ -135,6 +138,7 @@ export const toolList = [
         updatedAt: '2025-02-07',
         version: '2',
         enabled: true,
+        changelogs: CHANGE_LOGS['json-formatter'],
       },
     ],
   },
@@ -273,6 +277,7 @@ export const toolList = [
         updatedAt: '2024-10-13',
         version: '2',
         enabled: true,
+        changelogs: CHANGE_LOGS['keep-screen-on'],
       },
       {
         id: 'open-new-window',

src/views/ToolboxView/ToolboxView.vue

@@ -5,7 +5,7 @@
       <!-- 返回上一级 -->
       <n-button
         v-show="isToolDetail"
-        class="back-button"
+        class="header-button"
         :text="true"
         @click="handleCloseTool"
       >
@@ -18,10 +18,20 @@
       <!-- 占位 -->
       <div class="placeholder"></div>
 
+      <!-- 查看信息 -->
+      <n-button
+        v-show="isToolDetail"
+        class="header-button"
+        :text="true"
+        @click="showToolItemInfo"
+      >
+        <span class="mdi mdi-information-slab-circle-outline"></span>
+      </n-button>
+
       <!-- 新窗口打开 -->
       <n-button
         v-show="isToolDetail"
-        class="back-button"
+        class="header-button"
         :text="true"
         @click="handleOpenNewWindow"
       >
@@ -89,17 +99,47 @@
         <router-view></router-view>
       </div>
 
+      <!-- 工具信息 -->
+      <n-modal
+        v-model:show="toolInfo.show"
+        content-class="n-dialog-content--with-max-height"
+        preset="dialog"
+        title="工具信息"
+        :show-icon="false"
+      >
+        <template v-if="true">
+          <n-h4>版本信息</n-h4>
+          <n-ul>
+            <n-li>创建日期：{{ toolInfo.dateCreated }}</n-li>
+            <n-li>更新日期：{{ toolInfo.dateUpdated }}</n-li>
+            <n-li>当前版本：{{ toolInfo.currVersion }}</n-li>
+          </n-ul>
+        </template>
+        <template v-if="toolInfo.changelogs.length > 0">
+          <n-h4>更新日志</n-h4>
+          <n-ul>
+            <n-li
+              v-for="(text, index) in toolInfo.changelogs"
+              :key="index"
+              class="changelogs-row"
+            >{{ text }}</n-li>
+          </n-ul>
+        </template>
+      </n-modal>
+
     </div>
   </div>
 </template>
 
 <script setup>
 import {
-  NButton, NCollapse, NCollapseItem, NEllipsis, NTooltip,
+  NButton, NCollapse, NCollapseItem,
+  NEllipsis, NModal, NTooltip,
+  NH4, NUl, NLi,
 } from 'naive-ui';
 
 import {
-  computed,
+  computed, reactive,
 } from 'vue';
 
 import {
@@ -112,7 +152,7 @@ import {
 
 /** 是否为工具页面 */
 const isToolDetail = computed(() => {
-  return route.meta.isToolDetail;
+  return Boolean(route.meta.isToolDetail);
 });
 
 /** 路由 */
@@ -126,6 +166,15 @@ const routeTitle = computed(() => {
   return route.meta.title;
 });
 
+/** 工具信息 */
+const toolInfo = reactive({
+  changelogs: [],
+  currVersion: '',
+  dateCreated: '',
+  dateUpdated: '',
+  show: false,
+});
+
 /** 关闭工具 */
 function handleCloseTool() {
   return router.push({
@@ -154,10 +203,53 @@ function handleOpenTool(data) {
     name: `Toolbox/${data.component}`,
   });
 }
+
+/** 查看当前工具信息 */
+function showToolItemInfo() {
+  
+  let routePath = route.path;
+  let toolIdMatch = routePath.match(/\/([^/]*)$/);
+  let toolIdStr = toolIdMatch ? toolIdMatch[1] : null;
+  let toolItem = null;
+
+  if (toolIdStr) {
+    for (let i = 0; i < toolList.length; i++) {
+      
+      let category = toolList[i];
+      let list = category.items;
+
+      if (!category.enabled || !list) {
+        continue;
+      }
+
+      for (let j = 0; j < list.length; j++) {
+        let item = list[j];
+        if (item.id === toolIdStr) {
+          toolItem = item;
+          break;
+        }
+      }
+
+      if (toolItem) {
+        break;
+      }
+
+    }
+  }
+
+  if (toolItem) {
+    toolInfo.changelogs = toolItem.changelogs || [];
+    toolInfo.currVersion = toolItem.version || '';
+    toolInfo.dateCreated = toolItem.createdAt || '';
+    toolInfo.dateUpdated = toolItem.updatedAt || '';
+    toolInfo.show = true;
+  }
+
+}
 </script>
 
 <style lang="less" scoped>
-.back-button {
+.header-button {
   margin-right: 0.5em;
   font-size: 24px;
 }
@@ -243,4 +335,8 @@ function handleOpenTool(data) {
     }
   }
 }
+
+.changelogs-row {
+  white-space: pre-wrap;
+}
 </style>

types/web.d.ts

@@ -65,6 +65,8 @@ declare global {
     version: string;
     /** 是否启用 */
     enabled: boolean;
+    /** 更新日志 */
+    changelogs: string[];
   }
 
   // window