From f66177ded1f48ac45a7105f73c5c3cda7084c7b1 Mon Sep 17 00:00:00 2001
From: fratzinger <22286818+fratzinger@users.noreply.github.com>
Date: Tue, 1 Nov 2022 19:18:31 +0100
Subject: [PATCH] feat(docs): Add Awesome Ecosystem page

---
 docs/.vitepress/components.d.ts         |   6 +
 docs/.vitepress/config.ts               |   4 +
 docs/.vitepress/style/element-plus.scss |   9 +
 docs/.vitepress/theme/index.ts          |   4 +
 docs/auto-imports.d.ts                  |   5 +
 docs/awesome/PackageCard.vue            | 134 +++++
 docs/awesome/Packages.vue               | 223 ++++++++
 docs/awesome/helpers.ts                 |  30 ++
 docs/awesome/index.md                   |  15 +
 docs/awesome/types.ts                   |  42 ++
 docs/package-lock.json                  | 650 +++++++++++++++++++++++-
 docs/package.json                       |   4 +
 docs/vite.config.ts                     |  66 +--
 13 files changed, 1137 insertions(+), 55 deletions(-)
 create mode 100644 docs/.vitepress/style/element-plus.scss
 create mode 100644 docs/auto-imports.d.ts
 create mode 100644 docs/awesome/PackageCard.vue
 create mode 100644 docs/awesome/Packages.vue
 create mode 100644 docs/awesome/helpers.ts
 create mode 100644 docs/awesome/index.md
 create mode 100644 docs/awesome/types.ts

diff --git a/docs/.vitepress/components.d.ts b/docs/.vitepress/components.d.ts
index 0b2b20a124..429b286c9e 100644
--- a/docs/.vitepress/components.d.ts
+++ b/docs/.vitepress/components.d.ts
@@ -10,6 +10,12 @@ declare module '@vue/runtime-core' {
     Badges: typeof import('./components/Badges.vue')['default']
     BlockQuote: typeof import('./components/BlockQuote.vue')['default']
     Contributors: typeof import('./components/Contributors.vue')['default']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     FeaturesList: typeof import('./components/FeaturesList.vue')['default']
     LanguageBlock: typeof import('./components/LanguageBlock.vue')['default']
     LanguageSelect: typeof import('./components/LanguageSelect.vue')['default']
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6395ca34e4..6b6edc6944 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -144,6 +144,10 @@ export default defineConfig({
           }
         ]
       },
+      {
+        text: 'Awesome',
+        link: '/awesome/'
+      },
       {
         text: 'Ecosystem',
         items: [
diff --git a/docs/.vitepress/style/element-plus.scss b/docs/.vitepress/style/element-plus.scss
new file mode 100644
index 0000000000..7dc22162ff
--- /dev/null
+++ b/docs/.vitepress/style/element-plus.scss
@@ -0,0 +1,9 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #745847
+    )
+  )
+);
+
+@use 'element-plus/theme-chalk/src/index.scss';
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 4a788e8d4a..e12e1585a8 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -12,6 +12,10 @@ import Logo from '../components/Logo.vue'
 import BlockQuote from '../components/BlockQuote.vue'
 import LanguageBlock from '../components/LanguageBlock.vue'
 
+import '../style/element-plus.scss'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+// import 'element-plus/dist/index.css'
+
 if (inBrowser) import('./pwa')
 
 export default {
diff --git a/docs/auto-imports.d.ts b/docs/auto-imports.d.ts
new file mode 100644
index 0000000000..08908edd6a
--- /dev/null
+++ b/docs/auto-imports.d.ts
@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}
diff --git a/docs/awesome/PackageCard.vue b/docs/awesome/PackageCard.vue
new file mode 100644
index 0000000000..557547e135
--- /dev/null
+++ b/docs/awesome/PackageCard.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { nFormatter } from './helpers'
+import _formatDistance from 'date-fns/formatDistance/index.js'
+import { PackageOutput } from './types'
+const intlFormat = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+})
+const props = defineProps({
+  stats: {
+    type: Object as PropType<PackageOutput>,
+    required: true
+  },
+  isOld: {
+    type: Boolean,
+    default: false
+  }
+})
+const formatDistance = (date: Date, baseDate: Date) => {
+  try {
+    return _formatDistance(date, new Date())
+  } catch (err) {
+    console.error(err)
+    return ''
+  }
+}
+const formatDate = (date: Date) => {
+  try {
+    return intlFormat.format(date)
+  } catch (err) {
+    console.error(err)
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div class="feathers-package">
+    <div class="flex items-center flex-col sm:flex-row mb-1">
+      <a :href="`https://github.com/${stats.ownerName}`" target="_blank">
+        <img v-if="stats.ownerAvatar" :src="stats.ownerAvatar" class="w-10 h-10 rounded-full mr-2" />
+      </a>
+      <div class="flex-1">
+        <div class="flex justify-between flex-col sm:flex-row">
+          <a
+            :title="stats.hasNPM ? stats.name : stats.repository?.name"
+            :href="stats.hasNPM ? stats.npmLink : stats.ghLink"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-lg flex flex-wrap justify-center md:justify-normal"
+          >
+            <template v-if="stats.name">{{ stats.name }}</template>
+            <template v-else>{{ stats.repository?.name }}</template>
+          </a>
+          <div v-if="stats.hasNPM" class="flex justify-center md:justify-normal ml-2">
+            <div>
+              <span class="text-gray-500 font-extralight">v</span>
+              <span class="font-semibold">{{ stats.version }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex my-1 text-sm">
+          <div
+            v-if="stats.hasNPM"
+            :title="`${stats.downloads} monthly npm downloads`"
+            class="flex mx-2 items-center min-w-14"
+          >
+            <div class="i-carbon-download mr-1 w-3.5 h-3.5 text-gray-500" />
+            <div class="flex-1 flex justify-center">{{ stats.downloads && nFormatter(stats.downloads) }}</div>
+          </div>
+          <div :title="`${stats.stars} stars on github`" class="flex mx-2 items-center min-w-14">
+            <div class="i-carbon-star-filled mr-1 w-3.5 h-3.5 text-gray-500" />
+            <div class="flex-1 flex justify-center">{{ nFormatter(stats.stars) }}</div>
+          </div>
+          <div
+            v-if="stats.hasNPM"
+            :title="`published on ${formatDate(stats.lastPublish)}`"
+            class="flex mx-2 items-center min-w-16"
+          >
+            <div class="i-carbon-time mr-1 w-3.5 h-3.5 text-gray-500"></div>
+            {{ formatDistance(stats.lastPublish, new Date()) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex text-sm mb-2 justify-center sm:justify-start">
+      <div v-if="stats.license" class="mx-2">{{ stats.license }}</div>
+      <a
+        v-if="stats.ghLink"
+        :href="stats.ghLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center mx-2"
+      >
+        <div class="i-carbon-arrow-up-right mr-1 w-3.5 h-3.5" />
+        Github
+      </a>
+      <a
+        v-if="stats.hasNPM"
+        :href="stats.npmLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center mx-2"
+      >
+        <div class="i-carbon-arrow-up-right mr-1 w-3.5 h-3.5" />
+        npm
+      </a>
+    </div>
+    <div class="text-gray-600 my-2 ml-2 text-sm md:text-base .dark:text-gray-300">
+      <div v-if="isOld" class="border-l-4 border-red-500 bg-red-500/20 p-2 mb-2 text-sm">
+        This package seems to be unmaintained. Please use with caution and consider taking over the
+        maintenance! Please contact us if you want to over discord! ❤️
+      </div>
+      {{ stats.description }}
+    </div>
+    <div>
+      <div
+        v-for="keyword in stats.keywords"
+        :key="keyword"
+        class="inline-block bg-gray-200 rounded-full px-3 py-1 text-xs text-gray-700 mr-2 mb-1 .dark:bg-gray-700 .dark:text-gray-200"
+      >
+        {{ keyword }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feathers-package {
+  margin-bottom: 30px;
+}
+</style>
diff --git a/docs/awesome/Packages.vue b/docs/awesome/Packages.vue
new file mode 100644
index 0000000000..4964ca2112
--- /dev/null
+++ b/docs/awesome/Packages.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import PackageCard from './PackageCard.vue'
+import { PackageOutput, PackagesInput } from './types'
+import { ref, computed, onMounted } from 'vue'
+import { uniqBy } from './helpers'
+
+const packageSource = 'https://ecosystem.feathershq.workers.dev/'
+
+const makeDate = (obj: Record<string, any>, key: string) => {
+  if (obj[key]) {
+    obj[key] = new Date(obj[key])
+  }
+}
+const fetchedPackages = ref<PackageOutput[]>([])
+async function getPackageStats(): Promise<PackageOutput[]> {
+  const packages = await fetch(packageSource).then((response) => response.json())
+
+  packages.forEach((pkg: any) => {
+    makeDate(pkg, 'lastPublish')
+
+    pkg.id = pkg.name || `${pkg.repository?.name}/${pkg.repository?.directory}`
+
+    const hasNPM = !isNaN(pkg.lastPublish.getTime())
+    pkg.hasNPM = hasNPM
+  })
+
+  console.log(packages)
+
+  const uniq = uniqBy(packages, (pkg) => pkg.id)
+  console.log(uniq)
+  return uniq
+}
+
+onMounted(async () => {
+  fetchedPackages.value = await getPackageStats()
+})
+
+const categories: CategoryOption[] = [
+  { label: 'Authentication', value: ['authentication'] },
+  { label: 'Authorization', value: ['authorization'] },
+  { label: 'Caching', value: ['caching'] },
+  { label: 'Client', value: ['client'] },
+  { label: 'Database', value: ['database'] },
+  { label: 'APIs', value: ['api', 'apis'] },
+  { label: 'Documentation', value: ['documentation', 'docs'] },
+  { label: 'Email & SMS', value: ['email', 'mail', 'mailer', 'nodemailer', 'sms'] },
+  { label: 'Frontend', value: ['frontend', 'front-end'] },
+  { label: 'Google', value: ['google'] },
+  { label: 'Hooks', value: ['hook', 'hooks'] },
+  { label: 'Images', value: ['image', 'images'] },
+  { label: 'Payments', value: ['payment', 'payments'] },
+  { label: 'Scaling', value: ['scale', 'scaling'] },
+  { label: 'Search', value: ['search'] },
+  { label: 'Social Media', value: ['social media', 'social-media', 'socialmedia'] },
+  { label: 'Testing', value: ['test', 'testing'] },
+  { label: 'Logging', value: ['log', 'logs', 'logging'] },
+  { label: 'Transports', value: ['transport', 'transports'] },
+  { label: 'Utilities', value: ['utility', 'utilities'] },
+  { label: 'Validation', value: ['validation', 'validator', 'validators'] }
+]
+
+const keyToSortBy = ref<'stars' | 'downloads' | 'lastPublish'>('lastPublish')
+
+const showCore = ref(true)
+function filterCore(pkg: PackageOutput) {
+  return pkg.ownerName === 'feathersjs'
+}
+const coreCount = computed(() => {
+  return fetchedPackages.value.filter(filterCore).length
+})
+
+const packagesAreOldIfOlderThan = 1000 * 60 * 60 * 24 * 365 * 2.9 // 3 years
+const showOld = ref(false)
+function filterOld(pkg: PackageOutput) {
+  return pkg.lastPublish.getTime() < Date.now() - packagesAreOldIfOlderThan
+}
+const oldCount = computed(() => {
+  return fetchedPackages.value.filter(filterOld).length
+})
+const countByCategory = computed(() => {
+  const counts: Record<string, number> = {}
+  categories.forEach((category) => {
+    counts[category.label] = fetchedPackages.value.filter((pkg) => {
+      return category.value.some((value) => {
+        return pkg.keywords?.some((keyword) => keyword.toLowerCase().includes(value))
+      })
+    }).length
+  })
+  return counts
+})
+
+const categoriesToShow = ref<CategoryOption[]>([])
+type Category = string[]
+type CategoryOption = {
+  label: string
+  value: Category
+}
+
+const search = ref('')
+
+const filteredPackages = computed(() => {
+  let pkgs = [...fetchedPackages.value]
+  if (!showCore.value) {
+    pkgs = pkgs.filter((pkg) => !filterCore(pkg))
+  }
+  if (!showOld.value) {
+    pkgs = pkgs.filter((pkg) => !filterOld(pkg))
+  }
+  if (search.value) {
+    const _search = search.value.toLowerCase()
+    pkgs = pkgs.filter(
+      (pkg) =>
+        pkg.name.includes(_search) ||
+        pkg.description?.includes(_search) ||
+        pkg.keywords?.some((keyword) => keyword.includes(_search))
+    )
+  }
+  if (categoriesToShow.value.length) {
+    pkgs = pkgs.filter((pkg) => {
+      return pkg.keywords?.some((keyword) => {
+        return categoriesToShow.value.some((category) => {
+          return category.value.some((value) => {
+            return keyword.toLowerCase().includes(value)
+          })
+        })
+      })
+    })
+  }
+  return pkgs
+})
+
+const packagesToShow = computed(() => {
+  const key = keyToSortBy.value
+  const result = filteredPackages.value.sort((a, b) => {
+    if (key === 'lastPublish' && (!a.hasNPM || !b.hasNPM)) {
+      return a.hasNPM ? -1 : 1
+    }
+
+    if (a[key] > b[key]) {
+      return -1
+    } else if (a[key] < b[key]) {
+      return 1
+    } else {
+      return 0
+    }
+  })
+  console.log(result.map((x) => x[key]))
+  return result
+})
+</script>
+
+<template>
+  <div>
+    <el-input v-model="search" placeholder="Search package" clearable class="mb-1" />
+    <div class="flex justify-between mb-2">
+      <div>
+        <el-checkbox v-model="showCore" size="small" title="packages under '@feathersjs/'"
+          >core ({{ coreCount }})</el-checkbox
+        >
+        <el-checkbox v-model="showOld" size="small" title="older than 3 years"
+          >outdated ({{ oldCount }})</el-checkbox
+        >
+      </div>
+      <el-select
+        v-model="categoriesToShow"
+        multiple
+        collapse-tags
+        collapse-tags-tooltip
+        placeholder="Filter by category"
+        style="width: 240px"
+        value-key="label"
+        clearable
+      >
+        <el-option
+          v-for="option in categories"
+          :key="option.label"
+          :label="option.label"
+          :value="option"
+          :title="option.value.join(', ')"
+        >
+          {{ option.label }} ({{ countByCategory[option.label] }})
+        </el-option>
+      </el-select>
+    </div>
+    <div class="flex justify-end mb-3">
+      <el-radio-group v-model="keyToSortBy">
+        <el-radio label="downloads" size="small" title="Monthly npm downloads">Downloads</el-radio>
+        <el-radio label="stars" size="small" title="Github stars">Stars</el-radio>
+        <el-radio label="lastPublish" size="small" title="Recently published on npm">Newest</el-radio>
+      </el-radio-group>
+    </div>
+
+    <div class="font-bold mb-5">{{ packagesToShow.length }}/{{ fetchedPackages.length }} packages:</div>
+    <TransitionGroup name="list" tag="div">
+      <package-card
+        v-for="pkg in packagesToShow"
+        :key="pkg.id"
+        :stats="pkg"
+        :is-old="pkg.lastPublish.getTime() < Date.now() - packagesAreOldIfOlderThan"
+      />
+    </TransitionGroup>
+  </div>
+</template>
+<style scoped>
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/docs/awesome/helpers.ts b/docs/awesome/helpers.ts
new file mode 100644
index 0000000000..080a3e2332
--- /dev/null
+++ b/docs/awesome/helpers.ts
@@ -0,0 +1,30 @@
+export function nFormatter(num: number, digits: number) {
+  const lookup = [
+    { value: 1, symbol: '' },
+    { value: 1e3, symbol: 'k' },
+    { value: 1e6, symbol: 'M' },
+    { value: 1e9, symbol: 'G' },
+    { value: 1e12, symbol: 'T' },
+    { value: 1e15, symbol: 'P' },
+    { value: 1e18, symbol: 'E' }
+  ]
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/
+  const item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value
+    })
+  return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'
+}
+
+export const uniqBy = <T = any, V = any>(arr: T[], selector: (item: T) => V) => {
+  const map = new Map<V, T>()
+  arr.forEach((item) => {
+    const prop = selector(item)
+    console.log(prop)
+    if (!map.has(prop)) map.set(prop, item)
+  })
+  console.log(map.values())
+  return [...map.values()]
+}
diff --git a/docs/awesome/index.md b/docs/awesome/index.md
new file mode 100644
index 0000000000..b3d9a8c0e9
--- /dev/null
+++ b/docs/awesome/index.md
@@ -0,0 +1,15 @@
+---
+lastUpdated: false
+---
+
+<script setup lang="ts">
+import Packages from './Packages.vue'
+</script>
+
+# Awesome Packages
+
+This is a curated list of feathers packages. You can sort by various criteria. Core packages are hidden by default.
+
+<Suspense>
+  <packages class="mt-4" />
+</Suspense>
diff --git a/docs/awesome/types.ts b/docs/awesome/types.ts
new file mode 100644
index 0000000000..1a314f8e8c
--- /dev/null
+++ b/docs/awesome/types.ts
@@ -0,0 +1,42 @@
+export type PackageInput = {
+  npm: string
+  repo: string
+}
+
+export type PackagesInput = Record<string, PackageInput>
+
+export type PackageOutput = {
+  id: string
+  name: string
+  description: string
+  keywords: string[]
+  /** npm license */
+  license: string
+  /** npm version */
+  version: string
+  /** npm monthly downloads */
+  downloads: number
+  /** npm last published Date */
+  lastPublish: Date
+  /** npm last published Date as unix */
+  lastPublishUnix: number
+  /** github: stars count */
+  stars: number
+  /** github: open issues count */
+  issues: number
+  /** github: age of repo */
+  createdAt: Date
+  /** github: name of the owner */
+  ownerName: string
+  /** github: url of the users avatar */
+  ownerAvatar: string
+  /** github: url of the repo */
+  ghLink: string
+  hasNPM: boolean
+  /** npm: url of the package */
+  npmLink: string
+  repository: {
+    name: string
+    directory: string
+  }
+}
diff --git a/docs/package-lock.json b/docs/package-lock.json
index d8e6c3fd6d..e95b5ed03f 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -7,6 +7,8 @@
       "name": "docs",
       "dependencies": {
         "@vueuse/core": "^9.3.0",
+        "date-fns": "^2.29.3",
+        "element-plus": "^2.2.19",
         "vue": "^3.2.40"
       },
       "devDependencies": {
@@ -20,7 +22,9 @@
         "esno": "^0.16.3",
         "fast-glob": "^3.2.12",
         "https-localhost": "^4.7.1",
+        "sass": "^1.55.0",
         "unocss": "^0.45.26",
+        "unplugin-auto-import": "^0.11.4",
         "unplugin-vue-components": "^0.22.8",
         "vite-plugin-pwa": "^0.13.1",
         "vitepress": "^1.0.0-alpha.19",
@@ -1912,6 +1916,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
+      "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@docsearch/css": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.2.1.tgz",
@@ -1956,6 +1968,14 @@
         }
       }
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+      "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild-kit/cjs-loader": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@esbuild-kit/cjs-loader/-/cjs-loader-2.3.0.tgz",
@@ -2204,6 +2224,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz",
+      "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.3.tgz",
+      "integrity": "sha512-6H1kwjkOZKabApNtXRiYHvMmYJToJ1DV7rQ3xc/WJpOABhQIOJJOdz2AOejj8X+gcybaFmBpisVTZxBZAM3V0w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.1"
+      }
+    },
     "node_modules/@iconify-json/carbon": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@iconify-json/carbon/-/carbon-1.1.8.tgz",
@@ -2368,6 +2401,16 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -2575,6 +2618,19 @@
         "@types/through": "*"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.186",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz",
+      "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "18.8.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.3.tgz",
@@ -3266,6 +3322,11 @@
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3881,6 +3942,23 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4003,6 +4081,31 @@
       "integrity": "sha512-aJeQQ+Hl9Jyyzv4chBqYJwmVRY46N5i2BEX5Cuyk/5gFCUZ5F3i7Hnba6snZftWla7Gglwc5pIgcd+E7cW+rPg==",
       "dev": true
     },
+    "node_modules/element-plus": {
+      "version": "2.2.19",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.19.tgz",
+      "integrity": "sha512-uN0gt9lUus/IHzu5J6vkbYoYJgUtU05osdtFv9RO27bHKOG5GN7dH6uA3OKfkQQ6R2sV8ZxY1rc9PH1X8Dgrow==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.6",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4440,8 +4543,7 @@
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
@@ -5135,6 +5237,12 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5751,9 +5859,9 @@
       }
     },
     "node_modules/jsonc-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.1.0.tgz",
-      "integrity": "sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
     "node_modules/jsonfile": {
@@ -5822,8 +5930,22 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -5924,9 +6046,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.26.6",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.6.tgz",
-      "integrity": "sha512-6d+3bFybzyQFJYSoRsl9ZC0wheze8M1LrQC7tNMRqXR4izUTDOLMd9BtSuExK9iAukFh+s5K0WAhc/dlQ+HKYA==",
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+      "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
       "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.8"
@@ -5956,6 +6078,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -6059,6 +6186,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/mlly": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.16.tgz",
+      "integrity": "sha512-LaJ8yuh4v0zEmge/g3c7jjFlhoCPfQn6RCjXgm9A0Qiuochq4BcuOxVfWmdnCoLTlg2MV+hqhOek+W2OhG0Lwg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "pathe": "^0.3.8",
+        "pkg-types": "^0.3.5",
+        "ufo": "^0.8.5"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -6121,6 +6260,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -6422,9 +6566,9 @@
       "dev": true
     },
     "node_modules/pathe": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.8.tgz",
-      "integrity": "sha512-c71n61F1skhj/jzZe+fWE9XDoTYjWbUwIKVwFftZ5IOgiX44BVkTkD+/803YDgR50tqeO4eXWxLyVHBLWQAD1g==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.9.tgz",
+      "integrity": "sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==",
       "dev": true
     },
     "node_modules/perfect-debounce": {
@@ -6450,6 +6594,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-0.3.5.tgz",
+      "integrity": "sha512-VkxCBFVgQhNHYk9subx+HOhZ4jzynH11ah63LZsprTKwPCWG9pfWBlkElWFbvkP9BVR0dP1jS9xPdhaHQNK74Q==",
+      "dev": true,
+      "dependencies": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^0.5.14",
+        "pathe": "^0.3.7"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -6890,6 +7045,29 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/scule": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-0.3.2.tgz",
+      "integrity": "sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==",
+      "dev": true
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -7290,6 +7468,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-0.4.2.tgz",
+      "integrity": "sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7629,6 +7819,77 @@
         "node": ">=4"
       }
     },
+    "node_modules/unimport": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.7.0.tgz",
+      "integrity": "sha512-Cr0whz4toYVid3JHlni/uThwavDVVCk6Zw0Gxnol1c7DprTA+Isr4T+asO6rDGkhkgV7r3vSdSs5Ym8F15JA+w==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.2",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.7",
+        "mlly": "^0.5.16",
+        "pathe": "^0.3.9",
+        "pkg-types": "^0.3.5",
+        "scule": "^0.3.2",
+        "strip-literal": "^0.4.2",
+        "unplugin": "^0.10.2"
+      }
+    },
+    "node_modules/unimport/node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unimport/node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/unplugin": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.10.2.tgz",
+      "integrity": "sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.4.5"
+      }
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -7710,6 +7971,83 @@
         "webpack-virtual-modules": "^0.4.5"
       }
     },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.11.4.tgz",
+      "integrity": "sha512-lh/bRDRYwgnb9Cm5ur8TlTMGxA1GRZvgzCvBIf0vyuVRy7ebWcWefFElpUDpr8vLl+ZRGsPVCOGiYJ8TCR625Q==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.6.0",
+        "@rollup/pluginutils": "^5.0.2",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.7",
+        "unimport": "^0.7.0",
+        "unplugin": "^0.10.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/@antfu/utils": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.6.0.tgz",
+      "integrity": "sha512-VauUKmo22NYo3y6fIjGjVU7LJyhaedYL9kyabdvIIIl7P+qbNPbQiaLwwk4UOU4McFfA2eg+aIWpEYhkHzsE9Q==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
+    "node_modules/unplugin-auto-import/node_modules/unplugin": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.10.2.tgz",
+      "integrity": "sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.4.5"
+      }
+    },
     "node_modules/unplugin-vue-components": {
       "version": "0.22.8",
       "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.22.8.tgz",
@@ -10116,6 +10454,11 @@
         }
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
+      "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
+    },
     "@docsearch/css": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.2.1.tgz",
@@ -10144,6 +10487,12 @@
         "algoliasearch": "^4.0.0"
       }
     },
+    "@element-plus/icons-vue": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+      "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
+      "requires": {}
+    },
     "@esbuild-kit/cjs-loader": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@esbuild-kit/cjs-loader/-/cjs-loader-2.3.0.tgz",
@@ -10316,6 +10665,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz",
+      "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.3.tgz",
+      "integrity": "sha512-6H1kwjkOZKabApNtXRiYHvMmYJToJ1DV7rQ3xc/WJpOABhQIOJJOdz2AOejj8X+gcybaFmBpisVTZxBZAM3V0w==",
+      "requires": {
+        "@floating-ui/core": "^1.0.1"
+      }
+    },
     "@iconify-json/carbon": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@iconify-json/carbon/-/carbon-1.1.8.tgz",
@@ -10455,6 +10817,11 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -10627,6 +10994,19 @@
         "@types/through": "*"
       }
     },
+    "@types/lodash": {
+      "version": "4.14.186",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz",
+      "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw=="
+    },
+    "@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/node": {
       "version": "18.8.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.3.tgz",
@@ -11172,6 +11552,11 @@
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
       "dev": true
     },
+    "async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -11616,6 +12001,16 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
+    "dayjs": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -11713,6 +12108,28 @@
       "integrity": "sha512-aJeQQ+Hl9Jyyzv4chBqYJwmVRY46N5i2BEX5Cuyk/5gFCUZ5F3i7Hnba6snZftWla7Gglwc5pIgcd+E7cW+rPg==",
       "dev": true
     },
+    "element-plus": {
+      "version": "2.2.19",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.19.tgz",
+      "integrity": "sha512-uN0gt9lUus/IHzu5J6vkbYoYJgUtU05osdtFv9RO27bHKOG5GN7dH6uA3OKfkQQ6R2sV8ZxY1rc9PH1X8Dgrow==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.6",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -11945,8 +12362,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -12467,6 +12883,12 @@
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -12909,9 +13331,9 @@
       "dev": true
     },
     "jsonc-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.1.0.tgz",
-      "integrity": "sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
     "jsonfile": {
@@ -12960,8 +13382,18 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "lodash-unified": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
+      "requires": {}
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -13037,9 +13469,9 @@
       }
     },
     "magic-string": {
-      "version": "0.26.6",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.6.tgz",
-      "integrity": "sha512-6d+3bFybzyQFJYSoRsl9ZC0wheze8M1LrQC7tNMRqXR4izUTDOLMd9BtSuExK9iAukFh+s5K0WAhc/dlQ+HKYA==",
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+      "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
       "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.8"
@@ -13063,6 +13495,11 @@
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "dev": true
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -13139,6 +13576,18 @@
         "brace-expansion": "^2.0.1"
       }
     },
+    "mlly": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.16.tgz",
+      "integrity": "sha512-LaJ8yuh4v0zEmge/g3c7jjFlhoCPfQn6RCjXgm9A0Qiuochq4BcuOxVfWmdnCoLTlg2MV+hqhOek+W2OhG0Lwg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.0",
+        "pathe": "^0.3.8",
+        "pkg-types": "^0.3.5",
+        "ufo": "^0.8.5"
+      }
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -13186,6 +13635,11 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -13405,9 +13859,9 @@
       "dev": true
     },
     "pathe": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.8.tgz",
-      "integrity": "sha512-c71n61F1skhj/jzZe+fWE9XDoTYjWbUwIKVwFftZ5IOgiX44BVkTkD+/803YDgR50tqeO4eXWxLyVHBLWQAD1g==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.9.tgz",
+      "integrity": "sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==",
       "dev": true
     },
     "perfect-debounce": {
@@ -13427,6 +13881,17 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pkg-types": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-0.3.5.tgz",
+      "integrity": "sha512-VkxCBFVgQhNHYk9subx+HOhZ4jzynH11ah63LZsprTKwPCWG9pfWBlkElWFbvkP9BVR0dP1jS9xPdhaHQNK74Q==",
+      "dev": true,
+      "requires": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^0.5.14",
+        "pathe": "^0.3.7"
+      }
+    },
     "postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -13732,6 +14197,23 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "scule": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-0.3.2.tgz",
+      "integrity": "sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==",
+      "dev": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14050,6 +14532,15 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "strip-literal": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-0.4.2.tgz",
+      "integrity": "sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -14280,6 +14771,62 @@
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "dev": true
     },
+    "unimport": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.7.0.tgz",
+      "integrity": "sha512-Cr0whz4toYVid3JHlni/uThwavDVVCk6Zw0Gxnol1c7DprTA+Isr4T+asO6rDGkhkgV7r3vSdSs5Ym8F15JA+w==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.2",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.7",
+        "mlly": "^0.5.16",
+        "pathe": "^0.3.9",
+        "pkg-types": "^0.3.5",
+        "scule": "^0.3.2",
+        "strip-literal": "^0.4.2",
+        "unplugin": "^0.10.2"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+          "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "^1.0.0",
+            "estree-walker": "^2.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "@types/estree": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+          "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+          "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+          "dev": true
+        },
+        "unplugin": {
+          "version": "0.10.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.10.2.tgz",
+          "integrity": "sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.8.0",
+            "chokidar": "^3.5.3",
+            "webpack-sources": "^3.2.3",
+            "webpack-virtual-modules": "^0.4.5"
+          }
+        }
+      }
+    },
     "unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -14338,6 +14885,57 @@
         "webpack-virtual-modules": "^0.4.5"
       }
     },
+    "unplugin-auto-import": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.11.4.tgz",
+      "integrity": "sha512-lh/bRDRYwgnb9Cm5ur8TlTMGxA1GRZvgzCvBIf0vyuVRy7ebWcWefFElpUDpr8vLl+ZRGsPVCOGiYJ8TCR625Q==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.6.0",
+        "@rollup/pluginutils": "^5.0.2",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.7",
+        "unimport": "^0.7.0",
+        "unplugin": "^0.10.2"
+      },
+      "dependencies": {
+        "@antfu/utils": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.6.0.tgz",
+          "integrity": "sha512-VauUKmo22NYo3y6fIjGjVU7LJyhaedYL9kyabdvIIIl7P+qbNPbQiaLwwk4UOU4McFfA2eg+aIWpEYhkHzsE9Q==",
+          "dev": true
+        },
+        "@rollup/pluginutils": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+          "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "^1.0.0",
+            "estree-walker": "^2.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "@types/estree": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+          "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+          "dev": true
+        },
+        "unplugin": {
+          "version": "0.10.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.10.2.tgz",
+          "integrity": "sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.8.0",
+            "chokidar": "^3.5.3",
+            "webpack-sources": "^3.2.3",
+            "webpack-virtual-modules": "^0.4.5"
+          }
+        }
+      }
+    },
     "unplugin-vue-components": {
       "version": "0.22.8",
       "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.22.8.tgz",
diff --git a/docs/package.json b/docs/package.json
index 6721af1dda..ec84988d12 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.3.0",
+    "date-fns": "^2.29.3",
+    "element-plus": "^2.2.19",
     "vue": "^3.2.40"
   },
   "devDependencies": {
@@ -24,7 +26,9 @@
     "esno": "^0.16.3",
     "fast-glob": "^3.2.12",
     "https-localhost": "^4.7.1",
+    "sass": "^1.55.0",
     "unocss": "^0.45.26",
+    "unplugin-auto-import": "^0.11.4",
     "unplugin-vue-components": "^0.22.8",
     "vite-plugin-pwa": "^0.13.1",
     "vitepress": "^1.0.0-alpha.19",
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index ca13741986..5776a022e9 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,6 +1,7 @@
 import fs from 'fs'
 import type { Plugin } from 'vite'
 import { defineConfig } from 'vite'
+import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import Unocss from 'unocss/vite'
 import transformerDirective from '@unocss/transformer-directives'
@@ -14,9 +15,10 @@ import {
   pwaFontsRegex,
   feathersDescription,
   feathersName,
-  feathersShortName,
+  feathersShortName
 } from './.vitepress/meta'
 import { optimizePages } from './.vitepress/scripts/assets'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 const PWA = VitePWA({
   outDir: '.vitepress/dist',
@@ -33,20 +35,20 @@ const PWA = VitePWA({
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
-        type: 'image/png',
+        type: 'image/png'
       },
       {
         src: 'pwa-512x512.png',
         sizes: '512x512',
-        type: 'image/png',
+        type: 'image/png'
       },
       {
         src: 'logo.svg',
         sizes: '165x165',
         type: 'image/svg',
-        purpose: 'any maskable',
-      },
-    ],
+        purpose: 'any maskable'
+      }
+    ]
   },
   workbox: {
     navigateFallbackDenylist: [/^\/new$/],
@@ -58,12 +60,12 @@ const PWA = VitePWA({
           cacheName: 'google-fonts-cache',
           expiration: {
             maxEntries: 10,
-            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+            maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
           },
           cacheableResponse: {
-            statuses: [0, 200],
-          },
-        },
+            statuses: [0, 200]
+          }
+        }
       },
       {
         urlPattern: pwaFontStylesRegex,
@@ -72,37 +74,44 @@ const PWA = VitePWA({
           cacheName: 'gstatic-fonts-cache',
           expiration: {
             maxEntries: 10,
-            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+            maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
           },
           cacheableResponse: {
-            statuses: [0, 200],
-          },
-        },
-      },
-    ],
-  },
+            statuses: [0, 200]
+          }
+        }
+      }
+    ]
+  }
 })
 
 export default defineConfig({
   plugins: [
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
     Components({
       include: [/\.vue/, /\.md/],
       dirs: '.vitepress/components',
       dts: '.vitepress/components.d.ts',
+      resolvers: [ElementPlusResolver({ ssr: false })]
     }),
     Unocss({
       shortcuts: [
-        ['btn', 'px-4 py-1 rounded inline-flex justify-center gap-2 text-white leading-30px children:mya !no-underline cursor-pointer disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+        [
+          'btn',
+          'px-4 py-1 rounded inline-flex justify-center gap-2 text-white leading-30px children:mya !no-underline cursor-pointer disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'
+        ]
       ],
       presets: [
         presetUno({
-          dark: 'media',
+          dark: 'media'
         }),
         presetAttributify(),
         presetIcons({
-          scale: 1.2,
+          scale: 1.2
         }),
-        presetTypography(),
+        presetTypography()
       ],
       transformers: [transformerDirective()]
     }),
@@ -112,14 +121,14 @@ export default defineConfig({
       name: 'pwa:post',
       enforce: 'post',
       async buildEnd() {
-        const pwaPlugin: VitePluginPWAAPI = PWA.find(i => i.name === 'vite-plugin-pwa')?.api
+        const pwaPlugin: VitePluginPWAAPI = PWA.find((i) => i.name === 'vite-plugin-pwa')?.api
         const pwa = pwaPlugin && !pwaPlugin.disabled
         await optimizePages(pwa)
-        if (pwa)
-          await pwaPlugin.generateSW()
-      },
-    },
+        if (pwa) await pwaPlugin.generateSW()
+      }
+    }
   ],
+  ssr: { noExternal: ['element-plus'] }
 })
 
 function IncludesPlugin(): Plugin {
@@ -133,8 +142,7 @@ function IncludesPlugin(): Plugin {
         const full = resolve(id, url)
         return fs.readFileSync(full, 'utf-8')
       })
-      if (changed)
-        return code
-    },
+      if (changed) return code
+    }
   }
 }