feat(projects): 新版重构完成

2025-09-23 23:39:47 +08:00 · 2022-01-24 00:36:38 +08:00
parent 32a7cc408e
commit 68b42304d5
29 changed files with 1117 additions and 25 deletions
--- a/README.md
+++ b/README.md
@ -1,21 +1,22 @@
 <div align="center">
 	<img src="https://i.loli.net/2021/11/24/x5lLfuSnEawBAgi.png"/>
-	<h1>Soybean Admin Thin</h1>
+	<h1>Soybean Admin</h1>
 </div>

 [![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)

 ## 简介

-Soybean Admin Thin 是Soybean Admin的精简版。
+Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。

 ## 特性

 - **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的npm包管理器pnpm
 - **TypeScript**: 应用程序级 JavaScript 的语言
- **主题**：丰富可配置的主题
+- **主题**：丰富可配置的主题、暗黑模式，基于windicss的动态主题颜色
 - **代码规范**：丰富的规范插件及极高的代码规范
- **路由配置**：简易的路由配置
+- **权限路由**：简易的路由配置、基于mock的动态路由能快速实现后端动态路由
+- **请求函数**：完善的请求函数封装，提供Promise和hooks两种请求函数

 ## 预览

@ -32,15 +33,15 @@ Soybean Admin Thin 是Soybean Admin的精简版。
 - [gitee](https://gitee.com/honghuangdc/soybean-admin)

 ## 项目示例图
-![](https://i.loli.net/2021/11/24/pIhTKP7fdCqbVHl.png)
+![](https://s2.loli.net/2022/01/24/ovK6Oyqr7gIMu2n.png)

-![](https://i.loli.net/2021/11/24/gxRwsLnKi6IVp7C.png)
+![](https://s2.loli.net/2022/01/24/O8loxYhMySHwGfJ.png)

-![](https://i.loli.net/2021/11/24/UmVfjSJbxH6iYc2.png)
+![](https://s2.loli.net/2022/01/24/HKwpJ7Ab6j8fVvk.png)

-![](https://i.loli.net/2021/11/24/Uot1bcfGXiF726T.png)
+![](https://s2.loli.net/2022/01/24/bqJRSDZHBv3jsif.png)

-![](https://i.loli.net/2021/11/24/WzOIvlgJZaUtGm7.png)
+![](https://s2.loli.net/2022/01/24/wXpHeau6UrSTWdF.png)

 ### 使用 Gitpod

@ -108,7 +109,7 @@ pnpm i -g commitizen

 - 微信交流群：
  <div style="text-align:left">
-    <img src="https://s2.loli.net/2021/12/29/m65oExs7yHcPbKZ.jpg" style="width:200px" />
+    <img src="https://s2.loli.net/2022/01/24/uX8KaGt7W2jbw6V.jpg" style="width:200px" />
  </div>

 - QQ 群 `711301266`
--- a/mock/api/route.ts
+++ b/mock/api/route.ts
@ -125,6 +125,99 @@ const routes: AuthRoute.Route[] = [
    meta: {
      title: '组件示例',
      icon: 'fluent:app-store-24-regular',
+      order: 3
+    }
+  },
+  {
+    name: 'plugin',
+    path: '/plugin',
+    component: 'basic',
+    children: [
+      {
+        name: 'plugin_map',
+        path: '/plugin/map',
+        component: 'self',
+        meta: {
+          title: '地图',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'plugin_video',
+        path: '/plugin/video',
+        component: 'self',
+        meta: {
+          title: '视频',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'plugin_editor',
+        path: '/plugin/editor',
+        component: 'multi',
+        children: [
+          {
+            name: 'plugin_editor_quill',
+            path: '/plugin/editor/quill',
+            component: 'self',
+            meta: {
+              title: '富文本编辑器'
+            }
+          },
+          {
+            name: 'plugin_editor_markdown',
+            path: '/plugin/editor/markdown',
+            component: 'self',
+            meta: {
+              title: 'markdown编辑器'
+            }
+          }
+        ],
+        meta: {
+          title: '编辑器',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'plugin_swiper',
+        path: '/plugin/swiper',
+        component: 'self',
+        meta: {
+          title: 'Swiper插件',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'plugin_copy',
+        path: '/plugin/copy',
+        component: 'self',
+        meta: {
+          title: '剪贴板',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'plugin_icon',
+        path: '/plugin/icon',
+        component: 'self',
+        meta: {
+          title: '图标',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'plugin_print',
+        path: '/plugin/print',
+        component: 'self',
+        meta: {
+          title: '打印',
+          requiresAuth: true
+        }
+      }
+    ],
+    meta: {
+      title: '插件示例',
+      icon: 'clarity:plugin-line',
      order: 4
    }
  },
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
-  "name": "soybean-admin-thin",
-  "version": "0.1.3",
+  "name": "soybean-admin",
+  "version": "0.9.0",
  "scripts": {
    "dev": "cross-env VITE_HTTP_ENV=test vite",
    "dev:prod": "cross-env VITE_HTTP_ENV=prod vite",
@ -36,15 +36,22 @@
    "lodash-es": "^4.17.21",
    "naive-ui": "^2.24.1",
    "pinia": "^2.0.9",
+    "print-js": "^1.6.0",
    "qs": "^6.10.3",
+    "swiper": "^7.4.1",
+    "vditor": "^3.8.11",
    "vue": "^3.2.26",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "wangeditor": "^4.7.11",
+    "xgplayer": "^2.31.4"
  },
  "devDependencies": {
+    "@amap/amap-jsapi-types": "^0.0.8",
    "@commitlint/cli": "^16.1.0",
    "@commitlint/config-conventional": "^16.0.0",
    "@iconify/json": "^1.1.459",
    "@iconify/vue": "^3.1.2",
+    "@types/bmapgl": "^0.0.5",
    "@types/crypto-js": "^4.1.0",
    "@types/node": "^17.0.10",
    "@types/qs": "^6.9.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,12 +1,14 @@
 lockfileVersion: 5.3

 specifiers:
+  '@amap/amap-jsapi-types': ^0.0.8
  '@antv/g2plot': ^2.4.7
  '@better-scroll/core': ^2.4.2
  '@commitlint/cli': ^16.1.0
  '@commitlint/config-conventional': ^16.0.0
  '@iconify/json': ^1.1.459
  '@iconify/vue': ^3.1.2
+  '@types/bmapgl': ^0.0.5
  '@types/crypto-js': ^4.1.0
  '@types/node': ^17.0.10
  '@types/qs': ^6.9.7
@ -41,12 +43,15 @@ specifiers:
  pinia: ^2.0.9
  postinstall-postinstall: ^2.1.0
  prettier: ^2.5.1
+  print-js: ^1.6.0
  qs: ^6.10.3
  rollup-plugin-visualizer: ^5.5.4
  sass: ^1.49.0
+  swiper: ^7.4.1
  typescript: ^4.5.5
  unplugin-icons: ^0.13.0
  unplugin-vue-components: ^0.17.14
+  vditor: ^3.8.11
  vite: ^2.7.13
  vite-plugin-html: ^2.1.2
  vite-plugin-mock: ^2.9.6
@ -55,7 +60,9 @@ specifiers:
  vue-router: ^4.0.12
  vue-tsc: ^0.31.1
  vueuc: ^0.4.23
+  wangeditor: ^4.7.11
  windicss: ^3.4.3
+  xgplayer: ^2.31.4

 dependencies:
  '@antv/g2plot': registry.npmmirror.com/@antv/g2plot/2.4.7
@ -70,15 +77,22 @@ dependencies:
  lodash-es: registry.npmmirror.com/lodash-es/4.17.21
  naive-ui: registry.npmmirror.com/naive-ui/2.24.1_vue@3.2.26
  pinia: registry.npmmirror.com/pinia/2.0.9_typescript@4.5.5+vue@3.2.26
+  print-js: registry.npmmirror.com/print-js/1.6.0
  qs: registry.npmmirror.com/qs/6.10.3
+  swiper: registry.npmmirror.com/swiper/7.4.1
+  vditor: registry.npmmirror.com/vditor/3.8.11
  vue: registry.npmmirror.com/vue/3.2.26
  vue-router: registry.npmmirror.com/vue-router/4.0.12_vue@3.2.26
+  wangeditor: registry.npmmirror.com/wangeditor/4.7.11
+  xgplayer: registry.npmmirror.com/xgplayer/2.31.4

 devDependencies:
+  '@amap/amap-jsapi-types': registry.npmmirror.com/@amap/amap-jsapi-types/0.0.8
  '@commitlint/cli': registry.npmmirror.com/@commitlint/cli/16.1.0_@types+node@17.0.10
  '@commitlint/config-conventional': registry.npmmirror.com/@commitlint/config-conventional/16.0.0
  '@iconify/json': registry.npmmirror.com/@iconify/json/1.1.459
  '@iconify/vue': registry.npmmirror.com/@iconify/vue/3.1.2_vue@3.2.26
+  '@types/bmapgl': registry.npmmirror.com/@types/bmapgl/0.0.5
  '@types/crypto-js': registry.npmmirror.com/@types/crypto-js/4.1.0
  '@types/node': registry.npmmirror.com/@types/node/17.0.10
  '@types/qs': registry.npmmirror.com/@types/qs/6.9.7
@ -355,7 +369,6 @@ packages:
    engines: {node: '>=4'}
    dependencies:
      color-convert: registry.npmmirror.com/color-convert/1.9.3
-    dev: true

  registry.nlark.com/anymatch/3.1.2:
    resolution: {integrity: sha1-wFV8CWrzLxBhmPT04qODU343hxY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/anymatch/download/anymatch-3.1.2.tgz}
@ -558,7 +571,6 @@ packages:
    resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-name/download/color-name-1.1.3.tgz}
    name: color-name
    version: 1.1.3
-    dev: true

  registry.nlark.com/color-name/1.1.4:
    resolution: {integrity: sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz}
@ -841,6 +853,12 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  registry.nlark.com/diff-match-patch/1.0.5:
+    resolution: {integrity: sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/diff-match-patch/download/diff-match-patch-1.0.5.tgz}
+    name: diff-match-patch
+    version: 1.0.5
+    dev: false
+
  registry.nlark.com/diff/4.0.2:
    resolution: {integrity: sha1-YPOuy4nV+uUgwRqhnvwruYKq3n0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/diff/download/diff-4.0.2.tgz}
    name: diff
@ -983,6 +1001,35 @@ packages:
      is-date-object: registry.nlark.com/is-date-object/1.0.5
      is-symbol: registry.nlark.com/is-symbol/1.0.4

+  registry.nlark.com/es5-ext/0.10.53:
+    resolution: {integrity: sha1-k8WjrP2+8nUiCtcmRK0C7hg2jeE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/es5-ext/download/es5-ext-0.10.53.tgz}
+    name: es5-ext
+    version: 0.10.53
+    dependencies:
+      es6-iterator: registry.nlark.com/es6-iterator/2.0.3
+      es6-symbol: registry.nlark.com/es6-symbol/3.1.3
+      next-tick: registry.nlark.com/next-tick/1.0.0
+    dev: false
+
+  registry.nlark.com/es6-iterator/2.0.3:
+    resolution: {integrity: sha1-p96IkUGgWpSwhUQDstCg+/qY87c=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/es6-iterator/download/es6-iterator-2.0.3.tgz}
+    name: es6-iterator
+    version: 2.0.3
+    dependencies:
+      d: registry.npmmirror.com/d/1.0.1
+      es5-ext: registry.nlark.com/es5-ext/0.10.53
+      es6-symbol: registry.nlark.com/es6-symbol/3.1.3
+    dev: false
+
+  registry.nlark.com/es6-symbol/3.1.3:
+    resolution: {integrity: sha1-utXTwbzawoJp9MszHkMceKxwXRg=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/es6-symbol/download/es6-symbol-3.1.3.tgz}
+    name: es6-symbol
+    version: 3.1.3
+    dependencies:
+      d: registry.npmmirror.com/d/1.0.1
+      ext: registry.npmmirror.com/ext/1.6.0
+    dev: false
+
  registry.nlark.com/escalade/3.1.1:
    resolution: {integrity: sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/escalade/download/escalade-3.1.1.tgz}
    name: escalade
@ -1043,6 +1090,14 @@ packages:
      eslint-visitor-keys: registry.npmmirror.com/eslint-visitor-keys/2.1.0
    dev: true

+  registry.nlark.com/esprima/1.2.5:
+    resolution: {integrity: sha1-CZNQL+r2aBODJXVvMPmlH+7sEek=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/esprima/download/esprima-1.2.5.tgz}
+    name: esprima
+    version: 1.2.5
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: false
+
  registry.nlark.com/esquery/1.4.0:
    resolution: {integrity: sha1-IUj/w4uC6McFff7UhCWz5h8PJKU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/esquery/download/esquery-1.4.0.tgz}
    name: esquery
@ -1068,6 +1123,15 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  registry.nlark.com/event-emitter/0.3.5:
+    resolution: {integrity: sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/event-emitter/download/event-emitter-0.3.5.tgz}
+    name: event-emitter
+    version: 0.3.5
+    dependencies:
+      d: registry.npmmirror.com/d/1.0.1
+      es5-ext: registry.nlark.com/es5-ext/0.10.53
+    dev: false
+
  registry.nlark.com/expand-tilde/2.0.2:
    resolution: {integrity: sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/expand-tilde/download/expand-tilde-2.0.2.tgz}
    name: expand-tilde
@ -1263,6 +1327,16 @@ packages:
      universalify: registry.nlark.com/universalify/2.0.0
    dev: true

+  registry.nlark.com/fs-extra/5.0.0:
+    resolution: {integrity: sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fs-extra/download/fs-extra-5.0.0.tgz}
+    name: fs-extra
+    version: 5.0.0
+    dependencies:
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+      jsonfile: registry.nlark.com/jsonfile/4.0.0
+      universalify: registry.nlark.com/universalify/0.1.2
+    dev: false
+
  registry.nlark.com/fs-extra/7.0.1:
    resolution: {integrity: sha1-TxicRKoSO4lfcigE9V6iPq3DSOk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fs-extra/download/fs-extra-7.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffs-extra%2Fdownload%2Ffs-extra-7.0.1.tgz}
    name: fs-extra
@ -1391,7 +1465,6 @@ packages:
    name: has-flag
    version: 3.0.0
    engines: {node: '>=4'}
-    dev: true

  registry.nlark.com/has-flag/4.0.0:
    resolution: {integrity: sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz}
@ -1779,7 +1852,6 @@ packages:
    version: 4.0.0
    optionalDependencies:
      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
-    dev: true

  registry.nlark.com/jsonfile/6.1.0:
    resolution: {integrity: sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jsonfile/download/jsonfile-6.1.0.tgz}
@ -2010,6 +2082,12 @@ packages:
    version: 1.4.0
    dev: true

+  registry.nlark.com/next-tick/1.0.0:
+    resolution: {integrity: sha1-yobR/ogoFpsBICCOPchCS524NCw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/next-tick/download/next-tick-1.0.0.tgz}
+    name: next-tick
+    version: 1.0.0
+    dev: false
+
  registry.nlark.com/nice-try/1.0.5:
    resolution: {integrity: sha1-ozeKdpbOfSI+iPybdkvX7xCJ42Y=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/nice-try/download/nice-try-1.0.5.tgz}
    name: nice-try
@ -2727,6 +2805,15 @@ packages:
      amdefine: registry.nlark.com/amdefine/1.0.1
    dev: false

+  registry.nlark.com/source-map/0.1.43:
+    resolution: {integrity: sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/source-map/download/source-map-0.1.43.tgz}
+    name: source-map
+    version: 0.1.43
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      amdefine: registry.nlark.com/amdefine/1.0.1
+    dev: false
+
  registry.nlark.com/source-map/0.5.7:
    resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/source-map/download/source-map-0.5.7.tgz}
    name: source-map
@ -2983,7 +3070,6 @@ packages:
    name: universalify
    version: 0.1.2
    engines: {node: '>= 4.0.0'}
-    dev: true

  registry.nlark.com/universalify/2.0.0:
    resolution: {integrity: sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/universalify/download/universalify-2.0.0.tgz}
@ -3178,6 +3264,12 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  registry.npmmirror.com/@amap/amap-jsapi-types/0.0.8:
+    resolution: {integrity: sha1-WoB+J/M/5Am+TI7L3nO4w1wctlA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@amap/amap-jsapi-types/download/@amap/amap-jsapi-types-0.0.8.tgz}
+    name: '@amap/amap-jsapi-types'
+    version: 0.0.8
+    dev: true
+
  registry.npmmirror.com/@antfu/install-pkg/0.1.0:
    resolution: {integrity: sha1-jYxhggy8MuXDfYLVFUha0+6b0FI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@antfu/install-pkg/download/@antfu/install-pkg-0.1.0.tgz}
    name: '@antfu/install-pkg'
@ -3419,6 +3511,25 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

+  registry.npmmirror.com/@babel/runtime-corejs3/7.16.8:
+    resolution: {integrity: sha512-3fKhuICS1lMz0plI5ktOE/yEtBRMVxplzRkdn6mJQ197XiY0JnrzYV0+Mxozq3JZ8SBV9Ecurmw1XsGbwOf+Sg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/runtime-corejs3/download/@babel/runtime-corejs3-7.16.8.tgz}
+    name: '@babel/runtime-corejs3'
+    version: 7.16.8
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      core-js-pure: registry.npmmirror.com/core-js-pure/3.20.3
+      regenerator-runtime: registry.npmmirror.com/regenerator-runtime/0.13.9
+    dev: false
+
+  registry.npmmirror.com/@babel/runtime/7.16.7:
+    resolution: {integrity: sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/runtime/download/@babel/runtime-7.16.7.tgz}
+    name: '@babel/runtime'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: registry.npmmirror.com/regenerator-runtime/0.13.9
+    dev: false
+
  registry.npmmirror.com/@babel/types/7.16.7:
    resolution: {integrity: sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/types/download/@babel/types-7.16.7.tgz}
    name: '@babel/types'
@ -3796,6 +3907,12 @@ packages:
      picomatch: registry.npmmirror.com/picomatch/2.3.0
    dev: true

+  registry.npmmirror.com/@types/bmapgl/0.0.5:
+    resolution: {integrity: sha512-4LVndgKRKLT4OIgUENDb9Uf9CsT2FtIMvpfKxIQVerEYPEXlunof60qDJQb/+1bg78crv7QJiz71tfh6NfpHbg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/bmapgl/download/@types/bmapgl-0.0.5.tgz}
+    name: '@types/bmapgl'
+    version: 0.0.5
+    dev: true
+
  registry.npmmirror.com/@types/crypto-js/4.1.0:
    resolution: {integrity: sha512-DCFfy/vh2lG6qHSGezQ+Sn2Ulf/1Mx51dqOdmOKyW5nMK3maLlxeS3onC7r212OnBM2pBR95HkAmAjjF08YkxQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/crypto-js/download/@types/crypto-js-4.1.0.tgz}
    name: '@types/crypto-js'
@ -4587,7 +4704,6 @@ packages:
      ansi-styles: registry.nlark.com/ansi-styles/3.2.1
      escape-string-regexp: registry.nlark.com/escape-string-regexp/1.0.5
      supports-color: registry.npmmirror.com/supports-color/5.5.0
-    dev: true

  registry.npmmirror.com/chalk/4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/chalk/download/chalk-4.1.2.tgz}
@ -4680,7 +4796,6 @@ packages:
    version: 1.9.3
    dependencies:
      color-name: registry.nlark.com/color-name/1.1.3
-    dev: true

  registry.npmmirror.com/color-convert/2.0.1:
    resolution: {integrity: sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/color-convert/download/color-convert-2.0.1.tgz}
@ -4706,7 +4821,6 @@ packages:
    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/download/commander-2.20.3.tgz}
    name: commander
    version: 2.20.3
-    dev: true

  registry.npmmirror.com/commander/8.3.0:
    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/download/commander-8.3.0.tgz}
@ -4798,6 +4912,13 @@ packages:
      through2: registry.nlark.com/through2/4.0.2
    dev: true

+  registry.npmmirror.com/core-js-pure/3.20.3:
+    resolution: {integrity: sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/core-js-pure/download/core-js-pure-3.20.3.tgz}
+    name: core-js-pure
+    version: 3.20.3
+    requiresBuild: true
+    dev: false
+
  registry.npmmirror.com/cosmiconfig-typescript-loader/1.0.2_9d6cd740eceb93d711351e2e9548d1bd:
    resolution: {integrity: sha512-27ZehvijYqAKVzta5xtZBS3PAliC8CmnWkGXN0vgxAZz7yqxpMjf3aG7flxF5rEiu8FAD7nZZXtOI+xUGn+bVg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/cosmiconfig-typescript-loader/download/cosmiconfig-typescript-loader-1.0.2.tgz}
    id: registry.npmmirror.com/cosmiconfig-typescript-loader/1.0.2
@ -4865,12 +4986,29 @@ packages:
      word-wrap: registry.nlark.com/word-wrap/1.2.3
    dev: true

+  registry.npmmirror.com/d/1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/d/download/d-1.0.1.tgz}
+    name: d
+    version: 1.0.1
+    dependencies:
+      es5-ext: registry.nlark.com/es5-ext/0.10.53
+      type: registry.npmmirror.com/type/1.2.0
+    dev: false
+
  registry.npmmirror.com/d3-hierarchy/2.0.0:
    resolution: {integrity: sha1-2riKWMo+ehvGyrOQ6JZn/MbSAhg=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/d3-hierarchy/download/d3-hierarchy-2.0.0.tgz}
    name: d3-hierarchy
    version: 2.0.0
    dev: false

+  registry.npmmirror.com/danmu.js/0.5.10:
+    resolution: {integrity: sha1-YW8wjzU+78H3ucaKhVEwscOIjL8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/danmu.js/download/danmu.js-0.5.10.tgz}
+    name: danmu.js
+    version: 0.5.10
+    dependencies:
+      event-emitter: registry.nlark.com/event-emitter/0.3.5
+    dev: false
+
  registry.npmmirror.com/dargs/7.0.0:
    resolution: {integrity: sha1-BAFcQd4Ly2nshAUPPZvgyvjW1cw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dargs/download/dargs-7.0.0.tgz}
    name: dargs
@ -4979,6 +5117,14 @@ packages:
    version: 1.1.0
    dev: true

+  registry.npmmirror.com/dom7/4.0.4:
+    resolution: {integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dom7/download/dom7-4.0.4.tgz}
+    name: dom7
+    version: 4.0.4
+    dependencies:
+      ssr-window: registry.npmmirror.com/ssr-window/4.0.2
+    dev: false
+
  registry.npmmirror.com/domhandler/4.3.0:
    resolution: {integrity: sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/domhandler/download/domhandler-4.3.0.tgz}
    name: domhandler
@ -4988,6 +5134,21 @@ packages:
      domelementtype: registry.nlark.com/domelementtype/2.2.0
    dev: true

+  registry.npmmirror.com/downloadjs/1.4.7:
+    resolution: {integrity: sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/downloadjs/download/downloadjs-1.4.7.tgz}
+    name: downloadjs
+    version: 1.4.7
+    dev: false
+
+  registry.npmmirror.com/draggabilly/2.4.1:
+    resolution: {integrity: sha512-HHHLPEPZqRXIDQDFRFdK7RONZausNlJ4WkA73ST7Z6O2HPWttxFHVwHo8nccuDLzXWwiVKRVuc6fTkW+CQA++A==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/draggabilly/download/draggabilly-2.4.1.tgz}
+    name: draggabilly
+    version: 2.4.1
+    dependencies:
+      get-size: registry.npmmirror.com/get-size/2.0.3
+      unidragger: registry.npmmirror.com/unidragger/2.4.0
+    dev: false
+
  registry.npmmirror.com/ejs/3.1.6:
    resolution: {integrity: sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ejs/download/ejs-3.1.6.tgz}
    name: ejs
@ -5489,6 +5650,18 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  registry.npmmirror.com/ev-emitter/1.1.1:
+    resolution: {integrity: sha1-jxiwzlx2pdGAF/ccCnlcZbkTjyo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ev-emitter/download/ev-emitter-1.1.1.tgz}
+    name: ev-emitter
+    version: 1.1.1
+    dev: false
+
+  registry.npmmirror.com/eventemitter3/4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eventemitter3/download/eventemitter3-4.0.7.tgz}
+    name: eventemitter3
+    version: 4.0.7
+    dev: false
+
  registry.npmmirror.com/evtd/0.2.3:
    resolution: {integrity: sha512-tmiT1YUVqFjTY+BSBOAskL83xNx41iUfpvKP6Gcd/xMHjg3mnER98jXGXJyKnxCG19uPc6EhZiUC+MUyvoqCtw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/evtd/download/evtd-0.2.3.tgz}
    name: evtd
@ -5511,6 +5684,14 @@ packages:
      strip-final-newline: registry.nlark.com/strip-final-newline/2.0.0
    dev: true

+  registry.npmmirror.com/ext/1.6.0:
+    resolution: {integrity: sha1-OHHVBkHodMwXLitT+RmELRnbTFI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ext/download/ext-1.6.0.tgz}
+    name: ext
+    version: 1.6.0
+    dependencies:
+      type: registry.npmmirror.com/type/2.5.0
+    dev: false
+
  registry.npmmirror.com/fast-glob/3.2.11:
    resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fast-glob/download/fast-glob-3.2.11.tgz}
    name: fast-glob
@ -5603,6 +5784,21 @@ packages:
    dev: true
    optional: true

+  registry.npmmirror.com/generate-source-map/0.0.5:
+    resolution: {integrity: sha1-8SVfMWU8sCMeZxOn3IN1r08zpQk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/generate-source-map/download/generate-source-map-0.0.5.tgz}
+    name: generate-source-map
+    version: 0.0.5
+    dependencies:
+      esprima: registry.nlark.com/esprima/1.2.5
+      source-map: registry.nlark.com/source-map/0.1.43
+    dev: false
+
+  registry.npmmirror.com/get-size/2.0.3:
+    resolution: {integrity: sha1-VKHQJWsg6nrGRlFnViAnaZQa0u8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/get-size/download/get-size-2.0.3.tgz}
+    name: get-size
+    version: 2.0.3
+    dev: false
+
  registry.npmmirror.com/git-raw-commits/2.0.11:
    resolution: {integrity: sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/git-raw-commits/download/git-raw-commits-2.0.11.tgz}
    name: git-raw-commits
@ -5707,7 +5903,6 @@ packages:
    resolution: {integrity: sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz}
    name: graceful-fs
    version: 4.2.8
-    dev: true

  registry.npmmirror.com/has-ansi/2.0.0:
    resolution: {integrity: sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/has-ansi/download/has-ansi-2.0.0.tgz}
@ -6345,6 +6540,12 @@ packages:
      ansi-styles: registry.npmmirror.com/ansi-styles/5.2.0
      react-is: registry.npmmirror.com/react-is/17.0.2

+  registry.npmmirror.com/print-js/1.6.0:
+    resolution: {integrity: sha1-aSsEbPMZkrRq+mxtip2xxp1DHR8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/download/print-js-1.6.0.tgz}
+    name: print-js
+    version: 1.6.0
+    dev: false
+
  registry.npmmirror.com/pug-error/2.0.0:
    resolution: {integrity: sha1-XGIXPLCcNN4qLOBPF7it/sdNjKU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pug-error/download/pug-error-2.0.0.tgz}
    name: pug-error
@ -6398,6 +6599,12 @@ packages:
      type-fest: registry.npmmirror.com/type-fest/0.8.1
    dev: true

+  registry.npmmirror.com/regenerator-runtime/0.13.9:
+    resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz}
+    name: regenerator-runtime
+    version: 0.13.9
+    dev: false
+
  registry.npmmirror.com/regexp.prototype.flags/1.3.1:
    resolution: {integrity: sha1-fvNSro0VnnWMDq3Kb4/LTu8HviY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/regexp.prototype.flags/download/regexp.prototype.flags-1.3.1.tgz}
    name: regexp.prototype.flags
@ -6620,6 +6827,12 @@ packages:
      readable-stream: registry.nlark.com/readable-stream/3.6.0
    dev: true

+  registry.npmmirror.com/ssr-window/4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ssr-window/download/ssr-window-4.0.2.tgz}
+    name: ssr-window
+    version: 4.0.2
+    dev: false
+
  registry.npmmirror.com/string-width/2.1.1:
    resolution: {integrity: sha1-q5Pyeo3BPSjKyBXEYhQ6bZASrp4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/string-width/download/string-width-2.1.1.tgz}
    name: string-width
@ -6722,7 +6935,6 @@ packages:
    engines: {node: '>=4'}
    dependencies:
      has-flag: registry.nlark.com/has-flag/3.0.0
-    dev: true

  registry.npmmirror.com/supports-color/7.2.0:
    resolution: {integrity: sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/supports-color/download/supports-color-7.2.0.tgz}
@ -6746,6 +6958,17 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

+  registry.npmmirror.com/swiper/7.4.1:
+    resolution: {integrity: sha512-dhbL4tpYFvHug1J7GnKElfTi6EYhlZy/vNZRhHkWFyUsWZ1Vovipxj3la5gqllMogygXJMe3zvVv+f6eppvWiA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/swiper/download/swiper-7.4.1.tgz}
+    name: swiper
+    version: 7.4.1
+    engines: {node: '>= 4.7.0'}
+    requiresBuild: true
+    dependencies:
+      dom7: registry.npmmirror.com/dom7/4.0.4
+      ssr-window: registry.npmmirror.com/ssr-window/4.0.2
+    dev: false
+
  registry.npmmirror.com/tape/4.14.0:
    resolution: {integrity: sha1-5NRgl+EpgXF1uQkl8jhfaxvPqCY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tape/download/tape-4.14.0.tgz}
    name: tape
@ -6881,6 +7104,18 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  registry.npmmirror.com/type/1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/type/download/type-1.2.0.tgz}
+    name: type
+    version: 1.2.0
+    dev: false
+
+  registry.npmmirror.com/type/2.5.0:
+    resolution: {integrity: sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/type/download/type-2.5.0.tgz}
+    name: type
+    version: 2.5.0
+    dev: false
+
  registry.npmmirror.com/typescript/4.5.5:
    resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/typescript/download/typescript-4.5.5.tgz}
    name: typescript
@ -6902,6 +7137,22 @@ packages:
      uglify-to-browserify: registry.nlark.com/uglify-to-browserify/1.0.2
    dev: false

+  registry.npmmirror.com/unidragger/2.4.0:
+    resolution: {integrity: sha512-MueZK2oXuGE6OAlGKIrSXK2zCq+8yb1QUZgqyTDCSJzvwYL0g2Llrad+TtoQTYxtFnNyxxSw0IMnKNIgEMia1w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/unidragger/download/unidragger-2.4.0.tgz}
+    name: unidragger
+    version: 2.4.0
+    dependencies:
+      unipointer: registry.npmmirror.com/unipointer/2.4.0
+    dev: false
+
+  registry.npmmirror.com/unipointer/2.4.0:
+    resolution: {integrity: sha512-VjzDLPjGK7aYpQKH7bnDZS8X4axF5AFU/LQi+NQe1oyEHfaz6lWKhaQ7n4o7vJ1iJ4i2T0quCIfrQM139p05Sw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/unipointer/download/unipointer-2.4.0.tgz}
+    name: unipointer
+    version: 2.4.0
+    dependencies:
+      ev-emitter: registry.npmmirror.com/ev-emitter/1.1.1
+    dev: false
+
  registry.npmmirror.com/unplugin-icons/0.13.0_vite@2.7.13:
    resolution: {integrity: sha512-CyAl0HV3bZUGT7ut9agpPRhEYXCvufr80Fh72yrkD57BVCTZ7ze10Rt63ZrvPXiJQpd+aI/Bizm2aqOf3WPSfg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/unplugin-icons/download/unplugin-icons-0.13.0.tgz}
    id: registry.npmmirror.com/unplugin-icons/0.13.0
@ -7036,6 +7287,14 @@ packages:
      evtd: registry.npmmirror.com/evtd/0.2.3
      vue: registry.npmmirror.com/vue/3.2.26

+  registry.npmmirror.com/vditor/3.8.11:
+    resolution: {integrity: sha512-nwS2TLgu3DnHdfxcjnUESg/qbnYU0YR9YAvn2IKBK/F36h4k1BMqjsfEQqE4TL2RH5RGIapcQfAdJ9xF1iQNWw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vditor/download/vditor-3.8.11.tgz}
+    name: vditor
+    version: 3.8.11
+    dependencies:
+      diff-match-patch: registry.nlark.com/diff-match-patch/1.0.5
+    dev: false
+
  registry.npmmirror.com/vfonts/0.0.3:
    resolution: {integrity: sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vfonts/download/vfonts-0.0.3.tgz}
    name: vfonts
@ -7389,6 +7648,16 @@ packages:
      vue: registry.npmmirror.com/vue/3.2.26
    dev: true

+  registry.npmmirror.com/wangeditor/4.7.11:
+    resolution: {integrity: sha512-z6xEHTSj4YgqvQkHWh9/V/Md7hjEKchXquwvtxvWhwlMS/wBFprCg7qgE4omzuSBeivkZZGTJP08pmdHzOwCUQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/wangeditor/download/wangeditor-4.7.11.tgz}
+    name: wangeditor
+    version: 4.7.11
+    dependencies:
+      '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.16.7
+      '@babel/runtime-corejs3': registry.npmmirror.com/@babel/runtime-corejs3/7.16.8
+      tslib: registry.npmmirror.com/tslib/2.3.1
+    dev: false
+
  registry.npmmirror.com/windicss/3.4.3:
    resolution: {integrity: sha512-UnugThsvEgy8RsPm4/B5DYMCAqvZzD6yWU7Anh+f07t5RSJ8zvmAylGLbXrHPJEmCKzo2Mf+fOUvISH7IJqM3A==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/windicss/download/windicss-3.4.3.tgz}
    name: windicss
@ -7397,6 +7666,31 @@ packages:
    hasBin: true
    dev: true

+  registry.npmmirror.com/xgplayer-subtitles/1.0.22:
+    resolution: {integrity: sha512-+m1fo+FFynL+2ymO4UQBUSnJAz3WuIthpJFCrKBjd+ukcLRoy3vTcsylXEOo5AZN1xT28fpHmxvZQKEIEYA+6w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/xgplayer-subtitles/download/xgplayer-subtitles-1.0.22.tgz}
+    name: xgplayer-subtitles
+    version: 1.0.22
+    dependencies:
+      eventemitter3: registry.npmmirror.com/eventemitter3/4.0.7
+      generate-source-map: registry.npmmirror.com/generate-source-map/0.0.5
+    dev: false
+
+  registry.npmmirror.com/xgplayer/2.31.4:
+    resolution: {integrity: sha512-apuAucT8RMsC8t0lattoBI9g8o9Pf7ZP7G5Eh5T7CpYAC7WA8zWZiWSunidc3rAs9HZmROhRtd1RhPnIyXGJjg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/xgplayer/download/xgplayer-2.31.4.tgz}
+    name: xgplayer
+    version: 2.31.4
+    hasBin: true
+    dependencies:
+      chalk: registry.npmmirror.com/chalk/2.4.2
+      commander: registry.npmmirror.com/commander/2.20.3
+      danmu.js: registry.npmmirror.com/danmu.js/0.5.10
+      downloadjs: registry.npmmirror.com/downloadjs/1.4.7
+      draggabilly: registry.npmmirror.com/draggabilly/2.4.1
+      event-emitter: registry.nlark.com/event-emitter/0.3.5
+      fs-extra: registry.nlark.com/fs-extra/5.0.0
+      xgplayer-subtitles: registry.npmmirror.com/xgplayer-subtitles/1.0.22
+    dev: false
+
  registry.npmmirror.com/yaml/1.10.2:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/yaml/download/yaml-1.10.2.tgz}
    name: yaml
--- a/src/components/custom/GithubLink/index.vue
+++ b/src/components/custom/GithubLink/index.vue
@ -0,0 +1,15 @@
+<template>
+  <web-site-link label="github地址：" :link="link" />
+</template>
+
+<script setup lang="ts">
+import WebSiteLink from '../WebSiteLink/index.vue';
+
+interface Props {
+  /** github链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>
--- a/src/components/custom/IconSelect/index.vue
+++ b/src/components/custom/IconSelect/index.vue
@ -0,0 +1,77 @@
+<template>
+  <n-popover placement="bottom-end" trigger="click">
+    <template #trigger>
+      <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
+        <template #suffix>
+          <Icon :icon="modelValue ? modelValue : emptyIcon" class="text-30px p-5px" />
+        </template>
+      </n-input>
+    </template>
+    <template #header>
+      <n-input v-model:value="searchValue" placeholder="搜索图标"></n-input>
+    </template>
+    <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto">
+      <template v-for="iconItem in iconsList" :key="iconItem">
+        <Icon
+          :icon="iconItem"
+          class="border-1px border-[#d9d9d9] text-30px m-2px p-5px"
+          :style="{ 'border-color': modelValue === iconItem ? theme.themeColor : '' }"
+          @click="handleChange(iconItem)"
+        />
+      </template>
+    </div>
+    <n-empty v-else class="w-306px" description="你什么也找不到" />
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { NPopover, NInput, NEmpty } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { useThemeStore } from '@/store';
+
+interface Props {
+  /** 选中的图标 */
+  value: string;
+  /** 图标列表 */
+  icons: string[];
+  /** 未选中图标 */
+  emptyIcon?: string;
+}
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyIcon: 'mdi:apps'
+});
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+
+const searchValue = ref('');
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
+
+const modelValue = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+function handleChange(iconItem: string) {
+  modelValue.value = iconItem;
+}
+</script>
+<style lang="scss" scoped>
+:deep(.n-input-wrapper) {
+  padding-right: 0;
+}
+:deep(.n-input__suffix) {
+  border: 1px solid #d9d9d9;
+}
+</style>
--- a/src/components/custom/WebSiteLink/index.vue
+++ b/src/components/custom/WebSiteLink/index.vue
@ -0,0 +1,20 @@
+<template>
+  <p>
+    <span>{{ label }}</span>
+    <a class="text-blue-500" :href="link" target="_blank">
+      {{ link }}
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  /** 网址名称 */
+  label: string;
+  /** 网址链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>
--- a/src/components/custom/index.ts
+++ b/src/components/custom/index.ts
@ -3,5 +3,8 @@ import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
 import CountTo from './CountTo/index.vue';
 import ImageVerify from './ImageVerify/index.vue';
+import WebSiteLink from './WebSiteLink/index.vue';
+import GithubLink from './GithubLink/index.vue';
+import IconSelect from './IconSelect/index.vue';

-export { BetterScroll, ButtonTab, ChromeTab, CountTo, ImageVerify };
+export { BetterScroll, ButtonTab, ChromeTab, CountTo, ImageVerify, WebSiteLink, GithubLink, IconSelect };
--- a/src/config/common/index.ts
+++ b/src/config/common/index.ts
@ -1,2 +1,3 @@
 export * from './service';
 export * from './regexp';
+export * from './map-sdk';
--- a/src/config/common/map-sdk.ts
+++ b/src/config/common/map-sdk.ts
@ -0,0 +1,9 @@
+/** 百度地图sdk地址 */
+export const BAIDU_MAP_SDK_URL =
+  'https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1';
+
+/** 高德地图sdk地址 */
+export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d';
+
+/** 腾讯地图sdk地址 */
+export const TENCENT_MAP_SDK_URL = 'https://map.qq.com/api/gljs?v=1.exp&key=A6DBZ-KXPLW-JKSRY-ONZF4-CPHY3-K6BL7';
--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@ -1,4 +1,7 @@
 import 'virtual:windi.css';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import '../styles/css/global.css';

 /** 引入静态资源(全局引入css、字体等) */
--- a/src/typings/common/map.d.ts
+++ b/src/typings/common/map.d.ts
@ -0,0 +1,9 @@
+/// <reference types="@amap/amap-jsapi-types" />
+/// <reference types="bmapgl" />
+
+declare namespace BMap {
+  class Map extends BMapGL.Map {}
+  class Point extends BMapGL.Point {}
+}
+
+declare const TMap: any;
--- a/src/typings/common/route.d.ts
+++ b/src/typings/common/route.d.ts
@ -26,6 +26,16 @@ declare namespace AuthRoute {
    | 'component_button'
    | 'component_card'
    | 'component_table'
+    | 'plugin'
+    | 'plugin_map'
+    | 'plugin_video'
+    | 'plugin_editor'
+    | 'plugin_editor_quill'
+    | 'plugin_editor_markdown'
+    | 'plugin_copy'
+    | 'plugin_icon'
+    | 'plugin_print'
+    | 'plugin_swiper'
    | 'exception'
    | 'exception_403'
    | 'exception_404'
--- a/src/utils/router/component.ts
+++ b/src/utils/router/component.ts
@ -15,6 +15,14 @@ import {
  ComponentButton,
  ComponentCard,
  ComponentTable,
+  PluginMap,
+  PluginVideo,
+  PluginEditorQuill,
+  PluginEditorMarkdown,
+  PluginSwiper,
+  PluginCopy,
+  PluginIcon,
+  PluginPrint,
  MultiMenuFirstSecond,
  MultiMenuFirstSecondNewThird,
  About
@ -43,6 +51,8 @@ type ViewComponentKey = Exclude<
  | 'document'
  | 'document_project'
  | 'component'
+  | 'plugin'
+  | 'plugin_editor'
  | 'multi-menu'
  | 'multi-menu_first'
  | 'multi-menu_first_second-new'
@ -70,6 +80,14 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
    'component_button',
    'component_card',
    'component_table',
+    'plugin_map',
+    'plugin_video',
+    'plugin_editor_quill',
+    'plugin_editor_markdown',
+    'plugin_copy',
+    'plugin_icon',
+    'plugin_print',
+    'plugin_swiper',
    'exception_403',
    'exception_404',
    'exception_500',
@ -95,6 +113,14 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
    component_button: ComponentButton,
    component_card: ComponentCard,
    component_table: ComponentTable,
+    plugin_map: PluginMap,
+    plugin_video: PluginVideo,
+    plugin_editor_quill: PluginEditorQuill,
+    plugin_editor_markdown: PluginEditorMarkdown,
+    plugin_copy: PluginCopy,
+    plugin_icon: PluginIcon,
+    plugin_print: PluginPrint,
+    plugin_swiper: PluginSwiper,
    exception_403: NoPermission,
    exception_404: NotFound,
    exception_500: ServiceError,
--- a/src/views/index.ts
+++ b/src/views/index.ts
@ -2,5 +2,6 @@ export * from './system';
 export * from './dashboard';
 export * from './document';
 export * from './component';
-export * from './about';
+export * from './plugin';
 export * from './multi-menu';
+export * from './about';
--- a/src/views/plugin/copy/index.vue
+++ b/src/views/plugin/copy/index.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="h-full">
+    <n-card title="文本复制" class="h-full shadow-sm rounded-16px">
+      <n-input-group>
+        <n-input v-model:value="source" placeholder="请输入要复制的内容吧" />
+        <n-button type="primary" @click="handleCopy">复制</n-button>
+      </n-input-group>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { NCard, NInputGroup, NInput, NButton, useMessage } from 'naive-ui';
+import { useClipboard } from '@vueuse/core';
+
+const source = ref('');
+const message = useMessage();
+const { copy, isSupported } = useClipboard();
+
+function handleCopy() {
+  if (!isSupported) {
+    message.error('您的浏览器不支持Clipboard API');
+    return;
+  }
+  if (!source.value) {
+    message.error('请输入要复制的内容');
+    return;
+  }
+  copy(source.value);
+  message.success(`复制成功：${source.value}`);
+}
+</script>
+<style scoped></style>
--- a/src/views/plugin/editor/markdown/index.vue
+++ b/src/views/plugin/editor/markdown/index.vue
@ -0,0 +1,50 @@
+<template>
+  <div class="h-full">
+    <n-card title="markdown插件" class="shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+      <template #footer>
+        <github-link link="https://github.com/Vanessa219/vditor" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { NCard } from 'naive-ui';
+import Vditor from 'vditor';
+import 'vditor/src/assets/scss/index.scss';
+import { GithubLink } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+
+const vditor = ref<Vditor>();
+const domRef = ref<HTMLElement>();
+
+function renderVditor() {
+  vditor.value = new Vditor(domRef.value!, {
+    minHeight: 400,
+    theme: theme.darkMode ? 'dark' : 'classic',
+    icon: 'material',
+    cache: { enable: false }
+  });
+}
+
+const stopHandle = watch(
+  () => theme.darkMode,
+  newValue => {
+    const themeMode = newValue ? 'dark' : 'classic';
+    vditor.value?.setTheme(themeMode);
+  }
+);
+
+onMounted(() => {
+  renderVditor();
+});
+
+onUnmounted(() => {
+  stopHandle();
+});
+</script>
+<style scoped></style>
--- a/src/views/plugin/editor/quill/index.vue
+++ b/src/views/plugin/editor/quill/index.vue
@ -0,0 +1,44 @@
+<template>
+  <div class="h-full">
+    <n-card title="富文本插件" class="shadow-sm rounded-16px">
+      <div ref="domRef" class="bg-white dark:bg-dark"></div>
+      <template #footer>
+        <github-link link="https://github.com/wangeditor-team/wangEditor" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { NCard } from 'naive-ui';
+import WangEditor from 'wangeditor';
+import { GithubLink } from '@/components';
+
+const editor = ref<WangEditor>();
+const domRef = ref<HTMLElement>();
+
+function renderWangEditor() {
+  editor.value = new WangEditor(domRef.value);
+  setEditorConfig();
+  editor.value.create();
+}
+
+function setEditorConfig() {
+  editor.value!.config.zIndex = 10;
+}
+
+onMounted(() => {
+  renderWangEditor();
+});
+</script>
+<style scoped>
+:deep(.w-e-toolbar) {
+  background: inherit !important;
+  border-color: #999 !important;
+}
+:deep(.w-e-text-container) {
+  background: inherit;
+  border-color: #999 !important;
+}
+</style>
--- a/src/views/plugin/icon/icons.ts
+++ b/src/views/plugin/icon/icons.ts
@ -0,0 +1,32 @@
+export const icons = [
+  'mdi:emoticon',
+  'mdi:ab-testing',
+  'ph:alarm',
+  'ph:android-logo',
+  'ph:align-bottom',
+  'ph:archive-box-light',
+  'uil:basketball',
+  'uil:brightness-plus',
+  'uil:capture',
+  'mdi:apps-box',
+  'mdi:alert',
+  'mdi:airballoon',
+  'mdi:airplane-edit',
+  'mdi:alpha-f-box-outline',
+  'mdi:arm-flex-outline',
+  'ic:baseline-10mp',
+  'ic:baseline-access-time',
+  'ic:baseline-brightness-4',
+  'ic:baseline-brightness-5',
+  'ic:baseline-credit-card',
+  'ic:baseline-filter-1',
+  'ic:baseline-filter-2',
+  'ic:baseline-filter-3',
+  'ic:baseline-filter-4',
+  'ic:baseline-filter-5',
+  'ic:baseline-filter-6',
+  'ic:baseline-filter-7',
+  'ic:baseline-filter-8',
+  'ic:baseline-filter-9',
+  'ic:baseline-filter-9-plus'
+];
--- a/src/views/plugin/icon/index.vue
+++ b/src/views/plugin/icon/index.vue
@ -0,0 +1,31 @@
+<template>
+  <div class="h-full">
+    <n-card title="Icon组件示例" class="shadow-sm rounded-16px">
+      <div class="grid grid-cols-10">
+        <template v-for="item in icons" :key="item">
+          <div class="mt-5px flex-x-center">
+            <Icon :icon="item" class="text-30px" />
+          </div>
+        </template>
+      </div>
+      <div class="mt-50px">
+        <h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
+        <icon-select v-model:value="selectVal" :icons="icons" />
+      </div>
+      <template #footer>
+        <web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { NCard } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { IconSelect, WebSiteLink } from '@/components';
+import { icons } from './icons';
+
+const selectVal = ref('');
+</script>
+<style scoped></style>
--- a/src/views/plugin/index.ts
+++ b/src/views/plugin/index.ts
@ -0,0 +1,19 @@
+const PluginMap = () => import('./map/index.vue');
+const PluginVideo = () => import('./video/index.vue');
+const PluginEditorQuill = () => import('./editor/quill/index.vue');
+const PluginEditorMarkdown = () => import('./editor/markdown/index.vue');
+const PluginSwiper = () => import('./swiper/index.vue');
+const PluginCopy = () => import('./copy/index.vue');
+const PluginIcon = () => import('./icon/index.vue');
+const PluginPrint = () => import('./print/index.vue');
+
+export {
+  PluginMap,
+  PluginVideo,
+  PluginEditorQuill,
+  PluginEditorMarkdown,
+  PluginSwiper,
+  PluginCopy,
+  PluginIcon,
+  PluginPrint
+};
--- a/src/views/plugin/map/components/BaiduMap.vue
+++ b/src/views/plugin/map/components/BaiduMap.vue
@ -0,0 +1,26 @@
+<template>
+  <div ref="domRef" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useScriptTag } from '@vueuse/core';
+import { BAIDU_MAP_SDK_URL } from '@/config';
+
+const { load } = useScriptTag(BAIDU_MAP_SDK_URL);
+
+const domRef = ref<HTMLDivElement>();
+
+async function renderBaiduMap() {
+  await load(true);
+  const map = new BMap.Map(domRef.value!);
+  const point = new BMap.Point(114.05834626586915, 22.546789983033168);
+  map.centerAndZoom(point, 15);
+  map.enableScrollWheelZoom();
+}
+
+onMounted(() => {
+  renderBaiduMap();
+});
+</script>
+<style scoped></style>
--- a/src/views/plugin/map/components/GaodeMap.vue
+++ b/src/views/plugin/map/components/GaodeMap.vue
@ -0,0 +1,29 @@
+<template>
+  <div ref="domRef" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useScriptTag } from '@vueuse/core';
+import { GAODE_MAP_SDK_URL } from '@/config';
+
+const { load } = useScriptTag(GAODE_MAP_SDK_URL);
+
+const domRef = ref<HTMLDivElement>();
+
+async function renderBaiduMap() {
+  await load(true);
+  const map = new AMap.Map(domRef.value!, {
+    zoom: 11,
+    center: [114.05834626586915, 22.546789983033168],
+    viewMode: '3D'
+  });
+
+  return map;
+}
+
+onMounted(() => {
+  renderBaiduMap();
+});
+</script>
+<style scoped></style>
--- a/src/views/plugin/map/components/TencentMap.vue
+++ b/src/views/plugin/map/components/TencentMap.vue
@ -0,0 +1,29 @@
+<template>
+  <div ref="domRef"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useScriptTag } from '@vueuse/core';
+import { TENCENT_MAP_SDK_URL } from '@/config';
+
+const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
+
+const domRef = ref<HTMLDivElement | null>(null);
+
+async function renderBaiduMap() {
+  await load(true);
+  const map = new TMap.Map(domRef.value!, {
+    center: new TMap.LatLng(39.98412, 116.307484),
+    zoom: 11,
+    viewMode: '3D'
+  });
+
+  return map;
+}
+
+onMounted(() => {
+  renderBaiduMap();
+});
+</script>
+<style scoped></style>
--- a/src/views/plugin/map/components/index.ts
+++ b/src/views/plugin/map/components/index.ts
@ -0,0 +1,5 @@
+import BaiduMap from './BaiduMap.vue';
+import GaodeMap from './GaodeMap.vue';
+import TencentMap from './TencentMap.vue';
+
+export { BaiduMap, GaodeMap, TencentMap };
--- a/src/views/plugin/map/index.vue
+++ b/src/views/plugin/map/index.vue
@ -0,0 +1,29 @@
+<template>
+  <div class="h-full">
+    <n-card title="地图插件" class="h-full shadow-sm rounded-16px" content-style="overflow:hidden">
+      <n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
+        <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
+          <component :is="item.component" />
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { NCard, NTabs, NTabPane } from 'naive-ui';
+import { GaodeMap, TencentMap } from './components';
+
+interface Map {
+  id: string;
+  label: string;
+  component: Component;
+}
+
+const maps: Map[] = [
+  { id: 'gaode', label: '高德地图', component: GaodeMap },
+  { id: 'tencent', label: '腾讯地图', component: TencentMap }
+];
+</script>
+<style scoped></style>
--- a/src/views/plugin/print/index.vue
+++ b/src/views/plugin/print/index.vue
@ -0,0 +1,40 @@
+<template>
+  <div class="h-full">
+    <n-card title="打印" class="shadow-sm rounded-16px">
+      <n-button type="primary" class="mr-10px" @click="printTable">打印表格</n-button>
+      <n-button type="primary" @click="printImage">打印图片</n-button>
+      <template #footer>
+        <github-link label="printJS：" link="https://github.com/crabbly/Print.js" class="mt-10px" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NCard, NButton } from 'naive-ui';
+import printJS from 'print-js';
+import { GithubLink } from '@/components';
+
+function printTable() {
+  printJS({
+    printable: [
+      { name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' },
+      { name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' }
+    ],
+    properties: ['name', 'wechat', 'remark'],
+    type: 'json'
+  });
+}
+function printImage() {
+  printJS({
+    printable: [
+      'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG',
+      'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG'
+    ],
+    type: 'image',
+    header: 'Multiple Images',
+    imageStyle: 'width:100%;'
+  });
+}
+</script>
+<style scoped></style>
--- a/src/views/plugin/swiper/index.vue
+++ b/src/views/plugin/swiper/index.vue
@ -0,0 +1,118 @@
+<template>
+  <div>
+    <n-card title="Swiper插件" class="shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <github-link link="https://github.com/nolimits4web/swiper" />
+        <web-site-link label="vue3版文档地址：" link="https://swiperjs.com/vue" />
+        <web-site-link label="插件demo地址：" link="https://swiperjs.com/demos" />
+      </n-space>
+      <n-space :vertical="true">
+        <div v-for="item in swiperExample" :key="item.id">
+          <h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
+          <swiper v-bind="item.options">
+            <swiper-slide v-for="i in 5" :key="i">
+              <div class="flex-center h-240px border-1px border-[#999] text-18px font-bold">Slide{{ i }}</div>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NSpace } from 'naive-ui';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import type { SwiperOptions } from 'swiper';
+import { WebSiteLink, GithubLink } from '@/components';
+
+type SwiperExampleOptions = Pick<
+  SwiperOptions,
+  | 'navigation'
+  | 'pagination'
+  | 'scrollbar'
+  | 'slidesPerView'
+  | 'slidesPerGroup'
+  | 'spaceBetween'
+  | 'direction'
+  | 'loop'
+  | 'loopFillGroupWithBlank'
+>;
+
+interface SwiperExample {
+  id: number;
+  label: string;
+  options: Partial<SwiperExampleOptions>;
+}
+
+SwiperCore.use([Navigation, Pagination]);
+
+const swiperExample: SwiperExample[] = [
+  { id: 0, label: 'Default', options: {} },
+  {
+    id: 1,
+    label: 'Navigation',
+    options: {
+      navigation: true
+    }
+  },
+  {
+    id: 2,
+    label: 'Pagination',
+    options: {
+      pagination: true
+    }
+  },
+  {
+    id: 3,
+    label: 'Pagination dynamic',
+    options: {
+      pagination: { dynamicBullets: true }
+    }
+  },
+  {
+    id: 4,
+    label: 'Pagination progress',
+    options: {
+      navigation: true,
+      pagination: {
+        type: 'progressbar'
+      }
+    }
+  },
+  {
+    id: 5,
+    label: 'Pagination fraction',
+    options: {
+      navigation: true,
+      pagination: {
+        type: 'fraction'
+      }
+    }
+  },
+  {
+    id: 6,
+    label: 'Slides per view',
+    options: {
+      pagination: {
+        clickable: true
+      },
+      slidesPerView: 3,
+      spaceBetween: 30
+    }
+  },
+  {
+    id: 7,
+    label: 'Infinite loop',
+    options: {
+      navigation: true,
+      pagination: {
+        clickable: true
+      },
+      loop: true
+    }
+  }
+];
+</script>
+<style scoped></style>
--- a/src/views/plugin/video/index.vue
+++ b/src/views/plugin/video/index.vue
@ -0,0 +1,37 @@
+<template>
+  <div class="h-full">
+    <n-card title="视频播放器插件" class="h-full shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { NCard } from 'naive-ui';
+import Player from 'xgplayer';
+
+const domRef = ref<HTMLElement>();
+const player = ref<Player>();
+
+function renderXgPlayer() {
+  const url = 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4';
+  player.value = new Player({
+    el: domRef.value!,
+    url,
+    playbackRate: [0.5, 0.75, 1, 1.5, 2]
+  });
+}
+function destroyXgPlayer() {
+  player.value?.destroy();
+}
+
+onMounted(() => {
+  renderXgPlayer();
+});
+
+onUnmounted(() => {
+  destroyXgPlayer();
+});
+</script>
+<style scoped></style>