From 647940bc6bce4379926547e017d942da939c7ac9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=94=90=E5=A4=A9=E5=A8=A5?= <3517601051@qq,com> Date: Sun, 21 Jul 2024 19:59:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...25\346\240\217\345\206\205\345\256\271.md" | 53 +++++ ...14\350\217\234\345\215\225\346\240\217.md" | 184 ++++++++++++++++++ ...13\351\227\264\350\267\263\350\275\254.md" | 73 +++++++ 3 files changed, 310 insertions(+) create mode 100644 "\345\224\220\345\244\251\345\250\245/20240715-\350\217\234\345\215\225\346\240\217\345\206\205\345\256\271.md" create mode 100644 "\345\224\220\345\244\251\345\250\245/20240716-\346\240\207\347\255\276\346\240\217\345\222\214\350\217\234\345\215\225\346\240\217.md" create mode 100644 "\345\224\220\345\244\251\345\250\245/20240717-\350\217\234\345\215\225\346\240\217\345\222\214\346\240\207\347\255\276\346\240\217\344\271\213\351\227\264\350\267\263\350\275\254.md" diff --git "a/\345\224\220\345\244\251\345\250\245/20240715-\350\217\234\345\215\225\346\240\217\345\206\205\345\256\271.md" "b/\345\224\220\345\244\251\345\250\245/20240715-\350\217\234\345\215\225\346\240\217\345\206\205\345\256\271.md" new file mode 100644 index 0000000..4c27d20 --- /dev/null +++ "b/\345\224\220\345\244\251\345\250\245/20240715-\350\217\234\345\215\225\346\240\217\345\206\205\345\256\271.md" @@ -0,0 +1,53 @@ +```js + + + +``` \ No newline at end of file diff --git "a/\345\224\220\345\244\251\345\250\245/20240716-\346\240\207\347\255\276\346\240\217\345\222\214\350\217\234\345\215\225\346\240\217.md" "b/\345\224\220\345\244\251\345\250\245/20240716-\346\240\207\347\255\276\346\240\217\345\222\214\350\217\234\345\215\225\346\240\217.md" new file mode 100644 index 0000000..de2baa1 --- /dev/null +++ "b/\345\224\220\345\244\251\345\250\245/20240716-\346\240\207\347\255\276\346\240\217\345\222\214\350\217\234\345\215\225\346\240\217.md" @@ -0,0 +1,184 @@ +```js +import { routes } from '../route/staticRoutes' +import { defineStore } from 'pinia' +import { computed, reactive, ref } from 'vue' +import { useRouter } from 'vue-router' + + +// 为了将路由实例引入进来，特意采用了setup语法，有没有注意到defineStore函数，没错，第2个参数是个函数，这就是setup语法 +export const useRouterStore = defineStore('router', () => { + // 引入路由实例 + const router = useRouter(); + + // 以下为定义的state + const menuArr = reactive([]);// 菜单数据 + const tabArr = reactive([// 标签栏数据 + { + key: '/desktop', + title: '工作台', + content: '', + closable:false + }, + { + key: '/dashboard', + title: '仪表盘', + content: '', + closable:false + } + ]); + // 当前的key，用于绑定到菜单栏和标签栏的“当前项”属性 + let activeKey = ref('/desktop') + const selectKeys=reactive([]); + + // 这个是计算属性，也是getters + const flatMenuArr = computed(() => { + let arr = flatArr(menuArr); + return arr; + }) + // 由路由数据生成菜单数据 + function generatRoutes() { + // 清空原来的所有菜单数据，准备重新生成 + this.menuArr.splice(0); + routes.forEach(item => { + let menu = createMenuItemFromRoute(item); + if (menu) { + this.menuArr.push(menu); + } + + }) + } + + function addTab(key) {// 添加对象到标签数组中（如果不存在则添加） + // console.log('拍扁的菜单数据', this.flatMenuArr); + var isExist = this.tabArr.filter(item => item.key === key); + if (isExist.length > 0) { + + } else { + let tmp = getOjbectByKey(key, this.flatMenuArr); + // console.log(tmp); + let obj = { + title: tmp.title, + content: ``, + key: key, + } + this.tabArr.push(obj); + } + } + + // 菜单栏和标签栏点击后，改变路由的统一逻辑 + function changeActiveRoute(key) { + router.push(key); + this.addTab(key); + console.log(selectKeys); + + this.changeActiveKey(key); + + console.log(selectKeys); + } + + function remove (targetKey){ + let lastIndex = 0; + tabArr.value.forEach((pane, i) => { + if (pane.key === targetKey) { + lastIndex = i - 1; + } + }); + tabArr.value = tabArr.value.filter(pane => pane.key !== targetKey); + if (tabArr.value.length && activeKey.value === targetKey) { + if (lastIndex >= 0) { + activeKey.value = tabArr.value[lastIndex].key; + } else { + activeKey.value = tabArr.value[0].key; + } + } + }; + function onEdit(targetKey, action){ + console.log(onEdit); + if (action === 'add') { + add(); + } else { + remove(targetKey); + } + }; + + // 改变当前项 + function changeActiveKey(key) {//切换当前Key + console.log('这里输出准备要修改的key值：', key); + + if (activeKey.value !== key) { + activeKey.value = key; + selectKeys.splice(0); + selectKeys.push(activeKey.value); + } + } + + + // 这里必须返回 + return { + menuArr, + tabArr, + activeKey, + selectKeys, + flatMenuArr, + generatRoutes, + addTab, + changeActiveKey, + changeActiveRoute + } +}) + +// 一个函数，将一个路由对象，转换为左侧菜单栏对象 +const createMenuItemFromRoute = (route) => { + if (route.meta.hide && route.meta.hide === true) { + return; + } + // 先拿到路由中的基本信息 + let obj = { + key: route.path, + title: route.meta.title, + label: route.meta.title, + } + + // 尝试处理其下级路由，将其转化为菜单数组返回，挂载到孩子属性 + let arr = []; + if (route.children && route.children.length > 0) { + route.children.forEach(item => { + let tmpObj = createMenuItemFromRoute(item); + arr.push(tmpObj); + }) + + if (arr.length > 0) { + obj.children = arr; + } + } + return obj; +} + +// 从数组中筛选key值对应的对象 +const getOjbectByKey = function (key, arr) { + let tmp = arr.filter(item => item.key === key); + if (tmp.length > 0) { + return tmp[0]; + } + return undefined; +} + +// 将数组扁平化，突然想到，这个好像可以用计算属性，嗯，就这么办，所以这个闲置了，本功能代码待清理 +const flatArr = (arr) => { + let resArr = []; + arr.forEach(item => { + let obj = { + key: item.key, + title: item.title, + content: '' + } + resArr.push(obj); + if (item.children && item.children.length > 0) { + let tmpArr = flatArr(item.children); + resArr = resArr.concat(tmpArr); + } + }) + return resArr; +} + +``` \ No newline at end of file diff --git "a/\345\224\220\345\244\251\345\250\245/20240717-\350\217\234\345\215\225\346\240\217\345\222\214\346\240\207\347\255\276\346\240\217\344\271\213\351\227\264\350\267\263\350\275\254.md" "b/\345\224\220\345\244\251\345\250\245/20240717-\350\217\234\345\215\225\346\240\217\345\222\214\346\240\207\347\255\276\346\240\217\344\271\213\351\227\264\350\267\263\350\275\254.md" new file mode 100644 index 0000000..c1617d5 --- /dev/null +++ "b/\345\224\220\345\244\251\345\250\245/20240717-\350\217\234\345\215\225\346\240\217\345\222\214\346\240\207\347\255\276\346\240\217\344\271\213\351\227\264\350\267\263\350\275\254.md" @@ -0,0 +1,73 @@ +```js +import Layout from '../components/Layout.vue' + +export const routes = [ + { + path: '/', + component: Layout, + meta: { title: '首页', icon: '' }, + children: [ + { + path: '/desktop', + component: () => import('../views/desktop.vue'), + meta: { title: '工作台', icon: '' } + }, + { + path: '/dashboard', + component: () => import('../views/dashboard.vue'), + meta: { title: '仪表盘', icon: '' } + } + ] + }, + { + path: '/system', + component: Layout, + meta: { title: '系统管理', icon: '' }, + children: [ + { + path: '/system/user', + component: () => import('../views/user.vue'), + meta: { title: '用户管理' } + }, + { + path: '/system/role', + component: () => import('../views/role.vue'), + meta: { title: '角色管理' } + }, + { + path: '/system/permission', + component: () => import('../views/permission.vue'), + meta: { title: '权限管理' } + }, + { + path: '/system/POST/regist', + component: () => import('../views/POST/regist.vue'), + meta: { title: '账号注册' } + }, + ] + + }, + { + path: '/login', + component: () => import("../views/login.vue"), + meta: { title: '登录', hide: true } + }, + { + path: '/:pathMatch(.*)*', + component: () => import("../views/ex404.vue"), + meta: { title: 'notFound', hide: true } + } + , + { + path:'/regist', + component:()=>import("../views/POST/regist.vue"), + meta:{title:"注册",hide:true} + } + , + { + path:'/Password', + component:()=>import("../views/POST/Password.vue"), + meta:{title:"重置密码",hide:true} + } +] +``` \ No newline at end of file -- Gitee