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

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>