yxuse 2.0.12 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +540 -540
  2. package/lib/icons.cjs.js.gz +0 -0
  3. package/lib/icons.es.js.gz +0 -0
  4. package/lib/index.cjs3.js +1 -1
  5. package/lib/index.cjs3.js.gz +0 -0
  6. package/lib/index.cjs6.js +3 -3
  7. package/lib/index.cjs6.js.gz +0 -0
  8. package/lib/index.es3.js +36 -36
  9. package/lib/index.es3.js.gz +0 -0
  10. package/lib/index.es6.js +11 -11
  11. package/lib/index.es6.js.gz +0 -0
  12. package/lib/style.css +1 -1
  13. package/lib/style.css.gz +0 -0
  14. package/lib/version.json +12 -12
  15. package/lib/vue.runtime.esm-bundler.cjs.js.gz +0 -0
  16. package/lib/vue.runtime.esm-bundler.es.js.gz +0 -0
  17. package/package.json +152 -152
  18. package/types/api/modules/auth/index.d.ts +13 -13
  19. package/types/components/YxIcon/index.vue.d.ts +22 -22
package/README.md CHANGED
@@ -1,540 +1,540 @@
1
- # yxuse
2
-
3
- ## 更新日志
4
-
5
- - 2024 3-18 (Vue2.x--> 2.0.3 Vue3.x--->3.0.10)
6
-
7
- - theme
8
-
9
- - 主题初始化 install 方法新增配置，主要有当前开发的环境，在开发环境下无 token 会进行弹窗提示，进行自动登录，生产环境登录失效自动跳转至 loginUrl 地址（已内置）
10
-
11
- ```js
12
- export interface YxuseOptions {
13
- /** 是否渲染悬浮球*/
14
- isRenderToolbar?: boolean;
15
- /** 是否加载工单*/
16
- isRenderIssue?: boolean;
17
- /** 是否加载语言切换*/
18
- isRenderLang?: boolean;
19
- /** 登录页地址，非运管系统项目使用*/
20
- loginUrl?: string;
21
- /** 自定义登录api,非运管系统项目使用*/
22
- loginApiUrl?: string;
23
- /** 翻译Api地址,非运管系统项目使用*/
24
- translateApiUrl?: string;
25
- /** 主题列表接口,非运管系统项目使用*/
26
- themeApiUrl: string;
27
- /** 首页地址，非运管系统项目使用*/
28
- homeUrl?: string;
29
- /** 系统默认语言*/
30
- lang?: string;
31
- /** 当前环境*/
32
- environment: "development" | "production";
33
- }
34
- ```
35
-
36
- - 新增判断当前色值是否在当前主题中的方法 findColorByTheme(key: string, color: string)
37
-
38
- - auth
39
-
40
- - 新增获取系统配置的方法 getSystemConfig(key: string)
41
-
42
- - utils
43
- - 新增判断该色值是否是深色的方法 isDarkColor(color: string)
44
-
45
- ## 起步
46
-
47
- ```javascript
48
- 低版本适配为1.0.100
49
- //npm
50
- npm install yxuse@latest
51
- //pnpm
52
- pnpm install yxuse@latest
53
-
54
- //最新淘宝镜像地址为 https://registry.npmmirror.com
55
-
56
- //速度慢或者版本更新不及时 请使用npm源镜像下载
57
- // npm set registry https://registry.npmjs.org
58
- // //或
59
- // pnpm set registry https://registry.npmjs.org
60
-
61
- npm publish
62
- ```
63
-
64
- ## 权限相关
65
-
66
- ```javascript
67
- import { auth } from "yxuse/api";
68
- ```
69
-
70
- - 数据权限
71
-
72
- - 在综合管理-用户管理中操作栏编辑数据权限，给对应账户添加对应的星和站即可。管理员账户无需配置，默认有所有的星和站
73
-
74
- - 系统权限
75
-
76
- - 系统权限
77
-
78
- - 此层级的权限决定在运管系统入口处是否显示。目前有综合管理（integrated-management）、轨道控制系统（orbit）、任务计划（traceplan）、遥控分系统（telecommand）、遥测分系统（telemetry）、站控分系统（station-control）。
79
- - 配置步骤：
80
- 1. 在综合管理系统-权限配置模块新增分系统
81
- 2. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配系统权限
82
-
83
- - 分系统菜单权限
84
-
85
- - 此层级的权限决定在各分系统的菜单栏是否显示。
86
- - 配置步骤：
87
- 1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
88
- 2. 表单配置说明：路由名称（左侧菜单名称），路由标识（分系统名称.前端路由名称），路由类型选择页面，前端路由（前端页面路由），接口路由（可以不填）
89
- 3. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配当前系统权限
90
-
91
- - 分系统按钮权限
92
-
93
- - 此层级的权限决定在各分系统中某按钮的是否显示
94
-
95
- - 配置步骤：
96
-
97
- 1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
98
-
99
- 2. 表单配置说明：路由名称（左侧菜单名称），路由标识（前端页面路由名称.按钮含义），路由类型选择按钮类型，前端路由（前端页面路由名称.按钮含义），接口路由（可以不填）
100
-
101
- - yxuse 内置方法
102
-
103
- ```javascript
104
- /**
105
- * @description:获取token
106
- */
107
- getToken;
108
-
109
- /**
110
- * @description:移除token
111
- */
112
- removeToken;
113
-
114
- /**
115
- * 获取当前用户的权限（通用权限）
116
- * @param systemName 系统名称
117
- * @description 综合管理分系统->integrated
118
- * @description 站控分系统->station
119
- * @description 综合管理->integrated
120
- * @description 轨道分系统->orbit
121
- * @description 任务计划分系统->traceplan
122
- * @description 遥控分系统->telecommand
123
- * @description 遥测分系统->telemetry
124
- * @returns 当前分系统的用户菜单列表 userMenuList
125
- * @returns 当前分系统的用户按钮列表 userBtnList
126
- */
127
- getUserPermissions;
128
-
129
- /**
130
- *
131
- * @param userMenuList 用户路由数据
132
- * @param viewModules 页面文件
133
- * @param viewConfig 页面配置项
134
- * @returns UserRouter 用户动态路由
135
- * @description 综合管理分系统->integrated
136
- * @description 站控分系统->station
137
- * 此方法适用于Vue3+Vite项目
138
- */
139
- getUserRouter;
140
- ```
141
-
142
- - 代码参考
143
-
144
- - Vue3.0+Vite+Ts+pinia
145
-
146
- ```javascript
147
- //Vue3.0+Vite+Ts+pinia
148
- // router/index.ts
149
- router.beforeEach(async (to, from, next) => {
150
- const globalStore = GlobalStore();
151
- NProgress.start();
152
- // await getBaseConfig();
153
- //权限校验
154
- // 2.动态设置标题
155
- const title = import.meta.env.VITE_GLOB_APP_TITLE;
156
- document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
157
- // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
158
- const URL = [LOGIN_URL];
159
- if (URL.includes(to.path.toLocaleLowerCase())) {
160
- if (globalStore.token) return next(from.fullPath);
161
- return next();
162
- }
163
- // 4.判断访问页面是否在路由白名单地址中，如果存在直接放行
164
- if (ROUTER_WHITE_LIST.includes(to.path)) return next();
165
- // 5.判断是否有 Token，没有重定向到 login
166
-
167
- if (!globalStore.token) return next({ path: LOGIN_URL, replace: true });
168
-
169
- // 6.如果没有菜单列表，或者系统列表，就重新请求菜单列表并添加动态路由
170
- const authStore = AuthStore();
171
- authStore.setRouteName(to.name as string);
172
-
173
- if (!authStore.authMenuList.length) {
174
- //监测是当前用户是否有权限
175
- const isEmptyPower = await initDynamicRouter(to.path);
176
- if (!isEmptyPower) return next({ ...to, replace: true });
177
- }
178
- next();
179
- });
180
- //router/modules/dynamicRouter.ts
181
- export const initDynamicRouter = async path => {
182
- const authStore = AuthStore();
183
- const globalStore = GlobalStore();
184
- const configStore = ConfigStore();
185
- const baseConfig = configStore.baseConfigMapGet;
186
- if (Object.keys(baseConfig).length === 0) {
187
- await configStore.getBaseConfig();
188
- }
189
- try {
190
- // 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
191
- await authStore.getUserRouteListApi();
192
- //2.判断当前用户有没有系统权限
193
- if (!authStore.authMenuListGet.length) {
194
- //用户无权限且当前路由不在系统入口页面 默认跳转至系统入口
195
- if (path !== SYSTEM_ENTRY) {
196
- router.replace(SYSTEM_ENTRY);
197
- } else {
198
- ElNotification({
199
- title: "无权限访问",
200
- message: "当前账号无任何系统权限，请联系系统管理员！",
201
- type: "warning",
202
- duration: 3000
203
- });
204
- }
205
- return true;
206
- }
207
- // 3.添加动态路由
208
- //页面文件
209
- const modules = import.meta.glob("@/views/**/*.vue");
210
- //页面配置项
211
- const viewConfig = import.meta.glob("@/views/**/config.ts", {
212
- import: "viewConfig",
213
- eager: true
214
- });
215
- const userRouterList = auth.getUserRouter(authStore.authMenuList, modules, viewConfig);
216
- console.log(authStore.authMenuList);
217
-
218
- userRouterList.forEach(route => {
219
- router.addRoute("layout", route);
220
- });
221
- authStore.setLayoutMenuList(userRouterList);
222
- return false;
223
- } catch (error) {
224
- // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
225
- // globalStore.setToken("");
226
- // router.replace(LOGIN_URL);
227
- return Promise.reject(error);
228
- }
229
- };
230
-
231
- ```
232
-
233
- - Vue2+Vuex+Webpack+Vue
234
-
235
- ```javascript
236
- //router/index.js
237
- router.beforeEach(async (to, from, next) => {
238
- NProgress.start();
239
- document.title = to.query.name ? `${to.query.name + "-"}` : "" + `${to.meta.title ?? ""}`;
240
- // 1.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
241
- const URL = [LOGIN_ROUTER];
242
- const token = auth.getToken();
243
- if (URL.includes(to.path.toLocaleLowerCase())) {
244
- if (token) return next(from.fullPath);
245
- return next();
246
- }
247
- //2.判断是否有无token,没有重定向到 login
248
- if (!token) return next({ path: LOGIN_ROUTER, replace: true });
249
- //3.判断用户是否有菜单列表
250
- if (!store.getters.authMenuListGet.length) {
251
- //监测是当前用户是否有权限,并同步菜单
252
- const isEmptyPower = await initDynamicRouter(to.path);
253
- if (!isEmptyPower) return next({ ...to, replace: true });
254
- } else {
255
- //动态设置菜单
256
- setNavList(to.path, permission);
257
- }
258
- return next();
259
- });
260
- //router/dynamicRouter.js
261
- let userStationRouter = [];
262
- /**
263
- * 初始化动态路由
264
- */
265
- export const initDynamicRouter = async path => {
266
- try {
267
- // 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
268
- // await store.dispatch('getUserRouteListApi');
269
- // console.log(store.getters.authMenuListGet);
270
- const authMenuList = await fetchUserRouteList();
271
- //2.判断当前用户有没有系统权限
272
- if (!authMenuList.length) {
273
- handleNoPermission();
274
- return true;
275
- }
276
- // 3.添加动态路由，生成菜单栏
277
- userStationRouter = generateUserStationRouter(authMenuList);
278
- addRoutesToRouter(userStationRouter);
279
- addRoutesToRouter(permission);
280
- setNavList(path, permission);
281
- return false;
282
- } catch (error) {
283
- // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
284
- // globalStore.setToken("");
285
- // router.replace(LOGIN_URL);
286
- handleRequestError(error);
287
- return Promise.reject(error);
288
- }
289
- };
290
- //错误处理
291
- function handleRequestError(error) {
292
- auth.removeToken();
293
- }
294
- //无权限处理
295
- function handleNoPermission() {
296
- Notification({
297
- title: "无权限访问",
298
- message: "当前账号无任何系统权限，请联系系统管理员！",
299
- type: "warning",
300
- duration: 3000
301
- });
302
- }
303
- //动态用户菜单
304
- async function fetchUserRouteList() {
305
- await store.dispatch("getUserRouteListApi");
306
- return store.getters.authMenuListGet.map(item => item.routeView);
307
- }
308
- //过滤路由
309
- function generateUserStationRouter(authMenuList) {
310
- return stationRouter
311
- .map(item => {
312
- if (item.children.length === 1 && authMenuList.includes(item.path)) {
313
- return item;
314
- } else if (item.children.length > 1) {
315
- item.children = item.children.filter(child => authMenuList.includes(child.path));
316
- return item.children.length ? item : null;
317
- }
318
- return null;
319
- })
320
- .filter(item => item !== null);
321
- }
322
- //动态添加路由
323
- function addRoutesToRouter(routes) {
324
- for (let route of routes) {
325
- router.addRoute(route);
326
- }
327
- }
328
- ```
329
-
330
- - 404 页面配置
331
-
332
- - Vue2+VueRouter3.x
333
-
334
- ```javascript
335
- //静态路由下添加
336
- {
337
- path: '*',
338
- component: () => import('@/components/ErrorPage/404.vue'),
339
- },
340
- ```
341
-
342
- - Vue3+VueRouter4.x
343
-
344
- ```javascript
345
- //静态路由下添加
346
- {
347
- path: "/:pathMatch(.*)*",
348
- component: () => import("@/components/ErrorMessage/404.vue")
349
- }
350
- ```
351
-
352
- - 按钮级别权限处理（自定义指令）
353
-
354
- ```javascript
355
- import store from "@/store";
356
- const auth = {
357
- inserted(el, binding) {
358
- controlShowByUserPower(el, binding);
359
- }
360
- };
361
- function controlShowByUserPower(el, binding) {
362
- const value = binding.value;
363
- const authButtonList = store.getters.authButtonListGet;
364
- return !authButtonList.includes(value) ? el.parentNode.removeChild(el) : "";
365
- }
366
- export default auth;
367
- //如何使用,“stationController.addStation标识需要与按钮权限标识匹配”
368
- <div v-auth="'stationController.addStation'"> </div>;
369
- ```
370
-
371
- ## 主题
372
-
373
- - 使用方式
374
-
375
- ```javascript
376
- //在项目入口文件 main.js/main.ts中,在webpack5/vite项目中请使用以下方式按需导入
377
- import { install } from "yxuse/theme";
378
- install();
379
- //在webpack4或其他低版本语法
380
- import yxuse from "yxuse";
381
- const { install } = yxuse.theme;
382
- install();
383
- ```
384
-
385
- - 内置方法
386
-
387
- ```javascript
388
- /**
389
- * @description:注册主题下的css变量
390
- */
391
- install;
392
- /**
393
- * @description:修改主题
394
- * @param themeName 主题名称
395
- */
396
- changeTheme;
397
- /**
398
- * @description:获取当前主题
399
- */
400
- getCurTheme;
401
- /**
402
- * @description:获取当前主题下的系统配置
403
- * @param systemName 系统名称
404
- */
405
- getSystemThemeConfig;
406
-
407
- /**
408
- * @description:获取当前主题下的某个组/模块配置颜色
409
- * @param groupName 名称
410
- */
411
- getGroupColor;
412
-
413
- /**
414
- * @description:注册当前系统私有css变量
415
- * @param systemName 系统名称
416
- */
417
- installSystemTheme;
418
- ```
419
-
420
- - css 变量 json 配置
421
-
422
- > 下方各类组件颜色变量配置，需要大家一起丰富
423
-
424
- ```javascript
425
- green: {
426
- common: {
427
- //公用颜色
428
- color: {
429
- //主题色
430
- "main-100": "rgba(80, 165, 122, 1)",
431
- "main-50": "rgba(80, 165, 122, 0.5)",
432
- "main-25": "rgba(80, 165, 122, 0.25)",
433
- "main-15": "rgba(80, 165, 122, 0.15)",
434
- "main-5": "rgba(80, 165, 122, 0.05)",
435
-
436
- //故障色
437
- "error-100": "rgba(255, 152, 146, 1)",
438
- "error-50": "rgba(255, 152, 146, 0.5)",
439
- "error-25": "rgba(255, 152, 146, 0.25)",
440
- "error-15": "rgba(255, 152, 146, 0.15)",
441
- "error-5": "rgba(255, 152, 146, 0.05)",
442
-
443
- //预警色
444
- "warning-100": "rgba(249, 162, 33, 1)",
445
- "warning-50": "rgba(249, 162, 33, 0.5)",
446
- "warning-25": "rgba(249, 162, 33, 0.25)",
447
- "warning-15": "rgba(249, 162, 33, 0.15)",
448
- "warning-5": "rgba(249, 162, 33, 0.05)",
449
-
450
- //信息色
451
- "info-100": "rgba(133, 233, 183, 1)",
452
- "info-50": "rgba(133, 233, 183, 0.5)",
453
- "info-25": "rgba(133, 233, 183, 0.25)",
454
- "info-15": "rgba(133, 233, 183, 0.15)",
455
- "info-5": "rgba(133, 233, 183, 0.05)",
456
-
457
- //中性色
458
- "neutral-100": "rgba(85, 221, 221, 1)",
459
- "neutral-50": "rgba(85, 221, 221, 0.5)",
460
- "neutral-25": "rgba(85, 221, 221, 0.25)",
461
- "neutral-15": "rgba(85, 221, 221, 0.15)",
462
- "neutral-5": "rgba(85, 221, 221, 0.05)"
463
- },
464
- //背景色类
465
- background: {
466
- "error-gradual": "linear-gradient(90deg, #FFCECB 0%, rgba(255,235,233,0.35) 100%)",
467
- "warning-gradual": "linear-gradient(90deg, #FFE4BC 0%, rgba(255,250,233,0.35) 100%)",
468
- "success-gradual": "linear-gradient(90deg, #D5ECBE 0%, rgba(234,255,233,0.35) 100%)"
469
- },
470
- //按钮类
471
- button: {
472
- background: "rgba(103, 186, 145, 0.10)",
473
- "border-color": "rgba(80, 165, 122, 1)",
474
- "text-color": "rgba(80, 165, 122, 1)",
475
- "active-background-color": "rgba(80, 165, 122, 1)",
476
- "active-border-color": "rgba(154, 209, 162, 1)",
477
- "active-text-color": "#fff"
478
- },
479
- checkbox: {
480
- background: "rgba(216, 233, 219, 1)",
481
- "icon-color": "rgba(80, 165, 122, 0)",
482
- "border-color": "rgba(154, 209, 162, 1)",
483
- "checked-background": "rgba(216, 233, 219, 1)",
484
- "checked-icon-color": "rgba(80, 165, 122, 1)",
485
- "checked-border-color": "rgba(154, 209, 162, 1)"
486
- },
487
- //input
488
- input: {
489
- background: "rgba(237, 246, 239, 1)",
490
- "border-color": "rgba(80, 165, 122, 1)",
491
- color: "rgba(29, 75, 52, 1)",
492
- "placeholder-color": "rgba(80, 165, 122, 1)",
493
- "hover-background": "rgba(237, 246, 239, 0.30)",
494
- "hover-border-color": "rgba(80, 165, 122, 1)",
495
- "hover-color": "rgba(80, 165, 122, 1)",
496
- "active-background": "rgba(237, 246, 239, 0.30)",
497
- "active-border-color": "rgba(80, 165, 122, 1)",
498
- "active-color": "rgba(80, 165, 122, 1)",
499
- "disabled-background": "rgba(237, 246, 239, 1)",
500
- "disabled-border-color": "rgba(237, 246, 239, 1)",
501
- "disabled-color": "rgba(83, 83, 83, 1)"
502
- },
503
- // select
504
- select: {
505
- "dropdown-background": "rgba(237, 246, 239, 1)",
506
- "dropdown-border-color": "rgba(80, 165, 122, 1)",
507
- "dropdown-item-color": "rgba(80, 165, 122, 1)",
508
- "dropdown-item-hover-background": "rgba(178, 220, 198, 1)",
509
- "dropdown-item-hover-color": "rgba(29, 75, 52, 1)",
510
- "dropdown-item-selected-background": "rgba(178, 220, 198, 1)",
511
- "dropdown-item-selected-color": "rgba(29, 75, 52, 1)"
512
- },
513
- //文字颜色
514
- text: {
515
- main: "#50A57A",
516
- deep: "#1D4B34",
517
- light: "rgba(80, 165, 122, 0.50)",
518
- paler: "#637B6B",
519
- warning: "#F8B85A"
520
- },
521
- tree:{},
522
- //布局类
523
- layout: {},
524
- //表格类
525
- table: {},
526
- //曲线类
527
- chart: {},
528
- //提示类
529
- message: {}
530
- },
531
-
532
- //各系统个性化配置
533
- cloud: {},//运管系统
534
- "station-control-center": {}, //站控
535
- "traceplan-client":{} //任务计划
536
- ...
537
- },
538
-
539
-
540
- ```
1
+ # yxuse
2
+
3
+ ## 更新日志
4
+
5
+ - 2024 3-18 (Vue2.x--> 2.0.3 Vue3.x--->3.0.10)
6
+
7
+ - theme
8
+
9
+ - 主题初始化 install 方法新增配置，主要有当前开发的环境，在开发环境下无 token 会进行弹窗提示，进行自动登录，生产环境登录失效自动跳转至 loginUrl 地址（已内置）
10
+
11
+ ```js
12
+ export interface YxuseOptions {
13
+ /** 是否渲染悬浮球*/
14
+ isRenderToolbar?: boolean;
15
+ /** 是否加载工单*/
16
+ isRenderIssue?: boolean;
17
+ /** 是否加载语言切换*/
18
+ isRenderLang?: boolean;
19
+ /** 登录页地址，非运管系统项目使用*/
20
+ loginUrl?: string;
21
+ /** 自定义登录api,非运管系统项目使用*/
22
+ loginApiUrl?: string;
23
+ /** 翻译Api地址,非运管系统项目使用*/
24
+ translateApiUrl?: string;
25
+ /** 主题列表接口,非运管系统项目使用*/
26
+ themeApiUrl: string;
27
+ /** 首页地址，非运管系统项目使用*/
28
+ homeUrl?: string;
29
+ /** 系统默认语言*/
30
+ lang?: string;
31
+ /** 当前环境*/
32
+ environment: "development" | "production";
33
+ }
34
+ ```
35
+
36
+ - 新增判断当前色值是否在当前主题中的方法 findColorByTheme(key: string, color: string)
37
+
38
+ - auth
39
+
40
+ - 新增获取系统配置的方法 getSystemConfig(key: string)
41
+
42
+ - utils
43
+ - 新增判断该色值是否是深色的方法 isDarkColor(color: string)
44
+
45
+ ## 起步
46
+
47
+ ```javascript
48
+ 低版本适配为1.0.100
49
+ //npm
50
+ npm install yxuse@latest
51
+ //pnpm
52
+ pnpm install yxuse@latest
53
+
54
+ //最新淘宝镜像地址为 https://registry.npmmirror.com
55
+
56
+ //速度慢或者版本更新不及时 请使用npm源镜像下载
57
+ // npm set registry https://registry.npmjs.org
58
+ // //或
59
+ // pnpm set registry https://registry.npmjs.org
60
+
61
+ npm publish
62
+ ```
63
+
64
+ ## 权限相关
65
+
66
+ ```javascript
67
+ import { auth } from "yxuse/api";
68
+ ```
69
+
70
+ - 数据权限
71
+
72
+ - 在综合管理-用户管理中操作栏编辑数据权限，给对应账户添加对应的星和站即可。管理员账户无需配置，默认有所有的星和站
73
+
74
+ - 系统权限
75
+
76
+ - 系统权限
77
+
78
+ - 此层级的权限决定在运管系统入口处是否显示。目前有综合管理（integrated-management）、轨道控制系统（orbit）、任务计划（traceplan）、遥控分系统（telecommand）、遥测分系统（telemetry）、站控分系统（station-control）。
79
+ - 配置步骤：
80
+ 1. 在综合管理系统-权限配置模块新增分系统
81
+ 2. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配系统权限
82
+
83
+ - 分系统菜单权限
84
+
85
+ - 此层级的权限决定在各分系统的菜单栏是否显示。
86
+ - 配置步骤：
87
+ 1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
88
+ 2. 表单配置说明：路由名称（左侧菜单名称），路由标识（分系统名称.前端路由名称），路由类型选择页面，前端路由（前端页面路由），接口路由（可以不填）
89
+ 3. 在综合管理-用户管理中操作栏（系统权限）给对应用户分配当前系统权限
90
+
91
+ - 分系统按钮权限
92
+
93
+ - 此层级的权限决定在各分系统中某按钮的是否显示
94
+
95
+ - 配置步骤：
96
+
97
+ 1. 在综合管理系统-权限配置模块中各分系统下添加分系统路由
98
+
99
+ 2. 表单配置说明：路由名称（左侧菜单名称），路由标识（前端页面路由名称.按钮含义），路由类型选择按钮类型，前端路由（前端页面路由名称.按钮含义），接口路由（可以不填）
100
+
101
+ - yxuse 内置方法
102
+
103
+ ```javascript
104
+ /**
105
+ * @description:获取token
106
+ */
107
+ getToken;
108
+
109
+ /**
110
+ * @description:移除token
111
+ */
112
+ removeToken;
113
+
114
+ /**
115
+ * 获取当前用户的权限（通用权限）
116
+ * @param systemName 系统名称
117
+ * @description 综合管理分系统->integrated
118
+ * @description 站控分系统->station
119
+ * @description 综合管理->integrated
120
+ * @description 轨道分系统->orbit
121
+ * @description 任务计划分系统->traceplan
122
+ * @description 遥控分系统->telecommand
123
+ * @description 遥测分系统->telemetry
124
+ * @returns 当前分系统的用户菜单列表 userMenuList
125
+ * @returns 当前分系统的用户按钮列表 userBtnList
126
+ */
127
+ getUserPermissions;
128
+
129
+ /**
130
+ *
131
+ * @param userMenuList 用户路由数据
132
+ * @param viewModules 页面文件
133
+ * @param viewConfig 页面配置项
134
+ * @returns UserRouter 用户动态路由
135
+ * @description 综合管理分系统->integrated
136
+ * @description 站控分系统->station
137
+ * 此方法适用于Vue3+Vite项目
138
+ */
139
+ getUserRouter;
140
+ ```
141
+
142
+ - 代码参考
143
+
144
+ - Vue3.0+Vite+Ts+pinia
145
+
146
+ ```javascript
147
+ //Vue3.0+Vite+Ts+pinia
148
+ // router/index.ts
149
+ router.beforeEach(async (to, from, next) => {
150
+ const globalStore = GlobalStore();
151
+ NProgress.start();
152
+ // await getBaseConfig();
153
+ //权限校验
154
+ // 2.动态设置标题
155
+ const title = import.meta.env.VITE_GLOB_APP_TITLE;
156
+ document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
157
+ // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
158
+ const URL = [LOGIN_URL];
159
+ if (URL.includes(to.path.toLocaleLowerCase())) {
160
+ if (globalStore.token) return next(from.fullPath);
161
+ return next();
162
+ }
163
+ // 4.判断访问页面是否在路由白名单地址中，如果存在直接放行
164
+ if (ROUTER_WHITE_LIST.includes(to.path)) return next();
165
+ // 5.判断是否有 Token，没有重定向到 login
166
+
167
+ if (!globalStore.token) return next({ path: LOGIN_URL, replace: true });
168
+
169
+ // 6.如果没有菜单列表，或者系统列表，就重新请求菜单列表并添加动态路由
170
+ const authStore = AuthStore();
171
+ authStore.setRouteName(to.name as string);
172
+
173
+ if (!authStore.authMenuList.length) {
174
+ //监测是当前用户是否有权限
175
+ const isEmptyPower = await initDynamicRouter(to.path);
176
+ if (!isEmptyPower) return next({ ...to, replace: true });
177
+ }
178
+ next();
179
+ });
180
+ //router/modules/dynamicRouter.ts
181
+ export const initDynamicRouter = async path => {
182
+ const authStore = AuthStore();
183
+ const globalStore = GlobalStore();
184
+ const configStore = ConfigStore();
185
+ const baseConfig = configStore.baseConfigMapGet;
186
+ if (Object.keys(baseConfig).length === 0) {
187
+ await configStore.getBaseConfig();
188
+ }
189
+ try {
190
+ // 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
191
+ await authStore.getUserRouteListApi();
192
+ //2.判断当前用户有没有系统权限
193
+ if (!authStore.authMenuListGet.length) {
194
+ //用户无权限且当前路由不在系统入口页面 默认跳转至系统入口
195
+ if (path !== SYSTEM_ENTRY) {
196
+ router.replace(SYSTEM_ENTRY);
197
+ } else {
198
+ ElNotification({
199
+ title: "无权限访问",
200
+ message: "当前账号无任何系统权限，请联系系统管理员！",
201
+ type: "warning",
202
+ duration: 3000
203
+ });
204
+ }
205
+ return true;
206
+ }
207
+ // 3.添加动态路由
208
+ //页面文件
209
+ const modules = import.meta.glob("@/views/**/*.vue");
210
+ //页面配置项
211
+ const viewConfig = import.meta.glob("@/views/**/config.ts", {
212
+ import: "viewConfig",
213
+ eager: true
214
+ });
215
+ const userRouterList = auth.getUserRouter(authStore.authMenuList, modules, viewConfig);
216
+ console.log(authStore.authMenuList);
217
+
218
+ userRouterList.forEach(route => {
219
+ router.addRoute("layout", route);
220
+ });
221
+ authStore.setLayoutMenuList(userRouterList);
222
+ return false;
223
+ } catch (error) {
224
+ // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
225
+ // globalStore.setToken("");
226
+ // router.replace(LOGIN_URL);
227
+ return Promise.reject(error);
228
+ }
229
+ };
230
+
231
+ ```
232
+
233
+ - Vue2+Vuex+Webpack+Vue
234
+
235
+ ```javascript
236
+ //router/index.js
237
+ router.beforeEach(async (to, from, next) => {
238
+ NProgress.start();
239
+ document.title = to.query.name ? `${to.query.name + "-"}` : "" + `${to.meta.title ?? ""}`;
240
+ // 1.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
241
+ const URL = [LOGIN_ROUTER];
242
+ const token = auth.getToken();
243
+ if (URL.includes(to.path.toLocaleLowerCase())) {
244
+ if (token) return next(from.fullPath);
245
+ return next();
246
+ }
247
+ //2.判断是否有无token,没有重定向到 login
248
+ if (!token) return next({ path: LOGIN_ROUTER, replace: true });
249
+ //3.判断用户是否有菜单列表
250
+ if (!store.getters.authMenuListGet.length) {
251
+ //监测是当前用户是否有权限,并同步菜单
252
+ const isEmptyPower = await initDynamicRouter(to.path);
253
+ if (!isEmptyPower) return next({ ...to, replace: true });
254
+ } else {
255
+ //动态设置菜单
256
+ setNavList(to.path, permission);
257
+ }
258
+ return next();
259
+ });
260
+ //router/dynamicRouter.js
261
+ let userStationRouter = [];
262
+ /**
263
+ * 初始化动态路由
264
+ */
265
+ export const initDynamicRouter = async path => {
266
+ try {
267
+ // 1.获取菜单列表 && 按钮权限（可合并到一个接口获取，根据后端不同可自行改造）
268
+ // await store.dispatch('getUserRouteListApi');
269
+ // console.log(store.getters.authMenuListGet);
270
+ const authMenuList = await fetchUserRouteList();
271
+ //2.判断当前用户有没有系统权限
272
+ if (!authMenuList.length) {
273
+ handleNoPermission();
274
+ return true;
275
+ }
276
+ // 3.添加动态路由，生成菜单栏
277
+ userStationRouter = generateUserStationRouter(authMenuList);
278
+ addRoutesToRouter(userStationRouter);
279
+ addRoutesToRouter(permission);
280
+ setNavList(path, permission);
281
+ return false;
282
+ } catch (error) {
283
+ // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
284
+ // globalStore.setToken("");
285
+ // router.replace(LOGIN_URL);
286
+ handleRequestError(error);
287
+ return Promise.reject(error);
288
+ }
289
+ };
290
+ //错误处理
291
+ function handleRequestError(error) {
292
+ auth.removeToken();
293
+ }
294
+ //无权限处理
295
+ function handleNoPermission() {
296
+ Notification({
297
+ title: "无权限访问",
298
+ message: "当前账号无任何系统权限，请联系系统管理员！",
299
+ type: "warning",
300
+ duration: 3000
301
+ });
302
+ }
303
+ //动态用户菜单
304
+ async function fetchUserRouteList() {
305
+ await store.dispatch("getUserRouteListApi");
306
+ return store.getters.authMenuListGet.map(item => item.routeView);
307
+ }
308
+ //过滤路由
309
+ function generateUserStationRouter(authMenuList) {
310
+ return stationRouter
311
+ .map(item => {
312
+ if (item.children.length === 1 && authMenuList.includes(item.path)) {
313
+ return item;
314
+ } else if (item.children.length > 1) {
315
+ item.children = item.children.filter(child => authMenuList.includes(child.path));
316
+ return item.children.length ? item : null;
317
+ }
318
+ return null;
319
+ })
320
+ .filter(item => item !== null);
321
+ }
322
+ //动态添加路由
323
+ function addRoutesToRouter(routes) {
324
+ for (let route of routes) {
325
+ router.addRoute(route);
326
+ }
327
+ }
328
+ ```
329
+
330
+ - 404 页面配置
331
+
332
+ - Vue2+VueRouter3.x
333
+
334
+ ```javascript
335
+ //静态路由下添加
336
+ {
337
+ path: '*',
338
+ component: () => import('@/components/ErrorPage/404.vue'),
339
+ },
340
+ ```
341
+
342
+ - Vue3+VueRouter4.x
343
+
344
+ ```javascript
345
+ //静态路由下添加
346
+ {
347
+ path: "/:pathMatch(.*)*",
348
+ component: () => import("@/components/ErrorMessage/404.vue")
349
+ }
350
+ ```
351
+
352
+ - 按钮级别权限处理（自定义指令）
353
+
354
+ ```javascript
355
+ import store from "@/store";
356
+ const auth = {
357
+ inserted(el, binding) {
358
+ controlShowByUserPower(el, binding);
359
+ }
360
+ };
361
+ function controlShowByUserPower(el, binding) {
362
+ const value = binding.value;
363
+ const authButtonList = store.getters.authButtonListGet;
364
+ return !authButtonList.includes(value) ? el.parentNode.removeChild(el) : "";
365
+ }
366
+ export default auth;
367
+ //如何使用,“stationController.addStation标识需要与按钮权限标识匹配”
368
+ <div v-auth="'stationController.addStation'"> </div>;
369
+ ```
370
+
371
+ ## 主题
372
+
373
+ - 使用方式
374
+
375
+ ```javascript
376
+ //在项目入口文件 main.js/main.ts中,在webpack5/vite项目中请使用以下方式按需导入
377
+ import { install } from "yxuse/theme";
378
+ install();
379
+ //在webpack4或其他低版本语法
380
+ import yxuse from "yxuse";
381
+ const { install } = yxuse.theme;
382
+ install();
383
+ ```
384
+
385
+ - 内置方法
386
+
387
+ ```javascript
388
+ /**
389
+ * @description:注册主题下的css变量
390
+ */
391
+ install;
392
+ /**
393
+ * @description:修改主题
394
+ * @param themeName 主题名称
395
+ */
396
+ changeTheme;
397
+ /**
398
+ * @description:获取当前主题
399
+ */
400
+ getCurTheme;
401
+ /**
402
+ * @description:获取当前主题下的系统配置
403
+ * @param systemName 系统名称
404
+ */
405
+ getSystemThemeConfig;
406
+
407
+ /**
408
+ * @description:获取当前主题下的某个组/模块配置颜色
409
+ * @param groupName 名称
410
+ */
411
+ getGroupColor;
412
+
413
+ /**
414
+ * @description:注册当前系统私有css变量
415
+ * @param systemName 系统名称
416
+ */
417
+ installSystemTheme;
418
+ ```
419
+
420
+ - css 变量 json 配置
421
+
422
+ > 下方各类组件颜色变量配置，需要大家一起丰富
423
+
424
+ ```javascript
425
+ green: {
426
+ common: {
427
+ //公用颜色
428
+ color: {
429
+ //主题色
430
+ "main-100": "rgba(80, 165, 122, 1)",
431
+ "main-50": "rgba(80, 165, 122, 0.5)",
432
+ "main-25": "rgba(80, 165, 122, 0.25)",
433
+ "main-15": "rgba(80, 165, 122, 0.15)",
434
+ "main-5": "rgba(80, 165, 122, 0.05)",
435
+
436
+ //故障色
437
+ "error-100": "rgba(255, 152, 146, 1)",
438
+ "error-50": "rgba(255, 152, 146, 0.5)",
439
+ "error-25": "rgba(255, 152, 146, 0.25)",
440
+ "error-15": "rgba(255, 152, 146, 0.15)",
441
+ "error-5": "rgba(255, 152, 146, 0.05)",
442
+
443
+ //预警色
444
+ "warning-100": "rgba(249, 162, 33, 1)",
445
+ "warning-50": "rgba(249, 162, 33, 0.5)",
446
+ "warning-25": "rgba(249, 162, 33, 0.25)",
447
+ "warning-15": "rgba(249, 162, 33, 0.15)",
448
+ "warning-5": "rgba(249, 162, 33, 0.05)",
449
+
450
+ //信息色
451
+ "info-100": "rgba(133, 233, 183, 1)",
452
+ "info-50": "rgba(133, 233, 183, 0.5)",
453
+ "info-25": "rgba(133, 233, 183, 0.25)",
454
+ "info-15": "rgba(133, 233, 183, 0.15)",
455
+ "info-5": "rgba(133, 233, 183, 0.05)",
456
+
457
+ //中性色
458
+ "neutral-100": "rgba(85, 221, 221, 1)",
459
+ "neutral-50": "rgba(85, 221, 221, 0.5)",
460
+ "neutral-25": "rgba(85, 221, 221, 0.25)",
461
+ "neutral-15": "rgba(85, 221, 221, 0.15)",
462
+ "neutral-5": "rgba(85, 221, 221, 0.05)"
463
+ },
464
+ //背景色类
465
+ background: {
466
+ "error-gradual": "linear-gradient(90deg, #FFCECB 0%, rgba(255,235,233,0.35) 100%)",
467
+ "warning-gradual": "linear-gradient(90deg, #FFE4BC 0%, rgba(255,250,233,0.35) 100%)",
468
+ "success-gradual": "linear-gradient(90deg, #D5ECBE 0%, rgba(234,255,233,0.35) 100%)"
469
+ },
470
+ //按钮类
471
+ button: {
472
+ background: "rgba(103, 186, 145, 0.10)",
473
+ "border-color": "rgba(80, 165, 122, 1)",
474
+ "text-color": "rgba(80, 165, 122, 1)",
475
+ "active-background-color": "rgba(80, 165, 122, 1)",
476
+ "active-border-color": "rgba(154, 209, 162, 1)",
477
+ "active-text-color": "#fff"
478
+ },
479
+ checkbox: {
480
+ background: "rgba(216, 233, 219, 1)",
481
+ "icon-color": "rgba(80, 165, 122, 0)",
482
+ "border-color": "rgba(154, 209, 162, 1)",
483
+ "checked-background": "rgba(216, 233, 219, 1)",
484
+ "checked-icon-color": "rgba(80, 165, 122, 1)",
485
+ "checked-border-color": "rgba(154, 209, 162, 1)"
486
+ },
487
+ //input
488
+ input: {
489
+ background: "rgba(237, 246, 239, 1)",
490
+ "border-color": "rgba(80, 165, 122, 1)",
491
+ color: "rgba(29, 75, 52, 1)",
492
+ "placeholder-color": "rgba(80, 165, 122, 1)",
493
+ "hover-background": "rgba(237, 246, 239, 0.30)",
494
+ "hover-border-color": "rgba(80, 165, 122, 1)",
495
+ "hover-color": "rgba(80, 165, 122, 1)",
496
+ "active-background": "rgba(237, 246, 239, 0.30)",
497
+ "active-border-color": "rgba(80, 165, 122, 1)",
498
+ "active-color": "rgba(80, 165, 122, 1)",
499
+ "disabled-background": "rgba(237, 246, 239, 1)",
500
+ "disabled-border-color": "rgba(237, 246, 239, 1)",
501
+ "disabled-color": "rgba(83, 83, 83, 1)"
502
+ },
503
+ // select
504
+ select: {
505
+ "dropdown-background": "rgba(237, 246, 239, 1)",
506
+ "dropdown-border-color": "rgba(80, 165, 122, 1)",
507
+ "dropdown-item-color": "rgba(80, 165, 122, 1)",
508
+ "dropdown-item-hover-background": "rgba(178, 220, 198, 1)",
509
+ "dropdown-item-hover-color": "rgba(29, 75, 52, 1)",
510
+ "dropdown-item-selected-background": "rgba(178, 220, 198, 1)",
511
+ "dropdown-item-selected-color": "rgba(29, 75, 52, 1)"
512
+ },
513
+ //文字颜色
514
+ text: {
515
+ main: "#50A57A",
516
+ deep: "#1D4B34",
517
+ light: "rgba(80, 165, 122, 0.50)",
518
+ paler: "#637B6B",
519
+ warning: "#F8B85A"
520
+ },
521
+ tree:{},
522
+ //布局类
523
+ layout: {},
524
+ //表格类
525
+ table: {},
526
+ //曲线类
527
+ chart: {},
528
+ //提示类
529
+ message: {}
530
+ },
531
+
532
+ //各系统个性化配置
533
+ cloud: {},//运管系统
534
+ "station-control-center": {}, //站控
535
+ "traceplan-client":{} //任务计划
536
+ ...
537
+ },
538
+
539
+
540
+ ```