yxuse 3.0.19 → 3.0.20

package/README.md

@@ -1,572 +1,572 @@
-# yxuse
-
-## 更新日志
-
-- 2024 4-01 (Vue2.x--> 2.0.11 Vue3.x--->3.0.18)
-
-  - 悬浮球新增语言切换的入口
-  - 新增翻译的模块 translate
-
-  ```js
-   export interface  YxuseOptions {
-        ...之前的配置
-        	/** 系统标识，isRenderLang为true时必传 */
-          systemKey?: string;
-    }
-    translate 模块方法说明
-
-    /**
-     * @description:初始化语言包
-     * @param {*} lang 语言包标识
-     * @param {*} systemKey 系统标识
-    */
-     initTranslate
-    /**
-     * @description:语言切换
-     * @param {*} lang 语言包标识
-    */
-     changeLang
-
-    /**
-     * @description:获取当前语言
-    */
-     getLang
-
-  ```
-
-- 2024 3-18 (Vue2.x--> 2.0.3 Vue3.x--->3.0.10)
-
-  - theme
-
-    - 主题初始化 install 方法新增配置，主要有当前开发的环境，在开发环境下无 token 会进行弹窗提示，进行自动登录，生产环境登录失效自动跳转至 loginUrl 地址（已内置）
-
-    ```js
-    export interface YxuseOptions {
-    	/** 是否渲染悬浮球*/
-    	isRenderToolbar?: boolean;
-    	/** 是否加载工单*/
-    	isRenderIssue?: boolean;
-    	/** 是否加载语言切换*/
-    	isRenderLang?: boolean;
-    	/** 登录页地址，非运管系统项目使用*/
-    	loginUrl?: string;
-    	/** 自定义登录api,非运管系统项目使用*/
-    	loginApiUrl?: string;
-    	/** 翻译Api地址,非运管系统项目使用*/
-    	translateApiUrl?: string;
-    	/** 主题列表接口,非运管系统项目使用*/
-    	themeApiUrl: string;
-    	/** 首页地址，非运管系统项目使用*/
-    	homeUrl?: string;
-    	/** 系统默认语言*/
-    	lang?: string;
-    	/** 当前环境*/
-    	environment: "development" | "production";
-    }
-    ```
-
-    - 新增判断当前色值是否在当前主题中的方法 findColorByTheme(key: string, color: string)
-
-  - auth
-
-    - 新增获取系统配置的方法 getSystemConfig(key: string)
-
-  - utils
-    - 新增判断该色值是否是深色的方法 isDarkColor(color: string)
-
-## 起步
-
-```javascript
-低版本适配为1.0.100
- //npm
-npm install yxuse@latest
- //pnpm
-pnpm install yxuse@latest
-
-//最新淘宝镜像地址为 https://registry.npmmirror.com
-
-//速度慢或者版本更新不及时 请使用npm源镜像下载
-// npm  set registry https://registry.npmjs.org
-// //或
-// pnpm set registry https://registry.npmjs.org
-
-npm publish
-```
-
-## 权限相关
-
-```javascript
-import { auth } from "yxuse/api";
-```
-
-- 数据权限
-
-  - 在综合管理-用户管理中操作栏编辑数据权限，给对应账户添加对应的星和站即可。管理员账户无需配置，默认有所有的星和站
-
-- 系统权限
-
-  - 系统权限
-
-    - 此层级的权限决定在运管系统入口处是否显示。目前有综合管理（integrated-management）、轨道控制系统（orbit）、任务计划（traceplan）、遥控分系统（telecommand）、遥测分系统（telemetry）、站控分系统（station-control）。
-    - 配置步骤：
-      1. 在综合管理系统-权限配置模块新增分系统
-      2. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配系统权限
-
-  - 分系统菜单权限
-
-    - 此层级的权限决定在各分系统的菜单栏是否显示。
-    - 配置步骤：
-      1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
-      2. 表单配置说明：路由名称（左侧菜单名称），路由标识（分系统名称.前端路由名称），路由类型选择页面，前端路由（前端页面路由），接口路由（可以不填）
-      3. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配当前系统权限
-
-  - 分系统按钮权限
-
-    - 此层级的权限决定在各分系统中某按钮的是否显示
-
-    - 配置步骤：
-
-      1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
-
-      2. 表单配置说明：路由名称（左侧菜单名称），路由标识（前端页面路由名称.按钮含义），路由类型选择按钮类型，前端路由（前端页面路由名称.按钮含义），接口路由（可以不填）
-
-- yxuse 内置方法
-
-  ```javascript
-  /**
-   * @description:获取token
-   */
-  getToken;
-
-  /**
-   * @description:移除token
-   */
-  removeToken;
-
-  /**
-   * 获取当前用户的权限（通用权限）
-   * @param systemName 系统名称
-   * @description  综合管理分系统->integrated
-   * @description 站控分系统->station
-   * @description  综合管理->integrated
-   * @description 轨道分系统->orbit
-   * @description 任务计划分系统->traceplan
-   * @description 遥控分系统->telecommand
-   * @description 遥测分系统->telemetry
-   * @returns 当前分系统的用户菜单列表 userMenuList
-   * @returns 当前分系统的用户按钮列表 userBtnList
-   */
-  getUserPermissions;
-
-  /**
-   *
-   * @param userMenuList 用户路由数据
-   * @param viewModules 页面文件
-   * @param viewConfig 页面配置项
-   * @returns UserRouter 用户动态路由
-   * @description  综合管理分系统->integrated
-   * @description 站控分系统->station
-   * 此方法适用于Vue3+Vite项目
-   */
-  getUserRouter;
-  ```
-
-- 代码参考
-
-- Vue3.0+Vite+Ts+pinia
-
-  ```javascript
-  //Vue3.0+Vite+Ts+pinia
-  // router/index.ts
-  router.beforeEach(async (to, from, next) => {
-    const globalStore = GlobalStore();
-    NProgress.start();
-    // await getBaseConfig();
-    //权限校验
-    // 2.动态设置标题
-    const title = import.meta.env.VITE_GLOB_APP_TITLE;
-    document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
-    // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
-    const URL = [LOGIN_URL];
-    if (URL.includes(to.path.toLocaleLowerCase())) {
-      if (globalStore.token) return next(from.fullPath);
-      return next();
-    }
-    // 4.判断访问页面是否在路由白名单地址中，如果存在直接放行
-    if (ROUTER_WHITE_LIST.includes(to.path)) return next();
-    // 5.判断是否有 Token，没有重定向到 login
-
-    if (!globalStore.token) return next({ path: LOGIN_URL, replace: true });
-
-    // 6.如果没有菜单列表，或者系统列表，就重新请求菜单列表并添加动态路由
-    const authStore = AuthStore();
-    authStore.setRouteName(to.name as string);
-
-    if (!authStore.authMenuList.length) {
-      //监测是当前用户是否有权限
-      const isEmptyPower = await initDynamicRouter(to.path);
-      if (!isEmptyPower) return next({ ...to, replace: true });
-    }
-    next();
-  });
-  //router/modules/dynamicRouter.ts
-  export const initDynamicRouter = async path => {
-    const authStore = AuthStore();
-    const globalStore = GlobalStore();
-    const configStore = ConfigStore();
-    const baseConfig = configStore.baseConfigMapGet;
-    if (Object.keys(baseConfig).length === 0) {
-      await configStore.getBaseConfig();
-    }
-    try {
-      // 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
-      await authStore.getUserRouteListApi();
-      //2.判断当前用户有没有系统权限
-      if (!authStore.authMenuListGet.length) {
-        //用户无权限且当前路由不在系统入口页面 默认跳转至系统入口
-        if (path !== SYSTEM_ENTRY) {
-          router.replace(SYSTEM_ENTRY);
-        } else {
-          ElNotification({
-            title: "无权限访问",
-            message: "当前账号无任何系统权限，请联系系统管理员！",
-            type: "warning",
-            duration: 3000
-          });
-        }
-        return true;
-      }
-      // 3.添加动态路由
-      //页面文件
-      const modules = import.meta.glob("@/views/**/*.vue");
-      //页面配置项
-      const viewConfig = import.meta.glob("@/views/**/config.ts", {
-        import: "viewConfig",
-        eager: true
-      });
-      const userRouterList = auth.getUserRouter(authStore.authMenuList, modules, viewConfig);
-      console.log(authStore.authMenuList);
-
-      userRouterList.forEach(route => {
-        router.addRoute("layout", route);
-      });
-      authStore.setLayoutMenuList(userRouterList);
-      return false;
-    } catch (error) {
-      // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
-      // globalStore.setToken("");
-      // router.replace(LOGIN_URL);
-      return Promise.reject(error);
-    }
-  };
-
-  ```
-
-- Vue2+Vuex+Webpack+Vue
-
-  ```javascript
-  //router/index.js
-  router.beforeEach(async (to, from, next) => {
-  	NProgress.start();
-  	document.title = to.query.name ? `${to.query.name + "-"}` : "" + `${to.meta.title ?? ""}`;
-  	// 1.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
-  	const URL = [LOGIN_ROUTER];
-  	const token = auth.getToken();
-  	if (URL.includes(to.path.toLocaleLowerCase())) {
-  		if (token) return next(from.fullPath);
-  		return next();
-  	}
-  	//2.判断是否有无token,没有重定向到 login
-  	if (!token) return next({ path: LOGIN_ROUTER, replace: true });
-  	//3.判断用户是否有菜单列表
-  	if (!store.getters.authMenuListGet.length) {
-  		//监测是当前用户是否有权限,并同步菜单
-  		const isEmptyPower = await initDynamicRouter(to.path);
-  		if (!isEmptyPower) return next({ ...to, replace: true });
-  	} else {
-  		//动态设置菜单
-  		setNavList(to.path, permission);
-  	}
-  	return next();
-  });
-  //router/dynamicRouter.js
-  let userStationRouter = [];
-  /**
-   * 初始化动态路由
-   */
-  export const initDynamicRouter = async path => {
-  	try {
-  		// 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
-  		// await store.dispatch('getUserRouteListApi');
-  		// console.log(store.getters.authMenuListGet);
-  		const authMenuList = await fetchUserRouteList();
-  		//2.判断当前用户有没有系统权限
-  		if (!authMenuList.length) {
-  			handleNoPermission();
-  			return true;
-  		}
-  		// 3.添加动态路由，生成菜单栏
-  		userStationRouter = generateUserStationRouter(authMenuList);
-  		addRoutesToRouter(userStationRouter);
-  		addRoutesToRouter(permission);
-  		setNavList(path, permission);
-  		return false;
-  	} catch (error) {
-  		// 💢 当按钮 || 菜单请求出错时，重定向到登陆页
-  		// globalStore.setToken("");
-  		// router.replace(LOGIN_URL);
-  		handleRequestError(error);
-  		return Promise.reject(error);
-  	}
-  };
-  //错误处理
-  function handleRequestError(error) {
-  	auth.removeToken();
-  }
-  //无权限处理
-  function handleNoPermission() {
-  	Notification({
-  		title: "无权限访问",
-  		message: "当前账号无任何系统权限，请联系系统管理员！",
-  		type: "warning",
-  		duration: 3000
-  	});
-  }
-  //动态用户菜单
-  async function fetchUserRouteList() {
-  	await store.dispatch("getUserRouteListApi");
-  	return store.getters.authMenuListGet.map(item => item.routeView);
-  }
-  //过滤路由
-  function generateUserStationRouter(authMenuList) {
-  	return stationRouter
-  		.map(item => {
-  			if (item.children.length === 1 && authMenuList.includes(item.path)) {
-  				return item;
-  			} else if (item.children.length > 1) {
-  				item.children = item.children.filter(child => authMenuList.includes(child.path));
-  				return item.children.length ? item : null;
-  			}
-  			return null;
-  		})
-  		.filter(item => item !== null);
-  }
-  //动态添加路由
-  function addRoutesToRouter(routes) {
-  	for (let route of routes) {
-  		router.addRoute(route);
-  	}
-  }
-  ```
-
-- 404 页面配置
-
-  - Vue2+VueRouter3.x
-
-    ```javascript
-    //静态路由下添加
-    {
-        path: '*',
-        component: () => import('@/components/ErrorPage/404.vue'),
-      },
-    ```
-
-  - Vue3+VueRouter4.x
-
-    ```javascript
-    //静态路由下添加
-    {
-        path: "/:pathMatch(.*)*",
-        component: () => import("@/components/ErrorMessage/404.vue")
-    }
-    ```
-
-- 按钮级别权限处理（自定义指令）
-
-  ```javascript
-  import store from "@/store";
-  const auth = {
-  	inserted(el, binding) {
-  		controlShowByUserPower(el, binding);
-  	}
-  };
-  function controlShowByUserPower(el, binding) {
-  	const value = binding.value;
-  	const authButtonList = store.getters.authButtonListGet;
-  	return !authButtonList.includes(value) ? el.parentNode.removeChild(el) : "";
-  }
-  export default auth;
-  //如何使用,“stationController.addStation标识需要与按钮权限标识匹配”
-  <div v-auth="'stationController.addStation'"> </div>;
-  ```
-
-## 主题
-
-- 使用方式
-
-  ```javascript
-  //在项目入口文件 main.js/main.ts中,在webpack5/vite项目中请使用以下方式按需导入
-  import { install } from "yxuse/theme";
-  install();
-  //在webpack4或其他低版本语法
-  import yxuse from "yxuse";
-  const { install } = yxuse.theme;
-  install();
-  ```
-
-- 内置方法
-
-  ```javascript
-  /**
-   * @description:注册主题下的css变量
-   */
-  install;
-  /**
-   * @description:修改主题
-   * @param themeName 主题名称
-   */
-  changeTheme;
-  /**
-   * @description:获取当前主题
-   */
-  getCurTheme;
-  /**
-   * @description:获取当前主题下的系统配置
-   * @param systemName 系统名称
-   */
-  getSystemThemeConfig;
-
-  /**
-   * @description:获取当前主题下的某个组/模块配置颜色
-   * @param groupName 名称
-   */
-  getGroupColor;
-
-  /**
-   * @description:注册当前系统私有css变量
-   * @param systemName 系统名称
-   */
-  installSystemTheme;
-  ```
-
-- css 变量 json 配置
-
-  > 下方各类组件颜色变量配置，需要大家一起丰富
-
-```javascript
-green: {
-    common: {
-        //公用颜色
-        color: {
-            //主题色
-            "main-100": "rgba(80, 165, 122, 1)",
-            "main-50": "rgba(80, 165, 122, 0.5)",
-            "main-25": "rgba(80, 165, 122, 0.25)",
-            "main-15": "rgba(80, 165, 122, 0.15)",
-            "main-5": "rgba(80, 165, 122, 0.05)",
-
-            //故障色
-            "error-100": "rgba(255, 152, 146, 1)",
-            "error-50": "rgba(255, 152, 146, 0.5)",
-            "error-25": "rgba(255, 152, 146, 0.25)",
-            "error-15": "rgba(255, 152, 146, 0.15)",
-            "error-5": "rgba(255, 152, 146, 0.05)",
-
-            //预警色
-            "warning-100": "rgba(249, 162, 33, 1)",
-            "warning-50": "rgba(249, 162, 33, 0.5)",
-            "warning-25": "rgba(249, 162, 33, 0.25)",
-            "warning-15": "rgba(249, 162, 33, 0.15)",
-            "warning-5": "rgba(249, 162, 33, 0.05)",
-
-            //信息色
-            "info-100": "rgba(133, 233, 183, 1)",
-            "info-50": "rgba(133, 233, 183, 0.5)",
-            "info-25": "rgba(133, 233, 183, 0.25)",
-            "info-15": "rgba(133, 233, 183, 0.15)",
-            "info-5": "rgba(133, 233, 183, 0.05)",
-
-            //中性色
-            "neutral-100": "rgba(85, 221, 221, 1)",
-            "neutral-50": "rgba(85, 221, 221, 0.5)",
-            "neutral-25": "rgba(85, 221, 221, 0.25)",
-            "neutral-15": "rgba(85, 221, 221, 0.15)",
-            "neutral-5": "rgba(85, 221, 221, 0.05)"
-            },
-            //背景色类
-        background: {
-            "error-gradual": "linear-gradient(90deg, #FFCECB 0%, rgba(255,235,233,0.35) 100%)",
-            "warning-gradual": "linear-gradient(90deg, #FFE4BC 0%, rgba(255,250,233,0.35) 100%)",
-            "success-gradual": "linear-gradient(90deg, #D5ECBE 0%, rgba(234,255,233,0.35) 100%)"
-        },
-        //按钮类
-        button: {
-            background: "rgba(103, 186, 145, 0.10)",
-            "border-color": "rgba(80, 165, 122, 1)",
-            "text-color": "rgba(80, 165, 122, 1)",
-            "active-background-color": "rgba(80, 165, 122, 1)",
-            "active-border-color": "rgba(154, 209, 162, 1)",
-            "active-text-color": "#fff"
-        },
-        checkbox: {
-            background: "rgba(216, 233, 219, 1)",
-            "icon-color": "rgba(80, 165, 122, 0)",
-            "border-color": "rgba(154, 209, 162, 1)",
-            "checked-background": "rgba(216, 233, 219, 1)",
-            "checked-icon-color": "rgba(80, 165, 122, 1)",
-            "checked-border-color": "rgba(154, 209, 162, 1)"
-        },
-        //input
-        input: {
-            background: "rgba(237, 246, 239, 1)",
-            "border-color": "rgba(80, 165, 122, 1)",
-            color: "rgba(29, 75, 52, 1)",
-            "placeholder-color": "rgba(80, 165, 122, 1)",
-            "hover-background": "rgba(237, 246, 239, 0.30)",
-            "hover-border-color": "rgba(80, 165, 122, 1)",
-            "hover-color": "rgba(80, 165, 122, 1)",
-            "active-background": "rgba(237, 246, 239, 0.30)",
-            "active-border-color": "rgba(80, 165, 122, 1)",
-            "active-color": "rgba(80, 165, 122, 1)",
-            "disabled-background": "rgba(237, 246, 239, 1)",
-            "disabled-border-color": "rgba(237, 246, 239, 1)",
-            "disabled-color": "rgba(83, 83, 83, 1)"
-            },
-        // select
-        select: {
-            "dropdown-background": "rgba(237, 246, 239, 1)",
-            "dropdown-border-color": "rgba(80, 165, 122, 1)",
-            "dropdown-item-color": "rgba(80, 165, 122, 1)",
-            "dropdown-item-hover-background": "rgba(178, 220, 198, 1)",
-            "dropdown-item-hover-color": "rgba(29, 75, 52, 1)",
-            "dropdown-item-selected-background": "rgba(178, 220, 198, 1)",
-            "dropdown-item-selected-color": "rgba(29, 75, 52, 1)"
-        },
-        //文字颜色
-        text: {
-            main: "#50A57A",
-            deep: "#1D4B34",
-            light: "rgba(80, 165, 122, 0.50)",
-            paler: "#637B6B",
-            warning: "#F8B85A"
-        },
-        tree:{},
-        //布局类
-        layout: {},
-        //表格类
-        table: {},
-        //曲线类
-        chart: {},
-        //提示类
-        message: {}
-        },
-
-        //各系统个性化配置
-        cloud: {},//运管系统
-        "station-control-center": {}, //站控
-        "traceplan-client":{} //任务计划
-        ...
-    },
-
-
-```
+# yxuse
+
+## 更新日志
+
+- 2024 4-01 (Vue2.x--> 2.0.11 Vue3.x--->3.0.18)
+
+  - 悬浮球新增语言切换的入口
+  - 新增翻译的模块 translate
+
+  ```js
+   export interface  YxuseOptions {
+        ...之前的配置
+        	/** 系统标识，isRenderLang为true时必传 */
+          systemKey?: string;
+    }
+    translate 模块方法说明
+
+    /**
+     * @description:初始化语言包
+     * @param {*} lang 语言包标识
+     * @param {*} systemKey 系统标识
+    */
+     initTranslate
+    /**
+     * @description:语言切换
+     * @param {*} lang 语言包标识
+    */
+     changeLang
+
+    /**
+     * @description:获取当前语言
+    */
+     getLang
+
+  ```
+
+- 2024 3-18 (Vue2.x--> 2.0.3 Vue3.x--->3.0.10)
+
+  - theme
+
+    - 主题初始化 install 方法新增配置，主要有当前开发的环境，在开发环境下无 token 会进行弹窗提示，进行自动登录，生产环境登录失效自动跳转至 loginUrl 地址（已内置）
+
+    ```js
+    export interface YxuseOptions {
+    	/** 是否渲染悬浮球*/
+    	isRenderToolbar?: boolean;
+    	/** 是否加载工单*/
+    	isRenderIssue?: boolean;
+    	/** 是否加载语言切换*/
+    	isRenderLang?: boolean;
+    	/** 登录页地址，非运管系统项目使用*/
+    	loginUrl?: string;
+    	/** 自定义登录api,非运管系统项目使用*/
+    	loginApiUrl?: string;
+    	/** 翻译Api地址,非运管系统项目使用*/
+    	translateApiUrl?: string;
+    	/** 主题列表接口,非运管系统项目使用*/
+    	themeApiUrl: string;
+    	/** 首页地址，非运管系统项目使用*/
+    	homeUrl?: string;
+    	/** 系统默认语言*/
+    	lang?: string;
+    	/** 当前环境*/
+    	environment: "development" | "production";
+    }
+    ```
+
+    - 新增判断当前色值是否在当前主题中的方法 findColorByTheme(key: string, color: string)
+
+  - auth
+
+    - 新增获取系统配置的方法 getSystemConfig(key: string)
+
+  - utils
+    - 新增判断该色值是否是深色的方法 isDarkColor(color: string)
+
+## 起步
+
+```javascript
+低版本适配为1.0.100
+ //npm
+npm install yxuse@latest
+ //pnpm
+pnpm install yxuse@latest
+
+//最新淘宝镜像地址为 https://registry.npmmirror.com
+
+//速度慢或者版本更新不及时 请使用npm源镜像下载
+// npm  set registry https://registry.npmjs.org
+// //或
+// pnpm set registry https://registry.npmjs.org
+
+npm publish
+```
+
+## 权限相关
+
+```javascript
+import { auth } from "yxuse/api";
+```
+
+- 数据权限
+
+  - 在综合管理-用户管理中操作栏编辑数据权限，给对应账户添加对应的星和站即可。管理员账户无需配置，默认有所有的星和站
+
+- 系统权限
+
+  - 系统权限
+
+    - 此层级的权限决定在运管系统入口处是否显示。目前有综合管理（integrated-management）、轨道控制系统（orbit）、任务计划（traceplan）、遥控分系统（telecommand）、遥测分系统（telemetry）、站控分系统（station-control）。
+    - 配置步骤：
+      1. 在综合管理系统-权限配置模块新增分系统
+      2. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配系统权限
+
+  - 分系统菜单权限
+
+    - 此层级的权限决定在各分系统的菜单栏是否显示。
+    - 配置步骤：
+      1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
+      2. 表单配置说明：路由名称（左侧菜单名称），路由标识（分系统名称.前端路由名称），路由类型选择页面，前端路由（前端页面路由），接口路由（可以不填）
+      3. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配当前系统权限
+
+  - 分系统按钮权限
+
+    - 此层级的权限决定在各分系统中某按钮的是否显示
+
+    - 配置步骤：
+
+      1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
+
+      2. 表单配置说明：路由名称（左侧菜单名称），路由标识（前端页面路由名称.按钮含义），路由类型选择按钮类型，前端路由（前端页面路由名称.按钮含义），接口路由（可以不填）
+
+- yxuse 内置方法
+
+  ```javascript
+  /**
+   * @description:获取token
+   */
+  getToken;
+
+  /**
+   * @description:移除token
+   */
+  removeToken;
+
+  /**
+   * 获取当前用户的权限（通用权限）
+   * @param systemName 系统名称
+   * @description  综合管理分系统->integrated
+   * @description 站控分系统->station
+   * @description  综合管理->integrated
+   * @description 轨道分系统->orbit
+   * @description 任务计划分系统->traceplan
+   * @description 遥控分系统->telecommand
+   * @description 遥测分系统->telemetry
+   * @returns 当前分系统的用户菜单列表 userMenuList
+   * @returns 当前分系统的用户按钮列表 userBtnList
+   */
+  getUserPermissions;
+
+  /**
+   *
+   * @param userMenuList 用户路由数据
+   * @param viewModules 页面文件
+   * @param viewConfig 页面配置项
+   * @returns UserRouter 用户动态路由
+   * @description  综合管理分系统->integrated
+   * @description 站控分系统->station
+   * 此方法适用于Vue3+Vite项目
+   */
+  getUserRouter;
+  ```
+
+- 代码参考
+
+- Vue3.0+Vite+Ts+pinia
+
+  ```javascript
+  //Vue3.0+Vite+Ts+pinia
+  // router/index.ts
+  router.beforeEach(async (to, from, next) => {
+    const globalStore = GlobalStore();
+    NProgress.start();
+    // await getBaseConfig();
+    //权限校验
+    // 2.动态设置标题
+    const title = import.meta.env.VITE_GLOB_APP_TITLE;
+    document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
+    // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
+    const URL = [LOGIN_URL];
+    if (URL.includes(to.path.toLocaleLowerCase())) {
+      if (globalStore.token) return next(from.fullPath);
+      return next();
+    }
+    // 4.判断访问页面是否在路由白名单地址中，如果存在直接放行
+    if (ROUTER_WHITE_LIST.includes(to.path)) return next();
+    // 5.判断是否有 Token，没有重定向到 login
+
+    if (!globalStore.token) return next({ path: LOGIN_URL, replace: true });
+
+    // 6.如果没有菜单列表，或者系统列表，就重新请求菜单列表并添加动态路由
+    const authStore = AuthStore();
+    authStore.setRouteName(to.name as string);
+
+    if (!authStore.authMenuList.length) {
+      //监测是当前用户是否有权限
+      const isEmptyPower = await initDynamicRouter(to.path);
+      if (!isEmptyPower) return next({ ...to, replace: true });
+    }
+    next();
+  });
+  //router/modules/dynamicRouter.ts
+  export const initDynamicRouter = async path => {
+    const authStore = AuthStore();
+    const globalStore = GlobalStore();
+    const configStore = ConfigStore();
+    const baseConfig = configStore.baseConfigMapGet;
+    if (Object.keys(baseConfig).length === 0) {
+      await configStore.getBaseConfig();
+    }
+    try {
+      // 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
+      await authStore.getUserRouteListApi();
+      //2.判断当前用户有没有系统权限
+      if (!authStore.authMenuListGet.length) {
+        //用户无权限且当前路由不在系统入口页面 默认跳转至系统入口
+        if (path !== SYSTEM_ENTRY) {
+          router.replace(SYSTEM_ENTRY);
+        } else {
+          ElNotification({
+            title: "无权限访问",
+            message: "当前账号无任何系统权限，请联系系统管理员！",
+            type: "warning",
+            duration: 3000
+          });
+        }
+        return true;
+      }
+      // 3.添加动态路由
+      //页面文件
+      const modules = import.meta.glob("@/views/**/*.vue");
+      //页面配置项
+      const viewConfig = import.meta.glob("@/views/**/config.ts", {
+        import: "viewConfig",
+        eager: true
+      });
+      const userRouterList = auth.getUserRouter(authStore.authMenuList, modules, viewConfig);
+      console.log(authStore.authMenuList);
+
+      userRouterList.forEach(route => {
+        router.addRoute("layout", route);
+      });
+      authStore.setLayoutMenuList(userRouterList);
+      return false;
+    } catch (error) {
+      // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
+      // globalStore.setToken("");
+      // router.replace(LOGIN_URL);
+      return Promise.reject(error);
+    }
+  };
+
+  ```
+
+- Vue2+Vuex+Webpack+Vue
+
+  ```javascript
+  //router/index.js
+  router.beforeEach(async (to, from, next) => {
+  	NProgress.start();
+  	document.title = to.query.name ? `${to.query.name + "-"}` : "" + `${to.meta.title ?? ""}`;
+  	// 1.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
+  	const URL = [LOGIN_ROUTER];
+  	const token = auth.getToken();
+  	if (URL.includes(to.path.toLocaleLowerCase())) {
+  		if (token) return next(from.fullPath);
+  		return next();
+  	}
+  	//2.判断是否有无token,没有重定向到 login
+  	if (!token) return next({ path: LOGIN_ROUTER, replace: true });
+  	//3.判断用户是否有菜单列表
+  	if (!store.getters.authMenuListGet.length) {
+  		//监测是当前用户是否有权限,并同步菜单
+  		const isEmptyPower = await initDynamicRouter(to.path);
+  		if (!isEmptyPower) return next({ ...to, replace: true });
+  	} else {
+  		//动态设置菜单
+  		setNavList(to.path, permission);
+  	}
+  	return next();
+  });
+  //router/dynamicRouter.js
+  let userStationRouter = [];
+  /**
+   * 初始化动态路由
+   */
+  export const initDynamicRouter = async path => {
+  	try {
+  		// 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
+  		// await store.dispatch('getUserRouteListApi');
+  		// console.log(store.getters.authMenuListGet);
+  		const authMenuList = await fetchUserRouteList();
+  		//2.判断当前用户有没有系统权限
+  		if (!authMenuList.length) {
+  			handleNoPermission();
+  			return true;
+  		}
+  		// 3.添加动态路由，生成菜单栏
+  		userStationRouter = generateUserStationRouter(authMenuList);
+  		addRoutesToRouter(userStationRouter);
+  		addRoutesToRouter(permission);
+  		setNavList(path, permission);
+  		return false;
+  	} catch (error) {
+  		// 💢 当按钮 || 菜单请求出错时，重定向到登陆页
+  		// globalStore.setToken("");
+  		// router.replace(LOGIN_URL);
+  		handleRequestError(error);
+  		return Promise.reject(error);
+  	}
+  };
+  //错误处理
+  function handleRequestError(error) {
+  	auth.removeToken();
+  }
+  //无权限处理
+  function handleNoPermission() {
+  	Notification({
+  		title: "无权限访问",
+  		message: "当前账号无任何系统权限，请联系系统管理员！",
+  		type: "warning",
+  		duration: 3000
+  	});
+  }
+  //动态用户菜单
+  async function fetchUserRouteList() {
+  	await store.dispatch("getUserRouteListApi");
+  	return store.getters.authMenuListGet.map(item => item.routeView);
+  }
+  //过滤路由
+  function generateUserStationRouter(authMenuList) {
+  	return stationRouter
+  		.map(item => {
+  			if (item.children.length === 1 && authMenuList.includes(item.path)) {
+  				return item;
+  			} else if (item.children.length > 1) {
+  				item.children = item.children.filter(child => authMenuList.includes(child.path));
+  				return item.children.length ? item : null;
+  			}
+  			return null;
+  		})
+  		.filter(item => item !== null);
+  }
+  //动态添加路由
+  function addRoutesToRouter(routes) {
+  	for (let route of routes) {
+  		router.addRoute(route);
+  	}
+  }
+  ```
+
+- 404 页面配置
+
+  - Vue2+VueRouter3.x
+
+    ```javascript
+    //静态路由下添加
+    {
+        path: '*',
+        component: () => import('@/components/ErrorPage/404.vue'),
+      },
+    ```
+
+  - Vue3+VueRouter4.x
+
+    ```javascript
+    //静态路由下添加
+    {
+        path: "/:pathMatch(.*)*",
+        component: () => import("@/components/ErrorMessage/404.vue")
+    }
+    ```
+
+- 按钮级别权限处理（自定义指令）
+
+  ```javascript
+  import store from "@/store";
+  const auth = {
+  	inserted(el, binding) {
+  		controlShowByUserPower(el, binding);
+  	}
+  };
+  function controlShowByUserPower(el, binding) {
+  	const value = binding.value;
+  	const authButtonList = store.getters.authButtonListGet;
+  	return !authButtonList.includes(value) ? el.parentNode.removeChild(el) : "";
+  }
+  export default auth;
+  //如何使用,“stationController.addStation标识需要与按钮权限标识匹配”
+  <div v-auth="'stationController.addStation'"> </div>;
+  ```
+
+## 主题
+
+- 使用方式
+
+  ```javascript
+  //在项目入口文件 main.js/main.ts中,在webpack5/vite项目中请使用以下方式按需导入
+  import { install } from "yxuse/theme";
+  install();
+  //在webpack4或其他低版本语法
+  import yxuse from "yxuse";
+  const { install } = yxuse.theme;
+  install();
+  ```
+
+- 内置方法
+
+  ```javascript
+  /**
+   * @description:注册主题下的css变量
+   */
+  install;
+  /**
+   * @description:修改主题
+   * @param themeName 主题名称
+   */
+  changeTheme;
+  /**
+   * @description:获取当前主题
+   */
+  getCurTheme;
+  /**
+   * @description:获取当前主题下的系统配置
+   * @param systemName 系统名称
+   */
+  getSystemThemeConfig;
+
+  /**
+   * @description:获取当前主题下的某个组/模块配置颜色
+   * @param groupName 名称
+   */
+  getGroupColor;
+
+  /**
+   * @description:注册当前系统私有css变量
+   * @param systemName 系统名称
+   */
+  installSystemTheme;
+  ```
+
+- css 变量 json 配置
+
+  > 下方各类组件颜色变量配置，需要大家一起丰富
+
+```javascript
+green: {
+    common: {
+        //公用颜色
+        color: {
+            //主题色
+            "main-100": "rgba(80, 165, 122, 1)",
+            "main-50": "rgba(80, 165, 122, 0.5)",
+            "main-25": "rgba(80, 165, 122, 0.25)",
+            "main-15": "rgba(80, 165, 122, 0.15)",
+            "main-5": "rgba(80, 165, 122, 0.05)",
+
+            //故障色
+            "error-100": "rgba(255, 152, 146, 1)",
+            "error-50": "rgba(255, 152, 146, 0.5)",
+            "error-25": "rgba(255, 152, 146, 0.25)",
+            "error-15": "rgba(255, 152, 146, 0.15)",
+            "error-5": "rgba(255, 152, 146, 0.05)",
+
+            //预警色
+            "warning-100": "rgba(249, 162, 33, 1)",
+            "warning-50": "rgba(249, 162, 33, 0.5)",
+            "warning-25": "rgba(249, 162, 33, 0.25)",
+            "warning-15": "rgba(249, 162, 33, 0.15)",
+            "warning-5": "rgba(249, 162, 33, 0.05)",
+
+            //信息色
+            "info-100": "rgba(133, 233, 183, 1)",
+            "info-50": "rgba(133, 233, 183, 0.5)",
+            "info-25": "rgba(133, 233, 183, 0.25)",
+            "info-15": "rgba(133, 233, 183, 0.15)",
+            "info-5": "rgba(133, 233, 183, 0.05)",
+
+            //中性色
+            "neutral-100": "rgba(85, 221, 221, 1)",
+            "neutral-50": "rgba(85, 221, 221, 0.5)",
+            "neutral-25": "rgba(85, 221, 221, 0.25)",
+            "neutral-15": "rgba(85, 221, 221, 0.15)",
+            "neutral-5": "rgba(85, 221, 221, 0.05)"
+            },
+            //背景色类
+        background: {
+            "error-gradual": "linear-gradient(90deg, #FFCECB 0%, rgba(255,235,233,0.35) 100%)",
+            "warning-gradual": "linear-gradient(90deg, #FFE4BC 0%, rgba(255,250,233,0.35) 100%)",
+            "success-gradual": "linear-gradient(90deg, #D5ECBE 0%, rgba(234,255,233,0.35) 100%)"
+        },
+        //按钮类
+        button: {
+            background: "rgba(103, 186, 145, 0.10)",
+            "border-color": "rgba(80, 165, 122, 1)",
+            "text-color": "rgba(80, 165, 122, 1)",
+            "active-background-color": "rgba(80, 165, 122, 1)",
+            "active-border-color": "rgba(154, 209, 162, 1)",
+            "active-text-color": "#fff"
+        },
+        checkbox: {
+            background: "rgba(216, 233, 219, 1)",
+            "icon-color": "rgba(80, 165, 122, 0)",
+            "border-color": "rgba(154, 209, 162, 1)",
+            "checked-background": "rgba(216, 233, 219, 1)",
+            "checked-icon-color": "rgba(80, 165, 122, 1)",
+            "checked-border-color": "rgba(154, 209, 162, 1)"
+        },
+        //input
+        input: {
+            background: "rgba(237, 246, 239, 1)",
+            "border-color": "rgba(80, 165, 122, 1)",
+            color: "rgba(29, 75, 52, 1)",
+            "placeholder-color": "rgba(80, 165, 122, 1)",
+            "hover-background": "rgba(237, 246, 239, 0.30)",
+            "hover-border-color": "rgba(80, 165, 122, 1)",
+            "hover-color": "rgba(80, 165, 122, 1)",
+            "active-background": "rgba(237, 246, 239, 0.30)",
+            "active-border-color": "rgba(80, 165, 122, 1)",
+            "active-color": "rgba(80, 165, 122, 1)",
+            "disabled-background": "rgba(237, 246, 239, 1)",
+            "disabled-border-color": "rgba(237, 246, 239, 1)",
+            "disabled-color": "rgba(83, 83, 83, 1)"
+            },
+        // select
+        select: {
+            "dropdown-background": "rgba(237, 246, 239, 1)",
+            "dropdown-border-color": "rgba(80, 165, 122, 1)",
+            "dropdown-item-color": "rgba(80, 165, 122, 1)",
+            "dropdown-item-hover-background": "rgba(178, 220, 198, 1)",
+            "dropdown-item-hover-color": "rgba(29, 75, 52, 1)",
+            "dropdown-item-selected-background": "rgba(178, 220, 198, 1)",
+            "dropdown-item-selected-color": "rgba(29, 75, 52, 1)"
+        },
+        //文字颜色
+        text: {
+            main: "#50A57A",
+            deep: "#1D4B34",
+            light: "rgba(80, 165, 122, 0.50)",
+            paler: "#637B6B",
+            warning: "#F8B85A"
+        },
+        tree:{},
+        //布局类
+        layout: {},
+        //表格类
+        table: {},
+        //曲线类
+        chart: {},
+        //提示类
+        message: {}
+        },
+
+        //各系统个性化配置
+        cloud: {},//运管系统
+        "station-control-center": {}, //站控
+        "traceplan-client":{} //任务计划
+        ...
+    },
+
+
+```