refactor(docs): auto import icons & optimize details (#5087)

2026-03-13 07:51:17 +08:00 · 2021-12-31 16:30:35 +08:00
parent f90001af42
commit 784bc069da
17 changed files with 196 additions and 186 deletions
--- a/docs/.vitepress/vitepress/components/common/vp-link.vue
+++ b/docs/.vitepress/vitepress/components/common/vp-link.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import ExternalLink from '../icons/external-link-icon.vue'

 const props = defineProps<{
  href?: string
@@ -21,7 +20,7 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
  >
    <slot />
    <ElIcon v-if="isExternal && !noIcon">
-      <ExternalLink class="link-icon" />
+      <i-ri-external-link-line class="link-icon" />
    </ElIcon>
  </component>
 </template>
--- a/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useEditLink } from '../../composables/edit-link'
-import ExternalIcon from '../icons/external-link-icon.vue'

 const { url, text } = useEditLink()
 </script>
@@ -9,14 +8,14 @@ const { url, text } = useEditLink()
  <div class="edit-link">
    <a
      v-if="url"
-      class="link"
+      class="link text-sm"
      :href="url"
      target="_blank"
      rel="noopener noreferrer"
    >
      {{ text }}
      <ElIcon :size="16" style="vertical-align: text-top; line-height: 24px">
-        <ExternalIcon />
+        <i-ri-external-link-line />
      </ElIcon>
    </a>
  </div>
@@ -25,7 +24,6 @@ const { url, text } = useEditLink()
 <style scoped>
 .link {
  display: inline-block;
-  font-size: 1rem;
  font-weight: 500;
  color: var(--text-color-light);
 }
@@ -34,8 +32,4 @@ const { url, text } = useEditLink()
  text-decoration: none;
  color: var(--brand-color);
 }
-
-.icon {
-  margin-left: 4px;
-}
 </style>
--- a/docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue
@@ -18,7 +18,7 @@ onMounted(() => {
 </script>

 <template>
-  <p class="last-updated">
+  <p class="last-updated text-sm">
    <span class="prefix">{{ prefix }}:</span>
    <span class="datetime">{{ datetime }}</span>
  </p>
@@ -31,7 +31,6 @@ onMounted(() => {
  display: inline-block;
  margin: 0;
  line-height: 1.4;
-  font-size: 0.9rem;
  color: var(--text-color-light);

  .prefix {
@@ -45,10 +44,4 @@ onMounted(() => {
    font-weight: 400;
  }
 }
-
-@include respond-to('lg') {
-  .last-updated {
-    font-size: 1rem;
-  }
-}
 </style>
--- a/docs/.vitepress/vitepress/components/globals/parallax-home.vue
+++ b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
@@ -109,7 +109,7 @@ useEventListener(window, 'scroll', handleScroll)
        </a>
      </div>
      <div class="join">
-        <el-tooltip placement="top" hide-after="1000" offset="20">
+        <el-tooltip placement="top" :hide-after="1000" :offset="20">
          <template #content>
            {{ homeLang['21'] }}
            <a href="mailto:element-plus@outlook.com" target="_blank">
--- a/docs/.vitepress/vitepress/components/icons/copy-icon.vue
+++ b/docs/.vitepress/vitepress/components/icons/copy-icon.vue
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"
-    />
-  </svg>
-</template>
--- a/docs/.vitepress/vitepress/components/icons/external-link-icon.vue
+++ b/docs/.vitepress/vitepress/components/icons/external-link-icon.vue
@@ -1,16 +0,0 @@
-<template>
-  <svg
-    class="link-icon"
-    viewBox="0 0 1024 1024"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M853.333333 469.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 1-42.666667 42.666667H256a42.666667 42.666667 0 0 1-42.666667-42.666667V256a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 0 0-85.333333H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128v-256a42.666667 42.666667 0 0 0-42.666667-42.666667z"
-      fill="currentColor"
-    ></path>
-    <path
-      d="M682.666667 213.333333h67.413333l-268.373333 267.946667a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586666 0L810.666667 273.92V341.333333a42.666667 42.666667 0 0 0 42.666666 42.666667 42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-170.666666a42.666667 42.666667 0 0 0 0 85.333333z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
--- a/docs/.vitepress/vitepress/components/icons/github.vue
+++ b/docs/.vitepress/vitepress/components/icons/github.vue
@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
-    />
-  </svg>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'GithubIcon',
-}
-</script>
--- a/docs/.vitepress/vitepress/components/icons/play-circle-line.vue
+++ b/docs/.vitepress/vitepress/components/icons/play-circle-line.vue
@@ -1,20 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"
-    />
-  </svg>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PlayCircleLineIcon',
-})
-</script>
--- a/docs/.vitepress/vitepress/components/icons/source-code.vue
+++ b/docs/.vitepress/vitepress/components/icons/source-code.vue
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z"
-    />
-  </svg>
-</template>
--- a/docs/.vitepress/vitepress/components/icons/translation-icon.vue
+++ b/docs/.vitepress/vitepress/components/icons/translation-icon.vue
@@ -1,12 +0,0 @@
-<template>
-  <svg viewBox="0 0 512 512">
-    <path
-      d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
-      fill="currentColor"
-    ></path>
-    <path
-      d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
--- a/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
+++ b/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
@@ -2,8 +2,6 @@
 import VPLink from '../common/vp-link.vue'
 import { useTranslation } from '../../composables/translation'

-import TranslationIcon from '../icons/translation-icon.vue'
-
 const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
 </script>

@@ -17,7 +15,7 @@ const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
      >
        <template #reference>
          <ElIcon :size="20">
-            <TranslationIcon />
+            <i-ri-translate-2 />
          </ElIcon>
        </template>
        <div
--- a/docs/.vitepress/vitepress/components/vp-demo.vue
+++ b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -7,56 +7,21 @@ import { useSourceCode } from '../composables/source-code'
 import { usePlayGround } from '../composables/use-playground'

 import demoBlockLocale from '../../i18n/component/demo-block.json'
-import GithubIcon from './icons/github.vue'
-import SourceCodeIcon from './icons/source-code.vue'
-import PlayCircleLine from './icons/play-circle-line.vue'
-import CopyIcon from './icons/copy-icon.vue'

 import Example from './demo/vp-example.vue'
 import SourceCode from './demo/vp-source-code.vue'

-const props = defineProps({
-  // source is encoded via encodeURIComponent
-  source: {
-    type: String,
-    required: true,
-  },
-  path: {
-    type: String,
-    required: true,
-  },
-  css: {
-    type: String,
-    required: true,
-  },
-  cssPreProcessor: {
-    type: String,
-    required: true,
-  },
-  js: {
-    type: String,
-    required: true,
-  },
-  jsPreProcessor: {
-    type: String,
-    required: true,
-  },
-  html: {
-    type: String,
-    required: true,
-  },
-  demos: {
-    type: Object,
-    required: true,
-  },
-  rawSource: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-  },
-})
+const props = defineProps<{
+  source: string
+  path: string
+  css?: string
+  cssPreProcessor?: string
+  js?: string
+  html?: string
+  demos: object
+  rawSource: string
+  description?: string
+}>()

 const vm = getCurrentInstance()!

@@ -107,33 +72,39 @@ const copyCode = async () => {
 <template>
  <ClientOnly>
    <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
-    <p class="example-description" v-html="decodedDescription" />
+    <p text="sm" v-html="decodedDescription" />
    <div class="example">
      <div class="op-btns">
        <ElTooltip :content="locale['edit-in-editor']" :visible-arrow="false">
          <ElIcon :size="20" class="op-btn">
-            <PlayCircleLine @click="onPlaygroundClicked" />
+            <i-ri-play-circle-line @click="onPlaygroundClicked" />
          </ElIcon>
        </ElTooltip>
        <ElTooltip :content="locale['edit-on-github']" :visible-arrow="false">
-          <ElIcon :size="20" class="op-btn github">
+          <ElIcon
+            :size="20"
+            class="op-btn github"
+            style="color: var(--text-color-light)"
+          >
            <a :href="demoSourceUrl" rel="noreferrer noopener" target="_blank">
-              <GithubIcon />
+              <i-ri-github-line />
            </a>
          </ElIcon>
        </ElTooltip>
        <ElTooltip :content="locale['copy-code']" :visible-arrow="false">
          <ElIcon :size="20" class="op-btn" @click="copyCode">
-            <CopyIcon />
+            <!-- <CopyIcon /> -->
+            <i-ri-file-copy-2-line />
          </ElIcon>
        </ElTooltip>
        <ElTooltip :content="locale['view-source']" :visible-arrow="false">
          <ElIcon :size="20" class="op-btn" @click="setSourceVisible">
-            <SourceCodeIcon />
+            <!-- <SourceCodeIcon /> -->
+            <i-ri-code-line />
          </ElIcon>
        </ElTooltip>
      </div>
-      <ElDivider />
+      <ElDivider class="m-0" />
      <Example :file="path" :demo="formatPathDemos[path]" />
      <ElDivider v-if="sourceVisible" />
      <el-collapse-transition>
@@ -144,9 +115,6 @@ const copyCode = async () => {
 </template>

 <style scoped lang="scss">
-.example-description {
-  font-size: 14px;
-}
 .example {
  border: 1px solid var(--border-color);
  border-radius: var(--el-border-radius-base);
@@ -160,18 +128,27 @@ const copyCode = async () => {
    height: 3rem;
    line-height: 3rem;

-    .op-btn {
-      margin: 0 0.5rem;
-      cursor: pointer;
-      color: var(--text-color);
-
-      &.github a {
+    .el-icon {
+      &:hover {
        color: var(--text-color);
      }
    }
-  }
-  .el-divider {
-    margin: 0;
+
+    .op-btn {
+      margin: 0 0.5rem;
+      cursor: pointer;
+      color: var(--text-color-lighter);
+      transition: 0.2s;
+
+      &.github a {
+        transition: 0.2s;
+        color: var(--text-color-lighter);
+
+        &:hover {
+          color: var(--text-color);
+        }
+      }
+    }
  }
 }
 </style>
--- a/docs/.vitepress/vitepress/composables/social-links.ts
+++ b/docs/.vitepress/vitepress/composables/social-links.ts
@@ -1,4 +1,4 @@
-import GitHubIcon from '../components/icons/github.vue'
+import GitHubIcon from '~icons/ri/github-fill'

 export const useSocialLinks = () => {
  return [
--- a/docs/.vitepress/vitepress/styles/mixins.scss
+++ b/docs/.vitepress/vitepress/styles/mixins.scss
@@ -4,7 +4,7 @@

@mixin with-bg {
  background-color: var(--bg-color);
-  color: var(--text-color-light);
+  color: var(--text-color);
  transition: border-color var(--el-transition-duration),
    background-color var(--el-transition-duration);
 }
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,11 +20,14 @@
  },
  "devDependencies": {
    "@crowdin/cli": "3.7.4",
+    "@iconify-json/ri": "^1.0.2",
    "@types/markdown-it": "12.2.3",
    "cross-env": "7.0.3",
    "escape-html": "1.0.3",
    "markdown-it": "12.3.0",
    "markdown-it-container": "3.0.0",
+    "unplugin-icons": "^0.13.0",
+    "unplugin-vue-components": "0.17.11",
    "vite-plugin-inspect": "0.3.11",
    "vite-plugin-windicss": "1.6.1",
    "vitepress": "0.20.10"
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -2,6 +2,11 @@ import path from 'path'
 import Inspect from 'vite-plugin-inspect'
 import { defineConfig } from 'vite'
 import WindiCSS from 'vite-plugin-windicss'
+
+import Components from 'unplugin-vue-components/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
 import { projRoot } from './.vitepress/utils/paths'
 import type { Alias } from 'vite'

@@ -39,7 +44,25 @@ export default defineConfig({
      },
    },
  },
-  plugins: [WindiCSS(), Inspect()],
+  plugins: [
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      // custom resolvers
+      resolvers: [
+        // auto import icons
+        // https://github.com/antfu/unplugin-icons
+        IconsResolver(),
+      ],
+    }),
+
+    // https://github.com/antfu/unplugin-icons
+    Icons({
+      autoInstall: true,
+    }),
+
+    WindiCSS(),
+    Inspect(),
+  ],
  optimizeDeps: {
    include: [
      'vue',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,6 +150,7 @@ importers:
      '@crowdin/cli': 3.7.4
      '@docsearch/js': 3.0.0-alpha.42
      '@docsearch/react': 3.0.0-alpha.42
+      '@iconify-json/ri': ^1.0.2
      '@types/markdown-it': 12.2.3
      '@vueuse/core': 7.4.3
      axios: 0.24.0
@@ -161,6 +162,8 @@ importers:
      markdown-it-container: 3.0.0
      normalize.css: 8.0.1
      nprogress: 0.2.0
+      unplugin-icons: ^0.13.0
+      unplugin-vue-components: 0.17.11
      vite-plugin-inspect: 0.3.11
      vite-plugin-windicss: 1.6.1
      vitepress: 0.20.10
@@ -170,16 +173,19 @@ importers:
      '@vueuse/core': 7.4.3_vue@3.2.26
      axios: 0.24.0
      clipboard-copy: 4.0.1
-      element-plus: 1.2.0-beta.6_vue@3.2.26
+      element-plus: 1.3.0-beta.1_vue@3.2.26
      normalize.css: 8.0.1
      nprogress: 0.2.0
    devDependencies:
      '@crowdin/cli': 3.7.4
+      '@iconify-json/ri': 1.0.2
      '@types/markdown-it': 12.2.3
      cross-env: 7.0.3
      escape-html: 1.0.3
      markdown-it: 12.3.0
      markdown-it-container: 3.0.0
+      unplugin-icons: 0.13.0_rollup@2.62.0
+      unplugin-vue-components: 0.17.11_rollup@2.62.0+vue@3.2.26
      vite-plugin-inspect: 0.3.11
      vite-plugin-windicss: 1.6.1
      vitepress: 0.20.10_sass@1.45.2
@@ -364,12 +370,25 @@ packages:
      '@algolia/logger-common': 4.10.5
      '@algolia/requester-common': 4.10.5

+  /@antfu/install-pkg/0.1.0:
+    resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
  /@antfu/utils/0.3.0:
    resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
    dependencies:
      '@types/throttle-debounce': 2.1.0
    dev: true

+  /@antfu/utils/0.4.0:
+    resolution: {integrity: sha512-gqkpvjkgFUu+s3kP+Ly33OKpo5zvVY3FDFhv5BIb98SncS3KD6DNxPfNDjwHIoyXbz1leWo1j8DtRLZ1D2Jv+Q==}
+    dependencies:
+      '@types/throttle-debounce': 2.1.0
+    dev: true
+
  /@babel/code-frame/7.15.8:
    resolution: {integrity: sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==}
    engines: {node: '>=6.9.0'}
@@ -1024,6 +1043,22 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@iconify-json/ri/1.0.2:
+    resolution: {integrity: sha512-PZMjoNE05S1PTcQHdIla/0htpmvMV2JvNwDzfEWVNGsLRG+htZuwozY9iiua6PGqmTw+kfBklvqrkTpzCpZvhQ==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: true
+
+  /@iconify/types/1.0.12:
+    resolution: {integrity: sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==}
+    dev: true
+
+  /@iconify/utils/1.0.20:
+    resolution: {integrity: sha512-J5IriR8KeANs8vIEFKWzOlOvNgZHkwqkmqaIwvqtuDbBeFHtXGfM/LYMDmjtRJ0AAa7f254qw6TK7gAibYfHUA==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: true
+
  /@istanbuljs/load-nyc-config/1.1.0:
    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
    engines: {node: '>=8'}
@@ -4019,11 +4054,12 @@ packages:
    resolution: {integrity: sha512-2jtSwgyiRzybHRxrc2nKI+39wH3AwQgn+sogQ+q814gv8hIFwrcZbV07Ea9f8AmK0ufPVZUvvAG1uZJ+obV4Jw==}
    dev: true

-  /element-plus/1.2.0-beta.6_vue@3.2.26:
-    resolution: {integrity: sha512-8EdSIR/5/FHcSB8w1diAh+gJMHgxIvxuZoayY99k6taAR1QyEFHuPTgFccZLopJ1+iP4UEsZFz49l57qS08Utw==}
+  /element-plus/1.3.0-beta.1_vue@3.2.26:
+    resolution: {integrity: sha512-q3vMaKElPpuSTeIF7kuDmMOE+N1YVCCIG3fshXpz6qgjnxPbgZumVM0qGfhr8DTu9JxRbBoDok49dqtX/BWn3w==}
    peerDependencies:
      vue: ^3.2.0
    dependencies:
+      '@ctrl/tinycolor': 3.4.0
      '@element-plus/icons-vue': 0.2.4_vue@3.2.26
      '@popperjs/core': 2.11.0
      '@vueuse/core': 7.4.3_vue@3.2.26
@@ -10139,6 +10175,37 @@ packages:
    engines: {node: '>= 10.0.0'}
    dev: true

+  /unplugin-icons/0.13.0_rollup@2.62.0:
+    resolution: {integrity: sha512-CyAl0HV3bZUGT7ut9agpPRhEYXCvufr80Fh72yrkD57BVCTZ7ze10Rt63ZrvPXiJQpd+aI/Bizm2aqOf3WPSfg==}
+    peerDependencies:
+      '@svgr/core': ^5.5.0
+      '@vue/compiler-sfc': ^3.0.2
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.0
+      '@antfu/utils': 0.4.0
+      '@iconify/utils': 1.0.20
+      debug: 4.3.3
+      kolorist: 1.5.1
+      local-pkg: 0.4.0
+      unplugin: 0.2.21_rollup@2.62.0
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
  /unplugin-vue-components/0.17.11_95e0d1fabfe6a3bc972c7b440477cc9b:
    resolution: {integrity: sha512-u5MQ0TbikszRelCt6EA/HskGtGkGLDxi7tQ4/4tcEPWkH3yXSZRJCOeLF5MSdxN1SiGjaJ0I9zeHjoZFC3FvRw==}
    engines: {node: '>=14'}
@@ -10170,6 +10237,55 @@ packages:
      - webpack
    dev: true

+  /unplugin-vue-components/0.17.11_rollup@2.62.0+vue@3.2.26:
+    resolution: {integrity: sha512-u5MQ0TbikszRelCt6EA/HskGtGkGLDxi7tQ4/4tcEPWkH3yXSZRJCOeLF5MSdxN1SiGjaJ0I9zeHjoZFC3FvRw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@babel/traverse': ^7.15.4
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@babel/traverse':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.3.0
+      '@rollup/pluginutils': 4.1.1
+      chokidar: 3.5.2
+      debug: 4.3.3
+      fast-glob: 3.2.7
+      local-pkg: 0.4.0
+      magic-string: 0.25.7
+      minimatch: 3.0.4
+      resolve: 1.20.0
+      unplugin: 0.2.21_rollup@2.62.0
+      vue: 3.2.26
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
+  /unplugin/0.2.21_rollup@2.62.0:
+    resolution: {integrity: sha512-IJ15/L5XbhnV7J09Zjk0FT5HEkBjkXucWAXQWRsmEtUxmmxwh23yavrmDbCF6ZPxWiVB28+wnKIHePTRRpQPbQ==}
+    peerDependencies:
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      rollup: 2.62.0
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
  /unplugin/0.2.21_rollup@2.62.0+vite@2.7.10:
    resolution: {integrity: sha512-IJ15/L5XbhnV7J09Zjk0FT5HEkBjkXucWAXQWRsmEtUxmmxwh23yavrmDbCF6ZPxWiVB28+wnKIHePTRRpQPbQ==}
    peerDependencies: