diff --git a/src/assets/js/toolbox-data.js b/src/assets/js/toolbox-data.js index 02995b0..0a0329e 100644 --- a/src/assets/js/toolbox-data.js +++ b/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; + +} diff --git a/src/router/index.js b/src/router/index.js index f937e32..513a475 100644 --- a/src/router/index.js +++ b/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', diff --git a/src/views/ToolboxView/Calculation/CalcDownloadTime.vue b/src/views/ToolboxView/Calculation/CalcDownloadTime.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Calculation/CalcDownloadTime.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Calculation/CalcRatio.vue b/src/views/ToolboxView/Calculation/CalcRatio.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Calculation/CalcRatio.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Conversion/ConvertHtmlEntities.vue b/src/views/ToolboxView/Conversion/ConvertHtmlEntities.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Conversion/ConvertHtmlEntities.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Conversion/ConvertTextStructure.vue b/src/views/ToolboxView/Conversion/ConvertTextStructure.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Conversion/ConvertTextStructure.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Conversion/ConvertTimestamp.vue b/src/views/ToolboxView/Conversion/ConvertTimestamp.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Conversion/ConvertTimestamp.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Conversion/UrlEncodeDecode.vue b/src/views/ToolboxView/Conversion/UrlEncodeDecode.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Conversion/UrlEncodeDecode.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Edit/CsvEditor.vue b/src/views/ToolboxView/Edit/CsvEditor.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Edit/CsvEditor.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Generator/GenerateRandomString.vue b/src/views/ToolboxView/Generator/GenerateRandomString.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Generator/GenerateRandomString.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Generator/GenerateUrls.vue b/src/views/ToolboxView/Generator/GenerateUrls.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Generator/GenerateUrls.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Minecraft/CalcChunkLocation.vue b/src/views/ToolboxView/Minecraft/CalcChunkLocation.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Minecraft/CalcChunkLocation.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Minecraft/GenerateDynmapRenderdata.vue b/src/views/ToolboxView/Minecraft/GenerateDynmapRenderdata.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Minecraft/GenerateDynmapRenderdata.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Minecraft/UuidConverter.vue b/src/views/ToolboxView/Minecraft/UuidConverter.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Minecraft/UuidConverter.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Network/WebSocketTestTool.vue b/src/views/ToolboxView/Network/WebSocketTestTool.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Network/WebSocketTestTool.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Other/OpenNewWindow.vue b/src/views/ToolboxView/Other/OpenNewWindow.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Other/OpenNewWindow.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/Other/RunJavaScript.vue b/src/views/ToolboxView/Other/RunJavaScript.vue new file mode 100644 index 0000000..714cdbc --- /dev/null +++ b/src/views/ToolboxView/Other/RunJavaScript.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/ToolboxView/ToolboxView.vue b/src/views/ToolboxView/ToolboxView.vue index d884163..0fac7e0 100644 --- a/src/views/ToolboxView/ToolboxView.vue +++ b/src/views/ToolboxView/ToolboxView.vue @@ -1,9 +1,11 @@ @@ -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}`, + }); +}