From 2952100d796442628b0443aaff3393266fb868af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A2=E6=B5=A9=E4=B8=9C?= <975115611@qq.com> Date: Wed, 5 Feb 2025 18:02:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(router):=20=E4=BC=98=E5=8C=96=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=20-=20=E9=87=8D?= =?UTF-8?q?=E6=9E=84=E4=BA=86=E8=B7=AF=E7=94=B1=20=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E7=BA=A7=E5=88=AB=E8=B7=AF=E7=94=B1=E7=9A=84=E5=A2=9E=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 ++ src/home.vue | 9 ++-- src/pages/vueFlow/flowList.vue | 2 +- src/pages/vueFlow/useDnD.js | 2 - src/router/index.js | 93 +++++++++++++++++++++++++--------- src/stortes/menu.js | 3 +- vite.config.js | 3 +- 7 files changed, 79 insertions(+), 36 deletions(-) diff --git a/.gitignore b/.gitignore index e97e5c2..741849a 100644 --- a/.gitignore +++ b/.gitignore @@ -36,6 +36,9 @@ lerna-debug.log* !.vscode/launch.json !.vscode/extensions.json + +.history + # dotenv environment variable files .env .env.test diff --git a/src/home.vue b/src/home.vue index 5785edc..29b7f27 100644 --- a/src/home.vue +++ b/src/home.vue @@ -109,7 +109,7 @@ const handleClickOutside = e => { const refresh = () => { nextTick(async () => { isShowRouter.value = false; - await proxy.$router.push(route.fullPath.replace(/^\//, '')); + await proxy.$router.push(route.fullPath); isShowRouter.value = true; // isShowRouter.value = false; // await proxy.$router.replace(rightMouseKey.value); @@ -159,14 +159,14 @@ const handleContextOut = e => { }; const handleContextMenu = e => { contextMenuVisible.value = false; - let result = findNodeById(allMenuArray.value, route.fullPath.replace(/^\//, '')); + let result = findNodeById(allMenuArray.value, route.path); if (result) { contextMenuVisible.value = true; left.value = e.clientX - 10; top.value = e.clientY + 15; // rightMouseKey.value = e.srcElement.id.split('-')[1]; // 获取地址栏的菜单的路由参数 拼接在rightMouseKey后边 - rightMouseKey.value = route.fullPath.replace(/^\//, ''); + rightMouseKey.value = route.fullPath; rightMouseData.value = result; // 判断当前右键点击的是否是第0或者是第一项 let index = activeTabArray.value.findIndex(item => item.url === rightMouseKey.value); @@ -196,9 +196,8 @@ const removeTab = pane => { proxy.$router.push(editableTabsValue.value); }; const handleClick = (pane, ev) => { - console.log(pane, 'pane', activeTabArray.value); // 路由跳转 - proxy.$router.push(pane.paneName); + proxy.$router.replace(pane.paneName); }; const handleSelect = (key, keyPath) => { diff --git a/src/pages/vueFlow/flowList.vue b/src/pages/vueFlow/flowList.vue index af3585e..b02c3e5 100644 --- a/src/pages/vueFlow/flowList.vue +++ b/src/pages/vueFlow/flowList.vue @@ -43,7 +43,7 @@ const total = ref(0); const govueFlow = row => { // 路由跳转 proxy.$router.push({ - path: '/vueFlow', + path: '/home/vueFlow', query: { id: row ? row.id : '' }, }); }; diff --git a/src/pages/vueFlow/useDnD.js b/src/pages/vueFlow/useDnD.js index 33f0be8..abb97ad 100644 --- a/src/pages/vueFlow/useDnD.js +++ b/src/pages/vueFlow/useDnD.js @@ -1,7 +1,5 @@ import { useVueFlow } from '@vue-flow/core'; import { ref, watch } from 'vue'; -import api from '@/utils/request'; -import { data } from 'autoprefixer'; let id = 1; function getNodeId() { diff --git a/src/router/index.js b/src/router/index.js index 89cc7d1..ebdc94c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -34,6 +34,10 @@ const router = createRouter({ path: '/index', component: () => import('@/pages/index.vue'), }, + // { + // path: '/vueFlow', + // component: () => import('@/pages/vueFlow/index.vue'), + // }, ], }, { @@ -50,45 +54,36 @@ const router = createRouter({ }); // 转换路由的函数 -function transformRoute(route, parentPath = '') { +function transformRoute(route) { + // 对于menutype为2的路由，我们直接使用`/${route.url}`作为path； + // 否则，我们仅使用`${route.url}`来避免嵌套。 + const pathPrefix = route.menutype == 2 ? '/' : ''; + const transformed = { - path: `${parentPath}${route.url}`, // 确保路径正确拼接 + path: `${route.url}`, // 确保路径是相对于根路径的 name: route.code, meta: { icon: route.icon, - keepalive: route.keepalive == '1', + keepalive: route.keepalive === '1', title: route.name, }, - url: route.url, - keepalive: route.keepalive == '1', + url: `${route.url}`, + keepalive: route.keepalive === '1', menutype: route.menutype, sorts: route.sorts, - children: route.children ? route.children.map(child => transformRoute(child, `${parentPath}${route.url}/`)).filter(Boolean) : undefined, + // 移除了children递归调用，因为我们现在生成的是平级路由 }; - if (route.component) { const componentPath = `/src/pages/${route.component}.vue`; // 动态导入组件路径 if (components[componentPath]) { + // 使用动态导入的结果作为组件定义 transformed.component = components[componentPath]; } else { - // console.error(`组件不存在: ${componentPath}`); - // router.addRoute({ path: '/:catchAll(.*)', redirect: '/404' }); return null; // 跳过无效路由 } } - return transformed; -} -function filterMenuTree(menuTree) { - return menuTree - .filter(menu => menu.menutype !== '2') // 过滤掉 menutype 为 "2" 的节点 - .map(menu => { - if (menu.children && menu.children.length > 0) { - // 递归处理子菜单 - menu.children = filterMenuTree(menu.children); - } - return menu; - }); + return transformed; } let backendRoutes = []; // 异步加载路由并添加到路由器 @@ -98,14 +93,19 @@ const setupDynamicRoutes = async () => { const res = await api.menus(); backendRoutes = res.data; let menu = JSON.parse(JSON.stringify(backendRoutes)); + let menus = JSON.parse(JSON.stringify(backendRoutes)); const useMenuStores = useMenuStore(); // 递归过滤掉 menutype == 2 的数据 + menu = generateUrls(menu); menu = filterMenuTree(menu); useMenuStores.getAllMenu(menu); - useMenuStores.getAllMenuWithBtn(backendRoutes); + menus = generateUrls(menus); + useMenuStores.getAllMenuWithBtn(menus); + // useMenuStores.getAllMenuWithBtn(backendRoutes); + // 把树形数组转为评价结构 + backendRoutes = flattenTree(backendRoutes); // 转换路由 const transformedRoutes = backendRoutes.map(route => transformRoute(route)).filter(Boolean); // 过滤掉无效路由 - console.log('转换后的路由--------------------:', transformedRoutes); // 添加动态路由到 `/home` transformedRoutes.forEach(route => { router.addRoute('home', route); @@ -162,13 +162,58 @@ router.beforeEach(async (to, from, next) => { // useMenuStores.changeMenu(to); let obj = findNodeById(backendRoutes, to.name); if (obj && obj.menutype == 2) { - obj.url = to.fullPath.replace(/^\//, ''); + obj.url = to.fullPath; + // to.fullPath = to.fullPath.replace(/^\//, ''); useMenuStores.changeMenu(obj); useMenuStores.changeTabsValue(obj.url); } next(); // 正常导航 } }); +function filterMenuTree(menuTree) { + return menuTree + .filter(menu => menu.menutype !== '2') // 过滤掉 menutype 为 "2" 的节点 + .map(menu => { + if (menu.children && menu.children.length > 0) { + // 递归处理子菜单 + menu.children = filterMenuTree(menu.children); + } + return menu; + }); +} +// 递归处理树形数据，拼接 url +function generateUrls(tree) { + return tree.map(item => { + if (item.url) { + item.url = `/home/${item.url}`; // 如果url存在，则拼接'/home' + } + + // 如果有子节点，则递归处理子节点 + if (item.children && item.children.length > 0) { + item.children = generateUrls(item.children); + } + + return item; + }); +} +function flattenTree(tree) { + let result = []; + function traverse(node) { + // 将当前节点添加到结果数组中 + result.push(node); + // 如果当前节点有子节点，递归遍历子节点 + if (node.children && node.children.length > 0) { + node.children.forEach(child => { + traverse(child); + }); + } + } + // 遍历树形结构中的每个节点 + tree.forEach(node => { + traverse(node); + }); + return result; +} const findNodeById = (tree, url) => { for (const node of tree) { if (node.code === url) { diff --git a/src/stortes/menu.js b/src/stortes/menu.js index f5f861e..eb7b047 100644 --- a/src/stortes/menu.js +++ b/src/stortes/menu.js @@ -32,7 +32,7 @@ const menuStore = defineStore('menu', { // 获取含按钮菜单 getAllMenuWithBtn(val) { this.allMenuArray = val; - return val; + // return val; }, /** * 添加一个新的菜单项到活跃菜单数组中。 @@ -55,7 +55,6 @@ const menuStore = defineStore('menu', { } // 如果新菜单项不存在于活跃菜单数组中，则将其添加到数组中 this.activeTabArray.push(obj); - console.log(this.activeTabArray, '55555'); }, // 当前选中的tab页签 changeTabsValue(key) { diff --git a/vite.config.js b/vite.config.js index d3c5fb5..5f82898 100644 --- a/vite.config.js +++ b/vite.config.js @@ -5,7 +5,6 @@ import path from 'path'; import Unocss from 'unocss/vite'; export default defineConfig(({ mode }) => { const { VITE_PORT, VITE_BASE_URL, VITE_PROXY_DOMAIN_REAL } = loadEnv(mode, process.cwd()); - console.log(mode, 'mode'); const alias = { // 设置路径 // '~': path.resolve(__dirname, './'), @@ -39,4 +38,4 @@ export default defineConfig(({ mode }) => { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], }, }; -}); \ No newline at end of file +}); -- Gitee