feat: add iconSelect component

mock/asyncRoutes.ts

@@ -112,7 +112,7 @@ const tabsRouter = {
     icon: "IF-team-icontabs",
     title: "menus.hstabs",
     i18n: true,
-    rank: 11
+    rank: 12
   },
   children: [
     {

package.json

@@ -30,17 +30,17 @@
     "@ctrl/tinycolor": "^3.4.0",
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
-    "@vueuse/core": "^7.6.2",
+    "@vueuse/core": "^7.7.0",
     "@vueuse/motion": "^2.0.0-beta.9",
-    "@vueuse/shared": "^7.6.2",
+    "@vueuse/shared": "^7.7.0",
     "animate.css": "^4.1.1",
-    "axios": "^0.25.0",
+    "axios": "^0.26.0",
-    "cropperjs": "^1.5.11",
+    "cropperjs": "^1.5.12",
     "css-color-function": "^1.3.3",
     "dayjs": "^1.10.7",
     "driver.js": "^0.9.8",
     "echarts": "^5.3.0",
-    "element-plus": "^2.0.3",
+    "element-plus": "^2.0.4",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",
@@ -61,10 +61,10 @@
     "vue-router": "^4.0.13",
     "vue-types": "^4.1.1",
     "vuedraggable": "4.1.0",
-    "vxe-table": "^4.1.21",
+    "vxe-table": "^4.2.0",
-    "wangeditor": "^4.7.9",
+    "wangeditor": "^4.7.12",
-    "xe-utils": "^3.5.2",
+    "xe-utils": "^3.5.4",
-    "xgplayer": "2.28.0"
+    "xgplayer": "^2.31.4"
   },
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
@@ -106,8 +106,8 @@
     "pretty-quick": "3.1.1",
     "rimraf": "3.0.2",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.49.7",
+    "sass": "^1.49.9",
-    "sass-loader": "^12.4.0",
+    "sass-loader": "^12.6.0",
     "stylelint": "^14.3.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
@@ -115,7 +115,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.5.5",
-    "unplugin-element-plus": "^0.2.0",
+    "unplugin-element-plus": "^0.3.1",
     "vite": "^2.8.6",
     "vite-plugin-live-reload": "^2.1.0",
     "vite-plugin-mock": "^2.9.6",

pnpm-lock.yaml

@@ -26,20 +26,20 @@ specifiers:
   "@vitejs/plugin-vue-jsx": ^1.3.8
   "@vue/eslint-config-prettier": ^7.0.0
   "@vue/eslint-config-typescript": ^10.0.0
-  "@vueuse/core": ^7.6.2
+  "@vueuse/core": ^7.7.0
   "@vueuse/motion": ^2.0.0-beta.9
-  "@vueuse/shared": ^7.6.2
+  "@vueuse/shared": ^7.7.0
   "@zougt/vite-plugin-theme-preprocessor": ^1.4.4
   animate.css: ^4.1.1
   autoprefixer: ^10.4.2
-  axios: ^0.25.0
+  axios: ^0.26.0
-  cropperjs: ^1.5.11
+  cropperjs: ^1.5.12
   cross-env: 7.0.3
   css-color-function: ^1.3.3
   dayjs: ^1.10.7
   driver.js: ^0.9.8
   echarts: ^5.3.0
-  element-plus: ^2.0.3
+  element-plus: ^2.0.4
   element-resize-detector: ^1.2.3
   eslint: ^8.8.0
   eslint-plugin-prettier: ^4.0.0
@@ -68,8 +68,8 @@ specifiers:
   rgb-hex: ^4.0.0
   rimraf: 3.0.2
   rollup-plugin-visualizer: ^5.6.0
-  sass: ^1.49.7
+  sass: ^1.49.9
-  sass-loader: ^12.4.0
+  sass-loader: ^12.6.0
   stylelint: ^14.3.0
   stylelint-config-html: ^1.0.0
   stylelint-config-prettier: ^9.0.3
@@ -77,7 +77,7 @@ specifiers:
   stylelint-config-standard: ^24.0.0
   stylelint-order: ^5.0.0
   typescript: ^4.5.5
-  unplugin-element-plus: ^0.2.0
+  unplugin-element-plus: ^0.3.1
   v-contextmenu: 3.0.0
   vite: ^2.8.6
   vite-plugin-live-reload: ^2.1.0
@@ -93,28 +93,28 @@ specifiers:
   vue-router: ^4.0.13
   vue-types: ^4.1.1
   vuedraggable: 4.1.0
-  vxe-table: ^4.1.21
+  vxe-table: ^4.2.0
-  wangeditor: ^4.7.9
+  wangeditor: ^4.7.12
   windicss: ^3.5.1
-  xe-utils: ^3.5.2
+  xe-utils: ^3.5.4
-  xgplayer: 2.28.0
+  xgplayer: ^2.31.4
 
 dependencies:
   "@amap/amap-jsapi-loader": 1.0.1
   "@ctrl/tinycolor": 3.4.0
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
-  "@vueuse/core": 7.6.2_vue@3.2.31
+  "@vueuse/core": 7.7.0_vue@3.2.31
   "@vueuse/motion": 2.0.0-beta.9_vue@3.2.31
-  "@vueuse/shared": 7.6.2_vue@3.2.31
+  "@vueuse/shared": 7.7.0_vue@3.2.31
   animate.css: 4.1.1
-  axios: 0.25.0
+  axios: 0.26.0
   cropperjs: 1.5.12
   css-color-function: 1.3.3
   dayjs: 1.10.7
   driver.js: 0.9.8
   echarts: 5.3.0
-  element-plus: 2.0.3_1a412d14def5ff5ca1122000e4bee666
+  element-plus: 2.0.4_1a412d14def5ff5ca1122000e4bee666
   element-resize-detector: 1.2.4
   js-cookie: 3.0.1
   lodash-es: 4.17.21
@@ -135,10 +135,10 @@ dependencies:
   vue-router: 4.0.13_vue@3.2.31
   vue-types: 4.1.1_vue@3.2.31
   vuedraggable: 4.1.0_vue@3.2.31
-  vxe-table: 4.1.21_vue@3.2.31+xe-utils@3.5.4
+  vxe-table: 4.2.0_vue@3.2.31+xe-utils@3.5.4
-  wangeditor: 4.7.11
+  wangeditor: 4.7.12
   xe-utils: 3.5.4
-  xgplayer: 2.28.0
+  xgplayer: 2.31.4
 
 devDependencies:
   "@commitlint/cli": 13.1.0
@@ -162,7 +162,7 @@ devDependencies:
   "@vitejs/plugin-vue-jsx": 1.3.8
   "@vue/eslint-config-prettier": 7.0.0_eslint@8.9.0+prettier@2.5.1
   "@vue/eslint-config-typescript": 10.0.0_cd100ca74b8c3cfb64acbb3ff997764b
-  "@zougt/vite-plugin-theme-preprocessor": 1.4.4_sass@1.49.7
+  "@zougt/vite-plugin-theme-preprocessor": 1.4.4_sass@1.49.9
   autoprefixer: 10.4.2_postcss@8.4.6
   cross-env: 7.0.3
   eslint: 8.9.0
@@ -180,8 +180,8 @@ devDependencies:
   pretty-quick: 3.1.1_prettier@2.5.1
   rimraf: 3.0.2
   rollup-plugin-visualizer: 5.6.0
-  sass: 1.49.7
+  sass: 1.49.9
-  sass-loader: 12.4.0_sass@1.49.7
+  sass-loader: 12.6.0_sass@1.49.9
   stylelint: 14.5.0
   stylelint-config-html: 1.0.0_2fdfe057bbf58b3dfbbb46d8950182ee
   stylelint-config-prettier: 9.0.3_stylelint@14.5.0
@@ -189,8 +189,8 @@ devDependencies:
   stylelint-config-standard: 24.0.0_stylelint@14.5.0
   stylelint-order: 5.0.0_stylelint@14.5.0
   typescript: 4.5.5
-  unplugin-element-plus: 0.2.0_vite@2.8.6+vue@3.2.31
+  unplugin-element-plus: 0.3.1_vite@2.8.6+vue@3.2.31
-  vite: 2.8.6_sass@1.49.7
+  vite: 2.8.6_sass@1.49.9
   vite-plugin-live-reload: 2.1.0
   vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.8.6
   vite-plugin-remove-console: 0.0.6
@@ -584,7 +584,7 @@ packages:
       }
     engines: { node: ">=6.9.0" }
     dependencies:
-      core-js-pure: 3.21.0
+      core-js-pure: 3.21.1
       regenerator-runtime: 0.13.9
     dev: false
 
@@ -847,10 +847,10 @@ packages:
     engines: { node: ">=10" }
     dev: false
 
-  /@element-plus/icons-vue/0.2.7_vue@3.2.31:
+  /@element-plus/icons-vue/1.0.0_vue@3.2.31:
     resolution:
       {
-        integrity: sha512-S8kDbfVaWkQvbUYQE1ui448tzaHfUvyESCep9J6uPRlViyQPXjdIfwLBhV6AmQSOfFS8rL+xehJGhvzPXLrSBg==
+        integrity: sha512-v8W6uiOfwq9GRWBLc0fvp0WwExU09BLdYfldRBxWUCJHeJ9WHeFrtt6BdixGVl9SCZ2V5soB8gi4tr365a9p/Q==
       }
     peerDependencies:
       vue: ^3.2.0
@@ -1447,7 +1447,7 @@ packages:
       magic-string: 0.25.7
       regenerator-runtime: 0.13.9
       systemjs: 6.12.1
-      vite: 2.8.6_sass@1.49.7
+      vite: 2.8.6_sass@1.49.9
     dev: true
 
   /@vitejs/plugin-vue-jsx/1.3.8:
@@ -1477,7 +1477,7 @@ packages:
       vite: ^2.5.10
       vue: ^3.2.25
     dependencies:
-      vite: 2.8.6_sass@1.49.7
+      vite: 2.8.6_sass@1.49.9
       vue: 3.2.31
     dev: true
 
@@ -1657,10 +1657,10 @@ packages:
         integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
       }
 
-  /@vueuse/core/7.6.2_vue@3.2.31:
+  /@vueuse/core/7.7.0_vue@3.2.31:
     resolution:
       {
-        integrity: sha512-bjAbXJVJO6aElMaZtDz2B70C0L6jFk/jGVqJxWZS5huffxA6dW5DN6tQQJwzOnx9B9rDhePHJIFKsix0qZIH2Q==
+        integrity: sha512-DS8+dg758CiWnswebYHjS05PqTtc1ZLomsDlkFjG/KC0iFRgFIsGC66AAGuSXLqWCoirp2xN6N2mkrp1aHdI7A==
       }
     peerDependencies:
       "@vue/composition-api": ^1.1.0
@@ -1671,7 +1671,7 @@ packages:
       vue:
         optional: true
     dependencies:
-      "@vueuse/shared": 7.6.2_vue@3.2.31
+      "@vueuse/shared": 7.7.0_vue@3.2.31
       vue: 3.2.31
       vue-demi: 0.12.1_vue@3.2.31
     dev: false
@@ -1688,16 +1688,16 @@ packages:
       "@vue/composition-api":
         optional: true
     dependencies:
-      "@vueuse/core": 7.6.2_vue@3.2.31
+      "@vueuse/core": 7.7.0_vue@3.2.31
       popmotion: 11.0.3
       vue: 3.2.31
       vue-demi: 0.12.1_vue@3.2.31
     dev: false
 
-  /@vueuse/shared/7.6.2_vue@3.2.31:
+  /@vueuse/shared/7.7.0_vue@3.2.31:
     resolution:
       {
-        integrity: sha512-ThDld4Mx501tahRuHV6qJGkwCr17GknZrOzlD02Na9qJcH7Pq0quNTLx5cNDou7b1CKNvE3BXi2w/hz9KuPNTQ==
+        integrity: sha512-ANzMcUnjuUPJ9nWqMAqYt8p0qon6AH5pP5/V/0RSWkwCIWZwi57ujIaxizzMwnJECUF/73BmsRmpvvtokCIrKw==
       }
     peerDependencies:
       "@vue/composition-api": ^1.1.0
@@ -1742,7 +1742,7 @@ packages:
       - supports-color
     dev: true
 
-  /@zougt/some-loader-utils/1.4.2_sass@1.49.7:
+  /@zougt/some-loader-utils/1.4.2_sass@1.49.9:
     resolution:
       {
         integrity: sha512-RYD7OPoypVGICOO+9P/6fawtp1gi2/sp4Lol5S0cUzrBvrWnPJTYENplDtxutVQtLwXKg9aKS+B2/zGEEebJqA==
@@ -1760,18 +1760,18 @@ packages:
       fs-extra: 10.0.0
       postcss: 8.4.6
       prettier: 2.5.1
-      sass: 1.49.7
+      sass: 1.49.9
       uuid: 8.3.2
     dev: true
 
-  /@zougt/vite-plugin-theme-preprocessor/1.4.4_sass@1.49.7:
+  /@zougt/vite-plugin-theme-preprocessor/1.4.4_sass@1.49.9:
     resolution:
       {
         integrity: sha512-YeykUlFIwyn7PMuVu419qP6x0r58FgRMmicBBa1/olpuC4+ND8/G3g5uZqhyyVE4JwM7rHRLjWN/9oTcZHUruA==
       }
     engines: { node: ">= 12.0.0" }
     dependencies:
-      "@zougt/some-loader-utils": 1.4.2_sass@1.49.7
+      "@zougt/some-loader-utils": 1.4.2_sass@1.49.9
       cac: 6.7.12
       chalk: 5.0.0
       fs-extra: 10.0.0
@@ -1996,13 +1996,13 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /axios/0.25.0:
+  /axios/0.26.0:
     resolution:
       {
-        integrity: sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==
+        integrity: sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
       }
     dependencies:
-      follow-redirects: 1.14.8
+      follow-redirects: 1.14.9
     transitivePeerDependencies:
       - debug
     dev: false
@@ -2504,10 +2504,10 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
-  /core-js-pure/3.21.0:
+  /core-js-pure/3.21.1:
     resolution:
       {
-        integrity: sha512-VaJUunCZLnxuDbo1rNOzwbet9E1K9joiXS5+DQMPtgxd24wfsZbJZMMfQLGYMlCUvSxLfsRUUhoOR2x28mFfeg==
+        integrity: sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
       }
     requiresBuild: true
     dev: false
@@ -2986,18 +2986,18 @@ packages:
       }
     dev: true
 
-  /element-plus/2.0.3_1a412d14def5ff5ca1122000e4bee666:
+  /element-plus/2.0.4_1a412d14def5ff5ca1122000e4bee666:
     resolution:
       {
-        integrity: sha512-k+b4V4sGmgOpOYjrAWyp0k+N1mVaIZQ9LpbXWvmJNzE+j21DYOe9m1zGn5mFDPgeLOZcUS7QzzwYAommhwFj0g==
+        integrity: sha512-g/YT/uY6zbNTAl9jL4zT8WRSf/4KG6GB3Y89MCO/lbglHsps5sdDFohcuOb8699BtIXkXsbOzdwmbk9kDHqHxA==
       }
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       "@ctrl/tinycolor": 3.4.0
-      "@element-plus/icons-vue": 0.2.7_vue@3.2.31
+      "@element-plus/icons-vue": 1.0.0_vue@3.2.31
       "@popperjs/core": 2.11.2
-      "@vueuse/core": 7.6.2_vue@3.2.31
+      "@vueuse/core": 7.7.0_vue@3.2.31
       async-validator: 4.0.7
       dayjs: 1.10.7
       lodash: 4.17.21
@@ -3851,10 +3851,10 @@ packages:
       }
     dev: true
 
-  /follow-redirects/1.14.8:
+  /follow-redirects/1.14.9:
     resolution:
       {
-        integrity: sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
+        integrity: sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
       }
     engines: { node: ">=4.0" }
     peerDependencies:
@@ -6287,16 +6287,17 @@ packages:
       }
     dev: true
 
-  /sass-loader/12.4.0_sass@1.49.7:
+  /sass-loader/12.6.0_sass@1.49.9:
     resolution:
       {
-        integrity: sha512-7xN+8khDIzym1oL9XyS6zP6Ges+Bo2B2xbPrjdMHEYyV3AQYhd/wXeru++3ODHF0zMjYmVadblSKrPrjEkL8mg==
+        integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
       }
     engines: { node: ">= 12.13.0" }
     peerDependencies:
       fibers: ">= 3.1.0"
       node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
       sass: ^1.3.0
+      sass-embedded: "*"
       webpack: ^5.0.0
     peerDependenciesMeta:
       fibers:
@@ -6305,16 +6306,18 @@ packages:
         optional: true
       sass:
         optional: true
+      sass-embedded:
+        optional: true
     dependencies:
       klona: 2.0.5
       neo-async: 2.6.2
-      sass: 1.49.7
+      sass: 1.49.9
     dev: true
 
-  /sass/1.49.7:
+  /sass/1.49.9:
     resolution:
       {
-        integrity: sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
+        integrity: sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
       }
     engines: { node: ">=12.0.0" }
     hasBin: true
@@ -7095,18 +7098,19 @@ packages:
     engines: { node: ">= 0.8" }
     dev: true
 
-  /unplugin-element-plus/0.2.0_vite@2.8.6+vue@3.2.31:
+  /unplugin-element-plus/0.3.1_vite@2.8.6+vue@3.2.31:
     resolution:
       {
-        integrity: sha512-eBgNLCZUUCfl68J+pb9MWVh8amBjLWL5yZ8BuNuJfhS6FFGJ/dMtCmAoaeHyI9wE3k+7C4gbfEM78dkX48gfVA==
+        integrity: sha512-DowQB5yvyJ/89q45o9LELGiRFYIGo5AJZqEBsjVJOVHL0x3OY57XB5BTLxUd5Of3wPk646MvADKY3htJvopy9w==
       }
+    engines: { node: ">=14" }
     peerDependencies:
       vue: "3"
     dependencies:
       "@rollup/pluginutils": 4.1.2
       es-module-lexer: 0.9.3
       magic-string: 0.25.7
-      unplugin: 0.3.2_vite@2.8.6
+      unplugin: 0.3.3_vite@2.8.6
       vue: 3.2.31
     transitivePeerDependencies:
       - esbuild
@@ -7115,10 +7119,10 @@ packages:
       - webpack
     dev: true
 
-  /unplugin/0.3.2_vite@2.8.6:
+  /unplugin/0.3.3_vite@2.8.6:
     resolution:
       {
-        integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==
+        integrity: sha512-WjZWpUqqcYPQ/efR00Zm2m1+J1LitwoZ4uhHV4VdZ+IpW0Nh/qnDYtVf+nLhozXdGxslMPecOshVR7NiWFl4gA==
       }
     peerDependencies:
       esbuild: ">=0.13"
@@ -7135,7 +7139,7 @@ packages:
       webpack:
         optional: true
     dependencies:
-      vite: 2.8.6_sass@1.49.7
+      vite: 2.8.6_sass@1.49.9
       webpack-virtual-modules: 0.4.3
     dev: true
 
@@ -7251,7 +7255,7 @@ packages:
       fast-glob: 3.2.11
       mockjs: 1.1.0
       path-to-regexp: 6.2.0
-      vite: 2.8.6_sass@1.49.7
+      vite: 2.8.6_sass@1.49.9
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7278,7 +7282,7 @@ packages:
       es-module-lexer: 0.9.3
       fs-extra: 10.0.0
       magic-string: 0.25.7
-      vite: 2.8.6_sass@1.49.7
+      vite: 2.8.6_sass@1.49.9
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7294,7 +7298,7 @@ packages:
       "@windicss/plugin-utils": 1.8.2
       debug: 4.3.3
       kolorist: 1.5.1
-      vite: 2.8.6_sass@1.49.7
+      vite: 2.8.6_sass@1.49.9
       windicss: 3.5.1
     transitivePeerDependencies:
       - supports-color
@@ -7310,7 +7314,7 @@ packages:
       svgo: 2.8.0
     dev: true
 
-  /vite/2.8.6_sass@1.49.7:
+  /vite/2.8.6_sass@1.49.9:
     resolution:
       {
         integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==
@@ -7333,7 +7337,7 @@ packages:
       postcss: 8.4.6
       resolve: 1.22.0
       rollup: 2.68.0
-      sass: 1.49.7
+      sass: 1.49.9
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -7455,10 +7459,10 @@ packages:
       vue: 3.2.31
     dev: false
 
-  /vxe-table/4.1.21_vue@3.2.31+xe-utils@3.5.4:
+  /vxe-table/4.2.0_vue@3.2.31+xe-utils@3.5.4:
     resolution:
       {
-        integrity: sha512-EtZYDZ0W3LfGygi6MkTeflV3aF1ED6T74VFbmTv2D0X29onsH6CQZEkreQCRG91HDoijrMsIxHmWxUz+QNjA0A==
+        integrity: sha512-ddb4OdTdhjT+E+5gu+NbJuTLJa/BlzUb98O0ZsVwGYUnMWoYqHh68JRkHxFona/Dxv6ir8HBX7kZamfoWhB+NQ==
       }
     peerDependencies:
       vue: ^3.2.2
@@ -7468,10 +7472,10 @@ packages:
       xe-utils: 3.5.4
     dev: false
 
-  /wangeditor/4.7.11:
+  /wangeditor/4.7.12:
     resolution:
       {
-        integrity: sha512-z6xEHTSj4YgqvQkHWh9/V/Md7hjEKchXquwvtxvWhwlMS/wBFprCg7qgE4omzuSBeivkZZGTJP08pmdHzOwCUQ==
+        integrity: sha512-5KOIpQ0+idKvDTkjZOp7RHYXA97FyJ9mjwy+zQUdMUCqZItlEXzvVOYtOlHkJr/HcbwgIz/7f/trGFggZK5X4g==
       }
     dependencies:
       "@babel/runtime": 7.17.2
@@ -7591,10 +7595,10 @@ packages:
       generate-source-map: 0.0.5
     dev: false
 
-  /xgplayer/2.28.0:
+  /xgplayer/2.31.4:
     resolution:
       {
-        integrity: sha512-gT0ipSqP+b6S2bRE+O1QZMGgO1m09rB+1XHSqbCTVCHqWmPc5oSO0WNS7feKGPAQibfKG8NK4ZAleDmGqLjgFQ==
+        integrity: sha512-apuAucT8RMsC8t0lattoBI9g8o9Pf7ZP7G5Eh5T7CpYAC7WA8zWZiWSunidc3rAs9HZmROhRtd1RhPnIyXGJjg==
       }
     hasBin: true
     dependencies:

src/components/ReIcon/index.ts

@@ -1,13 +1,16 @@
 import iconifyIconOffline from "./src/iconifyIconOffline";
 import iconifyIconOnline from "./src/iconifyIconOnline";
 import fontIcon from "./src/iconfont";
+import iconSelect from "./src/select.vue";
 
 export const IconifyIconOffline = iconifyIconOffline;
 export const IconifyIconOnline = iconifyIconOnline;
 export const FontIcon = fontIcon;
+export const IconSelect = iconSelect;
 
 export default {
   IconifyIconOffline,
   IconifyIconOnline,
-  FontIcon
+  FontIcon,
+  IconSelect
 };

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -60,12 +60,16 @@ import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import nodeTree from "@iconify-icons/ri/node-tree";
 import ubuntuFill from "@iconify-icons/ri/ubuntu-fill";
 import questionLine from "@iconify-icons/ri/question-line";
+import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+import informationLine from "@iconify-icons/ri/information-line";
 addIcon("arrow-right-s-line", arrowRightSLine);
 addIcon("arrow-left-s-line", arrowLeftSLine);
 addIcon("logout-circle-r-line", logoutCircleRLine);
 addIcon("node-tree", nodeTree);
 addIcon("ubuntu-fill", ubuntuFill);
 addIcon("question-line", questionLine);
+addIcon("checkbox-circle-line", checkboxCircleLine);
+addIcon("information-line", informationLine);
 
 // Font Awesome 4
 import faUser from "@iconify-icons/fa/user";

src/components/ReIcon/src/select.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { cloneDeep } from "lodash-unified";
+import { ref, computed, CSSProperties } from "vue";
+import { IconJson } from "/@/components/ReIcon/data";
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
+
+let inputValue = ref("ep:add-location");
+let iconList = ref(IconJson);
+let icon = ref("add-location");
+let currentActiveType = ref("ep:");
+// 深拷贝图标数据，前端做搜索
+let copyIconList = cloneDeep(iconList.value);
+
+let pageSize = ref(96);
+let currentPage = ref(1);
+
+// 搜索条件
+let filterValue = ref("");
+
+let tabsList = [
+  {
+    label: "Element Plus",
+    name: "ep:"
+  },
+  {
+    label: "Remix Icon",
+    name: "ri:"
+  },
+  {
+    label: "Font Awesome 4",
+    name: "fa:"
+  },
+  {
+    label: "Font Awesome 5 Solid",
+    name: "fa-solid:"
+  },
+  {
+    label: "Ant Design Icons",
+    name: "ant-design:"
+  },
+  {
+    label: "VSCode Icons",
+    name: "vscode-icons:"
+  }
+];
+
+let pageList = computed(() => {
+  if (currentPage.value === 1) {
+    return copyIconList[currentActiveType.value]
+      .slice(currentPage.value - 1, pageSize.value)
+      .filter(v => v.includes(filterValue.value));
+  } else {
+    return copyIconList[currentActiveType.value]
+      .slice(
+        pageSize.value * (currentPage.value - 1),
+        pageSize.value * (currentPage.value - 1) + pageSize.value
+      )
+      .filter(v => v.includes(filterValue.value));
+  }
+});
+
+const iconItemStyle = computed((): ParameterCSSProperties => {
+  return item => {
+    if (inputValue.value === currentActiveType.value + item) {
+      return {
+        borderColor: "var(--el-color-primary)"
+      };
+    }
+  };
+});
+
+function handleClick({ props }) {
+  currentPage.value = 1;
+  currentActiveType.value = props.name;
+  inputValue.value =
+    currentActiveType.value + iconList.value[currentActiveType.value][0];
+  icon.value = iconList.value[currentActiveType.value][0];
+}
+
+function onChangeIcon(item) {
+  inputValue.value = currentActiveType.value + item;
+  icon.value = item;
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page;
+}
+</script>
+
+<template>
+  <div class="selector w-350px">
+    <el-input v-model="inputValue" disabled>
+      <template #append>
+        <el-popover :width="350" trigger="click" popper-class="pure-popper">
+          <template #reference>
+            <div
+              class="w-40px h-32px cursor-pointer flex justify-center items-center"
+            >
+              <IconifyIconOnline :icon="icon" :type="currentActiveType" />
+            </div>
+          </template>
+
+          <el-input
+            class="p-2"
+            v-model="filterValue"
+            placeholder="搜索图标"
+            clearable
+          />
+          <el-divider border-style="dashed"></el-divider>
+
+          <el-tabs v-model="currentActiveType" @tab-click="handleClick">
+            <el-tab-pane
+              v-for="(pane, index) in tabsList"
+              :key="index"
+              :label="pane.label"
+              :name="pane.name"
+            >
+              <el-divider
+                class="tab-divider"
+                border-style="dashed"
+              ></el-divider>
+              <el-scrollbar height="220px">
+                <ul class="flex flex-wrap px-2 ml-2">
+                  <li
+                    v-for="(item, key) in pageList"
+                    :key="key"
+                    :title="item"
+                    class="icon-item p-2 w-1/10 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
+                    :style="iconItemStyle(item)"
+                    @click="onChangeIcon(item)"
+                  >
+                    <IconifyIconOnline :icon="item" :type="currentActiveType" />
+                  </li>
+                </ul>
+              </el-scrollbar>
+            </el-tab-pane>
+          </el-tabs>
+          <el-divider border-style="dashed"></el-divider>
+
+          <el-pagination
+            small
+            :total="copyIconList[currentActiveType].length"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            background
+            layout="prev, pager, next"
+            class="flex items-center justify-center h-10"
+            @current-change="onCurrentChange"
+          >
+          </el-pagination>
+        </el-popover>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  margin: 1px auto !important;
+}
+
+.tab-divider.el-divider--horizontal {
+  margin: 0 !important;
+}
+
+.icon-item {
+  &:hover {
+    border-color: var(--el-color-primary);
+  }
+}
+
+:deep(.el-tabs__nav-next) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: -5px 0 5px -6px #ccc;
+}
+
+:deep(.el-tabs__nav-prev) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: 5px 0 5px -6px #ccc;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+
+:deep(.el-tabs__item) {
+  font-size: 12px;
+  font-weight: normal;
+  height: 30px;
+  line-height: 30px;
+}
+
+:deep(.el-tabs__header),
+:deep(.el-tabs__nav-wrap) {
+  margin: 0;
+  position: static;
+}
+</style>

src/plugins/i18n/en/menus.ts

@@ -42,5 +42,9 @@ export default {
   hsPureDocument: "Pure Doc(Embedded)",
   externalLink: "Pure Doc(External)",
   hsEpDocument: "Element Plus Doc(Embedded)",
-  hsAbout: "About"
+  hsAbout: "About",
+  hsResult: "Result Page",
+  hsSuccess: "Success Page",
+  hsFail: "Fail Page",
+  hsIconSelect: "Icon Select"
 };

src/plugins/i18n/zh-CN/menus.ts

@@ -42,5 +42,9 @@ export default {
   hsPureDocument: "平台文档(内嵌)",
   externalLink: "平台文档(外链)",
   hsEpDocument: "Element Plus文档(内嵌)",
-  hsAbout: "关于"
+  hsAbout: "关于",
+  hsResult: "结果页面",
+  hsSuccess: "成功页面",
+  hsFail: "失败页面",
+  hsIconSelect: "图标选择器"
 };

src/router/modules/able.ts

@@ -39,6 +39,15 @@ const ableRouter = {
         title: $t("menus.hsPrint"),
         i18n: true
       }
+    },
+    {
+      path: "/able/iconSelect",
+      name: "reIconSelect",
+      component: () => import("/@/views/able/icon-select.vue"),
+      meta: {
+        title: $t("menus.hsIconSelect"),
+        i18n: true
+      }
     }
   ]
 };

src/router/modules/about.ts

@@ -10,7 +10,7 @@ const aboutRouter = {
     icon: "question-line",
     title: $t("menus.hsAbout"),
     i18n: true,
-    rank: 12
+    rank: 14
   },
   children: [
     {

src/router/modules/error.ts

@@ -7,7 +7,7 @@ const errorRouter = {
   component: Layout,
   redirect: "/error/403",
   meta: {
-    icon: "position",
+    icon: "information-line",
     title: $t("menus.hserror"),
     i18n: true,
     rank: 9

src/router/modules/guide.ts

@@ -10,7 +10,7 @@ const guideRouter = {
     icon: "guide",
     title: $t("menus.hsguide"),
     i18n: true,
-    rank: 11
+    rank: 13
   },
   children: [
     {

src/router/modules/index.ts

@@ -4,6 +4,7 @@ import homeRouter from "./home";
 import ableRouter from "./able";
 import errorRouter from "./error";
 import guideRouter from "./guide";
+import resultRouter from "./result";
 import editorRouter from "./editor";
 import nestedRouter from "./nested";
 import flowChartRouter from "./flowchart";
@@ -25,6 +26,7 @@ const routes = [
   ableRouter,
   errorRouter,
   guideRouter,
+  resultRouter,
   nestedRouter,
   editorRouter,
   flowChartRouter,

src/router/modules/nested.ts

@@ -10,7 +10,7 @@ const nestedRouter = {
     title: $t("menus.hsmenus"),
     icon: "histogram",
     i18n: true,
-    rank: 8
+    rank: 11
   },
   children: [
     {

src/router/modules/result.ts

@@ -0,0 +1,37 @@
+import { $t } from "/@/plugins/i18n";
+const Layout = () => import("/@/layout/index.vue");
+
+const resultRouter = {
+  path: "/result",
+  name: "reResult",
+  component: Layout,
+  redirect: "/result/success",
+  meta: {
+    icon: "checkbox-circle-line",
+    title: $t("menus.hsResult"),
+    i18n: true,
+    rank: 8
+  },
+  children: [
+    {
+      path: "/result/success",
+      name: "reSuccess",
+      component: () => import("/@/views/result/success.vue"),
+      meta: {
+        title: $t("menus.hsSuccess"),
+        i18n: true
+      }
+    },
+    {
+      path: "/result/fail",
+      name: "reFail",
+      component: () => import("/@/views/result/fail.vue"),
+      meta: {
+        title: $t("menus.hsFail"),
+        i18n: true
+      }
+    }
+  ]
+};
+
+export default resultRouter;

src/style/element-plus.scss

@@ -36,6 +36,11 @@
   z-index: 99999 !important;
 }
 
+// 自定义popover的类名
+.pure-popper {
+  padding: 0 !important;
+}
+
 /* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
 .el-button--primary {
   --el-button-active-bg-color: var(--el-color-primary-active) !important;

src/views/able/icon-select.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { IconSelect } from "/@/components/ReIcon";
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">图标选择器</span>
+      </div>
+    </template>
+    <IconSelect />
+  </el-card>
+</template>

src/views/error/403.vue

@@ -6,9 +6,57 @@ import noAccess from "/@/assets/status/403.svg?component";
   <div class="flex justify-center items-center h-screen-sm">
     <noAccess />
     <div class="ml-12">
-      <p class="font-medium text-4xl mb-4">403</p>
+      <p
-      <p class="mb-4 text-gray-500">抱歉，你无权访问该页面</p>
+        class="font-medium text-4xl mb-4"
-      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 100
+          }
+        }"
+      >
+        403
+      </p>
+      <p
+        class="mb-4 text-gray-500"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 300
+          }
+        }"
+      >
+        抱歉，你无权访问该页面
+      </p>
+      <el-button
+        type="primary"
+        @click="$router.push('/')"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 500
+          }
+        }"
+        >返回首页</el-button
+      >
     </div>
   </div>
 </template>

src/views/error/404.vue

@@ -6,9 +6,57 @@ import noExist from "/@/assets/status/404.svg?component";
   <div class="flex justify-center items-center h-screen-sm">
     <noExist />
     <div class="ml-12">
-      <p class="font-medium text-4xl mb-4">404</p>
+      <p
-      <p class="mb-4 text-gray-500">抱歉，你访问的页面不存在</p>
+        class="font-medium text-4xl mb-4"
-      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 100
+          }
+        }"
+      >
+        404
+      </p>
+      <p
+        class="mb-4 text-gray-500"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 300
+          }
+        }"
+      >
+        抱歉，你访问的页面不存在
+      </p>
+      <el-button
+        type="primary"
+        @click="$router.push('/')"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 500
+          }
+        }"
+        >返回首页</el-button
+      >
     </div>
   </div>
 </template>

src/views/error/500.vue

@@ -6,9 +6,57 @@ import noServer from "/@/assets/status/500.svg?component";
   <div class="flex justify-center items-center h-screen-sm">
     <noServer />
     <div class="ml-12">
-      <p class="font-medium text-4xl mb-4">403</p>
+      <p
-      <p class="mb-4 text-gray-500">抱歉，服务器出错了</p>
+        class="font-medium text-4xl mb-4"
-      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 100
+          }
+        }"
+      >
+        403
+      </p>
+      <p
+        class="mb-4 text-gray-500"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 300
+          }
+        }"
+      >
+        抱歉，服务器出错了
+      </p>
+      <el-button
+        type="primary"
+        @click="$router.push('/')"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 500
+          }
+        }"
+        >返回首页</el-button
+      >
     </div>
   </div>
 </template>

src/views/result/fail.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/views/result/success.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>