2.5.09

.vitepress/config.js

@@ -98,33 +98,7 @@ function createNav() {
     },
     {
       text: '常用Hooks',
-      link: '/hooks/',
-      items: [
-        {
-          text: 'useWatermark',
-          link: '/hooks/useWatermark',
-        },
-        {
-          text: 'useCrudSchemas',
-          link: '/hooks/useCrudSchemas',
-        },
-        {
-          text: 'useTagsView（2.1.0+）',
-          link: '/hooks/useTagsView',
-        },
-        {
-          text: 'useStorage（2.1.0+）',
-          link: '/hooks/useStorage',
-        },
-        {
-          text: 'useClipboard（2.4.0+）',
-          link: '/hooks/useClipboard',
-        },
-        {
-          text: 'useNetwork（2.4.0+）',
-          link: '/hooks/useNetwork',
-        },
-      ],
+      link: '/hooks/useWatermark',
     },
     {
       text: '相关链接',
@@ -328,6 +302,10 @@ function createSidebar() {
             text: '瀑布流组件（2.4.0+）',
             link: '/components/waterfall',
           },
+          {
+            text: '视频播放器组件（2.5.0+）',
+            link: '/components/video-player',
+          },
         ],
       },
       {
@@ -337,6 +315,10 @@ function createSidebar() {
             text: 'ImageViewer 图片预览组件',
             link: '/components/image-viewer',
           },
+          {
+            text: 'VideoViewer  图片预览组件（2.5.0+）',
+            link: '/components/video-viewer',
+          },
         ],
       },
     ],

components/video-player.md

@@ -0,0 +1,30 @@
+# VideoPlayer 视频播放器组件（2.5.0+）
+
+基于 `xgplayer` 二次封装的视频播放器
+
+VideoPlayer 组件位于 [src/components/VideoPlayer](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/VideoPlayer) 内
+
+
+## 用法
+
+
+```vue
+<script lang="ts" setup>
+import { VideoPlayer } from '@/components/VideoPlayer'
+</script>
+
+<template>
+  <VideoPlayer
+    url="//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4"
+    poster="//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg"
+  />
+</template>
+
+```
+
+## VideoPlayer 属性<span id="VideoPlayer"></span>
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| url | 视频的地址 | `string` | - | - |
+| poster | 视频的封面 | `string` | - | - |

components/video-viewer.md

@@ -0,0 +1,34 @@
+# VideoViewer 图片预览组件（2.5.0+）
+
+将 `VideoPlayer` 组件函数化，通过函数方便创建组件。
+
+VideoViewer 组件位于 [src/components/VideoViewer](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/VideoViewer) 内
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { createVideoViewer } from '@/components/VideoPlayer'
+
+const open = () => {
+  createVideoViewer({
+    url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
+    poster: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg'
+  })
+}
+</script>
+
+<template>
+  <ElButton type="primary" @click="open">预览</ElButton>
+</template>
+
+```
+
+## VideoViewer
+
+### 参数
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| url | 视频的地址 | `string` | - | - |
+| poster | 视频的封面 | `string` | - | - |

guide/design.md

@@ -25,9 +25,9 @@ var.css 则是注入到根元素，所以在每个地方也都能用到。
 
 :::
 
-## windicss
+## unocss
 
-项目中使用了 [windicss](https://windicss.org/)，具体参见文件使用说明。
+项目中使用了 [unocss](https://github.com/unocss/unocss#readme)，具体参见文件使用说明。
 
 可能没有用到人会觉得用起来很不习惯，但就个人而言，用起来还是挺香的。减少了很多不必要的麻烦
 

guide/index.md

@@ -19,7 +19,7 @@
 如果你使用的 IDE 是[vscode](https://code.visualstudio.com/)的话，可以安装以下工具来提高开发效率及代码格式化：
 
 - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Iconify 图标插件
-- [windicss IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - windicss 提示插件
+- [unocss](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - unocss 提示插件
 - [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) - i18n 插件
 - [Volar](https://gitee.com/link?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Djohnsoncodehk.volar) - vue 开发必备
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
@@ -59,7 +59,7 @@ git clone https://gitee.com/kailong110120130/vue-element-plus-admin.git
 
 ### 安装 Node.js
 
-如果您电脑未安装[Node.js](https://nodejs.org/en/)，请安装它，推荐 `16.x` 及以上
+如果您电脑未安装[Node.js](https://nodejs.org/en/)，请安装它，推荐 `18.x` 及以上
 
 **验证**
 

guide/introduction.md

@@ -49,8 +49,10 @@
 ├── public # 静态资源
 ├── src # 项目代码
 │   ├── api # api接口管理
+|   |── axios # axios配置
 │   ├── assets # 静态资源
 │   ├── components # 公用组件
+│   ├── constants # 存放常量
 │   ├── hooks # 常用hooks
 │   ├── layout # 布局组件
 │   ├── locales # 语言文件
@@ -86,7 +88,7 @@
 ├── stylelint.config.js # stylelint 配置
 ├── tsconfig.json # typescript 配置
 ├── vite.config.ts # vite 配置
-└── windi.config.ts # windicss 配置
+└── uno.config.ts # unocss 配置
 ```
 
 ## 浏览器支持

guide/mock.md

@@ -127,9 +127,11 @@ export const delTableListApi = (ids: string[] | number[]): Promise<IResponse> =>
 
 ## axios 配置
 
-**axios** 请求封装存放于 [src/config/axios](https://github.com/kailong321200875/vue-element-plus-admin/blob/master/src/config/axios) 中。
+**axios** 请求封装存放于 [src/axios](https://github.com/kailong321200875/vue-element-plus-admin/blob/master/src/axios) 中。
 
-### config.ts 配置说明
+### 全局 axios 配置说明
+
+axios 全局配置放在 [src/constants](https://github.com/kailong321200875/vue-element-plus-admin/blob/master/src/constants) 中。
 
 ::: tip 注意
 
@@ -138,60 +140,27 @@ export const delTableListApi = (ids: string[] | number[]): Promise<IResponse> =>
 :::
 
 ```ts
-const config: {
-  base_url: {
-    base: string
-    dev: string
-    pro: string
-    test: string
-  }
-  result_code: number | string
-  default_headers: AxiosHeaders
-  request_timeout: number
-} = {
-  /**
-   * api请求基础路径
-   */
-  base_url: {
-    // 开发环境接口前缀
-    base: '/api',
-
-    // 打包开发环境接口前缀
-    dev: '',
-
-    // 打包生产环境接口前缀
-    pro: '',
-
-    // 打包测试环境接口前缀
-    test: ''
-  },
-
-  /**
-   * 接口成功返回状态码
-   */
-  result_code: '0000',
-
-  /**
-   * 接口请求超时时间
-   */
-  request_timeout: 60000,
-
-  /**
-   * 默认接口请求类型
-   * 可选值：application/x-www-form-urlencoded multipart/form-data
-   */
-  default_headers: 'application/json'
-}
-
-export { config }
-
+/**
+ * 请求成功状态码
+ */
+export const SUCCESS_CODE = 0
+
+/**
+ * 请求contentType
+ */
+export const CONTENT_TYPE = 'application/json'
+
+/**
+ * 请求超时时间
+ */
+export const REQUEST_TIMEOUT = 60000
 ```
 
 ## Mock 服务
 
 Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发进程所阻塞。
 
-本项目使用 [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) 来进行 mock 数据处理。**项目内 mock 服务分本地和线上**。
+本项目使用 [vite-plugin-mock-dev-server](https://vite-plugin-mock-dev-server.netlify.app/) 来进行 mock 数据处理。**项目内 mock 服务分本地和线上**。
 
 ### 本地 Mock
 
@@ -205,23 +174,23 @@ Mock 数据是前端开发过程中必不可少的一环，是分离前后端开
 
 ::: tip
 
-文件新增后会自动更新，不需要手动重启，可以在代码控制台查看日志信息 mock 文件夹内会自动注册，排除以\_开头的文件夹及文件
+文件新增后会自动更新，不需要手动重启，可以在代码控制台查看日志信息 mock 文件夹内会自动注册
 
 :::
 
 ::: tip
 
-mock 的值可以直接使用 [mockjs](https://github.com/nuysoft/Mock/wiki) 的语法。
+mock 的值可以直接使用 [fakerjs](https://github.com/faker-js/faker#readme) 的语法。
 
 :::
 
 #### 接口有了，如何去掉 mock
 
-当后台接口已经开发完成，只需要将相应的 `mock` 函数去掉即可。
+可以在vite.config.ts中删除 `MockDevServerPlugin` 对应的代码。
 
 
 ### 线上 mock
 
 由于该项目是一个展示类项目，线上也是用 mock 数据，所以在打包后同时也集成了 mock。通常项目线上一般为正式接口。
 
-项目线上 mock 采用的是 [mockjs](https://github.com/nuysoft/Mock/wiki) 进行 mock 数据模拟。
+项目线上 mock 采用的是 [fakerjs](https://github.com/faker-js/faker#readme) 进行 mock 数据模拟。

guide/settings.md

@@ -156,7 +156,6 @@ VITE_APP_TITLE = ElementAdmin
 
 ```js
 export const appModules: AppState = {
-  userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
   sizeMap: ['default', 'large', 'small'],
   mobile: false, // 是否是移动端
   title: import.meta.env.VITE_APP_TITLE as string, // 标题