diff --git a/doc/SvgIcon.md b/doc/SvgIcon.md
index 5476434d..4f82c18c 100644
--- a/doc/SvgIcon.md
+++ b/doc/SvgIcon.md
@@ -1,7 +1,7 @@
-
## 全局组件
- - 组件支持`四种`svg图标
- - `四种`图标均支持 color 和 size 属性,使用示例见下文:
+
+- 组件支持`四种`svg 图标
+- `四种`图标均支持 color 和 size 属性,使用示例见下文:
```mermaid
# font-awesome的图标,使用 fa 作为前缀(带个空格)
@@ -18,31 +18,30 @@
```
-有时,Icon组件会覆盖不了图标的原有颜色或大小,请检查SVG文件的源代码。
-
+有时,Icon 组件会覆盖不了图标的原有颜色或大小,请检查 SVG 文件的源代码。
## 图标添加与配置
+
### 本地图标
-1. 将SVG图标文件,放入本地`/src/assets/icons`文件夹,然后重新编译项目。
+
+1. 将 SVG 图标文件,放入本地`/src/assets/icons`文件夹,然后重新编译项目。
2. 系统会自动加载该目录下的所有图标文件备用,现在你可以使用`Icon`组件来显示图标了。
3. 示例:``
4. 不建议在此文件夹放置`非常大、非常多`的文件,可能会影响系统加载速度,当确有此方面需求时,请将文件放置到其他位置,并单独导入和使用图标。
### font-awesome 图标
-1. 此图标库目前 `pigx-ui` 已经默认加载。加载代码在 `/src/utils/setIconfont.ts`中的cssUrls中。
-2. 你可以直接使用font-awesome 4.7.0的所有图标,这些图标可以在这里 https://fontawesome.com.cn/faicons/ 找到,当然你也可以直接使用图标选择器寻找图标。
-3. 示例:,注意图标名称一定是以fa加一个空格开头
-
-
+1. 此图标库目前 `pigx-ui` 已经默认加载。加载代码在 `/src/utils/setIconfont.ts`中的 cssUrls 中。
+2. 你可以直接使用 font-awesome 4.7.0 的所有图标,这些图标可以在这里 https://fontawesome.com.cn/faicons/ 找到,当然你也可以直接使用图标选择器寻找图标。
+3. 示例:,注意图标名称一定是以 fa 加一个空格开头
### element-plus 图标
+
1. 此图标库目前 `pigx-ui` 已经默认加载,加载代码在 `/src/main.ts` 执行的 elementIcons 方法中。
2. 你可以直接使用 `element-plus/icons-vue ^2.0.10` 的所有图标,在使用 `element-plus` 图标时,请使用`ele` 作为前缀,图标名称请使用:首字母大写的驼峰语法。
3. 示例:
-
### iconfont 图标
-1. 目前系统未使用任何iconfont图标,你可以获取iconfont图标库项目的Font class链接后,设置到 `/src/utils/setIconfont.ts` 中的 `cssUrls` 中,系统会自动加载链接中的所有图标以供使用。
-2. 示例:``,注意图标名称一定是以iconfont加一个空格开头,以图标名称结尾。
+1. 目前系统未使用任何 iconfont 图标,你可以获取 iconfont 图标库项目的 Font class 链接后,设置到 `/src/utils/setIconfont.ts` 中的 `cssUrls` 中,系统会自动加载链接中的所有图标以供使用。
+2. 示例:``,注意图标名称一定是以 iconfont 加一个空格开头,以图标名称结尾。
diff --git a/doc/router.md b/doc/router.md
index 72b4afb3..9b9edb35 100644
--- a/doc/router.md
+++ b/doc/router.md
@@ -1,7 +1,9 @@
## 登录流程路由拦截
### 登录
-登录通过pinia 调用一步接口,将返回的token 通过 `Session.set('token', res.access_token);` 保存下来。
+
+登录通过 pinia 调用一步接口,将返回的 token 通过 `Session.set('token', res.access_token);` 保存下来。
+
```
export const Session = {
// 设置临时缓存
@@ -27,11 +29,13 @@ export const Session = {
},
};
```
-根据代码可以看出 如果是存储的是token 则存储到 `cookies` 中 否则存储到 `sessionStorage` 中
+根据代码可以看出 如果是存储的是 token 则存储到 `cookies` 中 否则存储到 `sessionStorage` 中
### 路由拦截
+
通过路由的加载前拦截中
+
```javascript
router.beforeEach(async (to, from, next) => {
NProgress.configure({ showSpinner: false });
@@ -62,45 +66,46 @@ router.beforeEach(async (to, from, next) => {
}
});
```
-显而易见,如果没有token 信息则跳转到登录页面并且带着当前页面的信息,以便登录成功后跳转回之前的页面
-有token 则处理是不是login 页面。
-在不是login 页面的时候 查询 pinia 中是否有存储的路由和菜单信息,如果没有则进行路由初始化
+
+显而易见,如果没有 token 信息则跳转到登录页面并且带着当前页面的信息,以便登录成功后跳转回之前的页面
+有 token 则处理是不是 login 页面。
+在不是 login 页面的时候 查询 pinia 中是否有存储的路由和菜单信息,如果没有则进行路由初始化
```javascript
export async function initBackEndControlRoutes() {
- // 界面 loading 动画开始执行
- if (window.nextLoading === undefined) NextLoading.start();
- // 无 token 停止执行下一步
- if (!Session.get('token')) return false;
- // 触发初始化用户信息 pinia
- await useUserInfo().setUserInfos();
- // 获取路由菜单数据
- const res = await getBackEndControlRoutes();
- // 无登录权限时,添加判断
- // https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
- if (res.data.length <= 0) return Promise.resolve(true);
- // 存储接口原始路由(未处理component),根据需求选择使用
- useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data)));
- // 处理路由(component),替换 dynamicRoutes(/@/router/route)第一个顶级 children 的路由
- dynamicRoutes[0].children = [...home,...await backEndComponent(res.data), ...staticConfigRoutes]
- // 添加动态路由
- await setAddRoute();
- // 设置路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
- await setFilterMenuAndCacheTagsViewRoutes();
+ // 界面 loading 动画开始执行
+ if (window.nextLoading === undefined) NextLoading.start();
+ // 无 token 停止执行下一步
+ if (!Session.get('token')) return false;
+ // 触发初始化用户信息 pinia
+ await useUserInfo().setUserInfos();
+ // 获取路由菜单数据
+ const res = await getBackEndControlRoutes();
+ // 无登录权限时,添加判断
+ // https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
+ if (res.data.length <= 0) return Promise.resolve(true);
+ // 存储接口原始路由(未处理component),根据需求选择使用
+ useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data)));
+ // 处理路由(component),替换 dynamicRoutes(/@/router/route)第一个顶级 children 的路由
+ dynamicRoutes[0].children = [...home, ...(await backEndComponent(res.data)), ...staticConfigRoutes];
+ // 添加动态路由
+ await setAddRoute();
+ // 设置路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
+ await setFilterMenuAndCacheTagsViewRoutes();
}
```
-1. 整体逻辑是校验token 是否存储,
+1. 整体逻辑是校验 token 是否存储,
2. 获取登录用户的信息 `await useUserInfo().setUserInfos()`
3. 获取登录用户的菜单信息 `const res = await getBackEndControlRoutes()`
-4. 讲菜单信息动态添加到前端可以读取到的内容中,供左侧菜单使用 `dynamicRoutes[0].children = [...home,...await backEndComponent(res.data), ...staticConfigRoutes]` 这里我们将 `home` 放在菜单的第一个位置上
-4. 根据菜单信息生成路由信息 `await setAddRoute();`
-5. 保存路信息到pinia中 `await setFilterMenuAndCacheTagsViewRoutes();`
+4. 讲菜单信息动态添加到前端可以读取到的内容中,供左侧菜单使用 `dynamicRoutes[0].children = [...home,...await backEndComponent(res.data), ...staticConfigRoutes]` 这里我们将 `home` 放在菜单的第一个位置上
+5. 根据菜单信息生成路由信息 `await setAddRoute();`
+6. 保存路信息到 pinia 中 `await setFilterMenuAndCacheTagsViewRoutes();`
+### 拦截请求增加 token
-### 拦截请求增加token
+在使用 axios 发送请求时,拦截请求信息,如果有 token 信息则带着 token 信息进行请求
-在使用axios 发送请求时,拦截请求信息,如果有token 信息则带着token 信息进行请求
```javascript
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// get查询参数序列化
@@ -122,36 +127,38 @@ service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
);
```
-发送请求之后如果后端返回信息中不是200表明请求有异常,针对 `424` 进行令牌过期提醒,并跳转丁路界面进行重新登录
+发送请求之后如果后端返回信息中不是 200 表明请求有异常,针对 `424` 进行令牌过期提醒,并跳转丁路界面进行重新登录
```javascript
-service.interceptors.response.use((res: any) => {
- if (res.data.code === 1) {
- throw res.data
- }
- return res.data;
-}, error => {
- const status = Number(error.response.status) || 200
- const message = error.response.data.msg || errorCode[status] || errorCode['default']
- if (status === 424) {
- ElMessageBox.confirm('令牌状态已过期,请点击重新登录', '系统提示', {
- confirmButtonText: '重新登录',
- cancelButtonText: '取消',
- type: 'warning'
- })
- .then(() => {
- Session.clear(); // 清除浏览器全部临时缓存
- window.location.href = '/'; // 去登录页
- return
- })
- .catch(() => {
- })
- }
+service.interceptors.response.use(
+ (res: any) => {
+ if (res.data.code === 1) {
+ throw res.data;
+ }
+ return res.data;
+ },
+ (error) => {
+ const status = Number(error.response.status) || 200;
+ const message = error.response.data.msg || errorCode[status] || errorCode['default'];
+ if (status === 424) {
+ ElMessageBox.confirm('令牌状态已过期,请点击重新登录', '系统提示', {
+ confirmButtonText: '重新登录',
+ cancelButtonText: '取消',
+ type: 'warning',
+ })
+ .then(() => {
+ Session.clear(); // 清除浏览器全部临时缓存
+ window.location.href = '/'; // 去登录页
+ return;
+ })
+ .catch(() => {});
+ }
- if (status !== 200 || error.response.data.code === 1) {
- ElMessage.error(message)
- return Promise.reject(new Error(message))
- }
- return Promise.reject(error);
-})
+ if (status !== 200 || error.response.data.code === 1) {
+ ElMessage.error(message);
+ return Promise.reject(new Error(message));
+ }
+ return Promise.reject(error);
+ }
+);
```
diff --git a/index.html b/index.html
index 7d7755e5..d806f60c 100644
--- a/index.html
+++ b/index.html
@@ -1,34 +1,37 @@
-
-
-
-
-
-
+
+
+
+ Boot,Spring Cloud,Spring"
+ />
-
-
-
-
- PIGX 微服务快速开发平台
-
+
+
+
+
+ PIGX 微服务快速开发平台
+
-
-
-
-
-
-
-