attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 没有更改

Browse Source
This commit is contained in:
wf 2024-04-12 12:34:18 +08:00
commit 1872bf46b8
7 changed files with 284 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.husky/_/applypatch-msg
View File

@ -1,2 +1,2 @@
#!/usr/bin/env sh #!/usr/bin/env sh
. "${0%/*}/h" . "${0%/*}/h"

2
.husky/_/commit-msg
View File

@ -1,2 +1,2 @@
#!/usr/bin/env sh #!/usr/bin/env sh
. "${0%/*}/h" . "${0%/*}/h"

6
src/router/index.ts
View File

@ -1,5 +1,5 @@
import { createRouter, createWebHashHistory } from "vue-router"; import { createRouter, createWebHashHistory } from "vue-router";
import { dynamicRoutes, staticRoutes, notFoundAndNoPower } from "@/router/route.ts"; import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
import { initSetRouter } from "@/router/route-output"; import { initSetRouter } from "@/router/route-output";
import NProgress from "@/config/nprogress"; import NProgress from "@/config/nprogress";
import pinia from "@/store/index"; import pinia from "@/store/index";
@ -11,7 +11,7 @@ import { useUserInfoStore } from "@/store/user-info";
* @method createRouter(options: RouterOptions): Router * @method createRouter(options: RouterOptions): Router
* @link 参考：https://next.router.vuejs.org/zh/api/#createrouter * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
*/ */
export const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
/** /**
* 说明： * 说明：
@ -19,7 +19,7 @@ export const router = createRouter({
* 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面 * 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面
* 防止 404、401 不在 layout 布局中，不设置的话，404、401界面将全屏显示 * 防止 404、401 不在 layout 布局中，不设置的话，404、401界面将全屏显示
*/ */
routes: [...dynamicRoutes, ...staticRoutes, ...notFoundAndNoPower] // 这里只需要设置兜底路由即可，其它的路由通过addRoute动态添加 routes: [...staticRoutes, ...notFoundAndNoPower] // 这里只需要设置兜底路由即可，其它的路由通过addRoute动态添加
}); });
// 路由加载前 // 路由加载前

46
src/router/route-output.ts
View File

@ -1,13 +1,53 @@
import { dynamicRoutes } from "@/router/route"; import { dynamicRoutes } from "@/router/route";
import pinia from "@/store/index"; import pinia from "@/store/index";
import router from "@/router/index.ts";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { useUserInfoStore } from "@/store/user-info"; import { useUserInfoStore } from "@/store/user-info";
// import { useRoutesListStore } from "@/store/route-list"; import { useRoutesListStore } from "@/store/route-list";
/**
* 1、过滤有权限的路由树，缓存，addRoutes添加路由
* 2、通过有权限的路由树生成路由name数组，缓存
*/
export function initSetRouter() { export function initSetRouter() {
// 过滤后的结果 const store = useRoutesListStore(pinia);
// 根据角色权限过滤树
let filteredData = filterByRole(dynamicRoutes[0].children); let filteredData = filterByRole(dynamicRoutes[0].children);
console.log("路由处理完", filteredData); store.setRouteTree(filteredData);
// 根据树生成一维路由数组
const flattenedArray = linearArray(filteredData);
// 设置完整的路由，二维路由，顶层路由 + 二级的一维路由
const twoStoryTree = dynamicRoutes.map(item => {
if (flattenedArray.length > 0) item.redirect = flattenedArray[0].path;
item.children = flattenedArray;
return item;
});
// 动态添加路由
twoStoryTree.forEach((route: any) => router.addRoute(route));
// 根据一维路由设置缓存name
setCacheName(flattenedArray);
const { routeTree, routeNames } = storeToRefs(store);
console.log("一维数组", routeTree.value, routeNames.value); // 缓存需要修改，路由树这里没有数据
}
// 设置缓存name
export function setCacheName(flattenedArray: any) {
const store = useRoutesListStore(pinia);
const cacheName = flattenedArray.map((item: any) => item.name);
store.setrouteNames(cacheName);
}
// 路由转一维数组
export function linearArray(tree: any) {
const result = [];
while (tree.length) {
const next = tree.pop();
if (Array.isArray(next.children)) {
tree.push(...next.children);
}
result.push(next);
}
return result.reverse();
} }
// 过滤路由树，返回有权限的树 // 过滤路由树，返回有权限的树

394
src/router/route.ts
View File

@ -1,197 +1,197 @@
/** /**
* 路由path路径与文件夹名称相同，找文件可以浏览器地址快速查找，方便定位文件 * 路由path路径与文件夹名称相同，找文件可以浏览器地址快速查找，方便定位文件
* *
* 路由meta对象参数，我们通常将属性放到meta对象中 * 路由meta对象参数，我们通常将属性放到meta对象中
* meta: { * meta: {
* title: 菜单栏以及 tagsView 栏、菜单搜索名称（国际化） * title: 菜单栏以及 tagsView 栏、菜单搜索名称（国际化）
* isLink: 是否是超链接菜单，开启外链条件：1、 isLink：链接地址不为空 2、isIframe: false * isLink: 是否是超链接菜单，开启外链条件：1、 isLink：链接地址不为空 2、isIframe: false
* isHide: 是否隐藏此路由 * isHide: 是否隐藏此路由
* isKeepAlive: 是否缓存组件状态 * isKeepAlive: 是否缓存组件状态
* isAffix: 是否固定在 tagsView 栏上 * isAffix: 是否固定在 tagsView 栏上
* isIframe: 是否内嵌窗口，开启条件：1、isIframe：true 2、isLike：链接地址不为空 * isIframe: 是否内嵌窗口，开启条件：1、isIframe：true 2、isLike：链接地址不为空
* roles: 当前路由权限表示，取角色管理。路由控制显示、隐藏。 超级管理员：admin；普通角色：common * roles: 当前路由权限表示，取角色管理。路由控制显示、隐藏。 超级管理员：admin；普通角色：common
* icon: 菜单、tagsView 图标等 * icon: 菜单、tagsView 图标等
* } * }
*/ */
/** /**
* 路由的层级设置 * 路由的层级设置
* 一级children下的一级路由为menu菜单的最外层，例如：首页、系统设置、权限管理，在这里我称它为 `children下的一级路由` * 一级children下的一级路由为menu菜单的最外层，例如：首页、系统设置、权限管理，在这里我称它为 `children下的一级路由`
* children下的一级路由内在设置children则是在一级当前菜单下再配置菜单 * children下的一级路由内在设置children则是在一级当前菜单下再配置菜单
* 依此类推 * 依此类推
*/ */
export const dynamicRoutes = [ export const dynamicRoutes = [
{ {
path: "/", path: "/",
name: "/", name: "/",
redirect: "/home", redirect: "/home",
component: () => import("@/layout/index.vue"), // 容器布局-顶层路由 component: () => import("@/layout/index.vue"), // 容器布局-顶层路由
meat: { meat: {
isKeepAlive: true isKeepAlive: true
}, },
// 二级路由-主要渲染页面 // 二级路由-主要渲染页面
children: [ children: [
{ {
path: "/home", path: "/home",
name: "home", name: "home",
component: () => import("@/views/home/home.vue"), component: () => import("@/views/home/home.vue"),
meta: { meta: {
title: "home", // 国际化 title: "home", // 国际化
isHide: false, // 是否隐藏此路由 isHide: false, // 是否隐藏此路由
isKeepAlive: true, // 缓存组件状态 isKeepAlive: true, // 缓存组件状态
isAffix: true, // 固定在tagesView栏上 isAffix: true, // 固定在tagesView栏上
isLink: "", // 是否外链 isLink: "", // 是否外链
isIframe: false, // 是否内嵌窗口 isIframe: false, // 是否内嵌窗口
roles: ["admin", "common"], // 路由权限 roles: ["admin", "common"], // 路由权限
icon: "home" // 菜单图标 icon: "home" // 菜单图标
} }
}, },
{ {
path: "/home2", path: "/home2",
name: "home2", name: "home2",
component: () => import("@/views/home/home.vue"), component: () => import("@/views/home/home.vue"),
meta: { meta: {
title: "home2", // 国际化 title: "home2", // 国际化
isHide: false, // 是否隐藏此路由 isHide: false, // 是否隐藏此路由
isKeepAlive: true, // 缓存组件状态 isKeepAlive: true, // 缓存组件状态
isAffix: true, // 固定在tagesView栏上 isAffix: true, // 固定在tagesView栏上
isLink: "", // 是否外链 isLink: "", // 是否外链
isIframe: false, // 是否内嵌窗口 isIframe: false, // 是否内嵌窗口
roles: ["common"], // 路由权限 roles: ["common"], // 路由权限
icon: "home" // 菜单图标 icon: "home" // 菜单图标
} }
}, },
{ {
path: "/common-components", path: "/common-components",
name: "common-components", name: "common-components",
redirect: "/common-components/form-component", redirect: "/common-components/form-component",
component: () => import("@/views/common-components/form-component/form-component.vue"), component: () => import("@/views/common-components/form-component/form-component.vue"),
meta: { meta: {
title: "common-components", title: "common-components",
isLink: "", isLink: "",
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: false, isIframe: false,
roles: ["admin"], roles: ["admin"],
icon: "set" icon: "set"
}, },
children: [ children: [
{ {
path: "/common-components/form-component", path: "/common-components/form-component",
name: "form-component", name: "form-component",
component: () => import("@/views/common-components/form-component/form-component.vue"), component: () => import("@/views/common-components/form-component/form-component.vue"),
meta: { meta: {
title: "form-component", title: "form-component",
isLink: "", isLink: "",
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ["admin"], roles: ["admin"],
icon: "common" icon: "common"
} }
} }
] ]
}, },
{ {
path: "/multilevel-menu", path: "/multilevel-menu",
name: "multilevel-menu", name: "multilevel-menu",
redirect: "/multilevel-menu/second-menu", redirect: "/multilevel-menu/second-menu",
component: () => import("@/views/multilevel-menu/second-menu/second-menu.vue"), component: () => import("@/views/multilevel-menu/second-menu/second-menu.vue"),
meta: { meta: {
title: "multilevel-menu", title: "multilevel-menu",
isLink: "", isLink: "",
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: false, isIframe: false,
roles: ["admin"], roles: ["admin"],
icon: "switch" icon: "switch"
}, },
children: [ children: [
{ {
path: "/multilevel-menu/second-menu", path: "/multilevel-menu/second-menu",
name: "second-menu", name: "second-menu",
component: () => import("@/views/multilevel-menu/second-menu/second-menu.vue"), component: () => import("@/views/multilevel-menu/second-menu/second-menu.vue"),
meta: { meta: {
title: "second-menu", title: "second-menu",
isLink: "", isLink: "",
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ["admin"], roles: ["admin"],
icon: "common" icon: "common"
}, },
children: [ children: [
{ {
path: "/multilevel-menu/third-menu", path: "/multilevel-menu/third-menu",
name: "third-menu", name: "third-menu",
component: () => import("@/views/multilevel-menu/third-menu/third-menu.vue"), component: () => import("@/views/multilevel-menu/third-menu/third-menu.vue"),
meta: { meta: {
title: "third-menu", title: "third-menu",
isLink: "", isLink: "",
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ["admin"], roles: ["admin"],
icon: "common" icon: "common"
} }
} }
] ]
} }
] ]
} }
] ]
} }
]; ];
/** /**
* 静态路由 （默认路由） * 静态路由 （默认路由）
* 此路由不要动，用于做静态路由定向，如果要添加路由，请在 `dynamicRoutes数组` 中添加 * 此路由不要动，用于做静态路由定向，如果要添加路由，请在 `dynamicRoutes数组` 中添加
* @description 前端控制路由 直接改 dynamicRoutes 中的路由，后端控制则不需要，请求接口路由数据时，覆盖 dynamicRoutes 第一个顶层 children 的内容（全屏，不包括 lauyout 中的路由出口） * @description 前端控制路由 直接改 dynamicRoutes 中的路由，后端控制则不需要，请求接口路由数据时，覆盖 dynamicRoutes 第一个顶层 children 的内容（全屏，不包括 lauyout 中的路由出口）
* @returns 返回路由菜单数据 * @returns 返回路由菜单数据
*/ */
export const staticRoutes = [ export const staticRoutes = [
{ {
path: "/login", path: "/login",
name: "login", name: "login",
component: () => import("@/views/login/login.vue"), component: () => import("@/views/login/login.vue"),
meta: { meta: {
title: "登录" title: "登录"
} }
} }
/** /**
* 提示：写在这里的为全屏界面，不建议写在这里 * 提示：写在这里的为全屏界面，不建议写在这里
* 非全屏界面，请写在 dynamicRoutes 路由数组中 * 非全屏界面，请写在 dynamicRoutes 路由数组中
*/ */
]; ];
/** /**
* 定义404、401界面 * 定义404、401界面
* @link 参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#netlify * @link 参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
*/ */
export const notFoundAndNoPower = [ export const notFoundAndNoPower = [
// 未找到页面的时候跳转该页面 // 未找到页面的时候跳转该页面
{ {
path: "/:path(.*)*", path: "/:path(.*)*",
name: "notFound", name: "notFound",
component: () => import("@/views/error/404.vue"), component: () => import("@/views/error/404.vue"),
meta: { meta: {
title: "notFound", title: "notFound",
isHide: true isHide: true
} }
}, },
{ {
path: "/401", path: "/401",
name: "noPower", name: "noPower",
component: () => import("@/views/error/401.vue"), component: () => import("@/views/error/401.vue"),
meta: { meta: {
title: "notFound", title: "notFound",
isHide: true isHide: true
} }
} }
]; ];

7
src/store/route-list.ts
View File

@ -7,15 +7,22 @@ import { defineStore } from "pinia";
*/ */
export const useRoutesListStore = defineStore("routeList", { export const useRoutesListStore = defineStore("routeList", {
state: (): any => ({ state: (): any => ({
routeTree: [], // 路由树
routeList: [], // 路由数据 routeList: [], // 路由数据
routeNames: [] // 路由名称 routeNames: [] // 路由名称
}), }),
actions: { actions: {
async setRouteTree(data: any) {
this.routeTree = data;
},
async setRouteList(data: Array<string>) { async setRouteList(data: Array<string>) {
this.routesList = data; this.routesList = data;
}, },
async setrouteNames(data: Array<string>) { async setrouteNames(data: Array<string>) {
this.routeNames = data; this.routeNames = data;
} }
},
persist: {
enabled: true
} }
}); });

64
src/store/user-info.ts
View File

@ -1,32 +1,32 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
/** /**
* 用户信息 * 用户信息
* @methods setAccount 设置账号信息 * @methods setAccount 设置账号信息
* @methods setToken 设置token * @methods setToken 设置token
* @methods logOut 退出登录 * @methods logOut 退出登录
*/ */
export const useUserInfoStore = defineStore("routeList", { export const useUserInfoStore = defineStore("userInfo", {
state: (): any => ({ state: (): any => ({
account: { account: {
username: "", username: "",
roles: [] roles: []
}, // 账号信息 }, // 账号信息
token: "" // token token: "" // token
}), }),
actions: { actions: {
async setAccount(data: Array<string>) { async setAccount(data: Array<string>) {
this.account = data; this.account = data;
}, },
async setToken(data: string) { async setToken(data: string) {
this.token = data; this.token = data;
}, },
async logOut() { async logOut() {
this.account = {}; this.account = {};
this.token = ""; this.token = "";
} }
}, },
persist: { persist: {
enabled: true // 开启数据缓存-默认缓存全部数据 enabled: true // 开启数据缓存-默认缓存全部数据
} }
}); });