feat(工具箱): 完善逻辑，动态生成路由

src/assets/js/toolbox-data.js

@@ -1,8 +1,7 @@
 // 工具箱
 
-// import {
-//   defineAsyncComponent,
-// } from 'vue';
+const META_URL = import.meta.url;
+const MODULES = import.meta.glob('@/views/ToolboxView/**/*.vue');
 
 /**
  * @desc 工具列表
@@ -217,3 +216,47 @@ export const toolList = [
     ],
   },
 ];
+
+/**
+ * @description 获取动态组件
+ * @param {string} path 工具页面相对路径
+ */
+function getDynamicComponent(path) {
+
+  let key = new URL(`../../views/ToolboxView/${path}.vue`, META_URL).pathname;
+  let component = MODULES[key];
+
+  return component;
+
+}
+
+/** 生成工具箱页面路由 */
+export function getToolboxRoutes() {
+
+  /** @type {VueRouteRecordRaw[]} */
+  let routes = [];
+
+  toolList.forEach((categoryItem) => {
+    categoryItem.items.forEach((toolItem) => {
+
+      // 跳过未启用的工具
+      if (!toolItem.enabled) {
+        return;
+      }
+
+      routes.push({
+        path: `/toolbox-view/${toolItem.id}`,
+        name: `Toolbox/${toolItem.component}`,
+        component: getDynamicComponent(toolItem.component),
+        meta: {
+          isToolDetail: true,
+          title: toolItem.title,
+        },
+      });
+
+    });
+  });
+
+  return routes;
+
+}

src/router/index.js

@@ -3,6 +3,10 @@ import {
   createWebHashHistory,
 } from 'vue-router';
 
+import {
+  getToolboxRoutes,
+} from '@/assets/js/toolbox-data';
+
 import {
   updateAppTitle,
 } from '@/assets/js/utils';
@@ -62,9 +66,11 @@ export const router = createRouter({
       component: () => import('@/views/ToolboxView/ToolboxView.vue'),
       meta: {
         iconClass: 'mdi mdi-tools',
+        isToolDetail: false,
         showInAside: TOOLBOX_MODULE_ENABLED,
         title: TOOLBOX_MODULE_TITLE,
       },
+      children: getToolboxRoutes(),
     },
     {
       path: '/minecraft-ctrl-view',

src/views/ToolboxView/Calculation/CalcDownloadTime.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Calculation/CalcRatio.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Conversion/ConvertHtmlEntities.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Conversion/ConvertTextStructure.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Conversion/ConvertTimestamp.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Conversion/UrlEncodeDecode.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Edit/CsvEditor.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Generator/GenerateRandomString.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Generator/GenerateUrls.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Minecraft/CalcChunkLocation.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Minecraft/GenerateDynmapRenderdata.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Minecraft/UuidConverter.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Network/WebSocketTestTool.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Other/OpenNewWindow.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/Other/RunJavaScript.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tool-detail-page"></div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/ToolboxView/ToolboxView.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="toolbox-view flex-col">
     <div class="app-view-header">
-      <span>{{ TOOLBOX_MODULE_TITLE }}</span>
+      <span>{{ routeTitle }}</span>
     </div>
     <div class="app-view-content is-transparent">
+
+      <!-- 工具列表 -->
       <div class="tool-list">
         <n-collapse
           :default-expanded-names="toolList.map(item => item.id)"
@@ -20,8 +22,10 @@
             <!-- 工具项 -->
             <div
               v-for="toolItem in categoryItem.items"
+              v-show="toolItem.enabled"
               :key="toolItem.id"
               class="tool-item shadow-1"
+              @click="handleOpenTool(toolItem)"
             >
               <div class="item-header">
                 <span :class="['item-icon', toolItem.iconClass || 'mdi mdi-package-variant-closed']"></span>
@@ -40,6 +44,15 @@
 
         </n-collapse>
       </div>
+
+      <!-- 工具页面 -->
+      <div
+        v-show="isToolDetail"
+        class="tool-detail-wrapper"
+      >
+        <router-view></router-view>
+      </div>
+
     </div>
   </div>
 </template>
@@ -49,13 +62,43 @@ import {
   NCollapse, NCollapseItem, NEllipsis,
 } from 'naive-ui';
 
+import {
+  computed,
+} from 'vue';
+
+import {
+  useRoute, useRouter,
+} from 'vue-router';
+
 import {
   toolList,
 } from '@/assets/js/toolbox-data';
 
-import {
-  TOOLBOX_MODULE_TITLE,
-} from '@/config/modules';
+/** 是否为工具页面 */
+const isToolDetail = computed(() => {
+  return route.meta.isToolDetail;
+});
+
+/** 路由 */
+const route = useRoute();
+
+/** 路由 */
+const router = useRouter();
+
+/** 页面标题 */
+const routeTitle = computed(() => {
+  return route.meta.title;
+});
+
+/** 
+ * @description 打开工具
+ * @param {ToolboxItem} data
+ */
+function handleOpenTool(data) {
+  router.push({
+    name: `Toolbox/${data.component}`,
+  });
+}
 </script>
 
 <style lang="less" scoped>
@@ -100,4 +143,13 @@ import {
     opacity: 0.75;
   }
 }
+
+.tool-detail-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #FFF;
+}
 </style>