diff --git a/apps/admin/package.json b/apps/admin/package.json
index e778b6a..b0549f2 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -56,7 +56,7 @@
     "@vueuse/core": "^9.13.0",
     "@vueuse/shared": "^9.13.0",
     "@zxcvbn-ts/core": "^2.2.1",
-    "ant-design-vue": "^3.2.20",
+    "ant-design-vue": "^4.0.6",
     "axios": "^1.6.0",
     "codemirror": "^5.65.15",
     "cropperjs": "^1.6.1",
@@ -71,6 +71,7 @@
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "2.0.33",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
@@ -124,4 +125,4 @@
     "node": ">=16.15.1",
     "pnpm": ">=8.1.0"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/admin/src/App.vue b/apps/admin/src/App.vue
index a4d2e80..303d31a 100644
--- a/apps/admin/src/App.vue
+++ b/apps/admin/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider :locale="getAntdLocale">
+  <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -11,11 +11,15 @@
   import { AppProvider } from '@/components/Application';
   import { useTitle } from '@/hooks/web/useTitle';
   import { useLocale } from '@/locales/useLocale';
+
   import 'dayjs/locale/zh-cn';
+  import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
 
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
+  const { isDark, darkTheme } = useDarkModeTheme();
+
   // Listening to page changes and dynamically changing site titles
   useTitle();
 </script>
diff --git a/apps/admin/src/components/Application/src/AppDarkModeToggle.vue b/apps/admin/src/components/Application/src/AppDarkModeToggle.vue
index af1ea4a..6ab8c40 100644
--- a/apps/admin/src/components/Application/src/AppDarkModeToggle.vue
+++ b/apps/admin/src/components/Application/src/AppDarkModeToggle.vue
@@ -6,71 +6,71 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, unref } from 'vue';
-import { SvgIcon } from '/@/components/Icon';
-import { useDesign } from '/@/hooks/web/useDesign';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
-import { updateDarkTheme } from '/@/logics/theme/dark';
-import { ThemeEnum } from '/@/enums/appEnum';
+  import { computed, unref } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+  import { updateDarkTheme } from '/@/logics/theme/dark';
+  import { ThemeEnum } from '/@/enums/appEnum';
 
-const { prefixCls } = useDesign('dark-switch');
-const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
+  const { prefixCls } = useDesign('dark-switch');
+  const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
 
-const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
 
-const getClass = computed(() => [
-  prefixCls,
-  {
-    [`${prefixCls}--dark`]: unref(isDark),
-  },
-]);
+  const getClass = computed(() => [
+    prefixCls,
+    {
+      [`${prefixCls}--dark`]: unref(isDark),
+    },
+  ]);
 
-function toggleDarkMode() {
-  const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
-  setDarkMode(darkMode);
-  updateDarkTheme(darkMode);
-  updateHeaderBgColor();
-  updateSidebarBgColor();
-}
+  function toggleDarkMode() {
+    const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+    setDarkMode(darkMode);
+    updateDarkTheme(darkMode);
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  }
 </script>
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-dark-switch';
+  @prefix-cls: ~'@{namespace}-dark-switch';
 
-html[data-theme='dark'] {
-  .@{prefix-cls} {
-    border: 1px solid rgb(196 188 188);
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      border: 1px solid rgb(196 188 188);
+    }
   }
-}
 
-.@{prefix-cls} {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  width: 50px;
-  height: 26px;
-  margin-left: auto;
-  padding: 0 6px;
-  border-radius: 30px;
-  background-color: #151515;
-  cursor: pointer;
+  .@{prefix-cls} {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+    width: 50px;
+    height: 26px;
+    margin-left: auto;
+    padding: 0 6px;
+    border-radius: 30px;
+    background-color: #151515;
+    cursor: pointer;
 
-  &-inner {
-    position: absolute;
-    z-index: 1;
-    width: 18px;
-    height: 18px;
-    transition: transform 0.5s, background-color 0.5s;
-    border-radius: 50%;
-    background-color: #fff;
-    will-change: transform;
-  }
+    &-inner {
+      position: absolute;
+      z-index: 1;
+      width: 18px;
+      height: 18px;
+      transition: transform 0.5s, background-color 0.5s;
+      border-radius: 50%;
+      background-color: #fff;
+      will-change: transform;
+    }
 
-  &--dark {
-    .@{prefix-cls}-inner {
-      transform: translateX(calc(100% + 2px));
+    &--dark {
+      .@{prefix-cls}-inner {
+        transform: translateX(calc(100% + 2px));
+      }
     }
   }
-}
 </style>
diff --git a/apps/admin/src/components/Button/src/BasicButton.vue b/apps/admin/src/components/Button/src/BasicButton.vue
index 19e6dbb..b8cfcaa 100644
--- a/apps/admin/src/components/Button/src/BasicButton.vue
+++ b/apps/admin/src/components/Button/src/BasicButton.vue
@@ -1,5 +1,8 @@
 <template>
   <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
+    <template #icon>
+      <slot name="icon"></slot>
+    </template>
     <template #default="data">
       <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
       <slot v-bind="data || {}"></slot>
@@ -10,14 +13,14 @@
 
 <script lang="ts" setup>
   import { Button } from 'ant-design-vue';
-  import { computed, unref } from 'vue';
+  import { ComponentOptionsMixin, computed, unref } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { buttonProps } from './props';
   import { useAttrs } from '@vben/hooks';
 
   defineOptions({
     name: 'AButton',
-    extends: Button,
+    extends: Button as ComponentOptionsMixin,
     inheritAttrs: false,
   });
 
diff --git a/apps/admin/src/components/Button/src/props.ts b/apps/admin/src/components/Button/src/props.ts
index 3190d2c..fd5fa52 100644
--- a/apps/admin/src/components/Button/src/props.ts
+++ b/apps/admin/src/components/Button/src/props.ts
@@ -22,5 +22,5 @@ export const buttonProps = {
    * @default: 14
    */
   iconSize: { type: Number, default: 14 },
-  onClick: { type: Function as PropType<(...args) => any>, default: null },
+  onClick: { type: [Function, Array] as PropType<(() => any) | (() => any)[]>, default: null },
 };
diff --git a/apps/admin/src/components/CardList/src/CardList.vue b/apps/admin/src/components/CardList/src/CardList.vue
index 083545f..efa8e43 100644
--- a/apps/admin/src/components/CardList/src/CardList.vue
+++ b/apps/admin/src/components/CardList/src/CardList.vue
@@ -39,8 +39,7 @@
                 </div>
               </template>
               <template #actions>
-                <!--              <SettingOutlined key="setting" />-->
-                <EditOutlined key="edit" />
+                <EditOutlined />
                 <Dropdown
                   :trigger="['hover']"
                   :dropMenuList="[
@@ -55,13 +54,13 @@
                   ]"
                   popconfirm
                 >
-                  <EllipsisOutlined key="ellipsis" />
+                  <EllipsisOutlined />
                 </Dropdown>
               </template>
 
               <CardMeta>
                 <template #title>
-                  <TypographyText :content="item.name" :ellipsis="{ tooltip: item.address }" />
+                  <TypographyParagraph :content="item.name" :ellipsis="{ tooltip: item.address }" />
                 </template>
                 <template #avatar>
                   <Avatar :src="item.avatar" />
@@ -93,7 +92,7 @@
 
   const ListItem = List.Item;
   const CardMeta = Card.Meta;
-  const TypographyText = Typography.Text;
+  const TypographyParagraph = Typography.Paragraph;
   // 获取slider属性
   const sliderProp = computed(() => useSlider(4));
   // 组件接收参数
@@ -157,22 +156,22 @@
     pageSize,
     current: page,
     total,
-    showTotal: (total) => `总 ${total} 条`,
+    showTotal: (total: number) => `总 ${total} 条`,
     onChange: pageChange,
     onShowSizeChange: pageSizeChange,
   });
 
-  function pageChange(p, pz) {
+  function pageChange(p: number, pz: number) {
     page.value = p;
     pageSize.value = pz;
     fetch();
   }
-  function pageSizeChange(_current, size) {
+  function pageSizeChange(_current, size: number) {
     pageSize.value = size;
     fetch();
   }
 
-  async function handleDelete(id) {
+  async function handleDelete(id: number) {
     emit('delete', id);
   }
 </script>
diff --git a/apps/admin/src/components/CodeEditor/src/CodeEditor.vue b/apps/admin/src/components/CodeEditor/src/CodeEditor.vue
index db9042b..37ab7db 100644
--- a/apps/admin/src/components/CodeEditor/src/CodeEditor.vue
+++ b/apps/admin/src/components/CodeEditor/src/CodeEditor.vue
@@ -5,6 +5,7 @@
       @change="handleValueChange"
       :mode="mode"
       :readonly="readonly"
+      :bordered="bordered"
     />
   </div>
 </template>
@@ -26,6 +27,7 @@
     },
     readonly: { type: Boolean },
     autoFormat: { type: Boolean, default: true },
+    bordered: { type: Boolean, default: false },
   });
 
   const emit = defineEmits(['change', 'update:value', 'format-error']);
diff --git a/apps/admin/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/apps/admin/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index af3017f..f7c5750 100644
--- a/apps/admin/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/apps/admin/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="relative !h-full w-full overflow-hidden" ref="el"></div>
+  <div
+    class="relative !h-full w-full overflow-hidden"
+    :class="{ 'ant-input': props.bordered, 'css-dev-only-do-not-override-kqecok': props.bordered }"
+    ref="el"
+  ></div>
 </template>
 
 <script lang="ts" setup>
@@ -39,6 +43,7 @@
     },
     value: { type: String, default: '' },
     readonly: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
   });
 
   const emit = defineEmits(['change']);
diff --git a/apps/admin/src/components/Container/src/ScrollContainer.vue b/apps/admin/src/components/Container/src/ScrollContainer.vue
index ca19003..2580eec 100644
--- a/apps/admin/src/components/Container/src/ScrollContainer.vue
+++ b/apps/admin/src/components/Container/src/ScrollContainer.vue
@@ -1,5 +1,10 @@
 <template>
-  <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
+  <Scrollbar
+    ref="scrollbarRef"
+    class="scroll-container"
+    :scrollHeight="scrollHeight"
+    v-bind="$attrs"
+  >
     <slot></slot>
   </Scrollbar>
 </template>
@@ -13,6 +18,9 @@
   export default defineComponent({
     name: 'ScrollContainer',
     components: { Scrollbar },
+    props: {
+      scrollHeight: { type: Number },
+    },
     setup() {
       const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 
diff --git a/apps/admin/src/components/ContextMenu/src/ContextMenu.vue b/apps/admin/src/components/ContextMenu/src/ContextMenu.vue
index 823b90e..fcf6fcb 100644
--- a/apps/admin/src/components/ContextMenu/src/ContextMenu.vue
+++ b/apps/admin/src/components/ContextMenu/src/ContextMenu.vue
@@ -59,12 +59,12 @@
         const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
         const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
         return {
-          ...styles,
           position: 'absolute',
           width: `${width}px`,
           left: `${left + 1}px`,
           top: `${top + 1}px`,
           zIndex: 9999,
+          ...styles, // Not the first, fix options.styles.width not working
         };
       });
 
@@ -127,11 +127,15 @@
         }
         const { items } = props;
         return (
-          <div class={prefixCls}>
-            <Menu inlineIndent={12} mode="vertical" ref={wrapRef} style={unref(getStyle)}>
-              {renderMenuItem(items)}
-            </Menu>
-          </div>
+          <Menu
+            inlineIndent={12}
+            mode="vertical"
+            class={prefixCls}
+            ref={wrapRef}
+            style={unref(getStyle)}
+          >
+            {renderMenuItem(items)}
+          </Menu>
         );
       };
     },
@@ -147,7 +151,7 @@
   .item-style() {
     li {
       display: inline-block;
-      width: 100%;
+      width: 100% !important;
       height: @default-height;
       margin: 0 !important;
       line-height: @default-height;
@@ -157,6 +161,8 @@
       }
 
       > div {
+        width: 100% !important;
+        height: 100% !important;
         margin: 0 !important;
       }
 
@@ -176,10 +182,12 @@
     width: 156px;
     margin: 0;
     border: 1px solid rgb(0 0 0 / 8%);
-    border-radius: 0.25rem;
+    border-radius: 8px;
     background-clip: padding-box;
     background-color: @component-background;
-    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+    box-shadow:
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 3px 1px -2px rgb(0 0 0 / 10%),
       0 1px 5px 0 rgb(0 0 0 / 6%);
     list-style: none;
     user-select: none;
diff --git a/apps/admin/src/components/Cropper/src/CropperAvatar.vue b/apps/admin/src/components/Cropper/src/CropperAvatar.vue
index 23a82bb..ee15757 100644
--- a/apps/admin/src/components/Cropper/src/CropperAvatar.vue
+++ b/apps/admin/src/components/Cropper/src/CropperAvatar.vue
@@ -20,11 +20,12 @@
       {{ btnText ? btnText : t('component.cropper.selectImage') }}
     </a-button>
 
-    <CopperModal
+    <CropperModal
       @register="register"
       @upload-success="handleUploadSuccess"
       :uploadApi="uploadApi"
       :src="sourceValue"
+      :size="size"
     />
   </div>
 </template>
@@ -39,7 +40,7 @@
     watch,
     PropType,
   } from 'vue';
-  import CopperModal from './CopperModal.vue';
+  import CropperModal from './CropperModal.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -53,12 +54,16 @@
     showBtn: { type: Boolean, default: true },
     btnProps: { type: Object as PropType<ButtonProps> },
     btnText: { type: String, default: '' },
-    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
+    uploadApi: {
+      type: Function as PropType<({ file, name }: { file: Blob; name: string }) => Promise<void>>,
+    },
+
+    size: { type: Number, default: 5 },
   };
 
   export default defineComponent({
     name: 'CropperAvatar',
-    components: { CopperModal, Icon },
+    components: { CropperModal, Icon },
     props,
     emits: ['update:value', 'change'],
     setup(props, { emit, expose }) {
diff --git a/apps/admin/src/components/Cropper/src/CopperModal.vue b/apps/admin/src/components/Cropper/src/CropperModal.vue
similarity index 93%
rename from apps/admin/src/components/Cropper/src/CopperModal.vue
rename to apps/admin/src/components/Cropper/src/CropperModal.vue
index 3bc0b77..311a46e 100644
--- a/apps/admin/src/components/Cropper/src/CopperModal.vue
+++ b/apps/admin/src/components/Cropper/src/CropperModal.vue
@@ -1,284 +1,289 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    :title="t('component.cropper.modalTitle')"
-    width="800px"
-    :canFullscreen="false"
-    @ok="handleOk"
-    :okText="t('component.cropper.okText')"
-  >
-    <div :class="prefixCls">
-      <div :class="`${prefixCls}-left`">
-        <div :class="`${prefixCls}-cropper`">
-          <CropperImage
-            v-if="src"
-            :src="src"
-            height="300px"
-            :circled="circled"
-            @cropend="handleCropend"
-            @ready="handleReady"
-          />
-        </div>
-
-        <div :class="`${prefixCls}-toolbar`">
-          <Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
-            <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
-              <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
-            </Tooltip>
-          </Upload>
-          <Space>
-            <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:reload-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('reset')"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:rotate-left-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('rotate', -45)"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:rotate-right-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('rotate', 45)"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="vaadin:arrows-long-h"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('scaleX')"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="vaadin:arrows-long-v"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('scaleY')"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:zoom-in-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('zoom', 0.1)"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:zoom-out-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('zoom', -0.1)"
-              />
-            </Tooltip>
-          </Space>
-        </div>
-      </div>
-      <div :class="`${prefixCls}-right`">
-        <div :class="`${prefixCls}-preview`">
-          <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
-        </div>
-        <template v-if="previewSource">
-          <div :class="`${prefixCls}-group`">
-            <Avatar :src="previewSource" size="large" />
-            <Avatar :src="previewSource" :size="48" />
-            <Avatar :src="previewSource" :size="64" />
-            <Avatar :src="previewSource" :size="80" />
-          </div>
-        </template>
-      </div>
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import type { CropendResult, Cropper } from './typing';
-
-  import { defineComponent, ref, PropType } from 'vue';
-  import CropperImage from './Cropper.vue';
-  import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { dataURLtoBlob } from '/@/utils/file/base64Conver';
-  import { isFunction } from '/@/utils/is';
-  import { useI18n } from '/@/hooks/web/useI18n';
-
-  type apiFunParams = { file: Blob; name: string; filename: string };
-
-  const props = {
-    circled: { type: Boolean, default: true },
-    uploadApi: {
-      type: Function as PropType<(params: apiFunParams) => Promise<any>>,
-    },
-    src: { type: String },
-  };
-
-  export default defineComponent({
-    name: 'CropperModal',
-    components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
-    props,
-    emits: ['uploadSuccess', 'register'],
-    setup(props, { emit }) {
-      let filename = '';
-      const src = ref(props.src || '');
-      const previewSource = ref('');
-      const cropper = ref<Cropper>();
-      let scaleX = 1;
-      let scaleY = 1;
-
-      const { prefixCls } = useDesign('cropper-am');
-      const [register, { closeModal, setModalProps }] = useModalInner();
-      const { t } = useI18n();
-
-      // Block upload
-      function handleBeforeUpload(file: File) {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        src.value = '';
-        previewSource.value = '';
-        reader.onload = function (e) {
-          src.value = (e.target?.result as string) ?? '';
-          filename = file.name;
-        };
-        return false;
-      }
-
-      function handleCropend({ imgBase64 }: CropendResult) {
-        previewSource.value = imgBase64;
-      }
-
-      function handleReady(cropperInstance: Cropper) {
-        cropper.value = cropperInstance;
-      }
-
-      function handlerToolbar(event: string, arg?: number) {
-        if (event === 'scaleX') {
-          scaleX = arg = scaleX === -1 ? 1 : -1;
-        }
-        if (event === 'scaleY') {
-          scaleY = arg = scaleY === -1 ? 1 : -1;
-        }
-        cropper?.value?.[event]?.(arg);
-      }
-
-      async function handleOk() {
-        const uploadApi = props.uploadApi;
-        if (uploadApi && isFunction(uploadApi)) {
-          const blob = dataURLtoBlob(previewSource.value);
-          try {
-            setModalProps({ confirmLoading: true });
-            const result = await uploadApi({ name: 'file', file: blob, filename });
-            emit('uploadSuccess', { source: previewSource.value, data: result.url });
-            closeModal();
-          } finally {
-            setModalProps({ confirmLoading: false });
-          }
-        }
-      }
-
-      return {
-        t,
-        prefixCls,
-        src,
-        register,
-        previewSource,
-        handleBeforeUpload,
-        handleCropend,
-        handleReady,
-        handlerToolbar,
-        handleOk,
-      };
-    },
-  });
-</script>
-
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-cropper-am';
-
-  .@{prefix-cls} {
-    display: flex;
-
-    &-left,
-    &-right {
-      height: 340px;
-    }
-
-    &-left {
-      width: 55%;
-    }
-
-    &-right {
-      width: 45%;
-    }
-
-    &-cropper {
-      height: 300px;
-      background: #eee;
-      background-image: linear-gradient(
-          45deg,
-          rgb(0 0 0 / 25%) 25%,
-          transparent 0,
-          transparent 75%,
-          rgb(0 0 0 / 25%) 0
-        ),
-        linear-gradient(
-          45deg,
-          rgb(0 0 0 / 25%) 25%,
-          transparent 0,
-          transparent 75%,
-          rgb(0 0 0 / 25%) 0
-        );
-      background-position: 0 0, 12px 12px;
-      background-size: 24px 24px;
-    }
-
-    &-toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 10px;
-    }
-
-    &-preview {
-      width: 220px;
-      height: 220px;
-      margin: 0 auto;
-      overflow: hidden;
-      border: 1px solid @border-color-base;
-      border-radius: 50%;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    &-group {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px solid @border-color-base;
-    }
-  }
-</style>
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="t('component.cropper.modalTitle')"
+    width="800px"
+    :canFullscreen="false"
+    @ok="handleOk"
+    :okText="t('component.cropper.okText')"
+  >
+    <div :class="prefixCls">
+      <div :class="`${prefixCls}-left`">
+        <div :class="`${prefixCls}-cropper`">
+          <CropperImage
+            v-if="src"
+            :src="src"
+            height="300px"
+            :circled="circled"
+            @cropend="handleCropend"
+            @ready="handleReady"
+          />
+        </div>
+
+        <div :class="`${prefixCls}-toolbar`">
+          <Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
+            <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
+              <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:reload-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('reset')"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:rotate-left-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('rotate', -45)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:rotate-right-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('rotate', 45)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="vaadin:arrows-long-h"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('scaleX')"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="vaadin:arrows-long-v"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('scaleY')"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:zoom-in-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('zoom', 0.1)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:zoom-out-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('zoom', -0.1)"
+              />
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+      <div :class="`${prefixCls}-right`">
+        <div :class="`${prefixCls}-preview`">
+          <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
+        </div>
+        <template v-if="previewSource">
+          <div :class="`${prefixCls}-group`">
+            <Avatar :src="previewSource" size="large" />
+            <Avatar :src="previewSource" :size="48" />
+            <Avatar :src="previewSource" :size="64" />
+            <Avatar :src="previewSource" :size="80" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import type { CropendResult, Cropper } from './typing';
+
+  import { defineComponent, ref, PropType } from 'vue';
+  import CropperImage from './Cropper.vue';
+  import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { dataURLtoBlob } from '/@/utils/file/base64Conver';
+  import { isFunction } from '/@/utils/is';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  type apiFunParams = { file: Blob; name: string; filename: string };
+
+  const props = {
+    circled: { type: Boolean, default: true },
+    uploadApi: {
+      type: Function as PropType<(params: apiFunParams) => Promise<any>>,
+    },
+    src: { type: String },
+    size: { type: Number },
+  };
+
+  export default defineComponent({
+    name: 'CropperModal',
+    components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
+    props,
+    emits: ['uploadSuccess', 'uploadError', 'register'],
+    setup(props, { emit }) {
+      let filename = '';
+      const src = ref(props.src || '');
+      const previewSource = ref('');
+      const cropper = ref<Cropper>();
+      let scaleX = 1;
+      let scaleY = 1;
+
+      const { prefixCls } = useDesign('cropper-am');
+      const [register, { closeModal, setModalProps }] = useModalInner();
+      const { t } = useI18n();
+
+      // Block upload
+      function handleBeforeUpload(file: File) {
+        if (props.size && file.size > 1024 * 1024 * props.size) {
+          emit('uploadError', { msg: t('component.cropper.imageTooBig') });
+          return;
+        }
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        src.value = '';
+        previewSource.value = '';
+        reader.onload = function (e) {
+          src.value = (e.target?.result as string) ?? '';
+          filename = file.name;
+        };
+        return false;
+      }
+
+      function handleCropend({ imgBase64 }: CropendResult) {
+        previewSource.value = imgBase64;
+      }
+
+      function handleReady(cropperInstance: Cropper) {
+        cropper.value = cropperInstance;
+      }
+
+      function handlerToolbar(event: string, arg?: number) {
+        if (event === 'scaleX') {
+          scaleX = arg = scaleX === -1 ? 1 : -1;
+        }
+        if (event === 'scaleY') {
+          scaleY = arg = scaleY === -1 ? 1 : -1;
+        }
+        cropper?.value?.[event]?.(arg);
+      }
+
+      async function handleOk() {
+        const uploadApi = props.uploadApi;
+        if (uploadApi && isFunction(uploadApi)) {
+          const blob = dataURLtoBlob(previewSource.value);
+          try {
+            setModalProps({ confirmLoading: true });
+            const result = await uploadApi({ name: 'file', file: blob, filename });
+            emit('uploadSuccess', { source: previewSource.value, data: result.url });
+            closeModal();
+          } finally {
+            setModalProps({ confirmLoading: false });
+          }
+        }
+      }
+
+      return {
+        t,
+        prefixCls,
+        src,
+        register,
+        previewSource,
+        handleBeforeUpload,
+        handleCropend,
+        handleReady,
+        handlerToolbar,
+        handleOk,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-cropper-am';
+
+  .@{prefix-cls} {
+    display: flex;
+
+    &-left,
+    &-right {
+      height: 340px;
+    }
+
+    &-left {
+      width: 55%;
+    }
+
+    &-right {
+      width: 45%;
+    }
+
+    &-cropper {
+      height: 300px;
+      background: #eee;
+      background-image: linear-gradient(
+          45deg,
+          rgb(0 0 0 / 25%) 25%,
+          transparent 0,
+          transparent 75%,
+          rgb(0 0 0 / 25%) 0
+        ),
+        linear-gradient(
+          45deg,
+          rgb(0 0 0 / 25%) 25%,
+          transparent 0,
+          transparent 75%,
+          rgb(0 0 0 / 25%) 0
+        );
+      background-position: 0 0, 12px 12px;
+      background-size: 24px 24px;
+    }
+
+    &-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 10px;
+    }
+
+    &-preview {
+      width: 220px;
+      height: 220px;
+      margin: 0 auto;
+      overflow: hidden;
+      border: 1px solid @border-color-base;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-group {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px solid @border-color-base;
+    }
+  }
+</style>
diff --git a/apps/admin/src/components/Drawer/src/BasicDrawer.vue b/apps/admin/src/components/Drawer/src/BasicDrawer.vue
index 6f6f631..29e5dd0 100644
--- a/apps/admin/src/components/Drawer/src/BasicDrawer.vue
+++ b/apps/admin/src/components/Drawer/src/BasicDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <Drawer :class="prefixCls" @close="onClose" v-bind="getBindValues">
+  <Drawer v-bind="getBindValues" :class="prefixCls" @close="onClose">
     <template #title v-if="!$slots.title">
       <DrawerHeader
         :title="getMergeProps.title"
@@ -58,9 +58,9 @@
     components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
     inheritAttrs: false,
     props: basicProps,
-    emits: ['visible-change', 'ok', 'close', 'register'],
+    emits: ['open-change', 'ok', 'close', 'register'],
     setup(props, { emit }) {
-      const visibleRef = ref(false);
+      const openRef = ref(false);
       const attrs = useAttrs();
       const propsRef = ref<Partial<DrawerProps | null>>(null);
 
@@ -69,7 +69,7 @@
 
       const drawerInstance: DrawerInstance = {
         setDrawerProps: setDrawerProps as any,
-        emitVisible: undefined,
+        emitOpen: undefined,
       };
 
       const instance = getCurrentInstance();
@@ -85,7 +85,7 @@
           placement: 'right',
           ...unref(attrs),
           ...unref(getMergeProps),
-          visible: unref(visibleRef),
+          open: unref(openRef),
         };
         opt.title = undefined;
         const { isDetail, width, wrapClassName, getContainer } = opt;
@@ -94,11 +94,10 @@
             opt.width = '100%';
           }
           const detailCls = `${prefixCls}__detail`;
-          opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
+          opt.rootClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
 
           if (!getContainer) {
-            // TODO type error?
-            opt.getContainer = `.${prefixVar}-layout-content` as any;
+            opt.getContainer = `.${prefixVar}-layout-content`;
           }
         }
         return opt as DrawerProps;
@@ -135,19 +134,19 @@
       });
 
       watch(
-        () => props.visible,
+        () => props.open,
         (newVal, oldVal) => {
-          if (newVal !== oldVal) visibleRef.value = newVal;
+          if (newVal !== oldVal) openRef.value = newVal;
         },
         { deep: true },
       );
 
       watch(
-        () => visibleRef.value,
-        (visible) => {
+        () => openRef.value,
+        (open) => {
           nextTick(() => {
-            emit('visible-change', visible);
-            instance && drawerInstance.emitVisible?.(visible, instance.uid);
+            emit('open-change', open);
+            instance && drawerInstance.emitOpen?.(open, instance.uid);
           });
         },
       );
@@ -158,18 +157,18 @@
         emit('close', e);
         if (closeFunc && isFunction(closeFunc)) {
           const res = await closeFunc();
-          visibleRef.value = !res;
+          openRef.value = !res;
           return;
         }
-        visibleRef.value = false;
+        openRef.value = false;
       }
 
       function setDrawerProps(props: Partial<DrawerProps>): void {
         // Keep the last setDrawerProps
         propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
 
-        if (Reflect.has(props, 'visible')) {
-          visibleRef.value = !!props.visible;
+        if (Reflect.has(props, 'open')) {
+          openRef.value = !!props.open;
         }
       }
 
diff --git a/apps/admin/src/components/Drawer/src/components/DrawerFooter.vue b/apps/admin/src/components/Drawer/src/components/DrawerFooter.vue
index 507b693..b39d417 100644
--- a/apps/admin/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/apps/admin/src/components/Drawer/src/components/DrawerFooter.vue
@@ -70,6 +70,7 @@
   .@{prefix-cls} {
     position: absolute;
     bottom: 0;
+    left: 0;
     width: 100%;
     padding: 0 12px 0 20px;
     border-top: 1px solid @border-color-base;
diff --git a/apps/admin/src/components/Drawer/src/props.ts b/apps/admin/src/components/Drawer/src/props.ts
index e82d998..824ec67 100644
--- a/apps/admin/src/components/Drawer/src/props.ts
+++ b/apps/admin/src/components/Drawer/src/props.ts
@@ -30,7 +30,7 @@ export const basicProps = {
   title: { type: String, default: '' },
   loadingText: { type: String },
   showDetailBack: { type: Boolean, default: true },
-  visible: { type: Boolean },
+  open: { type: Boolean },
   loading: { type: Boolean },
   maskClosable: { type: Boolean, default: true },
   getContainer: {
diff --git a/apps/admin/src/components/Drawer/src/typing.ts b/apps/admin/src/components/Drawer/src/typing.ts
index 51724a1..6880aff 100644
--- a/apps/admin/src/components/Drawer/src/typing.ts
+++ b/apps/admin/src/components/Drawer/src/typing.ts
@@ -3,23 +3,23 @@ import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
 import type { ScrollContainerOptions } from '/@/components/Container/index';
 
 export interface DrawerInstance {
-  setDrawerProps: (props: Partial<DrawerProps> | boolean) => void;
-  emitVisible?: (visible: boolean, uid: number) => void;
+  setDrawerProps: (props: Partial<DrawerProps>) => void;
+  emitOpen?: (open: boolean, uid: number) => void;
 }
 
 export interface ReturnMethods extends DrawerInstance {
-  openDrawer: <T = any>(visible?: boolean, data?: T, openOnSet?: boolean) => void;
+  openDrawer: <T = any>(open?: boolean, data?: T, openOnSet?: boolean) => void;
   closeDrawer: () => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
 }
 
-export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void;
+export type RegisterFn = (drawerInstance: DrawerInstance, uuid: number) => void;
 
 export interface ReturnInnerMethods extends DrawerInstance {
   closeDrawer: () => void;
   changeLoading: (loading: boolean) => void;
   changeOkLoading: (loading: boolean) => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
 }
 
 export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
@@ -73,7 +73,7 @@ export interface DrawerProps extends DrawerFooterProps {
   isDetail?: boolean;
   loading?: boolean;
   showDetailBack?: boolean;
-  visible?: boolean;
+  open?: boolean;
   /**
    * Built-in ScrollContainer component configuration
    * @type ScrollContainerOptions
@@ -100,7 +100,7 @@ export interface DrawerProps extends DrawerFooterProps {
    * @default 'body'
    * @type any ( HTMLElement| () => HTMLElement | string)
    */
-  getContainer?: () => HTMLElement | string;
+  getContainer?: string | false | HTMLElement | (() => HTMLElement);
 
   /**
    * Whether to show mask or not.
@@ -134,6 +134,7 @@ export interface DrawerProps extends DrawerFooterProps {
    */
   wrapClassName?: string;
   class?: string;
+  rootClassName?: string;
   /**
    * Style of wrapper element which **contains mask** compare to `drawerStyle`
    * @type object
@@ -179,7 +180,7 @@ export interface DrawerProps extends DrawerFooterProps {
    * @type string
    */
   placement?: 'top' | 'right' | 'bottom' | 'left';
-  afterVisibleChange?: (visible?: boolean) => void;
+  afterOpenChange?: (open?: boolean) => void;
   keyboard?: boolean;
   /**
    * Specify a callback that will be called when a user clicks mask, close button or Cancel button.
diff --git a/apps/admin/src/components/Drawer/src/useDrawer.ts b/apps/admin/src/components/Drawer/src/useDrawer.ts
index bcb9e76..b640b68 100644
--- a/apps/admin/src/components/Drawer/src/useDrawer.ts
+++ b/apps/admin/src/components/Drawer/src/useDrawer.ts
@@ -23,7 +23,7 @@ import { error } from '/@/utils/log';
 
 const dataTransferRef = reactive<any>({});
 
-const visibleData = reactive<{ [key: number]: boolean }>({});
+const openData = reactive<{ [key: number]: boolean }>({});
 
 /**
  * @description: Applicable to separate drawer and call outside
@@ -34,9 +34,9 @@ export function useDrawer(): UseDrawerReturnType {
   }
   const drawer = ref<DrawerInstance | null>(null);
   const loaded = ref<Nullable<boolean>>(false);
-  const uid = ref<string>('');
+  const uid = ref<number>(0);
 
-  function register(drawerInstance: DrawerInstance, uuid: string) {
+  function register(drawerInstance: DrawerInstance, uuid: number) {
     isProdMode() &&
       tryOnUnmounted(() => {
         drawer.value = null;
@@ -51,8 +51,8 @@ export function useDrawer(): UseDrawerReturnType {
     drawer.value = drawerInstance;
     loaded.value = true;
 
-    drawerInstance.emitVisible = (visible: boolean, uid: number) => {
-      visibleData[uid] = visible;
+    drawerInstance.emitOpen = (open: boolean, uid: number) => {
+      openData[uid] = open;
     };
   }
 
@@ -69,13 +69,13 @@ export function useDrawer(): UseDrawerReturnType {
       getInstance()?.setDrawerProps(props);
     },
 
-    getVisible: computed((): boolean => {
-      return visibleData[~~unref(uid)];
+    getOpen: computed((): boolean => {
+      return openData[~~unref(uid)];
     }),
 
-    openDrawer: <T = any>(visible = true, data?: T, openOnSet = true): void => {
+    openDrawer: <T = any>(open = true, data?: T, openOnSet = true): void => {
       getInstance()?.setDrawerProps({
-        visible: visible,
+        open,
       });
       if (!data) return;
 
@@ -90,7 +90,7 @@ export function useDrawer(): UseDrawerReturnType {
       }
     },
     closeDrawer: () => {
-      getInstance()?.setDrawerProps({ visible: false });
+      getInstance()?.setDrawerProps({ open: false });
     },
   };
 
@@ -100,7 +100,7 @@ export function useDrawer(): UseDrawerReturnType {
 export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
   const drawerInstanceRef = ref<Nullable<DrawerInstance>>(null);
   const currentInstance = getCurrentInstance();
-  const uidRef = ref<string>('');
+  const uidRef = ref<number>(0);
 
   if (!getCurrentInstance()) {
     throw new Error('useDrawerInner() can only be used inside setup() or functional components!');
@@ -115,7 +115,7 @@ export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
     return instance;
   };
 
-  const register = (modalInstance: DrawerInstance, uuid: string) => {
+  const register = (modalInstance: DrawerInstance, uuid: number) => {
     isProdMode() &&
       tryOnUnmounted(() => {
         drawerInstanceRef.value = null;
@@ -145,12 +145,12 @@ export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
       changeOkLoading: (loading = true) => {
         getInstance()?.setDrawerProps({ confirmLoading: loading });
       },
-      getVisible: computed((): boolean => {
-        return visibleData[~~unref(uidRef)];
+      getOpen: computed((): boolean => {
+        return openData[~~unref(uidRef)];
       }),
 
       closeDrawer: () => {
-        getInstance()?.setDrawerProps({ visible: false });
+        getInstance()?.setDrawerProps({ open: false });
       },
 
       setDrawerProps: (props: Partial<DrawerProps>) => {
diff --git a/apps/admin/src/components/Dropdown/src/Dropdown.vue b/apps/admin/src/components/Dropdown/src/Dropdown.vue
index e598b6a..973a7a3 100644
--- a/apps/admin/src/components/Dropdown/src/Dropdown.vue
+++ b/apps/admin/src/components/Dropdown/src/Dropdown.vue
@@ -14,6 +14,7 @@
             <a-popconfirm
               v-if="popconfirm && item.popConfirm"
               v-bind="getPopConfirmAttrs(item.popConfirm)"
+              :disabled="item.disabled"
             >
               <template #icon v-if="item.popConfirm.icon">
                 <Icon :icon="item.popConfirm.icon" />
diff --git a/apps/admin/src/components/EllipsisText/index.ts b/apps/admin/src/components/EllipsisText/index.ts
new file mode 100644
index 0000000..35f9fd1
--- /dev/null
+++ b/apps/admin/src/components/EllipsisText/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils';
+import ellipsisText from './src/EllipsisText.vue';
+
+export const EllipsisText = withInstall(ellipsisText);
diff --git a/apps/admin/src/components/EllipsisText/src/EllipsisText.vue b/apps/admin/src/components/EllipsisText/src/EllipsisText.vue
new file mode 100644
index 0000000..9cd5de5
--- /dev/null
+++ b/apps/admin/src/components/EllipsisText/src/EllipsisText.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+  import { ref, computed, watchEffect, nextTick } from 'vue';
+  import type { CSSProperties } from 'vue';
+  import Tooltip from './Tooltip.vue';
+
+  interface Props {
+    maxWidth?: number | string; // 文本最大宽度
+    line?: number; // 最大行数
+    expand?: boolean; // 是否启用点击文本展开全部
+    tooltip?: boolean; // 是否启用文本提示框
+    // 以下均为 tooltip 组件属性
+    tooltipMaxWidth?: number; // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+    tooltipFontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
+    tooltipColor?: string; // 提示文本字体颜色，优先级高于 overlayStyle
+    tooltipBackgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
+    tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    maxWidth: '100%',
+    line: undefined,
+    expand: false,
+    tooltip: true,
+    tooltipMaxWidth: undefined,
+    tooltipFontSize: 14,
+    tooltipColor: '#FFF',
+    tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',
+    tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
+  });
+  const textMaxWidth = computed(() => {
+    if (typeof props.maxWidth === 'number') {
+      return props.maxWidth + 'px';
+    }
+    return props.maxWidth;
+  });
+  const showTooltip = ref();
+  const ellipsis = ref();
+  const defaultTooltipMaxWidth = ref();
+  watchEffect(() => {
+    showTooltip.value = props.tooltip;
+  });
+  watchEffect(
+    () => {
+      if (props.tooltip) {
+        if (props.tooltipMaxWidth) {
+          defaultTooltipMaxWidth.value = props.tooltipMaxWidth;
+        } else {
+          defaultTooltipMaxWidth.value = ellipsis.value.offsetWidth + 24;
+        }
+      }
+    },
+    { flush: 'post' },
+  );
+  const emit = defineEmits(['expandChange']);
+  function onExpand() {
+    if (ellipsis.value.style['-webkit-line-clamp']) {
+      if (props.tooltip) {
+        showTooltip.value = false;
+        nextTick(() => {
+          ellipsis.value.style['-webkit-line-clamp'] = '';
+        });
+      } else {
+        ellipsis.value.style['-webkit-line-clamp'] = '';
+      }
+      emit('expandChange', true);
+    } else {
+      if (props.tooltip) {
+        showTooltip.value = true;
+      }
+      ellipsis.value.style['-webkit-line-clamp'] = props.line;
+      emit('expandChange', false);
+    }
+  }
+</script>
+<template>
+  <Tooltip
+    v-if="showTooltip"
+    :max-width="defaultTooltipMaxWidth"
+    :fontSize="tooltipFontSize"
+    :color="tooltipColor"
+    :backgroundColor="tooltipBackgroundColor"
+    :overlayStyle="tooltipOverlayStyle"
+  >
+    <template #tooltip>
+      <slot name="tooltip">
+        <slot></slot>
+      </slot>
+    </template>
+    <div
+      ref="ellipsis"
+      class="m-ellipsis"
+      :class="[line ? 'ellipsis-line' : 'not-ellipsis-line', { 'cursor-pointer': expand }]"
+      :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+      @click="expand ? onExpand() : () => false"
+      v-bind="$attrs"
+    >
+      <slot></slot>
+    </div>
+  </Tooltip>
+  <div
+    v-else
+    ref="ellipsis"
+    class="m-ellipsis"
+    :class="[line ? 'ellipsis-line' : 'not-ellipsis-line', { 'cursor-pointer': expand }]"
+    :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+    @click="expand ? onExpand() : () => false"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .m-ellipsis {
+    overflow: hidden;
+    cursor: text;
+  }
+
+  .ellipsis-line {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .not-ellipsis-line {
+    display: inline-block;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    white-space: nowrap;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+</style>
diff --git a/apps/admin/src/components/EllipsisText/src/Tooltip.vue b/apps/admin/src/components/EllipsisText/src/Tooltip.vue
new file mode 100644
index 0000000..01d8ad5
--- /dev/null
+++ b/apps/admin/src/components/EllipsisText/src/Tooltip.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import type { CSSProperties } from 'vue';
+  import { rafTimeout, cancelRaf } from './_utils';
+
+  interface Props {
+    maxWidth?: number; // 提示框内容最大宽度，单位px
+    content?: string; // 展示的文本 string | slot
+    tooltip?: string; // 提示的文本 string | slot
+    fontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
+    color?: string; // 提示文本字体颜色，优先级高于 overlayStyle
+    backgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
+    overlayStyle?: CSSProperties; // 提示框内容区域样式
+  }
+  withDefaults(defineProps<Props>(), {
+    maxWidth: 120,
+    content: '暂无内容',
+    tooltip: '暂无提示',
+    fontSize: 14,
+    color: '#FFF',
+    backgroundColor: 'rgba(0, 0, 0, .85)',
+    overlayStyle: () => ({}),
+  });
+  const visible = ref(false);
+  const hideTimer = ref();
+  const top = ref(0); // 提示框top定位
+  const left = ref(0); // 提示框left定位
+  const contentRef = ref(); // 声明一个同名的模板引用
+  const tooltipRef = ref(); // 声明一个同名的模板引用
+  function getPosition() {
+    const contentWidth = contentRef.value && contentRef.value.offsetWidth; // 展示文本宽度
+    const tooltipWidth = tooltipRef.value && tooltipRef.value.offsetWidth; // 提示文本宽度
+    const tooltipHeight = tooltipRef.value && tooltipRef.value.offsetHeight; // 提示文本高度
+    top.value = tooltipHeight + 4;
+    left.value = (tooltipWidth - contentWidth) / 2;
+  }
+  const emit = defineEmits(['openChange']);
+  function onShow() {
+    getPosition();
+    cancelRaf(hideTimer.value);
+    visible.value = true;
+    emit('openChange', visible.value);
+  }
+  function onHide(): void {
+    hideTimer.value = rafTimeout(() => {
+      visible.value = false;
+      emit('openChange', visible.value);
+    }, 100);
+  }
+</script>
+<template>
+  <div class="m-tooltip" @mouseenter="onShow" @mouseleave="onHide">
+    <div
+      ref="tooltipRef"
+      class="m-tooltip-content"
+      :class="{ 'show-tip': visible }"
+      :style="`--tooltip-font-size: ${fontSize}px; --tooltip-color: ${color}; --tooltip-background-color: ${backgroundColor}; max-width: ${maxWidth}px; top: ${-top}px; left: ${-left}px;`"
+      @mouseenter="onShow"
+      @mouseleave="onHide"
+    >
+      <div class="u-tooltip" :style="overlayStyle">
+        <slot name="tooltip">{{ tooltip }}</slot>
+      </div>
+      <div class="m-tooltip-arrow">
+        <span class="u-tooltip-arrow"></span>
+      </div>
+    </div>
+    <div ref="contentRef">
+      <slot>{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .m-tooltip {
+    display: inline-block;
+    position: relative;
+
+    .m-tooltip-content {
+      position: absolute;
+      z-index: 9999;
+      width: max-content;
+      padding-bottom: 12px;
+      transform: scale(0.8); // 缩放变换
+      transform-origin: 50% 75%;
+      transition:
+        transform 0.25s,
+        opacity 0.25s;
+      opacity: 0;
+      pointer-events: none;
+
+      .u-tooltip {
+        min-width: 32px;
+        min-height: 32px;
+        padding: 6px 8px;
+        border-radius: 6px;
+        background-color: var(--tooltip-background-color);
+        box-shadow:
+          0 6px 16px 0 rgb(0 0 0 / 8%),
+          0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 9px 28px 8px rgb(0 0 0 / 5%);
+        color: var(--tooltip-color);
+        font-size: var(--tooltip-font-size);
+        line-height: 1.5714;
+        text-align: start;
+        text-decoration: none;
+        word-wrap: break-word;
+      }
+
+      .m-tooltip-arrow {
+        content: '';
+        display: block;
+        position: absolute;
+        z-index: 9;
+        bottom: 12px;
+        left: 50%;
+        width: 16px;
+        height: 16px;
+        overflow: hidden;
+        transform: translateX(-50%) translateY(100%) rotate(180deg);
+        pointer-events: none;
+
+        &::before {
+          position: absolute;
+          bottom: 0;
+          inset-inline-start: 0;
+          width: 16px;
+          height: 8px;
+          background-color: var(--tooltip-background-color);
+          clip-path: path(
+            'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z'
+          );
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          z-index: 0;
+          bottom: 0;
+          width: 8.9706px;
+          height: 8.9706px;
+          inset-inline: 0;
+          margin: auto;
+          transform: translateY(50%) rotate(-135deg);
+          border-radius: 0 0 2px;
+          background: transparent;
+          box-shadow: 3px 3px 7px rgb(0 0 0 / 10%);
+        }
+      }
+    }
+
+    .show-tip {
+      transform: scale(1); // 缩放变换
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+</style>
diff --git a/apps/admin/src/components/EllipsisText/src/_utils.ts b/apps/admin/src/components/EllipsisText/src/_utils.ts
new file mode 100644
index 0000000..8e6a1e4
--- /dev/null
+++ b/apps/admin/src/components/EllipsisText/src/_utils.ts
@@ -0,0 +1,40 @@
+// cancelAnimationFrame
+export const cancelAnimationFrame = window.cancelAnimationFrame;
+// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
+export function rafTimeout(fn: Function, delay = 0, interval = false): object {
+  const requestAnimationFrame =
+    typeof window !== 'undefined' ? window.requestAnimationFrame : () => {};
+  let start: any = null;
+  function timeElapse(timestamp: number) {
+    /*
+      timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻
+    */
+    if (!start) {
+      start = timestamp;
+    }
+    const elapsed = timestamp - start;
+    if (elapsed >= delay) {
+      fn(); // 执行目标函数func
+      if (interval) {
+        // 使用间歇调用
+        start = null;
+        raf.id = requestAnimationFrame(timeElapse);
+      }
+    } else {
+      raf.id = requestAnimationFrame(timeElapse);
+    }
+  }
+  const raf = {
+    // 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
+    id: requestAnimationFrame(timeElapse),
+  };
+  return raf;
+}
+// 用于取消 rafTimeout 函数
+export function cancelRaf(raf: { id: number }): void {
+  const cancelAnimationFrame =
+    typeof window !== 'undefined' ? window.cancelAnimationFrame : () => {};
+  if (raf && raf.id) {
+    cancelAnimationFrame(raf.id);
+  }
+}
diff --git a/apps/admin/src/components/Excel/src/ExportExcelModal.vue b/apps/admin/src/components/Excel/src/ExportExcelModal.vue
index efa3292..aeddcbb 100644
--- a/apps/admin/src/components/Excel/src/ExportExcelModal.vue
+++ b/apps/admin/src/components/Excel/src/ExportExcelModal.vue
@@ -66,18 +66,18 @@
     components: { BasicModal, BasicForm },
     emits: ['success', 'register'],
     setup(_, { emit }) {
-      const [registerForm, { validateFields }] = useForm();
+      const [registerForm, { validate }] = useForm();
       const [registerModal, { closeModal }] = useModalInner();
 
-      async function handleOk() {
-        const res = (await validateFields()) as ExportModalResult;
+      const handleOk = async () => {
+        const res = await validate<ExportModalResult>();
         const { filename, bookType } = res;
         emit('success', {
           filename: `${filename.split('.').shift()}.${bookType}`,
           bookType,
         });
         closeModal();
-      }
+      };
 
       return {
         schemas,
diff --git a/apps/admin/src/components/Form/index.ts b/apps/admin/src/components/Form/index.ts
index d85b3c5..d3be25e 100644
--- a/apps/admin/src/components/Form/index.ts
+++ b/apps/admin/src/components/Form/index.ts
@@ -13,5 +13,6 @@ export { default as ApiTree } from './src/components/ApiTree.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as ApiCascader } from './src/components/ApiCascader.vue';
 export { default as ApiTransfer } from './src/components/ApiTransfer.vue';
+export { default as ImageUpload } from './src/components/ImageUpload.vue';
 
 export { BasicForm };
diff --git a/apps/admin/src/components/Form/src/BasicForm.vue b/apps/admin/src/components/Form/src/BasicForm.vue
index f561a9a..c65aae1 100644
--- a/apps/admin/src/components/Form/src/BasicForm.vue
+++ b/apps/admin/src/components/Form/src/BasicForm.vue
@@ -38,19 +38,18 @@
   </Form>
 </template>
 <script lang="ts">
-  import type { FormActionType, FormProps, FormSchema } from './types/form';
+  import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from './types/form';
   import type { AdvanceState } from './types/hooks';
   import type { Ref } from 'vue';
 
   import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
-  import { Form, Row } from 'ant-design-vue';
+  import { Form, Row, type FormProps as AntFormProps } from 'ant-design-vue';
   import FormItem from './components/FormItem.vue';
   import FormAction from './components/FormAction.vue';
 
   import { dateItemType } from './helper';
   import { dateUtil } from '/@/utils/dateUtil';
 
-  // import { cloneDeep } from 'lodash-es';
   import { deepMerge } from '/@/utils';
 
   import { useFormValues } from './hooks/useFormValues';
@@ -83,15 +82,15 @@
 
       const defaultValueRef = ref({});
       const isInitedDefaultRef = ref(false);
-      const propsRef = ref<Partial<FormProps>>({});
+      const propsRef = ref<Partial<FormProps>>();
       const schemaRef = ref<FormSchema[] | null>(null);
       const formElRef = ref<FormActionType | null>(null);
 
       const { prefixCls } = useDesign('basic-form');
 
       // Get the basic configuration of the form
-      const getProps = computed((): FormProps => {
-        return { ...props, ...unref(propsRef) };
+      const getProps = computed(() => {
+        return { ...props, ...unref(propsRef) } as FormProps;
       });
 
       const getFormClass = computed(() => {
@@ -112,20 +111,35 @@
         };
       });
 
-      const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }));
+      const getBindValue = computed(
+        () => ({ ...attrs, ...props, ...unref(getProps) }) as AntFormProps,
+      );
 
       const getSchema = computed((): FormSchema[] => {
         const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
         for (const schema of schemas) {
-          const { defaultValue, component, isHandleDateDefaultValue = true } = schema;
+          const {
+            defaultValue,
+            component,
+            componentProps,
+            isHandleDateDefaultValue = true,
+          } = schema;
           // handle date type
-          if (isHandleDateDefaultValue && defaultValue && dateItemType.includes(component)) {
+          if (
+            isHandleDateDefaultValue &&
+            defaultValue &&
+            component &&
+            dateItemType.includes(component)
+          ) {
+            const valueFormat = componentProps ? componentProps['valueFormat'] : null;
             if (!Array.isArray(defaultValue)) {
-              schema.defaultValue = dateUtil(defaultValue);
+              schema.defaultValue = valueFormat
+                ? dateUtil(defaultValue).format(valueFormat)
+                : dateUtil(defaultValue);
             } else {
               const def: any[] = [];
               defaultValue.forEach((item) => {
-                def.push(dateUtil(item));
+                def.push(valueFormat ? dateUtil(item).format(valueFormat) : dateUtil(item));
               });
               schema.defaultValue = def;
             }
@@ -295,7 +309,10 @@
         formActionType: formActionType as any,
         setFormModel,
         getFormClass,
-        getFormActionBindProps: computed(() => ({ ...getProps.value, ...advanceState })),
+        getFormActionBindProps: computed(
+          () =>
+            ({ ...getProps.value, ...advanceState }) as InstanceType<typeof FormAction>['$props'],
+        ),
         fieldsIsAdvancedMap,
         ...formActionType,
       };
diff --git a/apps/admin/src/components/Form/src/componentMap.ts b/apps/admin/src/components/Form/src/componentMap.ts
index 53e65c9..f33a589 100644
--- a/apps/admin/src/components/Form/src/componentMap.ts
+++ b/apps/admin/src/components/Form/src/componentMap.ts
@@ -5,22 +5,21 @@ import type { ComponentType } from './types/index';
  * Component list, register here to setting it in the form
  */
 import {
-  Input,
-  Select,
-  Radio,
-  Checkbox,
   AutoComplete,
   Cascader,
+  Checkbox,
   DatePicker,
+  Divider,
+  Input,
   InputNumber,
+  Radio,
+  Rate,
+  Select,
+  Slider,
   Switch,
   TimePicker,
   TreeSelect,
-  Slider,
-  Rate,
-  Divider,
 } from 'ant-design-vue';
-
 import ApiRadioGroup from './components/ApiRadioGroup.vue';
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
 import ApiSelect from './components/ApiSelect.vue';
@@ -28,6 +27,7 @@ import ApiTree from './components/ApiTree.vue';
 import ApiTreeSelect from './components/ApiTreeSelect.vue';
 import ApiCascader from './components/ApiCascader.vue';
 import ApiTransfer from './components/ApiTransfer.vue';
+import ImageUpload from './components/ImageUpload.vue';
 import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
@@ -42,7 +42,7 @@ componentMap.set('InputSearch', Input.Search);
 componentMap.set('InputTextArea', Input.TextArea);
 componentMap.set('InputNumber', InputNumber);
 componentMap.set('AutoComplete', AutoComplete);
-
+componentMap.set('ImageUpload', ImageUpload);
 componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
 componentMap.set('ApiTree', ApiTree);
@@ -65,6 +65,7 @@ componentMap.set('MonthPicker', DatePicker.MonthPicker);
 componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
+componentMap.set('TimeRangePicker', TimePicker.TimeRangePicker);
 componentMap.set('StrengthMeter', StrengthMeter);
 componentMap.set('IconPicker', IconPicker);
 componentMap.set('InputCountDown', CountdownInput);
diff --git a/apps/admin/src/components/Form/src/components/ApiCascader.vue b/apps/admin/src/components/Form/src/components/ApiCascader.vue
index cc400b1..bed5c8a 100644
--- a/apps/admin/src/components/Form/src/components/ApiCascader.vue
+++ b/apps/admin/src/components/Form/src/components/ApiCascader.vue
@@ -55,7 +55,7 @@
       labelField: propTypes.string.def('label'),
       valueField: propTypes.string.def('value'),
       childrenField: propTypes.string.def('children'),
-      asyncFetchParamKey: propTypes.string.def('parentCode'),
+      apiParamKey: propTypes.string.def('parentCode'),
       immediate: propTypes.bool.def(true),
       // init fetch params
       initFetchParams: {
@@ -141,7 +141,7 @@
         if (!api || !isFunction(api)) return;
         try {
           const res = await api({
-            [props.asyncFetchParamKey]: Reflect.get(targetOption, 'value'),
+            [props.apiParamKey]: Reflect.get(targetOption, 'value'),
           });
           if (Array.isArray(res)) {
             const children = generatorOptions(res);
diff --git a/apps/admin/src/components/Form/src/components/ApiSelect.vue b/apps/admin/src/components/Form/src/components/ApiSelect.vue
index 8239915..bb46c0b 100644
--- a/apps/admin/src/components/Form/src/components/ApiSelect.vue
+++ b/apps/admin/src/components/Form/src/components/ApiSelect.vue
@@ -21,8 +21,9 @@
   </Select>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { defineComponent, PropType, ref, computed, unref, watch } from 'vue';
   import { Select } from 'ant-design-vue';
+  import type { SelectValue } from 'ant-design-vue/es/select';
   import { isFunction } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '@vben/hooks';
@@ -41,7 +42,7 @@
     },
     inheritAttrs: false,
     props: {
-      value: [Array, Object, String, Number],
+      value: { type: [Array, Object, String, Number] as PropType<SelectValue> },
       numberToString: propTypes.bool,
       api: {
         type: Function as PropType<(arg?: any) => Promise<OptionsItem[]>>,
@@ -55,13 +56,18 @@
       valueField: propTypes.string.def('value'),
       immediate: propTypes.bool.def(true),
       alwaysLoad: propTypes.bool.def(false),
+      options: {
+        type: Array<OptionsItem>,
+        default: [],
+      },
     },
     emits: ['options-change', 'change', 'update:value'],
     setup(props, { emit }) {
       const options = ref<OptionsItem[]>([]);
       const loading = ref(false);
-      const isFirstLoad = ref(true);
-      const emitData = ref<any[]>([]);
+      // 首次是否加载过了
+      const isFirstLoaded = ref(false);
+      const emitData = ref<OptionsItem[]>([]);
       const attrs = useAttrs();
       const { t } = useI18n();
 
@@ -71,7 +77,7 @@
       const getOptions = computed(() => {
         const { labelField, valueField, numberToString } = props;
 
-        return unref(options).reduce((prev, next: any) => {
+        let data = unref(options).reduce((prev, next: any) => {
           if (next) {
             const value = get(next, valueField);
             prev.push({
@@ -82,10 +88,7 @@
           }
           return prev;
         }, [] as OptionsItem[]);
-      });
-
-      watchEffect(() => {
-        props.immediate && !props.alwaysLoad && fetch();
+        return data.length > 0 ? data : props.options;
       });
 
       watch(
@@ -98,18 +101,19 @@
       watch(
         () => props.params,
         () => {
-          !unref(isFirstLoad) && fetch();
+          !unref(isFirstLoaded) && fetch();
         },
-        { deep: true },
+        { deep: true, immediate: props.immediate },
       );
 
       async function fetch() {
         const api = props.api;
-        if (!api || !isFunction(api)) return;
+        if (!api || !isFunction(api) || loading.value) return;
         options.value = [];
         try {
           loading.value = true;
           const res = await api(props.params);
+          isFirstLoaded.value = true;
           if (Array.isArray(res)) {
             options.value = res;
             emitChange();
@@ -126,13 +130,12 @@
         }
       }
 
-      async function handleFetch(visible) {
+      async function handleFetch(visible: boolean) {
         if (visible) {
           if (props.alwaysLoad) {
             await fetch();
-          } else if (!props.immediate && unref(isFirstLoad)) {
+          } else if (!props.immediate && !unref(isFirstLoaded)) {
             await fetch();
-            isFirstLoad.value = false;
           }
         }
       }
diff --git a/apps/admin/src/components/Form/src/components/ApiTransfer.vue b/apps/admin/src/components/Form/src/components/ApiTransfer.vue
index 7eccd43..73516ff 100644
--- a/apps/admin/src/components/Form/src/components/ApiTransfer.vue
+++ b/apps/admin/src/components/Form/src/components/ApiTransfer.vue
@@ -7,6 +7,7 @@
     :selectedKeys="selectedKeys"
     :targetKeys="getTargetKeys"
     :showSearch="showSearch"
+    :disabled="disabled"
     @change="handleChange"
   />
 </template>
@@ -73,9 +74,9 @@
         }, [] as TransferItem[]);
       });
       const getTargetKeys = computed<string[]>(() => {
-        if (unref(_targetKeys).length > 0) {
+        /* if (unref(_targetKeys).length > 0) {
           return unref(_targetKeys);
-        }
+        } */
         if (Array.isArray(props.value)) {
           return props.value;
         }
diff --git a/apps/admin/src/components/Form/src/components/ApiTree.vue b/apps/admin/src/components/Form/src/components/ApiTree.vue
index 41a7413..f2b9cdd 100644
--- a/apps/admin/src/components/Form/src/components/ApiTree.vue
+++ b/apps/admin/src/components/Form/src/components/ApiTree.vue
@@ -1,38 +1,42 @@
 <template>
-  <a-tree v-bind="getAttrs" @change="handleChange">
+  <a-tree v-bind="getAttrs" v-model:selectedKeys="state">
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
-    <template #suffixIcon v-if="loading">
-      <LoadingOutlined spin />
-    </template>
   </a-tree>
 </template>
 
 <script lang="ts">
   import { type Recordable, type AnyFunction } from '@vben/types';
   import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
-  import { Tree } from 'ant-design-vue';
+  import { Tree, TreeProps } from 'ant-design-vue';
   import { isArray, isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';
   import { propTypes } from '/@/utils/propTypes';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { DataNode } from 'ant-design-vue/es/tree';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
 
   export default defineComponent({
     name: 'ApiTree',
-    components: { ATree: Tree, LoadingOutlined },
+    components: { ATree: Tree },
     props: {
       api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
       params: { type: Object },
       immediate: { type: Boolean, default: true },
       resultField: propTypes.string.def(''),
       afterFetch: { type: Function as PropType<AnyFunction> },
+      value: {
+        type: Array as PropType<TreeProps['selectedKeys']>,
+      },
     },
-    emits: ['options-change', 'change'],
+    emits: ['options-change', 'change', 'update:value'],
     setup(props, { attrs, emit }) {
-      const treeData = ref<Recordable<any>[]>([]);
+      const treeData = ref<DataNode[]>([]);
       const isFirstLoaded = ref<Boolean>(false);
       const loading = ref(false);
+      const emitData = ref<any[]>([]);
+
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
       const getAttrs = computed(() => {
         return {
           ...(props.api ? { treeData: unref(treeData) } : {}),
@@ -40,9 +44,12 @@
         };
       });
 
-      function handleChange(...args) {
-        emit('change', ...args);
-      }
+      watch(
+        () => state.value,
+        (v) => {
+          emit('update:value', v);
+        },
+      );
 
       watch(
         () => props.params,
@@ -82,11 +89,11 @@
         if (!isArray(result)) {
           result = get(result, props.resultField);
         }
-        treeData.value = (result as Recordable<any>[]) || [];
+        treeData.value = (result as (Recordable & { key: string | number })[]) || [];
         isFirstLoaded.value = true;
         emit('options-change', treeData.value);
       }
-      return { getAttrs, loading, handleChange };
+      return { getAttrs, loading, state };
     },
   });
 </script>
diff --git a/apps/admin/src/components/Form/src/components/ApiTreeSelect.vue b/apps/admin/src/components/Form/src/components/ApiTreeSelect.vue
index 1e8b04c..4a33a54 100644
--- a/apps/admin/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/apps/admin/src/components/Form/src/components/ApiTreeSelect.vue
@@ -1,5 +1,10 @@
 <template>
-  <a-tree-select v-bind="getAttrs" @change="handleChange">
+  <a-tree-select
+    v-bind="getAttrs"
+    @change="handleChange"
+    :field-names="fieldNames"
+    :load-data="async ? onLoadData : undefined"
+  >
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
@@ -25,9 +30,13 @@
       api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
       params: { type: Object },
       immediate: { type: Boolean, default: true },
+      async: { type: Boolean, default: false },
       resultField: propTypes.string.def(''),
+      labelField: propTypes.string.def('title'),
+      valueField: propTypes.string.def('value'),
+      childrenField: propTypes.string.def('children'),
     },
-    emits: ['options-change', 'change'],
+    emits: ['options-change', 'change', 'load-data'],
     setup(props, { attrs, emit }) {
       const treeData = ref<Recordable<any>[]>([]);
       const isFirstLoaded = ref<Boolean>(false);
@@ -38,6 +47,11 @@
           ...attrs,
         };
       });
+      const fieldNames = {
+        children: props.childrenField,
+        value: props.valueField,
+        label: props.labelField,
+      };
 
       function handleChange(...args) {
         emit('change', ...args);
@@ -62,9 +76,19 @@
         props.immediate && fetch();
       });
 
+      function onLoadData(treeNode) {
+        return new Promise((resolve: (value?: unknown) => void) => {
+          if (isArray(treeNode.children) && treeNode.children.length > 0) {
+            resolve();
+            return;
+          }
+          emit('load-data', { treeData, treeNode, resolve });
+        });
+      }
+
       async function fetch() {
         const { api } = props;
-        if (!api || !isFunction(api)) return;
+        if (!api || !isFunction(api) || loading.value) return;
         loading.value = true;
         treeData.value = [];
         let result;
@@ -82,7 +106,7 @@
         isFirstLoaded.value = true;
         emit('options-change', treeData.value);
       }
-      return { getAttrs, loading, handleChange };
+      return { getAttrs, loading, handleChange, fieldNames, onLoadData };
     },
   });
 </script>
diff --git a/apps/admin/src/components/Form/src/components/FormAction.vue b/apps/admin/src/components/Form/src/components/FormAction.vue
index 8dec49f..3f02675 100644
--- a/apps/admin/src/components/Form/src/components/FormAction.vue
+++ b/apps/admin/src/components/Form/src/components/FormAction.vue
@@ -41,7 +41,6 @@
 </template>
 <script lang="ts">
   import type { ColEx } from '../types/index';
-  //import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
   import { defineComponent, computed, PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { Button, ButtonProps } from '/@/components/Button';
diff --git a/apps/admin/src/components/Form/src/components/FormItem.vue b/apps/admin/src/components/Form/src/components/FormItem.vue
index 9e598ca..f7e45f1 100644
--- a/apps/admin/src/components/Form/src/components/FormItem.vue
+++ b/apps/admin/src/components/Form/src/components/FormItem.vue
@@ -2,8 +2,13 @@
   import { type Recordable, type Nullable } from '@vben/types';
   import type { PropType, Ref } from 'vue';
   import { computed, defineComponent, toRefs, unref } from 'vue';
-  import type { FormActionType, FormProps, FormSchema } from '../types/form';
-  import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
+  import {
+    isComponentFormSchema,
+    type FormActionType,
+    type FormProps,
+    type FormSchemaInner as FormSchema,
+  } from '../types/form';
+  import type { Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
   import type { TableActionType } from '/@/components/Table';
   import { Col, Divider, Form } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
@@ -159,7 +164,10 @@
         const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
           ? rulesMessageJoinLabel
           : globalRulesMessageJoinLabel;
-        const defaultMsg = createPlaceholderMessage(component) + `${joinLabel ? label : ''}`;
+        const assertLabel = joinLabel ? label : '';
+        const defaultMsg = component
+          ? createPlaceholderMessage(component) + assertLabel
+          : assertLabel;
 
         function validator(rule: any, value: any) {
           const msg = rule.message || defaultMsg;
@@ -217,10 +225,6 @@
             rule.required = false;
           }
           if (component) {
-            if (!Reflect.has(rule, 'type')) {
-              rule.type = component === 'InputNumber' ? 'number' : 'string';
-            }
-
             rule.message = rule.message || defaultMsg;
 
             if (component.includes('Input') || component.includes('Textarea')) {
@@ -242,6 +246,9 @@
       }
 
       function renderComponent() {
+        if (!isComponentFormSchema(props.schema)) {
+          return null;
+        }
         const {
           renderComponentContent,
           component,
@@ -299,7 +306,7 @@
           return <Comp {...compAttr} />;
         }
         const compSlot = isFunction(renderComponentContent)
-          ? { ...renderComponentContent(unref(getValues)) }
+          ? { ...renderComponentContent(unref(getValues), { disabled: unref(getDisable) }) }
           : {
               default: () => renderComponentContent,
             };
@@ -333,7 +340,7 @@
         const { itemProps, slot, render, field, suffix, component } = props.schema;
         const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
         const { colon } = props.formProps;
-
+        const opts = { disabled: unref(getDisable) };
         if (component === 'Divider') {
           return (
             <Col span={24}>
@@ -343,9 +350,9 @@
         } else {
           const getContent = () => {
             return slot
-              ? getSlot(slots, slot, unref(getValues))
+              ? getSlot(slots, slot, unref(getValues), opts)
               : render
-              ? render(unref(getValues))
+              ? render(unref(getValues), opts)
               : renderComponent();
           };
 
@@ -353,7 +360,7 @@
           const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
 
           // TODO 自定义组件验证会出现问题，因此这里框架默认将自定义组件设置手动触发验证，如果其他组件还有此问题请手动设置autoLink=false
-          if (NO_AUTO_LINK_COMPONENTS.includes(component)) {
+          if (component && NO_AUTO_LINK_COMPONENTS.includes(component)) {
             props.schema &&
               (props.schema.itemProps! = {
                 autoLink: false,
@@ -382,8 +389,8 @@
       }
 
       return () => {
-        const { colProps = {}, colSlot, renderColContent, component } = props.schema;
-        if (!componentMap.has(component)) {
+        const { colProps = {}, colSlot, renderColContent, component, slot } = props.schema;
+        if (!component || (!componentMap.has(component) && !slot)) {
           return null;
         }
 
@@ -391,12 +398,13 @@
         const realColProps = { ...baseColProps, ...colProps };
         const { isIfShow, isShow } = getShow();
         const values = unref(getValues);
+        const opts = { disabled: unref(getDisable) };
 
         const getContent = () => {
           return colSlot
-            ? getSlot(slots, colSlot, values)
+            ? getSlot(slots, colSlot, values, opts)
             : renderColContent
-            ? renderColContent(values)
+            ? renderColContent(values, opts)
             : renderItem();
         };
 
diff --git a/apps/admin/src/components/Form/src/components/ImageUpload.vue b/apps/admin/src/components/Form/src/components/ImageUpload.vue
new file mode 100644
index 0000000..22fec05
--- /dev/null
+++ b/apps/admin/src/components/Form/src/components/ImageUpload.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      v-model:file-list="fileList"
+      :list-type="listType"
+      :multiple="multiple"
+      :max-count="maxCount"
+      :customRequest="handleCustomRequest"
+      :before-upload="handleBeforeUpload"
+      v-bind="$attrs"
+      @preview="handlePreview"
+      v-model:value="state"
+    >
+      <div v-if="fileList.length < maxCount">
+        <plus-outlined />
+        <div style="margin-top: 8px">
+          {{ t('component.upload.upload') }}
+        </div>
+      </div>
+    </a-upload>
+    <a-modal :open="previewOpen" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType, reactive, ref, watch } from 'vue';
+  import { message, Modal, Upload, UploadProps } from 'ant-design-vue';
+  import { UploadFile } from 'ant-design-vue/lib/upload/interface';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { join } from 'lodash-es';
+  import { buildShortUUID } from '@/utils/uuid';
+  import { isArray, isNotEmpty, isUrl } from '@/utils/is';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
+  import { useAttrs } from '@vben/hooks';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+
+  type ImageUploadType = 'text' | 'picture' | 'picture-card';
+
+  export default defineComponent({
+    name: 'ImageUpload',
+    components: {
+      PlusOutlined,
+      AUpload: Upload,
+      AModal: Modal,
+    },
+    inheritAttrs: false,
+    props: {
+      value: [Array, String],
+      api: {
+        type: Function as PropType<(file: UploadFile) => Promise<string>>,
+        default: null,
+      },
+      listType: {
+        type: String as PropType<ImageUploadType>,
+        default: () => 'picture-card',
+      },
+      // 文件类型
+      fileType: {
+        type: Array,
+        default: () => ['image/png', 'image/jpeg'],
+      },
+      multiple: {
+        type: Boolean,
+        default: () => false,
+      },
+      // 最大数量的文件
+      maxCount: {
+        type: Number,
+        default: () => 1,
+      },
+      // 最小数量的文件
+      minCount: {
+        type: Number,
+        default: () => 0,
+      },
+      // 文件最大多少MB
+      maxSize: {
+        type: Number,
+        default: () => 2,
+      },
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const attrs = useAttrs();
+      const { t } = useI18n();
+      const previewOpen = ref(false);
+      const previewImage = ref('');
+      const emitData = ref<any[] | any | undefined>();
+      const fileList = ref<UploadFile[]>([]);
+
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+      const fileState = reactive<{
+        newList: any[];
+        newStr: string;
+        oldStr: string;
+      }>({
+        newList: [],
+        newStr: '',
+        oldStr: '',
+      });
+
+      watch(
+        () => fileList.value,
+        (v) => {
+          fileState.newList = v
+            .filter((item: any) => {
+              return item?.url && item.status === 'done' && isUrl(item?.url);
+            })
+            .map((item: any) => item?.url);
+          fileState.newStr = join(fileState.newList);
+          // 不相等代表数据变更
+          if (fileState.newStr !== fileState.oldStr) {
+            fileState.oldStr = fileState.newStr;
+            emitData.value = props.multiple ? fileState.newList : fileState.newStr;
+            state.value = props.multiple ? fileState.newList : fileState.newStr;
+          }
+        },
+        {
+          deep: true,
+        },
+      );
+
+      watch(
+        () => state.value,
+        (v) => {
+          changeFileValue(v);
+          emit('update:value', v);
+        },
+      );
+
+      function changeFileValue(value: any) {
+        const stateStr = props.multiple ? join((value as string[]) || []) : value || '';
+        if (stateStr !== fileState.oldStr) {
+          fileState.oldStr = stateStr;
+          let list: string[] = [];
+          if (props.multiple) {
+            if (isNotEmpty(value)) {
+              if (isArray(value)) {
+                list = value as string[];
+              } else {
+                list.push(value as string);
+              }
+            }
+          } else {
+            if (isNotEmpty(value)) {
+              list.push(value as string);
+            }
+          }
+          fileList.value = list.map((item) => {
+            const uuid = buildShortUUID();
+            return {
+              uid: uuid,
+              name: uuid,
+              status: 'done',
+              url: item,
+            };
+          });
+        }
+      }
+
+      /** 关闭查看 */
+      const handleCancel = () => {
+        previewOpen.value = false;
+      };
+
+      /** 查看图片 */
+      // @ts-ignore
+      const handlePreview = async (file: UploadProps['fileList'][number]) => {
+        if (!file.url && !file.preview) {
+          file.preview = (await getBase64(file.originFileObj)) as string;
+        }
+        previewImage.value = file.url || file.preview;
+        previewOpen.value = true;
+      };
+
+      /** 上传前校验 */
+      const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
+        if (fileList.value.length > props.maxCount) {
+          fileList.value.splice(props.maxCount, fileList.value.length - props.maxCount);
+          message.error(t('component.upload.maxNumber', [props.maxCount]));
+          return Upload.LIST_IGNORE;
+        }
+        const isPNG = props.fileType.includes(file.type);
+        if (!isPNG) {
+          message.error(t('component.upload.acceptUpload', [props.fileType.toString()]));
+        }
+        const isLt2M = file.size / 1024 / 1024 < props.maxSize;
+        if (!isLt2M) {
+          message.error(t('component.upload.maxSizeMultiple', [props.maxSize]));
+        }
+        if (!(isPNG && isLt2M)) {
+          fileList.value.pop();
+        }
+        return (isPNG && isLt2M) || Upload.LIST_IGNORE;
+      };
+
+      /** 自定义上传 */
+      const handleCustomRequest = async (option: any) => {
+        const { file } = option;
+        await props
+          .api(option)
+          .then((url) => {
+            file.url = url;
+            file.status = 'done';
+            fileList.value.pop();
+            fileList.value.push(file);
+          })
+          .catch(() => {
+            fileList.value.pop();
+          });
+      };
+
+      function getBase64(file: File) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = (error) => reject(error);
+        });
+      }
+
+      return {
+        previewOpen,
+        fileList,
+        state,
+        attrs,
+        t,
+        handlePreview,
+        handleBeforeUpload,
+        handleCustomRequest,
+        handleCancel,
+        previewImage,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  /* you can make up upload button and sample style by using stylesheets */
+  .ant-upload-select-picture-card i {
+    color: #999;
+    font-size: 32px;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+</style>
diff --git a/apps/admin/src/components/Form/src/helper.ts b/apps/admin/src/components/Form/src/helper.ts
index 7171c7b..3e01365 100644
--- a/apps/admin/src/components/Form/src/helper.ts
+++ b/apps/admin/src/components/Form/src/helper.ts
@@ -1,4 +1,4 @@
-import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
+import type { Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
 import type { ComponentType } from './types/index';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { dateUtil } from '/@/utils/dateUtil';
@@ -40,6 +40,9 @@ export function setComponentRuleType(
   component: ComponentType,
   valueFormat: string,
 ) {
+  if (Reflect.has(rule, 'type')) {
+    return;
+  }
   if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
     rule.type = valueFormat ? 'string' : 'object';
   } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
@@ -52,7 +55,7 @@ export function setComponentRuleType(
 export function processDateValue(attr: Recordable, component: string) {
   const { valueFormat, value } = attr;
   if (valueFormat) {
-    attr.value = isObject(value) ? dateUtil(value).format(valueFormat) : value;
+    attr.value = isObject(value) ? dateUtil(value as unknown as Date).format(valueFormat) : value;
   } else if (DATE_TYPE.includes(component) && value) {
     attr.value = dateUtil(attr.value);
   }
@@ -78,10 +81,11 @@ export const NO_AUTO_LINK_COMPONENTS: ComponentType[] = [
   'Upload',
   'ApiTransfer',
   'ApiTree',
-  'ApiSelect',
   'ApiTreeSelect',
   'ApiRadioGroup',
   'ApiCascader',
   'AutoComplete',
   'RadioButtonGroup',
+  'ImageUpload',
+  'ApiSelect',
 ];
diff --git a/apps/admin/src/components/Form/src/hooks/useAdvanced.ts b/apps/admin/src/components/Form/src/hooks/useAdvanced.ts
index 96dacb2..70d4c73 100644
--- a/apps/admin/src/components/Form/src/hooks/useAdvanced.ts
+++ b/apps/admin/src/components/Form/src/hooks/useAdvanced.ts
@@ -1,7 +1,7 @@
 import type { ColEx } from '../types';
 import type { AdvanceState } from '../types/hooks';
 import { ComputedRef, getCurrentInstance, Ref, shallowReactive, computed, unref, watch } from 'vue';
-import type { FormProps, FormSchema } from '../types/form';
+import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
 import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
 import { useDebounceFn } from '@vueuse/core';
diff --git a/apps/admin/src/components/Form/src/hooks/useAutoFocus.ts b/apps/admin/src/components/Form/src/hooks/useAutoFocus.ts
index e24dd6b..a88a4c3 100644
--- a/apps/admin/src/components/Form/src/hooks/useAutoFocus.ts
+++ b/apps/admin/src/components/Form/src/hooks/useAutoFocus.ts
@@ -1,5 +1,9 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { FormSchema, FormActionType, FormProps } from '../types/form';
+import {
+  type FormSchemaInner as FormSchema,
+  type FormActionType,
+  type FormProps,
+} from '../types/form';
 
 import { unref, nextTick, watchEffect } from 'vue';
 
@@ -29,7 +33,7 @@ export async function useAutoFocus({
 
     const firstItem = schemas[0];
     // Only open when the first form item is input type
-    if (!firstItem.component.includes('Input')) {
+    if (!firstItem.component || !firstItem.component.includes('Input')) {
       return;
     }
 
diff --git a/apps/admin/src/components/Form/src/hooks/useForm.ts b/apps/admin/src/components/Form/src/hooks/useForm.ts
index 40f246d..fd4242e 100644
--- a/apps/admin/src/components/Form/src/hooks/useForm.ts
+++ b/apps/admin/src/components/Form/src/hooks/useForm.ts
@@ -1,4 +1,9 @@
-import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
+import type {
+  FormProps,
+  FormActionType,
+  UseFormReturnType,
+  FormSchemaInner as FormSchema,
+} from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import type { DynamicProps } from '/#/utils';
 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
@@ -88,15 +93,15 @@ export function useForm(props?: Props): UseFormReturnType {
       return unref(formRef)?.getFieldsValue() as T;
     },
 
-    setFieldsValue: async <T>(values: T) => {
+    setFieldsValue: async <T extends Recordable<any>>(values: T) => {
       const form = await getForm();
-      form.setFieldsValue<T>(values);
+      form.setFieldsValue(values);
     },
 
     appendSchemaByField: async (
       schema: FormSchema | FormSchema[],
       prefixField: string | undefined,
-      first: boolean,
+      first?: boolean,
     ) => {
       const form = await getForm();
       form.appendSchemaByField(schema, prefixField, first);
@@ -107,7 +112,7 @@ export function useForm(props?: Props): UseFormReturnType {
       return form.submit();
     },
 
-    validate: async (nameList?: NamePath[]): Promise<Recordable> => {
+    validate: async <T = Recordable>(nameList?: NamePath[] | false): Promise<T> => {
       const form = await getForm();
       return form.validate(nameList);
     },
diff --git a/apps/admin/src/components/Form/src/hooks/useFormEvents.ts b/apps/admin/src/components/Form/src/hooks/useFormEvents.ts
index 09a641c..8a77cc6 100644
--- a/apps/admin/src/components/Form/src/hooks/useFormEvents.ts
+++ b/apps/admin/src/components/Form/src/hooks/useFormEvents.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { FormProps, FormSchema, FormActionType } from '../types/form';
+import type { FormProps, FormSchemaInner as FormSchema, FormActionType } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import { unref, toRaw, nextTick } from 'vue';
 import {
@@ -87,23 +87,31 @@ export function useFormEvents({
 
     Object.keys(formModel).forEach((key) => {
       const schema = unref(getSchema).find((item) => item.field === key);
-      const isInput = schema?.component && defaultValueComponents.includes(schema.component);
-      const defaultValue = cloneDeep(defaultValueRef.value[key]);
-      formModel[key] = isInput ? defaultValue || '' : defaultValue;
+      const defaultValueObj = schema?.defaultValueObj;
+      const fieldKeys = Object.keys(defaultValueObj || {});
+      if (fieldKeys.length) {
+        fieldKeys.map((field) => {
+          formModel[field] = defaultValueObj![field];
+        });
+      }
+      formModel[key] = getDefaultValue(schema, defaultValueRef, key);
     });
     nextTick(() => clearValidate());
 
     emit('reset', toRaw(formModel));
     submitOnReset && handleSubmit();
   }
-
+  // 获取表单fields
+  const getAllFields = () =>
+    unref(getSchema)
+      .map((item) => [...(item.fields || []), item.field])
+      .flat(1)
+      .filter(Boolean);
   /**
    * @description: Set form value
    */
   async function setFieldsValue(values: Recordable): Promise<void> {
-    const fields = unref(getSchema)
-      .map((item) => item.field)
-      .filter(Boolean);
+    const fields = getAllFields();
 
     // key 支持 a.b.c 的嵌套写法
     const delimiter = '.';
@@ -113,7 +121,7 @@ export function useFormEvents({
     fields.forEach((key) => {
       const schema = unref(getSchema).find((item) => item.field === key);
       let value = get(values, key);
-      const hasKey = !!get(values, key);
+      const hasKey = Reflect.has(values, key);
 
       value = handleInputNumberValue(schema?.component, value);
       const { componentProps } = schema || {};
@@ -210,21 +218,22 @@ export function useFormEvents({
     first = false,
   ) {
     const schemaList: FormSchema[] = cloneDeep(unref(getSchema));
-
+    const addSchemaIds: string[] = Array.isArray(schema)
+      ? schema.map((item) => item.field)
+      : [schema.field];
+    if (schemaList.find((item) => addSchemaIds.includes(item.field))) {
+      error('There are schemas that have already been added');
+      return;
+    }
     const index = schemaList.findIndex((schema) => schema.field === prefixField);
     const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]);
     if (!prefixField || index === -1 || first) {
       first ? schemaList.unshift(..._schemaList) : schemaList.push(..._schemaList);
-      schemaRef.value = schemaList;
-      _setDefaultValue(schema);
-      return;
-    }
-    if (index !== -1) {
+    } else if (index !== -1) {
       schemaList.splice(index + 1, 0, ..._schemaList);
     }
-    _setDefaultValue(schema);
-
     schemaRef.value = schemaList;
+    _setDefaultValue(schema);
   }
 
   async function resetSchema(data: Partial<FormSchema> | Partial<FormSchema>[]) {
@@ -326,16 +335,24 @@ export function useFormEvents({
    */
   function itemIsDateType(key: string) {
     return unref(getSchema).some((item) => {
-      return item.field === key ? dateItemType.includes(item.component) : false;
+      return item.field === key && item.component ? dateItemType.includes(item.component) : false;
     });
   }
 
   async function validateFields(nameList?: NamePath[] | undefined) {
-    return unref(formElRef)?.validateFields(nameList);
+    const values = unref(formElRef)?.validateFields(nameList);
+    return handleFormValues(values);
   }
 
-  async function validate(nameList?: NamePath[] | undefined) {
-    return await unref(formElRef)?.validate(nameList);
+  async function validate(nameList?: NamePath[] | false | undefined) {
+    let _nameList: any;
+    if (nameList === undefined) {
+      _nameList = getAllFields();
+    } else {
+      _nameList = nameList === Array.isArray(nameList) ? nameList : undefined;
+    }
+    const values = await unref(formElRef)?.validate(_nameList);
+    return handleFormValues(values);
   }
 
   async function clearValidate(name?: string | string[]) {
@@ -360,8 +377,7 @@ export function useFormEvents({
     if (!formEl) return;
     try {
       const values = await validate();
-      const res = handleFormValues(values);
-      emit('submit', res);
+      emit('submit', values);
     } catch (error: any) {
       if (error?.outOfDate === false && error?.errorFields) {
         return;
@@ -385,3 +401,32 @@ export function useFormEvents({
     scrollToField,
   };
 }
+
+function getDefaultValue(
+  schema: FormSchema | undefined,
+  defaultValueRef: UseFormActionContext['defaultValueRef'],
+  key: string,
+) {
+  let defaultValue = cloneDeep(defaultValueRef.value[key]);
+  const isInput = checkIsInput(schema);
+  if (isInput) {
+    return defaultValue || '';
+  }
+  if (!defaultValue && schema && checkIsRangeSlider(schema)) {
+    defaultValue = [0, 0];
+  }
+  if (!defaultValue && schema && schema.component === 'ApiTree') {
+    defaultValue = [];
+  }
+  return defaultValue;
+}
+
+function checkIsRangeSlider(schema: FormSchema) {
+  if (schema.component === 'Slider' && schema.componentProps && 'range' in schema.componentProps) {
+    return true;
+  }
+}
+
+function checkIsInput(schema?: FormSchema) {
+  return schema?.component && defaultValueComponents.includes(schema.component);
+}
diff --git a/apps/admin/src/components/Form/src/hooks/useFormValues.ts b/apps/admin/src/components/Form/src/hooks/useFormValues.ts
index 4d3bac9..25b5609 100644
--- a/apps/admin/src/components/Form/src/hooks/useFormValues.ts
+++ b/apps/admin/src/components/Form/src/hooks/useFormValues.ts
@@ -1,9 +1,9 @@
-import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
+import { isArray, isFunction, isNotEmpty, isObject, isString, isNullOrUnDef } from '/@/utils/is';
 import { dateUtil } from '/@/utils/dateUtil';
 import { unref } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
-import type { FormProps, FormSchema } from '../types/form';
-import { cloneDeep, set } from 'lodash-es';
+import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
+import { cloneDeep, get, set, unset } from 'lodash-es';
 
 interface UseFormValuesContext {
   defaultValueRef: Ref<any>;
@@ -106,28 +106,50 @@ export function useFormValues({
         continue;
       }
       // If the value to be converted is empty, remove the field
-      if (!values[field]) {
-        Reflect.deleteProperty(values, field);
+      if (!get(values, field)) {
+        unset(values, field);
         continue;
       }
 
-      const [startTime, endTime]: string[] = values[field];
+      const [startTime, endTime]: string[] = get(values, field);
 
       const [startTimeFormat, endTimeFormat] = Array.isArray(format) ? format : [format, format];
 
-      values[startTimeKey] = dateUtil(startTime).format(startTimeFormat);
-      values[endTimeKey] = dateUtil(endTime).format(endTimeFormat);
-      Reflect.deleteProperty(values, field);
+      if (isNotEmpty(startTime)) {
+        set(values, startTimeKey, formatTime(startTime, startTimeFormat));
+      }
+      if (isNotEmpty(endTime)) {
+        set(values, endTimeKey, formatTime(endTime, endTimeFormat));
+      }
+      unset(values, field);
     }
 
     return values;
   }
 
+  function formatTime(time: string, format: string) {
+    if (format === 'timestamp') {
+      return dateUtil(time).unix();
+    } else if (format === 'timestampStartDay') {
+      return dateUtil(time).startOf('day').unix();
+    }
+    return dateUtil(time).format(format);
+  }
+
   function initDefault() {
     const schemas = unref(getSchema);
     const obj: Recordable = {};
     schemas.forEach((item) => {
-      const { defaultValue } = item;
+      const { defaultValue, defaultValueObj } = item;
+      const fieldKeys = Object.keys(defaultValueObj || {});
+      if (fieldKeys.length) {
+        fieldKeys.map((field) => {
+          obj[field] = defaultValueObj![field];
+          if (formModel[field] === undefined) {
+            formModel[field] = defaultValueObj![field];
+          }
+        });
+      }
       if (!isNullOrUnDef(defaultValue)) {
         obj[item.field] = defaultValue;
 
diff --git a/apps/admin/src/components/Form/src/hooks/useLabelWidth.ts b/apps/admin/src/components/Form/src/hooks/useLabelWidth.ts
index 3befa1c..28a63e7 100644
--- a/apps/admin/src/components/Form/src/hooks/useLabelWidth.ts
+++ b/apps/admin/src/components/Form/src/hooks/useLabelWidth.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import { computed, unref } from 'vue';
-import type { FormProps, FormSchema } from '../types/form';
+import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
 import { isNumber } from '/@/utils/is';
 
 export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) {
diff --git a/apps/admin/src/components/Form/src/types/form.ts b/apps/admin/src/components/Form/src/types/form.ts
index dd3ae96..4df34d5 100644
--- a/apps/admin/src/components/Form/src/types/form.ts
+++ b/apps/admin/src/components/Form/src/types/form.ts
@@ -13,7 +13,7 @@ export type Rule = RuleObject & {
 };
 
 export interface RenderCallbackParams {
-  schema: FormSchema;
+  schema: FormSchemaInner;
   values: Recordable;
   model: Recordable;
   field: string;
@@ -29,17 +29,17 @@ export interface FormActionType {
   resetFields: () => Promise<void>;
   getFieldsValue: () => Recordable;
   clearValidate: (name?: string | string[]) => Promise<void>;
-  updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
-  resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+  updateSchema: (data: Partial<FormSchemaInner> | Partial<FormSchemaInner>[]) => Promise<void>;
+  resetSchema: (data: Partial<FormSchemaInner> | Partial<FormSchemaInner>[]) => Promise<void>;
   setProps: (formProps: Partial<FormProps>) => Promise<void>;
   removeSchemaByField: (field: string | string[]) => Promise<void>;
   appendSchemaByField: (
-    schema: FormSchema | FormSchema[],
+    schema: FormSchemaInner | FormSchemaInner[],
     prefixField: string | undefined,
     first?: boolean | undefined,
   ) => Promise<void>;
   validateFields: (nameList?: NamePath[]) => Promise<any>;
-  validate: (nameList?: NamePath[]) => Promise<any>;
+  validate: <T = Recordable>(nameList?: NamePath[] | false) => Promise<T>;
   scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
 }
 
@@ -123,15 +123,22 @@ export interface FormProps {
   transformDateFunc?: (date: any) => string;
   colon?: boolean;
 }
-export interface FormSchema {
+export type RenderOpts = {
+  disabled: boolean;
+  [key: string]: any;
+};
+
+interface BaseFormSchema {
   // Field name
   field: string;
+  // Extra Fields name[]
+  fields?: string[];
   // Event name triggered by internal value change, default change
   changeEvent?: string;
   // Variable name bound to v-model Default value
   valueField?: string;
   // Label name
-  label: string | VNode;
+  label?: string | VNode;
   // Auxiliary text
   subLabel?: string;
   // Help text on the right side of the text
@@ -145,8 +152,6 @@ export interface FormSchema {
   labelWidth?: string | number;
   // Disable the adjustment of labelWidth with global settings of formModel, and manually set labelCol and wrapperCol by yourself
   disabledLabelWidth?: boolean;
-  // render component
-  component: ComponentType;
   // Component parameters
   componentProps?:
     | ((opt: {
@@ -175,6 +180,9 @@ export interface FormSchema {
   // 默认值
   defaultValue?: any;
 
+  // 额外默认值数组对象
+  defaultValueObj?: { [key: string]: any };
+
   // 是否自动处理与时间相关组件的默认值
   isHandleDateDefaultValue?: boolean;
 
@@ -188,20 +196,23 @@ export interface FormSchema {
   show?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
 
   // Render the content in the form-item tag
-  render?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
+  render?: (
+    renderCallbackParams: RenderCallbackParams,
+    opts: RenderOpts,
+  ) => VNode | VNode[] | string;
 
   // Rendering col content requires outer wrapper form-item
-  renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
+  renderColContent?: (
+    renderCallbackParams: RenderCallbackParams,
+    opts: RenderOpts,
+  ) => VNode | VNode[] | string;
 
   renderComponentContent?:
-    | ((renderCallbackParams: RenderCallbackParams) => any)
+    | ((renderCallbackParams: RenderCallbackParams, opts: RenderOpts) => any)
     | VNode
     | VNode[]
     | string;
 
-  // Custom slot, in from-item
-  slot?: string;
-
   // Custom slot, similar to renderColContent
   colSlot?: string;
 
@@ -209,6 +220,29 @@ export interface FormSchema {
 
   dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
 }
+export interface ComponentFormSchema extends BaseFormSchema {
+  // render component
+  component: ComponentType;
+}
+
+export interface SlotFormSchema extends BaseFormSchema {
+  // Custom slot, in from-item
+  slot: string;
+}
+
+export type FormSchema = ComponentFormSchema | SlotFormSchema;
+
+export type FormSchemaInner = Partial<ComponentFormSchema> &
+  Partial<SlotFormSchema> &
+  BaseFormSchema;
+
+export function isSlotFormSchema(schema: FormSchemaInner): schema is SlotFormSchema {
+  return 'slot' in schema;
+}
+
+export function isComponentFormSchema(schema: FormSchemaInner): schema is ComponentFormSchema {
+  return !isSlotFormSchema(schema);
+}
 export interface HelpComponentProps {
   maxWidth: string;
   // Whether to display the serial number
diff --git a/apps/admin/src/components/Form/src/types/index.ts b/apps/admin/src/components/Form/src/types/index.ts
index 294b080..79e4aaa 100644
--- a/apps/admin/src/components/Form/src/types/index.ts
+++ b/apps/admin/src/components/Form/src/types/index.ts
@@ -106,9 +106,11 @@ export type ComponentType =
   | 'RangePicker'
   | 'WeekPicker'
   | 'TimePicker'
+  | 'TimeRangePicker'
   | 'Switch'
   | 'StrengthMeter'
   | 'Upload'
+  | 'ImageUpload'
   | 'IconPicker'
   | 'Render'
   | 'Slider'
diff --git a/apps/admin/src/components/Icon/src/IconPicker.vue b/apps/admin/src/components/Icon/src/IconPicker.vue
index adcf01a..d236b66 100644
--- a/apps/admin/src/components/Icon/src/IconPicker.vue
+++ b/apps/admin/src/components/Icon/src/IconPicker.vue
@@ -65,7 +65,7 @@
   </a-input>
 </template>
 <script lang="ts" setup>
-  import { ref, watchEffect, watch, unref } from 'vue';
+  import { ref, watchEffect, watch } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { ScrollContainer } from '/@/components/Container';
   import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
@@ -73,14 +73,11 @@
   import SvgIcon from './SvgIcon.vue';
 
   import iconsData from '../data/icons.data';
-  import { propTypes } from '/@/utils/propTypes';
   import { usePagination } from '/@/hooks/web/usePagination';
   import { useDebounceFn } from '@vueuse/core';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import svgIcons from 'virtual:svg-icons-names';
-
+  import { copyText } from '/@/utils/copyTextToClipboard';
   // 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
   const AInput = Input;
   const APopover = Popover;
@@ -100,15 +97,23 @@
   }
 
   function getSvgIcons() {
-    return svgIcons.map((icon) => icon.replace('icon-', ''));
+    return svgIcons.map((icon: string) => icon.replace('icon-', ''));
+  }
+
+  export interface Props {
+    value?: string;
+    width?: string;
+    pageSize?: number;
+    copy?: boolean;
+    mode?: 'svg' | 'iconify';
   }
 
-  const props = defineProps({
-    value: propTypes.string,
-    width: propTypes.string.def('100%'),
-    pageSize: propTypes.number.def(140),
-    copy: propTypes.bool.def(false),
-    mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
+  const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    width: '100%',
+    pageSize: 140,
+    copy: false,
+    mode: 'iconify',
   });
 
   const emit = defineEmits(['change', 'update:value']);
@@ -125,17 +130,6 @@
 
   const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
 
-  let clipboardRef;
-  let isSuccessRef;
-
-  if (props.copy) {
-    const clipboard = useCopyToClipboard(props.value);
-    clipboardRef = clipboard?.clipboardRef;
-    isSuccessRef = clipboard?.isSuccessRef;
-  }
-
-  const { createMessage } = useMessage();
-
   const { getPaginationList, getTotal, setCurrentPage } = usePagination(
     currentList,
     props.pageSize,
@@ -160,15 +154,13 @@
   function handleClick(icon: string) {
     currentSelect.value = icon;
     if (props.copy) {
-      clipboardRef.value = icon;
-      if (unref(isSuccessRef)) {
-        createMessage.success(t('component.icon.copy'));
-      }
+      copyText(icon, t('component.icon.copy'));
     }
   }
 
   function handleSearchChange(e: Event) {
-    const value = e.target.value;
+    const value = (e.target as HTMLInputElement).value;
+
     if (!value) {
       setCurrentPage(1);
       currentList.value = icons;
diff --git a/apps/admin/src/components/Loading/src/Loading.vue b/apps/admin/src/components/Loading/src/Loading.vue
index 3803085..d5e9383 100644
--- a/apps/admin/src/components/Loading/src/Loading.vue
+++ b/apps/admin/src/components/Loading/src/Loading.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     class="full-loading"
-    :class="{ absolute, [theme]: !!theme }"
+    :class="{ absolute, [`${theme}`]: !!theme }"
     :style="[background ? `background-color: ${background}` : '']"
     v-show="loading"
   >
diff --git a/apps/admin/src/components/Markdown/src/MarkdownViewer.vue b/apps/admin/src/components/Markdown/src/MarkdownViewer.vue
index f588543..3c9cb17 100644
--- a/apps/admin/src/components/Markdown/src/MarkdownViewer.vue
+++ b/apps/admin/src/components/Markdown/src/MarkdownViewer.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { defineProps, onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue';
+  import { onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue';
   import VditorPreview from 'vditor/dist/method.min';
   import { onMountedOrActivated } from '@vben/hooks';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
diff --git a/apps/admin/src/components/Menu/src/BasicMenu.vue b/apps/admin/src/components/Menu/src/BasicMenu.vue
index ca8dcaa..81d340f 100644
--- a/apps/admin/src/components/Menu/src/BasicMenu.vue
+++ b/apps/admin/src/components/Menu/src/BasicMenu.vue
@@ -20,7 +20,7 @@
 <script lang="ts">
   import type { MenuState } from './types';
   import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue';
-  import { Menu } from 'ant-design-vue';
+  import { Menu, MenuProps } from 'ant-design-vue';
   import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
   import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
   import { useOpenKeys } from './useOpenKeys';
@@ -117,7 +117,7 @@
           },
         );
 
-      async function handleMenuClick({ key }: { key: string; keyPath: string[] }) {
+      const handleMenuClick: MenuProps['onClick'] = async ({ key }) => {
         const { beforeClickFn } = props;
         if (beforeClickFn && isFunction(beforeClickFn)) {
           const flag = await beforeClickFn(key);
@@ -127,7 +127,7 @@
 
         isClickGo.value = true;
         menuState.selectedKeys = [key];
-      }
+      };
 
       async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
         if (unref(isClickGo)) {
diff --git a/apps/admin/src/components/Menu/src/components/MenuItemContent.vue b/apps/admin/src/components/Menu/src/components/MenuItemContent.vue
index 3d3351d..ccf65be 100644
--- a/apps/admin/src/components/Menu/src/components/MenuItemContent.vue
+++ b/apps/admin/src/components/Menu/src/components/MenuItemContent.vue
@@ -1,5 +1,6 @@
 <template>
   <span :class="`${prefixCls}- flex items-center `">
+    <img v-if="getImg" :src="getImg" class="w-18px h-18px align-top mr-2" />
     <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
     {{ getI18nName }}
   </span>
@@ -22,12 +23,14 @@
     setup(props) {
       const { prefixCls } = useDesign('basic-menu-item-content');
       const getI18nName = computed(() => t(props.item?.name));
-      const getIcon = computed(() => props.item?.icon);
+      const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+      const getImg = computed(() => props.item?.img);
 
       return {
         prefixCls,
         getI18nName,
         getIcon,
+        getImg,
       };
     },
   });
diff --git a/apps/admin/src/components/Menu/src/index.less b/apps/admin/src/components/Menu/src/index.less
index 8bfbb0d..ff85930 100644
--- a/apps/admin/src/components/Menu/src/index.less
+++ b/apps/admin/src/components/Menu/src/index.less
@@ -29,8 +29,8 @@
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
-          color: #fff;
           background-color: @top-menu-active-bg-color !important;
+          color: #fff;
         }
 
         .ant-menu-item:hover,
@@ -68,7 +68,7 @@
   }
 
   .ant-menu-inline.ant-menu-sub {
-    box-shadow: unset !important;
     transition: unset;
+    box-shadow: unset !important;
   }
 }
diff --git a/apps/admin/src/components/Menu/src/props.ts b/apps/admin/src/components/Menu/src/props.ts
index 480297d..b9561c7 100644
--- a/apps/admin/src/components/Menu/src/props.ts
+++ b/apps/admin/src/components/Menu/src/props.ts
@@ -4,6 +4,7 @@ import type { PropType } from 'vue';
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 import { ThemeEnum } from '/@/enums/appEnum';
 import { propTypes } from '/@/utils/propTypes';
+import type { Key } from './types';
 import type { MenuTheme } from 'ant-design-vue';
 import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
 
@@ -35,7 +36,7 @@ export const basicProps = {
   isHorizontal: propTypes.bool,
   accordion: propTypes.bool.def(true),
   beforeClickFn: {
-    type: Function as PropType<(key: string) => Promise<boolean>>,
+    type: Function as PropType<(key: Key) => Promise<boolean>>,
   },
 };
 
diff --git a/apps/admin/src/components/Menu/src/types.ts b/apps/admin/src/components/Menu/src/types.ts
index ad711c2..a4c881c 100644
--- a/apps/admin/src/components/Menu/src/types.ts
+++ b/apps/admin/src/components/Menu/src/types.ts
@@ -1,25 +1,17 @@
-// import { ComputedRef } from 'vue';
-// import { ThemeEnum } from '/@/enums/appEnum';
-// import { MenuModeEnum } from '/@/enums/menuEnum';
+export type Key = string | number;
 export interface MenuState {
   // 默认选中的列表
-  defaultSelectedKeys: string[];
-
-  // 模式
-  // mode: MenuModeEnum;
-
-  // // 主题
-  // theme: ComputedRef<ThemeEnum> | ThemeEnum;
+  defaultSelectedKeys: Key[];
 
   // 缩进
   inlineIndent?: number;
 
   // 展开数组
-  openKeys: string[];
+  openKeys: Key[];
 
   // 当前选中的菜单项 key 数组
-  selectedKeys: string[];
+  selectedKeys: Key[];
 
   // 收缩状态下展开的数组
-  collapsedOpenKeys: string[];
+  collapsedOpenKeys: Key[];
 }
diff --git a/apps/admin/src/components/Menu/src/useOpenKeys.ts b/apps/admin/src/components/Menu/src/useOpenKeys.ts
index fc0b5a5..14793c0 100644
--- a/apps/admin/src/components/Menu/src/useOpenKeys.ts
+++ b/apps/admin/src/components/Menu/src/useOpenKeys.ts
@@ -1,6 +1,6 @@
 import { MenuModeEnum } from '/@/enums/menuEnum';
 import type { Menu as MenuType } from '/@/router/types';
-import type { MenuState } from './types';
+import type { MenuState, Key } from './types';
 import { computed, Ref, toRaw, unref } from 'vue';
 import { useTimeoutFn } from '@vben/hooks';
 import { uniq } from 'lodash-es';
@@ -53,13 +53,13 @@ export function useOpenKeys(
     menuState.openKeys = [];
   }
 
-  function handleOpenChange(openKeys: string[]) {
+  function handleOpenChange(openKeys: Key[]) {
     if (unref(mode) === MenuModeEnum.HORIZONTAL || !unref(accordion) || unref(getIsMixSidebar)) {
       menuState.openKeys = openKeys;
     } else {
       // const menuList = toRaw(menus.value);
       // getAllParentPath(menuList, path);
-      const rootSubMenuKeys: string[] = [];
+      const rootSubMenuKeys: Key[] = [];
       for (const { children, path } of unref(menus)) {
         if (children && children.length > 0) {
           rootSubMenuKeys.push(path);
diff --git a/apps/admin/src/components/Modal/src/BasicModal.vue b/apps/admin/src/components/Modal/src/BasicModal.vue
index 959e6db..39288c2 100644
--- a/apps/admin/src/components/Modal/src/BasicModal.vue
+++ b/apps/admin/src/components/Modal/src/BasicModal.vue
@@ -34,9 +34,9 @@
       :loading-tip="getProps.loadingTip"
       :minHeight="getProps.minHeight"
       :height="getWrapperHeight"
-      :visible="visibleRef"
+      :open="openRef"
       :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-      v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
+      v-bind="omit(getProps.wrapperProps, 'open', 'height', 'modalFooterHeight')"
       @ext-height="handleExtHeight"
       @height-change="handleHeightChange"
     >
@@ -79,9 +79,9 @@
     components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
     inheritAttrs: false,
     props: basicProps,
-    emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible'],
+    emits: ['open-change', 'height-change', 'cancel', 'ok', 'register', 'update:open'],
     setup(props, { emit, attrs }) {
-      const visibleRef = ref(false);
+      const openRef = ref(false);
       const propsRef = ref<Partial<ModalProps> | null>(null);
       const modalWrapperRef = ref<any>(null);
       const { prefixCls } = useDesign('basic-modal');
@@ -90,7 +90,7 @@
       const extHeightRef = ref(0);
       const modalMethods: ModalMethods = {
         setModalProps,
-        emitVisible: undefined,
+        emitOpen: undefined,
         redoModalHeight: () => {
           nextTick(() => {
             if (unref(modalWrapperRef)) {
@@ -123,7 +123,7 @@
       const getProps = computed((): Recordable => {
         const opt = {
           ...unref(getMergeProps),
-          visible: unref(visibleRef),
+          open: unref(openRef),
           okButtonProps: undefined,
           cancelButtonProps: undefined,
           title: undefined,
@@ -138,10 +138,10 @@
         const attr = {
           ...attrs,
           ...unref(getMergeProps),
-          visible: unref(visibleRef),
+          open: unref(openRef),
         };
-        attr['wrapClassName'] = `${attr?.['wrapClassName'] || ''} ${unref(getWrapClassName)}`;
-
+        attr['wrapClassName'] =
+          `${attr?.['wrapClassName'] || ''} ${unref(getWrapClassName)}` + 'vben-basic-modal-wrap';
         if (unref(fullScreenRef)) {
           return omit(attr, ['height', 'title']);
         }
@@ -154,16 +154,16 @@
       });
 
       watchEffect(() => {
-        visibleRef.value = !!props.visible;
+        openRef.value = !!props.open;
         fullScreenRef.value = !!props.defaultFullscreen;
       });
 
       watch(
-        () => unref(visibleRef),
+        () => unref(openRef),
         (v) => {
-          emit('visible-change', v);
-          emit('update:visible', v);
-          instance && modalMethods.emitVisible?.(v, instance.uid);
+          emit('open-change', v);
+          emit('update:open', v);
+          instance && modalMethods.emitOpen?.(v, instance.uid);
           nextTick(() => {
             if (props.scrollTop && v && unref(modalWrapperRef)) {
               (unref(modalWrapperRef) as any).scrollTop();
@@ -182,11 +182,11 @@
         if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
         if (props.closeFunc && isFunction(props.closeFunc)) {
           const isClose: boolean = await props.closeFunc();
-          visibleRef.value = !isClose;
+          openRef.value = !isClose;
           return;
         }
 
-        visibleRef.value = false;
+        openRef.value = false;
         emit('cancel', e);
       }
 
@@ -196,8 +196,8 @@
       function setModalProps(props: Partial<ModalProps>): void {
         // Keep the last setModalProps
         propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
-        if (Reflect.has(props, 'visible')) {
-          visibleRef.value = !!props.visible;
+        if (Reflect.has(props, 'open')) {
+          openRef.value = !!props.open;
         }
         if (Reflect.has(props, 'defaultFullscreen')) {
           fullScreenRef.value = !!props.defaultFullscreen;
@@ -230,7 +230,7 @@
         fullScreenRef,
         getMergeProps,
         handleOk,
-        visibleRef,
+        openRef,
         omit,
         modalWrapperRef,
         handleExtHeight,
diff --git a/apps/admin/src/components/Modal/src/components/Modal.tsx b/apps/admin/src/components/Modal/src/components/Modal.tsx
index fe3d88b..3b3a50d 100644
--- a/apps/admin/src/components/Modal/src/components/Modal.tsx
+++ b/apps/admin/src/components/Modal/src/components/Modal.tsx
@@ -11,10 +11,10 @@ export default defineComponent({
   props: basicProps as any,
   emits: ['cancel'],
   setup(props, { slots, emit }) {
-    const { visible, draggable, destroyOnClose } = toRefs(props);
+    const { open, draggable, destroyOnClose } = toRefs(props);
     const attrs = useAttrs();
     useModalDragMove({
-      visible,
+      open,
       destroyOnClose,
       draggable,
     });
diff --git a/apps/admin/src/components/Modal/src/components/ModalWrapper.vue b/apps/admin/src/components/Modal/src/components/ModalWrapper.vue
index 037538c..9c5ad68 100644
--- a/apps/admin/src/components/Modal/src/components/ModalWrapper.vue
+++ b/apps/admin/src/components/Modal/src/components/ModalWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollContainer ref="wrapperRef">
+  <ScrollContainer ref="wrapperRef" :scrollHeight="realHeight">
     <div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
       <slot></slot>
     </div>
@@ -32,7 +32,7 @@
     minHeight: { type: Number, default: 200 },
     height: { type: Number },
     footerOffset: { type: Number, default: 0 },
-    visible: { type: Boolean },
+    open: { type: Boolean },
     fullScreen: { type: Boolean },
     loadingTip: { type: String },
   };
@@ -49,11 +49,11 @@
       const realHeightRef = ref(0);
       const minRealHeightRef = ref(0);
 
-      let realHeight = 0;
+      const realHeight = ref(0);
 
       let stopElResizeFn: AnyFunction = () => {};
 
-      useWindowSizeFn(setModalHeight.bind(null, false));
+      useWindowSizeFn(setModalHeight.bind(null));
 
       useMutationObserver(
         spinRef,
@@ -112,8 +112,8 @@
 
       async function setModalHeight() {
         // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
-        // 加上这个,就必须在使用的时候传递父级的visible
-        if (!props.visible) return;
+        // 加上这个,就必须在使用的时候传递父级的open
+        if (!props.open) return;
         const wrapperRefDom = unref(wrapperRef);
         if (!wrapperRefDom) return;
 
@@ -145,7 +145,7 @@
           if (!spinEl) return;
           await nextTick();
           // if (!realHeight) {
-          realHeight = spinEl.scrollHeight;
+          realHeight.value = spinEl.scrollHeight;
           // }
 
           if (props.fullScreen) {
@@ -154,9 +154,9 @@
           } else {
             realHeightRef.value = props.height
               ? props.height
-              : realHeight > maxHeight
+              : realHeight.value > maxHeight
               ? maxHeight
-              : realHeight;
+              : realHeight.value;
           }
           emit('height-change', unref(realHeightRef));
         } catch (error) {
@@ -164,7 +164,7 @@
         }
       }
 
-      return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight };
+      return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight, realHeight };
     },
   });
 </script>
diff --git a/apps/admin/src/components/Modal/src/hooks/useModal.ts b/apps/admin/src/components/Modal/src/hooks/useModal.ts
index c4cade2..f2e4fd8 100644
--- a/apps/admin/src/components/Modal/src/hooks/useModal.ts
+++ b/apps/admin/src/components/Modal/src/hooks/useModal.ts
@@ -24,7 +24,7 @@ import { error } from '/@/utils/log';
 
 const dataTransfer = reactive<any>({});
 
-const visibleData = reactive<{ [key: number]: boolean }>({});
+const openData = reactive<{ [key: number]: boolean }>({});
 
 /**
  * @description: Applicable to independent modal and call outside
@@ -32,9 +32,9 @@ const visibleData = reactive<{ [key: number]: boolean }>({});
 export function useModal(): UseModalReturnType {
   const modal = ref<Nullable<ModalMethods>>(null);
   const loaded = ref<Nullable<boolean>>(false);
-  const uid = ref<string>('');
+  const uid = ref<number>(0);
 
-  function register(modalMethod: ModalMethods, uuid: string) {
+  function register(modalMethod: ModalMethods, uuid: number) {
     if (!getCurrentInstance()) {
       throw new Error('useModal() can only be used inside setup() or functional components!');
     }
@@ -43,14 +43,14 @@ export function useModal(): UseModalReturnType {
       onUnmounted(() => {
         modal.value = null;
         loaded.value = false;
-        dataTransfer[unref(uid)] = null;
+        dataTransfer[String(unref(uid))] = null;
       });
     if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
 
     modal.value = modalMethod;
     loaded.value = true;
-    modalMethod.emitVisible = (visible: boolean, uid: number) => {
-      visibleData[uid] = visible;
+    modalMethod.emitOpen = (open: boolean, uid: number) => {
+      openData[uid] = open;
     };
   }
 
@@ -67,17 +67,17 @@ export function useModal(): UseModalReturnType {
       getInstance()?.setModalProps(props);
     },
 
-    getVisible: computed((): boolean => {
-      return visibleData[~~unref(uid)];
+    getOpen: computed((): boolean => {
+      return openData[~~unref(uid)];
     }),
 
     redoModalHeight: () => {
       getInstance()?.redoModalHeight?.();
     },
 
-    openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => {
+    openModal: <T = any>(open = true, data?: T, openOnSet = true): void => {
       getInstance()?.setModalProps({
-        visible: visible,
+        open,
       });
 
       if (!data) return;
@@ -94,7 +94,7 @@ export function useModal(): UseModalReturnType {
     },
 
     closeModal: () => {
-      getInstance()?.setModalProps({ visible: false });
+      getInstance()?.setModalProps({ open: false });
     },
   };
   return [register, methods];
@@ -103,7 +103,7 @@ export function useModal(): UseModalReturnType {
 export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
   const modalInstanceRef = ref<Nullable<ModalMethods>>(null);
   const currentInstance = getCurrentInstance();
-  const uidRef = ref<string>('');
+  const uidRef = ref<number>(0);
 
   const getInstance = () => {
     const instance = unref(modalInstanceRef);
@@ -113,7 +113,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
     return instance;
   };
 
-  const register = (modalInstance: ModalMethods, uuid: string) => {
+  const register = (modalInstance: ModalMethods, uuid: number) => {
     isProdMode() &&
       tryOnUnmounted(() => {
         modalInstanceRef.value = null;
@@ -138,8 +138,8 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
       changeLoading: (loading = true) => {
         getInstance()?.setModalProps({ loading });
       },
-      getVisible: computed((): boolean => {
-        return visibleData[~~unref(uidRef)];
+      getOpen: computed((): boolean => {
+        return openData[~~unref(uidRef)];
       }),
 
       changeOkLoading: (loading = true) => {
@@ -147,7 +147,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
       },
 
       closeModal: () => {
-        getInstance()?.setModalProps({ visible: false });
+        getInstance()?.setModalProps({ open: false });
       },
 
       setModalProps: (props: Partial<ModalProps>) => {
diff --git a/apps/admin/src/components/Modal/src/hooks/useModalDrag.ts b/apps/admin/src/components/Modal/src/hooks/useModalDrag.ts
index 5ece37a..d17b27e 100644
--- a/apps/admin/src/components/Modal/src/hooks/useModalDrag.ts
+++ b/apps/admin/src/components/Modal/src/hooks/useModalDrag.ts
@@ -4,7 +4,7 @@ import { useTimeoutFn } from '@vben/hooks';
 export interface UseModalDragMoveContext {
   draggable: Ref<boolean>;
   destroyOnClose: Ref<boolean | undefined> | undefined;
-  visible: Ref<boolean>;
+  open: Ref<boolean>;
 }
 
 export function useModalDragMove(context: UseModalDragMoveContext) {
@@ -97,7 +97,7 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
   };
 
   watchEffect(() => {
-    if (!unref(context.visible) || !unref(context.draggable)) {
+    if (!unref(context.open) || !unref(context.draggable)) {
       return;
     }
     useTimeoutFn(() => {
diff --git a/apps/admin/src/components/Modal/src/index.less b/apps/admin/src/components/Modal/src/index.less
index a23be29..c5e5e6d 100644
--- a/apps/admin/src/components/Modal/src/index.less
+++ b/apps/admin/src/components/Modal/src/index.less
@@ -1,11 +1,9 @@
+/* stylelint-disable media-feature-range-notation */
 .fullscreen-modal {
   overflow: hidden;
 
   .ant-modal {
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
+    inset: 0 !important;
     width: 100% !important;
     height: 100%;
 
@@ -13,9 +11,13 @@
       height: 100%;
     }
   }
+
+  .ant-modal-footer {
+    margin-top: 0;
+  }
 }
 
-.ant-modal {
+.vben-basic-modal-wrap .ant-modal {
   width: 520px;
   padding-bottom: 0;
 
@@ -53,6 +55,7 @@
   }
 
   &-content {
+    padding: 12px 8px !important;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
   }
 
@@ -63,8 +66,10 @@
   }
 
   &-close {
-    font-weight: normal;
+    width: auto !important;
     outline: none;
+    background: transparent !important;
+    font-weight: normal;
   }
 
   &-close-x {
@@ -110,16 +115,19 @@
 .ant-modal-confirm .ant-modal-body {
   padding: 24px !important;
 }
+
 @media screen and (max-height: 600px) {
   .ant-modal {
     top: 60px;
   }
 }
+
 @media screen and (max-height: 540px) {
   .ant-modal {
     top: 30px;
   }
 }
+
 @media screen and (max-height: 480px) {
   .ant-modal {
     top: 10px;
diff --git a/apps/admin/src/components/Modal/src/props.ts b/apps/admin/src/components/Modal/src/props.ts
index c3c70c6..209cfe3 100644
--- a/apps/admin/src/components/Modal/src/props.ts
+++ b/apps/admin/src/components/Modal/src/props.ts
@@ -6,7 +6,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 const { t } = useI18n();
 
 export const modalProps = {
-  visible: { type: Boolean },
+  open: { type: Boolean },
   scrollTop: { type: Boolean, default: true },
   height: { type: Number },
   minHeight: { type: Number },
@@ -73,7 +73,7 @@ export const basicProps = Object.assign({}, modalProps, {
 
   title: { type: String },
 
-  visible: { type: Boolean },
+  open: { type: Boolean },
 
   width: [String, Number] as PropType<string | number>,
 
diff --git a/apps/admin/src/components/Modal/src/typing.ts b/apps/admin/src/components/Modal/src/typing.ts
index 36a7e7c..a495529 100644
--- a/apps/admin/src/components/Modal/src/typing.ts
+++ b/apps/admin/src/components/Modal/src/typing.ts
@@ -5,16 +5,16 @@ import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
  */
 export interface ModalMethods {
   setModalProps: (props: Partial<ModalProps>) => void;
-  emitVisible?: (visible: boolean, uid: number) => void;
+  emitOpen?: (open: boolean, uid: number) => void;
   redoModalHeight?: () => void;
 }
 
-export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
+export type RegisterFn = (modalMethods: ModalMethods, uuid: number) => void;
 
 export interface ReturnMethods extends ModalMethods {
   openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void;
   closeModal: () => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
 }
 
 export type UseModalReturnType = [RegisterFn, ReturnMethods];
@@ -23,7 +23,7 @@ export interface ReturnInnerMethods extends ModalMethods {
   closeModal: () => void;
   changeLoading: (loading: boolean) => void;
   changeOkLoading: (loading: boolean) => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
   redoModalHeight: () => void;
 }
 
@@ -40,7 +40,7 @@ export interface ModalProps {
   // 是否可以进行全屏
   canFullscreen?: boolean;
   defaultFullscreen?: boolean;
-  visible?: boolean;
+  open?: boolean;
   // 温馨提醒信息
   helpMessage: string | string[];
 
@@ -203,7 +203,7 @@ export interface ModalWrapperProps {
   modalFooterHeight: number;
   minHeight: number;
   height: number;
-  visible: boolean;
+  open: boolean;
   fullScreen: boolean;
   useWrapper: boolean;
 }
diff --git a/apps/admin/src/components/Page/index.ts b/apps/admin/src/components/Page/index.ts
index 2d3f6dd..d096264 100644
--- a/apps/admin/src/components/Page/index.ts
+++ b/apps/admin/src/components/Page/index.ts
@@ -5,5 +5,3 @@ import pageWrapper from './src/PageWrapper.vue';
 
 export const PageFooter = withInstall(pageFooter);
 export const PageWrapper = withInstall(pageWrapper);
-
-export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
diff --git a/apps/admin/src/components/Page/src/PageFooter.vue b/apps/admin/src/components/Page/src/PageFooter.vue
index 70e8db0..8d45fb6 100644
--- a/apps/admin/src/components/Page/src/PageFooter.vue
+++ b/apps/admin/src/components/Page/src/PageFooter.vue
@@ -9,20 +9,17 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  export default defineComponent({
+  defineOptions({
     name: 'PageFooter',
     inheritAttrs: false,
-    setup() {
-      const { prefixCls } = useDesign('page-footer');
-      const { getCalcContentWidth } = useMenuSetting();
-      return { prefixCls, getCalcContentWidth };
-    },
   });
+
+  const { prefixCls } = useDesign('page-footer');
+  const { getCalcContentWidth } = useMenuSetting();
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-page-footer';
diff --git a/apps/admin/src/components/Page/src/PageWrapper.vue b/apps/admin/src/components/Page/src/PageWrapper.vue
index 1de1205..fc3024f 100644
--- a/apps/admin/src/components/Page/src/PageWrapper.vue
+++ b/apps/admin/src/components/Page/src/PageWrapper.vue
@@ -4,6 +4,7 @@
       :ghost="ghost"
       :title="title"
       v-bind="omit($attrs, 'class')"
+      :style="getHeaderStyle"
       ref="headerRef"
       v-if="getShowHeader"
     >
@@ -32,16 +33,17 @@
     </PageFooter>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import {
     CSSProperties,
     PropType,
     provide,
-    defineComponent,
     computed,
     watch,
     ref,
     unref,
+    useAttrs,
+    useSlots,
   } from 'vue';
 
   import PageFooter from './PageFooter.vue';
@@ -51,124 +53,128 @@
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
   import { useContentHeight } from '/@/hooks/web/useContentHeight';
-  import { PageWrapperFixedHeightKey } from '..';
+  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+  import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
 
-  export default defineComponent({
+  defineOptions({
     name: 'PageWrapper',
-    components: { PageFooter, PageHeader },
     inheritAttrs: false,
-    props: {
-      title: propTypes.string,
-      dense: propTypes.bool,
-      ghost: propTypes.bool,
-      content: propTypes.string,
-      contentStyle: {
-        type: Object as PropType<CSSProperties>,
+  });
+
+  const props = defineProps({
+    title: propTypes.string,
+    dense: propTypes.bool,
+    ghost: propTypes.bool,
+    headerSticky: propTypes.bool,
+    headerStyle: Object as PropType<CSSProperties>,
+    content: propTypes.string,
+    contentStyle: {
+      type: Object as PropType<CSSProperties>,
+    },
+    contentBackground: propTypes.bool,
+    contentFullHeight: propTypes.bool.def(false),
+    contentClass: propTypes.string,
+    fixedHeight: propTypes.bool,
+    upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
+  });
+
+  const attrs = useAttrs();
+  const slots = useSlots();
+
+  const wrapperRef = ref(null);
+  const headerRef = ref(null);
+  const contentRef = ref(null);
+  const footerRef = ref(null);
+  const { prefixCls } = useDesign('page-wrapper');
+
+  provide(
+    PageWrapperFixedHeightKey,
+    computed(() => props.fixedHeight),
+  );
+
+  const getIsContentFullHeight = computed(() => {
+    return props.contentFullHeight;
+  });
+
+  const getUpwardSpace = computed(() => props.upwardSpace);
+  const { redoHeight, setCompensation, contentHeight } = useContentHeight(
+    getIsContentFullHeight,
+    wrapperRef,
+    [headerRef, footerRef],
+    [contentRef],
+    getUpwardSpace,
+  );
+  setCompensation({ useLayoutFooter: true, elements: [footerRef] });
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--dense`]: props.dense,
+      },
+      attrs.class ?? {},
+    ];
+  });
+
+  const { headerHeightRef } = useLayoutHeight();
+  const getHeaderStyle = computed((): CSSProperties => {
+    const { headerSticky } = props;
+    if (!headerSticky) {
+      return {};
+    }
+
+    return {
+      position: 'sticky',
+      top: `${unref(headerHeightRef)}px`,
+      ...props.headerStyle,
+    };
+  });
+
+  const getShowHeader = computed(
+    () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
+  );
+
+  const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
+
+  const getHeaderSlots = computed(() => {
+    return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
+  });
+
+  const getContentStyle = computed((): CSSProperties => {
+    const { contentFullHeight, contentStyle, fixedHeight } = props;
+    if (!contentFullHeight) {
+      return { ...contentStyle };
+    }
+
+    const height = `${unref(contentHeight)}px`;
+    return {
+      ...contentStyle,
+      minHeight: height,
+      ...(fixedHeight ? { height } : {}),
+    };
+  });
+
+  const getContentClass = computed(() => {
+    const { contentBackground, contentClass } = props;
+    return [
+      `${prefixCls}-content`,
+      contentClass,
+      {
+        [`${prefixCls}-content-bg`]: contentBackground,
       },
-      contentBackground: propTypes.bool,
-      contentFullHeight: propTypes.bool,
-      contentClass: propTypes.string,
-      fixedHeight: propTypes.bool,
-      upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
+    ];
+  });
+
+  watch(
+    () => [getShowFooter.value],
+    () => {
+      redoHeight();
     },
-    setup(props, { slots, attrs }) {
-      const wrapperRef = ref(null);
-      const headerRef = ref(null);
-      const contentRef = ref(null);
-      const footerRef = ref(null);
-      const { prefixCls } = useDesign('page-wrapper');
-
-      provide(
-        PageWrapperFixedHeightKey,
-        computed(() => props.fixedHeight),
-      );
-
-      const getIsContentFullHeight = computed(() => {
-        return props.contentFullHeight;
-      });
-
-      const getUpwardSpace = computed(() => props.upwardSpace);
-      const { redoHeight, setCompensation, contentHeight } = useContentHeight(
-        getIsContentFullHeight,
-        wrapperRef,
-        [headerRef, footerRef],
-        [contentRef],
-        getUpwardSpace,
-      );
-      setCompensation({ useLayoutFooter: true, elements: [footerRef] });
-
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--dense`]: props.dense,
-          },
-          attrs.class ?? {},
-        ];
-      });
-
-      const getShowHeader = computed(
-        () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
-      );
-
-      const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
-
-      const getHeaderSlots = computed(() => {
-        return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
-      });
-
-      const getContentStyle = computed((): CSSProperties => {
-        const { contentFullHeight, contentStyle, fixedHeight } = props;
-        if (!contentFullHeight) {
-          return { ...contentStyle };
-        }
-
-        const height = `${unref(contentHeight)}px`;
-        return {
-          ...contentStyle,
-          minHeight: height,
-          ...(fixedHeight ? { height } : {}),
-        };
-      });
-
-      const getContentClass = computed(() => {
-        const { contentBackground, contentClass } = props;
-        return [
-          `${prefixCls}-content`,
-          contentClass,
-          {
-            [`${prefixCls}-content-bg`]: contentBackground,
-          },
-        ];
-      });
-
-      watch(
-        () => [getShowFooter.value],
-        () => {
-          redoHeight();
-        },
-        {
-          flush: 'post',
-          immediate: true,
-        },
-      );
-
-      return {
-        getContentStyle,
-        wrapperRef,
-        headerRef,
-        contentRef,
-        footerRef,
-        getClass,
-        getHeaderSlots,
-        prefixCls,
-        getShowHeader,
-        getShowFooter,
-        omit,
-        getContentClass,
-      };
+    {
+      flush: 'post',
+      immediate: true,
     },
-  });
+  );
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-page-wrapper';
diff --git a/apps/admin/src/components/Preview/src/Functional.vue b/apps/admin/src/components/Preview/src/Functional.vue
index 2fb1313..b798381 100644
--- a/apps/admin/src/components/Preview/src/Functional.vue
+++ b/apps/admin/src/components/Preview/src/Functional.vue
@@ -210,8 +210,8 @@
           imgState.currentUrl = url;
           imgState.status = StatueEnum.DONE;
         };
-        img.onerror = (e: Event) => {
-          const ele: EventTarget[] = e.composedPath();
+        img.onerror = (e: Event | string) => {
+          const ele: EventTarget[] = (e as Event).composedPath();
           ele &&
             emit('img-error', {
               index: imgState.currentIndex,
diff --git a/apps/admin/src/components/Preview/src/typing.ts b/apps/admin/src/components/Preview/src/typing.ts
index bbb8a83..4b14566 100644
--- a/apps/admin/src/components/Preview/src/typing.ts
+++ b/apps/admin/src/components/Preview/src/typing.ts
@@ -6,8 +6,8 @@ export interface Options {
   defaultWidth?: number;
   maskClosable?: boolean;
   rememberState?: boolean;
-  onImgLoad?: ({ index: number, url: string, dom: HTMLImageElement }) => void;
-  onImgError?: ({ index: number, url: string, dom: HTMLImageElement }) => void;
+  onImgLoad?: (params: { index: number; url: string; dom: HTMLImageElement }) => void;
+  onImgError?: (params: { index: number; url: string; dom: HTMLImageElement }) => void;
 }
 
 export interface Props {
diff --git a/apps/admin/src/components/Progress/index.vue b/apps/admin/src/components/Progress/index.vue
deleted file mode 100644
index 7e70a8a..0000000
--- a/apps/admin/src/components/Progress/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <Progress v-bind="myProps" />
-</template>
-
-<script lang="ts" setup>
-  import { computed, PropType } from 'vue';
-  import { progressProps, type ProgressProps } from 'ant-design-vue/es/progress/props';
-  import { Progress } from 'ant-design-vue';
-
-  type StrokeColorType = ProgressProps['strokeColor'];
-  type StrokeColorFn = (percent) => StrokeColorType;
-
-  const props = defineProps({
-    ...progressProps(),
-    strokeColor: {
-      type: [String, Object, Function] as PropType<StrokeColorType | StrokeColorFn>,
-    },
-  });
-
-  const myProps = computed(() => {
-    if (typeof props.strokeColor === 'function') {
-      return {
-        ...props,
-        strokeColor: props.strokeColor(props.percent),
-      };
-    } else {
-      return {
-        ...props,
-        strokeColor: props.strokeColor as StrokeColorType,
-      };
-    }
-  });
-</script>
diff --git a/apps/admin/src/components/Prompt/dialog.vue b/apps/admin/src/components/Prompt/dialog.vue
new file mode 100644
index 0000000..36413b0
--- /dev/null
+++ b/apps/admin/src/components/Prompt/dialog.vue
@@ -0,0 +1,49 @@
+<template>
+  <Modal
+    v-model:open="open"
+    :title="title"
+    @ok="handleSubmit"
+    :destroyOnClose="true"
+    :width="width || '500px'"
+    okText="确定"
+    cancelText="取消"
+  >
+    <div class="pt-5 pr-3px">
+      <BasicForm @register="register" />
+    </div>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Modal } from 'ant-design-vue';
+  import { FormSchema } from '/@/components/Form';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+
+  const open = ref<boolean>(true);
+  const props = defineProps<{
+    title: string;
+    addFormSchemas: FormSchema[];
+    onOK?: Fn;
+    width?: string;
+    labelWidth?: number;
+    layout?: 'horizontal' | 'vertical' | 'inline';
+  }>();
+
+  const [register, { validate }] = useForm({
+    schemas: props.addFormSchemas,
+    showActionButtonGroup: false,
+    labelWidth: props.labelWidth || 80,
+    layout: props.layout || 'horizontal',
+  });
+
+  async function handleSubmit() {
+    const row = await validate();
+    if (props.onOK) {
+      await props.onOK(row.txt);
+    }
+    open.value = false;
+  }
+</script>
+
+<style scoped></style>
diff --git a/apps/admin/src/components/Prompt/index.ts b/apps/admin/src/components/Prompt/index.ts
new file mode 100644
index 0000000..f258c66
--- /dev/null
+++ b/apps/admin/src/components/Prompt/index.ts
@@ -0,0 +1,39 @@
+import { createVNode, VNode, defineComponent, h, render, reactive } from 'vue';
+import { PromptProps, genFormSchemas } from './state';
+import Dialog from './dialog.vue';
+
+export function createPrompt(props: PromptProps) {
+  let vm: Nullable<VNode> = null;
+  const data = reactive({
+    ...props,
+    addFormSchemas: genFormSchemas({
+      label: props.label,
+      required: props.required,
+      inputType: props.inputType,
+      defaultValue: props.defaultValue,
+    }),
+  });
+  const DialogWrap = defineComponent({
+    render() {
+      return h(Dialog, { ...data } as any);
+    },
+  });
+
+  vm = createVNode(DialogWrap);
+
+  render(vm, document.createElement('div'));
+
+  function close() {
+    if (vm?.el && vm.el.parentNode) {
+      vm.el.parentNode.removeChild(vm.el);
+    }
+  }
+
+  return {
+    vm,
+    close,
+    get $el() {
+      return vm?.el as HTMLElement;
+    },
+  };
+}
diff --git a/apps/admin/src/components/Prompt/state.ts b/apps/admin/src/components/Prompt/state.ts
new file mode 100644
index 0000000..c90079d
--- /dev/null
+++ b/apps/admin/src/components/Prompt/state.ts
@@ -0,0 +1,69 @@
+import { FormSchema } from '/@/components/Form';
+
+type InputType = 'InputTextArea' | 'InputNumber' | 'Input';
+export interface PromptProps {
+  title: string;
+  label?: string;
+  required?: boolean;
+  onOK?: Fn;
+  inputType?: InputType;
+  labelWidth?: number;
+  width?: string;
+  layout?: 'horizontal' | 'vertical' | 'inline';
+  defaultValue?: string | number;
+}
+
+interface genFormSchemasProps {
+  label?: string;
+  required?: boolean;
+  inputType?: InputType;
+  defaultValue?: string | number;
+}
+
+const inputTypeMap: {
+  [key in InputType]: {
+    colProps: { span: number; offset?: number };
+    componentProps: FormSchema['componentProps'];
+  };
+} = {
+  InputTextArea: {
+    colProps: { span: 23 },
+    componentProps: {
+      placeholder: '请输入内容',
+      autoSize: { minRows: 2, maxRows: 6 },
+      maxlength: 255,
+      showCount: true,
+    },
+  },
+  InputNumber: {
+    colProps: { span: 20, offset: 2 },
+    componentProps: {
+      placeholder: '请输入数字',
+      min: 0,
+    },
+  },
+  Input: {
+    colProps: { span: 20, offset: 2 },
+    componentProps: {
+      placeholder: '请输入内容',
+      min: 0,
+    },
+  },
+};
+
+export function genFormSchemas({
+  label = '备注信息',
+  required = true,
+  inputType = 'InputTextArea',
+  defaultValue = '',
+}: genFormSchemasProps) {
+  const formSchema: FormSchema = {
+    field: 'txt',
+    component: inputType,
+    label,
+    defaultValue,
+    required: Boolean(required),
+    ...inputTypeMap[inputType],
+  };
+  return [formSchema];
+}
diff --git a/apps/admin/src/components/Scrollbar/src/Scrollbar.vue b/apps/admin/src/components/Scrollbar/src/Scrollbar.vue
index daeb230..0e6a5b2 100644
--- a/apps/admin/src/components/Scrollbar/src/Scrollbar.vue
+++ b/apps/admin/src/components/Scrollbar/src/Scrollbar.vue
@@ -3,7 +3,7 @@
     <div
       ref="wrap"
       :class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default']"
-      :style="style"
+      :style="wrapStyle"
       @scroll="handleScroll"
     >
       <component :is="tag" ref="resize" :class="['scrollbar__view', viewClass]" :style="viewStyle">
@@ -19,7 +19,6 @@
 <script lang="ts">
   import { addResizeListener, removeResizeListener } from '/@/utils/event';
   import componentSetting from '/@/settings/componentSetting';
-  import { toObject } from './util';
   import {
     defineComponent,
     ref,
@@ -27,9 +26,11 @@
     onBeforeUnmount,
     nextTick,
     provide,
-    computed,
     unref,
+    watch,
+    type PropType,
   } from 'vue';
+  import type { StyleValue } from '/@/utils/types';
   import Bar from './bar';
 
   const { scrollbar } = componentSetting;
@@ -44,7 +45,7 @@
         default: scrollbar?.native ?? false,
       },
       wrapStyle: {
-        type: [String, Array],
+        type: [String, Array, Object] as PropType<StyleValue>,
         default: '',
       },
       wrapClass: {
@@ -64,6 +65,11 @@
         type: String,
         default: 'div',
       },
+      scrollHeight: {
+        // 用于监控内部scrollHeight的变化
+        type: Number,
+        default: 0,
+      },
     },
     setup(props) {
       const sizeWidth = ref('0');
@@ -75,13 +81,6 @@
 
       provide('scroll-bar-wrap', wrap);
 
-      const style = computed(() => {
-        if (Array.isArray(props.wrapStyle)) {
-          return toObject(props.wrapStyle);
-        }
-        return props.wrapStyle;
-      });
-
       const handleScroll = () => {
         if (!props.native) {
           moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight;
@@ -99,6 +98,14 @@
         sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
       };
 
+      watch(
+        () => props.scrollHeight,
+        () => {
+          if (props.native) return;
+          update();
+        },
+      );
+
       onMounted(() => {
         if (props.native) return;
         nextTick(update);
@@ -123,7 +130,6 @@
         moveY,
         sizeWidth,
         sizeHeight,
-        style,
         wrap,
         resize,
         update,
diff --git a/apps/admin/src/components/Scrollbar/src/util.ts b/apps/admin/src/components/Scrollbar/src/util.ts
index 77694a9..c6b689a 100644
--- a/apps/admin/src/components/Scrollbar/src/util.ts
+++ b/apps/admin/src/components/Scrollbar/src/util.ts
@@ -1,4 +1,5 @@
 import type { BarMap } from './types';
+import type { MergeAll } from '/@/utils/types';
 
 export const BAR_MAP: BarMap = {
   vertical: {
@@ -36,12 +37,20 @@ export function renderThumbStyle({ move, size, bar }) {
   return style;
 }
 
-function extend<T, K>(to: T, _from: K): T & K {
+function extend<T extends object, K extends object>(to: T, _from: K): T & K {
   return Object.assign(to, _from);
 }
 
-export function toObject<T>(arr: Array<T>): Recordable<T> {
-  const res = {};
+/**
+ * [
+ *  { name: 'zhangsan', age: 18 },
+ *  { sex: 'male', age: 20 }
+ * ]
+ * =>
+ * { name: 'zhangsan', sex: 'male', age: 20 }
+ */
+export function toObject<T extends object[]>(arr: T): MergeAll<T> {
+  const res = {} as MergeAll<T>;
   for (let i = 0; i < arr.length; i++) {
     if (arr[i]) {
       extend(res, arr[i]);
diff --git a/apps/admin/src/components/SimpleMenu/index.ts b/apps/admin/src/components/SimpleMenu/index.ts
index 0dfd248..8e49606 100644
--- a/apps/admin/src/components/SimpleMenu/index.ts
+++ b/apps/admin/src/components/SimpleMenu/index.ts
@@ -1,2 +1 @@
 export { default as SimpleMenu } from './src/SimpleMenu.vue';
-export { default as SimpleMenuTag } from './src/SimpleMenuTag.vue';
diff --git a/apps/admin/src/components/SimpleMenu/src/SimpleSubMenu.vue b/apps/admin/src/components/SimpleMenu/src/SimpleSubMenu.vue
index e3e9a2e..b60e257 100644
--- a/apps/admin/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/apps/admin/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -5,6 +5,7 @@
     v-bind="$props"
     :class="getLevelClass"
   >
+    <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
     <Icon v-if="getIcon" :icon="getIcon" :size="16" />
     <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
       {{ getI18nName }}
@@ -23,6 +24,7 @@
     :collapsedShowTitle="collapsedShowTitle"
   >
     <template #title>
+      <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
       <Icon v-if="getIcon" :icon="getIcon" :size="16" />
 
       <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
@@ -79,7 +81,8 @@
       const { prefixCls } = useDesign('simple-menu');
 
       const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
-      const getIcon = computed(() => props.item?.icon);
+      const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+      const getImg = computed(() => props.item?.img);
       const getI18nName = computed(() => t(props.item?.name));
       const getShowSubTitle = computed(() => !props.collapse || !props.parent);
       const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
@@ -106,6 +109,7 @@
         menuHasChildren,
         getShowMenu,
         getIcon,
+        getImg,
         getI18nName,
         getShowSubTitle,
         getLevelClass,
diff --git a/apps/admin/src/components/SimpleMenu/src/components/Menu.vue b/apps/admin/src/components/SimpleMenu/src/components/Menu.vue
index 28e0b3e..7616a7c 100644
--- a/apps/admin/src/components/SimpleMenu/src/components/Menu.vue
+++ b/apps/admin/src/components/SimpleMenu/src/components/Menu.vue
@@ -21,7 +21,7 @@
 
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
-  import { createSimpleRootMenuContext } from './useSimpleMenuContext';
+  import { createSimpleRootMenuContext, type MenuEmitterEvents } from './useSimpleMenuContext';
   import { mitt } from '/@/utils/mitt';
 
   export default defineComponent({
@@ -45,11 +45,11 @@
     },
     emits: ['select', 'open-change'],
     setup(props, { emit }) {
-      const rootMenuEmitter = mitt();
+      const rootMenuEmitter = mitt<MenuEmitterEvents>();
       const instance = getCurrentInstance();
 
       const currentActiveName = ref<string | number>('');
-      const openedNames = ref<string[]>([]);
+      const openedNames = ref<(string | number)[]>([]);
 
       const { prefixCls } = useDesign('menu');
 
@@ -95,13 +95,13 @@
         rootMenuEmitter.emit('on-update-opened', openedNames.value);
       }
 
-      function addSubMenu(name: string) {
+      function addSubMenu(name: string | number) {
         if (openedNames.value.includes(name)) return;
         openedNames.value.push(name);
         updateOpened();
       }
 
-      function removeSubMenu(name: string) {
+      function removeSubMenu(name: string | number) {
         openedNames.value = openedNames.value.filter((item) => item !== name);
         updateOpened();
       }
@@ -131,7 +131,7 @@
       onMounted(() => {
         openedNames.value = !props.collapse ? [...props.openNames] : [];
         updateOpened();
-        rootMenuEmitter.on('on-menu-item-select', (name: string) => {
+        rootMenuEmitter.on('on-menu-item-select', (name: string | number) => {
           currentActiveName.value = name;
 
           nextTick(() => {
diff --git a/apps/admin/src/components/SimpleMenu/src/components/MenuItem.vue b/apps/admin/src/components/SimpleMenu/src/components/MenuItem.vue
index 3a99796..feb3d6a 100644
--- a/apps/admin/src/components/SimpleMenu/src/components/MenuItem.vue
+++ b/apps/admin/src/components/SimpleMenu/src/components/MenuItem.vue
@@ -83,7 +83,7 @@
       }
       watch(
         () => activeName.value,
-        (name: string) => {
+        (name: string | number) => {
           if (name === props.name) {
             const { list, uidList } = getParentList();
             active.value = true;
diff --git a/apps/admin/src/components/SimpleMenu/src/components/SubMenuItem.vue b/apps/admin/src/components/SimpleMenu/src/components/SubMenuItem.vue
index d06e461..a355775 100644
--- a/apps/admin/src/components/SimpleMenu/src/components/SubMenuItem.vue
+++ b/apps/admin/src/components/SimpleMenu/src/components/SubMenuItem.vue
@@ -20,9 +20,10 @@
       placement="right"
       :overlayClassName="`${prefixCls}-menu-popover`"
       v-else
-      :visible="getIsOpend"
-      @visible-change="handleVisibleChange"
+      :open="getIsOpend"
+      @on-open-change="handleVisibleChange"
       :overlayStyle="getOverlayStyle"
+      :overlayInnerStyle="{ padding: 0 }"
       :align="{ offset: [0, 0] }"
     >
       <div :class="getSubClass" v-bind="getEvents(false)">
@@ -135,7 +136,6 @@
         return [
           `${prefixCls}-submenu`,
           {
-            [`${prefixCls}-item-active`]: state.active,
             [`${prefixCls}-opened`]: state.opened,
             [`${prefixCls}-submenu-disabled`]: props.disabled,
             [`${prefixCls}-submenu-has-parent-submenu`]: unref(getParentSubMenu),
diff --git a/apps/admin/src/components/SimpleMenu/src/components/menu.less b/apps/admin/src/components/SimpleMenu/src/components/menu.less
index 0c4c5ca..2fe0b54 100644
--- a/apps/admin/src/components/SimpleMenu/src/components/menu.less
+++ b/apps/admin/src/components/SimpleMenu/src/components/menu.less
@@ -7,13 +7,13 @@
 
 .light-border {
   &::after {
+    content: '';
+    display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
-    display: block;
     width: 2px;
-    content: '';
     background-color: @primary-color;
   }
 }
@@ -37,16 +37,16 @@
       position: relative;
       z-index: 1;
       padding: 12px 20px;
+      transition: all @transition-time @ease-in-out;
       color: @menu-dark-subsidiary-color;
       cursor: pointer;
-      transition: all @transition-time @ease-in-out;
 
       &-icon {
         position: absolute;
         top: 50%;
         right: 18px;
-        transition: transform @transition-time @ease-in-out;
         transform: translateY(-50%) rotate(-90deg);
+        transition: transform @transition-time @ease-in-out;
       }
     }
 
@@ -61,8 +61,8 @@
         }
 
         &-selected {
-          color: #fff;
           background-color: @primary-color !important;
+          color: #fff;
         }
       }
     }
@@ -78,8 +78,8 @@
 
         &-selected {
           z-index: 2;
-          color: @primary-color;
           background-color: fade(@primary-color, 10);
+          color: @primary-color;
 
           .light-border();
         }
@@ -91,15 +91,15 @@
 .content();
 .content() {
   .@{menu-prefix-cls} {
-    position: relative;
     display: block;
+    position: relative;
     width: 100%;
-    padding: 0;
     margin: 0;
-    font-size: @font-size-base;
+    padding: 0;
+    outline: none;
     color: @text-color-base;
+    font-size: @font-size-base;
     list-style: none;
-    outline: none;
 
     // .collapse-transition {
     //   transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
@@ -125,15 +125,15 @@
     }
 
     &-item {
+      display: flex;
       position: relative;
       z-index: 1;
-      display: flex;
       align-items: center;
-      font-size: @font-size-base;
+      outline: none;
       color: inherit;
+      font-size: @font-size-base;
       list-style: none;
       cursor: pointer;
-      outline: none;
 
       &:hover,
       &:active {
@@ -218,8 +218,8 @@
     &-light&-vertical &-item {
       &-active:not(.@{menu-prefix-cls}-submenu) {
         z-index: 2;
-        color: @primary-color;
         background-color: fade(@primary-color, 10);
+        color: @primary-color;
 
         .light-border();
       }
@@ -239,12 +239,12 @@
         }
 
         &::before {
+          content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 3px;
           height: 100%;
-          content: '';
           background-color: @primary-color;
         }
       }
@@ -254,8 +254,8 @@
     &-dark&-vertical &-submenu-title {
       color: @menu-dark-subsidiary-color;
       &-active:not(.@{menu-prefix-cls}-submenu) {
-        color: #fff !important;
         background-color: @primary-color !important;
+        color: #fff !important;
       }
 
       &:hover {
@@ -267,16 +267,16 @@
       > li.@{menu-prefix-cls}-item-active,
       .@{menu-prefix-cls}-submenu-active {
         position: relative;
-        color: #fff !important;
         background-color: @sider-dark-darken-bg-color !important;
+        color: #fff !important;
 
         &::before {
+          content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 3px;
           height: 100%;
-          content: '';
           background-color: @primary-color;
         }
 
@@ -289,8 +289,8 @@
     &-dark&-vertical &-submenu &-item {
       &-active,
       &-active:hover {
-        color: #fff;
         border-right: none;
+        color: #fff;
       }
     }
 
diff --git a/apps/admin/src/components/SimpleMenu/src/components/useMenu.ts b/apps/admin/src/components/SimpleMenu/src/components/useMenu.ts
index 8830559..89c71f0 100644
--- a/apps/admin/src/components/SimpleMenu/src/components/useMenu.ts
+++ b/apps/admin/src/components/SimpleMenu/src/components/useMenu.ts
@@ -49,7 +49,7 @@ export function useMenuItem(instance: ComponentInternalInstance | null) {
         uidList: [],
         list: [],
       };
-    const ret: any[] = [];
+    const ret: ComponentInternalInstance[] = [];
     while (parent && parent.type.name !== 'Menu') {
       if (parent.type.name === 'SubMenu') {
         ret.push(parent);
diff --git a/apps/admin/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts b/apps/admin/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
index f3d8100..4338ba3 100644
--- a/apps/admin/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
+++ b/apps/admin/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
@@ -1,9 +1,25 @@
-import type { InjectionKey, Ref } from 'vue';
+import type { InjectionKey, Ref, ComponentInternalInstance } from 'vue';
 import type { Emitter } from '/@/utils/mitt';
 import { createContext, useContext } from '/@/hooks/core/useContext';
 
+export type MenuEmitterEvents = {
+  'on-update-opened':
+    | (string | number)[]
+    | {
+        opend: boolean;
+        parent?: ComponentInternalInstance | null;
+        uidList: number[];
+      };
+  'on-menu-item-select': string | number;
+  'open-name-change': {
+    name: string | number;
+    opened: boolean;
+  };
+  'on-update-active-name:submenu': number[];
+};
+
 export interface SimpleRootMenuContextProps {
-  rootMenuEmitter: Emitter;
+  rootMenuEmitter: Emitter<MenuEmitterEvents>;
   activeName: Ref<string | number>;
 }
 
diff --git a/apps/admin/src/components/SimpleMenu/src/index.less b/apps/admin/src/components/SimpleMenu/src/index.less
index 4f9c9ce..74fe82b 100644
--- a/apps/admin/src/components/SimpleMenu/src/index.less
+++ b/apps/admin/src/components/SimpleMenu/src/index.less
@@ -28,22 +28,22 @@
 .@{simple-prefix-cls} {
   &-sub-title {
     overflow: hidden;
+    transition: all 0.3s;
     text-overflow: ellipsis;
     white-space: nowrap;
-    transition: all 0.3s;
   }
 
   &-tag {
+    display: inline-block;
     position: absolute;
     top: calc(50% - 8px);
     right: 30px;
-    display: inline-block;
-    padding: 2px 3px;
     margin-right: 4px;
+    padding: 2px 3px;
+    border-radius: 2px;
+    color: #fff;
     font-size: 10px;
     line-height: 14px;
-    color: #fff;
-    border-radius: 2px;
 
     &--collapse {
       top: 6px !important;
diff --git a/apps/admin/src/components/StrengthMeter/src/StrengthMeter.vue b/apps/admin/src/components/StrengthMeter/src/StrengthMeter.vue
index 39074d9..9341bbc 100644
--- a/apps/admin/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/apps/admin/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -48,6 +48,7 @@
       });
 
       function handleChange(e) {
+        emit('change', e.target.value);
         innerValueRef.value = e.target.value;
       }
 
diff --git a/apps/admin/src/components/Table/src/BasicTable.vue b/apps/admin/src/components/Table/src/BasicTable.vue
index cb98632..b8d3e17 100644
--- a/apps/admin/src/components/Table/src/BasicTable.vue
+++ b/apps/admin/src/components/Table/src/BasicTable.vue
@@ -21,12 +21,15 @@
       :rowClassName="getRowClassName"
       v-show="getEmptyDataIsShowTable"
       @change="handleTableChange"
+      @resize-column="setColumnWidth"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
         <slot :name="item" v-bind="data || {}"></slot>
       </template>
       <template #headerCell="{ column }">
-        <HeaderCell :column="column" />
+        <slot name="headerCell" v-bind="{ column }">
+          <HeaderCell :column="column" />
+        </slot>
       </template>
       <!-- 增加对antdv3.x兼容 -->
       <template #bodyCell="data">
@@ -49,7 +52,7 @@
   import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
   import { Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  import { PageWrapperFixedHeightKey } from '/@/components/Page';
+  import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
   import HeaderCell from './components/HeaderCell.vue';
   import { InnerHandlers } from './types/table';
 
@@ -74,6 +77,25 @@
   import { isFunction } from '/@/utils/is';
   import { warn } from '/@/utils/log';
 
+  const events = [
+    'fetch-success',
+    'fetch-error',
+    'selection-change',
+    'register',
+    'row-click',
+    'row-dbClick',
+    'row-contextmenu',
+    'row-mouseenter',
+    'row-mouseleave',
+    'edit-end',
+    'edit-cancel',
+    'edit-row-end',
+    'edit-change',
+    'expanded-rows-change',
+    'change',
+    'columns-change',
+  ];
+
   export default defineComponent({
     name: 'BasicTable',
     components: {
@@ -82,24 +104,7 @@
       HeaderCell,
     },
     props: basicProps,
-    emits: [
-      'fetch-success',
-      'fetch-error',
-      'selection-change',
-      'register',
-      'row-click',
-      'row-dbClick',
-      'row-contextmenu',
-      'row-mouseenter',
-      'row-mouseleave',
-      'edit-end',
-      'edit-cancel',
-      'edit-row-end',
-      'edit-change',
-      'expanded-rows-change',
-      'change',
-      'columns-change',
-    ],
+    emits: events,
     setup(props, { attrs, emit, slots, expose }) {
       const tableElRef = ref(null);
       const tableData = ref([]);
@@ -172,18 +177,20 @@
         emit,
       );
 
-      function handleTableChange(...args) {
-        onTableChange.call(undefined, ...args);
-        emit('change', ...args);
+      function handleTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+        onTableChange(pagination, filters, sorter);
+        emit('change', pagination, filters, sorter);
         // 解决通过useTable注册onChange时不起作用的问题
         const { onChange } = unref(getProps);
-        onChange && isFunction(onChange) && onChange.call(undefined, ...args);
+        onChange && isFunction(onChange) && onChange(pagination, filters, sorter, extra);
       }
 
       const {
         getViewColumns,
         getColumns,
         setCacheColumnsByField,
+        setCacheColumns,
+        setColumnWidth,
         setColumns,
         getColumnsRef,
         getCacheColumns,
@@ -323,6 +330,7 @@
         getSize: () => {
           return unref(getBindValues).size as SizeType;
         },
+        setCacheColumns,
       };
       createTableContext({ ...tableAction, wrapRef, getBindValues });
 
@@ -339,6 +347,7 @@
         handleSearchInfoChange,
         getEmptyDataIsShowTable,
         handleTableChange,
+        setColumnWidth,
         getRowClassName,
         wrapRef,
         tableAction,
@@ -424,7 +433,7 @@
       //}
     }
 
-    .ant-pagination {
+    .ant-table-wrapper .ant-pagination {
       margin: 10px 0 0;
     }
 
diff --git a/apps/admin/src/components/Table/src/components/EditTableHeaderIcon.vue b/apps/admin/src/components/Table/src/components/EditTableHeaderIcon.vue
index 98240c0..ed05c31 100644
--- a/apps/admin/src/components/Table/src/components/EditTableHeaderIcon.vue
+++ b/apps/admin/src/components/Table/src/components/EditTableHeaderIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="edit-header-cell">
     <slot></slot>
     {{ title }}
     <FormOutlined />
diff --git a/apps/admin/src/components/Table/src/components/HeaderCell.vue b/apps/admin/src/components/Table/src/components/HeaderCell.vue
index c21bfd0..22ada92 100644
--- a/apps/admin/src/components/Table/src/components/HeaderCell.vue
+++ b/apps/admin/src/components/Table/src/components/HeaderCell.vue
@@ -1,17 +1,11 @@
-<template>
-  <EditTableHeaderCell v-if="getIsEdit">
-    {{ getTitle }}
-  </EditTableHeaderCell>
-  <span v-else>{{ getTitle }}</span>
-  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
-</template>
-<script lang="ts">
+<script lang="tsx">
   import type { PropType } from 'vue';
   import type { BasicColumn } from '../types/table';
   import { defineComponent, computed } from 'vue';
   import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
   import EditTableHeaderCell from './EditTableHeaderIcon.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { ColumnType } from 'ant-design-vue/lib/table/interface';
 
   export default defineComponent({
     name: 'TableHeaderCell',
@@ -21,18 +15,37 @@
     },
     props: {
       column: {
-        type: Object as PropType<BasicColumn>,
+        type: Object as PropType<ColumnType<any>>,
         default: () => ({}),
       },
     },
     setup(props) {
       const { prefixCls } = useDesign('basic-table-header-cell');
 
-      const getIsEdit = computed(() => !!props.column?.edit);
-      const getTitle = computed(() => props.column?.customTitle || props.column?.title);
-      const getHelpMessage = computed(() => props.column?.helpMessage);
+      const getIsEdit = computed(() => !!(props.column as BasicColumn)?.edit);
+      const getTitle = computed(() => {
+        const column = props.column as BasicColumn;
+        if (typeof column.customHeaderRender === 'function') {
+          return column.customHeaderRender(column);
+        }
+        return column?.customTitle || props.column?.title;
+      });
+      const getHelpMessage = computed(() => (props.column as BasicColumn)?.helpMessage);
 
-      return { prefixCls, getIsEdit, getTitle, getHelpMessage };
+      return () => {
+        return (
+          <div>
+            {getIsEdit.value ? (
+              <EditTableHeaderCell>{getTitle.value}</EditTableHeaderCell>
+            ) : (
+              <span class="default-header-cell">{getTitle.value}</span>
+            )}
+            {getHelpMessage.value && (
+              <BasicHelp text={getHelpMessage.value} class={`${prefixCls}__help`} />
+            )}
+          </div>
+        );
+      };
     },
   });
 </script>
diff --git a/apps/admin/src/components/Table/src/components/TableFooter.vue b/apps/admin/src/components/Table/src/components/TableFooter.vue
index 68e556b..b72e5b0 100644
--- a/apps/admin/src/components/Table/src/components/TableFooter.vue
+++ b/apps/admin/src/components/Table/src/components/TableFooter.vue
@@ -21,6 +21,7 @@
   import { INDEX_COLUMN_FLAG } from '../const';
   import { propTypes } from '/@/utils/propTypes';
   import { useTableContext } from '../hooks/useTableContext';
+  import { ColumnType } from 'ant-design-vue/es/table/interface';
 
   const SUMMARY_ROW_KEY = '_row';
   const SUMMARY_INDEX_KEY = '_index';
@@ -86,7 +87,7 @@
             customRender: ({ record }) => record[SUMMARY_ROW_KEY],
           });
         }
-        return columns;
+        return columns as unknown as ColumnType[];
       });
       return { getColumns, getDataSource };
     },
diff --git a/apps/admin/src/components/Table/src/components/editable/CellComponent.ts b/apps/admin/src/components/Table/src/components/editable/CellComponent.ts
index 3a16693..934b479 100644
--- a/apps/admin/src/components/Table/src/components/editable/CellComponent.ts
+++ b/apps/admin/src/components/Table/src/components/editable/CellComponent.ts
@@ -1,4 +1,4 @@
-import type { FunctionalComponent, defineComponent } from 'vue';
+import type { defineComponent } from 'vue';
 import type { ComponentType } from '../../types/componentType';
 import { componentMap } from '/@/components/Table/src/componentMap';
 
@@ -13,7 +13,7 @@ export interface ComponentProps {
   getPopupContainer?: Fn;
 }
 
-export const CellComponent: FunctionalComponent = (
+export const CellComponent = (
   {
     component = 'Input',
     rule = true,
@@ -33,7 +33,7 @@ export const CellComponent: FunctionalComponent = (
     Popover,
     {
       overlayClassName: 'edit-cell-rule-popover',
-      visible: !!popoverVisible,
+      open: !!popoverVisible,
       ...(getPopupContainer ? { getPopupContainer } : {}),
     },
     {
diff --git a/apps/admin/src/components/Table/src/components/editable/EditableCell.vue b/apps/admin/src/components/Table/src/components/editable/EditableCell.vue
index ab4bf59..bf7936a 100644
--- a/apps/admin/src/components/Table/src/components/editable/EditableCell.vue
+++ b/apps/admin/src/components/Table/src/components/editable/EditableCell.vue
@@ -70,7 +70,7 @@
         const valueField = isCheckValue ? 'checked' : 'value';
         const val = unref(currentValueRef);
 
-        const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
+        const value = isCheckValue ? (isNumber(val) || isBoolean(val) ? val : !!val) : val;
 
         let compProps = props.column?.editComponentProps ?? ({} as any);
         const { record, column, index } = props;
@@ -273,8 +273,8 @@
             }
           }
         }
-
         set(record, dataKey, value);
+        defaultValueRef.value = value;
         //const record = await table.updateTableData(index, dataKey, value);
         needEmit && table.emit?.('edit-end', { record, index, key: dataKey, value });
         isEdit.value = false;
@@ -483,6 +483,7 @@
   }
   .@{prefix-cls} {
     position: relative;
+    min-height: 24px; //设置高度让其始终可被hover
 
     &__wrapper {
       display: flex;
diff --git a/apps/admin/src/components/Table/src/components/editable/index.ts b/apps/admin/src/components/Table/src/components/editable/index.ts
index 4f7d4da..548c9e4 100644
--- a/apps/admin/src/components/Table/src/components/editable/index.ts
+++ b/apps/admin/src/components/Table/src/components/editable/index.ts
@@ -1,6 +1,6 @@
 import type { BasicColumn } from '/@/components/Table/src/types/table';
 
-import { h, Ref } from 'vue';
+import { h, Ref, toRaw } from 'vue';
 
 import EditableCell from './EditableCell.vue';
 import { isArray } from '/@/utils/is';
@@ -13,7 +13,7 @@ interface Params {
 
 export function renderEditCell(column: BasicColumn) {
   return ({ text: value, record, index }: Params) => {
-    record.onValid = async () => {
+    toRaw(record).onValid = async () => {
       if (isArray(record?.validCbs)) {
         const validFns = (record?.validCbs || []).map((fn) => fn());
         const res = await Promise.all(validFns);
@@ -23,7 +23,7 @@ export function renderEditCell(column: BasicColumn) {
       }
     };
 
-    record.onEdit = async (edit: boolean, submit = false) => {
+    toRaw(record).onEdit = async (edit: boolean, submit = false) => {
       if (!submit) {
         record.editable = edit;
       }
diff --git a/apps/admin/src/components/Table/src/components/settings/ColumnSetting.vue b/apps/admin/src/components/Table/src/components/settings/ColumnSetting.vue
index ffa3cc2..08f37a2 100644
--- a/apps/admin/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/apps/admin/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -6,7 +6,7 @@
     <Popover
       placement="bottomLeft"
       trigger="click"
-      @visible-change="handleVisibleChange"
+      @open-change="handleVisibleChange"
       :overlayClassName="`${prefixCls}__cloumn-list`"
       :getPopupContainer="getPopupContainer"
     >
@@ -99,7 +99,7 @@
   </Tooltip>
 </template>
 <script lang="ts">
-  import type { BasicColumn, ColumnChangeParam } from '../../types/table';
+  import type { BasicColumn, BasicTableProps, ColumnChangeParam } from '../../types/table';
   import {
     defineComponent,
     ref,
@@ -159,6 +159,10 @@
 
       const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys');
       let inited = false;
+      // 是否当前的setColums触发的
+      let isSetColumnsFromThis = false;
+      // 是否当前组件触发的setProps
+      let isSetPropsFromThis = false;
 
       const cachePlainOptions = ref<Options[]>([]);
       const plainOptions = ref<Options[] | any>([]);
@@ -172,7 +176,8 @@
         checkedList: [],
         defaultCheckList: [],
       });
-
+      /** 缓存初始化props */
+      let cacheTableProps: Partial<BasicTableProps<any>> = {};
       const checkIndex = ref(false);
       const checkSelect = ref(false);
 
@@ -185,7 +190,9 @@
       watchEffect(() => {
         const columns = table.getColumns();
         setTimeout(() => {
-          if (columns.length && !state.isInit) {
+          if (isSetColumnsFromThis) {
+            isSetColumnsFromThis = false;
+          } else if (columns.length) {
             init();
           }
         }, 0);
@@ -193,6 +200,11 @@
 
       watchEffect(() => {
         const values = unref(getValues);
+        if (isSetPropsFromThis) {
+          isSetPropsFromThis = false;
+        } else {
+          cacheTableProps = cloneDeep(values);
+        }
         checkIndex.value = !!values.showIndexColumn;
         checkSelect.value = !!values.rowSelection;
       });
@@ -209,8 +221,17 @@
         return ret;
       }
 
-      function init() {
-        const columns = getColumns();
+      async function init(isReset = false) {
+        // Sortablejs存在bug，不知道在哪个步骤中会向el append了一个childNode，因此这里先清空childNode
+        // 有可能复现上述问题的操作：拖拽一个元素，快速的上下移动，最后放到最后的位置中松手
+        plainOptions.value = [];
+        const columnListEl = unref(columnListRef);
+        if (columnListEl && (columnListEl as any).$el) {
+          const el = (columnListEl as any).$el as Element;
+          Array.from(el.children).forEach((item) => el.removeChild(item));
+        }
+        await nextTick();
+        const columns = isReset ? cloneDeep(cachePlainOptions.value) : getColumns();
 
         const checkList = table
           .getColumns({ ignoreAction: true, ignoreIndex: true })
@@ -221,31 +242,25 @@
             return item.dataIndex || item.title;
           })
           .filter(Boolean) as string[];
-
-        if (!plainOptions.value.length) {
-          plainOptions.value = columns;
-          plainSortOptions.value = columns;
-          cachePlainOptions.value = columns;
-          state.defaultCheckList = checkList;
-        } else {
-          // const fixedColumns = columns.filter((item) =>
-          //   Reflect.has(item, 'fixed')
-          // ) as BasicColumn[];
-
-          unref(plainOptions).forEach((item: BasicColumn) => {
-            const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex);
-            if (findItem) {
-              item.fixed = findItem.fixed;
-            }
-          });
-        }
-        state.isInit = true;
+        plainOptions.value = columns;
+        plainSortOptions.value = columns;
+        // 更新缓存配置
+        table.setCacheColumns?.(columns);
+        !isReset && (cachePlainOptions.value = cloneDeep(columns));
+        state.defaultCheckList = checkList;
         state.checkedList = checkList;
+        // 是否列展示全选
+        state.checkAll = checkList.length === columns.length;
+        inited = false;
+        handleVisibleChange();
       }
 
       // checkAll change
       function onCheckAllChange(e: CheckboxChangeEvent) {
-        const checkList = plainOptions.value.map((item) => item.value);
+        const checkList = plainSortOptions.value.map((item) => item.value);
+        plainSortOptions.value.forEach(
+          (item) => ((item as BasicColumn).defaultHidden = !e.target.checked),
+        );
         if (e.target.checked) {
           state.checkedList = checkList;
           setColumns(checkList);
@@ -270,6 +285,9 @@
         checkedList.sort((prev, next) => {
           return sortList.indexOf(prev) - sortList.indexOf(next);
         });
+        unref(plainSortOptions).forEach((item) => {
+          (item as BasicColumn).defaultHidden = !checkedList.includes(item.value);
+        });
         setColumns(checkedList);
       }
 
@@ -277,11 +295,14 @@
       let sortableOrder: string[] = [];
       // reset columns
       function reset() {
-        state.checkedList = [...state.defaultCheckList];
-        state.checkAll = true;
-        plainOptions.value = unref(cachePlainOptions);
-        plainSortOptions.value = unref(cachePlainOptions);
-        setColumns(table.getCacheColumns());
+        setColumns(cachePlainOptions.value);
+        init(true);
+        checkIndex.value = !!cacheTableProps.showIndexColumn;
+        checkSelect.value = !!cacheTableProps.rowSelection;
+        table.setProps({
+          showIndexColumn: checkIndex.value,
+          rowSelection: checkSelect.value ? defaultRowSelection : undefined,
+        });
         sortable.sort(sortableOrder);
       }
 
@@ -316,12 +337,7 @@
               }
 
               plainSortOptions.value = columns;
-
-              setColumns(
-                columns
-                  .map((col: Options) => col.value)
-                  .filter((value: string) => state.checkedList.includes(value)),
-              );
+              setColumns(columns.filter((item) => state.checkedList.includes(item.value)));
             },
           });
           // 记录原始order 序列
@@ -332,6 +348,8 @@
 
       // Control whether the serial number column is displayed
       function handleIndexCheckChange(e: CheckboxChangeEvent) {
+        isSetPropsFromThis = true;
+        isSetColumnsFromThis = true;
         table.setProps({
           showIndexColumn: e.target.checked,
         });
@@ -339,6 +357,8 @@
 
       // Control whether the check box is displayed
       function handleSelectCheckChange(e: CheckboxChangeEvent) {
+        isSetPropsFromThis = true;
+        isSetColumnsFromThis = true;
         table.setProps({
           rowSelection: e.target.checked ? defaultRowSelection : undefined,
         });
@@ -360,11 +380,14 @@
         if (isFixed && !item.width) {
           item.width = 100;
         }
+        updateSortOption(item);
         table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed });
         setColumns(columns);
       }
 
       function setColumns(columns: BasicColumn[] | string[]) {
+        isSetPropsFromThis = true;
+        isSetColumnsFromThis = true;
         table.setColumns(columns);
         const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
           const visible =
@@ -384,6 +407,14 @@
           : getParentContainer();
       }
 
+      function updateSortOption(column: BasicColumn) {
+        plainSortOptions.value.forEach((item) => {
+          if (item.value === column.dataIndex) {
+            Object.assign(item, column);
+          }
+        });
+      }
+
       return {
         t,
         ...toRefs(state),
@@ -471,6 +502,7 @@
       }
 
       .ant-checkbox-group {
+        display: inline-block;
         width: 100%;
         min-width: 260px;
         // flex-wrap: wrap;
diff --git a/apps/admin/src/components/Table/src/components/settings/SizeSetting.vue b/apps/admin/src/components/Table/src/components/settings/SizeSetting.vue
index 79c4a22..d443af0 100644
--- a/apps/admin/src/components/Table/src/components/settings/SizeSetting.vue
+++ b/apps/admin/src/components/Table/src/components/settings/SizeSetting.vue
@@ -25,7 +25,7 @@
 <script lang="ts">
   import type { SizeType } from '../../types/table';
   import { defineComponent, ref } from 'vue';
-  import { Tooltip, Dropdown, Menu } from 'ant-design-vue';
+  import { Tooltip, Dropdown, Menu, type MenuProps } from 'ant-design-vue';
   import { ColumnHeightOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
@@ -46,12 +46,12 @@
 
       const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
 
-      function handleTitleClick({ key }: { key: SizeType }) {
-        selectedKeysRef.value = [key];
+      const handleTitleClick: MenuProps['onClick'] = ({ key }) => {
+        selectedKeysRef.value = [key as SizeType];
         table.setProps({
-          size: key,
+          size: key as SizeType,
         });
-      }
+      };
 
       return {
         handleTitleClick,
diff --git a/apps/admin/src/components/Table/src/hooks/useColumns.ts b/apps/admin/src/components/Table/src/hooks/useColumns.ts
index d073e77..80d946c 100644
--- a/apps/admin/src/components/Table/src/hooks/useColumns.ts
+++ b/apps/admin/src/components/Table/src/hooks/useColumns.ts
@@ -9,13 +9,14 @@ import { isArray, isBoolean, isFunction, isMap, isString } from '/@/utils/is';
 import { cloneDeep, isEqual } from 'lodash-es';
 import { formatToDate } from '/@/utils/dateUtil';
 import { ACTION_COLUMN_FLAG, DEFAULT_ALIGN, INDEX_COLUMN_FLAG, PAGE_SIZE } from '../const';
+import { ColumnType } from 'ant-design-vue/es/table';
 
 function handleItem(item: BasicColumn, ellipsis: boolean) {
   const { key, dataIndex, children } = item;
   item.align = item.align || DEFAULT_ALIGN;
   if (ellipsis) {
     if (!key) {
-      item.key = dataIndex;
+      item.key = typeof dataIndex == 'object' ? dataIndex.join('-') : dataIndex;
     }
     if (!isBoolean(item.ellipsis)) {
       Object.assign(item, {
@@ -150,9 +151,7 @@ export function useColumns(
       const { slots, customRender, format, edit, editRow, flag } = column;
 
       if (!slots || !slots?.title) {
-        // column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
         column.customTitle = column.title;
-        Reflect.deleteProperty(column, 'title');
       }
       const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
       if (!customRender && format && !edit && !isDefaultAction) {
@@ -260,14 +259,26 @@ export function useColumns(
   function getCacheColumns() {
     return cacheColumns;
   }
+  function setCacheColumns(columns: BasicColumn[]) {
+    if (!isArray(columns)) return;
+    cacheColumns = columns.filter((item) => !item.flag);
+  }
+  /**
+   * 拖拽列宽修改列的宽度
+   */
+  function setColumnWidth(w: number, col: ColumnType<BasicColumn>) {
+    col.width = w;
+  }
 
   return {
     getColumnsRef,
     getCacheColumns,
     getColumns,
     setColumns,
+    setColumnWidth,
     getViewColumns,
     setCacheColumnsByField,
+    setCacheColumns,
   };
 }
 
diff --git a/apps/admin/src/components/Table/src/hooks/useCustomRow.ts b/apps/admin/src/components/Table/src/hooks/useCustomRow.ts
index 1a5aac8..05d4ce9 100644
--- a/apps/admin/src/components/Table/src/hooks/useCustomRow.ts
+++ b/apps/admin/src/components/Table/src/hooks/useCustomRow.ts
@@ -3,10 +3,11 @@ import type { BasicTableProps } from '../types/table';
 import { unref } from 'vue';
 import { ROW_KEY } from '../const';
 import { isString, isFunction } from '/@/utils/is';
+import type { Key } from 'ant-design-vue/lib/table/interface';
 
 interface Options {
-  setSelectedRowKeys: (keys: string[]) => void;
-  getSelectRowKeys: () => string[];
+  setSelectedRowKeys: (keys: Key[]) => void;
+  getSelectRowKeys: () => Key[];
   clearSelectedRowKeys: () => void;
   emit: EmitType;
   getAutoCreateKey: ComputedRef<boolean | undefined>;
@@ -42,20 +43,21 @@ export function useCustomRow(
           if (!rowSelection || !clickToRowSelect) return;
           const keys = getSelectRowKeys() || [];
           const key = getKey(record, rowKey, unref(getAutoCreateKey));
-          if (!key) return;
+          if (key === null) return;
 
           const isCheckbox = rowSelection.type === 'checkbox';
           if (isCheckbox) {
             // 找到tr
-            const tr: HTMLElement = (e as MouseEvent)
+            const tr = (e as MouseEvent)
               .composedPath?.()
-              .find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
+              .find((dom) => (dom as HTMLElement).tagName === 'TR') as HTMLElement;
             if (!tr) return;
             // 找到Checkbox，检查是否为disabled
             const checkBox = tr.querySelector('input[type=checkbox]');
             if (!checkBox || checkBox.hasAttribute('disabled')) return;
             if (!keys.includes(key)) {
-              setSelectedRowKeys([...keys, key]);
+              keys.push(key);
+              setSelectedRowKeys(keys);
               return;
             }
             const keyIndex = keys.findIndex((item) => item === key);
diff --git a/apps/admin/src/components/Table/src/hooks/useDataSource.ts b/apps/admin/src/components/Table/src/hooks/useDataSource.ts
index f1616c6..c051cf3 100644
--- a/apps/admin/src/components/Table/src/hooks/useDataSource.ts
+++ b/apps/admin/src/components/Table/src/hooks/useDataSource.ts
@@ -208,7 +208,7 @@ export function useDataSource(
 
   function insertTableDataRecord(
     record: Recordable | Recordable[],
-    index: number,
+    index?: number,
   ): Recordable[] | undefined {
     // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
     index = index ?? dataSourceRef.value?.length;
@@ -349,7 +349,7 @@ export function useDataSource(
   }
 
   function setTableData<T = Recordable>(values: T[]) {
-    dataSourceRef.value = values;
+    dataSourceRef.value = values as Recordable[];
   }
 
   function getDataSource<T = Recordable>() {
diff --git a/apps/admin/src/components/Table/src/hooks/usePagination.tsx b/apps/admin/src/components/Table/src/hooks/usePagination.tsx
index ba310bd..1ace590 100644
--- a/apps/admin/src/components/Table/src/hooks/usePagination.tsx
+++ b/apps/admin/src/components/Table/src/hooks/usePagination.tsx
@@ -48,7 +48,6 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
 
     return {
       current: 1,
-      pageSize: PAGE_SIZE,
       size: 'small',
       defaultPageSize: PAGE_SIZE,
       showTotal: (total) => t('component.table.total', { total }),
diff --git a/apps/admin/src/components/Table/src/hooks/useRowSelection.ts b/apps/admin/src/components/Table/src/hooks/useRowSelection.ts
index ed19b07..e87c3df 100644
--- a/apps/admin/src/components/Table/src/hooks/useRowSelection.ts
+++ b/apps/admin/src/components/Table/src/hooks/useRowSelection.ts
@@ -4,13 +4,14 @@ import { computed, ComputedRef, nextTick, Ref, ref, toRaw, unref, watch } from '
 import { ROW_KEY } from '../const';
 import { omit } from 'lodash-es';
 import { findNodeAll } from '/@/utils/helper/treeHelper';
+import type { Key } from 'ant-design-vue/lib/table/interface';
 
 export function useRowSelection(
   propsRef: ComputedRef<BasicTableProps>,
   tableData: Ref<Recordable[]>,
   emit: EmitType,
 ) {
-  const selectedRowKeysRef = ref<string[]>([]);
+  const selectedRowKeysRef = ref<Key[]>([]);
   const selectedRowRef = ref<Recordable[]>([]);
 
   const getRowSelectionRef = computed((): TableRowSelection | null => {
@@ -21,7 +22,7 @@ export function useRowSelection(
 
     return {
       selectedRowKeys: unref(selectedRowKeysRef),
-      onChange: (selectedRowKeys: string[]) => {
+      onChange: (selectedRowKeys: Key[]) => {
         setSelectedRowKeys(selectedRowKeys);
       },
       ...omit(rowSelection, ['onChange']),
@@ -30,7 +31,7 @@ export function useRowSelection(
 
   watch(
     () => unref(propsRef).rowSelection?.selectedRowKeys,
-    (v: string[]) => {
+    (v?: Key[]) => {
       setSelectedRowKeys(v);
     },
   );
@@ -62,8 +63,8 @@ export function useRowSelection(
     return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
   });
 
-  function setSelectedRowKeys(rowKeys: string[]) {
-    selectedRowKeysRef.value = rowKeys;
+  function setSelectedRowKeys(rowKeys?: Key[]) {
+    selectedRowKeysRef.value = rowKeys || [];
     const allSelectedRows = findNodeAll(
       toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))),
       (item) => rowKeys?.includes(item[unref(getRowKey) as string]),
@@ -72,7 +73,7 @@ export function useRowSelection(
       },
     );
     const trueSelectedRows: any[] = [];
-    rowKeys?.forEach((key: string) => {
+    rowKeys?.forEach((key: Key) => {
       const found = allSelectedRows.find((item) => item[unref(getRowKey) as string] === key);
       found && trueSelectedRows.push(found);
     });
diff --git a/apps/admin/src/components/Table/src/hooks/useTable.ts b/apps/admin/src/components/Table/src/hooks/useTable.ts
index 323eb23..f7f29df 100644
--- a/apps/admin/src/components/Table/src/hooks/useTable.ts
+++ b/apps/admin/src/components/Table/src/hooks/useTable.ts
@@ -7,6 +7,7 @@ import { getDynamicProps } from '/@/utils';
 import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
+import type { Key } from 'ant-design-vue/lib/table/interface';
 
 type Props = Partial<DynamicProps<BasicTableProps>>;
 
@@ -92,7 +93,7 @@ export function useTable(tableProps?: Props): [
       const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
       return toRaw(columns);
     },
-    setColumns: (columns: BasicColumn[]) => {
+    setColumns: (columns: BasicColumn[] | string[]) => {
       getTableInstance().setColumns(columns);
     },
     setTableData: (values: any[]) => {
@@ -113,7 +114,7 @@ export function useTable(tableProps?: Props): [
     clearSelectedRowKeys: () => {
       getTableInstance().clearSelectedRowKeys();
     },
-    setSelectedRowKeys: (keys: string[] | number[]) => {
+    setSelectedRowKeys: (keys: (string | number)[]) => {
       getTableInstance().setSelectedRowKeys(keys);
     },
     getPaginationRef: () => {
@@ -155,7 +156,7 @@ export function useTable(tableProps?: Props): [
     expandAll: () => {
       getTableInstance().expandAll();
     },
-    expandRows: (keys: string[]) => {
+    expandRows: (keys: Key[]) => {
       getTableInstance().expandRows(keys);
     },
     collapseAll: () => {
diff --git a/apps/admin/src/components/Table/src/hooks/useTableExpand.ts b/apps/admin/src/components/Table/src/hooks/useTableExpand.ts
index 2628365..49fd2d9 100644
--- a/apps/admin/src/components/Table/src/hooks/useTableExpand.ts
+++ b/apps/admin/src/components/Table/src/hooks/useTableExpand.ts
@@ -8,7 +8,7 @@ export function useTableExpand(
   tableData: Ref<Recordable[]>,
   emit: EmitType,
 ) {
-  const expandedRowKeys = ref<string[]>([]);
+  const expandedRowKeys = ref<(string | number)[]>([]);
 
   const getAutoCreateKey = computed(() => {
     return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
@@ -37,7 +37,7 @@ export function useTableExpand(
     expandedRowKeys.value = keys;
   }
 
-  function expandRows(keys: string[]) {
+  function expandRows(keys: (string | number)[]) {
     // use row ID expands the specified table row
     const { isTreeTable } = unref(propsRef);
     if (!isTreeTable) return;
diff --git a/apps/admin/src/components/Table/src/hooks/useTableScroll.ts b/apps/admin/src/components/Table/src/hooks/useTableScroll.ts
index 3777d6e..95f3a91 100644
--- a/apps/admin/src/components/Table/src/hooks/useTableScroll.ts
+++ b/apps/admin/src/components/Table/src/hooks/useTableScroll.ts
@@ -53,22 +53,7 @@ export function useTableScroll(
   let footerEl: HTMLElement | null;
   let bodyEl: HTMLElement | null;
 
-  async function calcTableHeight() {
-    const { resizeHeightOffset, pagination, maxHeight, isCanResizeParent, useSearchForm } =
-      unref(propsRef);
-    const tableData = unref(getDataSourceRef);
-
-    const table = unref(tableElRef);
-    if (!table) return;
-
-    const tableEl: Element = table.$el;
-    if (!tableEl) return;
-
-    if (!bodyEl) {
-      bodyEl = tableEl.querySelector('.ant-table-body');
-      if (!bodyEl) return;
-    }
-
+  function handleScrollBar(bodyEl: HTMLElement, tableEl: Element) {
     const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
     const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
 
@@ -85,20 +70,10 @@ export function useTableScroll(
     } else {
       !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
     }
+  }
 
-    bodyEl!.style.height = 'unset';
-
-    if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
-
-    await nextTick();
-    // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
-
-    const headEl = tableEl.querySelector('.ant-table-thead ');
-
-    if (!headEl) return;
-
-    // Table height from bottom height-custom offset
-    let paddingHeight = 32;
+  function caclPaginationHeight(tableEl: Element): number {
+    const { pagination } = unref(propsRef);
     // Pager height
     let paginationHeight = 2;
     if (!isBoolean(pagination)) {
@@ -113,7 +88,11 @@ export function useTableScroll(
     } else {
       paginationHeight = -8;
     }
+    return paginationHeight;
+  }
 
+  function caclFooterHeight(tableEl: Element): number {
+    const { pagination } = unref(propsRef);
     let footerHeight = 0;
     if (!isBoolean(pagination)) {
       if (!footerEl) {
@@ -123,12 +102,21 @@ export function useTableScroll(
         footerHeight += offsetHeight || 0;
       }
     }
+    return footerHeight;
+  }
 
+  function calcHeaderHeight(headEl: Element): number {
     let headerHeight = 0;
     if (headEl) {
       headerHeight = (headEl as HTMLElement).offsetHeight;
     }
+    return headerHeight;
+  }
 
+  function calcBottomAndPaddingHeight(tableEl: Element, headEl: Element) {
+    const { pagination, isCanResizeParent, useSearchForm } = unref(propsRef);
+    // Table height from bottom height-custom offset
+    let paddingHeight = 30;
     let bottomIncludeBody = 0;
     if (unref(wrapRef) && isCanResizeParent) {
       const tablePadding = 12;
@@ -158,6 +146,45 @@ export function useTableScroll(
       bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody;
     }
 
+    return {
+      paddingHeight,
+      bottomIncludeBody,
+    };
+  }
+
+  async function calcTableHeight() {
+    const { resizeHeightOffset, maxHeight } = unref(propsRef);
+    const tableData = unref(getDataSourceRef);
+
+    const table = unref(tableElRef);
+    if (!table) return;
+
+    const tableEl: Element = table.$el;
+    if (!tableEl) return;
+
+    if (!bodyEl) {
+      bodyEl = tableEl.querySelector('.ant-table-body');
+      if (!bodyEl) return;
+    }
+
+    handleScrollBar(bodyEl, tableEl);
+
+    bodyEl!.style.height = 'unset';
+
+    if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
+
+    await nextTick();
+    // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
+
+    const headEl = tableEl.querySelector('.ant-table-thead ');
+
+    if (!headEl) return;
+
+    const paginationHeight = caclPaginationHeight(tableEl);
+    const footerHeight = caclFooterHeight(tableEl);
+    const headerHeight = calcHeaderHeight(headEl);
+    const { paddingHeight, bottomIncludeBody } = calcBottomAndPaddingHeight(tableEl, headEl);
+
     let height =
       bottomIncludeBody -
       (resizeHeightOffset || 0) -
diff --git a/apps/admin/src/components/Table/src/types/column.ts b/apps/admin/src/components/Table/src/types/column.ts
index 785e6df..9ffd579 100644
--- a/apps/admin/src/components/Table/src/types/column.ts
+++ b/apps/admin/src/components/Table/src/types/column.ts
@@ -80,7 +80,7 @@ export interface ColumnProps<T> {
    * Whether filterDropdown is visible
    * @type boolean
    */
-  filterDropdownVisible?: boolean;
+  filterDropdownOpen?: boolean;
 
   /**
    * Whether the dataSource is filtered
diff --git a/apps/admin/src/components/Table/src/types/table.ts b/apps/admin/src/components/Table/src/types/table.ts
index 9a222d2..80d74f8 100644
--- a/apps/admin/src/components/Table/src/types/table.ts
+++ b/apps/admin/src/components/Table/src/types/table.ts
@@ -1,7 +1,11 @@
 import type { VNodeChild } from 'vue';
 import type { PaginationProps } from './pagination';
 import type { FormProps } from '/@/components/Form';
-import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface';
+import type {
+  TableRowSelection as ITableRowSelection,
+  Key,
+} from 'ant-design-vue/lib/table/interface';
+
 import type { ColumnProps } from 'ant-design-vue/lib/table';
 
 import { ComponentType } from './componentType';
@@ -19,7 +23,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection {
    * Callback executed when selected rows change
    * @type Function
    */
-  onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any;
+  onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => any;
 
   /**
    * Callback executed when select/deselect one row
@@ -37,7 +41,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection {
    * Callback executed when row selection is inverted
    * @type Function
    */
-  onSelectInvert?: (selectedRows: string[] | number[]) => any;
+  onSelectInvert?: (selectedRows: Key[]) => any;
 }
 
 export interface TableCustomRecord<T> {
@@ -88,10 +92,10 @@ export interface TableActionType {
   getSelectRows: <T = Recordable>() => T[];
   clearSelectedRowKeys: () => void;
   expandAll: () => void;
-  expandRows: (keys: string[] | number[]) => void;
+  expandRows: (keys: (string | number)[]) => void;
   collapseAll: () => void;
   scrollTo: (pos: string) => void; // pos: id | "top" | "bottom"
-  getSelectRowKeys: () => string[];
+  getSelectRowKeys: () => Key[];
   deleteSelectRowByKey: (key: string) => void;
   setPagination: (info: Partial<PaginationProps>) => void;
   setTableData: <T = Recordable>(values: T[]) => void;
@@ -106,7 +110,7 @@ export interface TableActionType {
   setLoading: (loading: boolean) => void;
   setProps: (props: Partial<BasicTableProps>) => void;
   redoHeight: () => void;
-  setSelectedRowKeys: (rowKeys: string[] | number[]) => void;
+  setSelectedRowKeys: (rowKeys: Key[]) => void;
   getPaginationRef: () => PaginationProps | boolean;
   getSize: () => SizeType;
   getRowSelection: () => TableRowSelection<Recordable>;
@@ -116,6 +120,7 @@ export interface TableActionType {
   setShowPagination: (show: boolean) => Promise<void>;
   getShowPagination: () => boolean;
   setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void;
+  setCacheColumns?: (columns: BasicColumn[]) => void;
 }
 
 export interface FetchSetting {
@@ -429,6 +434,8 @@ export interface BasicColumn extends ColumnProps<Recordable> {
 
   slots?: Recordable;
 
+  // 自定义header渲染
+  customHeaderRender?: (column: BasicColumn) => string | VNodeChild | JSX.Element;
   // Whether to hide the column by default, it can be displayed in the column configuration
   defaultHidden?: boolean;
 
diff --git a/apps/admin/src/components/Tinymce/src/Editor.vue b/apps/admin/src/components/Tinymce/src/Editor.vue
index 759b5d5..a569b76 100644
--- a/apps/admin/src/components/Tinymce/src/Editor.vue
+++ b/apps/admin/src/components/Tinymce/src/Editor.vue
@@ -246,7 +246,7 @@
         bindHandlers(e, attrs, unref(editorRef));
       }
 
-      function setValue(editor: Record<string, any>, val: string, prevVal?: string) {
+      function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
         if (
           editor &&
           typeof val === 'string' &&
@@ -263,14 +263,14 @@
 
         watch(
           () => props.modelValue,
-          (val: string, prevVal: string) => {
+          (val, prevVal) => {
             setValue(editor, val, prevVal);
           },
         );
 
         watch(
           () => props.value,
-          (val: string, prevVal: string) => {
+          (val, prevVal) => {
             setValue(editor, val, prevVal);
           },
           {
diff --git a/apps/admin/src/components/Transition/src/CreateTransition.tsx b/apps/admin/src/components/Transition/src/CreateTransition.tsx
index d12518d..035a34a 100644
--- a/apps/admin/src/components/Transition/src/CreateTransition.tsx
+++ b/apps/admin/src/components/Transition/src/CreateTransition.tsx
@@ -23,8 +23,8 @@ export function createSimpleTransition(name: string, origin = 'top center 0', mo
       },
     },
     setup(props, { slots, attrs }) {
-      const onBeforeEnter = (el: HTMLElement) => {
-        el.style.transformOrigin = props.origin;
+      const onBeforeEnter = (el: Element) => {
+        (el as HTMLElement).style.transformOrigin = props.origin;
       };
 
       return () => {
diff --git a/apps/admin/src/components/Tree/src/BasicTree.vue b/apps/admin/src/components/Tree/src/BasicTree.vue
index 55546e4..46373d2 100644
--- a/apps/admin/src/components/Tree/src/BasicTree.vue
+++ b/apps/admin/src/components/Tree/src/BasicTree.vue
@@ -33,6 +33,7 @@
   import { CreateContextOptions } from '/@/components/ContextMenu';
   import { treeEmits, treeProps } from './types/tree';
   import { createBEM } from '/@/utils/bem';
+  import type { TreeProps } from 'ant-design-vue/es/tree/Tree';
 
   export default defineComponent({
     name: 'BasicTree',
@@ -106,7 +107,7 @@
           },
           onRightClick: handleRightClick,
         };
-        return omit(propsData, 'treeData', 'class');
+        return omit(propsData, 'treeData', 'class') as TreeProps;
       });
 
       const getTreeData = computed((): TreeItem[] =>
@@ -129,7 +130,7 @@
         getSelectedNode,
       } = useTree(treeDataRef, getFieldNames);
 
-      function getIcon(params: Recordable, icon?: string) {
+      function getIcon(params: TreeItem, icon?: string) {
         if (!icon) {
           if (props.renderIcon && isFunction(props.renderIcon)) {
             return props.renderIcon(params);
@@ -392,16 +393,26 @@
           ) : (
             title
           );
+
+          const iconDom = icon ? (
+            <TreeIcon icon={icon} />
+          ) : slots.icon ? (
+            <span class="mr-1">{getSlot(slots, 'icon')}</span>
+          ) : null;
+
           item[titleField] = (
             <span
               class={`${bem('title')} pl-2`}
               onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
             >
               {slots?.title ? (
-                getSlot(slots, 'title', item)
+                <>
+                  {iconDom}
+                  {getSlot(slots, 'title', item)}
+                </>
               ) : (
                 <>
-                  {icon && <TreeIcon icon={icon} />}
+                  {iconDom}
                   {titleDom}
                   <span class={bem('actions')}>{renderAction(item)}</span>
                 </>
@@ -443,7 +454,9 @@
               tip="加载中..."
             >
               <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
-                <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
+                <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value}>
+                  {extendSlots(slots, ['title'])}
+                </Tree>
               </ScrollContainer>
               <Empty
                 v-show={unref(getNotFound)}
diff --git a/apps/admin/src/components/Tree/src/TreeIcon.ts b/apps/admin/src/components/Tree/src/TreeIcon.ts
index dd4eab1..30eeef9 100644
--- a/apps/admin/src/components/Tree/src/TreeIcon.ts
+++ b/apps/admin/src/components/Tree/src/TreeIcon.ts
@@ -1,12 +1,12 @@
-import type { VNode, FunctionalComponent } from 'vue';
+import type { VNode } from 'vue';
 import { h } from 'vue';
 import { isString } from 'lodash-es';
 import Icon from '@/components/Icon/Icon.vue';
 
-export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
+export const TreeIcon = ({ icon }: { icon: VNode | string | undefined }) => {
   if (!icon) return null;
   if (isString(icon)) {
     return h(Icon, { icon, class: 'mr-1' });
   }
-  return Icon;
+  return h(Icon);
 };
diff --git a/apps/admin/src/components/Tree/src/components/TreeHeader.vue b/apps/admin/src/components/Tree/src/components/TreeHeader.vue
index cb269f5..1cbee0b 100644
--- a/apps/admin/src/components/Tree/src/components/TreeHeader.vue
+++ b/apps/admin/src/components/Tree/src/components/TreeHeader.vue
@@ -34,7 +34,14 @@
 </template>
 <script lang="ts" setup>
   import { type PropType, computed, ref, watch, useSlots } from 'vue';
-  import { Dropdown, Menu, MenuItem, MenuDivider, InputSearch } from 'ant-design-vue';
+  import {
+    Dropdown,
+    Menu,
+    MenuItem,
+    MenuDivider,
+    InputSearch,
+    type MenuProps,
+  } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { BasicTitle } from '/@/components/Basic';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -122,8 +129,7 @@
       : defaultToolbarList;
   });
 
-  function handleMenuClick(e: { key: ToolbarEnum }) {
-    const { key } = e;
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
     switch (key) {
       case ToolbarEnum.SELECT_ALL:
         props.checkAll?.(true);
@@ -144,7 +150,7 @@
         emit('strictly-change', true);
         break;
     }
-  }
+  };
 
   function emitChange(value?: string): void {
     emit('search', value);
diff --git a/apps/admin/src/components/Tree/src/hooks/useTree.ts b/apps/admin/src/components/Tree/src/hooks/useTree.ts
index 6bd0539..c48000c 100644
--- a/apps/admin/src/components/Tree/src/hooks/useTree.ts
+++ b/apps/admin/src/components/Tree/src/hooks/useTree.ts
@@ -65,7 +65,7 @@ export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: Compute
   }
 
   // Update node
-  function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
+  function updateNodeByKey(key: string, node: Omit<TreeDataItem, 'key'>, list?: TreeDataItem[]) {
     if (!key) return;
     const treeData = list || unref(treeDataRef);
     const { key: keyField, children: childrenField } = unref(getFieldNames);
@@ -184,7 +184,7 @@ export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: Compute
     if (!key && key !== 0) return null;
     const treeData = list || unref(treeDataRef);
     const { key: keyField, children: childrenField } = unref(getFieldNames);
-    if (!keyField) return;
+    if (!keyField) return null;
     treeData.forEach((item) => {
       if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
       if (item[keyField] === key) {
diff --git a/apps/admin/src/components/Tree/src/types/tree.ts b/apps/admin/src/components/Tree/src/types/tree.ts
index 994434b..ff7cf04 100644
--- a/apps/admin/src/components/Tree/src/types/tree.ts
+++ b/apps/admin/src/components/Tree/src/types/tree.ts
@@ -46,7 +46,7 @@ export const treeProps = buildProps({
   },
 
   renderIcon: {
-    type: Function as PropType<(params: Recordable) => string>,
+    type: Function as PropType<(...params: any[]) => string>,
   },
 
   helpMessage: {
@@ -91,7 +91,6 @@ export const treeProps = buildProps({
 
   expandedKeys: {
     type: Array as PropType<KeyType[]>,
-    default: () => [],
   },
 
   selectedKeys: {
@@ -105,7 +104,7 @@ export const treeProps = buildProps({
   },
 
   beforeRightClick: {
-    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
+    type: Function as PropType<(...arg: any) => Promise<ContextMenuItem[] | ContextMenuOptions>>,
     default: undefined,
   },
 
diff --git a/apps/admin/src/components/Tree/style/index.less b/apps/admin/src/components/Tree/style/index.less
index 472d4ca..231f27b 100644
--- a/apps/admin/src/components/Tree/style/index.less
+++ b/apps/admin/src/components/Tree/style/index.less
@@ -17,8 +17,8 @@
   }
 
   &__title {
-    position: relative;
     display: flex;
+    position: relative;
     align-items: center;
     width: 100%;
     padding-right: 10px;
@@ -35,15 +35,15 @@
   }
 
   &__actions {
+    display: flex;
     position: absolute;
     //top: 2px;
     right: 3px;
-    display: flex;
   }
 
   &__action {
-    margin-left: 4px;
     visibility: hidden;
+    margin-left: 4px;
   }
 
   &-header {
diff --git a/apps/admin/src/components/Upload/index.ts b/apps/admin/src/components/Upload/index.ts
index f991922..568a7d9 100644
--- a/apps/admin/src/components/Upload/index.ts
+++ b/apps/admin/src/components/Upload/index.ts
@@ -1,7 +1,4 @@
 import { withInstall } from '/@/utils';
 import basicUpload from './src/BasicUpload.vue';
-import avatarUpload from './src/AvatarUpload.vue';
 
 export const BasicUpload = withInstall(basicUpload);
-
-export const AvatarUpload = withInstall(avatarUpload);
diff --git a/apps/admin/src/components/Upload/src/AvatarUpload.vue b/apps/admin/src/components/Upload/src/AvatarUpload.vue
deleted file mode 100644
index 0d14670..0000000
--- a/apps/admin/src/components/Upload/src/AvatarUpload.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div>
-    <Upload
-      v-model:file-list="fileList"
-      name="file"
-      list-type="picture-card"
-      class="avatar-uploader"
-      :action="uploadUrl"
-      :before-upload="beforeUpload"
-      :headers="requestHeaders"
-      @preview="handlePreview"
-      @change="handleChange"
-    >
-      <img v-if="previewImage" :src="previewImage" alt="logo" />
-      <div v-if="fileList.length < 1">
-        <loading-outlined v-if="loading" />
-        <plus-outlined v-else />
-        <div class="ant-upload-text">上传</div>
-      </div>
-    </Upload>
-    <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-      <img alt="example" style="width: 100%" :src="previewImage" />
-    </Modal>
-
-    <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-      <img alt="example" style="width: 100%" :src="previewImage" />
-    </Modal>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { Upload, Modal } from 'ant-design-vue';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { uploadUrl } from '/@/api/sys/upload';
-  import { getToken } from '/@/utils/auth';
-  import { ref, watch } from 'vue';
-
-  interface FileItem {
-    uid?: string;
-    name?: string;
-    status?: string;
-    response?: string;
-    percent?: number;
-    url?: string;
-    preview?: string;
-    originFileObj?: any;
-  }
-
-  function getBase64(file: File) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result);
-      reader.onerror = (error) => reject(error);
-    });
-  }
-
-  const props = defineProps({
-    avatar: {
-      type: String,
-    },
-  });
-
-  const fileList = ref<FileItem[]>([]);
-
-  const emit = defineEmits(['change']);
-
-  const { createMessage } = useMessage();
-
-  const requestHeaders = {
-    authorization: 'Bearer ' + getToken(),
-  };
-
-  const loading = ref<boolean>(false);
-  const previewVisible = ref<boolean>(false);
-  const previewImage = ref<string | undefined>('');
-
-  const handleCancel = () => {
-    previewImage.value = '';
-    previewVisible.value = false;
-  };
-
-  const handlePreview = async (file) => {
-    if (!file.url && !file.preview) {
-      file.preview = (await getBase64(file.originFileObj)) as string;
-    }
-    previewImage.value = file.url || file.preview;
-    previewVisible.value = true;
-  };
-
-  const handleChange = ({ fileList: newFileList }) => {
-    let temp = newFileList[0];
-    if (temp?.response) {
-      temp.url = temp.response;
-    }
-
-    emit('change', temp);
-  };
-
-  const beforeUpload = (file) => {
-    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-    if (!isJpgOrPng) {
-      createMessage.error('请选择正确的图片格式');
-    }
-    const isLt2M = file.size / 1024 / 1024 < 1;
-    if (!isLt2M) {
-      createMessage.error('图片大小请小于1M');
-    }
-    return isJpgOrPng && isLt2M;
-  };
-
-  watch(
-    () => props.avatar,
-    (val) => {
-      fileList.value = val ? [{ url: val }] : [];
-    },
-  );
-</script>
diff --git a/apps/admin/src/components/Upload/src/FileList.vue b/apps/admin/src/components/Upload/src/FileList.vue
index ddb087e..c3b6534 100644
--- a/apps/admin/src/components/Upload/src/FileList.vue
+++ b/apps/admin/src/components/Upload/src/FileList.vue
@@ -21,49 +21,52 @@
         const { columns, actionColumn, dataSource } = props;
         const columnList = [...columns, actionColumn];
         return (
-          <table class="file-table">
-            <colgroup>
-              {columnList.map((item) => {
-                const { width = 0, dataIndex } = item;
-                const style: CSSProperties = {
-                  width: `${width}px`,
-                  minWidth: `${width}px`,
-                };
-                return <col style={width ? style : {}} key={dataIndex} />;
-              })}
-            </colgroup>
-            <thead>
-              <tr class="file-table-tr">
+          // x scrollbar
+          <div class="overflow-x-auto">
+            <table class="file-table">
+              <colgroup>
                 {columnList.map((item) => {
-                  const { title = '', align = 'center', dataIndex } = item;
+                  const { width = 0, dataIndex } = item;
+                  const style: CSSProperties = {
+                    width: `${width}px`,
+                    minWidth: `${width}px`,
+                  };
+                  return <col style={width ? style : {}} key={dataIndex} />;
+                })}
+              </colgroup>
+              <thead>
+                <tr class="file-table-tr">
+                  {columnList.map((item) => {
+                    const { title = '', align = 'center', dataIndex } = item;
+                    return (
+                      <th class={['file-table-th', align]} key={dataIndex}>
+                        {title}
+                      </th>
+                    );
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {dataSource.map((record = {}, index) => {
                   return (
-                    <th class={['file-table-th', align]} key={dataIndex}>
-                      {title}
-                    </th>
+                    <tr class="file-table-tr" key={`${index + record.name || ''}`}>
+                      {columnList.map((item) => {
+                        const { dataIndex = '', customRender, align = 'center' } = item;
+                        const render = customRender && isFunction(customRender);
+                        return (
+                          <td class={['file-table-td break-all', align]} key={dataIndex}>
+                            {render
+                              ? customRender?.({ text: record[dataIndex], record })
+                              : record[dataIndex]}
+                          </td>
+                        );
+                      })}
+                    </tr>
                   );
                 })}
-              </tr>
-            </thead>
-            <tbody>
-              {dataSource.map((record = {}, index) => {
-                return (
-                  <tr class="file-table-tr" key={`${index + record.name || ''}`}>
-                    {columnList.map((item) => {
-                      const { dataIndex = '', customRender, align = 'center' } = item;
-                      const render = customRender && isFunction(customRender);
-                      return (
-                        <td class={['file-table-td', align]} key={dataIndex}>
-                          {render
-                            ? customRender?.({ text: record[dataIndex], record })
-                            : record[dataIndex]}
-                        </td>
-                      );
-                    })}
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+              </tbody>
+            </table>
+          </div>
         );
       };
     },
diff --git a/apps/admin/src/components/Upload/src/UploadModal.vue b/apps/admin/src/components/Upload/src/UploadModal.vue
index 268e560..528b034 100644
--- a/apps/admin/src/components/Upload/src/UploadModal.vue
+++ b/apps/admin/src/components/Upload/src/UploadModal.vue
@@ -46,7 +46,6 @@
   import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
   import { Upload, Alert } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  //   import { BasicTable, useTable } from '/@/components/Table';
   // hooks
   import { useUploadType } from './useUpload';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -165,14 +164,6 @@
         emit('delete', record);
       }
 
-      // 预览
-      // function handlePreview(record: FileItem) {
-      //   const { thumbUrl = '' } = record;
-      //   createImgPreview({
-      //     imageList: [thumbUrl],
-      //   });
-      // }
-
       async function uploadApiByItem(item: FileItem) {
         const { api } = props;
         if (!api || !isFunction(api)) {
@@ -276,15 +267,14 @@
       }
 
       return {
-        columns: createTableColumns() as any[],
-        actionColumn: createActionColumn(handleRemove) as any,
+        columns: createTableColumns(),
+        actionColumn: createActionColumn(handleRemove),
         register,
         closeModal,
         getHelpText,
         getStringAccept,
         getOkButtonProps,
         beforeUpload,
-        // registerTable,
         fileListRef,
         state,
         isUploadingRef,
diff --git a/apps/admin/src/components/Upload/src/UploadPreviewModal.vue b/apps/admin/src/components/Upload/src/UploadPreviewModal.vue
index bc4091b..b66c777 100644
--- a/apps/admin/src/components/Upload/src/UploadPreviewModal.vue
+++ b/apps/admin/src/components/Upload/src/UploadPreviewModal.vue
@@ -12,7 +12,6 @@
 </template>
 <script lang="ts">
   import { defineComponent, watch, ref } from 'vue';
-  //   import { BasicTable, useTable } from '/@/components/Table';
   import FileList from './FileList.vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { previewProps } from './props';
@@ -61,14 +60,6 @@
         }
       }
 
-      // // 预览
-      // function handlePreview(record: PreviewFileItem) {
-      //   const { url = '' } = record;
-      //   createImgPreview({
-      //     imageList: [url],
-      //   });
-      // }
-
       // 下载
       function handleDownload(record: PreviewFileItem) {
         const { url = '' } = record;
diff --git a/apps/admin/src/components/Upload/src/data.tsx b/apps/admin/src/components/Upload/src/data.tsx
index 8e08833..d84cf7a 100644
--- a/apps/admin/src/components/Upload/src/data.tsx
+++ b/apps/admin/src/components/Upload/src/data.tsx
@@ -1,9 +1,6 @@
 import type { BasicColumn, ActionItem } from '/@/components/Table';
-import { FileItem, PreviewFileItem, UploadResultStatus } from './typing';
-import {
-  // checkImgType,
-  isImgTypeByName,
-} from './helper';
+import { FileBasicColumn, FileItem, PreviewFileItem, UploadResultStatus } from './typing';
+import { isImgTypeByName } from './helper';
 import { Progress, Tag } from 'ant-design-vue';
 import TableAction from '/@/components/Table/src/components/TableAction.vue';
 import ThumbUrl from './ThumbUrl.vue';
@@ -12,7 +9,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 const { t } = useI18n();
 
 // 文件上传列表
-export function createTableColumns(): BasicColumn[] {
+export function createTableColumns(): FileBasicColumn[] {
   return [
     {
       dataIndex: 'thumbUrl',
@@ -38,12 +35,12 @@ export function createTableColumns(): BasicColumn[] {
           status = 'success';
         }
         return (
-          <span>
-            <p class="truncate mb-1" title={text}>
+          <div>
+            <p class="truncate mb-1 max-w-[280px]" title={text}>
               {text}
             </p>
             <Progress percent={percent} size="small" status={status} />
-          </span>
+          </div>
         );
       },
     },
@@ -55,11 +52,6 @@ export function createTableColumns(): BasicColumn[] {
         return text && (text / 1024).toFixed(2) + 'KB';
       },
     },
-    // {
-    //   dataIndex: 'type',
-    //   title: '文件类型',
-    //   width: 100,
-    // },
     {
       dataIndex: 'status',
       title: t('component.upload.fileStatue'),
@@ -73,12 +65,12 @@ export function createTableColumns(): BasicColumn[] {
           return <Tag color="blue">{() => t('component.upload.uploading')}</Tag>;
         }
 
-        return text;
+        return text || t('component.upload.pending');
       },
     },
   ];
 }
-export function createActionColumn(handleRemove: Function): BasicColumn {
+export function createActionColumn(handleRemove: Function): FileBasicColumn {
   return {
     width: 120,
     title: t('component.upload.operating'),
@@ -92,12 +84,6 @@ export function createActionColumn(handleRemove: Function): BasicColumn {
           onClick: handleRemove.bind(null, record),
         },
       ];
-      // if (checkImgType(record)) {
-      //   actions.unshift({
-      //     label: t('component.upload.preview'),
-      //     onClick: handlePreview.bind(null, record),
-      //   });
-      // }
       return <TableAction actions={actions} outside={true} />;
     },
   };
diff --git a/apps/admin/src/components/Upload/src/typing.ts b/apps/admin/src/components/Upload/src/typing.ts
index c630110..2ca5d4e 100644
--- a/apps/admin/src/components/Upload/src/typing.ts
+++ b/apps/admin/src/components/Upload/src/typing.ts
@@ -1,3 +1,4 @@
+import { BasicColumn } from '../../Table';
 import { UploadApiResult } from '/@/api/sys/model/uploadModel';
 
 export enum UploadResultStatus {
@@ -24,7 +25,7 @@ export interface PreviewFileItem {
   type: string;
 }
 
-export interface FileBasicColumn {
+export interface FileBasicColumn extends Omit<BasicColumn, 'customRender'> {
   /**
    * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
    * @type Function | ScopedSlot
@@ -36,20 +37,9 @@ export interface FileBasicColumn {
    */
   title: string;
 
-  /**
-   * Width of this column
-   * @type string | number
-   */
-  width?: number;
   /**
    * Display field of the data record, could be set like a.b.c
    * @type string
    */
   dataIndex: string;
-  /**
-   * specify how content is aligned
-   * @default 'left'
-   * @type string
-   */
-  align?: 'left' | 'right' | 'center';
 }
diff --git a/apps/admin/src/components/VxeTable/src/css/component.scss b/apps/admin/src/components/VxeTable/src/css/component.scss
index 5388862..12b4615 100644
--- a/apps/admin/src/components/VxeTable/src/css/component.scss
+++ b/apps/admin/src/components/VxeTable/src/css/component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable scss/percent-placeholder-pattern */
 %ResetBorder {
   border: 0;
   box-shadow: none;
@@ -13,11 +14,13 @@
     width: 100%;
   }
 }
+
 .vxe-form {
   .vxe-form--item-content {
     @extend %CompWidth;
   }
 }
+
 .vxe-table--filter-antd-wrapper {
   & > .ant-input,
   & > .ant-input-number,
@@ -26,16 +29,20 @@
     width: 180px;
   }
 }
+
 .vxe-cell,
 .vxe-tree-cell {
   @extend %CompWidth;
+
   & > .ant-rate {
     vertical-align: bottom;
+
     .anticon-star {
       display: block;
     }
   }
 }
+
 .col--valid-error {
   & > .vxe-cell,
   & > .vxe-tree-cell {
@@ -50,55 +57,67 @@
     }
   }
 }
+
 .vxe-table.cell--highlight {
   .vxe-cell,
   .vxe-tree-cell {
     & > .ant-input,
     & > .ant-input-number {
-      padding: 0;
       @extend %ResetBorder;
+
+      padding: 0;
     }
+
     & > .ant-select {
       .ant-input {
+        @extend %ResetBorder;
+
         padding: 0;
+      }
+
+      .ant-select-selection {
         @extend %ResetBorder;
+
+        .ant-select-selection__rendered {
+          margin: 0;
+        }
       }
     }
+
     & > .ant-input-number {
       .ant-input-number-input {
         padding: 0;
       }
+
       .ant-input-number-handler-wrap,
       .ant-input-number-handler-down {
         @extend %ResetBorder;
       }
     }
-    & > .ant-select {
-      .ant-select-selection {
-        @extend %ResetBorder;
-        .ant-select-selection__rendered {
-          margin: 0;
-        }
-      }
-    }
+
     & > .ant-cascader-picker {
       .ant-input {
         @extend %ResetBorder;
       }
+
       .ant-cascader-picker-label {
         padding: 0;
       }
     }
+
     & > .ant-calendar-picker {
       .ant-calendar-picker-input {
-        padding: 0;
         @extend %ResetBorder;
+
+        padding: 0;
       }
     }
+
     & > .ant-time-picker {
       .ant-time-picker-input {
-        padding: 0;
         @extend %ResetBorder;
+
+        padding: 0;
       }
     }
   }
diff --git a/apps/admin/src/components/VxeTable/src/css/index.scss b/apps/admin/src/components/VxeTable/src/css/index.scss
index 2e92e5c..6023205 100644
--- a/apps/admin/src/components/VxeTable/src/css/index.scss
+++ b/apps/admin/src/components/VxeTable/src/css/index.scss
@@ -1,6 +1,6 @@
-@import './common.scss';
-@import './variable.scss';
-@import './scrollbar.scss';
-@import './toolbar.scss';
-@import './component.scss';
-@import 'vxe-table/styles/index.scss';
+@import './common';
+@import './variable';
+@import './scrollbar';
+@import './toolbar';
+@import './component';
+@import 'vxe-table/styles/index';
diff --git a/apps/admin/src/components/VxeTable/src/css/scrollbar.scss b/apps/admin/src/components/VxeTable/src/css/scrollbar.scss
index 05c7dc7..beea2d7 100644
--- a/apps/admin/src/components/VxeTable/src/css/scrollbar.scss
+++ b/apps/admin/src/components/VxeTable/src/css/scrollbar.scss
@@ -3,22 +3,27 @@
     width: 8px;
     height: 8px;
   }
+
   ::-webkit-scrollbar-track {
-    background-color: #ffffff;
+    background-color: #fff;
   }
+
   ::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
     border: 1px solid #f1f1f1;
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background-color: rgb(0 0 0 / 10%);
+    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
   }
+
   ::-webkit-scrollbar-thumb:hover {
     background-color: #a8a8a8;
   }
+
   ::-webkit-scrollbar-thumb:active {
     background-color: #a8a8a8;
   }
+
   ::-webkit-scrollbar-corner {
-    background-color: #ffffff;
+    background-color: #fff;
   }
 }
diff --git a/apps/admin/src/components/VxeTable/src/css/toolbar.scss b/apps/admin/src/components/VxeTable/src/css/toolbar.scss
index 63d43f4..8b30e3a 100644
--- a/apps/admin/src/components/VxeTable/src/css/toolbar.scss
+++ b/apps/admin/src/components/VxeTable/src/css/toolbar.scss
@@ -5,6 +5,7 @@
 .vxe-toolbar .vxe-tools--wrapper,
 .vxe-toolbar .vxe-tools--operate button:first-child {
   margin: 0;
+  margin-left: 10px;
 }
 
 .vxe-toolbar .vxe-tools--wrapper,
@@ -13,11 +14,6 @@
   border-radius: 0 !important;
 }
 
-.vxe-toolbar .vxe-tools--wrapper,
-.vxe-toolbar .vxe-tools--operate button:first-child {
-  margin-left: 10px;
-}
-
 .vxe-toolbar .vxe-tools--wrapper,
 .vxe-toolbar .vxe-tools--operate .vxe-custom--wrapper {
   margin-left: 1px;
diff --git a/apps/admin/src/components/VxeTable/src/css/variable.scss b/apps/admin/src/components/VxeTable/src/css/variable.scss
index eaeab08..eedcf8b 100644
--- a/apps/admin/src/components/VxeTable/src/css/variable.scss
+++ b/apps/admin/src/components/VxeTable/src/css/variable.scss
@@ -1,6 +1,6 @@
-$vxe-primary-color: rgb(9, 96, 189) !default;
-$vxe-table-row-current-background-color: rgba(9, 96, 189, 0.3);
-$vxe-table-row-hover-current-background-color: rgba(9, 96, 189, 0.2);
-$vxe-table-column-hover-background-color: rgba(9, 96, 189, 0.3);
-$vxe-table-column-current-background-color: rgba(9, 96, 189, 0.2);
+$vxe-primary-color: rgb(9 96 189) !default;
+$vxe-table-row-current-background-color: rgb(9 96 189 / 30%);
+$vxe-table-row-hover-current-background-color: rgb(9 96 189 / 20%);
+$vxe-table-column-hover-background-color: rgb(9 96 189 / 30%);
+$vxe-table-column-current-background-color: rgb(9 96 189 / 20%);
 $vxe-table-validate-error-color: #f56c6c;
diff --git a/apps/admin/src/core/socket/event-type.ts b/apps/admin/src/core/socket/event-type.ts
deleted file mode 100644
index 11a7ad3..0000000
--- a/apps/admin/src/core/socket/event-type.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Socket事件名定义
- */
-
-/** 强制踢下线 */
-export const EVENT_KICK = 'kick';
-
-/** 当前用户的角色权限或所拥有的菜单信息被更新时 重新获取最新的权限菜单 */
-export const EVENT_UPDATE_MENU = 'update_menu';
diff --git a/apps/admin/src/core/socket/socket-io.ts b/apps/admin/src/core/socket/socket-io.ts
deleted file mode 100644
index 4c40828..0000000
--- a/apps/admin/src/core/socket/socket-io.ts
+++ /dev/null
@@ -1,276 +0,0 @@
-import { isEmpty, isFunction } from 'lodash-es';
-import IO, { type Socket } from 'socket.io-client';
-import { useUserStoreWithOut } from '/@/store/modules/user';
-import { useWsStore } from '/@/store/modules/ws';
-
-/**
- * Socket连接状态
- */
-export enum SocketStatus {
-  // 连接中
-  CONNECTING = 'CONNECTING',
-  // 已连接
-  CONNECTED = 'CONNECTED',
-  // 已关闭
-  CLOSE = 'CLOSE',
-}
-
-export type SocketStatusType = keyof typeof SocketStatus;
-
-export type SocketIOWrapperType = InstanceType<typeof SocketIOWrapper>;
-
-export class SocketIOWrapper {
-  /**
-   * socket.io-client reserved event keywords
-   * @type {string[]}
-   */
-  static staticEvents = [
-    // socket instance listen
-    'connect',
-    'connect_error',
-    'disconnect',
-    'disconnecting',
-    'newListener',
-    'removeListener',
-    // Manager listen
-    'error',
-    'reconnect',
-    'reconnect_attempt',
-    'reconnect_error',
-    'reconnect_failed',
-    'ping',
-    'pong',
-    'close',
-  ] as const;
-  socketInstance: Socket | null;
-  emitQueue: any[];
-  closeByServer: boolean;
-  waiting: boolean;
-  flushing: boolean;
-  handleIndex: number;
-  runningQueue: any[];
-  wsStore = useWsStore();
-
-  constructor() {
-    // socket io client instance
-    this.socketInstance = null;
-    // emit cache queue
-    this.emitQueue = [];
-    // flush will using
-    this.runningQueue = [];
-    this.handleIndex = 0;
-    this.flushing = false;
-    this.waiting = false;
-    // is server disconnect
-    this.closeByServer = false;
-    // init
-    this._init();
-  }
-
-  /**
-   * 获取当前连接的clientid
-   */
-  getClientId() {
-    if (this.socketInstance) {
-      return this.socketInstance.id;
-    }
-    return undefined;
-  }
-
-  /**
-   * 获取真实的Socket连接状态
-   */
-  isConnected() {
-    return this.socketInstance?.connected;
-  }
-
-  /**
-   * 主动关闭连接
-   */
-  close() {
-    if (this.socketInstance) {
-      this.socketInstance.close();
-    }
-    this.socketInstance = null;
-  }
-
-  /**
-   * SocketIO 初始化
-   */
-  _init() {
-    if (this.socketInstance && this.socketInstance.connected) {
-      throw new Error('socket is connecting');
-    }
-    // auth token
-    const token = useUserStoreWithOut().getToken;
-
-    if (isEmpty(token)) {
-      // 未登录状态则直接关闭连接
-      this.close();
-      return;
-    }
-    this.changeStatus(SocketStatus.CONNECTING);
-
-    try {
-      // 初始化SocketIO实例
-      this.socketInstance = IO(import.meta.env.VITE_GLOB_SOCKET_NSP, {
-        path: import.meta.env.VITE_GLOB_SOCKET_PATH,
-        transports: ['websocket'],
-        query: { token },
-      });
-      // register default event
-      this.socketInstance.on(SocketIOWrapper.staticEvents[0], this.handleConnectEvent.bind(this));
-      this.socketInstance.on(SocketIOWrapper.staticEvents[1], this.handleErrorEvent.bind(this));
-      this.socketInstance.on(
-        SocketIOWrapper.staticEvents[2],
-        this.handleDisconnectEvent.bind(this),
-      );
-      // reconnecting
-      this.socketInstance.io.on(
-        SocketIOWrapper.staticEvents[8],
-        this.handleReconnectAttemptEvent.bind(this),
-      );
-      // error
-      this.socketInstance.io.on(SocketIOWrapper.staticEvents[13], () => {
-        console.log('已与服务端断开连接');
-      });
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  /**
-   * on custom event
-   */
-  subscribe(eventName, fn) {
-    if (isEmpty(eventName) || !isFunction(fn)) {
-      throw new TypeError('param must correct type');
-    }
-    // register
-    this.socketInstance?.on(eventName, fn);
-  }
-
-  /**
-   * off custom event
-   */
-  unsubscribe(eventName, fn) {
-    if (isEmpty(eventName)) {
-      throw new TypeError('param must correct type');
-    }
-    if (SocketIOWrapper.staticEvents.includes(eventName) && !isFunction(fn)) {
-      throw new Error('default event remove must has second param');
-    }
-    this.socketInstance?.off(eventName, fn);
-  }
-
-  /**
-   * 派发事件通知Socket状态
-   */
-  changeStatus(status) {
-    this.wsStore.setStatus(status);
-  }
-
-  /**
-   * 默认事件处理
-   */
-  handleConnectEvent() {
-    this.changeStatus(SocketStatus.CONNECTED);
-    // flush queue
-    if (this.emitQueue.length > 0) {
-      // copy
-      const queue = this.emitQueue.slice();
-      // clean
-      this.emitQueue = [];
-      for (let i = 0; i < queue.length; i++) {
-        this.queueEmit(queue[i]);
-      }
-    }
-  }
-
-  /**
-   * 默认事件处理
-   */
-  handleReconnectAttemptEvent() {
-    this.changeStatus(SocketStatus.CONNECTING);
-  }
-
-  /**
-   * 默认事件处理
-   */
-  handleDisconnectEvent(reason) {
-    if (reason === 'io server disconnect') {
-      this.closeByServer = true;
-      this.changeStatus(SocketStatus.CLOSE);
-    }
-  }
-
-  /**
-   * 默认事件处理
-   */
-  handleErrorEvent() {
-    if (this.closeByServer) {
-      this.changeStatus(SocketStatus.CLOSE);
-    }
-  }
-
-  /**
-   * client emit
-   * The following events are reserved and should not be used as event names by your application:
-   * connect、connect_error、connect_timeout、error、disconnect、
-   * disconnecting、newListener、reconnect_attempt、reconnecting、reconnect_error、
-   * reconnect_failed、removeListener、ping、pong
-   */
-  emit(eventName, data) {
-    // 检查event名称
-    if (isEmpty(eventName) || SocketIOWrapper.staticEvents.includes(eventName)) {
-      throw new TypeError('event is not allow emit');
-    }
-    if (!this.isConnected()) {
-      // 未连接状态，则缓存，在重新连接时则会执行该队列
-      this.emitQueue.push({ eventName, data });
-    } else {
-      // 连接成功状态
-      this.socketInstance?.emit(eventName, data);
-    }
-  }
-
-  /**
-   * 重置队列标志状态
-   */
-  resetState() {
-    this.handleIndex = 0;
-    this.runningQueue = [];
-    this.waiting = this.flushing = false;
-  }
-
-  queueEmit(item) {
-    if (!this.flushing) {
-      this.runningQueue.push(item);
-    } else {
-      // if flushing
-      let i = this.runningQueue.length - 1;
-      while (i > this.handleIndex) {
-        i--;
-      }
-      this.runningQueue.splice(i + 1, 0, item);
-    }
-    // queue the flush
-    if (!this.waiting) {
-      this.waiting = true;
-      setTimeout(this.flushQueue.bind(this), 0);
-    }
-  }
-
-  flushQueue() {
-    this.flushing = true;
-    let item;
-    // emit
-    for (this.handleIndex = 0; this.handleIndex < this.runningQueue.length; this.handleIndex++) {
-      item = this.runningQueue[this.handleIndex];
-      // re emit
-      this.emit(item.eventName, item.data);
-    }
-
-    this.resetState();
-  }
-}
diff --git a/apps/admin/src/design/ant/index.less b/apps/admin/src/design/ant/index.less
index 1cc8165..d508217 100644
--- a/apps/admin/src/design/ant/index.less
+++ b/apps/admin/src/design/ant/index.less
@@ -8,10 +8,6 @@
   }
 }
 
-span.anticon:not(.app-iconify) {
-  vertical-align: 0.125em !important;
-}
-
 .ant-back-top {
   right: 20px;
   bottom: 20px;
diff --git a/apps/admin/src/design/ant/input.less b/apps/admin/src/design/ant/input.less
index 5a8bc9b..8245fb7 100644
--- a/apps/admin/src/design/ant/input.less
+++ b/apps/admin/src/design/ant/input.less
@@ -4,8 +4,8 @@
 .ant-input {
   &-number,
   &-number-group-wrapper {
-    min-width: 110px;
     width: 100% !important;
+    min-width: 110px;
     max-width: 100%;
   }
 }
diff --git a/apps/admin/src/design/ant/pagination.less b/apps/admin/src/design/ant/pagination.less
index b3580f9..0fb6711 100644
--- a/apps/admin/src/design/ant/pagination.less
+++ b/apps/admin/src/design/ant/pagination.less
@@ -16,9 +16,9 @@ html[data-theme='dark'] {
       }
 
       .ant-pagination-item-active {
-        background-color: @primary-color !important;
         border: none;
         border-radius: none !important;
+        background-color: @primary-color !important;
 
         a {
           color: @white !important;
@@ -32,9 +32,9 @@ html[data-theme='dark'] {
   &.mini {
     .ant-pagination-prev,
     .ant-pagination-next {
-      font-size: 12px;
-      color: @text-color-base;
       border: 1px solid;
+      color: @text-color-base;
+      font-size: 12px;
     }
 
     .ant-pagination-prev:hover,
@@ -50,9 +50,9 @@ html[data-theme='dark'] {
     .ant-pagination-next,
     .ant-pagination-item {
       margin: 0 4px !important;
-      background-color: #f4f4f5 !important;
       border: none;
       border-radius: none !important;
+      background-color: #f4f4f5 !important;
 
       a {
         margin-top: 1px;
@@ -65,9 +65,9 @@ html[data-theme='dark'] {
     }
 
     .ant-pagination-item-active {
-      background-color: @primary-color !important;
       border: none;
       border-radius: none !important;
+      background-color: @primary-color !important;
 
       a {
         color: @white !important;
diff --git a/apps/admin/src/design/ant/table.less b/apps/admin/src/design/ant/table.less
index ee62b99..fd50da7 100644
--- a/apps/admin/src/design/ant/table.less
+++ b/apps/admin/src/design/ant/table.less
@@ -44,10 +44,6 @@
         .ant-table {
           .ant-table-content {
             .ant-table-scroll {
-              .ant-table-hide-scrollbar {
-                //overflow-x: auto !important;
-              }
-
               .ant-table-body {
                 overflow: auto !important;
               }
diff --git a/apps/admin/src/design/dark.less b/apps/admin/src/design/dark.less
index 2c7eb1b..f023a50 100644
--- a/apps/admin/src/design/dark.less
+++ b/apps/admin/src/design/dark.less
@@ -1,9668 +1,1396 @@
-[data-theme='dark'] ::-webkit-scrollbar-track {
-  background-color: rgb(0 0 0 / 5%);
-}
+[data-theme='dark'] {
+  @media (max-width: 1200px) {
+    background-color: #293146;
+  }
 
-[data-theme='dark'] ::-webkit-scrollbar-thumb {
-  background-color: rgb(144 147 153 / 30%);
-  box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
-}
+  ::-webkit-scrollbar-track {
+    background-color: rgb(0 0 0 / 5%);
+  }
 
-[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
-  background-color: #b6b7b9;
-}
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(144 147 153 / 30%);
+    box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
+  }
 
-[data-theme='dark'] #nprogress .bar {
-  background-color: #0960bd;
-}
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #b6b7b9;
+  }
 
-html[data-theme='dark'] .ant-pagination.mini .ant-pagination-item,
-html[data-theme='dark'] .ant-pagination.mini .ant-pagination-next,
-html[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev {
-  background-color: rgb(255 255 255 / 4%) !important;
-}
+  #nprogress .bar {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] html[data-theme='dark'] .ant-pagination.mini .ant-pagination-item a,
-[data-theme='dark'] html[data-theme='dark'] .ant-pagination.mini .ant-pagination-next a,
-[data-theme='dark'] html[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev a {
-  color: #8b949e !important;
-}
+  .modal-icon-warning {
+    color: #efbd47 !important;
+  }
 
-[data-theme='dark'] html[data-theme='dark'] .ant-pagination.mini .ant-select-arrow {
-  color: #8b949e !important;
-}
+  .modal-icon-success {
+    color: #55d187 !important;
+  }
 
-[data-theme='dark'] html[data-theme='dark'] .ant-pagination.mini .ant-pagination-item-active {
-  background-color: #0960bd !important;
-}
+  .modal-icon-error {
+    color: #ed6f6f !important;
+  }
 
-[data-theme='dark'] html[data-theme='dark'] .ant-pagination.mini .ant-pagination-item-active a {
-  color: #fff !important;
-}
+  .modal-icon-info {
+    color: #0960bd !important;
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-next,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev {
-  color: #c9d1d9;
-}
+  .bg-white {
+    background-color: #151515 !important;
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item:focus a,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item:hover a,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-next:hover a,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev:hover a {
-  color: #0960bd;
-}
+  .text-secondary {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-next,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev {
-  background-color: #f4f4f5 !important;
-}
+  :not(:root):fullscreen::backdrop {
+    background-color: #000 !important;
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item a,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-next a,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev a {
-  color: #606266;
-}
+  html {
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item-active {
-  background-color: #0960bd !important;
-}
+  body {
+    background-color: #000;
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item-active a {
-  color: #fff !important;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: rgb(255 255 255 / 65%);
+  }
 
-[data-theme='dark'] .ant-pagination.mini .ant-select-arrow {
-  color: #cececd;
-}
+  a {
+    background-color: transparent;
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-primary:not(.ant-btn-background-ghost):not([disabled]) {
-  color: #fff;
-}
+  a:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-default {
-  border-color: #cececd;
-  background-color: #fff;
-  color: #606266;
-}
+  a:active {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-default:focus,
-[data-theme='dark'] .ant-btn-default:hover {
-  border-color: #0960bd;
-  background-color: #fff;
-  color: #0960bd;
-}
+  a[disabled] {
+    color: rgb(255 255 255 / 30%);
+  }
 
-[data-theme='dark'] [data-theme='light'] .ant-btn.ant-btn-link.is-disabled {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  color: rgb(0 0 0 / 25%);
-}
+  caption {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] [data-theme='dark'] .ant-btn.ant-btn-link.is-disabled {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  color: rgb(255 255 255 / 25%) !important;
-}
+  mark {
+    background-color: #2c2712;
+  }
 
-[data-theme='dark'] .ant-btn-success.ant-btn-link:not([disabled='disabled']) {
-  color: #55d187;
-}
+  ::selection {
+    background: #0960bd;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-success.ant-btn-link:not([disabled='disabled']):focus,
-[data-theme='dark'] .ant-btn-success.ant-btn-link:not([disabled='disabled']):hover {
-  border-color: transparent;
-  color: #7ddca3;
-}
+  .ant-btn {
+    border: 1px solid transparent;
+    border-color: #303030;
+    background: transparent;
+    box-shadow: 0 2px 0 rgb(0 0 0 / 1.5%);
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-success.ant-btn-link:not([disabled='disabled']):active {
-  color: #34bf6c;
-}
+  .ant-btn-primary:hover,
+  .ant-btn-primary:focus {
+    border-color: #004496;
+    background: #004496;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-link.ant-btn-loading::before,
-[data-theme='dark'] .ant-btn-error.ant-btn-link.ant-btn-loading::before,
-[data-theme='dark'] .ant-btn-success.ant-btn-link.ant-btn-loading::before,
-[data-theme='dark'] .ant-btn-warning.ant-btn-link.ant-btn-loading::before,
-[data-theme='dark'] .ant-btn.ant-btn-link.ant-btn-loading::before {
-  background: 0 0;
-}
+  .ant-btn-primary {
+    border-color: #0960bd;
+    background: #0960bd;
+    box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-success:not(.ant-btn-link, .is-disabled) {
-  border-color: #55d187;
-  background-color: #55d187;
-  color: #fff;
-}
+  .ant-btn-primary:not(.ant-btn-background-ghost):not([disabled]) {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-success:not(.ant-btn-link, .is-disabled):focus,
-[data-theme='dark'] .ant-btn-success:not(.ant-btn-link, .is-disabled):hover {
-  border-color: #7ddca3;
-  background-color: #7ddca3;
-  color: #fff;
-}
+  .ant-btn-dangerous.ant-btn-primary:hover,
+  .ant-btn-dangerous.ant-btn-primary:focus {
+    border-color: #c75457;
+    background: #c75457;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-success:not(.ant-btn-link, .is-disabled):active {
-  border-color: #34bf6c;
-  background-color: #34bf6c;
-}
+  .ant-btn-dangerous.ant-btn-primary {
+    border-color: #ed6f6f;
+    background: #ed6f6f;
+    box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-warning.ant-btn-link:not([disabled='disabled']) {
-  color: #efbd47;
-}
+  .ant-btn-dangerous:hover,
+  .ant-btn-dangerous:focus {
+    border-color: #c75457;
+    background: transparent;
+    color: #c75457;
+  }
 
-[data-theme='dark'] .ant-btn-warning.ant-btn-link:not([disabled='disabled']):focus,
-[data-theme='dark'] .ant-btn-warning.ant-btn-link:not([disabled='disabled']):hover {
-  border-color: transparent;
-  color: #f3ce76;
-}
+  .ant-btn-error:not(.ant-btn-link, .is-disabled):hover,
+  .ant-btn-error:not(.ant-btn-link, .is-disabled):focus {
+    border-color: #f39c9c;
+    background-color: #f39c9c;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-warning.ant-btn-link:not([disabled='disabled']):active {
-  color: #ebac18;
-}
+  .ant-btn-error:not(.ant-btn-link, .is-disabled) {
+    border-color: #ed6f6f;
+    background-color: #ed6f6f;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-warning:not(.ant-btn-link, .is-disabled) {
-  border-color: #efbd47;
-  background-color: #efbd47;
-  color: #fff;
-}
+  .ant-btn-link {
+    border-color: transparent;
+    background: transparent;
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-warning:not(.ant-btn-link, .is-disabled):focus,
-[data-theme='dark'] .ant-btn-warning:not(.ant-btn-link, .is-disabled):hover {
-  border-color: #f3ce76;
-  background-color: #f3ce76;
-  color: #fff;
-}
+  .ant-btn-link:hover {
+    background: transparent;
+  }
 
-[data-theme='dark'] .ant-btn-warning:not(.ant-btn-link, .is-disabled):active {
-  border-color: #ebac18;
-  background-color: #ebac18;
-}
+  html .vben-login {
+    background-color: #293146;
+  }
 
-[data-theme='dark'] .ant-btn-error.ant-btn-link:not([disabled='disabled']) {
-  color: #ed6f6f;
-}
+  html .vben-login .ant-input,
+  html .vben-login .ant-input-password {
+    background-color: #232a3b;
+  }
 
-[data-theme='dark'] .ant-btn-error.ant-btn-link:not([disabled='disabled']):focus,
-[data-theme='dark'] .ant-btn-error.ant-btn-link:not([disabled='disabled']):hover {
-  border-color: transparent;
-  color: #f39c9c;
-}
+  html .vben-login .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
+    border: 1px solid #4a5569;
+  }
 
-[data-theme='dark'] .ant-btn-error.ant-btn-link:not([disabled='disabled']):active {
-  color: #e74242;
-}
+  html .vben-login-form {
+    background: 0 0 !important;
+  }
 
-[data-theme='dark'] .ant-btn-error:not(.ant-btn-link, .is-disabled) {
-  border-color: #ed6f6f;
-  background-color: #ed6f6f;
-  color: #fff;
-}
+  html .vben-login .app-iconify {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-error:not(.ant-btn-link, .is-disabled):focus,
-[data-theme='dark'] .ant-btn-error:not(.ant-btn-link, .is-disabled):hover {
-  border-color: #f39c9c;
-  background-color: #f39c9c;
-  color: #fff;
-}
+  html .fix-auto-fill input,
+  html input.fix-auto-fill {
+    -webkit-text-fill-color: #c9d1d9 !important;
+  }
 
-[data-theme='dark'] .ant-btn-error:not(.ant-btn-link, .is-disabled):active {
-  border-color: #e74242;
-  background-color: #e74242;
-}
+  .vben-login .vben-login-form {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost {
-  background-color: transparent !important;
-}
+  .vben-login .vben-app-logo__title {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost[disabled],
-[data-theme='dark'] .ant-btn-background-ghost[disabled]:hover {
-  border-color: rgb(255 255 255 / 40%) !important;
-  background-color: transparent !important;
-  color: rgb(255 255 255 / 40%) !important;
-}
+  .vben-login .container .vben-app-logo__title {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-dashed.ant-btn-background-ghost,
-[data-theme='dark'] .ant-btn-default.ant-btn-background-ghost {
-  border-color: #fff;
-  color: #fff;
-}
+  .vben-login-sign-in-way .anticon {
+    color: #888;
+  }
 
-[data-theme='dark'] .ant-btn-dashed.ant-btn-background-ghost:focus,
-[data-theme='dark'] .ant-btn-dashed.ant-btn-background-ghost:hover,
-[data-theme='dark'] .ant-btn-default.ant-btn-background-ghost:focus,
-[data-theme='dark'] .ant-btn-default.ant-btn-background-ghost:hover {
-  border-color: #fff;
-  color: #fff;
-}
+  .vben-login-sign-in-way .anticon:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-dashed.ant-btn-background-ghost:active,
-[data-theme='dark'] .ant-btn-default.ant-btn-background-ghost:active {
-  border-color: #e6e6e6;
-  color: #e6e6e6;
-}
+  .vben-login .ant-divider-inner-text {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] .ant-btn-dashed.ant-btn-background-ghost[disabled],
-[data-theme='dark'] .ant-btn-dashed.ant-btn-background-ghost[disabled]:hover,
-[data-theme='dark'] .ant-btn-default.ant-btn-background-ghost[disabled],
-[data-theme='dark'] .ant-btn-default.ant-btn-background-ghost[disabled]:hover {
-  border-color: rgb(255 255 255 / 40%) !important;
-  color: rgb(255 255 255 / 40%) !important;
-}
+  .vben-app-logo.light {
+    border-bottom: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-success:not(.ant-btn-link) {
-  border-color: #55d187;
-  background-color: transparent;
-  color: #55d187;
-}
+  .vben-app-logo.light .vben-app-logo__title {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-success:not(.ant-btn-link):focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-success:not(.ant-btn-link):hover {
-  border-color: #7ddca3;
-  color: #7ddca3 !important;
-}
+  .vben-app-logo.dark .vben-app-logo__title {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-success:not(.ant-btn-link):active {
-  border-color: #34bf6c;
-  color: #34bf6c;
-}
+  html .vben-dark-switch {
+    border: 1px solid #c4bcbc;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-warning:not(.ant-btn-link) {
-  border-color: #efbd47;
-  background-color: transparent;
-  color: #efbd47;
-}
+  .vben-dark-switch {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-warning:not(.ant-btn-link):focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-warning:not(.ant-btn-link):hover {
-  border-color: #f3ce76;
-  color: #f3ce76 !important;
-}
+  .vben-dark-switch-inner {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-warning:not(.ant-btn-link):active {
-  border-color: #ebac18;
-  color: #ebac18;
-}
+  .scroll-wrap {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-error:not(.ant-btn-link) {
-  border-color: #ed6f6f;
-  background-color: transparent;
-  color: #ed6f6f;
-}
+  .virtual-scroll-demo-wrap {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-error:not(.ant-btn-link):focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-error:not(.ant-btn-link):hover {
-  border-color: #f39c9c;
-  color: #f39c9c !important;
-}
+  .virtual-scroll-demo__item {
+    border-bottom: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-error:not(.ant-btn-link):active {
-  border-color: #e74242;
-  color: #e74242;
-}
+  .lazy-base-demo-wrap {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-ghost.ant-btn-link:not([disabled='disabled']) {
-  color: #fff;
-}
+  .demo-wrap {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-ghost.ant-btn-link:not([disabled='disabled']):focus,
-[data-theme='dark'] .ant-btn-ghost.ant-btn-link:not([disabled='disabled']):hover {
-  border-color: transparent;
-  color: #fff;
-}
+  .form-wrap {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-popover-content {
-  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-}
+  .full-loading {
+    background-color: rgb(240 242 245 / 40%);
+  }
 
-[data-theme='dark'] .modal-icon-warning {
-  color: #efbd47 !important;
-}
+  html .full-loading:not(.light) {
+    background-color: rgb(0 0 0 / 45%);
+  }
 
-[data-theme='dark'] .modal-icon-success {
-  color: #55d187 !important;
-}
+  .full-loading.dark {
+    background-color: rgb(0 0 0 / 45%);
+  }
 
-[data-theme='dark'] .modal-icon-error {
-  color: #ed6f6f !important;
-}
+  .step-form-content {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .modal-icon-info {
-  color: #0960bd !important;
-}
+  .desc-wrap {
+    background-color: #151515 !important;
+  }
 
-[data-theme='dark'] .bg-white {
-  background-color: #151515 !important;
-}
+  .result-success {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] html[data-theme='light'] .text-secondary {
-  color: rgb(0 0 0 / 45%);
-}
+  .result-success__content {
+    background-color: rgb(255 255 255 / 4%);
+  }
 
-[data-theme='dark'] html[data-theme='light'] .ant-alert-success {
-  border: 1px solid #b7eb8f;
-  background-color: #f6ffed;
-}
+  .result-error {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] html[data-theme='light'] .ant-alert-error {
-  border: 1px solid #ffccc7;
-  background-color: #fff;
-}
+  .result-error__content {
+    background-color: rgb(255 255 255 / 4%);
+  }
 
-[data-theme='dark'] html[data-theme='light'] .ant-alert-warning {
-  border: 1px solid #ffe58f;
-  background-color: #fff;
-}
+  .result-error__content-icon {
+    color: #ff4d4f;
+  }
 
-[data-theme='dark'] html[data-theme='light'] :not(:root):fullscreen::backdrop {
-  background-color: #000 !important;
-}
+  .account-center-col:not(:last-child):not(:last-child) {
+    border-right: 1px dashed rgb(206 206 206 / 50%);
+  }
 
-[data-theme='dark'] [data-theme='dark'] .text-secondary {
-  color: #8b949e;
-}
+  .account-center-top {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] [data-theme='dark'] .ant-card-grid {
-  box-shadow: 1px 0 0 0 #434343;
-}
+  .account-center-bottom {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] [data-theme='dark'] .ant-calendar-selected-day .ant-calendar-date {
-  color: rgb(0 0 0 / 80%);
-}
+  .account-setting {
+    background-color: #151515;
+  }
 
-[data-theme='dark']
-  [data-theme='dark']
-  .ant-select-tree
-  li
-  .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-  color: rgb(0 0 0 / 90%);
-}
+  .account-setting .ant-tabs-tab-active {
+    background-color: #111b26;
+  }
 
-[data-theme='dark'] html {
-  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-}
+  .list-card__card-title {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] body {
-  background-color: #000;
-  color: #c9d1d9;
-}
+  .list-card__card-detail {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] h1,
-[data-theme='dark'] h2,
-[data-theme='dark'] h3,
-[data-theme='dark'] h4,
-[data-theme='dark'] h5,
-[data-theme='dark'] h6 {
-  color: rgb(255 255 255 / 65%);
-}
+  .demo {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] a {
-  background-color: transparent;
-  color: #0960bd;
-}
+  .list-basic__top {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] a:hover {
-  color: #2a7dc9;
-}
+  .list-basic__top-col:not(:last-child) {
+    border-right: 1px dashed #303030;
+  }
 
-[data-theme='dark'] a:active {
-  color: #004496;
-}
+  .list-basic__top-col div {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] a[disabled] {
-  color: rgb(255 255 255 / 30%);
-}
+  .list-basic__top-col p {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] caption {
-  color: #8b949e;
-}
+  .list-basic__content {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] mark {
-  background-color: #2c2712;
-}
+  .list-basic__content .extra {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] ::selection {
-  background: #0960bd;
-  color: #fff;
-}
+  .list-search__container {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-click-animating-node,
-[data-theme='dark'] [ant-click-animating-without-extra-node='true']::after {
-  box-shadow: 0 0 0 0 #0960bd;
-}
+  .list-search__content {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] .ant-btn {
-  border: 1px solid transparent;
-  border-color: #303030;
-  background: 0 0;
-  box-shadow: 0 2px 0 rgb(0 0 0 / 1.5%);
-  color: #c9d1d9;
-}
+  .list-search__action-item {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] .ant-btn > a:only-child::after {
-  background: 0 0;
-}
+  .list-search__action-item:first-child,
+  .list-search__action-item:nth-child(2) {
+    border-right: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn:focus,
-[data-theme='dark'] .ant-btn:hover {
-  border-color: #2a7dc9;
-  background: 0 0;
-  color: #2a7dc9;
-}
+  .list-search__time {
+    color: rgb(0 0 0 / 45%);
+  }
 
-[data-theme='dark'] .ant-btn:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn:hover > a:only-child::after {
-  background: 0 0;
-}
+  span.iconify {
+    background-color: #555;
+  }
 
-[data-theme='dark'] .ant-btn:active {
-  border-color: #004496;
-  background: 0 0;
-  color: #004496;
-}
+  .vben-default-layout {
+    background-color: #f4f7f9;
+  }
 
-[data-theme='dark'] .ant-btn:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-basic-table-header-cell__help {
+    color: rgb(0 0 0 / 65%) !important;
+  }
 
-[data-theme='dark'] .ant-btn[disabled],
-[data-theme='dark'] .ant-btn[disabled]:active,
-[data-theme='dark'] .ant-btn[disabled]:focus,
-[data-theme='dark'] .ant-btn[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .step1 h3 {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .step1 h4 {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn:active,
-[data-theme='dark'] .ant-btn:focus,
-[data-theme='dark'] .ant-btn:hover {
-  background: 0 0;
-}
+  .step1 p {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-primary {
-  border-color: #0960bd;
-  background: #0960bd !important;
-  box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
-  color: #fff;
-}
+  .vben-app-search-modal {
+    background-color: rgb(0 0 0 / 25%);
+  }
 
-[data-theme='dark'] .ant-btn-primary > a:only-child::after {
-  background: 0 0;
-}
+  .vben-app-search-modal-content {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-primary:focus,
-[data-theme='dark'] .ant-btn-primary:hover {
-  border-color: #004496;
-  background: #004496;
-  color: #fff;
-}
+  .vben-app-search-modal-input {
+    color: #1c1e21;
+  }
 
-[data-theme='dark'] .ant-btn-primary:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-primary:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-app-search-modal-input span[role='img'] {
+    color: #999;
+  }
 
-[data-theme='dark'] .ant-btn-primary:active {
-  border-color: #2a7dc9;
-  background: #2a7dc9;
-  color: #fff;
-}
+  .vben-app-search-modal-cancel {
+    color: #666;
+  }
 
-[data-theme='dark'] .ant-btn-primary:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-app-search-modal-not-data {
+    color: #969faf;
+  }
 
-[data-theme='dark'] .ant-btn-primary[disabled],
-[data-theme='dark'] .ant-btn-primary[disabled]:active,
-[data-theme='dark'] .ant-btn-primary[disabled]:focus,
-[data-theme='dark'] .ant-btn-primary[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-app-search-modal-list__item {
+    background-color: #151515;
+    box-shadow: 0 1px 3px 0 #d4d9e1;
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-primary[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-primary[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-primary[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-primary[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-app-search-modal-list__item--active {
+    background-color: #0960bd;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) {
-  border-right-color: #2a7dc9;
-  border-left-color: #2a7dc9;
-}
+  .account-center-application__card-num {
+    color: #8b949e;
+  }
 
-[data-theme='dark'] .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child):disabled {
-  border-color: #303030;
-}
+  .account-center-application__card-download {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
-  border-right-color: #2a7dc9;
-}
+  .vben-form-design-sider {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-group .ant-btn-primary:first-child:not(:last-child)[disabled] {
-  border-right-color: #303030;
-}
+  .vben-st-login {
+    background: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-group .ant-btn-primary + .ant-btn-primary,
-[data-theme='dark'] .ant-btn-group .ant-btn-primary:last-child:not(:first-child) {
-  border-left-color: #2a7dc9;
-}
+  .vben-iframe-page__main {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled],
-[data-theme='dark'] .ant-btn-group .ant-btn-primary:last-child:not(:first-child)[disabled] {
-  border-left-color: #303030;
-}
+  .vben-lock-page__hour,
+  .vben-lock-page__minute {
+    background-color: #141313;
+    color: #bababa;
+  }
 
-[data-theme='dark'] .ant-btn-ghost {
-  border-color: #303030;
-  background: 0 0;
-  color: #c9d1d9;
-}
+  .vben-lock-page-entry {
+    background-color: rgb(0 0 0 / 50%);
+  }
 
-[data-theme='dark'] .ant-btn-ghost > a:only-child::after {
-  background: 0 0;
-}
+  .vben-lock-page-entry__header-name {
+    color: #bababa;
+  }
 
-[data-theme='dark'] .ant-btn-ghost:focus,
-[data-theme='dark'] .ant-btn-ghost:hover {
-  border-color: #2a7dc9;
-  background: 0 0;
-  color: #2a7dc9;
-}
+  .vben-lock-page-entry__err-msg {
+    color: #ed6f6f;
+  }
 
-[data-theme='dark'] .ant-btn-ghost:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-ghost:hover > a:only-child::after {
-  background: 0 0;
-}
+  .hidden-item {
+    background-color: #f0bfc3;
+  }
 
-[data-theme='dark'] .ant-btn-ghost:active {
-  border-color: #004496;
-  background: 0 0;
-  color: #004496;
-}
+  .draggable-box :deep(.list-main) .moving::before {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-ghost:active > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .drag-move-box:hover {
+    background-color: rgb(9 96 189 / 20%);
+  }
 
-[data-theme='dark'] .ant-btn-ghost[disabled],
-[data-theme='dark'] .ant-btn-ghost[disabled]:active,
-[data-theme='dark'] .ant-btn-ghost[disabled]:focus,
-[data-theme='dark'] .ant-btn-ghost[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .draggable-box :deep(.list-main) .drag-move-box::before {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-ghost[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-ghost[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-ghost[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-ghost[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .drag-move-box.active {
+    background-color: rgb(9 96 189 / 20%);
+  }
 
-[data-theme='dark'] .ant-btn-dashed {
-  border-color: #303030;
-  background: 0 0;
-  color: #c9d1d9;
-}
+  .draggable-box :deep(.list-main) .drag-move-box .show-key-box {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-dashed > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .drag-move-box .copy,
+  .draggable-box :deep(.list-main) .drag-move-box .delete {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-dashed:focus,
-[data-theme='dark'] .ant-btn-dashed:hover {
-  border-color: #2a7dc9;
-  background: 0 0;
-  color: #2a7dc9;
-}
+  .draggable-box :deep(.list-main) .drag-move-box .copy {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-dashed:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dashed:hover > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .drag-move-box .delete {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-dashed:active {
-  border-color: #004496;
-  background: 0 0;
-  color: #004496;
-}
+  .draggable-box :deep(.list-main) .grid-box {
+    background-color: rgb(152 103 247 / 12%);
+  }
 
-[data-theme='dark'] .ant-btn-dashed:active > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .grid-box .grid-row {
+    background-color: rgb(152 103 247 / 12%);
+  }
 
-[data-theme='dark'] .ant-btn-dashed[disabled],
-[data-theme='dark'] .ant-btn-dashed[disabled]:active,
-[data-theme='dark'] .ant-btn-dashed[disabled]:focus,
-[data-theme='dark'] .ant-btn-dashed[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .draggable-box :deep(.list-main) .grid-box .grid-row .grid-col .draggable-box {
+    border: 1px #ccc;
+  }
 
-[data-theme='dark'] .ant-btn-dashed[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-dashed[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dashed[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-dashed[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .grid-box .grid-row .grid-col .draggable-box .list-main {
+    border: 1px #ccc;
+  }
 
-[data-theme='dark'] .ant-btn-danger {
-  border-color: #ed6f6f;
-  background: #ed6f6f;
-  box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
-  color: #fff;
-}
+  .draggable-box :deep(.list-main) .grid-box::before {
+    background: 0 0;
+  }
 
-[data-theme='dark'] .ant-btn-danger > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .grid-box.active {
+    background-color: rgb(152 103 247 / 24%);
+  }
 
-[data-theme='dark'] .ant-btn-danger:focus,
-[data-theme='dark'] .ant-btn-danger:hover {
-  border-color: #c75457;
-  background: #c75457;
-  color: #fff;
-}
+  .draggable-box :deep(.list-main) .grid-box.active::before {
+    background-color: #9867f7;
+  }
 
-[data-theme='dark'] .ant-btn-danger:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-danger:hover > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .copy,
+  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .delete {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-danger:active {
-  border-color: #faa19d;
-  background: #faa19d;
-  color: #fff;
-}
+  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .copy {
+    background-color: #9867f7;
+  }
 
-[data-theme='dark'] .ant-btn-danger:active > a:only-child::after {
-  background: 0 0;
-}
+  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .delete {
+    background-color: #9867f7;
+  }
 
-[data-theme='dark'] .ant-btn-danger[disabled],
-[data-theme='dark'] .ant-btn-danger[disabled]:active,
-[data-theme='dark'] .ant-btn-danger[disabled]:focus,
-[data-theme='dark'] .ant-btn-danger[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .form-panel .empty-text {
+    color: #aaa;
+  }
 
-[data-theme='dark'] .ant-btn-danger[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-danger[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-danger[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-danger[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .operating-area {
+    border-bottom: 2px solid #ccc;
+  }
 
-[data-theme='dark'] .ant-btn-link {
-  border-color: transparent;
-  background: 0 0;
-  color: #0960bd;
-}
+  .operating-area a {
+    color: #666;
+  }
 
-[data-theme='dark'] .ant-btn-link > a:only-child::after {
-  background: 0 0;
-}
+  .operating-area a.disabled,
+  .operating-area a.disabled:hover {
+    color: #ccc;
+  }
 
-[data-theme='dark'] .ant-btn-link:focus,
-[data-theme='dark'] .ant-btn-link:hover {
-  border-color: transparent;
-  background: 0 0;
-  color: #2a7dc9;
-}
+  .operating-area a:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-link:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-link:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-header {
+    background-color: #fff;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-link:active {
-  border-color: #004496;
-  border-color: transparent;
-  background: 0 0;
-  color: #004496;
-}
+  .vben-layout-header-left .vben-layout-header-trigger.light:hover {
+    background-color: #f6f6f6;
+  }
 
-[data-theme='dark'] .ant-btn-link:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-header-left .vben-layout-header-trigger.light svg {
+    fill: #000;
+  }
 
-[data-theme='dark'] .ant-btn-link:hover {
-  background: 0 0;
-}
+  .vben-layout-header--light {
+    border-bottom: 1px solid #eee;
+    border-left: 1px solid #eee;
+    background-color: #fff !important;
+  }
 
-[data-theme='dark'] .ant-btn-link[disabled],
-[data-theme='dark'] .ant-btn-link[disabled]:active,
-[data-theme='dark'] .ant-btn-link[disabled]:focus,
-[data-theme='dark'] .ant-btn-link[disabled]:hover {
-  border-color: transparent;
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-layout-header--light .vben-layout-header-logo {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-link[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-link[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-link[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-link[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-header--light .vben-layout-header-logo:hover {
+    background-color: #f6f6f6;
+  }
 
-[data-theme='dark'] .ant-btn-text {
-  border-color: transparent;
-  background: 0 0;
-  color: #c9d1d9;
-}
+  .vben-layout-header--light .vben-layout-header-action__item {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-text > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-header--light .vben-layout-header-action__item:hover {
+    background-color: #f6f6f6;
+  }
 
-[data-theme='dark'] .ant-btn-text:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-text:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-header--light .vben-layout-header-action span[role='img'],
+  .vben-layout-header--light .vben-layout-header-action-icon {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-text:active {
-  border-color: transparent;
-  background: rgb(255 255 255 / 4%);
-  color: #c9d1d9;
-}
+  .vben-layout-header--dark {
+    border-top: 1px solid #303030;
+    border-left: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-text:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-header--dark .vben-layout-header-action__item .ant-badge span {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-text:focus,
-[data-theme='dark'] .ant-btn-text:hover {
-  border-color: transparent;
-  background: rgb(255 255 255 / 3%);
-  color: #c9d1d9;
-}
+  .vben-setting-drawer-feature {
+    background-color: #0960bd;
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-text[disabled],
-[data-theme='dark'] .ant-btn-text[disabled]:active,
-[data-theme='dark'] .ant-btn-text[disabled]:focus,
-[data-theme='dark'] .ant-btn-text[disabled]:hover {
-  border-color: transparent;
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-layout-footer {
+    color: #d9d9d9;
+  }
 
-[data-theme='dark'] .ant-btn-text[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-text[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-text[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-text[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-footer__links a {
+    color: #d9d9d9;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous {
-  border-color: #ed6f6f;
-  background: 0 0;
-  color: #ed6f6f;
-}
+  .vben-layout-footer__links a:hover {
+    color: rgb(0 0 0 / 85%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-footer__github:hover {
+    color: rgb(0 0 0 / 85%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous:focus,
-[data-theme='dark'] .ant-btn-dangerous:hover {
-  border-color: #c75457;
-  background: 0 0;
-  color: #c75457;
-}
+  .vben-page-footer {
+    border-top: 1px solid #303030;
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-collapse-container {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous:active {
-  border-color: #faa19d;
-  background: 0 0;
-  color: #faa19d;
-}
+  .vben-collapse-container__header {
+    border-bottom: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-collapse-container__footer {
+    border-top: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous[disabled],
-[data-theme='dark'] .ant-btn-dangerous[disabled]:active,
-[data-theme='dark'] .ant-btn-dangerous[disabled]:focus,
-[data-theme='dark'] .ant-btn-dangerous[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-page-wrapper-content-bg {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-basic-help {
+    color: #909399;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary {
-  border-color: #ed6f6f;
-  background: #ed6f6f !important;
-  box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
-  color: #fff;
-}
+  .vben-basic-help:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary > a:only-child::after {
-  background: 0 0;
-}
+  .vben-basic-title {
+    color: #c9d1d9 !important;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary:focus,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary:hover {
-  border-color: #c75457;
-  background: #c75457;
-  color: #fff;
-}
+  .vben-basic-title-show-span::before {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-cropper-avatar-image-wrapper {
+    border: 1px solid #303030;
+    background: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary:active {
-  border-color: #faa19d;
-  background: #faa19d;
-  color: #fff;
-}
+  .vben-cropper-avatar-image-mask {
+    background: rgb(0 0 0 / 40%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-basic-table-row__striped td {
+    background-color: #1e1e1e;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled],
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled]:active,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled]:focus,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-basic-table-form-container .ant-form {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-primary[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-basic-table .ant-table-wrapper {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link {
-  border-color: transparent;
-  background: 0 0;
-  color: #ed6f6f;
-}
+  .vben-tree {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link > a:only-child::after {
-  background: 0 0;
-}
+  .vben-tree-header {
+    border-bottom: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link:active > a:only-child::after {
-  background: 0 0;
-}
+  .darg-verify {
+    border: 1px solid #ddd;
+    background-color: #eee;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link:focus,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link:hover {
-  border-color: transparent;
-  background: 0 0;
-  color: #c75457;
-}
+  .darg-verify-bar {
+    background-color: #55d187;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link:hover > a:only-child::after {
-  background: 0 0;
-}
+  .darg-verify-content.success {
+    -webkit-text-fill-color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link:active {
-  border-color: transparent;
-  background: 0 0;
-  color: #faa19d;
-}
+  .darg-verify-content > * {
+    -webkit-text-fill-color: #333;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled],
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled]:active,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled]:focus,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled]:hover {
-  border-color: transparent;
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
+  .darg-verify-action {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-link[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .ir-dv-img__tip {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text {
-  border-color: transparent;
-  background: 0 0;
-  color: #ed6f6f;
-}
+  .ir-dv-img__tip.success {
+    background-color: rgb(85 209 135 / 60%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text > a:only-child::after {
-  background: 0 0;
-}
+  .ir-dv-img__tip.error {
+    background-color: rgb(237 111 111 / 60%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text:active > a:only-child::after {
-  background: 0 0;
-}
+  .ir-dv-img__tip.normal {
+    background-color: rgb(0 0 0 / 30%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text:focus,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text:hover {
-  border-color: transparent;
-  background: rgb(255 255 255 / 3%);
-  color: #c75457;
-}
+  .vben-basic-drawer .ant-drawer-close:hover {
+    color: #ed6f6f;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-basic-drawer .ant-drawer-body {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text:active {
-  border-color: transparent;
-  background: rgb(255 255 255 / 4%);
-  color: #faa19d;
-}
+  .vben-basic-drawer__detail .ant-drawer-header {
+    border-top: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled],
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled]:active,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled]:focus,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled]:hover {
-  border-color: transparent;
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-strength-meter-bar {
+    background-color: rgb(255 255 255 / 30%);
+  }
 
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-dangerous.ant-btn-text[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-strength-meter-bar::after,
+  .vben-strength-meter-bar::before {
+    border-color: #fff;
+    background-color: transparent;
+  }
 
-[data-theme='dark'] .ant-btn::before {
-  background: #151515;
-}
+  .vben-strength-meter-bar--fill {
+    background-color: transparent;
+  }
 
-[data-theme='dark']
-  .ant-btn-group
-  .ant-btn-primary
-  + .ant-btn:not(.ant-btn-primary):not([disabled]) {
-  border-left-color: transparent;
-}
+  .vben-strength-meter-bar--fill[data-score='0'] {
+    background-color: #e74242;
+  }
 
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost {
-  border-color: rgb(255 255 255 / 25%);
-  color: #c9d1d9;
-}
+  .vben-strength-meter-bar--fill[data-score='1'] {
+    background-color: #ed6f6f;
+  }
 
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost,
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost:active,
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost:focus,
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost:hover {
-  background: 0 0;
-}
+  .vben-strength-meter-bar--fill[data-score='2'] {
+    background-color: #efbd47;
+  }
 
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost:focus,
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost:hover {
-  border-color: #2a7dc9;
-  color: #2a7dc9;
-}
+  .vben-strength-meter-bar--fill[data-score='3'] {
+    background-color: rgb(85 209 135 / 50%);
+  }
 
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost:active {
-  border-color: #004496;
-  color: #004496;
-}
+  .vben-strength-meter-bar--fill[data-score='4'] {
+    background-color: #55d187;
+  }
 
-[data-theme='dark'] .ant-btn.ant-btn-background-ghost[disabled] {
-  border-color: #303030;
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-image-preview .ant-image-preview-operations {
+    background-color: rgb(0 0 0 / 40%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary {
-  border-color: #0960bd;
-}
+  .vben-app-search-footer {
+    border-top: 1px solid #303030;
+    background-color: #151515;
+    color: #666;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary > a:only-child::after {
-  background: 0 0;
-}
+  .vben-multiple-tabs {
+    border-bottom: 1px solid #303030;
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary:hover {
-  border-color: #004496;
-  color: #004496;
-}
+  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav {
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab {
+    background-color: #151515;
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary:active {
-  border-color: #2a7dc9;
-  color: #2a7dc9;
-}
+  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab svg {
+    fill: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-multiple-tabs
+    .ant-tabs.ant-tabs-card
+    .ant-tabs-nav
+    .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled],
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled]:active,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled]:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active {
+    background: #0960bd;
+  }
 
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-primary[disabled]:active
-  > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active span {
+    color: #fff !important;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger {
-  border-color: #ed6f6f;
-  color: #ed6f6f;
-}
+  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active svg {
+    fill: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger > a:only-child::after {
-  background: 0 0;
-}
+  .vben-multiple-tabs-content__extra-fold,
+  .vben-multiple-tabs-content__extra-quick,
+  .vben-multiple-tabs-content__extra-redo {
+    border-left: 1px solid #303030;
+    color: #8b949e;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger:hover {
-  border-color: #c75457;
-  color: #c75457;
-}
+  .vben-multiple-tabs-content__extra-fold:hover,
+  .vben-multiple-tabs-content__extra-quick:hover,
+  .vben-multiple-tabs-content__extra-redo:hover {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-logo {
+    border-bottom: 1px solid #eee;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger:active {
-  border-color: #faa19d;
-  color: #faa19d;
-}
+  .vben-layout-mix-sider.light.open > .scrollbar {
+    border-right: 1px solid #eee;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-module__item {
+    color: rgb(0 0 0 / 65%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled],
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled]:active,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled]:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-module__item--active {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__content {
+    box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous {
-  border-color: #ed6f6f;
-  color: #ed6f6f;
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__title .pushpin {
+    color: rgb(0 0 0 / 35%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__title .pushpin:hover {
+    color: rgb(0 0 0 / 85%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous:hover {
-  border-color: #c75457;
-  color: #c75457;
-}
+  .vben-layout-mix-sider.dark .vben-layout-mix-sider-menu-list__title {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous:focus > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous:hover > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider-module__item {
+    color: rgb(255 255 255 / 65%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous:active {
-  border-color: #faa19d;
-  color: #faa19d;
-}
+  .vben-layout-mix-sider-module__item:hover {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous:active > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider-module__item--active {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous[disabled],
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous[disabled]:active,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous[disabled]:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-layout-mix-sider-module__item--active::before {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous[disabled]:active
-  > a:only-child::after,
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous[disabled]:focus
-  > a:only-child::after,
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous[disabled]:hover
-  > a:only-child::after,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous[disabled] > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider-trigger {
+    background-color: rgb(255 255 255 / 10%);
+    color: rgb(255 255 255 / 65%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link {
-  border-color: transparent;
-  color: #ed6f6f;
-}
+  .vben-layout-mix-sider.light .vben-layout-mix-sider-trigger {
+    border-top: 1px solid #eee;
+    background-color: #fff;
+    color: rgb(0 0 0 / 65%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider-menu-list {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link:hover {
-  border-color: transparent;
-  color: #c75457;
-}
+  .vben-layout-mix-sider-menu-list__title {
+    border-bottom: 1px solid #eee;
+    color: #0960bd;
+  }
 
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link:focus
-  > a:only-child::after,
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link:hover
-  > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider-menu-list__title .pushpin {
+    color: rgb(255 255 255 / 65%);
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link:active {
-  border-color: transparent;
-  color: #faa19d;
-}
+  .vben-layout-mix-sider-menu-list__title .pushpin:hover {
+    color: #fff;
+  }
 
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link:active
-  > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-mix-sider-menu-list__content .ant-menu-inline,
+  .vben-layout-mix-sider-menu-list__content .ant-menu-vertical,
+  .vben-layout-mix-sider-menu-list__content .ant-menu-vertical-left {
+    border-right: 1px solid transparent;
+  }
 
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled],
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]:active,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]:focus,
-[data-theme='dark'] .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]:hover {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-layout-mix-sider-drag-bar {
+    background-color: #f8f8f9;
+    box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+  }
 
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]:active
-  > a:only-child::after,
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]:focus
-  > a:only-child::after,
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]:hover
-  > a:only-child::after,
-[data-theme='dark']
-  .ant-btn-background-ghost.ant-btn-dangerous.ant-btn-link[disabled]
-  > a:only-child::after {
-  background: 0 0;
-}
+  .vben-layout-sideBar.ant-layout-sider-dark .ant-layout-sider-trigger {
+    background-color: rgb(255 255 255 / 10%);
+    color: #bfbfbf;
+  }
 
-[data-theme='dark'] .ant-btn-group-rtl.ant-btn-group .ant-btn-primary + .ant-btn-primary,
-[data-theme='dark'] .ant-btn-group-rtl.ant-btn-group .ant-btn-primary:last-child:not(:first-child) {
-  border-right-color: #2a7dc9;
-  border-left-color: #303030;
-}
+  .vben-layout-sideBar.ant-layout-sider-dark .ant-layout-sider-trigger:hover {
+    background-color: rgb(255 255 255 / 20%);
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-btn-group-rtl.ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled],
-[data-theme='dark']
-  .ant-btn-group-rtl.ant-btn-group
-  .ant-btn-primary:last-child:not(:first-child)[disabled] {
-  border-right-color: #303030;
-  border-left-color: #2a7dc9;
-}
+  .vben-layout-sideBar:not(.ant-layout-sider-dark) .ant-layout-sider-trigger {
+    border-top: 1px solid #303030;
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .ant-radio-group {
-  color: #c9d1d9;
-}
+  .vben-cropper-am-cropper {
+    background: #eee;
+  }
 
-[data-theme='dark'] .ant-radio-wrapper {
-  color: #c9d1d9;
-}
+  .vben-cropper-am-preview {
+    border: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-radio {
-  color: #c9d1d9;
-}
+  .vben-cropper-am-group {
+    border-top: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-radio-input:focus + .ant-radio-inner,
-[data-theme='dark'] .ant-radio-wrapper:hover .ant-radio,
-[data-theme='dark'] .ant-radio:hover .ant-radio-inner {
-  border-color: #0960bd;
-}
+  .vben-basic-drawer-footer {
+    border-top: 1px solid #303030;
+    background-color: #151515;
+  }
 
-[data-theme='dark'] .ant-radio-input:focus + .ant-radio-inner {
-  box-shadow: 0 0 0 3px rgb(255 255 255 / 8%);
-}
+  .vben-basic-drawer-header__back:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-radio-checked::after {
-  border: 1px solid #0960bd;
-}
+  .vben-basic-modal-close span:first-child:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-radio-inner {
-  border-color: #303030;
-  background-color: transparent;
-}
+  .vben-basic-modal-close span:last-child:hover {
+    color: #ed6f6f;
+  }
 
-[data-theme='dark'] .ant-radio-inner::after {
-  background-color: #0960bd;
-}
+  html .lf-dnd {
+    background: #080808;
+  }
 
-[data-theme='dark'] .ant-radio-checked .ant-radio-inner {
-  border-color: #0960bd;
-}
+  .vben-flow-chart-toolbar {
+    border-bottom: 1px solid #303030;
+    background-color: #1e1e1e;
+  }
 
-[data-theme='dark'] .ant-radio-disabled .ant-radio-inner {
-  border-color: #303030 !important;
-  background-color: rgb(255 255 255 / 8%);
-}
+  .vben-flow-chart-toolbar .disabeld {
+    color: rgb(255 255 255 / 30%);
+  }
 
-[data-theme='dark'] .ant-radio-disabled .ant-radio-inner::after {
-  background-color: rgb(255 255 255 / 20%);
-}
+  .vben-flow-chart-toolbar__icon:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .ant-radio-disabled + span {
-  color: rgb(255 255 255 / 30%);
-}
+  .img-preview {
+    background: rgb(0 0 0 / 50%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper {
-  border: 1px solid #303030;
-  background: 0 0;
-  color: #c9d1d9;
-}
+  .img-preview-content {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper a {
-  color: #c9d1d9;
-}
+  .img-preview__close {
+    background-color: rgb(0 0 0 / 50%);
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper:not(:first-child)::before {
-  background-color: #303030;
-}
+  .img-preview__close:hover {
+    background-color: rgb(0 0 0 / 80%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper:first-child {
-  border-left: 1px solid #303030;
-}
+  .img-preview__index {
+    background: rgb(109 109 109 / 60%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper:hover {
-  color: #0960bd;
-}
+  .img-preview__controller {
+    background: rgb(109 109 109 / 60%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper:focus-within {
-  box-shadow: 0 0 0 3px rgb(255 255 255 / 8%);
-}
+  .img-preview__arrow {
+    background-color: rgb(0 0 0 / 50%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
-  border-color: #0960bd;
-  background: 0 0;
-  color: #0960bd;
-}
+  .img-preview__arrow:hover {
+    background-color: rgb(0 0 0 / 80%);
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
-  background-color: #0960bd;
-}
+  .vben-darg-bar:hover {
+    background-color: #0960bd;
+    box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
-  border-color: #0960bd;
-}
+  .vben-header-user-dropdown--light:hover {
+    background-color: #f6f6f6;
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
-  border-color: #2a7dc9;
-  color: #2a7dc9;
-}
+  .vben-header-user-dropdown--light .vben-header-user-dropdown__name {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
-  background-color: #2a7dc9;
-}
+  .vben-header-user-dropdown--light .vben-header-user-dropdown__desc {
+    color: #7c8087;
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
-  border-color: #004496;
-  color: #004496;
-}
+  .vben-layout-breadcrumb--light .ant-breadcrumb-link {
+    color: #999;
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active::before {
-  background-color: #004496;
-}
+  .vben-layout-breadcrumb--light .ant-breadcrumb-link a {
+    color: rgb(0 0 0 / 65%);
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
-  box-shadow: 0 0 0 3px rgb(255 255 255 / 8%);
-}
+  .vben-layout-breadcrumb--light .ant-breadcrumb-link a:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark']
-  .ant-radio-group-solid
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
-  border-color: #0960bd;
-  background: #0960bd;
-  color: #fff;
-}
+  .vben-layout-breadcrumb--light .ant-breadcrumb-separator {
+    color: #999;
+  }
 
-[data-theme='dark']
-  .ant-radio-group-solid
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
-  border-color: #2a7dc9;
-  background: #2a7dc9;
-  color: #fff;
-}
+  .vben-layout-breadcrumb--dark .ant-breadcrumb-link {
+    color: rgb(255 255 255 / 60%);
+  }
 
-[data-theme='dark']
-  .ant-radio-group-solid
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
-  border-color: #004496;
-  background: #004496;
-  color: #fff;
-}
+  .vben-layout-breadcrumb--dark .ant-breadcrumb-link a {
+    color: rgb(255 255 255 / 80%);
+  }
 
-[data-theme='dark']
-  .ant-radio-group-solid
-  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
-  box-shadow: 0 0 0 3px rgb(255 255 255 / 8%);
-}
+  .vben-layout-breadcrumb--dark .ant-breadcrumb-link a:hover {
+    color: #fff;
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .vben-layout-breadcrumb--dark .ant-breadcrumb-separator,
+  .vben-layout-breadcrumb--dark .anticon {
+    color: rgb(255 255 255 / 80%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper-disabled:first-child,
-[data-theme='dark'] .ant-radio-button-wrapper-disabled:hover {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
+  .file-table thead {
+    background-color: rgb(255 255 255 / 4%);
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper-disabled:first-child {
-  border-left-color: #303030;
-}
+  .file-table table,
+  .file-table td,
+  .file-table th {
+    border: 1px solid #303030;
+  }
 
-[data-theme='dark'] .ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 20%);
-  color: rgb(255 255 255 / 30%);
-}
+  .context-menu {
+    border: 1px solid rgb(0 0 0 / 8%);
+    background-color: #151515;
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+      0 1px 5px 0 rgb(0 0 0 / 6%);
+  }
 
-[data-theme='dark']
-  .ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:first-child {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-radio-button-wrapper-checked:not(
-    [class*=' ant-radio-button-wrapper-disabled']
-  ).ant-radio-button-wrapper:first-child {
-  border-right-color: #2a7dc9;
-}
-
-[data-theme='dark']
-  .ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child {
-  border-right-color: #303030;
-}
-
-[data-theme='dark'] .ant-checkbox {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-checkbox-input:focus + .ant-checkbox-inner,
-[data-theme='dark'] .ant-checkbox-wrapper:hover .ant-checkbox-inner,
-[data-theme='dark'] .ant-checkbox:hover .ant-checkbox-inner {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-checkbox-checked::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-checkbox-inner {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-checkbox-checked .ant-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-checkbox-checked .ant-checkbox-inner {
-  border-color: #0960bd;
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-checkbox-disabled .ant-checkbox-inner {
-  border-color: #303030 !important;
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-checkbox-disabled .ant-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-checkbox-disabled + span {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-checkbox-wrapper {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-checkbox-group {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-checkbox-indeterminate .ant-checkbox-inner {
-  border-color: #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-checkbox-indeterminate .ant-checkbox-inner::after {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-  background-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tag {
-  border: 1px solid #303030;
-  background: rgb(255 255 255 / 4%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tag,
-[data-theme='dark'] .ant-tag a,
-[data-theme='dark'] .ant-tag a:hover {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tag-close-icon {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-tag-close-icon:hover {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-tag-has-color {
-  border-color: transparent;
-}
-
-[data-theme='dark'] .ant-tag-has-color,
-[data-theme='dark'] .ant-tag-has-color .anticon-close,
-[data-theme='dark'] .ant-tag-has-color .anticon-close:hover,
-[data-theme='dark'] .ant-tag-has-color a,
-[data-theme='dark'] .ant-tag-has-color a:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-checkable {
-  border-color: transparent;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tag-checkable-checked,
-[data-theme='dark'] .ant-tag-checkable:active {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-checkable-checked {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tag-checkable:active {
-  background-color: #004496;
-}
-
-[data-theme='dark'] .ant-tag-pink {
-  border-color: #551d3c;
-  background: #2a1421;
-  color: #e0529c;
-}
-
-[data-theme='dark'] .ant-tag-pink-inverse {
-  border-color: #cb2b83;
-  background: #cb2b83;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-magenta {
-  border-color: #551d3c;
-  background: #2a1421;
-  color: #e0529c;
-}
-
-[data-theme='dark'] .ant-tag-magenta-inverse {
-  border-color: #cb2b83;
-  background: #cb2b83;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-red {
-  border-color: #58191c;
-  background: #2b1316;
-  color: #e84749;
-}
-
-[data-theme='dark'] .ant-tag-red-inverse {
-  border-color: #d32029;
-  background: #d32029;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-volcano {
-  border-color: #5a2817;
-  background: #2c1712;
-  color: #e87040;
-}
-
-[data-theme='dark'] .ant-tag-volcano-inverse {
-  border-color: #d84b1b;
-  background: #d84b1b;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-orange {
-  border-color: #5a3915;
-  background: #2c1e12;
-  color: #e89a3c;
-}
-
-[data-theme='dark'] .ant-tag-orange-inverse {
-  border-color: #d87a16;
-  background: #d87a16;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-yellow {
-  border-color: #5a5015;
-  background: #2c2712;
-  color: #e8d739;
-}
-
-[data-theme='dark'] .ant-tag-yellow-inverse {
-  border-color: #d8bd14;
-  background: #d8bd14;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-gold {
-  border-color: #5a4315;
-  background: #2c2112;
-  color: #e8b339;
-}
-
-[data-theme='dark'] .ant-tag-gold-inverse {
-  border-color: #d89614;
-  background: #d89614;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-cyan {
-  border-color: #144949;
-  background: #122223;
-  color: #33bcb7;
-}
-
-[data-theme='dark'] .ant-tag-cyan-inverse {
-  border-color: #13a8a8;
-  background: #13a8a8;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-lime {
-  border-color: #3f5014;
-  background: #202712;
-  color: #aad134;
-}
-
-[data-theme='dark'] .ant-tag-lime-inverse {
-  border-color: #8bbc12;
-  background: #8bbc12;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-green {
-  border-color: #274a17;
-  background: #172412;
-  color: #6abe39;
-}
-
-[data-theme='dark'] .ant-tag-green-inverse {
-  border-color: #49aa19;
-  background: #49aa19;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-blue {
-  border-color: #163a5b;
-  background: #121e2d;
-  color: #3c9ae8;
-}
-
-[data-theme='dark'] .ant-tag-blue-inverse {
-  border-color: #187edc;
-  background: #187edc;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-geekblue {
-  border-color: #1d2855;
-  background: #14172a;
-  color: #5274e0;
-}
-
-[data-theme='dark'] .ant-tag-geekblue-inverse {
-  border-color: #2b4bcb;
-  background: #2b4bcb;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-purple {
-  border-color: #311d4d;
-  background: #1a1426;
-  color: #864eca;
-}
-
-[data-theme='dark'] .ant-tag-purple-inverse {
-  border-color: #642ab5;
-  background: #642ab5;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tag-success {
-  border-color: #274a17;
-  background: #172412;
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-tag-processing {
-  border-color: #78b7e3;
-  background: rgb(255 255 255 / 8%);
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tag-error {
-  border-color: #58191c;
-  background: #2b1316;
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-tag-warning {
-  border-color: #5a3915;
-  background: #2c1e12;
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-rate {
-  color: #d8bd14;
-}
-
-[data-theme='dark'] .ant-rate-star > div:focus-visible {
-  outline: 1px dashed #d8bd14;
-}
-
-[data-theme='dark'] .ant-rate-star-first,
-[data-theme='dark'] .ant-rate-star-second {
-  color: rgb(255 255 255 / 12%);
-}
-
-[data-theme='dark'] .ant-pagination {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-pagination-item {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-pagination-item a {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-pagination-item:hover {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-item:hover a {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-item:focus-visible {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-item:focus-visible a {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-item-active {
-  border-color: #0960bd;
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-pagination-item-active a {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-item-active:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-pagination-item-active:focus-visible {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-pagination-item-active:hover a {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-pagination-item-active:focus-visible a {
-  color: #2a7dc9;
-}
-
-[data-theme='dark']
-  .ant-pagination-jump-next
-  .ant-pagination-item-container
-  .ant-pagination-item-link-icon,
-[data-theme='dark']
-  .ant-pagination-jump-prev
-  .ant-pagination-item-container
-  .ant-pagination-item-link-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-pagination-jump-next
-  .ant-pagination-item-container
-  .ant-pagination-item-ellipsis,
-[data-theme='dark']
-  .ant-pagination-jump-prev
-  .ant-pagination-item-container
-  .ant-pagination-item-ellipsis {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination-jump-next,
-[data-theme='dark'] .ant-pagination-jump-prev,
-[data-theme='dark'] .ant-pagination-next,
-[data-theme='dark'] .ant-pagination-prev {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-pagination-next button,
-[data-theme='dark'] .ant-pagination-prev button {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-pagination-next:hover button,
-[data-theme='dark'] .ant-pagination-prev:hover button {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-pagination-next .ant-pagination-item-link,
-[data-theme='dark'] .ant-pagination-prev .ant-pagination-item-link {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-pagination-next:focus-visible .ant-pagination-item-link,
-[data-theme='dark'] .ant-pagination-prev:focus-visible .ant-pagination-item-link {
-  border-color: #0960bd;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-next:hover .ant-pagination-item-link,
-[data-theme='dark'] .ant-pagination-prev:hover .ant-pagination-item-link {
-  border-color: #0960bd;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-disabled .ant-pagination-item-link,
-[data-theme='dark'] .ant-pagination-disabled:hover .ant-pagination-item-link {
-  border-color: #303030;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination-disabled:focus-visible .ant-pagination-item-link {
-  border-color: #303030;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input {
-  border: 1px solid #303030;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-focused,
-[data-theme='dark'] .ant-pagination-options-quick-jumper input:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input[disabled] {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-borderless,
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-borderless-disabled,
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-borderless-focused,
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-borderless:focus,
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-borderless:hover,
-[data-theme='dark'] .ant-pagination-options-quick-jumper input-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-pagination-simple .ant-pagination-next .ant-pagination-item-link,
-[data-theme='dark'] .ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-pagination-simple .ant-pagination-simple-pager input {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-pagination-simple .ant-pagination-simple-pager input:hover {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-pagination-simple .ant-pagination-simple-pager input:focus {
-  border-color: #2a7dc9;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-pagination-simple .ant-pagination-simple-pager input[disabled] {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
-  border-color: transparent;
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-next .ant-pagination-item-link,
-[data-theme='dark'] .ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link {
-  border-color: transparent;
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-pagination.ant-pagination-disabled .ant-pagination-item {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-pagination.ant-pagination-disabled .ant-pagination-item a {
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-pagination.ant-pagination-disabled .ant-pagination-item-active {
-  background: rgb(255 255 255 / 25%);
-}
-
-[data-theme='dark'] .ant-pagination.ant-pagination-disabled .ant-pagination-item-active a {
-  color: #000;
-}
-
-[data-theme='dark'] .ant-pagination.ant-pagination-disabled .ant-pagination-item-link {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-pagination-simple.ant-pagination.ant-pagination-disabled
-  .ant-pagination-item-link {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-pagination.ant-pagination-disabled .ant-pagination-simple-pager {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-avatar {
-  background: rgb(255 255 255 / 30%);
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-avatar-image {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-avatar-group .ant-avatar {
-  border: 1px solid #fff;
-}
-
-[data-theme='dark'] .ant-badge {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-badge-count {
-  background: #a71d25;
-  box-shadow: 0 0 0 1px #151515;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-badge-count a,
-[data-theme='dark'] .ant-badge-count a:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-badge-dot {
-  background: #a71d25;
-  box-shadow: 0 0 0 1px #151515;
-}
-
-[data-theme='dark'] .ant-badge-status-success {
-  background-color: #55d187;
-}
-
-[data-theme='dark'] .ant-badge-status-processing {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-badge-status-processing::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-badge-status-default {
-  background-color: #d9d9d9;
-}
-
-[data-theme='dark'] .ant-badge-status-error {
-  background-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-badge-status-warning {
-  background-color: #efbd47;
-}
-
-[data-theme='dark'] .ant-badge-status-pink {
-  background: #cb2b83;
-}
-
-[data-theme='dark'] .ant-badge-status-magenta {
-  background: #cb2b83;
-}
-
-[data-theme='dark'] .ant-badge-status-red {
-  background: #d32029;
-}
-
-[data-theme='dark'] .ant-badge-status-volcano {
-  background: #d84b1b;
-}
-
-[data-theme='dark'] .ant-badge-status-orange {
-  background: #d87a16;
-}
-
-[data-theme='dark'] .ant-badge-status-yellow {
-  background: #d8bd14;
-}
-
-[data-theme='dark'] .ant-badge-status-gold {
-  background: #d89614;
-}
-
-[data-theme='dark'] .ant-badge-status-cyan {
-  background: #13a8a8;
-}
-
-[data-theme='dark'] .ant-badge-status-lime {
-  background: #8bbc12;
-}
-
-[data-theme='dark'] .ant-badge-status-green {
-  background: #49aa19;
-}
-
-[data-theme='dark'] .ant-badge-status-blue {
-  background: #187edc;
-}
-
-[data-theme='dark'] .ant-badge-status-geekblue {
-  background: #2b4bcb;
-}
-
-[data-theme='dark'] .ant-badge-status-purple {
-  background: #642ab5;
-}
-
-[data-theme='dark'] .ant-badge-status-text {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-ribbon {
-  background-color: #0960bd;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-ribbon-text {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-ribbon-corner::after {
-  color: rgb(0 0 0 / 25%);
-}
-
-[data-theme='dark'] .ant-ribbon-color-pink {
-  background: #cb2b83;
-  color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-ribbon-color-magenta {
-  background: #cb2b83;
-  color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-ribbon-color-red {
-  background: #d32029;
-  color: #d32029;
-}
-
-[data-theme='dark'] .ant-ribbon-color-volcano {
-  background: #d84b1b;
-  color: #d84b1b;
-}
-
-[data-theme='dark'] .ant-ribbon-color-orange {
-  background: #d87a16;
-  color: #d87a16;
-}
-
-[data-theme='dark'] .ant-ribbon-color-yellow {
-  background: #d8bd14;
-  color: #d8bd14;
-}
-
-[data-theme='dark'] .ant-ribbon-color-gold {
-  background: #d89614;
-  color: #d89614;
-}
-
-[data-theme='dark'] .ant-ribbon-color-cyan {
-  background: #13a8a8;
-  color: #13a8a8;
-}
-
-[data-theme='dark'] .ant-ribbon-color-lime {
-  background: #8bbc12;
-  color: #8bbc12;
-}
-
-[data-theme='dark'] .ant-ribbon-color-green {
-  background: #49aa19;
-  color: #49aa19;
-}
-
-[data-theme='dark'] .ant-ribbon-color-blue {
-  background: #187edc;
-  color: #187edc;
-}
-
-[data-theme='dark'] .ant-ribbon-color-geekblue {
-  background: #2b4bcb;
-  color: #2b4bcb;
-}
-
-[data-theme='dark'] .ant-ribbon-color-purple {
-  background: #642ab5;
-  color: #642ab5;
-}
-
-[data-theme='dark'] .ant-ribbon.ant-ribbon-placement-end .ant-ribbon-corner {
-  border-color: currentcolor transparent transparent;
-}
-
-[data-theme='dark'] .ant-ribbon.ant-ribbon-placement-start .ant-ribbon-corner {
-  border-color: currentcolor currentcolor transparent transparent;
-}
-
-[data-theme='dark'] .ant-ribbon-rtl.ant-ribbon-placement-end .ant-ribbon-corner {
-  border-color: currentcolor currentcolor transparent transparent;
-}
-
-[data-theme='dark'] .ant-ribbon-rtl.ant-ribbon-placement-end .ant-ribbon-corner::after {
-  border-color: currentcolor currentcolor transparent transparent;
-}
-
-[data-theme='dark'] .ant-ribbon-rtl.ant-ribbon-placement-start .ant-ribbon-corner {
-  border-color: currentcolor transparent transparent;
-}
-
-[data-theme='dark'] .ant-ribbon-rtl.ant-ribbon-placement-start .ant-ribbon-corner::after {
-  border-color: currentcolor transparent transparent;
-}
-
-[data-theme='dark'] .ant-tabs-bottom > .ant-tabs-nav::before,
-[data-theme='dark'] .ant-tabs-bottom > div > .ant-tabs-nav::before,
-[data-theme='dark'] .ant-tabs-top > .ant-tabs-nav::before,
-[data-theme='dark'] .ant-tabs-top > div > .ant-tabs-nav::before {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-tabs-left > .ant-tabs-content-holder,
-[data-theme='dark'] .ant-tabs-left > div > .ant-tabs-content-holder {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-tabs-right > .ant-tabs-content-holder,
-[data-theme='dark'] .ant-tabs-right > div > .ant-tabs-content-holder {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-tabs-dropdown {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tabs-dropdown-menu {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-tabs-dropdown-menu-item {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tabs-dropdown-menu-item-remove {
-  background: 0 0;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-tabs-dropdown-menu-item-remove:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-tabs-dropdown-menu-item:hover {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-tabs-dropdown-menu-item-disabled,
-[data-theme='dark'] .ant-tabs-dropdown-menu-item-disabled:hover {
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
-[data-theme='dark'] .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
-  border: 1px solid #303030;
-  background: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
-[data-theme='dark'] .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
-  background: #151515;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab-active,
-[data-theme='dark'] .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab-active {
-  border-bottom-color: #151515;
-}
-
-[data-theme='dark'] .ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-tab-active,
-[data-theme='dark'] .ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-tab-active {
-  border-top-color: #151515;
-}
-
-[data-theme='dark'] .ant-tabs-card.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab-active,
-[data-theme='dark'] .ant-tabs-card.ant-tabs-left > div > .ant-tabs-nav .ant-tabs-tab-active {
-  border-right-color: #151515;
-}
-
-[data-theme='dark'] .ant-tabs-card.ant-tabs-right > .ant-tabs-nav .ant-tabs-tab-active,
-[data-theme='dark'] .ant-tabs-card.ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab-active {
-  border-left-color: #151515;
-}
-
-[data-theme='dark'] .ant-tabs {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tabs > .ant-tabs-nav .ant-tabs-nav-more,
-[data-theme='dark'] .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-more {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add,
-[data-theme='dark'] .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add {
-  border: 1px solid #303030;
-  background: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:hover,
-[data-theme='dark'] .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:active,
-[data-theme='dark'] .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:focus,
-[data-theme='dark'] .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:active,
-[data-theme='dark'] .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:focus {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-tabs-ink-bar {
-  background: #0960bd;
-}
-
-[data-theme='dark'] .ant-tabs-tab {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-tabs-tab-btn:active,
-[data-theme='dark'] .ant-tabs-tab-btn:focus,
-[data-theme='dark'] .ant-tabs-tab-remove:active,
-[data-theme='dark'] .ant-tabs-tab-remove:focus {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-tabs-tab-remove {
-  background: 0 0;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-tabs-tab-remove:hover {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-tabs-tab:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tabs-tab.ant-tabs-tab-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn:active,
-[data-theme='dark'] .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn:focus,
-[data-theme='dark'] .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-remove:active,
-[data-theme='dark'] .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-remove:focus {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper {
-  border: 1px solid #303030;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper-focused,
-[data-theme='dark'] .ant-input-affix-wrapper:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper[disabled] {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper-borderless,
-[data-theme='dark'] .ant-input-affix-wrapper-borderless-disabled,
-[data-theme='dark'] .ant-input-affix-wrapper-borderless-focused,
-[data-theme='dark'] .ant-input-affix-wrapper-borderless:focus,
-[data-theme='dark'] .ant-input-affix-wrapper-borderless:hover,
-[data-theme='dark'] .ant-input-affix-wrapper-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-affix-wrapper-disabled .ant-input[disabled] {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-input-show-count-suffix {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .anticon.ant-input-clear-icon {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .anticon.ant-input-clear-icon:hover {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .anticon.ant-input-clear-icon:active {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input {
-  border: 1px solid #303030;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-focused,
-[data-theme='dark'] .ant-input:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-input-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input[disabled] {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-borderless,
-[data-theme='dark'] .ant-input-borderless-disabled,
-[data-theme='dark'] .ant-input-borderless-focused,
-[data-theme='dark'] .ant-input-borderless:focus,
-[data-theme='dark'] .ant-input-borderless:hover,
-[data-theme='dark'] .ant-input-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-input-group {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input-group-addon {
-  border: 1px solid #303030;
-  background-color: rgb(255 255 255 / 4%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark']
-  .ant-input-group-addon
-  .ant-select.ant-select-single:not(.ant-select-customize-input)
-  .ant-select-selector {
-  border: 1px solid transparent;
-}
-
-[data-theme='dark'] .ant-input-group-addon .ant-select-focused .ant-select-selector,
-[data-theme='dark'] .ant-input-group-addon .ant-select-open .ant-select-selector {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-input-group-addon .ant-cascader-picker {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-input-group-rtl .ant-input-group-addon:first-child {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-input-group-rtl .ant-input-group-addon:last-child {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-input-password-icon {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-input-password-icon:hover {
-  color: rgb(255 255 255 / 85%);
-}
-
-[data-theme='dark'] .ant-input-textarea-show-count::after {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-input-search .ant-input:focus,
-[data-theme='dark'] .ant-input-search .ant-input:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark']
-  .ant-input-search
-  .ant-input:focus
-  + .ant-input-group-addon
-  .ant-input-search-button:not(.ant-btn-primary),
-[data-theme='dark']
-  .ant-input-search
-  .ant-input:hover
-  + .ant-input-group-addon
-  .ant-input-search-button:not(.ant-btn-primary) {
-  border-left-color: #2a7dc9;
-}
-
-[data-theme='dark']
-  .ant-input-search
-  > .ant-input-group
-  > .ant-input-group-addon:last-child
-  .ant-input-search-button:not(.ant-btn-primary) {
-  color: #8b949e;
-}
-
-[data-theme='dark']
-  .ant-input-search-rtl
-  .ant-input:focus
-  + .ant-input-group-addon
-  .ant-input-search-button:not(.ant-btn-primary),
-[data-theme='dark']
-  .ant-input-search-rtl
-  .ant-input:hover
-  + .ant-input-group-addon
-  .ant-input-search-button:not(.ant-btn-primary) {
-  border-right-color: #2a7dc9;
-  border-left-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper-focused,
-[data-theme='dark'] .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper:hover {
-  border-right-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-tooltip {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tooltip-inner {
-  background-color: #434343;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tooltip-arrow {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-tooltip-arrow-content {
-  background-color: #434343;
-}
-
-[data-theme='dark'] .ant-tooltip-placement-top .ant-tooltip-arrow-content,
-[data-theme='dark'] .ant-tooltip-placement-topLeft .ant-tooltip-arrow-content,
-[data-theme='dark'] .ant-tooltip-placement-topRight .ant-tooltip-arrow-content {
-  box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
-}
-
-[data-theme='dark'] .ant-tooltip-pink .ant-tooltip-inner {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-tooltip-pink .ant-tooltip-arrow-content {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-tooltip-magenta .ant-tooltip-inner {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-tooltip-magenta .ant-tooltip-arrow-content {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-tooltip-red .ant-tooltip-inner {
-  background-color: #d32029;
-}
-
-[data-theme='dark'] .ant-tooltip-red .ant-tooltip-arrow-content {
-  background-color: #d32029;
-}
-
-[data-theme='dark'] .ant-tooltip-volcano .ant-tooltip-inner {
-  background-color: #d84b1b;
-}
-
-[data-theme='dark'] .ant-tooltip-volcano .ant-tooltip-arrow-content {
-  background-color: #d84b1b;
-}
-
-[data-theme='dark'] .ant-tooltip-orange .ant-tooltip-inner {
-  background-color: #d87a16;
-}
-
-[data-theme='dark'] .ant-tooltip-orange .ant-tooltip-arrow-content {
-  background-color: #d87a16;
-}
-
-[data-theme='dark'] .ant-tooltip-yellow .ant-tooltip-inner {
-  background-color: #d8bd14;
-}
-
-[data-theme='dark'] .ant-tooltip-yellow .ant-tooltip-arrow-content {
-  background-color: #d8bd14;
-}
-
-[data-theme='dark'] .ant-tooltip-gold .ant-tooltip-inner {
-  background-color: #d89614;
-}
-
-[data-theme='dark'] .ant-tooltip-gold .ant-tooltip-arrow-content {
-  background-color: #d89614;
-}
-
-[data-theme='dark'] .ant-tooltip-cyan .ant-tooltip-inner {
-  background-color: #13a8a8;
-}
-
-[data-theme='dark'] .ant-tooltip-cyan .ant-tooltip-arrow-content {
-  background-color: #13a8a8;
-}
-
-[data-theme='dark'] .ant-tooltip-lime .ant-tooltip-inner {
-  background-color: #8bbc12;
-}
-
-[data-theme='dark'] .ant-tooltip-lime .ant-tooltip-arrow-content {
-  background-color: #8bbc12;
-}
-
-[data-theme='dark'] .ant-tooltip-green .ant-tooltip-inner {
-  background-color: #49aa19;
-}
-
-[data-theme='dark'] .ant-tooltip-green .ant-tooltip-arrow-content {
-  background-color: #49aa19;
-}
-
-[data-theme='dark'] .ant-tooltip-blue .ant-tooltip-inner {
-  background-color: #187edc;
-}
-
-[data-theme='dark'] .ant-tooltip-blue .ant-tooltip-arrow-content {
-  background-color: #187edc;
-}
-
-[data-theme='dark'] .ant-tooltip-geekblue .ant-tooltip-inner {
-  background-color: #2b4bcb;
-}
-
-[data-theme='dark'] .ant-tooltip-geekblue .ant-tooltip-arrow-content {
-  background-color: #2b4bcb;
-}
-
-[data-theme='dark'] .ant-tooltip-purple .ant-tooltip-inner {
-  background-color: #642ab5;
-}
-
-[data-theme='dark'] .ant-tooltip-purple .ant-tooltip-arrow-content {
-  background-color: #642ab5;
-}
-
-[data-theme='dark'] .ant-popover {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-popover::after {
-  background: rgb(255 255 255 / 1%);
-}
-
-[data-theme='dark'] .ant-popover-inner {
-  background-color: #1f1f1f;
-  box-shadow: 0 0 8px rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] .ant-popover-title {
-  border-bottom: 1px solid #303030;
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-popover-inner-content {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-popover-message {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-popover-message > .anticon {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-popover-arrow {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-popover-arrow-content {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-popover-placement-top .ant-popover-arrow-content,
-[data-theme='dark'] .ant-popover-placement-topLeft .ant-popover-arrow-content,
-[data-theme='dark'] .ant-popover-placement-topRight .ant-popover-arrow-content {
-  box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
-}
-
-[data-theme='dark'] .ant-popover-pink .ant-popover-inner {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-popover-pink .ant-popover-arrow-content {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-popover-magenta .ant-popover-inner {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-popover-magenta .ant-popover-arrow-content {
-  background-color: #cb2b83;
-}
-
-[data-theme='dark'] .ant-popover-red .ant-popover-inner {
-  background-color: #d32029;
-}
-
-[data-theme='dark'] .ant-popover-red .ant-popover-arrow-content {
-  background-color: #d32029;
-}
-
-[data-theme='dark'] .ant-popover-volcano .ant-popover-inner {
-  background-color: #d84b1b;
-}
-
-[data-theme='dark'] .ant-popover-volcano .ant-popover-arrow-content {
-  background-color: #d84b1b;
-}
-
-[data-theme='dark'] .ant-popover-orange .ant-popover-inner {
-  background-color: #d87a16;
-}
-
-[data-theme='dark'] .ant-popover-orange .ant-popover-arrow-content {
-  background-color: #d87a16;
-}
-
-[data-theme='dark'] .ant-popover-yellow .ant-popover-inner {
-  background-color: #d8bd14;
-}
-
-[data-theme='dark'] .ant-popover-yellow .ant-popover-arrow-content {
-  background-color: #d8bd14;
-}
-
-[data-theme='dark'] .ant-popover-gold .ant-popover-inner {
-  background-color: #d89614;
-}
-
-[data-theme='dark'] .ant-popover-gold .ant-popover-arrow-content {
-  background-color: #d89614;
-}
-
-[data-theme='dark'] .ant-popover-cyan .ant-popover-inner {
-  background-color: #13a8a8;
-}
-
-[data-theme='dark'] .ant-popover-cyan .ant-popover-arrow-content {
-  background-color: #13a8a8;
-}
-
-[data-theme='dark'] .ant-popover-lime .ant-popover-inner {
-  background-color: #8bbc12;
-}
-
-[data-theme='dark'] .ant-popover-lime .ant-popover-arrow-content {
-  background-color: #8bbc12;
-}
-
-[data-theme='dark'] .ant-popover-green .ant-popover-inner {
-  background-color: #49aa19;
-}
-
-[data-theme='dark'] .ant-popover-green .ant-popover-arrow-content {
-  background-color: #49aa19;
-}
-
-[data-theme='dark'] .ant-popover-blue .ant-popover-inner {
-  background-color: #187edc;
-}
-
-[data-theme='dark'] .ant-popover-blue .ant-popover-arrow-content {
-  background-color: #187edc;
-}
-
-[data-theme='dark'] .ant-popover-geekblue .ant-popover-inner {
-  background-color: #2b4bcb;
-}
-
-[data-theme='dark'] .ant-popover-geekblue .ant-popover-arrow-content {
-  background-color: #2b4bcb;
-}
-
-[data-theme='dark'] .ant-popover-purple .ant-popover-inner {
-  background-color: #642ab5;
-}
-
-[data-theme='dark'] .ant-popover-purple .ant-popover-arrow-content {
-  background-color: #642ab5;
-}
-
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item-active,
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item:hover {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item:active {
-  background: #2b1316;
-}
-
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item-selected {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item-selected > a,
-[data-theme='dark'] .ant-menu-item-danger.ant-menu-item-selected > a:hover {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-menu:not(.ant-menu-horizontal)
-  .ant-menu-item-danger.ant-menu-item-selected {
-  background-color: #2b1316;
-}
-
-[data-theme='dark'] .ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {
-  border-right-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-danger.ant-menu-item,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
-  .ant-menu-item-danger.ant-menu-item-selected {
-  background-color: #ed6f6f;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu {
-  background: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-menu-item-group-title {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-menu-submenu-selected {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-item:active,
-[data-theme='dark'] .ant-menu-submenu-title:active {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-menu-item a {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-menu-item a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-item a::before {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-menu-item > .ant-badge a {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-menu-item > .ant-badge a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-item-divider {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-item-active,
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-item:hover,
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-menu-item-selected {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-item-selected a,
-[data-theme='dark'] .ant-menu-item-selected a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-menu-inline,
-[data-theme='dark'] .ant-menu-vertical,
-[data-theme='dark'] .ant-menu-vertical-left {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-menu-vertical-right {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-menu-item:focus-visible,
-[data-theme='dark'] .ant-menu-submenu-title:focus-visible {
-  box-shadow: 0 0 0 2px #a5d3f0;
-}
-
-[data-theme='dark'] .ant-menu-submenu-popup {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-menu-submenu > .ant-menu {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .ant-menu-submenu-popup > .ant-menu {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-menu-submenu-arrow,
-[data-theme='dark'] .ant-menu-submenu-expand-icon {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
-[data-theme='dark']
-  .ant-menu-submenu:hover
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-expand-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-vertical .ant-menu-submenu-selected,
-[data-theme='dark'] .ant-menu-vertical-left .ant-menu-submenu-selected,
-[data-theme='dark'] .ant-menu-vertical-right .ant-menu-submenu-selected {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-horizontal {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after,
-[data-theme='dark'] .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after {
-  border-bottom: 2px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-item::after,
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-submenu::after {
-  border-bottom: 2px solid transparent;
-}
-
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-item a {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-item a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-horizontal > .ant-menu-item-selected a {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-inline .ant-menu-item::after,
-[data-theme='dark'] .ant-menu-vertical .ant-menu-item::after,
-[data-theme='dark'] .ant-menu-vertical-left .ant-menu-item::after,
-[data-theme='dark'] .ant-menu-vertical-right .ant-menu-item::after {
-  border-right: 3px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-menu.ant-menu-inline-collapsed-tooltip a {
-  color: rgb(255 255 255 / 85%);
-}
-
-[data-theme='dark'] .ant-menu-sub.ant-menu-inline {
-  background: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-menu-item-disabled,
-[data-theme='dark'] .ant-menu-submenu-disabled {
-  color: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark'] .ant-menu-item-disabled::after,
-[data-theme='dark'] .ant-menu-submenu-disabled::after {
-  border-color: transparent !important;
-}
-
-[data-theme='dark'] .ant-menu-item-disabled a,
-[data-theme='dark'] .ant-menu-submenu-disabled a {
-  color: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark'] .ant-menu-item-disabled > .ant-menu-submenu-title,
-[data-theme='dark'] .ant-menu-submenu-disabled > .ant-menu-submenu-title {
-  color: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark']
-  .ant-menu-item-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-item-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-submenu-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-submenu-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before {
-  background: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark'] .ant-menu-inline-collapsed-tooltip a,
-[data-theme='dark'] .ant-menu-inline-collapsed-tooltip a:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu-light .ant-menu-item-active,
-[data-theme='dark'] .ant-menu-light .ant-menu-item:hover,
-[data-theme='dark'] .ant-menu-light .ant-menu-submenu-active,
-[data-theme='dark'] .ant-menu-light .ant-menu-submenu-title:hover,
-[data-theme='dark'] .ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu.ant-menu-root:focus-visible {
-  box-shadow: 0 0 0 2px #004496;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item:focus-visible,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-title:focus-visible {
-  box-shadow: 0 0 0 2px #004496;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-sub,
-[data-theme='dark'] .ant-menu.ant-menu-dark,
-[data-theme='dark'] .ant-menu.ant-menu-dark .ant-menu-sub {
-  background: #1f1f1f;
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-sub
-  .ant-menu-submenu-title
-  .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-sub
-  .ant-menu-submenu-title
-  .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu.ant-menu-dark
-  .ant-menu-sub
-  .ant-menu-submenu-title
-  .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu.ant-menu-dark
-  .ant-menu-sub
-  .ant-menu-submenu-title
-  .ant-menu-submenu-arrow::before,
-[data-theme='dark'] .ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu.ant-menu-dark
-  .ant-menu-submenu-title
-  .ant-menu-submenu-arrow::before {
-  background: #fff;
-}
-
-[data-theme='dark'] .ant-menu-dark.ant-menu-submenu-popup {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-inline.ant-menu-sub {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-menu-dark.ant-menu-horizontal > .ant-menu-item,
-[data-theme='dark'] .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
-  border-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-group-title,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item > span > a {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-active,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item:hover,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-active,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-open,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-selected,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-title:hover {
-  background-color: transparent;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-active > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-active > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item:hover > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item:hover > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-active > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-active > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-open > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-open > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-selected > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-selected > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-title:hover > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-title:hover > span > a {
-  color: #fff;
-}
-
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-item-active
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-item-active
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-item:hover
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-item:hover
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-active
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-active
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-open
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-open
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-selected
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-selected
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-title:hover
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-title:hover
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before {
-  background: #fff;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item:hover {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected > a:hover,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected > span > a:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected .anticon {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon + span,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-selected .anticon + span {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
-[data-theme='dark'] .ant-menu.ant-menu-dark .ant-menu-item-selected {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-disabled,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-disabled > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-disabled > span > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-disabled,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-disabled > a,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-disabled > span > a {
-  color: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark'] .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title,
-[data-theme='dark'] .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title {
-  color: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-item-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-item-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-menu-dark
-  .ant-menu-submenu-disabled
-  > .ant-menu-submenu-title
-  > .ant-menu-submenu-arrow::before {
-  background: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark'] .ant-menu-rtl.ant-menu-inline,
-[data-theme='dark'] .ant-menu-rtl.ant-menu-vertical {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-mentions {
-  border: 1px solid #303030;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-mentions::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-mentions-focused,
-[data-theme='dark'] .ant-mentions:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-mentions-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-mentions[disabled] {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-mentions-borderless,
-[data-theme='dark'] .ant-mentions-borderless-disabled,
-[data-theme='dark'] .ant-mentions-borderless-focused,
-[data-theme='dark'] .ant-mentions-borderless:focus,
-[data-theme='dark'] .ant-mentions-borderless:hover,
-[data-theme='dark'] .ant-mentions-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-mentions-disabled > textarea {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions-disabled > textarea:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-mentions-focused {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-mentions > textarea {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-mentions > textarea::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions-measure {
-  color: transparent;
-}
-
-[data-theme='dark'] .ant-mentions-dropdown {
-  background-color: #1f1f1f;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-mentions-dropdown-menu-item {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-mentions-dropdown-menu-item:hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-mentions-dropdown-menu-item-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions-dropdown-menu-item-disabled:hover {
-  background-color: #1f1f1f;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-mentions-dropdown-menu-item-selected {
-  background-color: rgb(255 255 255 / 4%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-mentions-dropdown-menu-item-active {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item.ant-dropdown-menu-item-danger {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:hover {
-  background-color: #ed6f6f;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-dropdown {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-dropdown-arrow {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-dropdown-placement-topCenter > .ant-dropdown-arrow,
-[data-theme='dark'] .ant-dropdown-placement-topLeft > .ant-dropdown-arrow,
-[data-theme='dark'] .ant-dropdown-placement-topRight > .ant-dropdown-arrow {
-  border-color: transparent #1f1f1f;
-  box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
-}
-
-[data-theme='dark'] .ant-dropdown-placement-bottomCenter > .ant-dropdown-arrow,
-[data-theme='dark'] .ant-dropdown-placement-bottomLeft > .ant-dropdown-arrow,
-[data-theme='dark'] .ant-dropdown-placement-bottomRight > .ant-dropdown-arrow {
-  border-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-dropdown-menu {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item-group-title {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-submenu-popup {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item,
-[data-theme='dark'] .ant-dropdown-menu-submenu-title {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item-selected,
-[data-theme='dark'] .ant-dropdown-menu-submenu-title-selected {
-  background-color: #111b26;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item:hover,
-[data-theme='dark'] .ant-dropdown-menu-submenu-title:hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item-disabled,
-[data-theme='dark'] .ant-dropdown-menu-submenu-title-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item-disabled:hover,
-[data-theme='dark'] .ant-dropdown-menu-submenu-title-disabled:hover {
-  background-color: transparent;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-dropdown-menu-item-divider,
-[data-theme='dark'] .ant-dropdown-menu-submenu-title-divider {
-  background-color: #303030;
-}
-
-[data-theme='dark']
-  .ant-dropdown-menu-item
-  .ant-dropdown-menu-submenu-expand-icon
-  .ant-dropdown-menu-submenu-arrow-icon,
-[data-theme='dark']
-  .ant-dropdown-menu-submenu-title
-  .ant-dropdown-menu-submenu-expand-icon
-  .ant-dropdown-menu-submenu-arrow-icon {
-  color: #8b949e;
-}
-
-[data-theme='dark']
-  .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled
-  .ant-dropdown-menu-submenu-title,
-[data-theme='dark']
-  .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled
-  .ant-dropdown-menu-submenu-title
-  .ant-dropdown-menu-submenu-arrow-icon {
-  background-color: transparent;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-dark,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item > .anticon + span > a,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item > a,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark']
-  .ant-dropdown-menu-dark
-  .ant-dropdown-menu-item
-  .ant-dropdown-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-dropdown-menu-dark
-  .ant-dropdown-menu-item
-  > .anticon
-  + span
-  > a
-  .ant-dropdown-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-dropdown-menu-dark
-  .ant-dropdown-menu-item
-  > a
-  .ant-dropdown-menu-submenu-arrow::after,
-[data-theme='dark']
-  .ant-dropdown-menu-dark
-  .ant-dropdown-menu-submenu-title
-  .ant-dropdown-menu-submenu-arrow::after {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item > .anticon + span > a:hover,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item > a:hover,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover {
-  background: 0 0;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover,
-[data-theme='dark'] .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a {
-  background: #0960bd;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-divider {
-  border-top: 1px solid rgb(255 255 255 / 12%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-divider-vertical {
-  border-left: 1px solid rgb(255 255 255 / 12%);
-}
-
-[data-theme='dark'] .ant-divider-horizontal.ant-divider-with-text {
-  border-top-color: rgb(255 255 255 / 12%);
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-divider-horizontal.ant-divider-with-text::after,
-[data-theme='dark'] .ant-divider-horizontal.ant-divider-with-text::before {
-  border-top: 1px solid transparent;
-}
-
-[data-theme='dark'] .ant-divider-dashed {
-  border-color: rgb(255 255 255 / 12%);
-}
-
-[data-theme='dark'] .ant-divider-plain.ant-divider-with-text {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-card {
-  background: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-card-hoverable:hover {
-  border-color: transparent;
-}
-
-[data-theme='dark'] .ant-card-bordered {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-card-head {
-  border-bottom: 1px solid #303030;
-  background: 0 0;
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-card-head .ant-tabs-top {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-card-head .ant-tabs-top-bar {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-card-extra {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-card-grid {
-  box-shadow: 1px 0 0 0 #303030;
-}
-
-[data-theme='dark'] .ant-card-actions {
-  border-top: 1px solid #303030;
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-card-actions > li {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-card-actions > li > span:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-card-actions > li > span a:not(.ant-btn),
-[data-theme='dark'] .ant-card-actions > li > span > .anticon {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-card-actions > li > span a:not(.ant-btn):hover,
-[data-theme='dark'] .ant-card-actions > li > span > .anticon:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-card-actions > li:not(:last-child) {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-card-rtl .ant-card-actions > li:not(:last-child) {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-card-type-inner .ant-card-head {
-  background: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-card-meta-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-card-meta-description {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-collapse {
-  border: 1px solid #303030;
-  background-color: rgb(255 255 255 / 4%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-collapse > .ant-collapse-item {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-collapse > .ant-collapse-item > .ant-collapse-header {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-collapse-content {
-  border-top: 1px solid #303030;
-  background-color: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-collapse-borderless {
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-collapse-borderless > .ant-collapse-item {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-collapse-ghost {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
-[data-theme='dark'] .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-carousel {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-carousel .slick-slider {
-  -webkit-tap-highlight-color: transparent;
-}
-
-[data-theme='dark'] .ant-carousel .slick-next,
-[data-theme='dark'] .ant-carousel .slick-prev {
-  background: 0 0;
-  color: transparent;
-}
-
-[data-theme='dark'] .ant-carousel .slick-next:focus,
-[data-theme='dark'] .ant-carousel .slick-next:hover,
-[data-theme='dark'] .ant-carousel .slick-prev:focus,
-[data-theme='dark'] .ant-carousel .slick-prev:hover {
-  background: 0 0;
-  color: transparent;
-}
-
-[data-theme='dark'] .ant-carousel .slick-dots li button {
-  background: #151515;
-  color: transparent;
-}
-
-[data-theme='dark'] .ant-carousel .slick-dots li.slick-active button {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-notification .ant-anchor-wrapper,
-[data-theme='dark'] .ant-notification .ant-card,
-[data-theme='dark'] .ant-notification .ant-collapse-content,
-[data-theme='dark'] .ant-notification .ant-picker-clear,
-[data-theme='dark'] .ant-notification .ant-slider-handle,
-[data-theme='dark'] .ant-notification .ant-timeline-item-head {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-transfer-list-header {
-  border-bottom: 1px solid #3a3a3a;
-  background: #1f1f1f;
-}
-
-[data-theme='dark']
-  .ant-notification
-  .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-notification tr.ant-table-expanded-row:hover > td,
-[data-theme='dark'] .ant-notification tr.ant-table-expanded-row > td {
-  background: #272727;
-}
-
-[data-theme='dark'] .ant-notification .ant-table.ant-table-small thead > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-table {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-table .ant-table-row-expand-icon {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-notification .ant-table tfoot > tr > td,
-[data-theme='dark'] .ant-notification .ant-table tfoot > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-notification .ant-table thead > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-  background-color: #272727;
-}
-
-[data-theme='dark'] .ant-notification .ant-table tbody > tr > td {
-  border-bottom: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-notification .ant-table tbody > tr > td.ant-table-cell-fix-left,
-[data-theme='dark'] .ant-notification .ant-table tbody > tr > td.ant-table-cell-fix-right {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-table tbody > tr.ant-table-row:hover > td {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered .ant-table-title {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered tbody > tr > td,
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered tfoot > tr > td,
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered tfoot > tr > th,
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered thead > tr > th {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-notification
-  .ant-table.ant-table-bordered
-  .ant-table-cell-fix-right-first::after {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-notification
-  .ant-table.ant-table-bordered
-  table
-  thead
-  > tr:not(:last-child)
-  > th {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered .ant-table-container {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-notification
-  .ant-table.ant-table-bordered
-  .ant-table-expanded-row-fixed::after {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-notification .ant-table.ant-table-bordered .ant-table-footer {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-notification .ant-table .ant-table-filter-trigger-container-open {
-  background-color: #525252;
-}
-
-[data-theme='dark'] .ant-notification .ant-picker-calendar-full {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-picker-calendar-full .ant-picker-panel {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark']
-  .ant-notification
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-calendar-date {
-  border-top: 2px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-notification
-  .ant-tabs.ant-tabs-card
-  .ant-tabs-card-bar
-  .ant-tabs-tab-active {
-  border-bottom: 1px solid #1f1f1f;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-badge-count {
-  box-shadow: 0 0 0 1px #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification .ant-tree-show-line .ant-tree-switcher {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-notification-notice {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-notification-notice-message {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-notification-notice-message-single-line-auto-margin {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .anticon.ant-notification-notice-icon-success {
-  color: #55d187;
-}
-
-[data-theme='dark'] .anticon.ant-notification-notice-icon-info {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .anticon.ant-notification-notice-icon-warning {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .anticon.ant-notification-notice-icon-error {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-notification-notice-close {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-notification-notice-close:hover {
-  color: rgb(255 255 255 / 85%);
-}
-
-[data-theme='dark'] .ant-message {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-message-notice-content {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-message-success .anticon {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-message-error .anticon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-message-warning .anticon {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-message-info .anticon,
-[data-theme='dark'] .ant-message-loading .anticon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-spin {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
-  text-shadow: 0 1px 2px #151515;
-}
-
-[data-theme='dark'] .ant-spin-container::after {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-spin-tip {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-spin-dot-item {
-  background-color: #0960bd;
-}
-
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  [data-theme='dark'] {
-    background: #151515;
-  }
-}
-
-[data-theme='dark'] .ant-select-single.ant-select-open .ant-select-selection-item {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-disabled.ant-select-multiple .ant-select-selector {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-select-multiple .ant-select-selection-item {
-  border: 1px solid #303030;
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
-  border-color: #1f1f1f;
-  color: #595959;
-}
-
-[data-theme='dark'] .ant-select-multiple .ant-select-selection-item-remove {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-select-multiple .ant-select-selection-item-remove:hover {
-  color: rgb(255 255 255 / 75%);
-}
-
-[data-theme='dark'] .ant-select {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
-  .ant-select-selector {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark']
-  .ant-select-disabled.ant-select:not(.ant-select-customize-input)
-  .ant-select-selector {
-  background: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input)
-  .ant-select-selector {
-  background: #151515;
-}
-
-[data-theme='dark']
-  .ant-select:not(.ant-select-customize-input)
-  .ant-select-selector
-  .ant-select-selection-search-input {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-select-selection-placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-arrow {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-clear {
-  background: #151515;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-clear:hover {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-select-dropdown {
-  background-color: #1f1f1f;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select-dropdown-empty {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-item-empty {
-  color: #c9d1d9;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-item {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select-item-group {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-  background-color: rgb(255 255 255 / 8%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark']
-  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
-  .ant-select-item-option-state {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-select-item-option-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-item-option-disabled.ant-select-item-option-selected {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .ant-select-borderless .ant-select-selector {
-  border-color: transparent !important;
-  background-color: transparent !important;
-}
-
-[data-theme='dark'] .ant-switch {
-  background-color: rgb(255 255 255 / 30%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-switch:focus {
-  box-shadow: 0 0 0 2px rgb(255 255 255 / 10%);
-}
-
-[data-theme='dark'] .ant-switch-checked:focus {
-  box-shadow: 0 0 0 2px rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-switch-checked {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-switch-inner {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-switch-handle::before {
-  background-color: #fff;
-  box-shadow: 0 2px 4px 0 rgb(0 35 11 / 20%);
-}
-
-[data-theme='dark'] .ant-switch-loading-icon.anticon {
-  color: rgb(0 0 0 / 65%);
-}
-
-[data-theme='dark'] .ant-switch-checked .ant-switch-loading-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-select-auto-complete {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-input:focus + .ant-cascader-checkbox-inner,
-[data-theme='dark'] .ant-cascader-checkbox-wrapper:hover .ant-cascader-checkbox-inner,
-[data-theme='dark'] .ant-cascader-checkbox:hover .ant-cascader-checkbox-inner {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-checked::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-inner {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner {
-  border-color: #0960bd;
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-cascader-checkbox-disabled.ant-cascader-checkbox-checked
-  .ant-cascader-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-disabled .ant-cascader-checkbox-inner {
-  border-color: #303030 !important;
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-disabled .ant-cascader-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-disabled + span {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-wrapper {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-group {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner {
-  border-color: #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner::after {
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-cascader-checkbox-indeterminate.ant-cascader-checkbox-disabled
-  .ant-cascader-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-  background-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-cascader-menu {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-cascader-menu-item:hover {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-cascader-menu-item-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-cascader-menu-item-disabled:hover {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-cascader-menu-empty .ant-cascader-menu-item {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
-[data-theme='dark'] .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon,
-[data-theme='dark'] .ant-cascader-menu-item-loading-icon {
-  color: #8b949e;
-}
-
-[data-theme='dark']
-  .ant-cascader-menu-item-disabled.ant-cascader-menu-item-expand
-  .ant-cascader-menu-item-expand-icon,
-[data-theme='dark'] .ant-cascader-menu-item-disabled.ant-cascader-menu-item-loading-icon {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-cascader-menu-item-keyword {
-  color: #a71d25;
-}
-
-[data-theme='dark'] .ant-back-top {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-back-top-content {
-  background-color: #8b949e;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-back-top-content:hover {
-  background-color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-modal {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-modal-mask {
-  background-color: rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] .ant-modal-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-modal-content {
-  background-color: #1f1f1f;
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
-}
-
-[data-theme='dark'] .ant-modal-close {
-  background: 0 0;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-modal-close:focus,
-[data-theme='dark'] .ant-modal-close:hover {
-  color: rgb(255 255 255 / 75%);
-}
-
-[data-theme='dark'] .ant-modal-header {
-  border-bottom: 1px solid #303030;
-  background: #1f1f1f;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-modal-footer {
-  border-top: 1px solid #303030;
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-modal-confirm-body .ant-modal-confirm-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-modal-confirm-body .ant-modal-confirm-content {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon,
-[data-theme='dark'] .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-modal-confirm-success .ant-modal-confirm-body > .anticon {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-modal .ant-anchor-wrapper,
-[data-theme='dark'] .ant-modal .ant-card,
-[data-theme='dark'] .ant-modal .ant-collapse-content,
-[data-theme='dark'] .ant-modal .ant-picker-clear,
-[data-theme='dark'] .ant-modal .ant-slider-handle,
-[data-theme='dark'] .ant-modal .ant-timeline-item-head {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-transfer-list-header {
-  border-bottom: 1px solid #3a3a3a;
-  background: #1f1f1f;
-}
-
-[data-theme='dark']
-  .ant-modal
-  .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-modal tr.ant-table-expanded-row:hover > td,
-[data-theme='dark'] .ant-modal tr.ant-table-expanded-row > td {
-  background: #272727;
-}
-
-[data-theme='dark'] .ant-modal .ant-table.ant-table-small thead > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-table {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-table .ant-table-row-expand-icon {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table tfoot > tr > td,
-[data-theme='dark'] .ant-modal .ant-table tfoot > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table thead > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-  background-color: #272727;
-}
-
-[data-theme='dark'] .ant-modal .ant-table tbody > tr > td {
-  border-bottom: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table tbody > tr > td.ant-table-cell-fix-left,
-[data-theme='dark'] .ant-modal .ant-table tbody > tr > td.ant-table-cell-fix-right {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-table tbody > tr.ant-table-row:hover > td {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered .ant-table-title {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered tbody > tr > td,
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered tfoot > tr > td,
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered tfoot > tr > th,
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered thead > tr > th {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-modal
-  .ant-table.ant-table-bordered
-  .ant-table-cell-fix-right-first::after {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-modal
-  .ant-table.ant-table-bordered
-  table
-  thead
-  > tr:not(:last-child)
-  > th {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered .ant-table-container {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered .ant-table-expanded-row-fixed::after {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table.ant-table-bordered .ant-table-footer {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-table .ant-table-filter-trigger-container-open {
-  background-color: #525252;
-}
-
-[data-theme='dark'] .ant-modal .ant-picker-calendar-full {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-picker-calendar-full .ant-picker-panel {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark']
-  .ant-modal
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-calendar-date {
-  border-top: 2px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-modal .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
-  border-bottom: 1px solid #1f1f1f;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-badge-count {
-  box-shadow: 0 0 0 1px #1f1f1f;
-}
-
-[data-theme='dark'] .ant-modal .ant-tree-show-line .ant-tree-switcher {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-alert {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-alert-success {
-  border: 1px solid #274916;
-  background-color: #162312;
-}
-
-[data-theme='dark'] .ant-alert-success .ant-alert-icon {
-  color: #49aa19;
-}
-
-[data-theme='dark'] .ant-alert-info {
-  border: 1px solid #153450;
-  background-color: #111b26;
-}
-
-[data-theme='dark'] .ant-alert-info .ant-alert-icon {
-  color: #177ddc;
-}
-
-[data-theme='dark'] .ant-alert-warning {
-  border: 1px solid #594214;
-  background-color: #2b2111;
-}
-
-[data-theme='dark'] .ant-alert-warning .ant-alert-icon {
-  color: #d89614;
-}
-
-[data-theme='dark'] .ant-alert-error {
-  border: 1px solid #58181c;
-  background-color: #2a1215;
-}
-
-[data-theme='dark'] .ant-alert-error .ant-alert-icon {
-  color: #a61d24;
-}
-
-[data-theme='dark'] .ant-alert-close-icon {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-alert-close-icon .anticon-close {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-alert-close-icon .anticon-close:hover {
-  color: rgb(255 255 255 / 75%);
-}
-
-[data-theme='dark'] .ant-alert-close-text {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-alert-close-text:hover {
-  color: rgb(255 255 255 / 75%);
-}
-
-[data-theme='dark'] .ant-alert-with-description .ant-alert-message {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-alert-message {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-steps {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-steps-item-icon {
-  border: 1px solid rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-steps-item-icon .ant-steps-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-steps-item-tail::after {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-steps-item-title {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-steps-item-title::after {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-steps-item-subtitle {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-steps-item-description {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-steps-item-wait .ant-steps-item-icon {
-  border-color: rgb(255 255 255 / 30%);
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-steps-item-wait
-  .ant-steps-item-icon
-  > .ant-steps-icon
-  .ant-steps-icon-dot {
-  background: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-steps-item-wait
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title {
-  color: #8b949e;
-}
-
-[data-theme='dark']
-  .ant-steps-item-wait
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title::after {
-  background-color: #303030;
-}
-
-[data-theme='dark']
-  .ant-steps-item-wait
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-description {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after {
-  background-color: #303030;
-}
-
-[data-theme='dark'] .ant-steps-item-process .ant-steps-item-icon {
-  border-color: #0960bd;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-process
-  .ant-steps-item-icon
-  > .ant-steps-icon
-  .ant-steps-icon-dot {
-  background: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-process
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark']
-  .ant-steps-item-process
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title::after {
-  background-color: #303030;
-}
-
-[data-theme='dark']
-  .ant-steps-item-process
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-description {
-  color: #c9d1d9;
-}
-
-[data-theme='dark']
-  .ant-steps-item-process
-  > .ant-steps-item-container
-  > .ant-steps-item-tail::after {
-  background-color: #303030;
-}
-
-[data-theme='dark'] .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon {
-  background: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-process
-  > .ant-steps-item-container
-  > .ant-steps-item-icon
-  .ant-steps-icon {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-steps-item-finish .ant-steps-item-icon {
-  border-color: #0960bd;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-finish
-  .ant-steps-item-icon
-  > .ant-steps-icon
-  .ant-steps-icon-dot {
-  background: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-finish
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title {
-  color: #c9d1d9;
-}
-
-[data-theme='dark']
-  .ant-steps-item-finish
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title::after {
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-finish
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-description {
-  color: #8b949e;
-}
-
-[data-theme='dark']
-  .ant-steps-item-finish
-  > .ant-steps-item-container
-  > .ant-steps-item-tail::after {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-steps-item-error .ant-steps-item-icon {
-  border-color: #ed6f6f;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-steps-item-error
-  .ant-steps-item-icon
-  > .ant-steps-icon
-  .ant-steps-icon-dot {
-  background: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-steps-item-error
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-steps-item-error
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-title::after {
-  background-color: #303030;
-}
-
-[data-theme='dark']
-  .ant-steps-item-error
-  > .ant-steps-item-container
-  > .ant-steps-item-content
-  > .ant-steps-item-description {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-steps-item-error
-  > .ant-steps-item-container
-  > .ant-steps-item-tail::after {
-  background-color: #303030;
-}
-
-[data-theme='dark'] .ant-steps-item.ant-steps-next-error .ant-steps-item-title::after {
-  background: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-steps
-  .ant-steps-item:not(.ant-steps-item-active)
-  > .ant-steps-item-container[role='button']:hover
-  .ant-steps-item-description,
-[data-theme='dark']
-  .ant-steps
-  .ant-steps-item:not(.ant-steps-item-active)
-  > .ant-steps-item-container[role='button']:hover
-  .ant-steps-item-subtitle,
-[data-theme='dark']
-  .ant-steps
-  .ant-steps-item:not(.ant-steps-item-active)
-  > .ant-steps-item-container[role='button']:hover
-  .ant-steps-item-title {
-  color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps
-  .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)
-  > .ant-steps-item-container[role='button']:hover
-  .ant-steps-item-icon {
-  border-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps
-  .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)
-  > .ant-steps-item-container[role='button']:hover
-  .ant-steps-item-icon
-  .ant-steps-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-steps-item-custom.ant-steps-item-process
-  .ant-steps-item-icon
-  > .ant-steps-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-steps-small .ant-steps-item-description {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-steps-dot .ant-steps-item-icon,
-[data-theme='dark'] .ant-steps-dot.ant-steps-small .ant-steps-item-icon {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot::after,
-[data-theme='dark'] .ant-steps-dot.ant-steps-small .ant-steps-item-icon .ant-steps-icon-dot::after {
-  background: rgb(0 0 0 / 0.1%);
-}
-
-[data-theme='dark'] .ant-steps-navigation .ant-steps-item::after {
-  border: 1px solid rgb(255 255 255 / 20%);
-}
-
-[data-theme='dark'] .ant-steps-navigation .ant-steps-item::before {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-breadcrumb {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-breadcrumb a {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-breadcrumb a:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-breadcrumb > span:last-child {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-breadcrumb > span:last-child a {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-breadcrumb-separator {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-picker-calendar {
-  background: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-calendar .ant-picker-panel {
-  border-top: 1px solid #303030;
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-picker-calendar-full .ant-picker-panel {
-  background: #151515;
-}
-
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell:hover
-  .ant-picker-calendar-date {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected
-  .ant-picker-calendar-date,
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected
-  .ant-picker-calendar-date-today,
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected:hover
-  .ant-picker-calendar-date,
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected:hover
-  .ant-picker-calendar-date-today {
-  background: #111b26;
-}
-
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected
-  .ant-picker-calendar-date
-  .ant-picker-calendar-date-value,
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected
-  .ant-picker-calendar-date-today
-  .ant-picker-calendar-date-value,
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected:hover
-  .ant-picker-calendar-date
-  .ant-picker-calendar-date-value,
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-cell-selected:hover
-  .ant-picker-calendar-date-today
-  .ant-picker-calendar-date-value {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date {
-  border-top: 2px solid #303030;
-}
-
-[data-theme='dark'] .ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-content {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
-  border-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-calendar-date-today
-  .ant-picker-calendar-date-value {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker {
-  border: 1px solid #303030;
-  background: 0 0;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-focused,
-[data-theme='dark'] .ant-picker:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-picker-focused {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-picker.ant-picker-disabled {
-  border-color: #303030;
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-picker.ant-picker-disabled .ant-picker-suffix {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker.ant-picker-borderless {
-  border-color: transparent !important;
-  background-color: transparent !important;
-}
-
-[data-theme='dark'] .ant-picker-input > input {
-  border: 1px solid #303030;
-  background: 0 0;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-input > input::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-input > input:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-picker-input > input-focused,
-[data-theme='dark'] .ant-picker-input > input:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-picker-input > input-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-input > input-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-picker-input > input[disabled] {
-  border-color: #303030;
-  background: 0 0;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-input > input[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-picker-input > input-borderless,
-[data-theme='dark'] .ant-picker-input > input-borderless-disabled,
-[data-theme='dark'] .ant-picker-input > input-borderless-focused,
-[data-theme='dark'] .ant-picker-input > input-borderless:focus,
-[data-theme='dark'] .ant-picker-input > input-borderless:hover,
-[data-theme='dark'] .ant-picker-input > input-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-picker-input-placeholder > input {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-suffix {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-clear {
-  background: #151515;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-clear:hover {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-picker-separator {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-focused .ant-picker-separator {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-picker-range .ant-picker-active-bar {
-  background: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-dropdown {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
-  border-color: #78b7e3;
-  background: rgb(255 255 255 / 8%);
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-range-arrow::after {
-  border: 5px solid #303030;
-  border-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-picker-panel-container {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-picker-panel-container .ant-picker-panel {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-picker-panel-container .ant-picker-panel-focused {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-picker-panel {
-  border: 1px solid #303030;
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-picker-panel-focused {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-header {
-  border-bottom: 1px solid #303030;
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-picker-header button {
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-header > button:hover {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-header-view button:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-content th {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-cell {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-cell-in-view {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
-[data-theme='dark']
-  .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(
-    .ant-picker-cell-range-end
-  ):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
-  .ant-picker-cell-inner {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
-  background: #0960bd;
-  color: #fff;
-}
-
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
-    .ant-picker-cell-range-start-single
-  )::before {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(
-    .ant-picker-cell-range-start
-  ):not(.ant-picker-cell-range-end)::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(
-    .ant-picker-cell-range-start
-  ):not(.ant-picker-cell-range-end)::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after {
-  border-top: 1px dashed #042f5c;
-  border-bottom: 1px dashed #042f5c;
-}
-
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
-    .ant-picker-cell-range-end-single
-  ).ant-picker-cell-range-hover-end::before,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
-    .ant-picker-cell-range-start-single
-  ).ant-picker-cell-range-hover-start::before,
-[data-theme='dark']
-  .ant-picker-panel
-  > :not(.ant-picker-date-panel)
-  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before,
-[data-theme='dark']
-  .ant-picker-panel
-  > :not(.ant-picker-date-panel)
-  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before {
-  background: #010913;
-}
-
-[data-theme='dark']
-  .ant-picker-date-panel
-  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
-  .ant-picker-cell-inner::after,
-[data-theme='dark']
-  .ant-picker-date-panel
-  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
-  .ant-picker-cell-inner::after {
-  background: #010913;
-}
-
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(
-    .ant-picker-cell-range-hover-edge-start-near-range
-  )::after,
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after,
-[data-theme='dark']
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after,
-[data-theme='dark'] tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after {
-  border-left: 1px dashed #042f5c;
-}
-
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after,
-[data-theme='dark']
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(
-    .ant-picker-cell-range-hover-edge-end-near-range
-  )::after,
-[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after,
-[data-theme='dark']
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after,
-[data-theme='dark'] tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after {
-  border-right: 1px dashed #042f5c;
-}
-
-[data-theme='dark'] .ant-picker-cell-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-cell-disabled .ant-picker-cell-inner {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-picker-cell-disabled::before {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-picker-cell-disabled.ant-picker-cell-today .ant-picker-cell-inner::before {
-  border-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-footer {
-  border-bottom: 1px solid transparent;
-}
-
-[data-theme='dark'] .ant-picker-panel .ant-picker-footer {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-picker-footer-extra:not(:last-child) {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-picker-today-btn {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-today-btn:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-picker-today-btn:active {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-picker-today-btn.ant-picker-today-btn-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-picker-month-panel .ant-picker-cell-range-hover-start::after,
-[data-theme='dark'] .ant-picker-quarter-panel .ant-picker-cell-range-hover-start::after,
-[data-theme='dark'] .ant-picker-year-panel .ant-picker-cell-range-hover-start::after {
-  border-left: 1px dashed #042f5c;
-}
-
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-month-panel
-  .ant-picker-cell-range-hover-start::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-quarter-panel
-  .ant-picker-cell-range-hover-start::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-year-panel
-  .ant-picker-cell-range-hover-start::after {
-  border-right: 1px dashed #042f5c;
-}
-
-[data-theme='dark'] .ant-picker-month-panel .ant-picker-cell-range-hover-end::after,
-[data-theme='dark'] .ant-picker-quarter-panel .ant-picker-cell-range-hover-end::after,
-[data-theme='dark'] .ant-picker-year-panel .ant-picker-cell-range-hover-end::after {
-  border-right: 1px dashed #042f5c;
-}
-
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-month-panel
-  .ant-picker-cell-range-hover-end::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-quarter-panel
-  .ant-picker-cell-range-hover-end::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-year-panel
-  .ant-picker-cell-range-hover-end::after {
-  border-left: 1px dashed #042f5c;
-}
-
-[data-theme='dark'] .ant-picker-week-panel .ant-picker-cell .ant-picker-cell-inner,
-[data-theme='dark'] .ant-picker-week-panel .ant-picker-cell-selected .ant-picker-cell-inner,
-[data-theme='dark'] .ant-picker-week-panel .ant-picker-cell:hover .ant-picker-cell-inner {
-  background: 0 0 !important;
-}
-
-[data-theme='dark'] .ant-picker-week-panel-row:hover td {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-picker-week-panel-row-selected td,
-[data-theme='dark'] .ant-picker-week-panel-row-selected:hover td {
-  background: #0960bd;
-}
-
-[data-theme='dark'] .ant-picker-week-panel-row-selected td.ant-picker-cell-week,
-[data-theme='dark'] .ant-picker-week-panel-row-selected:hover td.ant-picker-cell-week {
-  color: rgb(255 255 255 / 50%);
-}
-
-[data-theme='dark']
-  .ant-picker-week-panel-row-selected
-  td.ant-picker-cell-today
-  .ant-picker-cell-inner::before,
-[data-theme='dark']
-  .ant-picker-week-panel-row-selected:hover
-  td.ant-picker-cell-today
-  .ant-picker-cell-inner::before {
-  border-color: #fff;
-}
-
-[data-theme='dark'] .ant-picker-week-panel-row-selected td .ant-picker-cell-inner,
-[data-theme='dark'] .ant-picker-week-panel-row-selected:hover td .ant-picker-cell-inner {
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-picker-datetime-panel .ant-picker-time-panel {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-picker-time-panel-column:not(:first-child) {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-picker-time-panel-column-active {
-  background: rgb(17 27 38 / 20%);
-}
-
-[data-theme='dark']
-  .ant-picker-time-panel-column
-  > li.ant-picker-time-panel-cell
-  .ant-picker-time-panel-cell-inner {
-  color: #c9d1d9;
-}
-
-[data-theme='dark']
-  .ant-picker-time-panel-column
-  > li.ant-picker-time-panel-cell
-  .ant-picker-time-panel-cell-inner:hover {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-picker-time-panel-column
-  > li.ant-picker-time-panel-cell-selected
-  .ant-picker-time-panel-cell-inner {
-  background: #111b26;
-}
-
-[data-theme='dark']
-  .ant-picker-time-panel-column
-  > li.ant-picker-time-panel-cell-disabled
-  .ant-picker-time-panel-cell-inner {
-  background: 0 0;
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(
-    .ant-picker-cell-range-hover-edge-start-near-range
-  )::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(
-    .ant-picker-cell-selected
-  ):first-child::after {
-  border-right: 1px dashed #042f5c;
-}
-
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(
-    .ant-picker-cell-range-hover-edge-end-near-range
-  )::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(
-    .ant-picker-cell-selected
-  ):last-child::after {
-  border-left: 1px dashed #042f5c;
-}
-
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-start.ant-picker-cell-range-hover-edge-end:not(
-    .ant-picker-cell-range-hover
-  )::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start:not(
-    .ant-picker-cell-range-hover
-  )::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-end.ant-picker-cell-range-hover-edge-start:not(
-    .ant-picker-cell-range-hover
-  )::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover.ant-picker-cell-range-hover-edge-end:first-child::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after,
-[data-theme='dark']
-  .ant-picker-panel-rtl
-  tr
-  > .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover.ant-picker-cell-range-hover-edge-start:last-child::after {
-  border-right: 1px dashed #042f5c;
-  border-left: 1px dashed #042f5c;
-}
-
-[data-theme='dark'] .ant-slider {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-slider-rail {
-  background-color: #262626;
-}
-
-[data-theme='dark'] .ant-slider-track {
-  background-color: #78b7e3;
-}
-
-[data-theme='dark'] .ant-slider-handle {
-  border: solid 2px #78b7e3;
-  background-color: #151515;
-}
-
-[data-theme='dark']
-  .ant-slider-handle-dragging.ant-slider-handle-dragging.ant-slider-handle-dragging {
-  border-color: #3a80ca;
-  box-shadow: 0 0 0 5px rgb(9 96 189 / 12%);
-}
-
-[data-theme='dark'] .ant-slider-handle:focus {
-  border-color: #3a80ca;
-  box-shadow: 0 0 0 5px rgb(9 96 189 / 12%);
-}
-
-[data-theme='dark'] .ant-slider-handle.ant-tooltip-open {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-slider:hover .ant-slider-rail {
-  background-color: #303030;
-}
-
-[data-theme='dark'] .ant-slider:hover .ant-slider-track {
-  background-color: #4f99d6;
-}
-
-[data-theme='dark'] .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
-  border-color: #4f99d6;
-}
-
-[data-theme='dark'] .ant-slider-mark-text {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-slider-mark-text-active {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-slider-step {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-slider-dot {
-  border: 2px solid #303030;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .ant-slider-dot-active {
-  border-color: #4f99d6;
-}
-
-[data-theme='dark'] .ant-slider-disabled .ant-slider-rail {
-  background-color: #262626 !important;
-}
-
-[data-theme='dark'] .ant-slider-disabled .ant-slider-track {
-  background-color: rgb(255 255 255 / 30%) !important;
-}
-
-[data-theme='dark'] .ant-slider-disabled .ant-slider-dot,
-[data-theme='dark'] .ant-slider-disabled .ant-slider-handle {
-  border-color: rgb(255 255 255 / 30%) !important;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .ant-table-small .ant-table-thead > tr > th {
-  background-color: #1d1d1d;
-}
-
-[data-theme='dark'] .ant-table.ant-table-bordered > .ant-table-title {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-table.ant-table-bordered > .ant-table-container {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > tbody
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > tfoot
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > tfoot
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > thead
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > tbody
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > tfoot
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > tfoot
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > thead
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > tbody
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > tfoot
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > tfoot
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > thead
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > tbody
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > tfoot
-  > tr
-  > td,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > tfoot
-  > tr
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > thead
-  > tr
-  > th {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > thead
-  > tr:not(:last-child)
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > thead
-  > tr:not(:last-child)
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > thead
-  > tr:not(:last-child)
-  > th,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > thead
-  > tr:not(:last-child)
-  > th {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > thead
-  > tr
-  > th::before,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > thead
-  > tr
-  > th::before,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > thead
-  > tr
-  > th::before,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > thead
-  > tr
-  > th::before {
-  background-color: transparent !important;
-}
-
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > tbody
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > tfoot
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > thead
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > tbody
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > tfoot
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > thead
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > tbody
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > tfoot
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > thead
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > tbody
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > tfoot
-  > tr
-  > .ant-table-cell-fix-right-first::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > thead
-  > tr
-  > .ant-table-cell-fix-right-first::after {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-body
-  > table
-  > tbody
-  > tr
-  > td
-  > .ant-table-expanded-row-fixed::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table
-  > tbody
-  > tr
-  > td
-  > .ant-table-expanded-row-fixed::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table
-  > tbody
-  > tr
-  > td
-  > .ant-table-expanded-row-fixed::after,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-summary
-  > table
-  > tbody
-  > tr
-  > td
-  > .ant-table-expanded-row-fixed::after {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-content
-  > table,
-[data-theme='dark']
-  .ant-table.ant-table-bordered
-  > .ant-table-container
-  > .ant-table-header
-  > table {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-table.ant-table-bordered > .ant-table-footer {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-table-cell-scrollbar {
-  box-shadow: 0 1px 0 1px #1d1d1d;
-}
-
-[data-theme='dark'] .ant-table-resize-handle-line {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-table {
-  background: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-table-footer {
-  background: rgb(255 255 255 / 4%);
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-table-thead > tr > th {
-  border-bottom: 1px solid #303030;
-  background: #1d1d1d;
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark']
-  .ant-table-thead
-  > tr
-  > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(
-    [colspan]
-  )::before {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-table-tbody > tr > td {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-table-tbody > tr.ant-table-row:hover > td,
-[data-theme='dark'] .ant-table-tbody > tr > td.ant-table-cell-row-hover {
-  background: #262626;
-}
-
-[data-theme='dark'] .ant-table-tbody > tr.ant-table-row-selected > td {
-  border-color: rgb(0 0 0 / 3%);
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-table-tbody > tr.ant-table-row-selected:hover > td {
-  background: rgb(250 250 250 / 8%);
-}
-
-[data-theme='dark'] .ant-table-summary {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-table-summary > tr > td,
-[data-theme='dark'] .ant-table-summary > tr > th {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-table-thead th.ant-table-column-has-sorters:hover {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-table-thead th.ant-table-column-has-sorters:hover::before {
-  background-color: transparent !important;
-}
-
-[data-theme='dark'] .ant-table-thead th.ant-table-column-has-sorters.ant-table-cell-fix-left:hover,
-[data-theme='dark']
-  .ant-table-thead
-  th.ant-table-column-has-sorters.ant-table-cell-fix-right:hover {
-  background: #222;
-}
-
-[data-theme='dark'] .ant-table-thead th.ant-table-column-sort {
-  background: #262626;
-}
-
-[data-theme='dark'] .ant-table-thead th.ant-table-column-sort::before {
-  background-color: transparent !important;
-}
-
-[data-theme='dark'] td.ant-table-column-sort {
-  background: rgb(255 255 255 / 1%);
-}
-
-[data-theme='dark'] .ant-table-column-sorter {
-  color: #bfbfbf;
-}
-
-[data-theme='dark'] .ant-table-column-sorter-down.active,
-[data-theme='dark'] .ant-table-column-sorter-up.active {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-table-column-sorters:hover .ant-table-column-sorter {
-  color: #a6a6a6;
-}
-
-[data-theme='dark'] .ant-table-filter-trigger {
-  color: #bfbfbf;
-}
-
-[data-theme='dark'] .ant-table-filter-trigger:hover {
-  background: #434343;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-table-filter-trigger.active {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-table-filter-dropdown {
-  background-color: #1f1f1f;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-table-filter-dropdown .ant-dropdown-menu:empty::after {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-table-filter-dropdown-tree
-  .ant-tree-treenode
-  .ant-tree-node-content-wrapper:hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-table-filter-dropdown-tree
-  .ant-tree-treenode-checkbox-checked
-  .ant-tree-node-content-wrapper,
-[data-theme='dark']
-  .ant-table-filter-dropdown-tree
-  .ant-tree-treenode-checkbox-checked
-  .ant-tree-node-content-wrapper:hover {
-  background-color: #11263c;
-}
-
-[data-theme='dark'] .ant-table-filter-dropdown-search {
-  border-bottom: 1px #303030;
-}
-
-[data-theme='dark'] .ant-table-filter-dropdown-search-input .anticon {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-table-filter-dropdown-btns {
-  border-top: 1px solid #303030;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] table tr th.ant-table-selection-column::after {
-  background-color: transparent !important;
-}
-
-[data-theme='dark'] .ant-table-selection-extra .anticon {
-  color: #bfbfbf;
-}
-
-[data-theme='dark'] .ant-table-selection-extra .anticon:hover {
-  color: #a6a6a6;
-}
-
-[data-theme='dark'] .ant-table-row-expand-icon {
-  border: 1px solid #303030;
-  background: 0 0;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-table-row-expand-icon:focus,
-[data-theme='dark'] .ant-table-row-expand-icon:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-table-row-expand-icon:active {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-table-row-expand-icon-spaced {
-  background: 0 0;
-}
-
-[data-theme='dark'] tr.ant-table-expanded-row:hover > td,
-[data-theme='dark'] tr.ant-table-expanded-row > td {
-  background: #1d1d1d;
-}
-
-[data-theme='dark'] .ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-table-tbody > tr.ant-table-placeholder:hover > td {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-table-cell-fix-left,
-[data-theme='dark'] .ant-table-cell-fix-right {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-table-ping-left .ant-table-cell-fix-left-last::before {
-  background-color: transparent !important;
-}
-
-[data-theme='dark'] .ant-table-sticky-holder {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-table-sticky-scroll {
-  border-top: 1px solid #303030;
-  background: #fcfcfc;
-}
-
-[data-theme='dark'] .ant-table-sticky-scroll-bar {
-  background-color: rgb(0 0 0 / 35%);
-}
-
-[data-theme='dark'] .ant-table-sticky-scroll-bar:hover {
-  background-color: rgb(0 0 0 / 80%);
-}
-
-[data-theme='dark'] .ant-table-sticky-scroll-bar-active {
-  background-color: rgb(0 0 0 / 80%);
-}
-
-[data-theme='dark'] .ant-progress {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-progress-steps-item {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-progress-steps-item-active {
-  background: #0960bd;
-}
-
-[data-theme='dark'] .ant-progress-inner {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-progress-circle-trail {
-  stroke: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-progress-inner:not(.ant-progress-circle-gradient)
-  .ant-progress-circle-path {
-  stroke: #0960bd;
-}
-
-[data-theme='dark'] .ant-progress-bg,
-[data-theme='dark'] .ant-progress-success-bg {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-progress-success-bg {
-  background-color: #55d187;
-}
-
-[data-theme='dark'] .ant-progress-text {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-progress-status-active .ant-progress-bg::before {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-progress-status-exception .ant-progress-bg {
-  background-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-progress-status-exception .ant-progress-text {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-progress-status-exception
-  .ant-progress-inner:not(.ant-progress-circle-gradient)
-  .ant-progress-circle-path {
-  stroke: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-progress-status-success .ant-progress-bg {
-  background-color: #55d187;
-}
-
-[data-theme='dark'] .ant-progress-status-success .ant-progress-text {
-  color: #55d187;
-}
-
-[data-theme='dark']
-  .ant-progress-status-success
-  .ant-progress-inner:not(.ant-progress-circle-gradient)
-  .ant-progress-circle-path {
-  stroke: #55d187;
-}
-
-[data-theme='dark'] .ant-progress-circle .ant-progress-inner {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-progress-circle .ant-progress-text {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-progress-circle.ant-progress-status-exception .ant-progress-text {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-progress-circle.ant-progress-status-success .ant-progress-text {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-timeline {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-timeline-item-tail {
-  border-left: 2px solid #303030;
-}
-
-[data-theme='dark'] .ant-timeline-item-pending .ant-timeline-item-head {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-timeline-item-head {
-  border: 2px solid transparent;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .ant-timeline-item-head-blue {
-  border-color: #0960bd;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-timeline-item-head-red {
-  border-color: #ed6f6f;
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-timeline-item-head-green {
-  border-color: #55d187;
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-timeline-item-head-gray {
-  border-color: rgb(255 255 255 / 30%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-timeline.ant-timeline-pending
-  .ant-timeline-item-last
-  .ant-timeline-item-tail {
-  border-left: 2px dotted #303030;
-}
-
-[data-theme='dark']
-  .ant-timeline.ant-timeline-reverse
-  .ant-timeline-item-pending
-  .ant-timeline-item-tail {
-  border-left: 2px dotted #303030;
-}
-
-[data-theme='dark'] .ant-timeline-rtl .ant-timeline-item-tail {
-  border-right: 2px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-timeline-rtl.ant-timeline.ant-timeline-pending
-  .ant-timeline-item-last
-  .ant-timeline-item-tail {
-  border-right: 2px dotted #303030;
-}
-
-[data-theme='dark']
-  .ant-timeline-rtl.ant-timeline.ant-timeline-reverse
-  .ant-timeline-item-pending
-  .ant-timeline-item-tail {
-  border-right: 2px dotted #303030;
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper {
-  border: 1px solid #303030;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper-focused,
-[data-theme='dark'] .ant-input-number-affix-wrapper:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper[disabled] {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper-borderless,
-[data-theme='dark'] .ant-input-number-affix-wrapper-borderless-disabled,
-[data-theme='dark'] .ant-input-number-affix-wrapper-borderless-focused,
-[data-theme='dark'] .ant-input-number-affix-wrapper-borderless:focus,
-[data-theme='dark'] .ant-input-number-affix-wrapper-borderless:hover,
-[data-theme='dark'] .ant-input-number-affix-wrapper-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-input-number-affix-wrapper:not(.ant-input-number-affix-wrapper-disabled):hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-number-affix-wrapper-disabled .ant-input-number[disabled] {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-input-number {
-  border: 1px solid #303030;
-  background-color: transparent;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input-number::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-focused,
-[data-theme='dark'] .ant-input-number:focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-input-number[disabled] {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number[disabled]:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-number-borderless,
-[data-theme='dark'] .ant-input-number-borderless-disabled,
-[data-theme='dark'] .ant-input-number-borderless-focused,
-[data-theme='dark'] .ant-input-number-borderless:focus,
-[data-theme='dark'] .ant-input-number-borderless:hover,
-[data-theme='dark'] .ant-input-number-borderless[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-input-number-group {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-input-number-group-addon {
-  border: 1px solid #303030;
-  background-color: rgb(255 255 255 / 4%);
-  color: #c9d1d9;
-}
-
-[data-theme='dark']
-  .ant-input-number-group-addon
-  .ant-select.ant-select-single:not(.ant-select-customize-input)
-  .ant-select-selector {
-  border: 1px solid transparent;
-}
-
-[data-theme='dark'] .ant-input-number-group-addon .ant-select-focused .ant-select-selector,
-[data-theme='dark'] .ant-input-number-group-addon .ant-select-open .ant-select-selector {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-input-number-group-addon .ant-cascader-picker {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-input-number-handler {
-  border-left: 1px solid #303030;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-input-number-handler:active {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-input-number-handler:hover .ant-input-number-handler-down-inner,
-[data-theme='dark'] .ant-input-number-handler:hover .ant-input-number-handler-up-inner {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-number-handler-down-inner,
-[data-theme='dark'] .ant-input-number-handler-up-inner {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-input-number:hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-input-number-focused {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-input-number-disabled {
-  border-color: #303030;
-  background-color: rgb(255 255 255 / 8%);
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-disabled:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-input-number-input {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-input-number-input::placeholder {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-handler-wrap {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-input-number-handler-down {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-input-number-handler-down-disabled:hover
-  .ant-input-number-handler-down-inner,
-[data-theme='dark'] .ant-input-number-handler-up-disabled:hover .ant-input-number-handler-up-inner {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-input-number-out-of-range input {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-input-number-rtl .ant-input-number-handler {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-transfer-customize-list
-  .ant-table-wrapper
-  .ant-table-small
-  > .ant-table-content
-  > .ant-table-body
-  > table
-  > .ant-table-thead
-  > tr
-  > th {
-  background: #1d1d1d;
-}
-
-[data-theme='dark']
-  .ant-transfer-customize-list
-  .ant-table-wrapper
-  .ant-table-small
-  > .ant-table-content
-  .ant-table-row:last-child
-  td {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-transfer-customize-list .ant-input[disabled] {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-transfer {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-transfer-disabled .ant-transfer-list {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-transfer-list {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-transfer-list-search .anticon-search {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-transfer-list-header {
-  border-bottom: 1px solid #303030;
-  background: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-transfer-list-content-item-remove {
-  color: #303030;
-}
-
-[data-theme='dark'] .ant-transfer-list-content-item-remove:focus,
-[data-theme='dark'] .ant-transfer-list-content-item-remove:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-transfer-list-content-item-remove:active {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-transfer-list-content-item-remove:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark']
-  .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
-  background-color: #262626;
-}
-
-[data-theme='dark']
-  .ant-transfer-list-content-item:not(
-    .ant-transfer-list-content-item-disabled
-  ).ant-transfer-list-content-item-checked:hover {
-  background-color: #0e161f;
-}
-
-[data-theme='dark']
-  .ant-transfer-list-content-show-remove
-  .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-transfer-list-content-item-checked {
-  background-color: #111b26;
-}
-
-[data-theme='dark'] .ant-transfer-list-content-item-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-transfer-list-pagination {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-transfer-list-body-not-found {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-transfer-list-footer {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-tree.ant-tree-directory .ant-tree-treenode:hover::before {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-tree.ant-tree-directory
-  .ant-tree-treenode
-  .ant-tree-node-content-wrapper:hover {
-  background: 0 0;
-}
-
-[data-theme='dark']
-  .ant-tree.ant-tree-directory
-  .ant-tree-treenode
-  .ant-tree-node-content-wrapper.ant-tree-node-selected {
-  background: 0 0;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tree.ant-tree-directory .ant-tree-treenode-selected::before,
-[data-theme='dark'] .ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before {
-  background: #0960bd;
-}
-
-[data-theme='dark'] .ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher {
-  color: #fff;
-}
-
-[data-theme='dark']
-  .ant-tree.ant-tree-directory
-  .ant-tree-treenode-selected
-  .ant-tree-node-content-wrapper {
-  background: 0 0;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-tree-checkbox {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner,
-[data-theme='dark'] .ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,
-[data-theme='dark'] .ant-tree-checkbox:hover .ant-tree-checkbox-inner {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-checked::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-inner {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
-  border-color: #0960bd;
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-tree-checkbox-disabled.ant-tree-checkbox-checked
-  .ant-tree-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
-  border-color: #303030 !important;
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-tree-checkbox-disabled + span {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tree-checkbox-wrapper {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-group {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
-  border-color: #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after {
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled
-  .ant-tree-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-  background-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tree {
-  background: 0 0;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-tree-focused:not(:hover):not(.ant-tree-active-focused) {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-tree.ant-tree-block-node
-  .ant-tree-list-holder-inner
-  .ant-tree-treenode.dragging::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper:hover {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-treenode-active .ant-tree-node-content-wrapper {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-tree-switcher-loading-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tree-switcher-leaf-line::before {
-  border-right: 1px solid #d9d9d9;
-}
-
-[data-theme='dark'] .ant-tree-switcher-leaf-line::after {
-  border-bottom: 1px solid #d9d9d9;
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-node-content-wrapper {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-node-content-wrapper:hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
-  background-color: #11263c;
-}
-
-[data-theme='dark'] .ant-tree-unselectable .ant-tree-node-content-wrapper:hover {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-tree-node-content-wrapper .ant-tree-drop-indicator {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-tree-node-content-wrapper .ant-tree-drop-indicator::after {
-  border: 2px solid #0960bd;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-tree .ant-tree-treenode.drop-container > [draggable] {
-  box-shadow: 0 0 0 2px #0960bd;
-}
-
-[data-theme='dark'] .ant-tree-show-line .ant-tree-indent-unit::before {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-tree-show-line .ant-tree-switcher {
-  background: #151515;
-}
-
-[data-theme='dark'] .ant-tree-rtl.ant-tree-show-line .ant-tree-indent-unit::before {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-upload {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-select-picture-card {
-  border: 1px dashed #303030;
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-select-picture-card:hover {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-upload-disabled.ant-upload.ant-upload-select-picture-card:hover {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag {
-  border: 1px dashed #303030;
-  background: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) {
-  border-color: #004496;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag p.ant-upload-text {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag p.ant-upload-hint {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag .anticon-plus {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag .anticon-plus:hover {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-upload.ant-upload-drag:hover .anticon-plus {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-upload-list {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-upload-list-item-card-actions .anticon {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-upload-list-item-info .ant-upload-text-icon .anticon,
-[data-theme='dark'] .ant-upload-list-item-info .anticon-loading .anticon {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-upload-list-item .anticon-close {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-upload-list-item .anticon-close:hover {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-upload-list-item:hover .ant-upload-list-item-info {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-upload-list-item-error,
-[data-theme='dark'] .ant-upload-list-item-error .ant-upload-list-item-name,
-[data-theme='dark'] .ant-upload-list-item-error .ant-upload-text-icon > .anticon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-upload-list-item-error .ant-upload-list-item-card-actions .anticon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-upload-list-picture .ant-upload-list-item,
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-upload-list-picture .ant-upload-list-item:hover,
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item:hover {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-upload-list-picture .ant-upload-list-item-error,
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item-error {
-  border-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info,
-[data-theme='dark']
-  .ant-upload-list-picture-card
-  .ant-upload-list-item:hover
-  .ant-upload-list-item-info {
-  background: 0 0;
-}
-
-[data-theme='dark']
-  .ant-upload-list-picture
-  .ant-upload-list-item-error
-  .ant-upload-list-item-thumbnail
-  .anticon
-  svg
-  path[fill='#e6f7ff'],
-[data-theme='dark']
-  .ant-upload-list-picture-card
-  .ant-upload-list-item-error
-  .ant-upload-list-item-thumbnail
-  .anticon
-  svg
-  path[fill='#e6f7ff'] {
-  fill: #2b1316;
-}
-
-[data-theme='dark']
-  .ant-upload-list-picture
-  .ant-upload-list-item-error
-  .ant-upload-list-item-thumbnail
-  .anticon
-  svg
-  path[fill='#1890ff'],
-[data-theme='dark']
-  .ant-upload-list-picture-card
-  .ant-upload-list-item-error
-  .ant-upload-list-item-thumbnail
-  .anticon
-  svg
-  path[fill='#1890ff'] {
-  fill: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item-info::before {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete,
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download,
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye {
-  color: rgb(255 255 255 / 85%);
-}
-
-[data-theme='dark']
-  .ant-upload-list-picture-card
-  .ant-upload-list-item-actions
-  .anticon-delete:hover,
-[data-theme='dark']
-  .ant-upload-list-picture-card
-  .ant-upload-list-item-actions
-  .anticon-download:hover,
-[data-theme='dark'] .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye:hover {
-  color: #fff;
-}
-
-[data-theme='dark']
-  .ant-upload-list-picture-card
-  .ant-upload-list-item-uploading.ant-upload-list-item {
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-layout {
-  background: #000;
-}
-
-[data-theme='dark'] .ant-layout-header {
-  background: #1f1f1f;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-layout-footer {
-  background: #000;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-layout-sider {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-layout-sider-trigger {
-  background: #262626;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-layout-sider-zero-width-trigger {
-  background: #1f1f1f;
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-layout-sider-zero-width-trigger::after {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-layout-sider-zero-width-trigger:hover::after {
-  background: rgb(255 255 255 / 10%);
-}
-
-[data-theme='dark'] .ant-layout-sider-light {
-  background: #fff;
-}
-
-[data-theme='dark'] .ant-layout-sider-light .ant-layout-sider-trigger {
-  background: #fff;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-layout-sider-light .ant-layout-sider-zero-width-trigger {
-  background: #fff;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-anchor {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-anchor-wrapper {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-anchor-ink::before {
-  background-color: #303030;
-}
-
-[data-theme='dark'] .ant-anchor-ink-ball {
-  border: 2px solid #0960bd;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .ant-anchor-link-title {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-anchor-link-active > .ant-anchor-link-title {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-comment {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-comment-content-author-name {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-comment-content-author-name > * {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-comment-content-author-name > :hover {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-comment-content-author-time {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-comment-actions > li {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-comment-actions > li > span {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-comment-actions > li > span:hover {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-drawer-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-drawer-content {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer-close {
-  background: 0 0;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-drawer-close:focus,
-[data-theme='dark'] .ant-drawer-close:hover {
-  color: rgb(255 255 255 / 75%);
-}
-
-[data-theme='dark'] .ant-drawer-header {
-  border-bottom: 1px solid #303030;
-  background: #1f1f1f;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-drawer-footer {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-drawer-mask {
-  background-color: rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] .ant-drawer .ant-picker-clear {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-anchor-wrapper,
-[data-theme='dark'] .ant-drawer .ant-card,
-[data-theme='dark'] .ant-drawer .ant-collapse-content,
-[data-theme='dark'] .ant-drawer .ant-picker-clear,
-[data-theme='dark'] .ant-drawer .ant-slider-handle,
-[data-theme='dark'] .ant-drawer .ant-timeline-item-head {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-transfer-list-header {
-  border-bottom: 1px solid #3a3a3a;
-  background: #1f1f1f;
-}
-
-[data-theme='dark']
-  .ant-drawer
-  .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-drawer tr.ant-table-expanded-row:hover > td,
-[data-theme='dark'] .ant-drawer tr.ant-table-expanded-row > td {
-  background: #272727;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-small thead > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table .ant-table-row-expand-icon {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table tfoot > tr > td,
-[data-theme='dark'] .ant-drawer .ant-table tfoot > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table thead > tr > th {
-  border-bottom: 1px solid #3a3a3a;
-  background-color: #272727;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table tbody > tr > td {
-  border-bottom: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table tbody > tr > td.ant-table-cell-fix-left,
-[data-theme='dark'] .ant-drawer .ant-table tbody > tr > td.ant-table-cell-fix-right {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table tbody > tr.ant-table-row:hover > td {
-  background: #303030;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered .ant-table-title {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered tbody > tr > td,
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered tfoot > tr > td,
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered tfoot > tr > th,
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered thead > tr > th {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-drawer
-  .ant-table.ant-table-bordered
-  .ant-table-cell-fix-right-first::after {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark']
-  .ant-drawer
-  .ant-table.ant-table-bordered
-  table
-  thead
-  > tr:not(:last-child)
-  > th {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered .ant-table-container {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered .ant-table-expanded-row-fixed::after {
-  border-right: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table.ant-table-bordered .ant-table-footer {
-  border: 1px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-table .ant-table-filter-trigger-container-open {
-  background-color: #525252;
-}
-
-[data-theme='dark'] .ant-drawer .ant-picker-calendar-full {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-picker-calendar-full .ant-picker-panel {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark']
-  .ant-drawer
-  .ant-picker-calendar-full
-  .ant-picker-panel
-  .ant-picker-calendar-date {
-  border-top: 2px solid #3a3a3a;
-}
-
-[data-theme='dark'] .ant-drawer .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
-  border-bottom: 1px solid #1f1f1f;
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-badge-count {
-  box-shadow: 0 0 0 1px #1f1f1f;
-}
-
-[data-theme='dark'] .ant-drawer .ant-tree-show-line .ant-tree-switcher {
-  background: #1f1f1f;
-}
-
-[data-theme='dark'] .ant-empty-normal {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-empty-small {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-empty-img-default-ellipse {
-  fill: #fff;
-}
-
-[data-theme='dark'] .ant-empty-img-default-path-1 {
-  fill: #262626;
-}
-
-[data-theme='dark'] .ant-empty-img-default-path-3 {
-  fill: #595959;
-}
-
-[data-theme='dark'] .ant-empty-img-default-path-4 {
-  fill: #434343;
-}
-
-[data-theme='dark'] .ant-empty-img-default-path-5 {
-  fill: #595959;
-}
-
-[data-theme='dark'] .ant-empty-img-default-g {
-  fill: #434343;
-}
-
-[data-theme='dark'] .ant-empty-img-simple-ellipse {
-  fill: #fff;
-}
-
-[data-theme='dark'] .ant-empty-img-simple-g {
-  stroke: #434343;
-}
-
-[data-theme='dark'] .ant-empty-img-simple-path {
-  stroke: #434343;
-  fill: #262626;
-}
-
-[data-theme='dark'] .ant-statistic {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-statistic-title {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-statistic-content {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-result-success .ant-result-icon > .anticon {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-result-error .ant-result-icon > .anticon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-result-info .ant-result-icon > .anticon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-result-warning .ant-result-icon > .anticon {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-result-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-result-subtitle {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-result-content {
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-list .ant-card {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-list {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-list-empty-text {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-list-item {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-list-item-meta-content {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-list-item-meta-title {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-list-item-meta-title > a {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-list-item-meta-title > a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-list-item-meta-description {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-list-item-action > li {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-list-item-action-split {
-  background-color: #303030;
-}
-
-[data-theme='dark'] .ant-list-header {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-list-footer {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-list-empty {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-list-split .ant-list-item {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-list-split .ant-list-header {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-list-split.ant-list-empty .ant-list-footer {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark']
-  .ant-list-split.ant-list-something-after-last-item
-  .ant-spin-container
-  > .ant-list-items
-  > .ant-list-item:last-child {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-list-vertical .ant-list-item-meta-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-list-bordered {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-page-header {
-  background-color: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-page-header-ghost {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-page-header-back-button {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-page-header-back-button:focus,
-[data-theme='dark'] .ant-page-header-back-button:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-page-header-back-button:active {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-page-header-heading-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-page-header-heading-sub-title {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-form-item .ant-upload {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-form-item .ant-upload.ant-upload-drag {
-  background: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-form-item-explain-error {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-explain-warning {
-  color: #efbd47;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-success.ant-form-item-has-feedback
-  .ant-form-item-children-icon {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-form-item-split {
-  color: #efbd47;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper:hover,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper:hover {
-  border-color: #efbd47;
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper-focused,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper:focus,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper-focused,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper:focus {
-  border-color: #efbd47;
-  box-shadow: 0 0 0 2px rgb(239 189 71 / 20%);
-}
-
-[data-theme='dark']
-  .ant-form-item-has-warning
-  .ant-calendar-picker-open
-  .ant-calendar-picker-input {
-  border-color: #efbd47;
-  box-shadow: 0 0 0 2px rgb(239 189 71 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-number-prefix,
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-prefix {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-group-addon,
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-number-group-addon {
-  border-color: #efbd47;
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .has-feedback {
-  color: #efbd47;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-warning.ant-form-item-has-feedback
-  .ant-form-item-children-icon {
-  color: #efbd47;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-warning
-  .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input)
-  .ant-select-selector {
-  border-color: #efbd47 !important;
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-warning
-  .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-focused
-  .ant-select-selector,
-[data-theme='dark']
-  .ant-form-item-has-warning
-  .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-open
-  .ant-select-selector {
-  border-color: #efbd47;
-  box-shadow: 0 0 0 2px rgb(239 189 71 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-number,
-[data-theme='dark'] .ant-form-item-has-warning .ant-picker {
-  border-color: #efbd47;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-number-focused,
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-number:focus,
-[data-theme='dark'] .ant-form-item-has-warning .ant-picker-focused,
-[data-theme='dark'] .ant-form-item-has-warning .ant-picker:focus {
-  border-color: #efbd47;
-  box-shadow: 0 0 0 2px rgb(239 189 71 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-input-number:not([disabled]):hover,
-[data-theme='dark'] .ant-form-item-has-warning .ant-picker:not([disabled]):hover {
-  border-color: #efbd47;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-form-item-has-warning .ant-cascader-picker:focus .ant-cascader-input {
-  border-color: #efbd47;
-  box-shadow: 0 0 0 2px rgb(239 189 71 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-form-item-split {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper:hover,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper:hover {
-  border-color: #ed6f6f;
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper-focused,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-affix-wrapper-disabled):not(
-    .ant-input-affix-wrapper-borderless
-  ).ant-input-affix-wrapper:focus,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper-focused,
-[data-theme='dark']
-  .ant-form-item-has-error
-  :not(.ant-input-number-affix-wrapper-disabled):not(
-    .ant-input-number-affix-wrapper-borderless
-  ).ant-input-number-affix-wrapper:focus {
-  border-color: #ed6f6f;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-calendar-picker-open .ant-calendar-picker-input {
-  border-color: #ed6f6f;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-input-number-prefix,
-[data-theme='dark'] .ant-form-item-has-error .ant-input-prefix {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-input-group-addon,
-[data-theme='dark'] .ant-form-item-has-error .ant-input-number-group-addon {
-  border-color: #ed6f6f;
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .has-feedback {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error.ant-form-item-has-feedback
-  .ant-form-item-children-icon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input)
-  .ant-select-selector {
-  border-color: #ed6f6f !important;
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-focused
-  .ant-select-selector,
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-open
-  .ant-select-selector {
-  border-color: #ed6f6f;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-select.ant-select-auto-complete .ant-input:focus {
-  border-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-input-number,
-[data-theme='dark'] .ant-form-item-has-error .ant-picker {
-  border-color: #ed6f6f;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-input-number-focused,
-[data-theme='dark'] .ant-form-item-has-error .ant-input-number:focus,
-[data-theme='dark'] .ant-form-item-has-error .ant-picker-focused,
-[data-theme='dark'] .ant-form-item-has-error .ant-picker:focus {
-  border-color: #ed6f6f;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-input-number:not([disabled]):hover,
-[data-theme='dark'] .ant-form-item-has-error .ant-picker:not([disabled]):hover {
-  border-color: #ed6f6f;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-mention-wrapper .ant-mention-editor,
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-mention-wrapper
-  .ant-mention-editor:not([disabled]):hover {
-  border-color: #ed6f6f;
-  background-color: transparent;
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-mention-wrapper
-  .ant-mention-editor:not([disabled]):focus,
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-mention-wrapper.ant-mention-active:not([disabled])
-  .ant-mention-editor {
-  border-color: #ed6f6f;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark']
-  .ant-form-item-has-error
-  .ant-cascader-picker:hover
-  .ant-cascader-picker-label:hover
-  + .ant-cascader-input.ant-input {
-  border-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-cascader-picker:focus .ant-cascader-input {
-  border-color: #ed6f6f;
-  background-color: transparent;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-transfer-list {
-  border-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-transfer-list-search:not([disabled]) {
-  border-color: #303030;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-transfer-list-search:not([disabled]):hover {
-  border-color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-transfer-list-search:not([disabled]):focus {
-  border-color: #0960bd;
-  box-shadow: 0 0 0 2px rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-radio-button-wrapper {
-  border-color: #ed6f6f !important;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-radio-button-wrapper:not(:first-child)::before {
-  background-color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-mentions {
-  border-color: #ed6f6f !important;
-}
-
-[data-theme='dark'] .ant-form-item-has-error .ant-mentions-focused,
-[data-theme='dark'] .ant-form-item-has-error .ant-mentions:focus {
-  border-color: #ed6f6f;
-  box-shadow: 0 0 0 2px rgb(237 111 111 / 20%);
-}
-
-[data-theme='dark']
-  .ant-form-item-is-validating.ant-form-item-has-feedback
-  .ant-form-item-children-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-form {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-form legend {
-  border-bottom: 1px solid #303030;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-form output {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-form-item {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-form-item-label > label {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark']
-  .ant-form-item-label
-  > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
-  color: #a71d25;
-}
-
-[data-theme='dark'] .ant-form-item-label > label .ant-form-item-optional {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-form-item-label > label .ant-form-item-tooltip {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-form-item-explain,
-[data-theme='dark'] .ant-form-item-extra {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-skeleton-header .ant-skeleton-avatar {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-content .ant-skeleton-title {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-content .ant-skeleton-paragraph > li {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-element .ant-skeleton-button {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-element .ant-skeleton-avatar {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-element .ant-skeleton-input {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-element .ant-skeleton-image {
-  background: rgb(190 190 190 / 20%);
-}
-
-[data-theme='dark'] .ant-skeleton-element .ant-skeleton-image-path {
-  fill: #bfbfbf;
-}
-
-[data-theme='dark'] .ant-image-img-placeholder {
-  background-color: #f5f5f5;
-}
-
-[data-theme='dark'] .ant-image-mask {
-  background: rgb(0 0 0 / 50%);
-  color: #fff;
-}
-
-[data-theme='dark'] .ant-image-preview-mask {
-  background-color: rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] .ant-image-preview-operations {
-  background: rgb(0 0 0 / 10%);
-  color: #c9d1d9;
-  color: rgb(255 255 255 / 85%);
-}
-
-[data-theme='dark'] .ant-image-preview-operations-operation-disabled {
-  color: rgb(255 255 255 / 25%);
-}
-
-[data-theme='dark'] .ant-image-preview-switch-left,
-[data-theme='dark'] .ant-image-preview-switch-right {
-  background: rgb(0 0 0 / 10%);
-  color: rgb(255 255 255 / 85%);
-}
-
-[data-theme='dark'] .ant-image-preview-switch-left-disabled,
-[data-theme='dark'] .ant-image-preview-switch-right-disabled {
-  color: rgb(255 255 255 / 25%);
-}
-
-[data-theme='dark'] .ant-typography {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-typography.ant-typography-secondary {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-typography.ant-typography-success {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-typography.ant-typography-warning {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-typography.ant-typography-danger {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] a.ant-typography.ant-typography-danger:active,
-[data-theme='dark'] a.ant-typography.ant-typography-danger:focus,
-[data-theme='dark'] a.ant-typography.ant-typography-danger:hover {
-  color: #faa19d;
-}
-
-[data-theme='dark'] .ant-typography.ant-typography-disabled {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-typography h1,
-[data-theme='dark'] h1.ant-typography {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-typography h2,
-[data-theme='dark'] h2.ant-typography {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-typography h3,
-[data-theme='dark'] h3.ant-typography {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-typography h4,
-[data-theme='dark'] h4.ant-typography {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-typography h5,
-[data-theme='dark'] h5.ant-typography {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-typography a,
-[data-theme='dark'] a.ant-typography {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-typography a:focus,
-[data-theme='dark'] .ant-typography a:hover,
-[data-theme='dark'] a.ant-typography:focus,
-[data-theme='dark'] a.ant-typography:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-typography a:active,
-[data-theme='dark'] a.ant-typography:active {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-typography a.ant-typography-disabled,
-[data-theme='dark'] .ant-typography a[disabled],
-[data-theme='dark'] a.ant-typography.ant-typography-disabled,
-[data-theme='dark'] a.ant-typography[disabled] {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-typography a.ant-typography-disabled:active,
-[data-theme='dark'] .ant-typography a.ant-typography-disabled:hover,
-[data-theme='dark'] .ant-typography a[disabled]:active,
-[data-theme='dark'] .ant-typography a[disabled]:hover,
-[data-theme='dark'] a.ant-typography.ant-typography-disabled:active,
-[data-theme='dark'] a.ant-typography.ant-typography-disabled:hover,
-[data-theme='dark'] a.ant-typography[disabled]:active,
-[data-theme='dark'] a.ant-typography[disabled]:hover {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-typography code {
-  border: 1px solid rgb(100 100 100 / 20%);
-  background: rgb(150 150 150 / 10%);
-}
-
-[data-theme='dark'] .ant-typography kbd {
-  border: 1px solid rgb(100 100 100 / 20%);
-  background: rgb(150 150 150 / 6%);
-}
-
-[data-theme='dark'] .ant-typography mark {
-  background-color: #5a4315;
-}
-
-[data-theme='dark'] .ant-typography-copy,
-[data-theme='dark'] .ant-typography-edit,
-[data-theme='dark'] .ant-typography-expand {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-typography-copy:focus,
-[data-theme='dark'] .ant-typography-copy:hover,
-[data-theme='dark'] .ant-typography-edit:focus,
-[data-theme='dark'] .ant-typography-edit:hover,
-[data-theme='dark'] .ant-typography-expand:focus,
-[data-theme='dark'] .ant-typography-expand:hover {
-  color: #2a7dc9;
-}
-
-[data-theme='dark'] .ant-typography-copy:active,
-[data-theme='dark'] .ant-typography-edit:active,
-[data-theme='dark'] .ant-typography-expand:active {
-  color: #004496;
-}
-
-[data-theme='dark'] .ant-typography-copy-success,
-[data-theme='dark'] .ant-typography-copy-success:focus,
-[data-theme='dark'] .ant-typography-copy-success:hover {
-  color: #55d187;
-}
-
-[data-theme='dark'] .ant-typography-edit-content-confirm {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ant-typography pre {
-  border: 1px solid rgb(100 100 100 / 20%);
-  background: rgb(150 150 150 / 10%);
-}
-
-[data-theme='dark'] .ant-typography pre code {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-typography blockquote {
-  border-left: 4px solid rgb(100 100 100 / 20%);
-}
-
-[data-theme='dark'] .ant-descriptions-title {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-descriptions-extra {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-descriptions-item-label {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .ant-descriptions-item-content {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-descriptions-bordered .ant-descriptions-view {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-descriptions-bordered .ant-descriptions-item-content,
-[data-theme='dark'] .ant-descriptions-bordered .ant-descriptions-item-label {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-descriptions-bordered .ant-descriptions-item-label {
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .ant-descriptions-bordered .ant-descriptions-row {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-descriptions-rtl.ant-descriptions-bordered .ant-descriptions-item-content,
-[data-theme='dark'] .ant-descriptions-rtl.ant-descriptions-bordered .ant-descriptions-item-label {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-input:focus + .ant-select-tree-checkbox-inner,
-[data-theme='dark'] .ant-select-tree-checkbox-wrapper:hover .ant-select-tree-checkbox-inner,
-[data-theme='dark'] .ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner {
-  border-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-checked::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-inner {
-  border: 1px solid #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner::after {
-  border: 2px solid #fff;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
-  border-color: #0960bd;
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-select-tree-checkbox-disabled.ant-select-tree-checkbox-checked
-  .ant-select-tree-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner {
-  border-color: #303030 !important;
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-disabled + span {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-wrapper {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-group {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner {
-  border-color: #303030;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner::after {
-  background-color: #0960bd;
-}
-
-[data-theme='dark']
-  .ant-select-tree-checkbox-indeterminate.ant-select-tree-checkbox-disabled
-  .ant-select-tree-checkbox-inner::after {
-  border-color: rgb(255 255 255 / 30%);
-  background-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .ant-select-tree {
-  background: 0 0;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .ant-select-tree-focused:not(:hover):not(.ant-select-tree-active-focused) {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-select-tree.ant-select-tree-block-node
-  .ant-select-tree-list-holder-inner
-  .ant-select-tree-treenode.dragging::after {
-  border: 1px solid #0960bd;
-}
-
-[data-theme='dark']
-  .ant-select-tree
-  .ant-select-tree-treenode-disabled
-  .ant-select-tree-node-content-wrapper {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark']
-  .ant-select-tree
-  .ant-select-tree-treenode-disabled
-  .ant-select-tree-node-content-wrapper:hover {
-  background: 0 0;
-}
-
-[data-theme='dark']
-  .ant-select-tree
-  .ant-select-tree-treenode-active
-  .ant-select-tree-node-content-wrapper {
-  background: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark'] .ant-select-tree-switcher-loading-icon {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .ant-select-tree-switcher-leaf-line::before {
-  border-right: 1px solid #d9d9d9;
-}
-
-[data-theme='dark'] .ant-select-tree-switcher-leaf-line::after {
-  border-bottom: 1px solid #d9d9d9;
-}
-
-[data-theme='dark'] .ant-select-tree .ant-select-tree-node-content-wrapper {
-  background: 0 0;
-}
-
-[data-theme='dark'] .ant-select-tree .ant-select-tree-node-content-wrapper:hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-[data-theme='dark']
-  .ant-select-tree
-  .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-  background-color: #11263c;
-}
-
-[data-theme='dark'] .ant-select-tree-unselectable .ant-select-tree-node-content-wrapper:hover {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-select-tree-node-content-wrapper .ant-tree-drop-indicator {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .ant-select-tree-node-content-wrapper .ant-tree-drop-indicator::after {
-  border: 2px solid #0960bd;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .ant-select-tree .ant-select-tree-treenode.drop-container > [draggable] {
-  box-shadow: 0 0 0 2px #0960bd;
-}
-
-[data-theme='dark'] .ant-select-tree-show-line .ant-select-tree-indent-unit::before {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .ant-select-tree-show-line .ant-select-tree-switcher {
-  background: #151515;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .vben-login {
-  background-color: #293146;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .vben-login .ant-input,
-[data-theme='dark'] html[data-theme='dark'] .vben-login .ant-input-password {
-  background-color: #232a3b;
-}
-
-[data-theme='dark']
-  html[data-theme='dark']
-  .vben-login
-  .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
-  border: 1px solid #4a5569;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .vben-login-form {
-  background: 0 0 !important;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .vben-login .app-iconify {
-  color: #fff;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .fix-auto-fill input,
-[data-theme='dark'] html[data-theme='dark'] input.fix-auto-fill {
-  -webkit-text-fill-color: #c9d1d9 !important;
-}
-
-// @media (width <= 1200px) {
-//   [data-theme='dark'] {
-//     background-color: #293146;
-//   }
-// }
-
-[data-theme='dark'] .vben-login .vben-login-form {
-  background-color: #fff;
-}
-
-[data-theme='dark'] .vben-login .vben-app-logo__title {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-login .container .vben-app-logo__title {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-login-sign-in-way .anticon {
-  color: #888;
-}
-
-[data-theme='dark'] .vben-login-sign-in-way .anticon:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-login .ant-divider-inner-text {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .vben-app-logo.light {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-app-logo.light .vben-app-logo__title {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-app-logo.dark .vben-app-logo__title {
-  color: #fff;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .vben-dark-switch {
-  border: 1px solid #c4bcbc;
-}
-
-[data-theme='dark'] .vben-dark-switch {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-dark-switch-inner {
-  background-color: #fff;
-}
-
-[data-theme='dark'] .scroll-wrap {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .virtual-scroll-demo-wrap {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .virtual-scroll-demo__item {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .lazy-base-demo-wrap {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .demo-wrap {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .form-wrap {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .full-loading {
-  background-color: rgb(240 242 245 / 40%);
-}
-
-[data-theme='dark'] html[data-theme='dark'] .full-loading:not(.light) {
-  background-color: rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] .full-loading.dark {
-  background-color: rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] .step-form-content {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .desc-wrap {
-  background-color: #151515 !important;
-}
-
-[data-theme='dark'] .result-success {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .result-success__content {
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .result-error {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .result-error__content {
-  background-color: rgb(255 255 255 / 4%);
-}
-
-[data-theme='dark'] .result-error__content-icon {
-  color: #ff4d4f;
-}
-
-[data-theme='dark'] .account-center-col:not(:last-child):not(:last-child) {
-  border-right: 1px dashed rgb(206 206 206 / 50%);
-}
-
-[data-theme='dark'] .account-center-top {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .account-center-bottom {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .account-setting {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .account-setting .ant-tabs-tab-active {
-  background-color: #111b26;
-}
-
-[data-theme='dark'] .list-card__card-title {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .list-card__card-detail {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .demo {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .list-basic__top {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .list-basic__top-col:not(:last-child) {
-  border-right: 1px dashed #303030;
-}
-
-[data-theme='dark'] .list-basic__top-col div {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .list-basic__top-col p {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .list-basic__content {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .list-basic__content .extra {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .list-search__container {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .list-search__content {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .list-search__action-item {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .list-search__action-item:first-child,
-[data-theme='dark'] .list-search__action-item:nth-child(2) {
-  border-right: 1px solid #303030;
-}
-
-[data-theme='dark'] .list-search__time {
-  color: rgb(0 0 0 / 45%);
-}
-
-[data-theme='dark'] span.iconify {
-  background-color: #555;
-}
-
-[data-theme='dark'] .vben-default-layout {
-  background-color: #f4f7f9;
-}
-
-[data-theme='dark'] .vben-basic-table-header-cell__help {
-  color: rgb(0 0 0 / 65%) !important;
-}
-
-[data-theme='dark'] .ant-modal-confirm-body .ant-modal-confirm-content > * {
-  color: #909399;
-}
-
-[data-theme='dark'] .ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
-  color: #efbd47;
-}
-
-[data-theme='dark'] .ant-modal-confirm-confirm.success .ant-modal-confirm-body > .anticon {
-  color: #55d187;
-}
-
-[data-theme='dark'] .step1 h3 {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .step1 h4 {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .step1 p {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-app-search-modal {
-  background-color: rgb(0 0 0 / 25%);
-}
-
-[data-theme='dark'] .vben-app-search-modal-content {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-app-search-modal-input {
-  color: #1c1e21;
-}
-
-[data-theme='dark'] .vben-app-search-modal-input span[role='img'] {
-  color: #999;
-}
-
-[data-theme='dark'] .vben-app-search-modal-cancel {
-  color: #666;
-}
-
-[data-theme='dark'] .vben-app-search-modal-not-data {
-  color: #969faf;
-}
-
-[data-theme='dark'] .vben-app-search-modal-list__item {
-  background-color: #151515;
-  box-shadow: 0 1px 3px 0 #d4d9e1;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-app-search-modal-list__item--active {
-  background-color: #0960bd;
-  color: #fff;
-}
-
-[data-theme='dark'] .account-center-application__card-num {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .account-center-application__card-download {
-  color: #0960bd;
-}
-
-[data-theme='dark'] [data-theme='dark'] .vben-form-design-sider {
-  background-color: #1f1f1f;
-}
-
-[data-theme='dark'] [data-theme='light'] .vben-form-design-sider {
-  background-color: #fff;
-}
-
-[data-theme='dark'] .vben-st-login {
-  background: #151515;
-}
-
-[data-theme='dark'] .vben-iframe-page__main {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-lock-page__hour,
-[data-theme='dark'] .vben-lock-page__minute {
-  background-color: #141313;
-  color: #bababa;
-}
-
-[data-theme='dark'] .vben-lock-page-entry {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-[data-theme='dark'] .vben-lock-page-entry__header-name {
-  color: #bababa;
-}
-
-[data-theme='dark'] .vben-lock-page-entry__err-msg {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .hidden-item {
-  background-color: #f0bfc3;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .moving::before {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box:hover {
-  background-color: rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box::before {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box.active {
-  background-color: rgb(9 96 189 / 20%);
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box .show-key-box {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box .copy,
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box .delete {
-  color: #fff;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box .copy {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .drag-move-box .delete {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box {
-  background-color: rgb(152 103 247 / 12%);
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box .grid-row {
-  background-color: rgb(152 103 247 / 12%);
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box .grid-row .grid-col .draggable-box {
-  border: 1px #ccc;
-}
-
-[data-theme='dark']
-  .draggable-box
-  :deep(.list-main)
-  .grid-box
-  .grid-row
-  .grid-col
-  .draggable-box
-  .list-main {
-  border: 1px #ccc;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box::before {
-  background: 0 0;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box.active {
-  background-color: rgb(152 103 247 / 24%);
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box.active::before {
-  background-color: #9867f7;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .copy,
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .delete {
-  color: #fff;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .copy {
-  background-color: #9867f7;
-}
-
-[data-theme='dark'] .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .delete {
-  background-color: #9867f7;
-}
-
-[data-theme='dark'] .form-panel .empty-text {
-  color: #aaa;
-}
-
-[data-theme='dark'] .operating-area {
-  border-bottom: 2px solid #ccc;
-}
-
-[data-theme='dark'] .operating-area a {
-  color: #666;
-}
-
-[data-theme='dark'] .operating-area a.disabled,
-[data-theme='dark'] .operating-area a.disabled:hover {
-  color: #ccc;
-}
-
-[data-theme='dark'] .operating-area a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-layout-header {
-  background-color: #fff;
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-header-left .vben-layout-header-trigger.light:hover {
-  background-color: #f6f6f6;
-}
-
-[data-theme='dark'] .vben-layout-header-left .vben-layout-header-trigger.light svg {
-  fill: #000;
-}
-
-[data-theme='dark'] .vben-layout-header--light {
-  border-bottom: 1px solid #eee;
-  border-left: 1px solid #eee;
-  background-color: #fff !important;
-}
-
-[data-theme='dark'] .vben-layout-header--light .vben-layout-header-logo {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-layout-header--light .vben-layout-header-logo:hover {
-  background-color: #f6f6f6;
-}
-
-[data-theme='dark'] .vben-layout-header--light .vben-layout-header-action__item {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-layout-header--light .vben-layout-header-action__item:hover {
-  background-color: #f6f6f6;
-}
-
-[data-theme='dark'] .vben-layout-header--light .vben-layout-header-action span[role='img'],
-[data-theme='dark'] .vben-layout-header--light .vben-layout-header-action-icon {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-layout-header--dark {
-  border-left: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-layout-header--dark .vben-layout-header-action__item .ant-badge span {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-setting-drawer-feature {
-  background-color: #0960bd;
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-footer {
-  color: #d9d9d9;
-}
-
-[data-theme='dark'] .vben-layout-footer__links a {
-  color: #d9d9d9;
-}
-
-[data-theme='dark'] .vben-layout-footer__links a:hover {
-  color: rgb(0 0 0 / 85%);
-}
-
-[data-theme='dark'] .vben-layout-footer__github:hover {
-  color: rgb(0 0 0 / 85%);
-}
-
-[data-theme='dark'] .vben-page-footer {
-  border-top: 1px solid #303030;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-collapse-container {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-collapse-container__header {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-collapse-container__footer {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-page-wrapper-content-bg {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-basic-help {
-  color: #909399;
-}
-
-[data-theme='dark'] .vben-basic-help:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-basic-title {
-  color: #c9d1d9 !important;
-}
-
-[data-theme='dark'] .vben-basic-title-show-span::before {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .vben-cropper-avatar-image-wrapper {
-  border: 1px solid #303030;
-  background: #151515;
-}
-
-[data-theme='dark'] .vben-cropper-avatar-image-mask {
-  background: rgb(0 0 0 / 40%);
-}
-
-[data-theme='dark'] [data-theme='dark'] .ant-table-tbody > tr.ant-table-row-selected td,
-[data-theme='dark'] [data-theme='dark'] .ant-table-tbody > tr:hover.ant-table-row-selected > td {
-  background-color: #262626;
-}
-
-[data-theme='dark'] .vben-basic-table-row__striped td {
-  background-color: #1e1e1e;
-}
-
-[data-theme='dark'] .vben-basic-table-form-container .ant-form {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-basic-table .ant-table-wrapper {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-tree {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-tree-header {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark'] .darg-verify {
-  border: 1px solid #ddd;
-  background-color: #eee;
-}
-
-[data-theme='dark'] .darg-verify-bar {
-  background-color: #55d187;
-}
-
-[data-theme='dark'] .darg-verify-content.success {
-  -webkit-text-fill-color: #fff;
-}
-
-[data-theme='dark'] .darg-verify-content > * {
-  -webkit-text-fill-color: #333;
-}
-
-[data-theme='dark'] .darg-verify-action {
-  background-color: #fff;
-}
-
-[data-theme='dark'] .ir-dv-img__tip {
-  color: #fff;
-}
-
-[data-theme='dark'] .ir-dv-img__tip.success {
-  background-color: rgb(85 209 135 / 60%);
-}
-
-[data-theme='dark'] .ir-dv-img__tip.error {
-  background-color: rgb(237 111 111 / 60%);
-}
-
-[data-theme='dark'] .ir-dv-img__tip.normal {
-  background-color: rgb(0 0 0 / 30%);
-}
-
-[data-theme='dark'] .vben-basic-drawer .ant-drawer-close:hover {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] .vben-basic-drawer .ant-drawer-body {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-basic-drawer__detail .ant-drawer-header {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-strength-meter-bar {
-  background-color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .vben-strength-meter-bar::after,
-[data-theme='dark'] .vben-strength-meter-bar::before {
-  border-color: #fff;
-  background-color: transparent;
-}
-
-[data-theme='dark'] .vben-strength-meter-bar--fill {
-  background-color: transparent;
-}
-
-[data-theme='dark'] .vben-strength-meter-bar--fill[data-score='0'] {
-  background-color: #e74242;
-}
-
-[data-theme='dark'] .vben-strength-meter-bar--fill[data-score='1'] {
-  background-color: #ed6f6f;
-}
-
-[data-theme='dark'] .vben-strength-meter-bar--fill[data-score='2'] {
-  background-color: #efbd47;
-}
-
-[data-theme='dark'] .vben-strength-meter-bar--fill[data-score='3'] {
-  background-color: rgb(85 209 135 / 50%);
-}
-
-[data-theme='dark'] .vben-strength-meter-bar--fill[data-score='4'] {
-  background-color: #55d187;
-}
-
-[data-theme='dark'] .vben-image-preview .ant-image-preview-operations {
-  background-color: rgb(0 0 0 / 40%);
-}
-
-[data-theme='dark'] .vben-app-search-footer {
-  border-top: 1px solid #303030;
-  background-color: #151515;
-  color: #666;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .vben-multiple-tabs .ant-tabs-tab {
-  border-bottom: 1px solid #303030;
-}
-
-[data-theme='dark']
-  html[data-theme='light']
-  .vben-multiple-tabs
-  .ant-tabs-tab:not(.ant-tabs-tab-active) {
-  border: 1px solid #d9d9d9 !important;
-}
-
-[data-theme='dark'] .vben-multiple-tabs {
-  border-bottom: 1px solid #303030;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav {
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab {
-  background-color: #151515;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab svg {
-  fill: #c9d1d9;
-}
-
-[data-theme='dark']
-  .vben-multiple-tabs
-  .ant-tabs.ant-tabs-card
-  .ant-tabs-nav
-  .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active {
-  background: #0960bd;
-}
-
-[data-theme='dark']
-  .vben-multiple-tabs
-  .ant-tabs.ant-tabs-card
-  .ant-tabs-nav
-  .ant-tabs-tab-active
-  span {
-  color: #fff !important;
-}
-
-[data-theme='dark']
-  .vben-multiple-tabs
-  .ant-tabs.ant-tabs-card
-  .ant-tabs-nav
-  .ant-tabs-tab-active
-  svg {
-  fill: #fff;
-}
-
-[data-theme='dark'] .vben-multiple-tabs-content__extra-fold,
-[data-theme='dark'] .vben-multiple-tabs-content__extra-quick,
-[data-theme='dark'] .vben-multiple-tabs-content__extra-redo {
-  border-left: 1px solid #303030;
-  color: #8b949e;
-}
-
-[data-theme='dark'] .vben-multiple-tabs-content__extra-fold:hover,
-[data-theme='dark'] .vben-multiple-tabs-content__extra-quick:hover,
-[data-theme='dark'] .vben-multiple-tabs-content__extra-redo:hover {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light .vben-layout-mix-sider-logo {
-  border-bottom: 1px solid #eee;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light.open > .scrollbar {
-  border-right: 1px solid #eee;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light .vben-layout-mix-sider-module__item {
-  color: rgb(0 0 0 / 65%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light .vben-layout-mix-sider-module__item--active {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__content {
-  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__title .pushpin {
-  color: rgb(0 0 0 / 35%);
-}
-
-[data-theme='dark']
-  .vben-layout-mix-sider.light
-  .vben-layout-mix-sider-menu-list__title
-  .pushpin:hover {
-  color: rgb(0 0 0 / 85%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.dark .vben-layout-mix-sider-menu-list__title {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-module__item {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-module__item:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-module__item--active {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-module__item--active::before {
-  background-color: #0960bd;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-trigger {
-  background-color: rgb(255 255 255 / 10%);
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider.light .vben-layout-mix-sider-trigger {
-  border-top: 1px solid #eee;
-  background-color: #fff;
-  color: rgb(0 0 0 / 65%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-menu-list {
-  background-color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-menu-list__title {
-  border-bottom: 1px solid #eee;
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-menu-list__title .pushpin {
-  color: rgb(255 255 255 / 65%);
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-menu-list__title .pushpin:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-menu-list__content .ant-menu-inline,
-[data-theme='dark'] .vben-layout-mix-sider-menu-list__content .ant-menu-vertical,
-[data-theme='dark'] .vben-layout-mix-sider-menu-list__content .ant-menu-vertical-left {
-  border-right: 1px solid transparent;
-}
-
-[data-theme='dark'] .vben-layout-mix-sider-drag-bar {
-  background-color: #f8f8f9;
-  box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
-}
-
-[data-theme='dark'] .vben-layout-sideBar.ant-layout-sider-dark .ant-layout-sider-trigger {
-  background-color: rgb(255 255 255 / 10%);
-  color: #bfbfbf;
-}
-
-[data-theme='dark'] .vben-layout-sideBar.ant-layout-sider-dark .ant-layout-sider-trigger:hover {
-  background-color: rgb(255 255 255 / 20%);
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-sideBar:not(.ant-layout-sider-dark) .ant-layout-sider-trigger {
-  border-top: 1px solid #303030;
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-cropper-am-cropper {
-  background: #eee;
-}
-
-[data-theme='dark'] .vben-cropper-am-preview {
-  border: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-cropper-am-group {
-  border-top: 1px solid #303030;
-}
-
-[data-theme='dark'] .vben-basic-drawer-footer {
-  border-top: 1px solid #303030;
-  background-color: #151515;
-}
-
-[data-theme='dark'] .vben-basic-drawer-header__back:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-basic-modal-close span:first-child:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-basic-modal-close span:last-child:hover {
-  color: #ed6f6f;
-}
-
-[data-theme='dark'] html[data-theme='dark'] .lf-dnd {
-  background: #080808;
-}
-
-[data-theme='dark'] .vben-flow-chart-toolbar {
-  border-bottom: 1px solid #303030;
-  background-color: #1e1e1e;
-}
-
-[data-theme='dark'] .vben-flow-chart-toolbar .disabeld {
-  color: rgb(255 255 255 / 30%);
-}
-
-[data-theme='dark'] .vben-flow-chart-toolbar__icon:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .img-preview {
-  background: rgb(0 0 0 / 50%);
-}
-
-[data-theme='dark'] .img-preview-content {
-  color: #fff;
-}
-
-[data-theme='dark'] .img-preview__close {
-  background-color: rgb(0 0 0 / 50%);
-  color: #fff;
-}
-
-[data-theme='dark'] .img-preview__close:hover {
-  background-color: rgb(0 0 0 / 80%);
-}
-
-[data-theme='dark'] .img-preview__index {
-  background: rgb(109 109 109 / 60%);
-}
-
-[data-theme='dark'] .img-preview__controller {
-  background: rgb(109 109 109 / 60%);
-}
-
-[data-theme='dark'] .img-preview__arrow {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-[data-theme='dark'] .img-preview__arrow:hover {
-  background-color: rgb(0 0 0 / 80%);
-}
-
-[data-theme='dark'] .vben-darg-bar:hover {
-  background-color: #0960bd;
-  box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
-}
-
-[data-theme='dark'] .vben-header-user-dropdown--light:hover {
-  background-color: #f6f6f6;
-}
-
-[data-theme='dark'] .vben-header-user-dropdown--light .vben-header-user-dropdown__name {
-  color: #c9d1d9;
-}
-
-[data-theme='dark'] .vben-header-user-dropdown--light .vben-header-user-dropdown__desc {
-  color: #7c8087;
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--light .ant-breadcrumb-link {
-  color: #999;
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--light .ant-breadcrumb-link a {
-  color: rgb(0 0 0 / 65%);
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--light .ant-breadcrumb-link a:hover {
-  color: #0960bd;
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--light .ant-breadcrumb-separator {
-  color: #999;
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--dark .ant-breadcrumb-link {
-  color: rgb(255 255 255 / 60%);
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--dark .ant-breadcrumb-link a {
-  color: rgb(255 255 255 / 80%);
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--dark .ant-breadcrumb-link a:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-layout-breadcrumb--dark .ant-breadcrumb-separator,
-[data-theme='dark'] .vben-layout-breadcrumb--dark .anticon {
-  color: rgb(255 255 255 / 80%);
-}
+  .vben-simple-menu-tag {
+    color: #fff;
+  }
 
-[data-theme='dark'] .file-table thead {
-  background-color: rgb(255 255 255 / 4%);
-}
+  .vben-simple-menu-tag--primary {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .file-table table,
-[data-theme='dark'] .file-table td,
-[data-theme='dark'] .file-table th {
-  border: 1px solid #303030;
-}
+  .vben-simple-menu-tag--error {
+    background-color: #ed6f6f;
+  }
 
-[data-theme='dark'] .context-menu {
-  border: 1px solid rgb(0 0 0 / 8%);
-  background-color: #151515;
-  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
-    0 1px 5px 0 rgb(0 0 0 / 6%);
-}
+  .vben-simple-menu-tag--success {
+    background-color: #55d187;
+  }
 
-[data-theme='dark'] .context-menu li:not(.ant-menu-item-disabled):hover {
-  background-color: rgb(255 255 255 / 8%);
-  color: #c9d1d9;
-}
+  .vben-simple-menu-tag--warn {
+    background-color: #efbd47;
+  }
 
-[data-theme='dark'] .context-menu__popup li:not(.ant-menu-item-disabled):hover {
-  background-color: rgb(255 255 255 / 8%);
-  color: #c9d1d9;
-}
+  .vben-editable-cell__icon:hover svg {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-simple-menu-tag {
-  color: #fff;
-}
+  .vben-setting-theme-picker__item {
+    border: 1px solid #ddd;
+  }
 
-[data-theme='dark'] .vben-simple-menu-tag--primary {
-  background-color: #0960bd;
-}
+  .vben-setting-theme-picker__item--active {
+    border: 1px solid #0b79ee;
+  }
 
-[data-theme='dark'] .vben-simple-menu-tag--error {
-  background-color: #ed6f6f;
-}
+  .vben-setting-theme-picker__item--active svg {
+    fill: #fff !important;
+  }
 
-[data-theme='dark'] .vben-simple-menu-tag--success {
-  background-color: #55d187;
-}
+  .light-border::after {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-simple-menu-tag--warn {
-  background-color: #efbd47;
-}
+  .vben-menu-menu-popover .vben-menu-item,
+  .vben-menu-menu-popover .vben-menu-submenu-title {
+    color: rgb(255 255 255 / 70%);
+  }
 
-[data-theme='dark'] .edit-cell-rule-popover .ant-popover-inner-content {
-  color: #ed6f6f;
-}
+  .vben-menu-menu-popover .vben-menu-dark .vben-menu-item,
+  .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title {
+    color: rgb(255 255 255 / 70%);
+  }
 
-[data-theme='dark'] .vben-editable-cell__icon:hover svg {
-  color: #0960bd;
-}
+  .vben-menu-menu-popover .vben-menu-dark .vben-menu-item:hover,
+  .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title:hover {
+    color: #fff;
+  }
 
-[data-theme='dark'] .vben-setting-theme-picker__item {
-  border: 1px solid #ddd;
-}
+  .vben-menu-menu-popover .vben-menu-dark .vben-menu-item-selected,
+  .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title-selected {
+    background-color: #0960bd !important;
+    color: #fff;
+  }
 
-[data-theme='dark'] .vben-setting-theme-picker__item--active {
-  border: 1px solid #0b79ee;
-}
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-item,
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .vben-setting-theme-picker__item--active svg {
-  fill: #fff !important;
-}
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-item:hover,
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .light-border::after {
-  background-color: #0960bd;
-}
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-item-selected,
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title-selected {
+    background-color: rgb(9 96 189 / 10%);
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-item,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-submenu-title {
-  color: rgb(255 255 255 / 70%);
-}
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-item-selected::after,
+  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title-selected::after {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-dark .vben-menu-item,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title {
-  color: rgb(255 255 255 / 70%);
-}
+  .vben-menu {
+    color: #c9d1d9;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-dark .vben-menu-item:hover,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title:hover {
-  color: #fff;
-}
+  .vben-menu-light {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-dark .vben-menu-item-selected,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title-selected {
-  background-color: #0960bd !important;
-  color: #fff;
-}
+  .vben-menu-light .vben-menu-submenu-active {
+    color: #0960bd !important;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-item,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title {
-  color: #c9d1d9;
-}
+  .vben-menu-light .vben-menu-submenu-active-border::after {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-item:hover,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title:hover {
-  color: #0960bd;
-}
+  .vben-menu-dark .vben-menu-submenu-active {
+    color: #fff !important;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-item-selected,
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title-selected {
-  background-color: rgb(9 96 189 / 10%);
-  color: #0960bd;
-}
+  .vben-menu-vertical .vben-menu-item:hover,
+  .vben-menu-vertical .vben-menu-submenu-title:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-menu-popover .vben-menu-light .vben-menu-item-selected::after,
-[data-theme='dark']
-  .vben-menu-menu-popover
-  .vben-menu-light
-  .vben-menu-submenu-title-selected::after {
-  background-color: #0960bd;
-}
+  .vben-menu-light.vben-menu-vertical .vben-menu-item-active:not(.vben-menu-submenu) {
+    background-color: rgb(9 96 189 / 10%);
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu {
-  color: #c9d1d9;
-}
+  .vben-menu-light.vben-menu-vertical .vben-menu-item-active:not(.vben-menu-submenu)::after {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-light {
-  background-color: #fff;
-}
+  .vben-menu-light.vben-menu-vertical .vben-menu-item-active.vben-menu-submenu {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-light .vben-menu-submenu-active {
-  color: #0960bd !important;
-}
+  .vben-menu-light.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active,
+  .vben-menu-light.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active {
+    background-color: rgb(9 96 189 / 5%);
+  }
 
-[data-theme='dark'] .vben-menu-light .vben-menu-submenu-active-border::after {
-  background-color: #0960bd;
-}
+  .vben-menu-light.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active::before,
+  .vben-menu-light.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active::before {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-menu-dark .vben-menu-submenu-active {
-  color: #fff !important;
-}
+  .vben-menu-dark.vben-menu-vertical .vben-menu-item,
+  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title {
+    color: rgb(255 255 255 / 70%);
+  }
 
-[data-theme='dark'] .vben-menu-vertical .vben-menu-item:hover,
-[data-theme='dark'] .vben-menu-vertical .vben-menu-submenu-title:hover {
-  color: #0960bd;
-}
+  .vben-menu-dark.vben-menu-vertical .vben-menu-item-active:not(.vben-menu-submenu),
+  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title-active:not(.vben-menu-submenu) {
+    background-color: #0960bd !important;
+    color: #fff !important;
+  }
 
-[data-theme='dark']
-  .vben-menu-light.vben-menu-vertical
-  .vben-menu-item-active:not(.vben-menu-submenu) {
-  background-color: rgb(9 96 189 / 10%);
-  color: #0960bd;
-}
+  .vben-menu-dark.vben-menu-vertical .vben-menu-item:hover,
+  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title:hover {
+    color: #fff;
+  }
 
-[data-theme='dark']
-  .vben-menu-light.vben-menu-vertical
-  .vben-menu-item-active:not(.vben-menu-submenu)::after {
-  background-color: #0960bd;
-}
+  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active,
+  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active {
+    color: #fff !important;
+  }
 
-[data-theme='dark'] .vben-menu-light.vben-menu-vertical .vben-menu-item-active.vben-menu-submenu {
-  color: #0960bd;
-}
+  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active::before,
+  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active::before {
+    background-color: #0960bd;
+  }
 
-[data-theme='dark']
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse
-  .vben-menu-submenu-active,
-[data-theme='dark']
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse
-  > li.vben-menu-item-active {
-  background-color: rgb(9 96 189 / 5%);
-}
+  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
+    .vben-menu-submenu-active
+    .vben-menu-submenu-collapse,
+  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
+    > li.vben-menu-item-active
+    .vben-menu-submenu-collapse {
+    background-color: transparent;
+  }
 
-[data-theme='dark']
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse
-  .vben-menu-submenu-active::before,
-[data-theme='dark']
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse
-  > li.vben-menu-item-active::before {
-  background-color: #0960bd;
-}
+  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu .vben-menu-item-active,
+  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu .vben-menu-item-active:hover {
+    color: #fff;
+  }
 
-[data-theme='dark'] .vben-menu-dark.vben-menu-vertical .vben-menu-item,
-[data-theme='dark'] .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title {
-  color: rgb(255 255 255 / 70%);
-}
+  .vben-menu-dark.vben-menu-vertical .vben-menu-child-item-active > .vben-menu-submenu-title {
+    color: #fff;
+  }
 
-[data-theme='dark']
   .vben-menu-dark.vben-menu-vertical
-  .vben-menu-item-active:not(.vben-menu-submenu),
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical
-  .vben-menu-submenu-title-active:not(.vben-menu-submenu) {
-  background-color: #0960bd !important;
-  color: #fff !important;
-}
-
-[data-theme='dark'] .vben-menu-dark.vben-menu-vertical .vben-menu-item:hover,
-[data-theme='dark'] .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title:hover {
-  color: #fff;
-}
-
-[data-theme='dark'] .vben-menu-dark.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active,
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-  > li.vben-menu-item-active {
-  color: #fff !important;
-}
-
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-  .vben-menu-submenu-active::before,
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-  > li.vben-menu-item-active::before {
-  background-color: #0960bd;
-}
+    .vben-menu-opened
+    .vben-menu-submenu-has-parent-submenu
+    .vben-menu-submenu-title {
+    background-color: transparent;
+  }
 
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-  .vben-menu-submenu-active
-  .vben-menu-submenu-collapse,
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-  > li.vben-menu-item-active
-  .vben-menu-submenu-collapse {
-  background-color: transparent;
-}
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark {
+    background-color: transparent;
+  }
 
-[data-theme='dark'] .vben-menu-dark.vben-menu-vertical .vben-menu-submenu .vben-menu-item-active,
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical
-  .vben-menu-submenu
-  .vben-menu-item-active:hover {
-  color: #fff;
-}
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item-active,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item-open,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item-selected,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item:hover,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-active,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-open,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-selected,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-title:hover,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu:hover,
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
+    .ant-menu:not(.ant-menu-inline)
+    .ant-menu-submenu-open {
+    color: #fff;
+  }
 
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical
-  .vben-menu-child-item-active
-  > .vben-menu-submenu-title {
-  color: #fff;
-}
+  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .vben-basic-menu-item__level1 {
+    background-color: transparent;
+  }
 
-[data-theme='dark']
-  .vben-menu-dark.vben-menu-vertical
-  .vben-menu-opened
-  .vben-menu-submenu-has-parent-submenu
-  .vben-menu-submenu-title {
-  background-color: transparent;
-}
+  .vben-setting-menu-type-picker__item {
+    background-color: #f0f2f5;
+  }
 
-[data-theme='dark'] .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark {
-  background-color: transparent;
-}
+  .vben-setting-menu-type-picker__item--light::before,
+  .vben-setting-menu-type-picker__item--sidebar::before {
+    background-color: #273352;
+  }
 
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-item-active,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-item-open,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-item-selected,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-item:hover,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-submenu-active,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-submenu-open,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-submenu-selected,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-submenu-title:hover,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu-submenu:hover,
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .ant-menu:not(.ant-menu-inline)
-  .ant-menu-submenu-open {
-  color: #fff;
-}
+  .vben-setting-menu-type-picker__item--light::after,
+  .vben-setting-menu-type-picker__item--sidebar::after {
+    background-color: #fff;
+  }
 
-[data-theme='dark']
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-  .vben-basic-menu-item__level1 {
-  background-color: transparent;
-}
+  .vben-setting-menu-type-picker__item--mix::before {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item {
-  background-color: #f0f2f5;
-}
+  .vben-setting-menu-type-picker__item--mix::after {
+    background-color: #273352;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--light::before,
-[data-theme='dark'] .vben-setting-menu-type-picker__item--sidebar::before {
-  background-color: #273352;
-}
+  .vben-setting-menu-type-picker__item--top-menu::after {
+    background-color: #273352;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--light::after,
-[data-theme='dark'] .vben-setting-menu-type-picker__item--sidebar::after {
-  background-color: #fff;
-}
+  .vben-setting-menu-type-picker__item--dark {
+    background-color: #273352;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--mix::before {
-  background-color: #fff;
-}
+  .vben-setting-menu-type-picker__item--mix-sidebar::before {
+    background-color: #273352;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--mix::after {
-  background-color: #273352;
-}
+  .vben-setting-menu-type-picker__item--mix-sidebar::after {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--top-menu::after {
-  background-color: #273352;
-}
+  .vben-setting-menu-type-picker__item--mix-sidebar .mix-sidebar {
+    background-color: #fff;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--dark {
-  background-color: #273352;
-}
+  .vben-setting-menu-type-picker__item--active,
+  .vben-setting-menu-type-picker__item:hover {
+    border: 2px solid #0960bd;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--mix-sidebar::before {
-  background-color: #273352;
-}
+  .vben-basic-column-setting__check-item .ant-checkbox-wrapper:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--mix-sidebar::after {
-  background-color: #fff;
-}
+  .vben-basic-column-setting__fixed-left,
+  .vben-basic-column-setting__fixed-right {
+    color: rgb(0 0 0 / 45%);
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--mix-sidebar .mix-sidebar {
-  background-color: #fff;
-}
+  .vben-basic-column-setting__fixed-left.active,
+  .vben-basic-column-setting__fixed-left:hover,
+  .vben-basic-column-setting__fixed-right.active,
+  .vben-basic-column-setting__fixed-right:hover {
+    color: #0960bd;
+  }
 
-[data-theme='dark'] .vben-setting-menu-type-picker__item--active,
-[data-theme='dark'] .vben-setting-menu-type-picker__item:hover {
-  border: 2px solid #0960bd;
-}
+  .vben-basic-column-setting__fixed-left.disabled,
+  .vben-basic-column-setting__fixed-right.disabled {
+    color: rgb(255 255 255 / 30%);
+  }
 
-[data-theme='dark'] .vben-basic-column-setting__check-item .ant-checkbox-wrapper:hover {
-  color: #0960bd;
-}
+  .ant-card-grid-hoverable:hover {
+    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%),
+      0 9px 28px 8px rgb(0 0 0 / 20%);
+  }
 
-[data-theme='dark'] .vben-basic-column-setting__fixed-left,
-[data-theme='dark'] .vben-basic-column-setting__fixed-right {
-  color: rgb(0 0 0 / 45%);
-}
+  .ant-card-grid {
+    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset,
+      0 1px 0 0 #434343 inset;
+  }
 
-[data-theme='dark'] .vben-basic-column-setting__fixed-left.active,
-[data-theme='dark'] .vben-basic-column-setting__fixed-left:hover,
-[data-theme='dark'] .vben-basic-column-setting__fixed-right.active,
-[data-theme='dark'] .vben-basic-column-setting__fixed-right:hover {
-  color: #0960bd;
-}
+  .ant-calendar-selected-day .ant-calendar-date {
+    color: rgb(0 0 0 / 80%);
+  }
 
-[data-theme='dark'] .vben-basic-column-setting__fixed-left.disabled,
-[data-theme='dark'] .vben-basic-column-setting__fixed-right.disabled {
-  color: rgb(255 255 255 / 30%);
+  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
+    color: rgb(0 0 0 / 90%);
+  }
 }
diff --git a/apps/admin/src/design/index.less b/apps/admin/src/design/index.less
index 127c15d..65307eb 100644
--- a/apps/admin/src/design/index.less
+++ b/apps/admin/src/design/index.less
@@ -3,8 +3,8 @@
 @import 'public.less';
 @import 'ant/index.less';
 @import './theme.less';
-@import './dark.less';
 @import './entry.css';
+@import './dark.less';
 
 input:-webkit-autofill {
   box-shadow: 0 0 0 1000px white inset !important;
@@ -21,6 +21,7 @@ html {
 
 html,
 body {
+  position: relative;
   width: 100%;
   height: 100%;
   overflow: visible;
@@ -44,3 +45,10 @@ svg,
 span {
   outline: none;
 }
+
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/apps/admin/src/design/public.less b/apps/admin/src/design/public.less
index 644bfab..b8b3991 100644
--- a/apps/admin/src/design/public.less
+++ b/apps/admin/src/design/public.less
@@ -21,10 +21,10 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  // background: rgba(0, 0, 0, 0.6);
-  background-color: rgb(144 147 153 / 30%);
   // background-color: rgba(144, 147, 153, 0.3);
   border-radius: 2px;
+  // background: rgba(0, 0, 0, 0.6);
+  background-color: rgb(144 147 153 / 30%);
   box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
 }
 
@@ -40,12 +40,12 @@
 
   .bar {
     position: fixed;
+    z-index: 99999;
     top: 0;
     left: 0;
-    z-index: 99999;
     width: 100%;
     height: 2px;
-    background-color: @primary-color;
     opacity: 0.75;
+    background-color: @primary-color;
   }
 }
diff --git a/apps/admin/src/design/theme.less b/apps/admin/src/design/theme.less
index aa05033..22a139e 100644
--- a/apps/admin/src/design/theme.less
+++ b/apps/admin/src/design/theme.less
@@ -8,45 +8,21 @@ html[data-theme='light'] {
   }
 
   .ant-alert-success {
-    background-color: #f6ffed;
     border: 1px solid #b7eb8f;
+    background-color: #f6ffed;
   }
 
   .ant-alert-error {
-    background-color: #fff2f0;
     border: 1px solid #ffccc7;
+    background-color: #fff2f0;
   }
 
   .ant-alert-warning {
-    background-color: #fffbe6;
     border: 1px solid #ffe58f;
+    background-color: #fffbe6;
   }
 
   :not(:root):fullscreen::backdrop {
     background-color: @layout-body-background !important;
   }
 }
-
-[data-theme='dark'] {
-  .text-secondary {
-    color: #8b949e;
-  }
-
-  .ant-card-grid-hoverable:hover {
-    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%),
-      0 9px 28px 8px rgb(0 0 0 / 20%);
-  }
-
-  .ant-card-grid {
-    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset,
-      0 1px 0 0 #434343 inset;
-  }
-
-  .ant-calendar-selected-day .ant-calendar-date {
-    color: rgb(0 0 0 / 80%);
-  }
-
-  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-    color: rgb(0 0 0 / 90%);
-  }
-}
diff --git a/apps/admin/src/design/transition/fade.less b/apps/admin/src/design/transition/fade.less
index 6ed1771..2df4c7f 100644
--- a/apps/admin/src/design/transition/fade.less
+++ b/apps/admin/src/design/transition/fade.less
@@ -27,13 +27,13 @@
 }
 
 .fade-slide-enter-from {
-  opacity: 0;
   transform: translateX(-30px);
+  opacity: 0;
 }
 
 .fade-slide-leave-to {
-  opacity: 0;
   transform: translateX(30px);
+  opacity: 0;
 }
 
 // ///////////////////////////////////////////////
@@ -47,13 +47,13 @@
 }
 
 .fade-bottom-enter-from {
-  opacity: 0;
   transform: translateY(-10%);
+  opacity: 0;
 }
 
 .fade-bottom-leave-to {
-  opacity: 0;
   transform: translateY(10%);
+  opacity: 0;
 }
 
 // fade-scale
@@ -63,13 +63,13 @@
 }
 
 .fade-scale-enter-from {
-  opacity: 0;
   transform: scale(1.2);
+  opacity: 0;
 }
 
 .fade-scale-leave-to {
-  opacity: 0;
   transform: scale(0.8);
+  opacity: 0;
 }
 
 // ///////////////////////////////////////////////
@@ -83,11 +83,11 @@
 }
 
 .fade-top-enter-from {
-  opacity: 0;
   transform: translateY(8%);
+  opacity: 0;
 }
 
 .fade-top-leave-to {
-  opacity: 0;
   transform: translateY(-8%);
+  opacity: 0;
 }
diff --git a/apps/admin/src/design/transition/scale.less b/apps/admin/src/design/transition/scale.less
index c965493..521fce3 100644
--- a/apps/admin/src/design/transition/scale.less
+++ b/apps/admin/src/design/transition/scale.less
@@ -4,8 +4,8 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0;
     transform: scale(0);
+    opacity: 0;
   }
 }
 
@@ -15,7 +15,7 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0;
     transform: scale(0) rotate(-45deg);
+    opacity: 0;
   }
 }
diff --git a/apps/admin/src/design/transition/slide.less b/apps/admin/src/design/transition/slide.less
index 79b00df..fe1be22 100644
--- a/apps/admin/src/design/transition/slide.less
+++ b/apps/admin/src/design/transition/slide.less
@@ -3,8 +3,8 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateY(-15px);
+    opacity: 0;
   }
 }
 
@@ -13,8 +13,8 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateY(15px);
+    opacity: 0;
   }
 }
 
@@ -23,8 +23,8 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateX(-15px);
+    opacity: 0;
   }
 }
 
@@ -33,7 +33,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateX(15px);
+    opacity: 0;
   }
 }
diff --git a/apps/admin/src/design/transition/zoom.less b/apps/admin/src/design/transition/zoom.less
index 2ea378c..2cfdada 100644
--- a/apps/admin/src/design/transition/zoom.less
+++ b/apps/admin/src/design/transition/zoom.less
@@ -6,8 +6,8 @@
 
 .zoom-out-enter-from,
 .zoom-out-leave-to {
-  opacity: 0;
   transform: scale(0);
+  opacity: 0;
 }
 
 // zoom-fade
@@ -17,11 +17,11 @@
 }
 
 .zoom-fade-enter-from {
-  opacity: 0;
   transform: scale(0.92);
+  opacity: 0;
 }
 
 .zoom-fade-leave-to {
-  opacity: 0;
   transform: scale(1.06);
+  opacity: 0;
 }
diff --git a/apps/admin/src/directives/clickOutside.ts b/apps/admin/src/directives/clickOutside.ts
index f6f3051..9b7960f 100644
--- a/apps/admin/src/directives/clickOutside.ts
+++ b/apps/admin/src/directives/clickOutside.ts
@@ -17,10 +17,10 @@ const nodeList: FlushList = new Map();
 let startClick: MouseEvent;
 
 if (!isServer) {
-  on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
-  on(document, 'mouseup', (e: MouseEvent) => {
+  on(document, 'mousedown', (e: Event) => (startClick = e as MouseEvent));
+  on(document, 'mouseup', (e: Event) => {
     for (const { documentHandler } of nodeList.values()) {
-      documentHandler(e, startClick);
+      documentHandler(e as MouseEvent, startClick);
     }
   });
 }
diff --git a/apps/admin/src/directives/repeatClick.ts b/apps/admin/src/directives/repeatClick.ts
index d4ef150..83c4427 100644
--- a/apps/admin/src/directives/repeatClick.ts
+++ b/apps/admin/src/directives/repeatClick.ts
@@ -18,8 +18,8 @@ const repeatDirective: Directive = {
       interval = null;
     };
 
-    on(el, 'mousedown', (e: MouseEvent): void => {
-      if ((e as any).button !== 0) return;
+    on(el, 'mousedown', (e: Event): void => {
+      if ((e as MouseEvent).button !== 0) return;
       startTime = Date.now();
       once(document as any, 'mouseup', clear);
       interval && clearInterval(interval);
diff --git a/apps/admin/src/directives/ripple/index.ts b/apps/admin/src/directives/ripple/index.ts
index 3da8014..d256497 100644
--- a/apps/admin/src/directives/ripple/index.ts
+++ b/apps/admin/src/directives/ripple/index.ts
@@ -28,9 +28,9 @@ const RippleDirective: Directive & RippleProto = {
     const background = bg || RippleDirective.background;
     const zIndex = RippleDirective.zIndex;
 
-    el.addEventListener(options.event, (event: EventType) => {
+    el.addEventListener(options.event, (event: Event) => {
       rippler({
-        event,
+        event: event as EventType,
         el,
         background,
         zIndex,
diff --git a/apps/admin/src/enums/cacheEnum.ts b/apps/admin/src/enums/cacheEnum.ts
index 4a5cc11..936560c 100644
--- a/apps/admin/src/enums/cacheEnum.ts
+++ b/apps/admin/src/enums/cacheEnum.ts
@@ -11,13 +11,14 @@ export const ROLES_KEY = 'ROLES__KEY__';
 
 // project config key
 export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
+export const API_ADDRESS = 'API_ADDRESS__';
 
 // lock info
 export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';
 
 export const MULTIPLE_TABS_KEY = 'MULTIPLE_TABS__KEY__';
 
-export const APP_DARK_MODE_KEY_ = '__APP__DARK__MODE__';
+export const APP_DARK_MODE_KEY = '__APP__DARK__MODE__';
 
 // base global local key
 export const APP_LOCAL_CACHE_KEY = 'COMMON__LOCAL__KEY__';
diff --git a/apps/admin/src/enums/pageEnum.ts b/apps/admin/src/enums/pageEnum.ts
index c7ca363..8ac2274 100644
--- a/apps/admin/src/enums/pageEnum.ts
+++ b/apps/admin/src/enums/pageEnum.ts
@@ -8,3 +8,4 @@ export enum PageEnum {
   // error log page path
   ERROR_LOG_PAGE = '/error-log/list',
 }
+export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
diff --git a/apps/admin/src/hooks/core/useContext.ts b/apps/admin/src/hooks/core/useContext.ts
index 2729526..04a9433 100644
--- a/apps/admin/src/hooks/core/useContext.ts
+++ b/apps/admin/src/hooks/core/useContext.ts
@@ -22,11 +22,11 @@ export function createContext<T>(
   key: InjectionKey<T> = Symbol(),
   options: CreateContextOptions = {},
 ) {
-  const { readonly = true, createProvider = false, native = false } = options;
+  const { readonly = true, createProvider = true, native = false } = options;
 
   const state = reactive(context);
   const provideData = readonly ? defineReadonly(state) : state;
-  !createProvider && provide(key, native ? context : provideData);
+  createProvider && provide(key, native ? context : provideData);
 
   return {
     state,
diff --git a/apps/admin/src/hooks/setting/index.ts b/apps/admin/src/hooks/setting/index.ts
index 6a49893..2f0db3a 100644
--- a/apps/admin/src/hooks/setting/index.ts
+++ b/apps/admin/src/hooks/setting/index.ts
@@ -10,7 +10,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
   const glob: Readonly<GlobConfig> = {
     title: VITE_GLOB_APP_TITLE,
     apiUrl: VITE_GLOB_API_URL,
-    shortName: VITE_GLOB_APP_TITLE.replace(/\s/g, '_'),
+    shortName: VITE_GLOB_APP_TITLE.replace(/\s/g, '_').replace(/-/g, '_'),
     urlPrefix: VITE_GLOB_API_URL_PREFIX,
     uploadUrl: VITE_GLOB_UPLOAD_URL,
   };
diff --git a/apps/admin/src/hooks/setting/useDarkModeTheme.ts b/apps/admin/src/hooks/setting/useDarkModeTheme.ts
new file mode 100644
index 0000000..cd92350
--- /dev/null
+++ b/apps/admin/src/hooks/setting/useDarkModeTheme.ts
@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+import { theme } from 'ant-design-vue';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { ThemeEnum } from '/@/enums/appEnum';
+
+export function useDarkModeTheme() {
+  const { getDarkMode } = useRootSetting();
+  const { darkAlgorithm } = theme;
+  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+  const darkTheme = {
+    algorithm: [darkAlgorithm],
+  };
+
+  return {
+    isDark,
+    darkTheme,
+  };
+}
diff --git a/apps/admin/src/hooks/setting/useHeaderSetting.ts b/apps/admin/src/hooks/setting/useHeaderSetting.ts
index d590be8..4ff8b18 100644
--- a/apps/admin/src/hooks/setting/useHeaderSetting.ts
+++ b/apps/admin/src/hooks/setting/useHeaderSetting.ts
@@ -48,6 +48,8 @@ export function useHeaderSetting() {
 
   const getShowDoc = computed(() => appStore.getHeaderSetting.showDoc);
 
+  const getShowApi = computed(() => appStore.getHeaderSetting.showApi);
+
   const getHeaderTheme = computed(() => appStore.getHeaderSetting.theme);
 
   const getShowHeader = computed(() => appStore.getHeaderSetting.show);
@@ -86,6 +88,7 @@ export function useHeaderSetting() {
     setHeaderSetting,
 
     getShowDoc,
+    getShowApi,
     getShowSearch,
     getHeaderTheme,
     getUseLockPage,
diff --git a/apps/admin/src/hooks/setting/useMenuSetting.ts b/apps/admin/src/hooks/setting/useMenuSetting.ts
index 3566bfd..e3c62ed 100644
--- a/apps/admin/src/hooks/setting/useMenuSetting.ts
+++ b/apps/admin/src/hooks/setting/useMenuSetting.ts
@@ -123,7 +123,7 @@ export function useMenuSetting() {
 
   // Set menu configuration
   function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
-    appStore.setProjectConfig({ menuSetting });
+    appStore.setMenuSetting(menuSetting);
   }
 
   function toggleCollapsed() {
@@ -133,9 +133,7 @@ export function useMenuSetting() {
   }
   return {
     setMenuSetting,
-
     toggleCollapsed,
-
     getMenuFixed,
     getRealWidth,
     getMenuType,
diff --git a/apps/admin/src/hooks/web/useCopyToClipboard.ts b/apps/admin/src/hooks/web/useCopyToClipboard.ts
deleted file mode 100644
index 5072f9c..0000000
--- a/apps/admin/src/hooks/web/useCopyToClipboard.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ref, watch } from 'vue';
-
-import { isDef } from '/@/utils/is';
-
-interface Options {
-  target?: HTMLElement;
-}
-export function useCopyToClipboard(initial?: string) {
-  const clipboardRef = ref(initial || '');
-  const isSuccessRef = ref(false);
-  const copiedRef = ref(false);
-
-  watch(
-    clipboardRef,
-    (str?: string) => {
-      if (isDef(str)) {
-        copiedRef.value = true;
-        isSuccessRef.value = copyTextToClipboard(str);
-      }
-    },
-    { immediate: !!initial, flush: 'sync' },
-  );
-
-  return { clipboardRef, isSuccessRef, copiedRef };
-}
-
-export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
-  const element = document.createElement('textarea');
-  const previouslyFocusedElement = document.activeElement;
-
-  element.value = input;
-
-  element.setAttribute('readonly', '');
-
-  (element.style as any).contain = 'strict';
-  element.style.position = 'absolute';
-  element.style.left = '-9999px';
-  element.style.fontSize = '12pt';
-
-  const selection = document.getSelection();
-  let originalRange;
-  if (selection && selection.rangeCount > 0) {
-    originalRange = selection.getRangeAt(0);
-  }
-
-  target.append(element);
-  element.select();
-
-  element.selectionStart = 0;
-  element.selectionEnd = input.length;
-
-  let isSuccess = false;
-  try {
-    isSuccess = document.execCommand('copy');
-  } catch (e: any) {
-    throw new Error(e);
-  }
-
-  element.remove();
-
-  if (originalRange && selection) {
-    selection.removeAllRanges();
-    selection.addRange(originalRange);
-  }
-
-  if (previouslyFocusedElement) {
-    (previouslyFocusedElement as HTMLElement).focus();
-  }
-  return isSuccess;
-}
diff --git a/apps/admin/src/hooks/web/useMessage.tsx b/apps/admin/src/hooks/web/useMessage.tsx
index 2de8a38..2789f06 100644
--- a/apps/admin/src/hooks/web/useMessage.tsx
+++ b/apps/admin/src/hooks/web/useMessage.tsx
@@ -1,4 +1,4 @@
-import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
+import type { ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
 import { Modal, message as Message, notification } from 'ant-design-vue';
 import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
 import { NotificationArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
@@ -24,14 +24,6 @@ export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
 }
 export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;
 
-interface ConfirmOptions {
-  info: ModalFunc;
-  success: ModalFunc;
-  error: ModalFunc;
-  warn: ModalFunc;
-  warning: ModalFunc;
-}
-
 function getIcon(iconType: string) {
   if (iconType === 'warning') {
     return <InfoCircleFilled class="modal-icon-warning" />;
@@ -55,7 +47,7 @@ function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
 /**
  * @description: Create confirmation box
  */
-function createConfirm(options: ModalOptionsEx): ConfirmOptions {
+function createConfirm(options: ModalOptionsEx) {
   const iconType = options.iconType || 'warning';
   Reflect.deleteProperty(options, 'iconType');
   const opt: ModalFuncProps = {
@@ -64,7 +56,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
     ...options,
     content: renderContent(options),
   };
-  return Modal.confirm(opt) as unknown as ConfirmOptions;
+  return Modal.confirm(opt);
 }
 
 const getBaseOptions = () => {
@@ -112,7 +104,7 @@ export function useMessage() {
   return {
     createMessage: Message,
     notification: notification as NotifyApi,
-    createConfirm: createConfirm,
+    createConfirm,
     createSuccessModal,
     createErrorModal,
     createInfoModal,
diff --git a/apps/admin/src/hooks/web/usePage.ts b/apps/admin/src/hooks/web/usePage.ts
index 0618070..a4a5c73 100644
--- a/apps/admin/src/hooks/web/usePage.ts
+++ b/apps/admin/src/hooks/web/usePage.ts
@@ -40,6 +40,7 @@ export const useRedo = (_router?: Router) => {
         return;
       }
       if (name && Object.keys(params).length > 0) {
+        params['_origin_params'] = JSON.stringify(params ?? {});
         params['_redirect_type'] = 'name';
         params['path'] = String(name);
       } else {
diff --git a/apps/admin/src/hooks/web/usePermission.ts b/apps/admin/src/hooks/web/usePermission.ts
index c367875..b997754 100644
--- a/apps/admin/src/hooks/web/usePermission.ts
+++ b/apps/admin/src/hooks/web/usePermission.ts
@@ -63,7 +63,7 @@ export function usePermission() {
       return def;
     }
 
-    const permMode = projectSetting.permissionMode;
+    const permMode = appStore.getProjectConfig.permissionMode;
 
     if ([PermissionModeEnum.ROUTE_MAPPING, PermissionModeEnum.ROLE].includes(permMode)) {
       if (!isArray(value)) {
@@ -75,6 +75,14 @@ export function usePermission() {
     if (PermissionModeEnum.BACK === permMode) {
       const allCodeList = permissionStore.getPermCodeList as string[];
       if (!isArray(value)) {
+        const splits = ['||', '&&'];
+        const splitName = splits.find((item) => value.includes(item));
+        if (splitName) {
+          const splitCodes = value.split(splitName);
+          return splitName === splits[0]
+            ? intersection(splitCodes, allCodeList).length > 0
+            : intersection(splitCodes, allCodeList).length === splitCodes.length;
+        }
         return allCodeList.includes(value);
       }
       return (intersection(value, allCodeList) as string[]).length > 0;
diff --git a/apps/admin/src/hooks/web/useSocket.ts b/apps/admin/src/hooks/web/useSocket.ts
deleted file mode 100644
index e4add2a..0000000
--- a/apps/admin/src/hooks/web/useSocket.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { onMounted, onBeforeUnmount, watch } from 'vue';
-import { useWsStore } from '/@/store/modules/ws';
-
-export const useSocket = (socketHooks = {}) => {
-  const socketClient = useWsStore().client;
-
-  // cache wrapper func
-  const socketMap = new Map();
-
-  const registerSocketEvent = () => {
-    Object.keys(socketHooks).forEach((e) => {
-      if (socketClient) {
-        // bind this
-        const wrapFunc = socketHooks[e];
-        socketMap.set(e, wrapFunc);
-        socketClient.subscribe(e, wrapFunc);
-      }
-    });
-  };
-  const unregisterSocketEvent = () => {
-    Object.keys(socketHooks).forEach((e) => {
-      // 增加判断避免被移除掉所有事件
-      if (socketClient && socketMap.has(e)) {
-        socketClient.unsubscribe(e, socketMap.get(e));
-      }
-    });
-  };
-  watch(() => socketClient, registerSocketEvent);
-  onMounted(registerSocketEvent);
-  onBeforeUnmount(unregisterSocketEvent);
-};
diff --git a/apps/admin/src/hooks/web/useWatermark.ts b/apps/admin/src/hooks/web/useWatermark.ts
index 5840c14..8674a25 100644
--- a/apps/admin/src/hooks/web/useWatermark.ts
+++ b/apps/admin/src/hooks/web/useWatermark.ts
@@ -3,15 +3,24 @@ import { useRafThrottle } from '/@/utils/domUtils';
 import { addResizeListener, removeResizeListener } from '/@/utils/event';
 import { isDef } from '/@/utils/is';
 
-const domSymbol = Symbol('watermark-dom');
-const sourceMap = new WeakMap<HTMLElement, {}>();
+const watermarkSymbol = 'watermark-dom';
+
+type UseWatermarkRes = {
+  setWatermark: (str: string) => void;
+  clear: () => void;
+  clearAll: () => void;
+};
+
+const sourceMap = new Map<Symbol, Omit<UseWatermarkRes, 'clearAll'>>();
 
 export function useWatermark(
   appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>,
-) {
+): UseWatermarkRes {
+  const domSymbol = Symbol(watermarkSymbol);
   const appendElRaw = unref(appendEl);
-  if (appendElRaw && sourceMap.has(appendElRaw)) {
-    return sourceMap.get(appendElRaw);
+  if (appendElRaw && sourceMap.has(domSymbol)) {
+    const { setWatermark, clear } = sourceMap.get(domSymbol) as UseWatermarkRes;
+    return { setWatermark, clear, clearAll };
   }
   const func = useRafThrottle(function () {
     const el = unref(appendEl);
@@ -19,13 +28,13 @@ export function useWatermark(
     const { clientHeight: height, clientWidth: width } = el;
     updateWatermark({ height, width });
   });
-  const id = domSymbol.toString();
   const watermarkEl = shallowRef<HTMLElement>();
 
   const clear = () => {
     const domId = unref(watermarkEl);
     watermarkEl.value = undefined;
     const el = unref(appendEl);
+    sourceMap.delete(domSymbol);
     if (!el) return;
     domId && el.removeChild(domId);
     removeResizeListener(el, func);
@@ -70,25 +79,23 @@ export function useWatermark(
   }
 
   const createWatermark = (str: string) => {
-    if (unref(watermarkEl)) {
+    if (unref(watermarkEl) && sourceMap.has(domSymbol)) {
       updateWatermark({ str });
-      return id;
+      return;
     }
     const div = document.createElement('div');
     watermarkEl.value = div;
-    div.id = id;
     div.style.pointerEvents = 'none';
     div.style.top = '0px';
     div.style.left = '0px';
     div.style.position = 'absolute';
     div.style.zIndex = '100000';
     const el = unref(appendEl);
-    if (!el) return id;
+    if (!el) return;
     const { clientHeight: height, clientWidth: width } = el;
     updateWatermark({ str, width, height });
     el.appendChild(div);
-    sourceMap.set(el, { setWatermark, clear });
-    return id;
+    sourceMap.set(domSymbol, { setWatermark, clear });
   };
 
   function setWatermark(str: string) {
@@ -102,5 +109,11 @@ export function useWatermark(
     }
   }
 
-  return { setWatermark, clear };
+  return { setWatermark, clear, clearAll };
+}
+
+function clearAll() {
+  Array.from(sourceMap.values()).forEach((item) => {
+    item.clear();
+  });
 }
diff --git a/apps/admin/src/layouts/default/feature/index.vue b/apps/admin/src/layouts/default/feature/index.vue
index f387667..3595848 100644
--- a/apps/admin/src/layouts/default/feature/index.vue
+++ b/apps/admin/src/layouts/default/feature/index.vue
@@ -11,6 +11,7 @@
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
+
   export default defineComponent({
     name: 'LayoutFeatures',
     components: {
diff --git a/apps/admin/src/layouts/default/header/MultipleHeader.vue b/apps/admin/src/layouts/default/header/MultipleHeader.vue
index 7244221..bca0489 100644
--- a/apps/admin/src/layouts/default/header/MultipleHeader.vue
+++ b/apps/admin/src/layouts/default/header/MultipleHeader.vue
@@ -2,7 +2,7 @@
   <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
   <div :style="getWrapStyle" :class="getClass">
     <LayoutHeader v-if="getShowInsetHeaderRef" />
-    <MultipleTabs v-if="getShowTabs" />
+    <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
   </div>
 </template>
 <script lang="ts">
@@ -18,6 +18,7 @@
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLayoutHeight } from '../content/useContentViewHeight';
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
 
   const HEADER_HEIGHT = 48;
 
@@ -27,6 +28,7 @@
     components: { LayoutHeader, MultipleTabs },
     setup() {
       const { setHeaderHeight } = useLayoutHeight();
+      const tabStore = useMultipleTabStore();
       const { prefixCls } = useDesign('layout-multiple-header');
 
       const { getCalcContentWidth, getSplit } = useMenuSetting();
@@ -101,6 +103,7 @@
         getIsShowPlaceholderDom,
         getShowTabs,
         getShowInsetHeaderRef,
+        tabStore,
       };
     },
   });
diff --git a/apps/admin/src/layouts/default/header/components/ChangeApi/index.vue b/apps/admin/src/layouts/default/header/components/ChangeApi/index.vue
new file mode 100644
index 0000000..08b15ec
--- /dev/null
+++ b/apps/admin/src/layouts/default/header/components/ChangeApi/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <BasicModal
+    :title="t('layout.header.dropdownChangeApi')"
+    v-bind="$attrs"
+    @register="register"
+    @ok="handelSubmit"
+    @cancel="handelCancel"
+  >
+    <BasicForm @register="registerForm">
+      <template #api="{ model, field }">
+        <RadioGroup v-model:value="model[field]">
+          <Radio :style="radioStyle" :value="key" v-for="(val, key) in addresses" :key="key"
+            >{{ key }}: {{ val }}</Radio
+          >
+        </RadioGroup>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { Radio } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { BasicModal, useModalInner } from '/@/components/Modal/index';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { ref } from 'vue';
+  import { useAppStore } from '/@/store/modules/app';
+  import type { ApiAddress } from '/#/store';
+
+  const appStore = useAppStore();
+  const RadioGroup = Radio.Group;
+  const { t } = useI18n();
+  const [register, { closeModal }] = useModalInner(async () => {
+    initData();
+  });
+  // perf 能读取所有.env.xxx文件最好, 另外key与--mode XXX最好相同
+  const addresses = ref({
+    development: 'http://www.a.com',
+    test: 'http://www.b.com',
+    prod: 'http://www.c.com',
+  });
+  const radioStyle = ref({
+    display: 'flex',
+    height: '30px',
+    lineHeight: '30px',
+  });
+  const [registerForm, { validateFields, setFieldsValue }] = useForm({
+    showActionButtonGroup: false,
+    schemas: [
+      {
+        field: 'api',
+        label: t('layout.header.dropdownChangeApi'),
+        colProps: {
+          span: 24,
+        },
+        defaultValue: import.meta.env.MODE || 'development', // 当前环境
+        required: true,
+        component: 'Input',
+        slot: 'api',
+      },
+    ],
+  });
+  const handelSubmit = async () => {
+    const values = await validateFields();
+    appStore.setApiAddress({
+      key: values.api,
+      val: addresses.value[values.api],
+    });
+    location.reload();
+  };
+  const handelCancel = () => {
+    closeModal();
+  };
+  const initData = () => {
+    const { key = '' } = appStore.getApiAddress as ApiAddress;
+    if (key) {
+      setFieldsValue({
+        api: key,
+      });
+    }
+  };
+</script>
+<style lang="less"></style>
diff --git a/apps/admin/src/layouts/default/header/components/FullScreen.vue b/apps/admin/src/layouts/default/header/components/FullScreen.vue
index 1304e8c..2e124b5 100644
--- a/apps/admin/src/layouts/default/header/components/FullScreen.vue
+++ b/apps/admin/src/layouts/default/header/components/FullScreen.vue
@@ -13,6 +13,7 @@
   import { useFullscreen } from '@vueuse/core';
 
   import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
+
   export default defineComponent({
     name: 'FullScreen',
     components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },
diff --git a/apps/admin/src/layouts/default/header/components/lock/LockModal.vue b/apps/admin/src/layouts/default/header/components/lock/LockModal.vue
index 4e098eb..3a17ec6 100644
--- a/apps/admin/src/layouts/default/header/components/lock/LockModal.vue
+++ b/apps/admin/src/layouts/default/header/components/lock/LockModal.vue
@@ -34,6 +34,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useLockStore } from '/@/store/modules/lock';
   import headerImg from '/@/assets/images/header.jpg';
+
   export default defineComponent({
     name: 'LockModal',
     components: { BasicModal, BasicForm },
@@ -47,7 +48,7 @@
       const getRealName = computed(() => userStore.getUserInfo?.realName);
       const [register, { closeModal }] = useModalInner();
 
-      const [registerForm, { validateFields, resetFields }] = useForm({
+      const [registerForm, { validate, resetFields }] = useForm({
         showActionButtonGroup: false,
         schemas: [
           {
@@ -62,17 +63,20 @@
         ],
       });
 
-      async function handleLock() {
-        const values = (await validateFields()) as any;
-        const password: string | undefined = values.password;
+      const handleLock = async () => {
+        const { password = '' } = await validate<{
+          password: string;
+        }>();
+
         closeModal();
 
         lockStore.setLockInfo({
           isLock: true,
           pwd: password,
         });
+
         await resetFields();
-      }
+      };
 
       const avatar = computed(() => {
         const { avatar } = userStore.getUserInfo;
diff --git a/apps/admin/src/layouts/default/header/components/notify/NoticeList.vue b/apps/admin/src/layouts/default/header/components/notify/NoticeList.vue
index a309266..47e1e24 100644
--- a/apps/admin/src/layouts/default/header/components/notify/NoticeList.vue
+++ b/apps/admin/src/layouts/default/header/components/notify/NoticeList.vue
@@ -59,13 +59,23 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { List, Avatar, Tag, Typography } from 'ant-design-vue';
   import { isNumber } from '/@/utils/is';
+
+  // types
+  import type { StyleValue } from '/@/utils/types';
+  import type { FunctionalComponent } from 'vue';
+  import type { ParagraphProps } from 'ant-design-vue/es/typography/Paragraph';
+
   export default defineComponent({
     components: {
       [Avatar.name]: Avatar,
       [List.name]: List,
       [List.Item.name]: List.Item,
       AListItemMeta: List.Item.Meta,
-      ATypographyParagraph: Typography.Paragraph,
+      ATypographyParagraph: Typography.Paragraph as FunctionalComponent<
+        ParagraphProps & {
+          style?: StyleValue;
+        }
+      >,
       [Tag.name]: Tag,
     },
     props: {
@@ -112,11 +122,15 @@
       const isTitleClickable = computed(() => !!props.onTitleClick);
       const getPagination = computed(() => {
         const { list, pageSize } = props;
-        if (pageSize > 0 && list && list.length > pageSize) {
+
+        // compatible line 104
+        // if typeof pageSize is boolean, Number(true) && 5 = 5, Number(false) && 5 = 0
+        const size = isNumber(pageSize) ? pageSize : Number(pageSize) && 5;
+
+        if (size > 0 && list && list.length > size) {
           return {
             total: list.length,
-            pageSize,
-            //size: 'small',
+            pageSize: size,
             current: unref(current),
             onChange(page) {
               current.value = page;
diff --git a/apps/admin/src/layouts/default/header/components/notify/index.vue b/apps/admin/src/layouts/default/header/components/notify/index.vue
index da66aff..e6883bb 100644
--- a/apps/admin/src/layouts/default/header/components/notify/index.vue
+++ b/apps/admin/src/layouts/default/header/components/notify/index.vue
@@ -66,7 +66,7 @@
   @prefix-cls: ~'@{namespace}-header-notify';
 
   .@{prefix-cls} {
-    padding-top: 2px;
+    padding-bottom: 1px;
 
     &__overlay {
       max-width: 360px;
@@ -77,6 +77,8 @@
     }
 
     .ant-badge {
+      display: flex;
+      align-items: center;
       font-size: 18px;
 
       .ant-badge-multiple-words {
diff --git a/apps/admin/src/layouts/default/header/components/user-dropdown/index.vue b/apps/admin/src/layouts/default/header/components/user-dropdown/index.vue
index 8c46130..7bd9af5 100644
--- a/apps/admin/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/apps/admin/src/layouts/default/header/components/user-dropdown/index.vue
@@ -3,7 +3,7 @@
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
       <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
       <span :class="`${prefixCls}__info hidden md:block`">
-        <span :class="`${prefixCls}__name  `" class="truncate">
+        <span :class="`${prefixCls}__name`" class="truncate">
           {{ getUserInfo.realName }}
         </span>
       </span>
@@ -18,6 +18,12 @@
           v-if="getShowDoc"
         />
         <MenuDivider v-if="getShowDoc" />
+        <MenuItem
+          v-if="getShowApi"
+          key="api"
+          :text="t('layout.header.dropdownChangeApi')"
+          icon="ant-design:swap-outlined"
+        />
         <MenuItem
           v-if="getUseLockPage"
           key="lock"
@@ -33,6 +39,7 @@
     </template>
   </Dropdown>
   <LockAction @register="register" />
+  <ChangeApi @register="registerApi" />
 </template>
 <script lang="ts">
   // components
@@ -55,7 +62,7 @@
 
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-  type MenuEvent = 'logout' | 'doc' | 'lock';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
 
   export default defineComponent({
     name: 'UserDropdown',
@@ -65,6 +72,7 @@
       MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
       MenuDivider: Menu.Divider,
       LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
+      ChangeApi: createAsyncComponent(() => import('../ChangeApi/index.vue')),
     },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),
@@ -72,7 +80,7 @@
     setup() {
       const { prefixCls } = useDesign('header-user-dropdown');
       const { t } = useI18n();
-      const { getShowDoc, getUseLockPage } = useHeaderSetting();
+      const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
       const userStore = useUserStore();
 
       const getUserInfo = computed(() => {
@@ -81,11 +89,16 @@
       });
 
       const [register, { openModal }] = useModal();
+      const [registerApi, { openModal: openApiModal }] = useModal();
 
       function handleLock() {
         openModal(true);
       }
 
+      function handleApi() {
+        openApiModal(true, {});
+      }
+
       //  login out
       function handleLoginOut() {
         userStore.confirmLoginOut();
@@ -107,6 +120,9 @@
           case 'lock':
             handleLock();
             break;
+          case 'api':
+            handleApi();
+            break;
         }
       }
 
@@ -116,7 +132,9 @@
         getUserInfo,
         handleMenuClick,
         getShowDoc,
+        getShowApi,
         register,
+        registerApi,
         getUseLockPage,
       };
     },
diff --git a/apps/admin/src/layouts/default/header/index.less b/apps/admin/src/layouts/default/header/index.less
index b16007e..dc69669 100644
--- a/apps/admin/src/layouts/default/header/index.less
+++ b/apps/admin/src/layouts/default/header/index.less
@@ -3,16 +3,16 @@
 @breadcrumb-prefix-cls: ~'@{namespace}-layout-breadcrumb';
 @logo-prefix-cls: ~'@{namespace}-app-logo';
 
-.@{header-prefix-cls} {
+.ant-layout .@{header-prefix-cls} {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   height: @header-height;
-  padding: 0;
   margin-left: -1px;
-  line-height: @header-height;
-  color: @white;
+  padding: 0;
   background-color: @white;
-  align-items: center;
-  justify-content: space-between;
+  color: @white;
+  line-height: @header-height;
 
   &--mobile {
     .@{breadcrumb-prefix-cls},
@@ -40,15 +40,15 @@
 
   &--fixed {
     position: fixed;
+    z-index: @layout-header-fixed-z-index;
     top: 0;
     left: 0;
-    z-index: @layout-header-fixed-z-index;
     width: 100%;
   }
 
   &-logo {
-    height: @header-height;
     min-width: 192px;
+    height: @header-height;
     padding: 0 10px;
     font-size: 14px;
 
@@ -61,15 +61,15 @@
 
   &-left {
     display: flex;
-    height: 100%;
     align-items: center;
+    height: 100%;
 
     .@{header-trigger-prefix-cls} {
       display: flex;
+      align-items: center;
       height: 100%;
       padding: 1px 10px 0;
       cursor: pointer;
-      align-items: center;
 
       .anticon {
         font-size: 16px;
@@ -94,25 +94,25 @@
   }
 
   &-menu {
-    height: 100%;
-    min-width: 0;
     flex: 1;
     align-items: center;
+    min-width: 0;
+    height: 100%;
   }
 
   &-action {
     display: flex;
-    min-width: 180px;
     // padding-right: 12px;
     align-items: center;
+    min-width: 180px;
 
     &__item {
       display: flex !important;
+      align-items: center;
       height: @header-height;
       padding: 0 2px;
       font-size: 1.2em;
       cursor: pointer;
-      align-items: center;
 
       .ant-badge {
         height: @header-height;
@@ -120,7 +120,7 @@
       }
 
       .ant-badge-dot {
-        top: 10px;
+        top: 14px;
         right: 2px;
       }
     }
@@ -131,9 +131,9 @@
   }
 
   &--light {
-    background-color: @white !important;
     border-bottom: 1px solid @header-light-bottom-border-color;
     border-left: 1px solid @header-light-bottom-border-color;
+    background-color: @white !important;
 
     .@{header-prefix-cls}-logo {
       color: @text-color-base;
@@ -165,9 +165,9 @@
   }
 
   &--dark {
-    background-color: @header-dark-bg-color !important;
-    // border-bottom: 1px solid @border-color-base;
+    border-bottom: 1px solid #303030;
     border-left: 1px solid @border-color-base;
+    background-color: @header-dark-bg-color !important;
     .@{header-prefix-cls}-logo {
       &:hover {
         background-color: @header-dark-bg-hover-color;
diff --git a/apps/admin/src/layouts/default/header/index.vue b/apps/admin/src/layouts/default/header/index.vue
index f911d72..2ffd43c 100644
--- a/apps/admin/src/layouts/default/header/index.vue
+++ b/apps/admin/src/layouts/default/header/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Header :class="getHeaderClass">
+  <Layout.Header :class="getHeaderClass">
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
       <!-- logo -->
@@ -21,7 +21,7 @@
     <!-- left end -->
 
     <!-- menu start -->
-    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+    <div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
       <LayoutMenu
         :isHorizontal="true"
         :theme="getHeaderTheme"
@@ -33,7 +33,7 @@
 
     <!-- action  -->
     <div :class="`${prefixCls}-action`">
-      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+      <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
 
       <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
 
@@ -52,148 +52,100 @@
 
       <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
     </div>
-  </Header>
+  </Layout.Header>
 </template>
-<script lang="ts">
-  import { defineComponent, unref, computed } from 'vue';
-
-  import { propTypes } from '/@/utils/propTypes';
-
+<script lang="ts" setup>
   import { Layout } from 'ant-design-vue';
-  import { AppLogo } from '/@/components/Application';
+  import { computed, unref } from 'vue';
+
+  import { AppLocalePicker, AppLogo, AppSearch } from '@/components/Application';
+  import { SettingButtonPositionEnum } from '@/enums/appEnum';
+  import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useLocale } from '@/locales/useLocale';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+  import { propTypes } from '@/utils/propTypes';
+
   import LayoutMenu from '../menu/index.vue';
   import LayoutTrigger from '../trigger/index.vue';
+  import { ErrorAction, FullScreen, LayoutBreadcrumb, Notify, UserDropDown } from './components';
+
+  const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
+    loading: true,
+  });
+  defineOptions({ name: 'LayoutHeader' });
+
+  const props = defineProps({
+    fixed: propTypes.bool,
+  });
+  const { prefixCls } = useDesign('layout-header');
+  const {
+    getShowTopMenu,
+    getShowHeaderTrigger,
+    getSplit,
+    getIsMixMode,
+    getMenuWidth,
+    getIsMixSidebar,
+  } = useMenuSetting();
+  const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
+
+  const {
+    getHeaderTheme,
+    getShowFullScreen,
+    getShowNotice,
+    getShowContent,
+    getShowBread,
+    getShowHeaderLogo,
+    getShowHeader,
+    getShowSearch,
+  } = useHeaderSetting();
+
+  const { getShowLocalePicker } = useLocale();
+
+  const { getIsMobile } = useAppInject();
+
+  const getHeaderClass = computed(() => {
+    const theme = unref(getHeaderTheme);
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--fixed`]: props.fixed,
+        [`${prefixCls}--mobile`]: unref(getIsMobile),
+        [`${prefixCls}--${theme}`]: theme,
+      },
+    ];
+  });
+
+  const getShowSetting = computed(() => {
+    if (!unref(getShowSettingButton)) {
+      return false;
+    }
+    const settingButtonPosition = unref(getSettingButtonPosition);
+
+    if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+      return unref(getShowHeader);
+    }
+    return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+  });
+
+  const getLogoWidth = computed(() => {
+    if (!unref(getIsMixMode) || unref(getIsMobile)) {
+      return {};
+    }
+    const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+    return { width: `${width}px` };
+  });
+
+  const getSplitType = computed(() => {
+    return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
+  });
 
-  import { AppSearch } from '/@/components/Application';
-
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-
-  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
-  import { AppLocalePicker } from '/@/components/Application';
-
-  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
-
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-  import { useLocale } from '/@/locales/useLocale';
-
-  export default defineComponent({
-    name: 'LayoutHeader',
-    components: {
-      Header: Layout.Header,
-      AppLogo,
-      LayoutTrigger,
-      LayoutBreadcrumb,
-      LayoutMenu,
-      UserDropDown,
-      AppLocalePicker,
-      FullScreen,
-      Notify,
-      AppSearch,
-      ErrorAction,
-      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
-        loading: true,
-      }),
-    },
-    props: {
-      fixed: propTypes.bool,
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('layout-header');
-      const {
-        getShowTopMenu,
-        getShowHeaderTrigger,
-        getSplit,
-        getIsMixMode,
-        getMenuWidth,
-        getIsMixSidebar,
-      } = useMenuSetting();
-      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
-        useRootSetting();
-
-      const {
-        getHeaderTheme,
-        getShowFullScreen,
-        getShowNotice,
-        getShowContent,
-        getShowBread,
-        getShowHeaderLogo,
-        getShowHeader,
-        getShowSearch,
-      } = useHeaderSetting();
-
-      const { getShowLocalePicker } = useLocale();
-
-      const { getIsMobile } = useAppInject();
-
-      const getHeaderClass = computed(() => {
-        const theme = unref(getHeaderTheme);
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--fixed`]: props.fixed,
-            [`${prefixCls}--mobile`]: unref(getIsMobile),
-            [`${prefixCls}--${theme}`]: theme,
-          },
-        ];
-      });
-
-      const getShowSetting = computed(() => {
-        if (!unref(getShowSettingButton)) {
-          return false;
-        }
-        const settingButtonPosition = unref(getSettingButtonPosition);
-
-        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
-          return unref(getShowHeader);
-        }
-        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
-      });
-
-      const getLogoWidth = computed(() => {
-        if (!unref(getIsMixMode) || unref(getIsMobile)) {
-          return {};
-        }
-        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
-        return { width: `${width}px` };
-      });
-
-      const getSplitType = computed(() => {
-        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
-      });
-
-      const getMenuMode = computed(() => {
-        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
-      });
-
-      return {
-        prefixCls,
-        getHeaderClass,
-        getShowHeaderLogo,
-        getHeaderTheme,
-        getShowHeaderTrigger,
-        getIsMobile,
-        getShowBread,
-        getShowContent,
-        getSplitType,
-        getSplit,
-        getMenuMode,
-        getShowTopMenu,
-        getShowLocalePicker,
-        getShowFullScreen,
-        getShowNotice,
-        getUseErrorHandle,
-        getLogoWidth,
-        getIsMixSidebar,
-        getShowSettingButton,
-        getShowSetting,
-        getShowSearch,
-      };
-    },
+  const getMenuMode = computed(() => {
+    return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
   });
 </script>
 <style lang="less">
diff --git a/apps/admin/src/layouts/default/setting/SettingDrawer.tsx b/apps/admin/src/layouts/default/setting/SettingDrawer.tsx
index d581000..1375463 100644
--- a/apps/admin/src/layouts/default/setting/SettingDrawer.tsx
+++ b/apps/admin/src/layouts/default/setting/SettingDrawer.tsx
@@ -3,7 +3,7 @@ import { BasicDrawer } from '/@/components/Drawer/index';
 import { Divider } from 'ant-design-vue';
 import {
   TypePicker,
-  ThemeColorPicker,
+  // ThemeColorPicker,
   SettingFooter,
   SwitchItem,
   SelectItem,
@@ -33,11 +33,11 @@ import {
   mixSidebarTriggerOptions,
 } from './enum';
 
-import {
-  HEADER_PRESET_BG_COLOR_LIST,
-  SIDE_BAR_BG_COLOR_LIST,
-  APP_PRESET_COLOR_LIST,
-} from '/@/settings/designSetting';
+// import {
+//   HEADER_PRESET_BG_COLOR_LIST,
+//   SIDE_BAR_BG_COLOR_LIST,
+//   APP_PRESET_COLOR_LIST,
+// } from '/@/settings/designSetting';
 
 const { t } = useI18n();
 
@@ -55,7 +55,7 @@ export default defineComponent({
       getGrayMode,
       getLockTime,
       getShowDarkModeToggle,
-      getThemeColor,
+      // getThemeColor,
     } = useRootSetting();
 
     const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
@@ -73,7 +73,7 @@ export default defineComponent({
       getTopMenuAlign,
       getAccordion,
       getMenuWidth,
-      getMenuBgColor,
+      // getMenuBgColor,
       getIsTopMenu,
       getSplit,
       getIsMixSidebar,
@@ -85,7 +85,7 @@ export default defineComponent({
     const {
       getShowHeader,
       getFixed: getHeaderFixed,
-      getHeaderBgColor,
+      // getHeaderBgColor,
       getShowSearch,
     } = useHeaderSetting();
 
@@ -113,35 +113,35 @@ export default defineComponent({
       );
     }
 
-    function renderHeaderTheme() {
-      return (
-        <ThemeColorPicker
-          colorList={HEADER_PRESET_BG_COLOR_LIST}
-          def={unref(getHeaderBgColor)}
-          event={HandlerEnum.HEADER_THEME}
-        />
-      );
-    }
-
-    function renderSiderTheme() {
-      return (
-        <ThemeColorPicker
-          colorList={SIDE_BAR_BG_COLOR_LIST}
-          def={unref(getMenuBgColor)}
-          event={HandlerEnum.MENU_THEME}
-        />
-      );
-    }
-
-    function renderMainTheme() {
-      return (
-        <ThemeColorPicker
-          colorList={APP_PRESET_COLOR_LIST}
-          def={unref(getThemeColor)}
-          event={HandlerEnum.CHANGE_THEME_COLOR}
-        />
-      );
-    }
+    // function renderHeaderTheme() {
+    //   return (
+    //     <ThemeColorPicker
+    //       colorList={HEADER_PRESET_BG_COLOR_LIST}
+    //       def={unref(getHeaderBgColor)}
+    //       event={HandlerEnum.HEADER_THEME}
+    //     />
+    //   );
+    // }
+
+    // function renderSiderTheme() {
+    //   return (
+    //     <ThemeColorPicker
+    //       colorList={SIDE_BAR_BG_COLOR_LIST}
+    //       def={unref(getMenuBgColor)}
+    //       event={HandlerEnum.MENU_THEME}
+    //     />
+    //   );
+    // }
+
+    // function renderMainTheme() {
+    //   return (
+    //     <ThemeColorPicker
+    //       colorList={APP_PRESET_COLOR_LIST}
+    //       def={unref(getThemeColor)}
+    //       event={HandlerEnum.CHANGE_THEME_COLOR}
+    //     />
+    //   );
+    // }
 
     /**
      * @description:
@@ -412,8 +412,8 @@ export default defineComponent({
         <Divider>{() => t('layout.setting.headerTheme')}</Divider>
         {renderHeaderTheme()}
         <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
-        {renderSiderTheme()}
-        <Divider>{() => t('layout.setting.interfaceFunction')}</Divider> */}
+        {renderSiderTheme()} */}
+        <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
         {renderFeatures()}
         <Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
         {renderContent()}
diff --git a/apps/admin/src/layouts/default/setting/components/SelectItem.vue b/apps/admin/src/layouts/default/setting/components/SelectItem.vue
index 676ca91..dcfd9b6 100644
--- a/apps/admin/src/layouts/default/setting/components/SelectItem.vue
+++ b/apps/admin/src/layouts/default/setting/components/SelectItem.vue
@@ -14,7 +14,7 @@
 <script lang="ts">
   import { defineComponent, PropType, computed } from 'vue';
 
-  import { Select } from 'ant-design-vue';
+  import { Select, type SelectProps } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { baseHandler } from '../handler';
   import { HandlerEnum } from '../enum';
@@ -49,9 +49,10 @@
         return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
       });
 
-      function handleChange(e: ChangeEvent) {
-        props.event && baseHandler(props.event, e);
-      }
+      const handleChange: SelectProps['onChange'] = (val) => {
+        props.event && baseHandler(props.event, val);
+      };
+
       return {
         prefixCls,
         handleChange,
diff --git a/apps/admin/src/layouts/default/setting/components/SettingFooter.vue b/apps/admin/src/layouts/default/setting/components/SettingFooter.vue
index d243795..3881639 100644
--- a/apps/admin/src/layouts/default/setting/components/SettingFooter.vue
+++ b/apps/admin/src/layouts/default/setting/components/SettingFooter.vue
@@ -29,8 +29,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-
+  import { copyText } from '/@/utils/copyTextToClipboard';
   import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
   import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
   import defaultSetting from '/@/settings/projectSetting';
@@ -49,14 +48,12 @@
       const appStore = useAppStore();
 
       function handleCopy() {
-        const { isSuccessRef } = useCopyToClipboard(
-          JSON.stringify(unref(appStore.getProjectConfig), null, 2),
-        );
-        unref(isSuccessRef) &&
-          createSuccessModal({
-            title: t('layout.setting.operatingTitle'),
-            content: t('layout.setting.operatingContent'),
-          });
+        copyText(JSON.stringify(unref(appStore.getProjectConfig), null, 2), null);
+
+        createSuccessModal({
+          title: t('layout.setting.operatingTitle'),
+          content: t('layout.setting.operatingContent'),
+        });
       }
       function handleResetSetting() {
         try {
diff --git a/apps/admin/src/layouts/default/setting/components/SwitchItem.vue b/apps/admin/src/layouts/default/setting/components/SwitchItem.vue
index ff27477..74fd51c 100644
--- a/apps/admin/src/layouts/default/setting/components/SwitchItem.vue
+++ b/apps/admin/src/layouts/default/setting/components/SwitchItem.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
   import { defineComponent, PropType, computed } from 'vue';
 
-  import { Switch } from 'ant-design-vue';
+  import { Switch, type SwitchProps } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { baseHandler } from '../handler';
@@ -43,9 +43,11 @@
       const getBindValue = computed(() => {
         return props.def ? { checked: props.def } : {};
       });
-      function handleChange(e: ChangeEvent) {
-        props.event && baseHandler(props.event, e);
-      }
+
+      const handleChange: SwitchProps['onChange'] = (val) => {
+        props.event && baseHandler(props.event, val);
+      };
+
       return {
         prefixCls,
         t,
diff --git a/apps/admin/src/layouts/default/setting/components/TypePicker.vue b/apps/admin/src/layouts/default/setting/components/TypePicker.vue
index 3015a70..d13f7d7 100644
--- a/apps/admin/src/layouts/default/setting/components/TypePicker.vue
+++ b/apps/admin/src/layouts/default/setting/components/TypePicker.vue
@@ -25,6 +25,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { menuTypeList } from '../enum';
+
   export default defineComponent({
     name: 'MenuTypePicker',
     components: { Tooltip },
diff --git a/apps/admin/src/layouts/default/sider/LayoutSider.vue b/apps/admin/src/layouts/default/sider/LayoutSider.vue
index 960ca69..7fd712f 100644
--- a/apps/admin/src/layouts/default/sider/LayoutSider.vue
+++ b/apps/admin/src/layouts/default/sider/LayoutSider.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="getMenuFixed && !getIsMobile"
-    :style="getHiddenDomStyle"
     v-show="showClassSideBarRef"
+    :style="getHiddenDomStyle"
   ></div>
-  <Sider
+  <Layout.Sider
     v-show="showClassSideBarRef"
     ref="sideRef"
     breakpoint="lg"
@@ -14,122 +14,94 @@
     :collapsed="getCollapsed"
     :collapsedWidth="getCollapsedWidth"
     :theme="getMenuTheme"
-    @breakpoint="onBreakpointChange"
     :trigger="getTrigger"
     v-bind="getTriggerAttr"
+    @breakpoint="onBreakpointChange"
   >
-    <template #trigger v-if="getShowTrigger">
+    <template v-if="getShowTrigger" #trigger>
       <LayoutTrigger />
     </template>
     <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
     <DragBar ref="dragBarRef" />
-  </Sider>
+  </Layout.Sider>
 </template>
-<script lang="ts">
-  import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
-
+<script lang="ts" setup>
   import { Layout } from 'ant-design-vue';
+  import { computed, CSSProperties, h, ref, unref } from 'vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import LayoutTrigger from '@/layouts/default/trigger/index.vue';
+
   import LayoutMenu from '../menu/index.vue';
-  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+  import DragBar from './DragBar.vue';
+  import { useDragLine, useSiderEvent, useTrigger } from './useLayoutSider';
 
-  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+  defineOptions({ name: 'LayoutSideBar' });
 
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  const dragBarRef = ref(null);
+  const sideRef = ref(null);
 
-  import DragBar from './DragBar.vue';
-  export default defineComponent({
-    name: 'LayoutSideBar',
-    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
-    setup() {
-      const dragBarRef = ref(null);
-      const sideRef = ref(null);
-
-      const {
-        getCollapsed,
-        getMenuWidth,
-        getSplit,
-        getMenuTheme,
-        getRealWidth,
-        getMenuHidden,
-        getMenuFixed,
-        getIsMixMode,
-        toggleCollapsed,
-      } = useMenuSetting();
-
-      const { prefixCls } = useDesign('layout-sideBar');
-
-      const { getIsMobile } = useAppInject();
-
-      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
-
-      useDragLine(sideRef, dragBarRef);
-
-      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
-
-      const getMode = computed(() => {
-        return unref(getSplit) ? MenuModeEnum.INLINE : null;
-      });
-
-      const getSplitType = computed(() => {
-        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
-      });
-
-      const showClassSideBarRef = computed(() => {
-        return unref(getSplit) ? !unref(getMenuHidden) : true;
-      });
-
-      const getSiderClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--fixed`]: unref(getMenuFixed),
-            [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
-          },
-        ];
-      });
-
-      const getHiddenDomStyle = computed((): CSSProperties => {
-        const width = `${unref(getRealWidth)}px`;
-        return {
-          width: width,
-          overflow: 'hidden',
-          flex: `0 0 ${width}`,
-          maxWidth: width,
-          minWidth: width,
-          transition: 'all 0.2s',
-        };
-      });
-
-      // 在此处使用计算量可能会导致sider异常
-      // andv 更新后，如果trigger插槽可用，则此处代码可废弃
-      const getTrigger = h(LayoutTrigger);
-
-      return {
-        prefixCls,
-        sideRef,
-        dragBarRef,
-        getIsMobile,
-        getHiddenDomStyle,
-        getSiderClass,
-        getTrigger,
-        getTriggerAttr,
-        getCollapsedWidth,
-        getMenuFixed,
-        showClassSideBarRef,
-        getMenuWidth,
-        getCollapsed,
-        getMenuTheme,
-        onBreakpointChange,
-        getMode,
-        getSplitType,
-        getShowTrigger,
-        toggleCollapsed,
-      };
-    },
+  const {
+    getCollapsed,
+    getMenuWidth,
+    getSplit,
+    getMenuTheme,
+    getRealWidth,
+    getMenuHidden,
+    getMenuFixed,
+    getIsMixMode,
+  } = useMenuSetting();
+
+  const { prefixCls } = useDesign('layout-sideBar');
+
+  const { getIsMobile } = useAppInject();
+
+  const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
+
+  useDragLine(sideRef, dragBarRef);
+
+  const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
+
+  const getMode = computed(() => {
+    return unref(getSplit) ? MenuModeEnum.INLINE : null;
+  });
+
+  const getSplitType = computed(() => {
+    return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+  });
+
+  const showClassSideBarRef = computed(() => {
+    return unref(getSplit) ? !unref(getMenuHidden) : true;
+  });
+
+  const getSiderClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--fixed`]: unref(getMenuFixed),
+        [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+      },
+    ];
   });
+
+  const getHiddenDomStyle = computed((): CSSProperties => {
+    const width = `${unref(getRealWidth)}px`;
+    return {
+      width,
+      overflow: 'hidden',
+      flex: `0 0 ${width}`,
+      maxWidth: width,
+      minWidth: width,
+      transition: 'all 0.2s',
+    };
+  });
+
+  // 在此处使用计算量可能会导致sider异常
+  // andv 更新后，如果trigger插槽可用，则此处代码可废弃
+  const getTrigger = h(LayoutTrigger);
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-sideBar';
@@ -138,7 +110,7 @@
     z-index: @layout-sider-fixed-z-index;
 
     &--fixed {
-      position: fixed;
+      position: fixed !important;
       top: 0;
       left: 0;
       height: 100%;
diff --git a/apps/admin/src/layouts/default/sider/MixSider.vue b/apps/admin/src/layouts/default/sider/MixSider.vue
index da05e97..d11e6f6 100644
--- a/apps/admin/src/layouts/default/sider/MixSider.vue
+++ b/apps/admin/src/layouts/default/sider/MixSider.vue
@@ -31,7 +31,13 @@
           :key="item.path"
         >
           <SimpleMenuTag :item="item" collapseParent dot />
+          <img
+            v-if="item.img"
+            :src="item.img"
+            :class="[`${prefixCls}-module__icon`, getCollapsed ? 'w-16px h-16px' : 'w-20px h-20px']"
+          />
           <Icon
+            v-else
             :class="`${prefixCls}-module__icon`"
             :size="getCollapsed ? 16 : 20"
             :icon="item.icon || (item.meta && item.meta.icon)"
@@ -83,7 +89,7 @@
   import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
   import { ScrollContainer } from '/@/components/Container';
-  import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu';
+  import { SimpleMenu } from '/@/components/SimpleMenu';
   import Icon from '@/components/Icon/Icon.vue';
   import { AppLogo } from '/@/components/Application';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@@ -98,6 +104,7 @@
   import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus';
   import { listenerRouteChange } from '/@/logics/mitt/routeChange';
   import LayoutTrigger from '../trigger/index.vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   export default defineComponent({
     name: 'LayoutMixSider',
@@ -107,7 +114,9 @@
       SimpleMenu,
       Icon,
       LayoutTrigger,
-      SimpleMenuTag,
+      SimpleMenuTag: createAsyncComponent(
+        () => import('/@/components/SimpleMenu/src/SimpleMenuTag.vue'),
+      ),
     },
     directives: {
       clickOutside,
diff --git a/apps/admin/src/layouts/default/sider/index.vue b/apps/admin/src/layouts/default/sider/index.vue
index d5357f4..1f73fd7 100644
--- a/apps/admin/src/layouts/default/sider/index.vue
+++ b/apps/admin/src/layouts/default/sider/index.vue
@@ -4,8 +4,8 @@
     placement="left"
     :class="prefixCls"
     :width="getMenuWidth"
-    :getContainer="null"
-    :visible="!getCollapsed"
+    :getContainer="false"
+    :open="!getCollapsed"
     @close="handleClose"
   >
     <Sider />
@@ -13,6 +13,7 @@
   <MixSider v-else-if="getIsMixSidebar" />
   <Sider v-else />
 </template>
+
 <script lang="ts">
   import { defineComponent } from 'vue';
 
@@ -23,6 +24,7 @@
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
+
   export default defineComponent({
     name: 'SiderWrapper',
     components: { Sider, Drawer, MixSider },
diff --git a/apps/admin/src/layouts/default/tabs/components/TabRedo.vue b/apps/admin/src/layouts/default/tabs/components/TabRedo.vue
index a6fa657..9c038aa 100644
--- a/apps/admin/src/layouts/default/tabs/components/TabRedo.vue
+++ b/apps/admin/src/layouts/default/tabs/components/TabRedo.vue
@@ -31,3 +31,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  span.anticon-redo {
+    vertical-align: baseline !important;
+  }
+</style>
diff --git a/apps/admin/src/layouts/default/tabs/index.less b/apps/admin/src/layouts/default/tabs/index.less
index e6cdeb3..dbe58ee 100644
--- a/apps/admin/src/layouts/default/tabs/index.less
+++ b/apps/admin/src/layouts/default/tabs/index.less
@@ -1,13 +1,5 @@
 @prefix-cls: ~'@{namespace}-multiple-tabs';
 
-html[data-theme='dark'] {
-  .@{prefix-cls} {
-    .ant-tabs-tab {
-      border-bottom: 1px solid @border-color-base;
-    }
-  }
-}
-
 html[data-theme='light'] {
   .@{prefix-cls} {
     .ant-tabs-tab:not(.ant-tabs-tab-active) {
@@ -19,9 +11,9 @@ html[data-theme='light'] {
 .@{prefix-cls} {
   z-index: 10;
   height: @multiple-height + 2;
-  line-height: @multiple-height + 2;
-  background-color: @component-background;
   border-bottom: 1px solid @border-color-base;
+  background-color: @component-background;
+  line-height: @multiple-height + 2;
 
   .ant-tabs-small {
     height: @multiple-height;
@@ -29,11 +21,11 @@ html[data-theme='light'] {
 
   .ant-tabs.ant-tabs-card {
     .ant-tabs-nav {
-      padding-top: 2px;
       height: @multiple-height;
       margin: 0;
-      background-color: @component-background;
+      padding-top: 2px;
       border: 0;
+      background-color: @component-background;
       box-shadow: none;
 
       .ant-tabs-nav-container {
@@ -44,10 +36,10 @@ html[data-theme='light'] {
       .ant-tabs-tab {
         height: calc(@multiple-height - 2px);
         padding-right: 12px;
-        line-height: calc(@multiple-height - 2px);
-        color: @text-color-base;
-        background-color: @component-background;
         transition: none;
+        background-color: @component-background;
+        color: @text-color-base;
+        line-height: calc(@multiple-height - 2px);
 
         &:hover {
           .ant-tabs-tab-remove {
@@ -58,12 +50,12 @@ html[data-theme='light'] {
         .ant-tabs-tab-remove {
           width: 8px;
           height: 28px;
-          font-size: 12px;
-          color: inherit;
-          opacity: 0;
-          transition: none;
-          margin-left: 2px;
           margin-right: -4px;
+          margin-left: 2px;
+          transition: none;
+          opacity: 0;
+          color: inherit;
+          font-size: 12px;
 
           &:hover {
             svg {
@@ -92,9 +84,9 @@ html[data-theme='light'] {
       .ant-tabs-tab-active {
         position: relative;
         padding-left: 18px;
-        background: @primary-color;
-        border: 0;
         transition: none;
+        border: 0;
+        background: @primary-color;
 
         span {
           color: @white !important;
@@ -147,11 +139,11 @@ html[data-theme='light'] {
       display: inline-block;
       width: 36px;
       height: @multiple-height;
-      line-height: @multiple-height;
+      border-left: 1px solid @border-color-base;
       color: @text-color-secondary;
+      line-height: @multiple-height;
       text-align: center;
       cursor: pointer;
-      border-left: 1px solid @border-color-base;
 
       &:hover {
         color: @text-color-base;
@@ -172,8 +164,8 @@ html[data-theme='light'] {
       display: inline-block;
       width: 100%;
       height: @multiple-height - 2;
-      padding-left: 0;
       margin-left: -10px;
+      padding-left: 0;
       font-size: 12px;
       cursor: pointer;
       user-select: none;
diff --git a/apps/admin/src/layouts/default/tabs/index.vue b/apps/admin/src/layouts/default/tabs/index.vue
index 3b487bb..a5195cd 100644
--- a/apps/admin/src/layouts/default/tabs/index.vue
+++ b/apps/admin/src/layouts/default/tabs/index.vue
@@ -8,7 +8,7 @@
       :tabBarGutter="3"
       :activeKey="activeKeyRef"
       @change="handleChange"
-      @edit="handleEdit"
+      @edit="(e) => handleEdit(`${e}`)"
     >
       <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
         <TabPane :closable="!(item && item.meta && item.meta.affix)">
diff --git a/apps/admin/src/layouts/default/tabs/useMultipleTabs.ts b/apps/admin/src/layouts/default/tabs/useMultipleTabs.ts
index 71b9029..d02e3e3 100644
--- a/apps/admin/src/layouts/default/tabs/useMultipleTabs.ts
+++ b/apps/admin/src/layouts/default/tabs/useMultipleTabs.ts
@@ -6,6 +6,9 @@ import { useMultipleTabStore } from '/@/store/modules/multipleTab';
 import { isNullAndUnDef } from '/@/utils/is';
 import projectSetting from '/@/settings/projectSetting';
 import { useRouter } from 'vue-router';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
 
 export function initAffixTabs(): string[] {
   const affixList = ref<RouteLocationNormalized[]>([]);
@@ -60,10 +63,10 @@ export function useTabsDrag(affixTextList: string[]) {
       `.${prefixCls} .ant-tabs-nav-wrap > div`,
     )?.[0] as HTMLElement;
     const { initSortable } = useSortable(el, {
-      filter: (e: ChangeEvent) => {
-        const text = e?.target?.innerText;
+      filter: (_evt, target: HTMLElement) => {
+        const text = target.innerText;
         if (!text) return false;
-        return affixTextList.includes(text);
+        return affixTextList.map((res) => t(res)).includes(text);
       },
       onEnd: (evt) => {
         const { oldIndex, newIndex } = evt;
diff --git a/apps/admin/src/layouts/default/trigger/HeaderTrigger.vue b/apps/admin/src/layouts/default/trigger/HeaderTrigger.vue
index d7dbb23..391b7fc 100644
--- a/apps/admin/src/layouts/default/trigger/HeaderTrigger.vue
+++ b/apps/admin/src/layouts/default/trigger/HeaderTrigger.vue
@@ -3,23 +3,15 @@
     <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
 
-  export default defineComponent({
-    name: 'HeaderTrigger',
-    components: { MenuUnfoldOutlined, MenuFoldOutlined },
-    props: {
-      theme: propTypes.oneOf(['light', 'dark']),
-    },
-    setup() {
-      const { getCollapsed, toggleCollapsed } = useMenuSetting();
-      const { prefixCls } = useDesign('layout-header-trigger');
-      return { getCollapsed, toggleCollapsed, prefixCls };
-    },
+  defineProps({
+    theme: propTypes.oneOf(['light', 'dark']),
   });
+  const { getCollapsed, toggleCollapsed } = useMenuSetting();
+  const { prefixCls } = useDesign('layout-header-trigger');
 </script>
diff --git a/apps/admin/src/layouts/default/trigger/SiderTrigger.vue b/apps/admin/src/layouts/default/trigger/SiderTrigger.vue
index 0eb38b5..ab0d057 100644
--- a/apps/admin/src/layouts/default/trigger/SiderTrigger.vue
+++ b/apps/admin/src/layouts/default/trigger/SiderTrigger.vue
@@ -4,18 +4,9 @@
     <DoubleLeftOutlined v-else />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 
-  export default defineComponent({
-    name: 'SiderTrigger',
-    components: { DoubleRightOutlined, DoubleLeftOutlined },
-    setup() {
-      const { getCollapsed, toggleCollapsed } = useMenuSetting();
-
-      return { getCollapsed, toggleCollapsed };
-    },
-  });
+  const { getCollapsed, toggleCollapsed } = useMenuSetting();
 </script>
diff --git a/apps/admin/src/layouts/default/trigger/index.vue b/apps/admin/src/layouts/default/trigger/index.vue
index 61f43b3..5a070e1 100644
--- a/apps/admin/src/layouts/default/trigger/index.vue
+++ b/apps/admin/src/layouts/default/trigger/index.vue
@@ -2,21 +2,14 @@
   <SiderTrigger v-if="sider" />
   <HeaderTrigger v-else :theme="theme" />
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+<script lang="ts"></script>
+<script lang="ts" setup>
   import { propTypes } from '/@/utils/propTypes';
   import HeaderTrigger from './HeaderTrigger.vue';
+  import SiderTrigger from './SiderTrigger.vue';
 
-  export default defineComponent({
-    name: 'LayoutTrigger',
-    components: {
-      SiderTrigger: createAsyncComponent(() => import('./SiderTrigger.vue')),
-      HeaderTrigger: HeaderTrigger,
-    },
-    props: {
-      sider: propTypes.bool.def(true),
-      theme: propTypes.oneOf(['light', 'dark']),
-    },
+  defineProps({
+    sider: propTypes.bool.def(true),
+    theme: propTypes.oneOf(['light', 'dark']),
   });
 </script>
diff --git a/apps/admin/src/locales/lang/en.ts b/apps/admin/src/locales/lang/en.ts
index f2bf247..a25bf56 100644
--- a/apps/admin/src/locales/lang/en.ts
+++ b/apps/admin/src/locales/lang/en.ts
@@ -1,10 +1,10 @@
 import { genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/en_US';
 
-const modules = import.meta.globEager('./en/**/*.ts');
+const modules = import.meta.glob('./en/**/*.json', { eager: true });
 export default {
   message: {
-    ...genMessage(modules, 'en'),
+    ...genMessage(modules as Recordable<Recordable>, 'en'),
     antdLocale,
   },
   dateLocale: null,
diff --git a/apps/admin/src/locales/lang/en/common.json b/apps/admin/src/locales/lang/en/common.json
new file mode 100644
index 0000000..8c5de53
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/common.json
@@ -0,0 +1,17 @@
+{
+  "okText": "OK", 
+  "closeText": "Close", 
+  "cancelText": "Cancel", 
+  "loadingText": "Loading...", 
+  "saveText": "Save", 
+  "delText": "Delete", 
+  "resetText": "Reset", 
+  "searchText": "Search", 
+  "queryText": "Search", 
+  "inputText": "Please enter ", 
+  "chooseText": "Please choose ", 
+  "redo": "Refresh", 
+  "back": "Back", 
+  "light": "Light", 
+  "dark": "Dark"
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/en/common.ts b/apps/admin/src/locales/lang/en/common.ts
deleted file mode 100644
index f7cdce0..0000000
--- a/apps/admin/src/locales/lang/en/common.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-  okText: 'OK',
-  closeText: 'Close',
-  cancelText: 'Cancel',
-  loadingText: 'Loading...',
-  saveText: 'Save',
-  delText: 'Delete',
-  resetText: 'Reset',
-  searchText: 'Search',
-  queryText: 'Search',
-
-  inputText: 'Please enter',
-  chooseText: 'Please choose',
-
-  redo: 'Refresh',
-  back: 'Back',
-
-  light: 'Light',
-  dark: 'Dark',
-};
diff --git a/apps/admin/src/locales/lang/en/component.json b/apps/admin/src/locales/lang/en/component.json
new file mode 100644
index 0000000..9d4951c
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/component.json
@@ -0,0 +1,125 @@
+{
+  "app": {
+    "searchNotData": "No search results yet", 
+    "toSearch": "to search", 
+    "toNavigate": "to navigate"
+  }, 
+  "countdown": {
+    "normalText": "Get SMS code", 
+    "sendText": "Reacquire in {0}s"
+  }, 
+  "cropper": {
+    "selectImage": "Select Image", 
+    "uploadSuccess": "Uploaded success!", 
+    "imageTooBig": "Image too big", 
+    "modalTitle": "Avatar upload", 
+    "okText": "Confirm and upload", 
+    "btn_reset": "Reset", 
+    "btn_rotate_left": "Counterclockwise rotation", 
+    "btn_rotate_right": "Clockwise rotation", 
+    "btn_scale_x": "Flip horizontal", 
+    "btn_scale_y": "Flip vertical", 
+    "btn_zoom_in": "Zoom in", 
+    "btn_zoom_out": "Zoom out", 
+    "preview": "Preivew"
+  }, 
+  "drawer": {
+    "loadingText": "Loading...", 
+    "cancelText": "Close", 
+    "okText": "Confirm"
+  }, 
+  "excel": {
+    "exportModalTitle": "Export data", 
+    "fileType": "File type", 
+    "fileName": "File name"
+  }, 
+  "form": {
+    "putAway": "Put away", 
+    "unfold": "Unfold", 
+    "maxTip": "The number of characters should be less than {0}", 
+    "apiSelectNotFound": "Wait for data loading to complete..."
+  }, 
+  "icon": {
+    "placeholder": "Click the select icon", 
+    "search": "Search icon", 
+    "copy": "Copy icon successfully!"
+  }, 
+  "menu": {
+    "search": "Menu search"
+  }, 
+  "modal": {
+    "cancelText": "Close", 
+    "okText": "Confirm", 
+    "close": "Close", 
+    "maximize": "Maximize", 
+    "restore": "Restore"
+  }, 
+  "table": {
+    "settingDens": "Density", 
+    "settingDensDefault": "Default", 
+    "settingDensMiddle": "Middle", 
+    "settingDensSmall": "Compact", 
+    "settingColumn": "Column settings", 
+    "settingColumnShow": "Column display", 
+    "settingIndexColumnShow": "Index Column", 
+    "settingSelectColumnShow": "Selection Column", 
+    "settingFixedLeft": "Fixed Left", 
+    "settingFixedRight": "Fixed Right", 
+    "settingFullScreen": "Full Screen", 
+    "index": "Index", 
+    "total": "total of {total}"
+  }, 
+  "time": {
+    "before": " ago", 
+    "after": " after", 
+    "just": "just now", 
+    "seconds": " seconds", 
+    "minutes": " minutes", 
+    "hours": " hours", 
+    "days": " days"
+  }, 
+  "tree": {
+    "selectAll": "Select All", 
+    "unSelectAll": "Cancel Select", 
+    "expandAll": "Expand All", 
+    "unExpandAll": "Collapse all", 
+    "checkStrictly": "Hierarchical association", 
+    "checkUnStrictly": "Hierarchical independence"
+  }, 
+  "upload": {
+    "save": "Save", 
+    "upload": "Upload", 
+    "imgUpload": "ImageUpload", 
+    "uploaded": "Uploaded", 
+    "operating": "Operating", 
+    "del": "Delete", 
+    "download": "download", 
+    "saveWarn": "Please wait for the file to upload and save!", 
+    "saveError": "There is no file successfully uploaded and cannot be saved!", 
+    "preview": "Preview", 
+    "choose": "Select the file", 
+    "accept": "Support {0} format", 
+    "acceptUpload": "Only upload files in {0} format", 
+    "maxSize": "A single file does not exceed {0}MB ", 
+    "maxSizeMultiple": "Only upload files up to {0}MB!", 
+    "maxNumber": "Only upload up to {0} files", 
+    "legend": "Legend", 
+    "fileName": "File name", 
+    "fileSize": "File size", 
+    "fileStatue": "File status", 
+    "pending": "Pendig",
+    "startUpload": "Start upload", 
+    "uploadSuccess": "Upload successfully", 
+    "uploadError": "Upload failed", 
+    "uploading": "Uploading", 
+    "uploadWait": "Please wait for the file upload to finish", 
+    "reUploadFailed": "Re-upload failed files"
+  }, 
+  "verify": {
+    "error": "verification failed！", 
+    "time": "The verification is successful and it takes {time} seconds！", 
+    "redoTip": "Click the picture to refresh", 
+    "dragText": "Hold down the slider and drag", 
+    "successText": "Verified"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/en/component.ts b/apps/admin/src/locales/lang/en/component.ts
deleted file mode 100644
index b93dbd5..0000000
--- a/apps/admin/src/locales/lang/en/component.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-export default {
-  app: {
-    searchNotData: 'No search results yet',
-    toSearch: 'to search',
-    toNavigate: 'to navigate',
-  },
-  countdown: {
-    normalText: 'Get SMS code',
-    sendText: 'Reacquire in {0}s',
-  },
-  cropper: {
-    selectImage: 'Select Image',
-    uploadSuccess: 'Uploaded success!',
-    modalTitle: 'Avatar upload',
-    okText: 'Confirm and upload',
-    btn_reset: 'Reset',
-    btn_rotate_left: 'Counterclockwise rotation',
-    btn_rotate_right: 'Clockwise rotation',
-    btn_scale_x: 'Flip horizontal',
-    btn_scale_y: 'Flip vertical',
-    btn_zoom_in: 'Zoom in',
-    btn_zoom_out: 'Zoom out',
-    preview: 'Preivew',
-  },
-  drawer: {
-    loadingText: 'Loading...',
-    cancelText: 'Close',
-    okText: 'Confirm',
-  },
-  excel: {
-    exportModalTitle: 'Export data',
-    fileType: 'File type',
-    fileName: 'File name',
-  },
-  form: {
-    putAway: 'Put away',
-    unfold: 'Unfold',
-    maxTip: 'The number of characters should be less than {0}',
-    apiSelectNotFound: 'Wait for data loading to complete...',
-  },
-  icon: {
-    placeholder: 'Click the select icon',
-    search: 'Search icon',
-    copy: 'Copy icon successfully!',
-  },
-  menu: {
-    search: 'Menu search',
-  },
-  modal: {
-    cancelText: 'Close',
-    okText: 'Confirm',
-    close: 'Close',
-    maximize: 'Maximize',
-    restore: 'Restore',
-  },
-  table: {
-    settingDens: 'Density',
-    settingDensDefault: 'Default',
-    settingDensMiddle: 'Middle',
-    settingDensSmall: 'Compact',
-    settingColumn: 'Column settings',
-    settingColumnShow: 'Column display',
-    settingIndexColumnShow: 'Index Column',
-    settingSelectColumnShow: 'Selection Column',
-    settingFixedLeft: 'Fixed Left',
-    settingFixedRight: 'Fixed Right',
-    settingFullScreen: 'Full Screen',
-    index: 'Index',
-    total: 'total of {total}',
-  },
-  time: {
-    before: ' ago',
-    after: ' after',
-    just: 'just now',
-    seconds: ' seconds',
-    minutes: ' minutes',
-    hours: ' hours',
-    days: ' days',
-  },
-  tree: {
-    selectAll: 'Select All',
-    unSelectAll: 'Cancel Select',
-    expandAll: 'Expand All',
-    unExpandAll: 'Collapse all',
-
-    checkStrictly: 'Hierarchical association',
-    checkUnStrictly: 'Hierarchical independence',
-  },
-  upload: {
-    save: 'Save',
-    upload: 'Upload',
-    imgUpload: 'ImageUpload',
-    uploaded: 'Uploaded',
-
-    operating: 'Operating',
-    del: 'Delete',
-    download: 'download',
-    saveWarn: 'Please wait for the file to upload and save!',
-    saveError: 'There is no file successfully uploaded and cannot be saved!',
-
-    preview: 'Preview',
-    choose: 'Select the file',
-
-    accept: 'Support {0} format',
-    acceptUpload: 'Only upload files in {0} format',
-    maxSize: 'A single file does not exceed {0}MB ',
-    maxSizeMultiple: 'Only upload files up to {0}MB!',
-    maxNumber: 'Only upload up to {0} files',
-
-    legend: 'Legend',
-    fileName: 'File name',
-    fileSize: 'File size',
-    fileStatue: 'File status',
-
-    startUpload: 'Start upload',
-    uploadSuccess: 'Upload successfully',
-    uploadError: 'Upload failed',
-    uploading: 'Uploading',
-    uploadWait: 'Please wait for the file upload to finish',
-    reUploadFailed: 'Re-upload failed files',
-  },
-  verify: {
-    error: 'verification failed！',
-    time: 'The verification is successful and it takes {time} seconds！',
-    redoTip: 'Click the picture to refresh',
-    dragText: 'Hold down the slider and drag',
-    successText: 'Verified',
-  },
-};
diff --git a/apps/admin/src/locales/lang/en/layout.json b/apps/admin/src/locales/lang/en/layout.json
new file mode 100644
index 0000000..1a12285
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/layout.json
@@ -0,0 +1,95 @@
+{
+  "footer": {
+    "onlinePreview": "Preview", 
+    "onlineDocument": "Document"
+  }, 
+  "header": {
+    "dropdownChangeApi": "Change Api", 
+    "dropdownItemDoc": "Document", 
+    "dropdownItemLoginOut": "Log Out", 
+    "tooltipErrorLog": "Error log", 
+    "tooltipLock": "Lock screen", 
+    "tooltipNotify": "Notification", 
+    "tooltipEntryFull": "Full Screen", 
+    "tooltipExitFull": "Exit Full Screen", 
+    "lockScreenPassword": "Lock screen password", 
+    "lockScreen": "Lock screen", 
+    "lockScreenBtn": "Locking", 
+    "home": "Home"
+  }, 
+  "multipleTab": {
+    "reload": "Refresh current", 
+    "close": "Close current", 
+    "closeLeft": "Close Left", 
+    "closeRight": "Close Right", 
+    "closeOther": "Close Other", 
+    "closeAll": "Close All"
+  }, 
+  "setting": {
+    "contentModeFull": "Full", 
+    "contentModeFixed": "Fixed width", 
+    "topMenuAlignLeft": "Left", 
+    "topMenuAlignRight": "Center", 
+    "topMenuAlignCenter": "Right", 
+    "menuTriggerNone": "Not Show", 
+    "menuTriggerBottom": "Bottom", 
+    "menuTriggerTop": "Top", 
+    "menuTypeSidebar": "Left menu mode", 
+    "menuTypeMixSidebar": "Left menu mixed mode", 
+    "menuTypeMix": "Top Menu Mix mode", 
+    "menuTypeTopMenu": "Top menu mode", 
+    "on": "On", 
+    "off": "Off", 
+    "minute": "Minute", 
+    "operatingTitle": "Successful!", 
+    "operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!", 
+    "resetSuccess": "Successfully reset!", 
+    "copyBtn": "Copy", 
+    "clearBtn": "Clear cache and to the login page", 
+    "drawerTitle": "Configuration", 
+    "darkMode": "Dark mode", 
+    "navMode": "Navigation mode", 
+    "interfaceFunction": "Interface function", 
+    "interfaceDisplay": "Interface display", 
+    "animation": "Animation", 
+    "splitMenu": "Split menu", 
+    "closeMixSidebarOnChange": "Switch page to close menu", 
+    "sysTheme": "System theme", 
+    "headerTheme": "Header theme", 
+    "sidebarTheme": "Menu theme", 
+    "menuDrag": "Drag Sidebar", 
+    "menuSearch": "Menu search", 
+    "menuAccordion": "Sidebar accordion", 
+    "menuCollapse": "Collapse menu", 
+    "collapseMenuDisplayName": "Collapse menu display name", 
+    "topMenuLayout": "Top menu layout", 
+    "menuCollapseButton": "Menu collapse button", 
+    "contentMode": "Content area width", 
+    "expandedMenuWidth": "Expanded menu width", 
+    "breadcrumb": "Breadcrumbs", 
+    "breadcrumbIcon": "Breadcrumbs Icon", 
+    "tabs": "Tabs", 
+    "tabDetail": "Tab Detail", 
+    "tabsQuickBtn": "Tabs quick button", 
+    "tabsRedoBtn": "Tabs redo button", 
+    "tabsFoldBtn": "Tabs flod button", 
+    "sidebar": "Sidebar", 
+    "header": "Header", 
+    "footer": "Footer", 
+    "fullContent": "Full content", 
+    "grayMode": "Gray mode", 
+    "colorWeak": "Color Weak Mode", 
+    "progress": "Progress", 
+    "switchLoading": "Switch Loading", 
+    "switchAnimation": "Switch animation", 
+    "animationType": "Animation type", 
+    "autoScreenLock": "Auto screen lock", 
+    "notAutoScreenLock": "Not auto lock", 
+    "fixedHeader": "Fixed header", 
+    "fixedSideBar": "Fixed Sidebar", 
+    "mixSidebarTrigger": "Mixed menu Trigger", 
+    "triggerHover": "Hover", 
+    "triggerClick": "Click", 
+    "mixSidebarFixed": "Fixed expanded menu"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/en/layout.ts b/apps/admin/src/locales/lang/en/layout.ts
deleted file mode 100644
index f3c627f..0000000
--- a/apps/admin/src/locales/lang/en/layout.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-export default {
-  footer: { onlinePreview: 'Preview', onlineDocument: 'Document' },
-  header: {
-    // user dropdown
-    dropdownItemDoc: 'Document',
-    dropdownItemLoginOut: 'Log Out',
-
-    tooltipErrorLog: 'Error log',
-    tooltipLock: 'Lock screen',
-    tooltipNotify: 'Notification',
-
-    tooltipEntryFull: 'Full Screen',
-    tooltipExitFull: 'Exit Full Screen',
-
-    // lock
-    lockScreenPassword: 'Lock screen password',
-    lockScreen: 'Lock screen',
-    lockScreenBtn: 'Locking',
-
-    home: 'Home',
-  },
-  multipleTab: {
-    reload: 'Refresh current',
-    close: 'Close current',
-    closeLeft: 'Close Left',
-    closeRight: 'Close Right',
-    closeOther: 'Close Other',
-    closeAll: 'Close All',
-  },
-  setting: {
-    // content mode
-    contentModeFull: 'Full',
-    contentModeFixed: 'Fixed width',
-    // topMenu align
-    topMenuAlignLeft: 'Left',
-    topMenuAlignRight: 'Center',
-    topMenuAlignCenter: 'Right',
-    // menu trigger
-    menuTriggerNone: 'Not Show',
-    menuTriggerBottom: 'Bottom',
-    menuTriggerTop: 'Top',
-    // menu type
-    menuTypeSidebar: 'Left menu mode',
-    menuTypeMixSidebar: 'Left menu mixed mode',
-    menuTypeMix: 'Top Menu Mix mode',
-    menuTypeTopMenu: 'Top menu mode',
-
-    on: 'On',
-    off: 'Off',
-    minute: 'Minute',
-
-    operatingTitle: 'Successful!',
-    operatingContent:
-      'The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!',
-    resetSuccess: 'Successfully reset!',
-
-    copyBtn: 'Copy',
-    clearBtn: 'Clear cache and to the login page',
-
-    drawerTitle: 'Configuration',
-
-    darkMode: 'Dark mode',
-    navMode: 'Navigation mode',
-    interfaceFunction: 'Interface function',
-    interfaceDisplay: 'Interface display',
-    animation: 'Animation',
-    splitMenu: 'Split menu',
-    closeMixSidebarOnChange: 'Switch page to close menu',
-
-    sysTheme: 'System theme',
-    headerTheme: 'Header theme',
-    sidebarTheme: 'Menu theme',
-
-    menuDrag: 'Drag Sidebar',
-    menuSearch: 'Menu search',
-    menuAccordion: 'Sidebar accordion',
-    menuCollapse: 'Collapse menu',
-    collapseMenuDisplayName: 'Collapse menu display name',
-    topMenuLayout: 'Top menu layout',
-    menuCollapseButton: 'Menu collapse button',
-    contentMode: 'Content area width',
-    expandedMenuWidth: 'Expanded menu width',
-
-    breadcrumb: 'Breadcrumbs',
-    breadcrumbIcon: 'Breadcrumbs Icon',
-    tabs: 'Tabs',
-    tabDetail: 'Tab Detail',
-    tabsQuickBtn: 'Tabs quick button',
-    tabsRedoBtn: 'Tabs redo button',
-    tabsFoldBtn: 'Tabs flod button',
-    sidebar: 'Sidebar',
-    header: 'Header',
-    footer: 'Footer',
-    fullContent: 'Full content',
-    grayMode: 'Gray mode',
-    colorWeak: 'Color Weak Mode',
-
-    progress: 'Progress',
-    switchLoading: 'Switch Loading',
-    switchAnimation: 'Switch animation',
-    animationType: 'Animation type',
-
-    autoScreenLock: 'Auto screen lock',
-    notAutoScreenLock: 'Not auto lock',
-
-    fixedHeader: 'Fixed header',
-    fixedSideBar: 'Fixed Sidebar',
-
-    mixSidebarTrigger: 'Mixed menu Trigger',
-    triggerHover: 'Hover',
-    triggerClick: 'Click',
-
-    mixSidebarFixed: 'Fixed expanded menu',
-  },
-};
diff --git a/apps/admin/src/locales/lang/en/routes/basic.json b/apps/admin/src/locales/lang/en/routes/basic.json
new file mode 100644
index 0000000..e6e35df
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/routes/basic.json
@@ -0,0 +1,4 @@
+{
+  "login": "Login",
+  "errorLogList": "Error Log"
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/en/routes/basic.ts b/apps/admin/src/locales/lang/en/routes/basic.ts
deleted file mode 100644
index b6faa00..0000000
--- a/apps/admin/src/locales/lang/en/routes/basic.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  login: 'Login',
-  errorLogList: 'Error Log',
-};
diff --git a/apps/admin/src/locales/lang/en/routes/dashboard.json b/apps/admin/src/locales/lang/en/routes/dashboard.json
new file mode 100644
index 0000000..ad3980c
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/routes/dashboard.json
@@ -0,0 +1,6 @@
+{
+  "dashboard": "Dashboard",
+  "about": "About",
+  "workbench": "Workbench",
+  "analysis": "Analysis"
+}
diff --git a/apps/admin/src/locales/lang/en/routes/dashboard.ts b/apps/admin/src/locales/lang/en/routes/dashboard.ts
deleted file mode 100644
index 6d047b5..0000000
--- a/apps/admin/src/locales/lang/en/routes/dashboard.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  dashboard: 'Dashboard',
-  about: 'About',
-  workbench: 'Workbench',
-  analysis: 'Analysis',
-};
diff --git a/apps/admin/src/locales/lang/en/routes/demo.json b/apps/admin/src/locales/lang/en/routes/demo.json
new file mode 100644
index 0000000..0d0f93d
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/routes/demo.json
@@ -0,0 +1,178 @@
+{
+  "charts": {
+    "baiduMap": "Baidu map", 
+    "aMap": "A map", 
+    "googleMap": "Google map", 
+    "charts": "Chart", 
+    "map": "Map", 
+    "line": "Line", 
+    "pie": "Pie"
+  }, 
+  "comp": {
+    "comp": "Component", 
+    "basic": "Basic", 
+    "transition": "Animation", 
+    "countTo": "Count To", 
+    "scroll": "Scroll", 
+    "scrollBasic": "Basic", 
+    "scrollAction": "Scroll Function", 
+    "virtualScroll": "Virtual Scroll", 
+    "tree": "Tree", 
+    "treeBasic": "Basic", 
+    "editTree": "Searchable/toolbar", 
+    "actionTree": "Function operation", 
+    "modal": "Modal", 
+    "drawer": "Drawer", 
+    "desc": "Desc", 
+    "verify": "Verify", 
+    "verifyDrag": "Drag ", 
+    "verifyRotate": "Picture Restore", 
+    "qrcode": "QR code", 
+    "strength": "Password strength", 
+    "upload": "Upload", 
+    "loading": "Loading", 
+    "time": "Relative Time", 
+    "cropperImage": "Cropper Image", 
+    "cardList": "Card List"
+  }, 
+  "editor": {
+    "editor": "Editor", 
+    "jsonEditor": "Json editor", 
+    "markdown": "Markdown editor", 
+    "tinymce": "Rich text", 
+    "tinymceBasic": "Basic", 
+    "tinymceForm": "embedded form"
+  }, 
+  "excel": {
+    "excel": "Excel", 
+    "customExport": "Select export format", 
+    "jsonExport": "JSON data export", 
+    "arrayExport": "Array data export", 
+    "importExcel": "Import"
+  }, 
+  "feat": {
+    "feat": "Page Function", 
+    "icon": "Icon", 
+    "tabs": "Tabs", 
+    "tabDetail": "Tab Detail", 
+    "sessionTimeout": "Session Timeout", 
+    "print": "Print", 
+    "contextMenu": "Context Menu", 
+    "download": "Download", 
+    "clickOutSide": "ClickOutSide", 
+    "imgPreview": "Picture Preview", 
+    "copy": "Clipboard", 
+    "ellipsis": "EllipsisText", 
+    "msg": "Message prompt", 
+    "watermark": "Watermark", 
+    "ripple": "Ripple", 
+    "fullScreen": "Full Screen", 
+    "errorLog": "Error Log", 
+    "tab": "Tab with parameters", 
+    "tab1": "Tab with parameter 1", 
+    "tab2": "Tab with parameter 2", 
+    "menu": "Menu with parameters", 
+    "menu1": "Menu with parameters 1", 
+    "menu2": "Menu with parameters 2", 
+    "ws": "Websocket test", 
+    "breadcrumb": "Breadcrumbs", 
+    "breadcrumbFlat": "Flat Mode", 
+    "breadcrumbFlatDetail": "Flat mode details", 
+    "requestDemo": "Retry request demo", 
+    "breadcrumbChildren": "Level mode", 
+    "breadcrumbChildrenDetail": "Level mode detail"
+  }, 
+  "flow": {
+    "name": "Graphics editor", 
+    "flowChart": "FlowChart"
+  }, 
+  "form": {
+    "form": "Form", 
+    "basic": "Basic", 
+    "useForm": "useForm", 
+    "refForm": "RefForm", 
+    "advancedForm": "Shrinkable", 
+    "ruleForm": "Form validation", 
+    "dynamicForm": "Dynamic", 
+    "customerForm": "Custom", 
+    "appendForm": "Append", 
+    "tabsForm": "TabsForm"
+  }, 
+  "iframe": {
+    "frame": "External", 
+    "antv": "antVue doc (embedded)", 
+    "doc": "Project doc (embedded)", 
+    "docExternal": "Project doc (external)"
+  }, 
+  "level": {
+    "level": "MultiMenu"
+  }, 
+  "page": {
+    "page": "Page", 
+    "form": "Form", 
+    "formBasic": "Basic Form", 
+    "formStep": "Step Form", 
+    "formHigh": "Advanced Form", 
+    "desc": "Details", 
+    "descBasic": "Basic Details", 
+    "descHigh": "Advanced Details", 
+    "result": "Result", 
+    "resultSuccess": "Success", 
+    "resultFail": "Failed", 
+    "account": "Personal", 
+    "accountCenter": "Personal Center", 
+    "accountSetting": "Personal Settings", 
+    "exception": "Exception", 
+    "netWorkError": "Network Error", 
+    "notData": "No data", 
+    "list": "List page", 
+    "listCard": "Card list", 
+    "basic": "Basic list", 
+    "listBasic": "Basic list", 
+    "listSearch": "Search list"
+  }, 
+  "permission": {
+    "permission": "Permission", 
+    "front": "front-end", 
+    "frontPage": "Page", 
+    "frontBtn": "Button", 
+    "frontTestA": "Test page A", 
+    "frontTestB": "Test page B", 
+    "back": "background", 
+    "backPage": "Page", 
+    "backBtn": "Button"
+  }, 
+  "setup": {
+    "page": "Intro page"
+  }, 
+  "system": {
+    "moduleName": "System management", 
+    "account": "Account management", 
+    "account_detail": "Account detail", 
+    "password": "Change password", 
+    "dept": "Department management", 
+    "menu": "Menu management", 
+    "role": "Role management"
+  }, 
+  "table": {
+    "table": "Table", 
+    "basic": "Basic", 
+    "treeTable": "Tree", 
+    "fetchTable": "Remote loading", 
+    "fixedColumn": "Fixed column", 
+    "customerCell": "Custom column", 
+    "formTable": "Open search", 
+    "useTable": "UseTable", 
+    "refTable": "RefTable", 
+    "multipleHeader": "MultiLevel header", 
+    "mergeHeader": "Merge cells", 
+    "expandTable": "Expandable table", 
+    "fixedHeight": "Fixed height", 
+    "footerTable": "Footer", 
+    "editCellTable": "Editable cell", 
+    "editRowTable": "Editable row", 
+    "authColumn": "Auth column", 
+    "resizeParentHeightTable": "resizeParentHeightTable", 
+    "vxeTable": "VxeTable"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/en/routes/demo.ts b/apps/admin/src/locales/lang/en/routes/demo.ts
deleted file mode 100644
index 1cc82d0..0000000
--- a/apps/admin/src/locales/lang/en/routes/demo.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-export default {
-  charts: {
-    baiduMap: 'Baidu map',
-    aMap: 'A map',
-    googleMap: 'Google map',
-    charts: 'Chart',
-    map: 'Map',
-    line: 'Line',
-    pie: 'Pie',
-  },
-  comp: {
-    comp: 'Component',
-    basic: 'Basic',
-    transition: 'Animation',
-    countTo: 'Count To',
-
-    scroll: 'Scroll',
-    scrollBasic: 'Basic',
-    scrollAction: 'Scroll Function',
-    virtualScroll: 'Virtual Scroll',
-
-    tree: 'Tree',
-
-    treeBasic: 'Basic',
-    editTree: 'Searchable/toolbar',
-    actionTree: 'Function operation',
-
-    modal: 'Modal',
-    drawer: 'Drawer',
-    desc: 'Desc',
-
-    verify: 'Verify',
-    verifyDrag: 'Drag ',
-    verifyRotate: 'Picture Restore',
-
-    qrcode: 'QR code',
-    strength: 'Password strength',
-    upload: 'Upload',
-
-    loading: 'Loading',
-
-    time: 'Relative Time',
-    cropperImage: 'Cropper Image',
-    cardList: 'Card List',
-  },
-  editor: {
-    editor: 'Editor',
-    jsonEditor: 'Json editor',
-    markdown: 'Markdown editor',
-
-    tinymce: 'Rich text',
-    tinymceBasic: 'Basic',
-    tinymceForm: 'embedded form',
-  },
-  excel: {
-    excel: 'Excel',
-    customExport: 'Select export format',
-    jsonExport: 'JSON data export',
-    arrayExport: 'Array data export',
-    importExcel: 'Import',
-  },
-  feat: {
-    feat: 'Page Function',
-    icon: 'Icon',
-    tabs: 'Tabs',
-    tabDetail: 'Tab Detail',
-    sessionTimeout: 'Session Timeout',
-    print: 'Print',
-    contextMenu: 'Context Menu',
-    download: 'Download',
-    clickOutSide: 'ClickOutSide',
-    imgPreview: 'Picture Preview',
-    copy: 'Clipboard',
-    msg: 'Message prompt',
-    watermark: 'Watermark',
-    ripple: 'Ripple',
-    fullScreen: 'Full Screen',
-    errorLog: 'Error Log',
-    tab: 'Tab with parameters',
-    tab1: 'Tab with parameter 1',
-    tab2: 'Tab with parameter 2',
-    menu: 'Menu with parameters',
-    menu1: 'Menu with parameters 1',
-    menu2: 'Menu with parameters 2',
-
-    ws: 'Websocket test',
-
-    breadcrumb: 'Breadcrumbs',
-    breadcrumbFlat: 'Flat Mode',
-    breadcrumbFlatDetail: 'Flat mode details',
-    requestDemo: 'Retry request demo',
-
-    breadcrumbChildren: 'Level mode',
-    breadcrumbChildrenDetail: 'Level mode detail',
-  },
-  flow: {
-    name: 'Graphics editor',
-    flowChart: 'FlowChart',
-  },
-  form: {
-    form: 'Form',
-    basic: 'Basic',
-    useForm: 'useForm',
-    refForm: 'RefForm',
-    advancedForm: 'Shrinkable',
-    ruleForm: 'Form validation',
-    dynamicForm: 'Dynamic',
-    customerForm: 'Custom',
-    appendForm: 'Append',
-    tabsForm: 'TabsForm',
-  },
-  iframe: {
-    frame: 'External',
-    antv: 'antVue doc (embedded)',
-    doc: 'Project doc (embedded)',
-    docExternal: 'Project doc (external)',
-  },
-  level: { level: 'MultiMenu' },
-  page: {
-    page: 'Page',
-
-    form: 'Form',
-    formBasic: 'Basic Form',
-    formStep: 'Step Form',
-    formHigh: 'Advanced Form',
-
-    desc: 'Details',
-    descBasic: 'Basic Details',
-    descHigh: 'Advanced Details',
-
-    result: 'Result',
-    resultSuccess: 'Success',
-    resultFail: 'Failed',
-
-    account: 'Personal',
-    accountCenter: 'Personal Center',
-    accountSetting: 'Personal Settings',
-
-    exception: 'Exception',
-    netWorkError: 'Network Error',
-    notData: 'No data',
-
-    list: 'List page',
-    listCard: 'Card list',
-    basic: 'Basic list',
-    listBasic: 'Basic list',
-    listSearch: 'Search list',
-  },
-  permission: {
-    permission: 'Permission',
-
-    front: 'front-end',
-    frontPage: 'Page',
-    frontBtn: 'Button',
-    frontTestA: 'Test page A',
-    frontTestB: 'Test page B',
-
-    back: 'background',
-    backPage: 'Page',
-    backBtn: 'Button',
-  },
-  setup: {
-    page: 'Intro page',
-  },
-  system: {
-    moduleName: 'System management',
-
-    account: 'Account management',
-    account_detail: 'Account detail',
-    password: 'Change password',
-
-    dept: 'Department management',
-
-    menu: 'Menu management',
-    role: 'Role management',
-  },
-  table: {
-    table: 'Table',
-
-    basic: 'Basic',
-    treeTable: 'Tree',
-    fetchTable: 'Remote loading',
-    fixedColumn: 'Fixed column',
-    customerCell: 'Custom column',
-    formTable: 'Open search',
-    useTable: 'UseTable',
-    refTable: 'RefTable',
-    multipleHeader: 'MultiLevel header',
-    mergeHeader: 'Merge cells',
-    expandTable: 'Expandable table',
-    fixedHeight: 'Fixed height',
-    footerTable: 'Footer',
-    editCellTable: 'Editable cell',
-    editRowTable: 'Editable row',
-    authColumn: 'Auth column',
-    resizeParentHeightTable: 'resizeParentHeightTable',
-    vxeTable: 'VxeTable',
-  },
-};
diff --git a/apps/admin/src/locales/lang/en/sys.json b/apps/admin/src/locales/lang/en/sys.json
new file mode 100644
index 0000000..1f67b11
--- /dev/null
+++ b/apps/admin/src/locales/lang/en/sys.json
@@ -0,0 +1,92 @@
+{
+  "api": {
+    "operationSuccess": "Operation Success", 
+    "operationFailed": "Operation failed", 
+    "errorTip": "Error Tip", 
+    "successTip": "Success Tip", 
+    "errorMessage": "The operation failed, the system is abnormal!", 
+    "timeoutMessage": "Login timed out, please log in again!", 
+    "apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!", 
+    "apiRequestFailed": "The interface request failed, please try again later!", 
+    "networkException": "network anomaly", 
+    "networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal", 
+    "errMsg401": "The user does not have permission (token, user name, password error)!", 
+    "errMsg403": "The user is authorized, but access is forbidden!", 
+    "errMsg404": "Network request error, the resource was not found!", 
+    "errMsg405": "Network request error, request method not allowed!", 
+    "errMsg408": "Network request timed out!", 
+    "errMsg500": "Server error, please contact the administrator!", 
+    "errMsg501": "The network is not implemented!", 
+    "errMsg502": "Network Error!", 
+    "errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!", 
+    "errMsg504": "Network timeout!", 
+    "errMsg505": "The http version does not support the request!"
+  }, 
+  "app": {
+    "logoutTip": "Reminder", 
+    "logoutMessage": "Confirm to exit the system?", 
+    "menuLoading": "Menu loading..."
+  }, 
+  "errorLog": {
+    "tableTitle": "Error log list", 
+    "tableColumnType": "Type", 
+    "tableColumnDate": "Time", 
+    "tableColumnFile": "File", 
+    "tableColumnMsg": "Error message", 
+    "tableColumnStackMsg": "Stack info", 
+    "tableActionDesc": "Details", 
+    "modalTitle": "Error details", 
+    "fireVueError": "Fire vue error", 
+    "fireResourceError": "Fire resource error", 
+    "fireAjaxError": "Fire ajax error", 
+    "enableMessage": "Only effective when useErrorHandle=true in `/src/settings/projectSetting.ts`."
+  }, 
+  "exception": {
+    "backLogin": "Back Login", 
+    "backHome": "Back Home", 
+    "subTitle403": "Sorry, you don't have access to this page.", 
+    "subTitle404": "Sorry, the page you visited does not exist.", 
+    "subTitle500": "Sorry, the server is reporting an error.", 
+    "noDataTitle": "No data on the current page.", 
+    "networkErrorTitle": "Network Error", 
+    "networkErrorSubTitle": "Sorry，Your network connection has been disconnected, please check your network!"
+  }, 
+  "lock": {
+    "unlock": "Click to unlock", 
+    "alert": "Lock screen password error", 
+    "backToLogin": "Back to login", 
+    "entry": "Enter the system", 
+    "placeholder": "Please enter the lock screen password or user password"
+  }, 
+  "login": {
+    "backSignIn": "Back sign in", 
+    "mobileSignInFormTitle": "Mobile sign in", 
+    "qrSignInFormTitle": "Qr code sign in", 
+    "signInFormTitle": "Sign in", 
+    "signUpFormTitle": "Sign up", 
+    "forgetFormTitle": "Reset password", 
+    "signInTitle": "Backstage management system", 
+    "signInDesc": "Enter your personal details and get started!", 
+    "policy": "I agree to the xxx Privacy Policy", 
+    "scanSign": "scanning the code to complete the login", 
+    "loginButton": "Sign in", 
+    "registerButton": "Sign up", 
+    "rememberMe": "Remember me", 
+    "forgetPassword": "Forget Password?", 
+    "otherSignIn": "Sign in with", 
+    "loginSuccessTitle": "Login successful", 
+    "loginSuccessDesc": "Welcome back", 
+    "accountPlaceholder": "Please input username", 
+    "passwordPlaceholder": "Please input password", 
+    "smsPlaceholder": "Please input sms code", 
+    "mobilePlaceholder": "Please input mobile", 
+    "policyPlaceholder": "Register after checking", 
+    "diffPwd": "The two passwords are inconsistent", 
+    "userName": "Username", 
+    "password": "Password", 
+    "confirmPassword": "Confirm Password", 
+    "email": "Email", 
+    "smsCode": "SMS code", 
+    "mobile": "Mobile"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/en/sys.ts b/apps/admin/src/locales/lang/en/sys.ts
deleted file mode 100644
index c88d25d..0000000
--- a/apps/admin/src/locales/lang/en/sys.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-export default {
-  api: {
-    operationSuccess: 'Operation Success',
-    operationFailed: 'Operation failed',
-    errorTip: 'Error Tip',
-    successTip: 'Success Tip',
-    errorMessage: 'The operation failed, the system is abnormal!',
-    timeoutMessage: 'Login timed out, please log in again!',
-    apiTimeoutMessage: 'The interface request timed out, please refresh the page and try again!',
-    apiRequestFailed: 'The interface request failed, please try again later!',
-    networkException: 'network anomaly',
-    networkExceptionMsg:
-      'Please check if your network connection is normal! The network is abnormal',
-
-    errMsg401: 'The user does not have permission (token, user name, password error)!',
-    errMsg403: 'The user is authorized, but access is forbidden!',
-    errMsg404: 'Network request error, the resource was not found!',
-    errMsg405: 'Network request error, request method not allowed!',
-    errMsg408: 'Network request timed out!',
-    errMsg500: 'Server error, please contact the administrator!',
-    errMsg501: 'The network is not implemented!',
-    errMsg502: 'Network Error!',
-    errMsg503: 'The service is unavailable, the server is temporarily overloaded or maintained!',
-    errMsg504: 'Network timeout!',
-    errMsg505: 'The http version does not support the request!',
-  },
-  app: {
-    logoutTip: 'Reminder',
-    logoutMessage: 'Confirm to exit the system?',
-    menuLoading: 'Menu loading...',
-  },
-  errorLog: {
-    tableTitle: 'Error log list',
-    tableColumnType: 'Type',
-    tableColumnDate: 'Time',
-    tableColumnFile: 'File',
-    tableColumnMsg: 'Error message',
-    tableColumnStackMsg: 'Stack info',
-
-    tableActionDesc: 'Details',
-
-    modalTitle: 'Error details',
-
-    fireVueError: 'Fire vue error',
-    fireResourceError: 'Fire resource error',
-    fireAjaxError: 'Fire ajax error',
-
-    enableMessage: 'Only effective when useErrorHandle=true in `/src/settings/projectSetting.ts`.',
-  },
-  exception: {
-    backLogin: 'Back Login',
-    backHome: 'Back Home',
-    subTitle403: "Sorry, you don't have access to this page.",
-    subTitle404: 'Sorry, the page you visited does not exist.',
-    subTitle500: 'Sorry, the server is reporting an error.',
-    noDataTitle: 'No data on the current page.',
-    networkErrorTitle: 'Network Error',
-    networkErrorSubTitle:
-      'Sorry，Your network connection has been disconnected, please check your network!',
-  },
-  lock: {
-    unlock: 'Click to unlock',
-    alert: 'Lock screen password error',
-    backToLogin: 'Back to login',
-    entry: 'Enter the system',
-    placeholder: 'Please enter the lock screen password or user password',
-  },
-  login: {
-    backSignIn: 'Back sign in',
-    mobileSignInFormTitle: 'Mobile sign in',
-    qrSignInFormTitle: 'Qr code sign in',
-    signInFormTitle: 'Sign in',
-    signUpFormTitle: 'Sign up',
-    forgetFormTitle: 'Reset password',
-
-    signInTitle: 'Backstage management system',
-    signInDesc: 'Enter your personal details and get started!',
-    policy: 'I agree to the xxx Privacy Policy',
-    scanSign: `scanning the code to complete the login`,
-
-    loginButton: 'Sign in',
-    registerButton: 'Sign up',
-    rememberMe: 'Remember me',
-    forgetPassword: 'Forget Password?',
-    otherSignIn: 'Sign in with',
-
-    // notify
-    loginSuccessTitle: 'Login successful',
-    loginSuccessDesc: 'Welcome back',
-
-    // placeholder
-    accountPlaceholder: 'Please input username',
-    passwordPlaceholder: 'Please input password',
-    smsPlaceholder: 'Please input sms code',
-    mobilePlaceholder: 'Please input mobile',
-    policyPlaceholder: 'Register after checking',
-    diffPwd: 'The two passwords are inconsistent',
-
-    userName: 'Username',
-    password: 'Password',
-    confirmPassword: 'Confirm Password',
-    email: 'Email',
-    smsCode: 'SMS code',
-    mobile: 'Mobile',
-  },
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/antdLocale/DatePicker.json b/apps/admin/src/locales/lang/zh-CN/antdLocale/DatePicker.json
new file mode 100644
index 0000000..b088fb5
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/antdLocale/DatePicker.json
@@ -0,0 +1,19 @@
+{
+  "lang": {
+    "shortWeekDays": ["一", "二", "三", "四", "五", "六", "日"],
+    "shortMonths": [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ]
+  }
+}
diff --git a/apps/admin/src/locales/lang/zh-CN/antdLocale/DatePicker.ts b/apps/admin/src/locales/lang/zh-CN/antdLocale/DatePicker.ts
deleted file mode 100644
index 452dff0..0000000
--- a/apps/admin/src/locales/lang/zh-CN/antdLocale/DatePicker.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  lang: {
-    shortWeekDays: ['一', '二', '三', '四', '五', '六', '日'],
-    shortMonths: [
-      '1月',
-      '2月',
-      '3月',
-      '4月',
-      '5月',
-      '6月',
-      '7月',
-      '8月',
-      '9月',
-      '10月',
-      '11月',
-      '12月',
-    ],
-  },
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/common.json b/apps/admin/src/locales/lang/zh-CN/common.json
new file mode 100644
index 0000000..19647c8
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/common.json
@@ -0,0 +1,20 @@
+{
+  "okText": "确认",
+  "closeText": "关闭",
+  "cancelText": "取消",
+  "loadingText": "加载中...",
+  "saveText": "保存",
+  "delText": "删除",
+  "resetText": "重置",
+  "searchText": "搜索",
+  "queryText": "查询",
+
+  "inputText": "请输入",
+  "chooseText": "请选择",
+
+  "redo": "刷新",
+  "back": "返回",
+
+  "light": "亮色主题",
+  "dark": "黑暗主题"
+}
diff --git a/apps/admin/src/locales/lang/zh-CN/common.ts b/apps/admin/src/locales/lang/zh-CN/common.ts
deleted file mode 100644
index 478c625..0000000
--- a/apps/admin/src/locales/lang/zh-CN/common.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-  okText: '确认',
-  closeText: '关闭',
-  cancelText: '取消',
-  loadingText: '加载中...',
-  saveText: '保存',
-  delText: '删除',
-  resetText: '重置',
-  searchText: '搜索',
-  queryText: '查询',
-
-  inputText: '请输入',
-  chooseText: '请选择',
-
-  redo: '刷新',
-  back: '返回',
-
-  light: '亮色主题',
-  dark: '黑暗主题',
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/component.json b/apps/admin/src/locales/lang/zh-CN/component.json
new file mode 100644
index 0000000..5d8a658
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/component.json
@@ -0,0 +1,125 @@
+{
+  "app": {
+    "searchNotData": "暂无搜索结果", 
+    "toSearch": "确认", 
+    "toNavigate": "切换"
+  }, 
+  "countdown": {
+    "normalText": "获取验证码", 
+    "sendText": "{0}秒后重新获取"
+  }, 
+  "cropper": {
+    "selectImage": "选择图片", 
+    "uploadSuccess": "上传成功", 
+    "imageTooBig": "图片超限", 
+    "modalTitle": "头像上传", 
+    "okText": "确认并上传", 
+    "btn_reset": "重置", 
+    "btn_rotate_left": "逆时针旋转", 
+    "btn_rotate_right": "顺时针旋转", 
+    "btn_scale_x": "水平翻转", 
+    "btn_scale_y": "垂直翻转", 
+    "btn_zoom_in": "放大", 
+    "btn_zoom_out": "缩小", 
+    "preview": "预览"
+  }, 
+  "drawer": {
+    "loadingText": "加载中...", 
+    "cancelText": "关闭", 
+    "okText": "确认"
+  }, 
+  "excel": {
+    "exportModalTitle": "导出数据", 
+    "fileType": "文件类型", 
+    "fileName": "文件名"
+  }, 
+  "form": {
+    "putAway": "收起", 
+    "unfold": "展开", 
+    "maxTip": "字符数应小于{0}位", 
+    "apiSelectNotFound": "请等待数据加载完成..."
+  }, 
+  "icon": {
+    "placeholder": "点击选择图标", 
+    "search": "搜索图标", 
+    "copy": "复制图标成功!"
+  }, 
+  "menu": {
+    "search": "菜单搜索"
+  }, 
+  "modal": {
+    "cancelText": "关闭", 
+    "okText": "确认", 
+    "close": "关闭", 
+    "maximize": "最大化", 
+    "restore": "还原"
+  }, 
+  "table": {
+    "settingDens": "密度", 
+    "settingDensDefault": "默认", 
+    "settingDensMiddle": "中等", 
+    "settingDensSmall": "紧凑", 
+    "settingColumn": "列设置", 
+    "settingColumnShow": "列展示", 
+    "settingIndexColumnShow": "序号列", 
+    "settingSelectColumnShow": "勾选列", 
+    "settingFixedLeft": "固定到左侧", 
+    "settingFixedRight": "固定到右侧", 
+    "settingFullScreen": "全屏", 
+    "index": "序号", 
+    "total": "共 {total} 条数据"
+  }, 
+  "time": {
+    "before": "前", 
+    "after": "后", 
+    "just": "刚刚", 
+    "seconds": "秒", 
+    "minutes": "分钟", 
+    "hours": "小时", 
+    "days": "天"
+  }, 
+  "tree": {
+    "selectAll": "选择全部", 
+    "unSelectAll": "取消选择", 
+    "expandAll": "展开全部", 
+    "unExpandAll": "折叠全部", 
+    "checkStrictly": "层级关联", 
+    "checkUnStrictly": "层级独立"
+  }, 
+  "upload": {
+    "save": "保存", 
+    "upload": "上传", 
+    "imgUpload": "图片上传", 
+    "uploaded": "已上传", 
+    "operating": "操作", 
+    "del": "删除", 
+    "download": "下载", 
+    "saveWarn": "请等待文件上传后，保存!", 
+    "saveError": "没有上传成功的文件，无法保存!", 
+    "preview": "预览", 
+    "choose": "选择文件", 
+    "accept": "支持{0}格式", 
+    "acceptUpload": "只能上传{0}格式文件", 
+    "maxSize": "单个文件不超过{0}MB", 
+    "maxSizeMultiple": "只能上传不超过{0}MB的文件!", 
+    "maxNumber": "最多只能上传{0}个文件", 
+    "legend": "略缩图", 
+    "fileName": "文件名", 
+    "fileSize": "文件大小", 
+    "fileStatue": "状态", 
+    "pending": "待上传",
+    "startUpload": "开始上传", 
+    "uploadSuccess": "上传成功", 
+    "uploadError": "上传失败", 
+    "uploading": "上传中", 
+    "uploadWait": "请等待文件上传结束后操作", 
+    "reUploadFailed": "重新上传失败文件"
+  }, 
+  "verify": {
+    "error": "验证失败！", 
+    "time": "验证校验成功,耗时{time}秒！", 
+    "redoTip": "点击图片可刷新", 
+    "dragText": "请按住滑块拖动", 
+    "successText": "验证通过"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/zh-CN/component.ts b/apps/admin/src/locales/lang/zh-CN/component.ts
deleted file mode 100644
index d9b54eb..0000000
--- a/apps/admin/src/locales/lang/zh-CN/component.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-export default {
-  app: {
-    searchNotData: '暂无搜索结果',
-    toSearch: '确认',
-    toNavigate: '切换',
-  },
-  countdown: {
-    normalText: '获取验证码',
-    sendText: '{0}秒后重新获取',
-  },
-  cropper: {
-    selectImage: '选择图片',
-    uploadSuccess: '上传成功',
-    modalTitle: '头像上传',
-    okText: '确认并上传',
-    btn_reset: '重置',
-    btn_rotate_left: '逆时针旋转',
-    btn_rotate_right: '顺时针旋转',
-    btn_scale_x: '水平翻转',
-    btn_scale_y: '垂直翻转',
-    btn_zoom_in: '放大',
-    btn_zoom_out: '缩小',
-    preview: '预览',
-  },
-  drawer: {
-    loadingText: '加载中...',
-    cancelText: '关闭',
-    okText: '确认',
-  },
-  excel: {
-    exportModalTitle: '导出数据',
-    fileType: '文件类型',
-    fileName: '文件名',
-  },
-  form: {
-    putAway: '收起',
-    unfold: '展开',
-
-    maxTip: '字符数应小于{0}位',
-
-    apiSelectNotFound: '请等待数据加载完成...',
-  },
-  icon: {
-    placeholder: '点击选择图标',
-    search: '搜索图标',
-    copy: '复制图标成功!',
-  },
-  menu: {
-    search: '菜单搜索',
-  },
-  modal: {
-    cancelText: '关闭',
-    okText: '确认',
-    close: '关闭',
-    maximize: '最大化',
-    restore: '还原',
-  },
-  table: {
-    settingDens: '密度',
-    settingDensDefault: '默认',
-    settingDensMiddle: '中等',
-    settingDensSmall: '紧凑',
-    settingColumn: '列设置',
-    settingColumnShow: '列展示',
-    settingIndexColumnShow: '序号列',
-    settingSelectColumnShow: '勾选列',
-    settingFixedLeft: '固定到左侧',
-    settingFixedRight: '固定到右侧',
-    settingFullScreen: '全屏',
-
-    index: '序号',
-
-    total: '共 {total} 条数据',
-  },
-  time: {
-    before: '前',
-    after: '后',
-    just: '刚刚',
-    seconds: '秒',
-    minutes: '分钟',
-    hours: '小时',
-    days: '天',
-  },
-  tree: {
-    selectAll: '选择全部',
-    unSelectAll: '取消选择',
-    expandAll: '展开全部',
-    unExpandAll: '折叠全部',
-    checkStrictly: '层级关联',
-    checkUnStrictly: '层级独立',
-  },
-  upload: {
-    save: '保存',
-    upload: '上传',
-    imgUpload: '图片上传',
-    uploaded: '已上传',
-
-    operating: '操作',
-    del: '删除',
-    download: '下载',
-    saveWarn: '请等待文件上传后，保存!',
-    saveError: '没有上传成功的文件，无法保存!',
-
-    preview: '预览',
-    choose: '选择文件',
-
-    accept: '支持{0}格式',
-    acceptUpload: '只能上传{0}格式文件',
-    maxSize: '单个文件不超过{0}MB',
-    maxSizeMultiple: '只能上传不超过{0}MB的文件!',
-    maxNumber: '最多只能上传{0}个文件',
-
-    legend: '略缩图',
-    fileName: '文件名',
-    fileSize: '文件大小',
-    fileStatue: '状态',
-
-    startUpload: '开始上传',
-    uploadSuccess: '上传成功',
-    uploadError: '上传失败',
-    uploading: '上传中',
-    uploadWait: '请等待文件上传结束后操作',
-    reUploadFailed: '重新上传失败文件',
-  },
-  verify: {
-    error: '验证失败！',
-    time: '验证校验成功,耗时{time}秒！',
-
-    redoTip: '点击图片可刷新',
-
-    dragText: '请按住滑块拖动',
-    successText: '验证通过',
-  },
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/layout.json b/apps/admin/src/locales/lang/zh-CN/layout.json
new file mode 100644
index 0000000..d6a894e
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/layout.json
@@ -0,0 +1,95 @@
+{
+  "footer": {
+    "onlinePreview": "在线预览", 
+    "onlineDocument": "在线文档"
+  }, 
+  "header": {
+    "dropdownChangeApi": "切换API", 
+    "dropdownItemDoc": "文档", 
+    "dropdownItemLoginOut": "退出系统", 
+    "tooltipErrorLog": "错误日志", 
+    "tooltipLock": "锁定屏幕", 
+    "tooltipNotify": "消息通知", 
+    "tooltipEntryFull": "全屏", 
+    "tooltipExitFull": "退出全屏", 
+    "lockScreenPassword": "锁屏密码", 
+    "lockScreen": "锁定屏幕", 
+    "lockScreenBtn": "锁定", 
+    "home": "首页"
+  }, 
+  "multipleTab": {
+    "reload": "重新加载", 
+    "close": "关闭标签页", 
+    "closeLeft": "关闭左侧标签页", 
+    "closeRight": "关闭右侧标签页", 
+    "closeOther": "关闭其它标签页", 
+    "closeAll": "关闭全部标签页"
+  }, 
+  "setting": {
+    "contentModeFull": "流式", 
+    "contentModeFixed": "定宽", 
+    "topMenuAlignLeft": "居左", 
+    "topMenuAlignRight": "居中", 
+    "topMenuAlignCenter": "居右", 
+    "menuTriggerNone": "不显示", 
+    "menuTriggerBottom": "底部", 
+    "menuTriggerTop": "顶部", 
+    "menuTypeSidebar": "左侧菜单模式", 
+    "menuTypeMixSidebar": "左侧菜单混合模式", 
+    "menuTypeMix": "顶部菜单混合模式", 
+    "menuTypeTopMenu": "顶部菜单模式", 
+    "on": "开", 
+    "off": "关", 
+    "minute": "分钟", 
+    "operatingTitle": "操作成功", 
+    "operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！", 
+    "resetSuccess": "重置成功！", 
+    "copyBtn": "拷贝", 
+    "clearBtn": "清空缓存并返回登录页", 
+    "drawerTitle": "项目配置", 
+    "darkMode": "主题", 
+    "navMode": "导航栏模式", 
+    "interfaceFunction": "界面功能", 
+    "interfaceDisplay": "界面显示", 
+    "animation": "动画", 
+    "splitMenu": "分割菜单", 
+    "closeMixSidebarOnChange": "切换页面关闭菜单", 
+    "sysTheme": "系统主题", 
+    "headerTheme": "顶栏主题", 
+    "sidebarTheme": "菜单主题", 
+    "menuDrag": "侧边菜单拖拽", 
+    "menuSearch": "菜单搜索", 
+    "menuAccordion": "侧边菜单手风琴模式", 
+    "menuCollapse": "折叠菜单", 
+    "collapseMenuDisplayName": "折叠菜单显示名称", 
+    "topMenuLayout": "顶部菜单布局", 
+    "menuCollapseButton": "菜单折叠按钮", 
+    "contentMode": "内容区域宽度", 
+    "expandedMenuWidth": "菜单展开宽度", 
+    "breadcrumb": "面包屑", 
+    "breadcrumbIcon": "面包屑图标", 
+    "tabs": "标签页", 
+    "tabDetail": "标签详情页", 
+    "tabsQuickBtn": "标签页快捷按钮", 
+    "tabsRedoBtn": "标签页刷新按钮", 
+    "tabsFoldBtn": "标签页折叠按钮", 
+    "sidebar": "左侧菜单", 
+    "header": "顶栏", 
+    "footer": "页脚", 
+    "fullContent": "全屏内容", 
+    "grayMode": "灰色模式", 
+    "colorWeak": "色弱模式", 
+    "progress": "顶部进度条", 
+    "switchLoading": "切换loading", 
+    "switchAnimation": "切换动画", 
+    "animationType": "动画类型", 
+    "autoScreenLock": "自动锁屏", 
+    "notAutoScreenLock": "不自动锁屏", 
+    "fixedHeader": "固定header", 
+    "fixedSideBar": "固定Sidebar", 
+    "mixSidebarTrigger": "混合菜单触发方式", 
+    "triggerHover": "悬停", 
+    "triggerClick": "点击", 
+    "mixSidebarFixed": "固定展开菜单"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/zh-CN/layout.ts b/apps/admin/src/locales/lang/zh-CN/layout.ts
deleted file mode 100644
index ed1f853..0000000
--- a/apps/admin/src/locales/lang/zh-CN/layout.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-export default {
-  footer: { onlinePreview: '在线预览', onlineDocument: '在线文档' },
-  header: {
-    // user dropdown
-    dropdownItemDoc: '文档',
-    dropdownItemLoginOut: '退出系统',
-
-    // tooltip
-    tooltipErrorLog: '错误日志',
-    tooltipLock: '锁定屏幕',
-    tooltipNotify: '消息通知',
-
-    tooltipEntryFull: '全屏',
-    tooltipExitFull: '退出全屏',
-
-    // lock
-    lockScreenPassword: '锁屏密码',
-    lockScreen: '锁定屏幕',
-    lockScreenBtn: '锁定',
-
-    home: '首页',
-  },
-  multipleTab: {
-    reload: '重新加载',
-    close: '关闭标签页',
-    closeLeft: '关闭左侧标签页',
-    closeRight: '关闭右侧标签页',
-    closeOther: '关闭其它标签页',
-    closeAll: '关闭全部标签页',
-  },
-  setting: {
-    // content mode
-    contentModeFull: '流式',
-    contentModeFixed: '定宽',
-    // topMenu align
-    topMenuAlignLeft: '居左',
-    topMenuAlignRight: '居中',
-    topMenuAlignCenter: '居右',
-    // menu trigger
-    menuTriggerNone: '不显示',
-    menuTriggerBottom: '底部',
-    menuTriggerTop: '顶部',
-    // menu type
-    menuTypeSidebar: '左侧菜单模式',
-    menuTypeMixSidebar: '左侧菜单混合模式',
-    menuTypeMix: '顶部菜单混合模式',
-    menuTypeTopMenu: '顶部菜单模式',
-
-    on: '开',
-    off: '关',
-    minute: '分钟',
-
-    operatingTitle: '操作成功',
-    operatingContent: '复制成功,请到 src/settings/projectSetting.ts 中修改配置！',
-    resetSuccess: '重置成功！',
-
-    copyBtn: '拷贝',
-    clearBtn: '清空缓存并返回登录页',
-
-    drawerTitle: '项目配置',
-
-    darkMode: '主题',
-    navMode: '导航栏模式',
-    interfaceFunction: '界面功能',
-    interfaceDisplay: '界面显示',
-    animation: '动画',
-    splitMenu: '分割菜单',
-    closeMixSidebarOnChange: '切换页面关闭菜单',
-
-    sysTheme: '系统主题',
-    headerTheme: '顶栏主题',
-    sidebarTheme: '菜单主题',
-
-    menuDrag: '侧边菜单拖拽',
-    menuSearch: '菜单搜索',
-    menuAccordion: '侧边菜单手风琴模式',
-    menuCollapse: '折叠菜单',
-    collapseMenuDisplayName: '折叠菜单显示名称',
-    topMenuLayout: '顶部菜单布局',
-    menuCollapseButton: '菜单折叠按钮',
-    contentMode: '内容区域宽度',
-    expandedMenuWidth: '菜单展开宽度',
-
-    breadcrumb: '面包屑',
-    breadcrumbIcon: '面包屑图标',
-    tabs: '标签页',
-    tabDetail: '标签详情页',
-    tabsQuickBtn: '标签页快捷按钮',
-    tabsRedoBtn: '标签页刷新按钮',
-    tabsFoldBtn: '标签页折叠按钮',
-    sidebar: '左侧菜单',
-    header: '顶栏',
-    footer: '页脚',
-    fullContent: '全屏内容',
-    grayMode: '灰色模式',
-    colorWeak: '色弱模式',
-
-    progress: '顶部进度条',
-    switchLoading: '切换loading',
-    switchAnimation: '切换动画',
-    animationType: '动画类型',
-
-    autoScreenLock: '自动锁屏',
-    notAutoScreenLock: '不自动锁屏',
-
-    fixedHeader: '固定header',
-    fixedSideBar: '固定Sidebar',
-
-    mixSidebarTrigger: '混合菜单触发方式',
-    triggerHover: '悬停',
-    triggerClick: '点击',
-
-    mixSidebarFixed: '固定展开菜单',
-  },
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/routes/basic.json b/apps/admin/src/locales/lang/zh-CN/routes/basic.json
new file mode 100644
index 0000000..830ff12
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/routes/basic.json
@@ -0,0 +1,4 @@
+{
+  "login": "登录",
+  "errorLogList": "错误日志列表"
+}
diff --git a/apps/admin/src/locales/lang/zh-CN/routes/basic.ts b/apps/admin/src/locales/lang/zh-CN/routes/basic.ts
deleted file mode 100644
index 3d03e8e..0000000
--- a/apps/admin/src/locales/lang/zh-CN/routes/basic.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  login: '登录',
-  errorLogList: '错误日志列表',
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/routes/dashboard.json b/apps/admin/src/locales/lang/zh-CN/routes/dashboard.json
new file mode 100644
index 0000000..f5fba47
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/routes/dashboard.json
@@ -0,0 +1,6 @@
+{
+  "dashboard": "Dashboard",
+  "about": "关于",
+  "workbench": "工作台",
+  "analysis": "分析页"
+}
diff --git a/apps/admin/src/locales/lang/zh-CN/routes/dashboard.ts b/apps/admin/src/locales/lang/zh-CN/routes/dashboard.ts
deleted file mode 100644
index 04b1b19..0000000
--- a/apps/admin/src/locales/lang/zh-CN/routes/dashboard.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  dashboard: 'Dashboard',
-  about: '关于',
-  workbench: '工作台',
-  analysis: '分析页',
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/routes/demo.json b/apps/admin/src/locales/lang/zh-CN/routes/demo.json
new file mode 100644
index 0000000..c73630f
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/routes/demo.json
@@ -0,0 +1,177 @@
+{
+  "charts": {
+    "baiduMap": "百度地图", 
+    "aMap": "高德地图", 
+    "googleMap": "谷歌地图", 
+    "charts": "图表", 
+    "map": "地图", 
+    "line": "折线图", 
+    "pie": "饼图"
+  }, 
+  "comp": {
+    "comp": "组件", 
+    "basic": "基础组件", 
+    "transition": "动画组件", 
+    "countTo": "数字动画", 
+    "scroll": "滚动组件", 
+    "scrollBasic": "基础滚动", 
+    "scrollAction": "滚动函数", 
+    "virtualScroll": "虚拟滚动", 
+    "tree": "Tree", 
+    "treeBasic": "基础树", 
+    "editTree": "可搜索/工具栏", 
+    "actionTree": "函数操作示例", 
+    "modal": "弹窗扩展", 
+    "drawer": "抽屉扩展", 
+    "desc": "详情组件", 
+    "verify": "验证组件", 
+    "verifyDrag": "拖拽校验", 
+    "verifyRotate": "图片还原", 
+    "qrcode": "二维码组件", 
+    "strength": "密码强度组件", 
+    "upload": "上传组件", 
+    "loading": "Loading", 
+    "time": "相对时间", 
+    "cropperImage": "图片裁剪", 
+    "cardList": "卡片列表"
+  }, 
+  "editor": {
+    "editor": "编辑器", 
+    "jsonEditor": "Json编辑器", 
+    "markdown": "markdown编辑器", 
+    "tinymce": "富文本", 
+    "tinymceBasic": "基础使用", 
+    "tinymceForm": "嵌入form"
+  }, 
+  "excel": {
+    "excel": "Excel", 
+    "customExport": "选择导出格式", 
+    "jsonExport": "JSON数据导出", 
+    "arrayExport": "Array数据导出", 
+    "importExcel": "导入"
+  }, 
+  "feat": {
+    "feat": "功能", 
+    "icon": "图标", 
+    "sessionTimeout": "登录过期", 
+    "tabs": "标签页操作", 
+    "tabDetail": "标签详情页", 
+    "print": "打印", 
+    "contextMenu": "右键菜单", 
+    "download": "文件下载", 
+    "clickOutSide": "ClickOutSide组件", 
+    "imgPreview": "图片预览", 
+    "copy": "剪切板", 
+    "ellipsis": "文本省略", 
+    "msg": "消息提示", 
+    "watermark": "水印", 
+    "ripple": "水波纹", 
+    "fullScreen": "全屏", 
+    "errorLog": "错误日志", 
+    "tab": "Tab带参", 
+    "tab1": "Tab带参1", 
+    "tab2": "Tab带参2", 
+    "menu": "Menu带参", 
+    "menu1": "Menu带参1", 
+    "menu2": "Menu带参2", 
+    "ws": "websocket测试", 
+    "breadcrumb": "面包屑导航", 
+    "breadcrumbFlat": "平级模式", 
+    "requestDemo": "测试请求重试", 
+    "breadcrumbFlatDetail": "平级详情", 
+    "breadcrumbChildren": "层级模式", 
+    "breadcrumbChildrenDetail": "层级详情"
+  }, 
+  "flow": {
+    "name": "图形编辑器", 
+    "flowChart": "流程图"
+  }, 
+  "form": {
+    "form": "Form", 
+    "basic": "基础表单", 
+    "useForm": "useForm", 
+    "refForm": "RefForm", 
+    "advancedForm": "可收缩表单", 
+    "ruleForm": "表单验证", 
+    "dynamicForm": "动态表单", 
+    "customerForm": "自定义组件", 
+    "appendForm": "表单增删示例", 
+    "tabsForm": "标签页+多级field"
+  }, 
+  "iframe": {
+    "frame": "外部页面", 
+    "antv": "antVue文档(内嵌)", 
+    "doc": "项目文档(内嵌)", 
+    "docExternal": "项目文档(外链)"
+  }, 
+  "level": {
+    "level": "多级菜单"
+  }, 
+  "page": {
+    "page": "页面", 
+    "form": "表单页", 
+    "formBasic": "基础表单", 
+    "formStep": "分步表单", 
+    "formHigh": "高级表单", 
+    "desc": "详情页", 
+    "descBasic": "基础详情页", 
+    "descHigh": "高级详情页", 
+    "result": "结果页", 
+    "resultSuccess": "成功页", 
+    "resultFail": "失败页", 
+    "account": "个人页", 
+    "accountCenter": "个人中心", 
+    "accountSetting": "个人设置", 
+    "exception": "异常页", 
+    "netWorkError": "网络错误", 
+    "notData": "无数据", 
+    "list": "列表页", 
+    "listCard": "卡片列表", 
+    "listBasic": "标准列表", 
+    "listSearch": "搜索列表"
+  }, 
+  "permission": {
+    "permission": "权限管理", 
+    "front": "基于前端权限", 
+    "frontPage": "页面权限", 
+    "frontBtn": "按钮权限", 
+    "frontTestA": "权限测试页A", 
+    "frontTestB": "权限测试页B", 
+    "back": "基于后台权限", 
+    "backPage": "页面权限", 
+    "backBtn": "按钮权限"
+  }, 
+  "setup": {
+    "page": "引导页"
+  }, 
+  "system": {
+    "moduleName": "系统管理", 
+    "account": "账号管理", 
+    "account_detail": "账号详情", 
+    "password": "修改密码", 
+    "dept": "部门管理", 
+    "menu": "菜单管理", 
+    "role": "角色管理"
+  }, 
+  "table": {
+    "table": "Table", 
+    "basic": "基础表格", 
+    "treeTable": "树形表格", 
+    "fetchTable": "远程加载示例", 
+    "fixedColumn": "固定列", 
+    "customerCell": "自定义列", 
+    "formTable": "开启搜索区域", 
+    "useTable": "UseTable", 
+    "refTable": "RefTable", 
+    "multipleHeader": "多级表头", 
+    "mergeHeader": "合并单元格", 
+    "expandTable": "可展开表格", 
+    "fixedHeight": "定高/头部自定义", 
+    "footerTable": "表尾行合计", 
+    "editCellTable": "可编辑单元格", 
+    "editRowTable": "可编辑行", 
+    "authColumn": "权限列", 
+    "resizeParentHeightTable": "继承父元素高度", 
+    "vxeTable": "VxeTable"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/zh-CN/routes/demo.ts b/apps/admin/src/locales/lang/zh-CN/routes/demo.ts
deleted file mode 100644
index 54f6482..0000000
--- a/apps/admin/src/locales/lang/zh-CN/routes/demo.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-export default {
-  charts: {
-    baiduMap: '百度地图',
-    aMap: '高德地图',
-    googleMap: '谷歌地图',
-    charts: '图表',
-    map: '地图',
-    line: '折线图',
-    pie: '饼图',
-  },
-  comp: {
-    comp: '组件',
-    basic: '基础组件',
-    transition: '动画组件',
-    countTo: '数字动画',
-
-    scroll: '滚动组件',
-    scrollBasic: '基础滚动',
-    scrollAction: '滚动函数',
-    virtualScroll: '虚拟滚动',
-
-    tree: 'Tree',
-    treeBasic: '基础树',
-    editTree: '可搜索/工具栏',
-    actionTree: '函数操作示例',
-
-    modal: '弹窗扩展',
-    drawer: '抽屉扩展',
-    desc: '详情组件',
-
-    verify: '验证组件',
-    verifyDrag: '拖拽校验',
-    verifyRotate: '图片还原',
-
-    qrcode: '二维码组件',
-    strength: '密码强度组件',
-    upload: '上传组件',
-
-    loading: 'Loading',
-
-    time: '相对时间',
-    cropperImage: '图片裁剪',
-    cardList: '卡片列表',
-  },
-  editor: {
-    editor: '编辑器',
-    jsonEditor: 'Json编辑器',
-    markdown: 'markdown编辑器',
-
-    tinymce: '富文本',
-    tinymceBasic: '基础使用',
-    tinymceForm: '嵌入form',
-  },
-  excel: {
-    excel: 'Excel',
-    customExport: '选择导出格式',
-    jsonExport: 'JSON数据导出',
-    arrayExport: 'Array数据导出',
-    importExcel: '导入',
-  },
-  feat: {
-    feat: '功能',
-    icon: '图标',
-    sessionTimeout: '登录过期',
-    tabs: '标签页操作',
-    tabDetail: '标签详情页',
-    print: '打印',
-    contextMenu: '右键菜单',
-    download: '文件下载',
-    clickOutSide: 'ClickOutSide组件',
-    imgPreview: '图片预览',
-    copy: '剪切板',
-    msg: '消息提示',
-    watermark: '水印',
-    ripple: '水波纹',
-    fullScreen: '全屏',
-    errorLog: '错误日志',
-    tab: 'Tab带参',
-    tab1: 'Tab带参1',
-    tab2: 'Tab带参2',
-    menu: 'Menu带参',
-    menu1: 'Menu带参1',
-    menu2: 'Menu带参2',
-    ws: 'websocket测试',
-    breadcrumb: '面包屑导航',
-    breadcrumbFlat: '平级模式',
-    requestDemo: '测试请求重试',
-    breadcrumbFlatDetail: '平级详情',
-    breadcrumbChildren: '层级模式',
-    breadcrumbChildrenDetail: '层级详情',
-  },
-  flow: {
-    name: '图形编辑器',
-    flowChart: '流程图',
-  },
-  form: {
-    form: 'Form',
-    basic: '基础表单',
-    useForm: 'useForm',
-    refForm: 'RefForm',
-    advancedForm: '可收缩表单',
-    ruleForm: '表单验证',
-    dynamicForm: '动态表单',
-    customerForm: '自定义组件',
-    appendForm: '表单增删示例',
-    tabsForm: '标签页+多级field',
-  },
-  iframe: {
-    frame: '外部页面',
-    antv: 'antVue文档(内嵌)',
-    doc: '项目文档(内嵌)',
-    docExternal: '项目文档(外链)',
-  },
-  level: { level: '多级菜单' },
-  page: {
-    page: '页面',
-
-    form: '表单页',
-    formBasic: '基础表单',
-    formStep: '分步表单',
-    formHigh: '高级表单',
-
-    desc: '详情页',
-    descBasic: '基础详情页',
-    descHigh: '高级详情页',
-
-    result: '结果页',
-    resultSuccess: '成功页',
-    resultFail: '失败页',
-
-    account: '个人页',
-    accountCenter: '个人中心',
-    accountSetting: '个人设置',
-
-    exception: '异常页',
-    netWorkError: '网络错误',
-    notData: '无数据',
-
-    list: '列表页',
-    listCard: '卡片列表',
-    listBasic: '标准列表',
-    listSearch: '搜索列表',
-  },
-  permission: {
-    permission: '权限管理',
-
-    front: '基于前端权限',
-    frontPage: '页面权限',
-    frontBtn: '按钮权限',
-    frontTestA: '权限测试页A',
-    frontTestB: '权限测试页B',
-
-    back: '基于后台权限',
-    backPage: '页面权限',
-    backBtn: '按钮权限',
-  },
-  setup: {
-    page: '引导页',
-  },
-  system: {
-    moduleName: '系统管理',
-    account: '账号管理',
-    account_detail: '账号详情',
-    password: '修改密码',
-    dept: '部门管理',
-    menu: '菜单管理',
-    role: '角色管理',
-  },
-  table: {
-    table: 'Table',
-    basic: '基础表格',
-    treeTable: '树形表格',
-    fetchTable: '远程加载示例',
-    fixedColumn: '固定列',
-    customerCell: '自定义列',
-    formTable: '开启搜索区域',
-    useTable: 'UseTable',
-    refTable: 'RefTable',
-    multipleHeader: '多级表头',
-    mergeHeader: '合并单元格',
-    expandTable: '可展开表格',
-    fixedHeight: '定高/头部自定义',
-    footerTable: '表尾行合计',
-    editCellTable: '可编辑单元格',
-    editRowTable: '可编辑行',
-    authColumn: '权限列',
-    resizeParentHeightTable: '继承父元素高度',
-    vxeTable: 'VxeTable',
-  },
-};
diff --git a/apps/admin/src/locales/lang/zh-CN/sys.json b/apps/admin/src/locales/lang/zh-CN/sys.json
new file mode 100644
index 0000000..73517d7
--- /dev/null
+++ b/apps/admin/src/locales/lang/zh-CN/sys.json
@@ -0,0 +1,92 @@
+{
+  "api": {
+    "operationSuccess": "操作成功", 
+    "operationFailed": "操作失败", 
+    "errorTip": "错误提示", 
+    "successTip": "成功提示", 
+    "errorMessage": "操作失败,系统异常!", 
+    "timeoutMessage": "登录超时,请重新登录!", 
+    "apiTimeoutMessage": "接口请求超时,请刷新页面重试!", 
+    "apiRequestFailed": "请求出错，请稍候重试", 
+    "networkException": "网络异常", 
+    "networkExceptionMsg": "网络异常，请检查您的网络连接是否正常!", 
+    "errMsg401": "用户没有权限（令牌、用户名、密码错误）!", 
+    "errMsg403": "用户得到授权，但是访问是被禁止的。!", 
+    "errMsg404": "网络请求错误,未找到该资源!", 
+    "errMsg405": "网络请求错误,请求方法未允许!", 
+    "errMsg408": "网络请求超时!", 
+    "errMsg500": "服务器错误,请联系管理员!", 
+    "errMsg501": "网络未实现!", 
+    "errMsg502": "网络错误!", 
+    "errMsg503": "服务不可用，服务器暂时过载或维护!", 
+    "errMsg504": "网络超时!", 
+    "errMsg505": "http版本不支持该请求!"
+  }, 
+  "app": {
+    "logoutTip": "温馨提醒", 
+    "logoutMessage": "是否确认退出系统?", 
+    "menuLoading": "菜单加载中..."
+  }, 
+  "errorLog": {
+    "tableTitle": "错误日志列表", 
+    "tableColumnType": "类型", 
+    "tableColumnDate": "时间", 
+    "tableColumnFile": "文件", 
+    "tableColumnMsg": "错误信息", 
+    "tableColumnStackMsg": "stack信息", 
+    "tableActionDesc": "详情", 
+    "modalTitle": "错误详情", 
+    "fireVueError": "点击触发vue错误", 
+    "fireResourceError": "点击触发资源加载错误", 
+    "fireAjaxError": "点击触发ajax错误", 
+    "enableMessage": "只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效."
+  }, 
+  "exception": {
+    "backLogin": "返回登录", 
+    "backHome": "返回首页", 
+    "subTitle403": "抱歉，您无权访问此页面。", 
+    "subTitle404": "抱歉，您访问的页面不存在。", 
+    "subTitle500": "抱歉，服务器报告错误。", 
+    "noDataTitle": "当前页无数据", 
+    "networkErrorTitle": "网络错误", 
+    "networkErrorSubTitle": "抱歉，您的网络连接已断开，请检查您的网络！"
+  }, 
+  "lock": {
+    "unlock": "点击解锁", 
+    "alert": "锁屏密码错误", 
+    "backToLogin": "返回登录", 
+    "entry": "进入系统", 
+    "placeholder": "请输入锁屏密码或者用户密码"
+  }, 
+  "login": {
+    "backSignIn": "返回", 
+    "signInFormTitle": "登录", 
+    "mobileSignInFormTitle": "手机登录", 
+    "qrSignInFormTitle": "二维码登录", 
+    "signUpFormTitle": "注册", 
+    "forgetFormTitle": "重置密码", 
+    "signInTitle": "开箱即用的中后台管理系统", 
+    "signInDesc": "输入您的个人详细信息开始使用！", 
+    "policy": "我同意xxx隐私政策", 
+    "scanSign": "扫码后点击\"确认\"，即可完成登录", 
+    "loginButton": "登录", 
+    "registerButton": "注册", 
+    "rememberMe": "记住我", 
+    "forgetPassword": "忘记密码?", 
+    "otherSignIn": "其他登录方式", 
+    "loginSuccessTitle": "登录成功", 
+    "loginSuccessDesc": "欢迎回来", 
+    "accountPlaceholder": "请输入账号", 
+    "passwordPlaceholder": "请输入密码", 
+    "smsPlaceholder": "请输入验证码", 
+    "mobilePlaceholder": "请输入手机号码", 
+    "policyPlaceholder": "勾选后才能注册", 
+    "diffPwd": "两次输入密码不一致", 
+    "userName": "账号", 
+    "password": "密码", 
+    "confirmPassword": "确认密码", 
+    "email": "邮箱", 
+    "smsCode": "短信验证码", 
+    "mobile": "手机号码"
+  }
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/lang/zh-CN/sys.ts b/apps/admin/src/locales/lang/zh-CN/sys.ts
deleted file mode 100644
index 44ef9f4..0000000
--- a/apps/admin/src/locales/lang/zh-CN/sys.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-export default {
-  api: {
-    operationSuccess: '操作成功',
-    operationFailed: '操作失败',
-    errorTip: '错误提示',
-    successTip: '成功提示',
-    errorMessage: '操作失败,系统异常!',
-    timeoutMessage: '登录超时,请重新登录!',
-    apiTimeoutMessage: '接口请求超时,请刷新页面重试!',
-    apiRequestFailed: '请求出错，请稍候重试',
-    networkException: '网络异常',
-    networkExceptionMsg: '网络异常，请检查您的网络连接是否正常!',
-
-    errMsg401: '用户没有权限（令牌、用户名、密码错误）!',
-    errMsg403: '用户得到授权，但是访问是被禁止的。!',
-    errMsg404: '网络请求错误,未找到该资源!',
-    errMsg405: '网络请求错误,请求方法未允许!',
-    errMsg408: '网络请求超时!',
-    errMsg500: '服务器错误,请联系管理员!',
-    errMsg501: '网络未实现!',
-    errMsg502: '网络错误!',
-    errMsg503: '服务不可用，服务器暂时过载或维护!',
-    errMsg504: '网络超时!',
-    errMsg505: 'http版本不支持该请求!',
-  },
-  app: { logoutTip: '温馨提醒', logoutMessage: '是否确认退出系统?', menuLoading: '菜单加载中...' },
-  errorLog: {
-    tableTitle: '错误日志列表',
-    tableColumnType: '类型',
-    tableColumnDate: '时间',
-    tableColumnFile: '文件',
-    tableColumnMsg: '错误信息',
-    tableColumnStackMsg: 'stack信息',
-
-    tableActionDesc: '详情',
-
-    modalTitle: '错误详情',
-
-    fireVueError: '点击触发vue错误',
-    fireResourceError: '点击触发资源加载错误',
-    fireAjaxError: '点击触发ajax错误',
-
-    enableMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效.',
-  },
-  exception: {
-    backLogin: '返回登录',
-    backHome: '返回首页',
-    subTitle403: '抱歉，您无权访问此页面。',
-    subTitle404: '抱歉，您访问的页面不存在。',
-    subTitle500: '抱歉，服务器报告错误。',
-    noDataTitle: '当前页无数据',
-    networkErrorTitle: '网络错误',
-    networkErrorSubTitle: '抱歉，您的网络连接已断开，请检查您的网络！',
-  },
-  lock: {
-    unlock: '点击解锁',
-    alert: '锁屏密码错误',
-    backToLogin: '返回登录',
-    entry: '进入系统',
-    placeholder: '请输入锁屏密码或者用户密码',
-  },
-  login: {
-    backSignIn: '返回',
-    signInFormTitle: '登录',
-    mobileSignInFormTitle: '手机登录',
-    qrSignInFormTitle: '二维码登录',
-    signUpFormTitle: '注册',
-    forgetFormTitle: '重置密码',
-
-    signInTitle: '开箱即用的中后台管理系统',
-    signInDesc: '输入您的个人详细信息开始使用！',
-    policy: '我同意xxx隐私政策',
-    scanSign: `扫码后点击"确认"，即可完成登录`,
-
-    loginButton: '登录',
-    registerButton: '注册',
-    rememberMe: '记住我',
-    forgetPassword: '忘记密码?',
-    otherSignIn: '其他登录方式',
-
-    // notify
-    loginSuccessTitle: '登录成功',
-    loginSuccessDesc: '欢迎回来',
-
-    // placeholder
-    accountPlaceholder: '请输入账号',
-    passwordPlaceholder: '请输入密码',
-    smsPlaceholder: '请输入验证码',
-    mobilePlaceholder: '请输入手机号码',
-    policyPlaceholder: '勾选后才能注册',
-    diffPwd: '两次输入密码不一致',
-
-    userName: '账号',
-    password: '密码',
-    confirmPassword: '确认密码',
-    email: '邮箱',
-    smsCode: '短信验证码',
-    mobile: '手机号码',
-  },
-};
diff --git a/apps/admin/src/locales/lang/zh_CN.ts b/apps/admin/src/locales/lang/zh_CN.ts
index d715c58..9d2b01b 100644
--- a/apps/admin/src/locales/lang/zh_CN.ts
+++ b/apps/admin/src/locales/lang/zh_CN.ts
@@ -1,10 +1,10 @@
 import { genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/zh_CN';
 
-const modules = import.meta.globEager('./zh-CN/**/*.ts');
+const modules = import.meta.glob('./zh-CN/**/*.json', { eager: true });
 export default {
   message: {
-    ...genMessage(modules, 'zh-CN'),
+    ...genMessage(modules as Recordable<Recordable>, 'zh-CN'),
     antdLocale,
   },
 };
diff --git a/apps/admin/src/locales/setupI18n.ts b/apps/admin/src/locales/setupI18n.ts
index 405fb0c..c98ef92 100644
--- a/apps/admin/src/locales/setupI18n.ts
+++ b/apps/admin/src/locales/setupI18n.ts
@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-import type { I18n, I18nOptions } from 'vue-i18n';
+import type { I18nOptions } from 'vue-i18n';
 
 import { createI18n } from 'vue-i18n';
 import { setHtmlPageLang, setLoadLocalePool } from './helper';
@@ -39,6 +39,6 @@ async function createI18nOptions(): Promise<I18nOptions> {
 // setup i18n instance with glob
 export async function setupI18n(app: App) {
   const options = await createI18nOptions();
-  i18n = createI18n(options) as I18n;
+  i18n = createI18n(options);
   app.use(i18n);
 }
diff --git a/apps/admin/src/logics/error-handle/index.ts b/apps/admin/src/logics/error-handle/index.ts
index e04c009..a18c644 100644
--- a/apps/admin/src/logics/error-handle/index.ts
+++ b/apps/admin/src/logics/error-handle/index.ts
@@ -62,16 +62,15 @@ function formatComponentName(vm: any) {
 /**
  * Configure Vue error handling function
  */
-
-function vueErrorHandler(err: Error, vm: any, info: string) {
+function vueErrorHandler(err: unknown, vm: any, info: string) {
   const errorLogStore = useErrorLogStoreWithOut();
   const { name, path } = formatComponentName(vm);
   errorLogStore.addErrorLogInfo({
     type: ErrorTypeEnum.VUE,
     name,
     file: path,
-    message: err.message,
-    stack: processStackMsg(err),
+    message: (err as Error).message,
+    stack: processStackMsg(err as Error),
     detail: info,
     url: window.location.href,
   });
diff --git a/apps/admin/src/logics/mitt/routeChange.ts b/apps/admin/src/logics/mitt/routeChange.ts
index a985fe2..ccd777d 100644
--- a/apps/admin/src/logics/mitt/routeChange.ts
+++ b/apps/admin/src/logics/mitt/routeChange.ts
@@ -6,10 +6,12 @@ import { mitt } from '/@/utils/mitt';
 import type { RouteLocationNormalized } from 'vue-router';
 import { getRawRoute } from '/@/utils';
 
-const emitter = mitt();
-
 const key = Symbol();
 
+const emitter = mitt<{
+  [key]: RouteLocationNormalized;
+}>();
+
 let lastChangeTab: RouteLocationNormalized;
 
 export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
diff --git a/apps/admin/src/main.ts b/apps/admin/src/main.ts
index 60c3c05..1c4c808 100644
--- a/apps/admin/src/main.ts
+++ b/apps/admin/src/main.ts
@@ -1,7 +1,7 @@
 import 'uno.css';
 import '@/design/index.less';
 import '@/components/VxeTable/src/css/index.scss';
-import 'ant-design-vue/dist/antd.less';
+import 'ant-design-vue/dist/reset.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 
diff --git a/apps/admin/src/router/guard/permissionGuard.ts b/apps/admin/src/router/guard/permissionGuard.ts
index 5b1acde..fd2b5ab 100644
--- a/apps/admin/src/router/guard/permissionGuard.ts
+++ b/apps/admin/src/router/guard/permissionGuard.ts
@@ -95,7 +95,6 @@ export function createPermissionGuard(router: Router) {
       next();
       return;
     }
-
     const routes = await permissionStore.buildRoutesAction();
 
     routes.forEach((route) => {
diff --git a/apps/admin/src/router/menus/index.ts b/apps/admin/src/router/menus/index.ts
index 014d757..c9124b7 100644
--- a/apps/admin/src/router/menus/index.ts
+++ b/apps/admin/src/router/menus/index.ts
@@ -10,12 +10,12 @@ import { router } from '/@/router';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { pathToRegexp } from 'path-to-regexp';
 
-const modules = import.meta.globEager('./modules/**/*.ts');
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 
 const menuModules: MenuModule[] = [];
 
 Object.keys(modules).forEach((key) => {
-  const mod = modules[key].default || {};
+  const mod = (modules as Recordable)[key].default || {};
   const modList = Array.isArray(mod) ? [...mod] : [mod];
   menuModules.push(...modList);
 });
diff --git a/apps/admin/src/router/routes/basic.ts b/apps/admin/src/router/routes/basic.ts
index 58db494..573ce2b 100644
--- a/apps/admin/src/router/routes/basic.ts
+++ b/apps/admin/src/router/routes/basic.ts
@@ -42,7 +42,7 @@ export const REDIRECT_ROUTE: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: '/redirect/:path(.*)',
+      path: '/redirect/:path(.*)/:_redirect_type(.*)/:_origin_params(.*)?',
       name: REDIRECT_NAME,
       component: () => import('/@/views/sys/redirect/index.vue'),
       meta: {
diff --git a/apps/admin/src/router/routes/index.ts b/apps/admin/src/router/routes/index.ts
index 5262342..79115b7 100644
--- a/apps/admin/src/router/routes/index.ts
+++ b/apps/admin/src/router/routes/index.ts
@@ -6,13 +6,13 @@ import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
 
-// import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
-const modules = import.meta.globEager('./modules/**/*.ts');
+// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 const routeModuleList: AppRouteModule[] = [];
 
 // 加入到路由集合中
 Object.keys(modules).forEach((key) => {
-  const mod = modules[key].default || {};
+  const mod = (modules as Recordable)[key].default || {};
   const modList = Array.isArray(mod) ? [...mod] : [mod];
   routeModuleList.push(...modList);
 });
diff --git a/apps/admin/src/router/routes/modules/demo/charts.ts b/apps/admin/src/router/routes/modules/demo/charts.ts
deleted file mode 100644
index c36b5ee..0000000
--- a/apps/admin/src/router/routes/modules/demo/charts.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { getParentLayout, LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const charts: AppRouteModule = {
-  path: '/charts',
-  name: 'Charts',
-  component: LAYOUT,
-  redirect: '/charts/echarts/map',
-  meta: {
-    orderNo: 500,
-    icon: 'ion:bar-chart-outline',
-    title: t('routes.demo.charts.charts'),
-  },
-  children: [
-    {
-      path: 'baiduMap',
-      name: 'BaiduMap',
-      meta: {
-        title: t('routes.demo.charts.baiduMap'),
-      },
-      component: () => import('/@/views/demo/charts/map/Baidu.vue'),
-    },
-    {
-      path: 'aMap',
-      name: 'AMap',
-      meta: {
-        title: t('routes.demo.charts.aMap'),
-      },
-      component: () => import('/@/views/demo/charts/map/Gaode.vue'),
-    },
-    {
-      path: 'googleMap',
-      name: 'GoogleMap',
-      meta: {
-        title: t('routes.demo.charts.googleMap'),
-      },
-      component: () => import('/@/views/demo/charts/map/Google.vue'),
-    },
-
-    {
-      path: 'echarts',
-      name: 'Echarts',
-      component: getParentLayout('Echarts'),
-      meta: {
-        title: 'Echarts',
-      },
-      redirect: '/charts/echarts/map',
-      children: [
-        {
-          path: 'map',
-          name: 'Map',
-          component: () => import('/@/views/demo/charts/Map.vue'),
-          meta: {
-            title: t('routes.demo.charts.map'),
-          },
-        },
-        {
-          path: 'line',
-          name: 'Line',
-          component: () => import('/@/views/demo/charts/Line.vue'),
-          meta: {
-            title: t('routes.demo.charts.line'),
-          },
-        },
-        {
-          path: 'pie',
-          name: 'Pie',
-          component: () => import('/@/views/demo/charts/Pie.vue'),
-          meta: {
-            title: t('routes.demo.charts.pie'),
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export default charts;
diff --git a/apps/admin/src/router/routes/modules/demo/comp.ts b/apps/admin/src/router/routes/modules/demo/comp.ts
deleted file mode 100644
index 28091ba..0000000
--- a/apps/admin/src/router/routes/modules/demo/comp.ts
+++ /dev/null
@@ -1,545 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { getParentLayout, LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const comp: AppRouteModule = {
-  path: '/comp',
-  name: 'Comp',
-  component: LAYOUT,
-  redirect: '/comp/basic',
-  meta: {
-    orderNo: 30,
-    icon: 'ion:layers-outline',
-    title: t('routes.demo.comp.comp'),
-  },
-
-  children: [
-    {
-      path: 'basic',
-      name: 'BasicDemo',
-      component: () => import('/@/views/demo/comp/button/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.basic'),
-      },
-    },
-
-    {
-      path: 'form',
-      name: 'FormDemo',
-      redirect: '/comp/form/basic',
-      component: getParentLayout('FormDemo'),
-      meta: {
-        // icon: 'mdi:form-select',
-        title: t('routes.demo.form.form'),
-      },
-      children: [
-        {
-          path: 'basic',
-          name: 'FormBasicDemo',
-          component: () => import('/@/views/demo/form/index.vue'),
-          meta: {
-            title: t('routes.demo.form.basic'),
-          },
-        },
-        {
-          path: 'useForm',
-          name: 'UseFormDemo',
-          component: () => import('/@/views/demo/form/UseForm.vue'),
-          meta: {
-            title: t('routes.demo.form.useForm'),
-          },
-        },
-        {
-          path: 'refForm',
-          name: 'RefFormDemo',
-          component: () => import('/@/views/demo/form/RefForm.vue'),
-          meta: {
-            title: t('routes.demo.form.refForm'),
-          },
-        },
-        {
-          path: 'advancedForm',
-          name: 'AdvancedFormDemo',
-          component: () => import('/@/views/demo/form/AdvancedForm.vue'),
-          meta: {
-            title: t('routes.demo.form.advancedForm'),
-          },
-        },
-        {
-          path: 'ruleForm',
-          name: 'RuleFormDemo',
-          component: () => import('/@/views/demo/form/RuleForm.vue'),
-          meta: {
-            title: t('routes.demo.form.ruleForm'),
-          },
-        },
-        {
-          path: 'dynamicForm',
-          name: 'DynamicFormDemo',
-          component: () => import('/@/views/demo/form/DynamicForm.vue'),
-          meta: {
-            title: t('routes.demo.form.dynamicForm'),
-          },
-        },
-        {
-          path: 'customerForm',
-          name: 'CustomerFormDemo',
-          component: () => import('/@/views/demo/form/CustomerForm.vue'),
-          meta: {
-            title: t('routes.demo.form.customerForm'),
-          },
-        },
-        {
-          path: 'appendForm',
-          name: 'appendFormDemo',
-          component: () => import('/@/views/demo/form/AppendForm.vue'),
-          meta: {
-            title: t('routes.demo.form.appendForm'),
-          },
-        },
-        {
-          path: 'tabsForm',
-          name: 'tabsFormDemo',
-          component: () => import('/@/views/demo/form/TabsForm.vue'),
-          meta: {
-            title: t('routes.demo.form.tabsForm'),
-          },
-        },
-      ],
-    },
-    {
-      path: 'table',
-      name: 'TableDemo',
-      redirect: '/comp/table/basic',
-      component: getParentLayout('TableDemo'),
-      meta: {
-        // icon: 'carbon:table-split',
-        title: t('routes.demo.table.table'),
-      },
-
-      children: [
-        {
-          path: 'basic',
-          name: 'TableBasicDemo',
-          component: () => import('/@/views/demo/table/Basic.vue'),
-          meta: {
-            title: t('routes.demo.table.basic'),
-          },
-        },
-        {
-          path: 'treeTable',
-          name: 'TreeTableDemo',
-          component: () => import('/@/views/demo/table/TreeTable.vue'),
-          meta: {
-            title: t('routes.demo.table.treeTable'),
-          },
-        },
-        {
-          path: 'fetchTable',
-          name: 'FetchTableDemo',
-          component: () => import('/@/views/demo/table/FetchTable.vue'),
-          meta: {
-            title: t('routes.demo.table.fetchTable'),
-          },
-        },
-        {
-          path: 'fixedColumn',
-          name: 'FixedColumnDemo',
-          component: () => import('/@/views/demo/table/FixedColumn.vue'),
-          meta: {
-            title: t('routes.demo.table.fixedColumn'),
-          },
-        },
-        {
-          path: 'customerCell',
-          name: 'CustomerCellDemo',
-          component: () => import('/@/views/demo/table/CustomerCell.vue'),
-          meta: {
-            title: t('routes.demo.table.customerCell'),
-          },
-        },
-        {
-          path: 'formTable',
-          name: 'FormTableDemo',
-          component: () => import('/@/views/demo/table/FormTable.vue'),
-          meta: {
-            title: t('routes.demo.table.formTable'),
-          },
-        },
-        {
-          path: 'useTable',
-          name: 'UseTableDemo',
-          component: () => import('/@/views/demo/table/UseTable.vue'),
-          meta: {
-            title: t('routes.demo.table.useTable'),
-          },
-        },
-        {
-          path: 'refTable',
-          name: 'RefTableDemo',
-          component: () => import('/@/views/demo/table/RefTable.vue'),
-          meta: {
-            title: t('routes.demo.table.refTable'),
-          },
-        },
-        {
-          path: 'multipleHeader',
-          name: 'MultipleHeaderDemo',
-          component: () => import('/@/views/demo/table/MultipleHeader.vue'),
-          meta: {
-            title: t('routes.demo.table.multipleHeader'),
-          },
-        },
-        {
-          path: 'mergeHeader',
-          name: 'MergeHeaderDemo',
-          component: () => import('/@/views/demo/table/MergeHeader.vue'),
-          meta: {
-            title: t('routes.demo.table.mergeHeader'),
-          },
-        },
-        {
-          path: 'expandTable',
-          name: 'ExpandTableDemo',
-          component: () => import('/@/views/demo/table/ExpandTable.vue'),
-          meta: {
-            title: t('routes.demo.table.expandTable'),
-          },
-        },
-        {
-          path: 'fixedHeight',
-          name: 'FixedHeightDemo',
-          component: () => import('/@/views/demo/table/FixedHeight.vue'),
-          meta: {
-            title: t('routes.demo.table.fixedHeight'),
-          },
-        },
-        {
-          path: 'footerTable',
-          name: 'FooterTableDemo',
-          component: () => import('/@/views/demo/table/FooterTable.vue'),
-          meta: {
-            title: t('routes.demo.table.footerTable'),
-          },
-        },
-        {
-          path: 'editCellTable',
-          name: 'EditCellTableDemo',
-          component: () => import('/@/views/demo/table/EditCellTable.vue'),
-          meta: {
-            title: t('routes.demo.table.editCellTable'),
-          },
-        },
-        {
-          path: 'editRowTable',
-          name: 'EditRowTableDemo',
-          component: () => import('/@/views/demo/table/EditRowTable.vue'),
-          meta: {
-            title: t('routes.demo.table.editRowTable'),
-          },
-        },
-        {
-          path: 'authColumn',
-          name: 'AuthColumnDemo',
-          component: () => import('/@/views/demo/table/AuthColumn.vue'),
-          meta: {
-            title: t('routes.demo.table.authColumn'),
-          },
-        },
-        {
-          path: 'resizeParentHeightTable',
-          name: 'ResizeParentHeightTable',
-          component: () => import('/@/views/demo/table/ResizeParentHeightTable.vue'),
-          meta: {
-            title: t('routes.demo.table.resizeParentHeightTable'),
-          },
-        },
-        {
-          path: 'vxeTable',
-          name: 'VxeTableDemo',
-          component: () => import('/@/views/demo/table/VxeTable.vue'),
-          meta: {
-            title: t('routes.demo.table.vxeTable'),
-          },
-        },
-      ],
-    },
-    {
-      path: 'transition',
-      name: 'transitionDemo',
-      component: () => import('/@/views/demo/comp/transition/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.transition'),
-      },
-    },
-    {
-      path: 'cropper',
-      name: 'CropperDemo',
-      component: () => import('/@/views/demo/comp/cropper/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.cropperImage'),
-      },
-    },
-
-    {
-      path: 'timestamp',
-      name: 'TimeDemo',
-      component: () => import('/@/views/demo/comp/time/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.time'),
-      },
-    },
-    {
-      path: 'countTo',
-      name: 'CountTo',
-      component: () => import('/@/views/demo/comp/count-to/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.countTo'),
-      },
-    },
-    {
-      path: 'tree',
-      name: 'TreeDemo',
-      redirect: '/comp/tree/basic',
-      component: getParentLayout('TreeDemo'),
-      meta: {
-        // icon: 'clarity:tree-view-line',
-        title: t('routes.demo.comp.tree'),
-      },
-      children: [
-        {
-          path: 'basic',
-          name: 'BasicTreeDemo',
-          component: () => import('/@/views/demo/tree/index.vue'),
-          meta: {
-            title: t('routes.demo.comp.treeBasic'),
-          },
-        },
-        {
-          path: 'editTree',
-          name: 'EditTreeDemo',
-          component: () => import('/@/views/demo/tree/EditTree.vue'),
-          meta: {
-            title: t('routes.demo.comp.editTree'),
-          },
-        },
-        {
-          path: 'actionTree',
-          name: 'ActionTreeDemo',
-          component: () => import('/@/views/demo/tree/ActionTree.vue'),
-          meta: {
-            title: t('routes.demo.comp.actionTree'),
-          },
-        },
-      ],
-    },
-    {
-      path: 'editor',
-      name: 'EditorDemo',
-      redirect: '/comp/editor/markdown',
-      component: getParentLayout('EditorDemo'),
-      meta: {
-        // icon: 'carbon:table-split',
-        title: t('routes.demo.editor.editor'),
-      },
-      children: [
-        {
-          path: 'json',
-          component: () => import('/@/views/demo/editor/json/index.vue'),
-          name: 'JsonEditorDemo',
-          meta: {
-            title: t('routes.demo.editor.jsonEditor'),
-          },
-        },
-        {
-          path: 'markdown',
-          component: getParentLayout('MarkdownDemo'),
-          name: 'MarkdownDemo',
-          meta: {
-            title: t('routes.demo.editor.markdown'),
-          },
-          redirect: '/comp/editor/markdown/index',
-          children: [
-            {
-              path: 'index',
-              name: 'MarkDownBasicDemo',
-              component: () => import('/@/views/demo/editor/markdown/index.vue'),
-              meta: {
-                title: t('routes.demo.editor.tinymceBasic'),
-              },
-            },
-            {
-              path: 'editor',
-              name: 'MarkDownFormDemo',
-              component: () => import('/@/views/demo/editor/markdown/Editor.vue'),
-              meta: {
-                title: t('routes.demo.editor.tinymceForm'),
-              },
-            },
-          ],
-        },
-
-        {
-          path: 'tinymce',
-          component: getParentLayout('TinymceDemo'),
-          name: 'TinymceDemo',
-          meta: {
-            title: t('routes.demo.editor.tinymce'),
-          },
-          redirect: '/comp/editor/tinymce/index',
-          children: [
-            {
-              path: 'index',
-              name: 'TinymceBasicDemo',
-              component: () => import('/@/views/demo/editor/tinymce/index.vue'),
-              meta: {
-                title: t('routes.demo.editor.tinymceBasic'),
-              },
-            },
-            {
-              path: 'editor',
-              name: 'TinymceFormDemo',
-              component: () => import('/@/views/demo/editor/tinymce/Editor.vue'),
-              meta: {
-                title: t('routes.demo.editor.tinymceForm'),
-              },
-            },
-          ],
-        },
-      ],
-    },
-    {
-      path: 'scroll',
-      name: 'ScrollDemo',
-      redirect: '/comp/scroll/basic',
-      component: getParentLayout('ScrollDemo'),
-      meta: {
-        title: t('routes.demo.comp.scroll'),
-      },
-      children: [
-        {
-          path: 'basic',
-          name: 'BasicScrollDemo',
-          component: () => import('/@/views/demo/comp/scroll/index.vue'),
-          meta: {
-            title: t('routes.demo.comp.scrollBasic'),
-          },
-        },
-        {
-          path: 'action',
-          name: 'ActionScrollDemo',
-          component: () => import('/@/views/demo/comp/scroll/Action.vue'),
-          meta: {
-            title: t('routes.demo.comp.scrollAction'),
-          },
-        },
-        {
-          path: 'virtualScroll',
-          name: 'VirtualScrollDemo',
-          component: () => import('/@/views/demo/comp/scroll/VirtualScroll.vue'),
-          meta: {
-            title: t('routes.demo.comp.virtualScroll'),
-          },
-        },
-      ],
-    },
-
-    {
-      path: 'modal',
-      name: 'ModalDemo',
-      component: () => import('/@/views/demo/comp/modal/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.modal'),
-      },
-    },
-    {
-      path: 'drawer',
-      name: 'DrawerDemo',
-      component: () => import('/@/views/demo/comp/drawer/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.drawer'),
-      },
-    },
-    {
-      path: 'desc',
-      name: 'DescDemo',
-      component: () => import('/@/views/demo/comp/desc/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.desc'),
-      },
-    },
-
-    {
-      path: 'verify',
-      name: 'VerifyDemo',
-      component: getParentLayout('VerifyDemo'),
-      redirect: '/comp/verify/drag',
-      meta: {
-        title: t('routes.demo.comp.verify'),
-      },
-      children: [
-        {
-          path: 'drag',
-          name: 'VerifyDragDemo',
-          component: () => import('/@/views/demo/comp/verify/index.vue'),
-          meta: {
-            title: t('routes.demo.comp.verifyDrag'),
-          },
-        },
-        {
-          path: 'rotate',
-          name: 'VerifyRotateDemo',
-          component: () => import('/@/views/demo/comp/verify/Rotate.vue'),
-          meta: {
-            title: t('routes.demo.comp.verifyRotate'),
-          },
-        },
-      ],
-    },
-    //
-
-    {
-      path: 'qrcode',
-      name: 'QrCodeDemo',
-      component: () => import('/@/views/demo/comp/qrcode/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.qrcode'),
-      },
-    },
-    {
-      path: 'strength-meter',
-      name: 'StrengthMeterDemo',
-      component: () => import('/@/views/demo/comp/strength-meter/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.strength'),
-      },
-    },
-    {
-      path: 'upload',
-      name: 'UploadDemo',
-      component: () => import('/@/views/demo/comp/upload/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.upload'),
-      },
-    },
-    {
-      path: 'loading',
-      name: 'LoadingDemo',
-      component: () => import('/@/views/demo/comp/loading/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.loading'),
-      },
-    },
-    {
-      path: 'cardList',
-      name: 'CardListDemo',
-      component: () => import('/@/views/demo/comp/card-list/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.cardList'),
-      },
-    },
-  ],
-};
-
-export default comp;
diff --git a/apps/admin/src/router/routes/modules/demo/feat.ts b/apps/admin/src/router/routes/modules/demo/feat.ts
deleted file mode 100644
index 7c7121d..0000000
--- a/apps/admin/src/router/routes/modules/demo/feat.ts
+++ /dev/null
@@ -1,315 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { getParentLayout, LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const feat: AppRouteModule = {
-  path: '/feat',
-  name: 'FeatDemo',
-  component: LAYOUT,
-  redirect: '/feat/icon',
-  meta: {
-    orderNo: 19,
-    icon: 'ion:git-compare-outline',
-    title: t('routes.demo.feat.feat'),
-  },
-
-  children: [
-    {
-      path: 'icon',
-      name: 'IconDemo',
-      component: () => import('/@/views/demo/feat/icon/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.icon'),
-      },
-    },
-    {
-      path: 'ws',
-      name: 'WebSocket',
-      component: () => import('/@/views/demo/feat/ws/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.ws'),
-      },
-    },
-    {
-      path: 'session-timeout',
-      name: 'SessionTimeout',
-      component: () => import('/@/views/demo/feat/session-timeout/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.sessionTimeout'),
-      },
-    },
-    {
-      path: 'print',
-      name: 'Print',
-      component: () => import('/@/views/demo/feat/print/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.print'),
-      },
-    },
-    {
-      path: 'tabs',
-      name: 'TabsDemo',
-      component: () => import('/@/views/demo/feat/tabs/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.tabs'),
-        hideChildrenInMenu: true,
-      },
-      children: [
-        {
-          path: 'detail/:id',
-          name: 'TabDetail',
-          component: () => import('/@/views/demo/feat/tabs/TabDetail.vue'),
-          meta: {
-            currentActiveMenu: '/feat/tabs',
-            title: t('routes.demo.feat.tabDetail'),
-            hideMenu: true,
-            dynamicLevel: 3,
-            realPath: '/feat/tabs/detail',
-          },
-        },
-      ],
-    },
-    {
-      path: 'breadcrumb',
-      name: 'BreadcrumbDemo',
-      redirect: '/feat/breadcrumb/flat',
-      component: getParentLayout('BreadcrumbDemo'),
-      meta: {
-        title: t('routes.demo.feat.breadcrumb'),
-      },
-
-      children: [
-        {
-          path: 'flat',
-          name: 'BreadcrumbFlatDemo',
-          component: () => import('/@/views/demo/feat/breadcrumb/FlatList.vue'),
-          meta: {
-            title: t('routes.demo.feat.breadcrumbFlat'),
-          },
-        },
-        {
-          path: 'flatDetail',
-          name: 'BreadcrumbFlatDetailDemo',
-          component: () => import('/@/views/demo/feat/breadcrumb/FlatListDetail.vue'),
-          meta: {
-            title: t('routes.demo.feat.breadcrumbFlatDetail'),
-            hideMenu: true,
-            hideTab: true,
-            currentActiveMenu: '/feat/breadcrumb/flat',
-          },
-        },
-        {
-          path: 'children',
-          name: 'BreadcrumbChildrenDemo',
-          component: () => import('/@/views/demo/feat/breadcrumb/ChildrenList.vue'),
-          meta: {
-            title: t('routes.demo.feat.breadcrumbChildren'),
-          },
-          children: [
-            {
-              path: 'childrenDetail',
-              name: 'BreadcrumbChildrenDetailDemo',
-              component: () => import('/@/views/demo/feat/breadcrumb/ChildrenListDetail.vue'),
-              meta: {
-                currentActiveMenu: '/feat/breadcrumb/children',
-                title: t('routes.demo.feat.breadcrumbChildrenDetail'),
-                //hideTab: true,
-                // hideMenu: true,
-              },
-            },
-          ],
-        },
-      ],
-    },
-
-    {
-      path: 'context-menu',
-      name: 'ContextMenuDemo',
-      component: () => import('/@/views/demo/feat/context-menu/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.contextMenu'),
-      },
-    },
-    {
-      path: 'download',
-      name: 'DownLoadDemo',
-      component: () => import('/@/views/demo/feat/download/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.download'),
-      },
-    },
-    {
-      path: 'click-out-side',
-      name: 'ClickOutSideDemo',
-      component: () => import('/@/views/demo/feat/click-out-side/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.clickOutSide'),
-      },
-    },
-    {
-      path: 'img-preview',
-      name: 'ImgPreview',
-      component: () => import('/@/views/demo/feat/img-preview/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.imgPreview'),
-      },
-    },
-    {
-      path: 'copy',
-      name: 'CopyDemo',
-      component: () => import('/@/views/demo/feat/copy/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.copy'),
-      },
-    },
-    {
-      path: 'msg',
-      name: 'MsgDemo',
-      component: () => import('/@/views/demo/feat/msg/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.msg'),
-      },
-    },
-    {
-      path: 'watermark',
-      name: 'WatermarkDemo',
-      component: () => import('/@/views/demo/feat/watermark/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.watermark'),
-      },
-    },
-    {
-      path: 'ripple',
-      name: 'RippleDemo',
-      component: () => import('/@/views/demo/feat/ripple/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.ripple'),
-      },
-    },
-    {
-      path: 'full-screen',
-      name: 'FullScreenDemo',
-      component: () => import('/@/views/demo/feat/full-screen/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.fullScreen'),
-      },
-    },
-    {
-      path: '/error-log',
-      name: 'ErrorLog',
-      component: () => import('/@/views/sys/error-log/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.errorLog'),
-      },
-    },
-    {
-      path: 'excel',
-      name: 'Excel',
-      redirect: '/feat/excel/customExport',
-      component: getParentLayout('Excel'),
-      meta: {
-        // icon: 'mdi:microsoft-excel',
-        title: t('routes.demo.excel.excel'),
-      },
-
-      children: [
-        {
-          path: 'customExport',
-          name: 'CustomExport',
-          component: () => import('/@/views/demo/excel/CustomExport.vue'),
-          meta: {
-            title: t('routes.demo.excel.customExport'),
-          },
-        },
-        {
-          path: 'jsonExport',
-          name: 'JsonExport',
-          component: () => import('/@/views/demo/excel/JsonExport.vue'),
-          meta: {
-            title: t('routes.demo.excel.jsonExport'),
-          },
-        },
-        {
-          path: 'arrayExport',
-          name: 'ArrayExport',
-          component: () => import('/@/views/demo/excel/ArrayExport.vue'),
-          meta: {
-            title: t('routes.demo.excel.arrayExport'),
-          },
-        },
-        {
-          path: 'importExcel',
-          name: 'ImportExcel',
-          component: () => import('/@/views/demo/excel/ImportExcel.vue'),
-          meta: {
-            title: t('routes.demo.excel.importExcel'),
-          },
-        },
-      ],
-    },
-    {
-      path: 'testTab/:id',
-      name: 'TestTab',
-      component: () => import('/@/views/demo/feat/tab-params/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.tab'),
-        carryParam: true,
-        hidePathForChildren: true,
-      },
-      children: [
-        {
-          path: 'testTab/id1',
-          name: 'TestTab1',
-          component: () => import('/@/views/demo/feat/tab-params/index.vue'),
-          meta: {
-            title: t('routes.demo.feat.tab1'),
-            carryParam: true,
-            ignoreRoute: true,
-          },
-        },
-        {
-          path: 'testTab/id2',
-          name: 'TestTab2',
-          component: () => import('/@/views/demo/feat/tab-params/index.vue'),
-          meta: {
-            title: t('routes.demo.feat.tab2'),
-            carryParam: true,
-            ignoreRoute: true,
-          },
-        },
-      ],
-    },
-    {
-      path: 'testParam/:id',
-      name: 'TestParam',
-      component: getParentLayout('TestParam'),
-      meta: {
-        title: t('routes.demo.feat.menu'),
-        ignoreKeepAlive: true,
-      },
-      children: [
-        {
-          path: 'sub1',
-          name: 'TestParam_1',
-          component: () => import('/@/views/demo/feat/menu-params/index.vue'),
-          meta: {
-            title: t('routes.demo.feat.menu1'),
-            ignoreKeepAlive: true,
-          },
-        },
-        {
-          path: 'sub2',
-          name: 'TestParam_2',
-          component: () => import('/@/views/demo/feat/menu-params/index.vue'),
-          meta: {
-            title: t('routes.demo.feat.menu2'),
-            ignoreKeepAlive: true,
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export default feat;
diff --git a/apps/admin/src/router/routes/modules/demo/flow.ts b/apps/admin/src/router/routes/modules/demo/flow.ts
deleted file mode 100644
index 4654c9b..0000000
--- a/apps/admin/src/router/routes/modules/demo/flow.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const charts: AppRouteModule = {
-  path: '/flow',
-  name: 'FlowDemo',
-  component: LAYOUT,
-  redirect: '/flow/flowChart',
-  meta: {
-    orderNo: 5000,
-    icon: 'tabler:chart-dots',
-    title: t('routes.demo.flow.name'),
-  },
-  children: [
-    {
-      path: 'flowChart',
-      name: 'flowChartDemo',
-      component: () => import('/@/views/demo/comp/flow-chart/index.vue'),
-      meta: {
-        title: t('routes.demo.flow.flowChart'),
-      },
-    },
-  ],
-};
-
-export default charts;
diff --git a/apps/admin/src/router/routes/modules/demo/iframe.ts b/apps/admin/src/router/routes/modules/demo/iframe.ts
deleted file mode 100644
index 9a3eaa8..0000000
--- a/apps/admin/src/router/routes/modules/demo/iframe.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue');
-
-const iframe: AppRouteModule = {
-  path: '/frame',
-  name: 'Frame',
-  component: LAYOUT,
-  redirect: '/frame/doc',
-  meta: {
-    orderNo: 1000,
-    icon: 'ion:tv-outline',
-    title: t('routes.demo.iframe.frame'),
-  },
-
-  children: [
-    {
-      path: 'doc',
-      name: 'Doc',
-      component: IFrame,
-      meta: {
-        frameSrc: 'https://doc.vvbin.cn/',
-        title: t('routes.demo.iframe.doc'),
-      },
-    },
-    {
-      path: 'antv',
-      name: 'Antv',
-      component: IFrame,
-      meta: {
-        frameSrc: 'https://www.antdv.com/docs/vue/introduce-cn/',
-        title: t('routes.demo.iframe.antv'),
-      },
-    },
-    {
-      path: 'https://doc.vvbin.cn/',
-      name: 'DocExternal',
-      component: IFrame,
-      meta: {
-        title: t('routes.demo.iframe.docExternal'),
-      },
-    },
-  ],
-};
-
-export default iframe;
diff --git a/apps/admin/src/router/routes/modules/demo/level.ts b/apps/admin/src/router/routes/modules/demo/level.ts
deleted file mode 100644
index 3cee375..0000000
--- a/apps/admin/src/router/routes/modules/demo/level.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { getParentLayout, LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const permission: AppRouteModule = {
-  path: '/level',
-  name: 'Level',
-  component: LAYOUT,
-  redirect: '/level/menu1/menu1-1/menu1-1-1',
-  meta: {
-    orderNo: 2000,
-    icon: 'ion:menu-outline',
-    title: t('routes.demo.level.level'),
-  },
-
-  children: [
-    {
-      path: 'menu1',
-      name: 'Menu1Demo',
-      component: getParentLayout('Menu1Demo'),
-      meta: {
-        title: 'Menu1',
-      },
-      redirect: '/level/menu1/menu1-1/menu1-1-1',
-      children: [
-        {
-          path: 'menu1-1',
-          name: 'Menu11Demo',
-          component: getParentLayout('Menu11Demo'),
-          meta: {
-            title: 'Menu1-1',
-          },
-          redirect: '/level/menu1/menu1-1/menu1-1-1',
-          children: [
-            {
-              path: 'menu1-1-1',
-              name: 'Menu111Demo',
-              component: () => import('/@/views/demo/level/Menu111.vue'),
-              meta: {
-                title: 'Menu111',
-              },
-            },
-          ],
-        },
-        {
-          path: 'menu1-2',
-          name: 'Menu12Demo',
-          component: () => import('/@/views/demo/level/Menu12.vue'),
-          meta: {
-            title: 'Menu1-2',
-          },
-        },
-      ],
-    },
-    {
-      path: 'menu2',
-      name: 'Menu2Demo',
-      component: () => import('/@/views/demo/level/Menu2.vue'),
-      meta: {
-        title: 'Menu2',
-        // ignoreKeepAlive: true,
-      },
-    },
-  ],
-};
-
-export default permission;
diff --git a/apps/admin/src/router/routes/modules/demo/page.ts b/apps/admin/src/router/routes/modules/demo/page.ts
deleted file mode 100644
index 17ab276..0000000
--- a/apps/admin/src/router/routes/modules/demo/page.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { getParentLayout, LAYOUT } from '/@/router/constant';
-import { ExceptionEnum } from '/@/enums/exceptionEnum';
-import { t } from '/@/hooks/web/useI18n';
-
-const ExceptionPage = () => import('/@/views/sys/exception/Exception.vue');
-
-const page: AppRouteModule = {
-  path: '/page-demo',
-  name: 'PageDemo',
-  component: LAYOUT,
-  redirect: '/page-demo/form/basic',
-  meta: {
-    orderNo: 20,
-    icon: 'ion:aperture-outline',
-    title: t('routes.demo.page.page'),
-  },
-  children: [
-    // =============================form start=============================
-    {
-      path: 'form',
-      name: 'FormPage',
-      redirect: '/page-demo/form/basic',
-      component: getParentLayout('FormPage'),
-      meta: {
-        title: t('routes.demo.page.form'),
-      },
-      children: [
-        {
-          path: 'basic',
-          name: 'FormBasicPage',
-          component: () => import('/@/views/demo/page/form/basic/index.vue'),
-          meta: {
-            title: t('routes.demo.page.formBasic'),
-          },
-        },
-        {
-          path: 'step',
-          name: 'FormStepPage',
-          component: () => import('/@/views/demo/page/form/step/index.vue'),
-          meta: {
-            title: t('routes.demo.page.formStep'),
-          },
-        },
-        {
-          path: 'high',
-          name: 'FormHightPage',
-          component: () => import('/@/views/demo/page/form/high/index.vue'),
-          meta: {
-            title: t('routes.demo.page.formHigh'),
-          },
-        },
-      ],
-    },
-    // =============================form end=============================
-    // =============================desc start=============================
-    {
-      path: 'desc',
-      name: 'DescPage',
-      component: getParentLayout('DescPage'),
-      redirect: '/page-demo/desc/basic',
-      meta: {
-        title: t('routes.demo.page.desc'),
-      },
-      children: [
-        {
-          path: 'basic',
-          name: 'DescBasicPage',
-          component: () => import('/@/views/demo/page/desc/basic/index.vue'),
-          meta: {
-            title: t('routes.demo.page.descBasic'),
-          },
-        },
-        {
-          path: 'high',
-          name: 'DescHighPage',
-          component: () => import('/@/views/demo/page/desc/high/index.vue'),
-          meta: {
-            title: t('routes.demo.page.descHigh'),
-          },
-        },
-      ],
-    },
-    // =============================desc end=============================
-
-    // =============================result start=============================
-    {
-      path: 'result',
-      name: 'ResultPage',
-      redirect: '/page-demo/result/success',
-      component: getParentLayout('ResultPage'),
-
-      meta: {
-        title: t('routes.demo.page.result'),
-      },
-      children: [
-        {
-          path: 'success',
-          name: 'ResultSuccessPage',
-          component: () => import('/@/views/demo/page/result/success/index.vue'),
-          meta: {
-            title: t('routes.demo.page.resultSuccess'),
-          },
-        },
-        {
-          path: 'fail',
-          name: 'ResultFailPage',
-          component: () => import('/@/views/demo/page/result/fail/index.vue'),
-          meta: {
-            title: t('routes.demo.page.resultFail'),
-          },
-        },
-      ],
-    },
-    // =============================result end=============================
-
-    // =============================account start=============================
-    {
-      path: 'account',
-      name: 'AccountPage',
-      component: getParentLayout('AccountPage'),
-      redirect: '/page-demo/account/setting',
-      meta: {
-        title: t('routes.demo.page.account'),
-      },
-      children: [
-        {
-          path: 'center',
-          name: 'AccountCenterPage',
-          component: () => import('/@/views/demo/page/account/center/index.vue'),
-          meta: {
-            title: t('routes.demo.page.accountCenter'),
-          },
-        },
-        {
-          path: 'setting',
-          name: 'AccountSettingPage',
-          component: () => import('/@/views/demo/page/account/setting/index.vue'),
-          meta: {
-            title: t('routes.demo.page.accountSetting'),
-          },
-        },
-      ],
-    },
-    // =============================account end=============================
-    // =============================exception start=============================
-    {
-      path: 'exception',
-      name: 'ExceptionPage',
-      component: getParentLayout('ExceptionPage'),
-      redirect: '/page-demo/exception/404',
-      meta: {
-        title: t('routes.demo.page.exception'),
-      },
-      children: [
-        {
-          path: '403',
-          name: 'PageNotAccess',
-          component: ExceptionPage,
-          props: {
-            status: ExceptionEnum.PAGE_NOT_ACCESS,
-          },
-          meta: {
-            title: '403',
-          },
-        },
-        {
-          path: '404',
-          name: 'PageNotFound',
-          component: ExceptionPage,
-          props: {
-            status: ExceptionEnum.PAGE_NOT_FOUND,
-          },
-          meta: {
-            title: '404',
-          },
-        },
-        {
-          path: '500',
-          name: 'ServiceError',
-          component: ExceptionPage,
-          props: {
-            status: ExceptionEnum.ERROR,
-          },
-          meta: {
-            title: '500',
-          },
-        },
-        {
-          path: 'net-work-error',
-          name: 'NetWorkError',
-          component: ExceptionPage,
-          props: {
-            status: ExceptionEnum.NET_WORK_ERROR,
-          },
-          meta: {
-            title: t('routes.demo.page.netWorkError'),
-          },
-        },
-        {
-          path: 'not-data',
-          name: 'NotData',
-          component: ExceptionPage,
-          props: {
-            status: ExceptionEnum.PAGE_NOT_DATA,
-          },
-          meta: {
-            title: t('routes.demo.page.notData'),
-          },
-        },
-      ],
-    },
-    // =============================exception end=============================
-    // =============================list start=============================
-    {
-      path: 'list',
-      name: 'ListPage',
-      component: getParentLayout('ListPage'),
-      redirect: '/page-demo/list/card',
-      meta: {
-        title: t('routes.demo.page.list'),
-      },
-      children: [
-        {
-          path: 'basic',
-          name: 'ListBasicPage',
-          component: () => import('/@/views/demo/page/list/basic/index.vue'),
-          meta: {
-            title: t('routes.demo.page.listBasic'),
-          },
-        },
-        {
-          path: 'card',
-          name: 'ListCardPage',
-          component: () => import('/@/views/demo/page/list/card/index.vue'),
-          meta: {
-            title: t('routes.demo.page.listCard'),
-          },
-        },
-        {
-          path: 'search',
-          name: 'ListSearchPage',
-          component: () => import('/@/views/demo/page/list/search/index.vue'),
-          meta: {
-            title: t('routes.demo.page.listSearch'),
-          },
-        },
-      ],
-    },
-    // =============================list end=============================
-  ],
-};
-
-export default page;
diff --git a/apps/admin/src/router/routes/modules/demo/permission.ts b/apps/admin/src/router/routes/modules/demo/permission.ts
deleted file mode 100644
index e876362..0000000
--- a/apps/admin/src/router/routes/modules/demo/permission.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { getParentLayout, LAYOUT } from '/@/router/constant';
-import { RoleEnum } from '/@/enums/roleEnum';
-import { t } from '/@/hooks/web/useI18n';
-
-const permission: AppRouteModule = {
-  path: '/permission',
-  name: 'Permission',
-  component: LAYOUT,
-  redirect: '/permission/front/page',
-  meta: {
-    orderNo: 15,
-    icon: 'ion:key-outline',
-    title: t('routes.demo.permission.permission'),
-  },
-
-  children: [
-    {
-      path: 'front',
-      name: 'PermissionFrontDemo',
-      component: getParentLayout('PermissionFrontDemo'),
-      meta: {
-        title: t('routes.demo.permission.front'),
-      },
-      children: [
-        {
-          path: 'page',
-          name: 'FrontPageAuth',
-          component: () => import('/@/views/demo/permission/front/index.vue'),
-          meta: {
-            title: t('routes.demo.permission.frontPage'),
-          },
-        },
-        {
-          path: 'btn',
-          name: 'FrontBtnAuth',
-          component: () => import('/@/views/demo/permission/front/Btn.vue'),
-          meta: {
-            title: t('routes.demo.permission.frontBtn'),
-          },
-        },
-        {
-          path: 'auth-pageA',
-          name: 'FrontAuthPageA',
-          component: () => import('/@/views/demo/permission/front/AuthPageA.vue'),
-          meta: {
-            title: t('routes.demo.permission.frontTestA'),
-            roles: [RoleEnum.SUPER],
-          },
-        },
-        {
-          path: 'auth-pageB',
-          name: 'FrontAuthPageB',
-          component: () => import('/@/views/demo/permission/front/AuthPageB.vue'),
-          meta: {
-            title: t('routes.demo.permission.frontTestB'),
-            roles: [RoleEnum.TEST],
-          },
-        },
-      ],
-    },
-    {
-      path: 'back',
-      name: 'PermissionBackDemo',
-      component: getParentLayout('PermissionBackDemo'),
-      meta: {
-        title: t('routes.demo.permission.back'),
-      },
-      children: [
-        {
-          path: 'page',
-          name: 'BackAuthPage',
-          component: () => import('/@/views/demo/permission/back/index.vue'),
-          meta: {
-            title: t('routes.demo.permission.backPage'),
-          },
-        },
-        {
-          path: 'btn',
-          name: 'BackAuthBtn',
-          component: () => import('/@/views/demo/permission/back/Btn.vue'),
-          meta: {
-            title: t('routes.demo.permission.backBtn'),
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export default permission;
diff --git a/apps/admin/src/router/routes/modules/demo/setup.ts b/apps/admin/src/router/routes/modules/demo/setup.ts
deleted file mode 100644
index cec2e29..0000000
--- a/apps/admin/src/router/routes/modules/demo/setup.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const setup: AppRouteModule = {
-  path: '/setup',
-  name: 'SetupDemo',
-  component: LAYOUT,
-  redirect: '/setup/index',
-  meta: {
-    orderNo: 90000,
-    hideChildrenInMenu: true,
-    icon: 'whh:paintroll',
-    title: t('routes.demo.setup.page'),
-  },
-  children: [
-    {
-      path: 'index',
-      name: 'SetupDemoPage',
-      component: () => import('/@/views/demo/setup/index.vue'),
-      meta: {
-        title: t('routes.demo.setup.page'),
-        icon: 'whh:paintroll',
-        hideMenu: true,
-      },
-    },
-  ],
-};
-
-export default setup;
diff --git a/apps/admin/src/router/routes/modules/demo/system.ts b/apps/admin/src/router/routes/modules/demo/system.ts
deleted file mode 100644
index 66e19da..0000000
--- a/apps/admin/src/router/routes/modules/demo/system.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const system: AppRouteModule = {
-  path: '/system',
-  name: 'System',
-  component: LAYOUT,
-  redirect: '/system/account',
-  meta: {
-    orderNo: 2000,
-    icon: 'ion:settings-outline',
-    title: t('routes.demo.system.moduleName'),
-  },
-  children: [
-    {
-      path: 'account',
-      name: 'AccountManagement',
-      meta: {
-        title: t('routes.demo.system.account'),
-        ignoreKeepAlive: false,
-      },
-      component: () => import('/@/views/demo/system/account/index.vue'),
-    },
-    {
-      path: 'account_detail/:id',
-      name: 'AccountDetail',
-      meta: {
-        hideMenu: true,
-        title: t('routes.demo.system.account_detail'),
-        ignoreKeepAlive: true,
-        showMenu: false,
-        currentActiveMenu: '/system/account',
-      },
-      component: () => import('/@/views/demo/system/account/AccountDetail.vue'),
-    },
-    {
-      path: 'role',
-      name: 'RoleManagement',
-      meta: {
-        title: t('routes.demo.system.role'),
-        ignoreKeepAlive: true,
-      },
-      component: () => import('/@/views/demo/system/role/index.vue'),
-    },
-
-    {
-      path: 'menu',
-      name: 'MenuManagement',
-      meta: {
-        title: t('routes.demo.system.menu'),
-        ignoreKeepAlive: true,
-      },
-      component: () => import('/@/views/demo/system/menu/index.vue'),
-    },
-    {
-      path: 'dept',
-      name: 'DeptManagement',
-      meta: {
-        title: t('routes.demo.system.dept'),
-        ignoreKeepAlive: true,
-      },
-      component: () => import('/@/views/demo/system/dept/index.vue'),
-    },
-    {
-      path: 'changePassword',
-      name: 'ChangePassword',
-      meta: {
-        title: t('routes.demo.system.password'),
-        ignoreKeepAlive: true,
-      },
-      component: () => import('/@/views/demo/system/password/index.vue'),
-    },
-  ],
-};
-
-export default system;
diff --git a/apps/admin/src/router/types.ts b/apps/admin/src/router/types.ts
index 082d208..65febaf 100644
--- a/apps/admin/src/router/types.ts
+++ b/apps/admin/src/router/types.ts
@@ -29,6 +29,8 @@ export interface Menu {
 
   icon?: string;
 
+  img?: string;
+
   path: string;
 
   // path contains param, auto assignment.
diff --git a/apps/admin/src/settings/projectSetting.ts b/apps/admin/src/settings/projectSetting.ts
index 860c669..242fba6 100644
--- a/apps/admin/src/settings/projectSetting.ts
+++ b/apps/admin/src/settings/projectSetting.ts
@@ -74,6 +74,7 @@ const setting: ProjectConfig = {
     showNotice: true,
     // Whether to display the menu search
     showSearch: true,
+    showApi: false,
   },
 
   // Menu configuration
diff --git a/apps/admin/src/store/index.ts b/apps/admin/src/store/index.ts
index efaf6c9..9ceca5a 100644
--- a/apps/admin/src/store/index.ts
+++ b/apps/admin/src/store/index.ts
@@ -1,7 +1,9 @@
 import type { App } from 'vue';
 import { createPinia } from 'pinia';
+import { registerPiniaPersistPlugin } from '@/store/plugin/persist';
 
 const store = createPinia();
+registerPiniaPersistPlugin(store);
 
 export function setupStore(app: App<Element>) {
   app.use(store);
diff --git a/apps/admin/src/store/modules/app.ts b/apps/admin/src/store/modules/app.ts
index 39563b6..7dfc6ed 100644
--- a/apps/admin/src/store/modules/app.ts
+++ b/apps/admin/src/store/modules/app.ts
@@ -5,13 +5,13 @@ import type {
   TransitionSetting,
   MultiTabsSetting,
 } from '/#/config';
-import type { BeforeMiniState } from '/#/store';
+import type { BeforeMiniState, ApiAddress } from '/#/store';
 
 import { defineStore } from 'pinia';
 import { store } from '/@/store';
 
 import { ThemeEnum } from '/@/enums/appEnum';
-import { APP_DARK_MODE_KEY_, PROJ_CFG_KEY } from '/@/enums/cacheEnum';
+import { APP_DARK_MODE_KEY, PROJ_CFG_KEY, API_ADDRESS } from '/@/enums/cacheEnum';
 import { Persistent } from '/@/utils/cache/persistent';
 import { darkMode } from '/@/settings/designSetting';
 import { resetRouter } from '/@/router';
@@ -40,7 +40,7 @@ export const useAppStore = defineStore({
       return state.pageLoading;
     },
     getDarkMode(state): 'light' | 'dark' | string {
-      return state.darkMode || localStorage.getItem(APP_DARK_MODE_KEY_) || darkMode;
+      return state.darkMode || localStorage.getItem(APP_DARK_MODE_KEY) || darkMode;
     },
 
     getBeforeMiniInfo(state): BeforeMiniState {
@@ -63,6 +63,9 @@ export const useAppStore = defineStore({
     getMultiTabsSetting(): MultiTabsSetting {
       return this.getProjectConfig.multiTabsSetting;
     },
+    getApiAddress() {
+      return JSON.parse(localStorage.getItem(API_ADDRESS) || '{}');
+    },
   },
   actions: {
     setPageLoading(loading: boolean): void {
@@ -71,7 +74,7 @@ export const useAppStore = defineStore({
 
     setDarkMode(mode: ThemeEnum): void {
       this.darkMode = mode;
-      localStorage.setItem(APP_DARK_MODE_KEY_, mode);
+      localStorage.setItem(APP_DARK_MODE_KEY, mode);
     },
 
     setBeforeMiniInfo(state: BeforeMiniState): void {
@@ -79,7 +82,11 @@ export const useAppStore = defineStore({
     },
 
     setProjectConfig(config: DeepPartial<ProjectConfig>): void {
-      this.projectConfig = deepMerge(this.projectConfig || {}, config);
+      this.projectConfig = deepMerge(this.projectConfig || {}, config) as ProjectConfig;
+      Persistent.setLocal(PROJ_CFG_KEY, this.projectConfig);
+    },
+    setMenuSetting(setting: Partial<MenuSetting>): void {
+      this.projectConfig!.menuSetting = deepMerge(this.projectConfig!.menuSetting, setting);
       Persistent.setLocal(PROJ_CFG_KEY, this.projectConfig);
     },
 
@@ -99,6 +106,9 @@ export const useAppStore = defineStore({
         clearTimeout(timeId);
       }
     },
+    setApiAddress(config: ApiAddress): void {
+      localStorage.setItem(API_ADDRESS, JSON.stringify(config));
+    },
   },
 });
 
diff --git a/apps/admin/src/store/modules/multipleTab.ts b/apps/admin/src/store/modules/multipleTab.ts
index f742c2f..e67c423 100644
--- a/apps/admin/src/store/modules/multipleTab.ts
+++ b/apps/admin/src/store/modules/multipleTab.ts
@@ -23,7 +23,7 @@ export interface MultipleTabState {
 
 function handleGotoPage(router: Router) {
   const go = useGo(router);
-  go(unref(router.currentRoute).path, true);
+  go(unref(router.currentRoute).fullPath, true);
 }
 
 const getToTarget = (tabItem: RouteLocationNormalized) => {
@@ -308,7 +308,7 @@ export const useMultipleTabStore = defineStore({
 
       for (const path of closePathList) {
         if (path !== route.fullPath) {
-          const closeItem = this.tabList.find((item) => item.path === path);
+          const closeItem = this.tabList.find((item) => item.fullPath === path);
           if (!closeItem) {
             continue;
           }
@@ -320,6 +320,7 @@ export const useMultipleTabStore = defineStore({
       }
       this.bulkCloseTabs(pathList);
       this.updateCacheTab();
+      Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList, true);
       handleGotoPage(router);
     },
 
diff --git a/apps/admin/src/store/modules/user.ts b/apps/admin/src/store/modules/user.ts
index afd976d..cd8e7f5 100644
--- a/apps/admin/src/store/modules/user.ts
+++ b/apps/admin/src/store/modules/user.ts
@@ -15,7 +15,6 @@ import { RouteRecordRaw } from 'vue-router';
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 import { isArray } from '/@/utils/is';
 import { h } from 'vue';
-import { useWsStore } from './ws';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -110,6 +109,7 @@ export const useUserStore = defineStore({
         this.setSessionTimeout(false);
       } else {
         const permissionStore = usePermissionStore();
+
         if (!permissionStore.isDynamicAddedRoute) {
           const routes = await permissionStore.buildRoutesAction();
           routes.forEach((route) => {
@@ -134,11 +134,6 @@ export const useUserStore = defineStore({
         this.setRoleList([]);
       }
       this.setUserInfo(userInfo);
-      if (import.meta.env.PROD) {
-        const wsStore = useWsStore();
-        !wsStore.client && wsStore.initSocket();
-      }
-
       return userInfo;
     },
     /**
@@ -152,8 +147,6 @@ export const useUserStore = defineStore({
           console.log('注销Token失败');
         }
       }
-      const wsStore = useWsStore();
-      wsStore.closeSocket();
       this.setToken(undefined);
       this.setSessionTimeout(false);
       this.setUserInfo(null);
diff --git a/apps/admin/src/store/modules/ws.ts b/apps/admin/src/store/modules/ws.ts
deleted file mode 100644
index 96b8364..0000000
--- a/apps/admin/src/store/modules/ws.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { defineStore } from 'pinia';
-import { Modal } from 'ant-design-vue';
-import type { SocketIOWrapperType, SocketStatusType } from '/@/core/socket/socket-io';
-import { router } from '/@/router';
-import { store } from '/@/store';
-import { EVENT_KICK, EVENT_UPDATE_MENU } from '/@/core/socket/event-type';
-import { SocketIOWrapper, SocketStatus } from '/@/core/socket/socket-io';
-import { useUserStore } from '/@/store/modules/user';
-import { useTabs } from '/@/hooks/web/useTabs';
-
-interface WsState {
-  client: SocketIOWrapperType | null;
-  status: SocketStatusType;
-}
-
-export const useWsStore = defineStore({
-  id: 'ws',
-  state: (): WsState => ({
-    // socket wrapper 实例
-    client: null,
-    // socket 连接状态
-    status: SocketStatus.CLOSE,
-  }),
-  actions: {
-    setClient(client: SocketIOWrapperType | null) {
-      this.client = client as any;
-    },
-    setStatus(status: SocketStatusType) {
-      if (this.status === status) {
-        return;
-      }
-      this.status = status;
-    },
-    // 初始化Socket
-    initSocket() {
-      // check is init
-      if (this.client?.isConnected?.()) {
-        return;
-      }
-      const ws = new SocketIOWrapper();
-      ws.subscribe(EVENT_KICK, async (data) => {
-        const userStore = useUserStore();
-        // reset token
-        userStore.resetState();
-        Modal.warning({
-          title: '警告',
-          content: `您已被管理员${data.operater}踢下线！`,
-          centered: true,
-          okText: '重新登录',
-          onOk() {
-            // 刷新页面
-            window.location.reload();
-          },
-        });
-      });
-      ws.subscribe(EVENT_UPDATE_MENU, async () => {
-        const userStore = useUserStore();
-        const { close } = useTabs();
-        console.log('EVENT_UPDATE_MENU', EVENT_UPDATE_MENU);
-
-        await userStore.afterLoginAction();
-        const currentRoute = router.currentRoute.value!;
-        const hasRoute = router.hasRoute(currentRoute.name!);
-        if (Object.is(hasRoute, false)) {
-          Modal.warning({
-            title: '提示',
-            content: `您的权限已被管理员修改，暂无当前页面预览权限！`,
-            centered: true,
-            okText: '关闭当前页',
-            onOk() {
-              close(currentRoute);
-            },
-          });
-        }
-      });
-      this.setClient(ws);
-    },
-
-    // 关闭Socket连接
-    closeSocket() {
-      this.client?.close?.();
-      this.setClient(null);
-    },
-  },
-});
-
-// 在组件setup函数外使用
-export function useWsStoreWithOut() {
-  return useWsStore(store);
-}
diff --git a/apps/admin/src/store/plugin/persist.ts b/apps/admin/src/store/plugin/persist.ts
new file mode 100644
index 0000000..4fa176e
--- /dev/null
+++ b/apps/admin/src/store/plugin/persist.ts
@@ -0,0 +1,38 @@
+/**
+ * Pinia Persist Plugin
+ * Pinia 持久化插件
+ * @link https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
+ *
+ */
+import type { Pinia } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
+import type { PersistedStateFactoryOptions } from 'pinia-plugin-persistedstate';
+import { getCommonStoragePrefix } from '@/utils/env';
+
+export const PERSIST_KEY_PREFIX = getCommonStoragePrefix();
+
+// TODO customSerializer
+
+/**
+ * Register Pinia Persist Plugin
+ * 注册 Pinia 持久化插件
+ *
+ * @param pinia Pinia instance Pinia 实例
+ */
+export function registerPiniaPersistPlugin(pinia: Pinia) {
+  pinia.use(createPersistedState(createPersistedStateOptions(PERSIST_KEY_PREFIX)));
+}
+
+/**
+ * Create Persisted State Options
+ * 创建持久化状态选项
+ *
+ * @param keyPrefix prefix for storage key 储存键前缀
+ * @returns persisted state factory options
+ */
+export function createPersistedStateOptions(keyPrefix: string): PersistedStateFactoryOptions {
+  return {
+    storage: localStorage,
+    key: (id) => `${keyPrefix}__${id}`,
+  };
+}
diff --git a/apps/admin/src/utils/__test__/index.test.ts b/apps/admin/src/utils/__test__/index.test.ts
new file mode 100644
index 0000000..bc6995e
--- /dev/null
+++ b/apps/admin/src/utils/__test__/index.test.ts
@@ -0,0 +1,145 @@
+// 暂时未安装依赖，无法测试
+// @ts-ignore
+import { describe, expect, test } from 'vitest';
+import { deepMerge } from '@/utils';
+
+describe('deepMerge function', () => {
+  test('should correctly merge basic data types', () => {
+    const source = { a: 1, b: 2, c: null };
+    const target = {
+      a: 2,
+      b: undefined,
+      c: 3,
+    };
+    const expected = {
+      a: 2,
+      b: 2,
+      c: 3,
+    };
+    expect(deepMerge(source, target)).toStrictEqual(expected);
+  });
+
+  test('should return the same date if only 1 is passed', () => {
+    const foo = new Date();
+    const merged = deepMerge(foo, null);
+    const merged2 = deepMerge(undefined, foo);
+    expect(merged).toStrictEqual(foo);
+    expect(merged2).toStrictEqual(foo);
+    expect(merged).toStrictEqual(merged2);
+  });
+
+  test('should merge two objects recursively', () => {
+    const source = {
+      a: { b: { c: 1 }, d: [1, 2] },
+      e: [1, 2],
+      foo: { bar: 3 },
+      array: [
+        {
+          does: 'work',
+          too: [1, 2, 3],
+        },
+      ],
+      r: { a: 1 },
+    };
+    const target = {
+      a: { b: { d: [3] } },
+      e: [3],
+      foo: { baz: 4 },
+      qu: 5,
+      array: [
+        {
+          does: 'work',
+          too: [4, 5, 6],
+        },
+        {
+          really: 'yes',
+        },
+      ],
+      r: { a: 2 },
+    };
+    const expected = {
+      a: { b: { c: 1, d: [3] }, d: [1, 2] },
+      e: [3],
+      foo: {
+        bar: 3,
+        baz: 4,
+      },
+      array: [
+        {
+          does: 'work',
+          too: [4, 5, 6],
+        },
+        {
+          really: 'yes',
+        },
+      ],
+      qu: 5,
+      r: { a: 2 },
+    };
+    expect(deepMerge(source, target)).toStrictEqual(expected);
+  });
+
+  test('should replace arrays by default', () => {
+    const source = {
+      a: { b: { d: [1, 2] } },
+      e: [1, 2],
+    };
+    const target = {
+      a: { b: { d: [3] } },
+      e: [3],
+    };
+    const expected = {
+      a: { b: { d: [3] } },
+      e: [3],
+    };
+    expect(deepMerge(source, target)).toStrictEqual(expected);
+  });
+
+  test("should union arrays using mergeArrays = 'union'", () => {
+    const source = {
+      a: { b: { d: [1, 2] } },
+      e: [1, 2],
+    };
+    const target = {
+      a: { b: { d: [2, 3] } },
+      e: [1, 3],
+    };
+    const expected = {
+      a: { b: { d: [1, 2, 3] } },
+      e: [1, 2, 3],
+    };
+    expect(deepMerge(source, target, 'union')).toStrictEqual(expected);
+  });
+
+  test("should intersect arrays using mergeArrays = 'intersection'", () => {
+    const source = {
+      a: { b: { d: [1, 2] } },
+      e: [1, 2],
+    };
+    const target = {
+      a: { b: { d: [2, 3] } },
+      e: [3],
+    };
+    const expected = {
+      a: { b: { d: [2] } },
+      e: [],
+    };
+    expect(deepMerge(source, target, 'intersection')).toStrictEqual(expected);
+  });
+
+  test("should concatenate arrays using mergeArrays = 'concat'", () => {
+    const source = {
+      a: { b: { d: [1, 2] } },
+      e: [1, 2],
+    };
+    const target = {
+      a: { b: { d: [2, 3] } },
+      e: [3],
+    };
+    const expected = {
+      a: { b: { d: [1, 2, 2, 3] } },
+      e: [1, 2, 3],
+    };
+    expect(deepMerge(source, target, 'concat')).toStrictEqual(expected);
+  });
+});
diff --git a/apps/admin/src/utils/bem.ts b/apps/admin/src/utils/bem.ts
index 7dcadbc..53fb054 100644
--- a/apps/admin/src/utils/bem.ts
+++ b/apps/admin/src/utils/bem.ts
@@ -14,8 +14,9 @@ function genBem(name: string, mods?: Mods): string {
     return ` ${name}--${mods}`;
   }
 
+  // ArrayConstructor.isArray(arg: any): arg is any[]
   if (Array.isArray(mods)) {
-    return mods.reduce<string>((ret, item) => ret + genBem(name, item), '');
+    return (mods as Mod[]).reduce<string>((ret, item) => ret + genBem(name, item), '');
   }
 
   return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? genBem(name, key) : ''), '');
diff --git a/apps/admin/src/utils/cache/storageCache.ts b/apps/admin/src/utils/cache/storageCache.ts
index 84ba2aa..6e1d4e5 100644
--- a/apps/admin/src/utils/cache/storageCache.ts
+++ b/apps/admin/src/utils/cache/storageCache.ts
@@ -1,6 +1,6 @@
 import { cacheCipher } from '/@/settings/encryptionSetting';
-import type { EncryptionParams } from '/@/utils/cipher';
-import { AesEncryption } from '/@/utils/cipher';
+import type { EncryptionParams } from '/@/utils/cipherOld';
+import { AesEncryption } from '/@/utils/cipherOld';
 import { isNullOrUnDef } from '/@/utils/is';
 
 export interface CreateStorageParams extends EncryptionParams {
diff --git a/apps/admin/src/utils/cipher.ts b/apps/admin/src/utils/cipher.ts
index 7a02cfc..cbc2242 100644
--- a/apps/admin/src/utils/cipher.ts
+++ b/apps/admin/src/utils/cipher.ts
@@ -1,54 +1,159 @@
-import { encrypt, decrypt } from 'crypto-js/aes';
+import { decrypt as aesDecrypt, encrypt as aesEncrypt } from 'crypto-js/aes';
 import UTF8, { parse } from 'crypto-js/enc-utf8';
 import pkcs7 from 'crypto-js/pad-pkcs7';
-import ECB from 'crypto-js/mode-ecb';
-import md5 from 'crypto-js/md5';
+import CTR from 'crypto-js/mode-ctr';
 import Base64 from 'crypto-js/enc-base64';
+import MD5 from 'crypto-js/md5';
+import SHA256 from 'crypto-js/sha256';
+import SHA512 from 'crypto-js/sha512';
+
+// Define an interface for encryption
+// 定义一个加密器的接口
+export interface Encryption {
+  encrypt(plainText: string): string;
+  decrypt(cipherText: string): string;
+}
+// Define an interface for Hashing
+// 定义一个哈希算法的接口
+export interface Hashing {
+  hash(data: string): string;
+}
 
 export interface EncryptionParams {
   key: string;
   iv: string;
 }
 
-export class AesEncryption {
-  private key;
-  private iv;
+class AesEncryption implements Encryption {
+  private readonly key;
+  private readonly iv;
 
-  constructor(opt: Partial<EncryptionParams> = {}) {
-    const { key, iv } = opt;
-    if (key) {
-      this.key = parse(key);
-    }
-    if (iv) {
-      this.iv = parse(iv);
-    }
+  constructor({ key, iv }: EncryptionParams) {
+    this.key = parse(key);
+    this.iv = parse(iv);
   }
 
   get getOptions() {
     return {
-      mode: ECB,
+      mode: CTR,
       padding: pkcs7,
       iv: this.iv,
     };
   }
 
-  encryptByAES(cipherText: string) {
-    return encrypt(cipherText, this.key, this.getOptions).toString();
+  encrypt(plainText: string) {
+    return aesEncrypt(plainText, this.key, this.getOptions).toString();
   }
 
-  decryptByAES(cipherText: string) {
-    return decrypt(cipherText, this.key, this.getOptions).toString(UTF8);
+  decrypt(cipherText: string) {
+    return aesDecrypt(cipherText, this.key, this.getOptions).toString(UTF8);
   }
 }
 
-export function encryptByBase64(cipherText: string) {
-  return UTF8.parse(cipherText).toString(Base64);
+// Define a singleton class for Base64 encryption
+class Base64Encryption implements Encryption {
+  private static instance: Base64Encryption;
+
+  private constructor() {}
+
+  // Get the singleton instance
+  // 获取单例实例
+  public static getInstance(): Base64Encryption {
+    if (!Base64Encryption.instance) {
+      Base64Encryption.instance = new Base64Encryption();
+    }
+    return Base64Encryption.instance;
+  }
+
+  encrypt(plainText: string) {
+    return UTF8.parse(plainText).toString(Base64);
+  }
+
+  decrypt(cipherText: string) {
+    return Base64.parse(cipherText).toString(UTF8);
+  }
 }
 
-export function decodeByBase64(cipherText: string) {
-  return Base64.parse(cipherText).toString(UTF8);
+// Define a singleton class for MD5 Hashing
+class MD5Hashing implements Hashing {
+  private static instance: MD5Hashing;
+
+  private constructor() {}
+
+  // Get the singleton instance
+  // 获取单例实例
+  public static getInstance(): MD5Hashing {
+    if (!MD5Hashing.instance) {
+      MD5Hashing.instance = new MD5Hashing();
+    }
+    return MD5Hashing.instance;
+  }
+
+  hash(plainText: string) {
+    return MD5(plainText).toString();
+  }
 }
 
-export function encryptByMd5(password: string) {
-  return md5(password).toString();
+// Define a singleton class for SHA256 Hashing
+class SHA256Hashing implements Hashing {
+  private static instance: SHA256Hashing;
+
+  private constructor() {}
+
+  // Get the singleton instance
+  // 获取单例实例
+  public static getInstance(): SHA256Hashing {
+    if (!SHA256Hashing.instance) {
+      SHA256Hashing.instance = new SHA256Hashing();
+    }
+    return SHA256Hashing.instance;
+  }
+
+  hash(plainText: string) {
+    return SHA256(plainText).toString();
+  }
+}
+
+// Define a singleton class for SHA512 Hashing
+class SHA512Hashing implements Hashing {
+  private static instance: SHA512Hashing;
+
+  private constructor() {}
+
+  // Get the singleton instance
+  // 获取单例实例
+  public static getInstance(): SHA256Hashing {
+    if (!SHA512Hashing.instance) {
+      SHA512Hashing.instance = new SHA512Hashing();
+    }
+    return SHA512Hashing.instance;
+  }
+
+  hash(plainText: string) {
+    return SHA512(plainText).toString();
+  }
+}
+
+export class EncryptionFactory {
+  public static createAesEncryption(params: EncryptionParams): Encryption {
+    return new AesEncryption(params);
+  }
+
+  public static createBase64Encryption(): Encryption {
+    return Base64Encryption.getInstance();
+  }
+}
+
+export class HashingFactory {
+  public static createMD5Hashing(): Hashing {
+    return MD5Hashing.getInstance();
+  }
+
+  public static createSHA256Hashing(): Hashing {
+    return SHA256Hashing.getInstance();
+  }
+
+  public static createSHA512Hashing(): Hashing {
+    return SHA512Hashing.getInstance();
+  }
 }
diff --git a/apps/admin/src/utils/cipherOld.ts b/apps/admin/src/utils/cipherOld.ts
new file mode 100644
index 0000000..7a02cfc
--- /dev/null
+++ b/apps/admin/src/utils/cipherOld.ts
@@ -0,0 +1,54 @@
+import { encrypt, decrypt } from 'crypto-js/aes';
+import UTF8, { parse } from 'crypto-js/enc-utf8';
+import pkcs7 from 'crypto-js/pad-pkcs7';
+import ECB from 'crypto-js/mode-ecb';
+import md5 from 'crypto-js/md5';
+import Base64 from 'crypto-js/enc-base64';
+
+export interface EncryptionParams {
+  key: string;
+  iv: string;
+}
+
+export class AesEncryption {
+  private key;
+  private iv;
+
+  constructor(opt: Partial<EncryptionParams> = {}) {
+    const { key, iv } = opt;
+    if (key) {
+      this.key = parse(key);
+    }
+    if (iv) {
+      this.iv = parse(iv);
+    }
+  }
+
+  get getOptions() {
+    return {
+      mode: ECB,
+      padding: pkcs7,
+      iv: this.iv,
+    };
+  }
+
+  encryptByAES(cipherText: string) {
+    return encrypt(cipherText, this.key, this.getOptions).toString();
+  }
+
+  decryptByAES(cipherText: string) {
+    return decrypt(cipherText, this.key, this.getOptions).toString(UTF8);
+  }
+}
+
+export function encryptByBase64(cipherText: string) {
+  return UTF8.parse(cipherText).toString(Base64);
+}
+
+export function decodeByBase64(cipherText: string) {
+  return Base64.parse(cipherText).toString(UTF8);
+}
+
+export function encryptByMd5(password: string) {
+  return md5(password).toString();
+}
diff --git a/apps/admin/src/utils/copyTextToClipboard.ts b/apps/admin/src/utils/copyTextToClipboard.ts
new file mode 100644
index 0000000..74fc795
--- /dev/null
+++ b/apps/admin/src/utils/copyTextToClipboard.ts
@@ -0,0 +1,12 @@
+import { message } from 'ant-design-vue';
+
+export function copyText(text: string, prompt: string | null = '已成功复制到剪切板!') {
+  navigator.clipboard.writeText(text).then(
+    function () {
+      prompt && message.success(prompt);
+    },
+    function (error: Error) {
+      message.error('复制失败!' + error.message);
+    },
+  );
+}
diff --git a/apps/admin/src/utils/domUtils.ts b/apps/admin/src/utils/domUtils.ts
index 7efe9cb..bc80613 100644
--- a/apps/admin/src/utils/domUtils.ts
+++ b/apps/admin/src/utils/domUtils.ts
@@ -158,7 +158,7 @@ export function off(
 export function once(el: HTMLElement, event: string, fn: EventListener): void {
   const listener = function (this: any, ...args: unknown[]) {
     if (fn) {
-      fn.apply(this, args);
+      fn.apply(this, args as [evt: Event]);
     }
     off(el, event, listener);
   };
diff --git a/apps/admin/src/utils/env.ts b/apps/admin/src/utils/env.ts
index 3a51ad1..19f455a 100644
--- a/apps/admin/src/utils/env.ts
+++ b/apps/admin/src/utils/env.ts
@@ -1,11 +1,6 @@
 import type { GlobEnvConfig } from '/#/config';
 import pkg from '../../package.json';
-
-const getVariableName = (title: string) => {
-  return `__PRODUCTION__${title.replace(/\s/g, '_') || '__APP'}__CONF__`
-    .toUpperCase()
-    .replace(/\s/g, '');
-};
+import { API_ADDRESS } from '/@/enums/cacheEnum';
 
 export function getCommonStoragePrefix() {
   const { VITE_GLOB_APP_TITLE } = getAppEnvConfig();
@@ -17,17 +12,30 @@ export function getStorageShortName() {
   return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
 }
 
+const getVariableName = (title: string) => {
+  function strToHex(str: string) {
+    const result: string[] = [];
+    for (let i = 0; i < str.length; ++i) {
+      const hex = str.charCodeAt(i).toString(16);
+      result.push(('000' + hex).slice(-4));
+    }
+    return result.join('').toUpperCase();
+  }
+  return `__PRODUCTION__${strToHex(title) || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '');
+};
+
 export function getAppEnvConfig() {
   const ENV_NAME = getVariableName(import.meta.env.VITE_GLOB_APP_TITLE);
-
-  const ENV = (import.meta.env.DEV
+  const ENV = import.meta.env.DEV
     ? // Get the global configuration (the configuration will be extracted independently when packaging)
       (import.meta.env as unknown as GlobEnvConfig)
-    : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
-
-  const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_UPLOAD_URL } =
-    ENV;
-
+    : (window[ENV_NAME] as unknown as GlobEnvConfig);
+  const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_UPLOAD_URL } = ENV;
+  let { VITE_GLOB_API_URL } = ENV;
+  if (localStorage.getItem(API_ADDRESS)) {
+    const address = JSON.parse(localStorage.getItem(API_ADDRESS) || '{}');
+    if (address?.key) VITE_GLOB_API_URL = address?.val;
+  }
   return {
     VITE_GLOB_APP_TITLE,
     VITE_GLOB_API_URL,
diff --git a/apps/admin/src/utils/factory/createAsyncComponent.tsx b/apps/admin/src/utils/factory/createAsyncComponent.tsx
index fc5e2a6..712e56c 100644
--- a/apps/admin/src/utils/factory/createAsyncComponent.tsx
+++ b/apps/admin/src/utils/factory/createAsyncComponent.tsx
@@ -1,4 +1,7 @@
 import {
+  AsyncComponentLoader,
+  Component,
+  ComponentPublicInstance,
   defineAsyncComponent,
   // FunctionalComponent, CSSProperties
 } from 'vue';
@@ -27,7 +30,11 @@ interface Options {
   retry?: boolean;
 }
 
-export function createAsyncComponent(loader: Fn, options: Options = {}) {
+export function createAsyncComponent<
+  T extends Component = {
+    new (): ComponentPublicInstance;
+  },
+>(loader: AsyncComponentLoader<T>, options: Options = {}) {
   const { size = 'small', delay = 100, timeout = 30000, loading = false, retry = true } = options;
   return defineAsyncComponent({
     loader,
diff --git a/apps/admin/src/utils/helper/tsxHelper.tsx b/apps/admin/src/utils/helper/tsxHelper.tsx
index a75327a..3de2365 100644
--- a/apps/admin/src/utils/helper/tsxHelper.tsx
+++ b/apps/admin/src/utils/helper/tsxHelper.tsx
@@ -1,10 +1,11 @@
 import { Slots } from 'vue';
 import { isFunction } from '/@/utils/is';
+import { RenderOpts } from '/@/components/Form';
 
 /**
  * @description:  Get slot to prevent empty error
  */
-export function getSlot(slots: Slots, slot = 'default', data?: any) {
+export function getSlot(slots: Slots, slot = 'default', data?: any, opts?: RenderOpts) {
   if (!slots || !Reflect.has(slots, slot)) {
     return null;
   }
@@ -14,7 +15,8 @@ export function getSlot(slots: Slots, slot = 'default', data?: any) {
   }
   const slotFn = slots[slot];
   if (!slotFn) return null;
-  return slotFn(data);
+  const params = { ...data, ...opts };
+  return slotFn(params);
 }
 
 /**
diff --git a/apps/admin/src/utils/http/axios/Axios.ts b/apps/admin/src/utils/http/axios/Axios.ts
index 31808eb..b215be9 100644
--- a/apps/admin/src/utils/http/axios/Axios.ts
+++ b/apps/admin/src/utils/http/axios/Axios.ts
@@ -89,7 +89,8 @@ export class VAxios {
     // Request interceptor configuration processing
     this.axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
       // If cancel repeat request is turned on, then cancel repeat request is prohibited
-      const { requestOptions } = this.options;
+      const requestOptions =
+        (config as unknown as any).requestOptions ?? this.options.requestOptions;
       const ignoreCancelToken = requestOptions?.ignoreCancelToken ?? true;
 
       !ignoreCancelToken && axiosCanceler.addPending(config);
@@ -192,10 +193,6 @@ export class VAxios {
     return this.request({ ...config, method: 'PUT' }, options);
   }
 
-  patch<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
-    return this.request({ ...config, method: 'PATCH' }, options);
-  }
-
   delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
     return this.request({ ...config, method: 'DELETE' }, options);
   }
@@ -207,6 +204,10 @@ export class VAxios {
       conf.cancelToken = config.cancelToken;
     }
 
+    if (config.signal) {
+      conf.signal = config.signal;
+    }
+
     const transform = this.getTransform();
 
     const { requestOptions } = this.options;
diff --git a/apps/admin/src/utils/http/axios/axiosTransform.ts b/apps/admin/src/utils/http/axios/axiosTransform.ts
index b0cc0af..a997438 100644
--- a/apps/admin/src/utils/http/axios/axiosTransform.ts
+++ b/apps/admin/src/utils/http/axios/axiosTransform.ts
@@ -5,7 +5,7 @@ import type {
   AxiosInstance,
   AxiosRequestConfig,
   AxiosResponse,
-  InternalAxiosRequestConfig
+  InternalAxiosRequestConfig,
 } from 'axios';
 import type { RequestOptions, Result } from '/#/axios';
 
diff --git a/apps/admin/src/utils/http/axios/checkStatus.ts b/apps/admin/src/utils/http/axios/checkStatus.ts
index dee552b..3e47517 100644
--- a/apps/admin/src/utils/http/axios/checkStatus.ts
+++ b/apps/admin/src/utils/http/axios/checkStatus.ts
@@ -19,6 +19,7 @@ export function checkStatus(
   const { t } = useI18n();
   const userStore = useUserStoreWithOut();
   let errMessage = '';
+
   switch (status) {
     case 400:
     case 422:
diff --git a/apps/admin/src/utils/http/axios/index.ts b/apps/admin/src/utils/http/axios/index.ts
index 8bb8695..abc8189 100644
--- a/apps/admin/src/utils/http/axios/index.ts
+++ b/apps/admin/src/utils/http/axios/index.ts
@@ -1,7 +1,7 @@
 // axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
 // The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
 
-import type { AxiosResponse } from 'axios';
+import type { AxiosInstance, AxiosResponse } from 'axios';
 import { clone } from 'lodash-es';
 import type { RequestOptions, Result } from '/#/axios';
 import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
@@ -77,7 +77,6 @@ const transform: AxiosTransform = {
       case ResultEnum.TIMEOUT:
         timeoutMsg = t('sys.api.timeoutMessage');
         const userStore = useUserStoreWithOut();
-        userStore.setToken(undefined);
         userStore.logout(true);
         break;
       default:
@@ -175,7 +174,7 @@ const transform: AxiosTransform = {
   /**
    * @description: 响应错误处理
    */
-  responseInterceptorsCatch: (axiosInstance: AxiosResponse, error: any) => {
+  responseInterceptorsCatch: (axiosInstance: AxiosInstance, error: any) => {
     const { t } = useI18n();
     const errorLogStore = useErrorLogStoreWithOut();
     errorLogStore.addAjaxErrorInfo(error);
diff --git a/apps/admin/src/utils/index.ts b/apps/admin/src/utils/index.ts
index 945ed08..c557300 100644
--- a/apps/admin/src/utils/index.ts
+++ b/apps/admin/src/utils/index.ts
@@ -1,9 +1,9 @@
 import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
 import type { App, Component } from 'vue';
 
+import { intersectionWith, isEqual, mergeWith, unionWith } from 'lodash-es';
 import { unref } from 'vue';
 import { isArray, isObject } from '/@/utils/is';
-import { cloneDeep, isEqual, mergeWith, unionWith } from 'lodash-es';
 
 export const noop = () => {};
 
@@ -34,24 +34,49 @@ export function setObjToUrlParams(baseUrl: string, obj: any): string {
 }
 
 /**
-
- 递归合并两个对象。
- Recursively merge two objects.
- @param target 目标对象，合并后结果存放于此。The target object to merge into.
- @param source 要合并的源对象。The source object to merge from.
- @returns 合并后的对象。The merged object.
+ * Recursively merge two objects.
+ * 递归合并两个对象。
+ *
+ * @param source The source object to merge from. 要合并的源对象。
+ * @param target The target object to merge into. 目标对象，合并后结果存放于此。
+ * @param mergeArrays How to merge arrays. Default is "replace".
+ *        如何合并数组。默认为replace。
+ *        - "union": Union the arrays. 对数组执行并集操作。
+ *        - "intersection": Intersect the arrays. 对数组执行交集操作。
+ *        - "concat": Concatenate the arrays. 连接数组。
+ *        - "replace": Replace the source array with the target array. 用目标数组替换源数组。
+ * @returns The merged object. 合并后的对象。
  */
 export function deepMerge<T extends object | null | undefined, U extends object | null | undefined>(
-  target: T,
-  source: U,
+  source: T,
+  target: U,
+  mergeArrays: 'union' | 'intersection' | 'concat' | 'replace' = 'replace',
 ): T & U {
-  return mergeWith(cloneDeep(target), source, (objValue, srcValue) => {
-    if (isObject(objValue) && isObject(srcValue)) {
-      return mergeWith(cloneDeep(objValue), srcValue, (prevValue, nextValue) => {
-        // 如果是数组，合并数组(去重) If it is an array, merge the array (remove duplicates)
-        return isArray(prevValue) ? unionWith(prevValue, nextValue, isEqual) : undefined;
-      });
+  if (!target) {
+    return source as T & U;
+  }
+  if (!source) {
+    return target as T & U;
+  }
+  return mergeWith({}, source, target, (sourceValue, targetValue) => {
+    if (isArray(targetValue) && isArray(sourceValue)) {
+      switch (mergeArrays) {
+        case 'union':
+          return unionWith(sourceValue, targetValue, isEqual);
+        case 'intersection':
+          return intersectionWith(sourceValue, targetValue, isEqual);
+        case 'concat':
+          return sourceValue.concat(targetValue);
+        case 'replace':
+          return targetValue;
+        default:
+          throw new Error(`Unknown merge array strategy: ${mergeArrays as string}`);
+      }
+    }
+    if (isObject(targetValue) && isObject(sourceValue)) {
+      return deepMerge(sourceValue, targetValue, mergeArrays);
     }
+    return undefined;
   });
 }
 
diff --git a/apps/admin/src/utils/is.ts b/apps/admin/src/utils/is.ts
index 3a5c4a6..b9cf4b0 100644
--- a/apps/admin/src/utils/is.ts
+++ b/apps/admin/src/utils/is.ts
@@ -1,3 +1,4 @@
+import { isNil } from 'lodash-es';
 const toString = Object.prototype.toString;
 
 export function is(val: unknown, type: string) {
@@ -16,7 +17,15 @@ export function isObject(val: any): val is Record<any, any> {
   return val !== null && is(val, 'Object');
 }
 
+export function isNotEmpty(val: any): boolean {
+  return !isNil(val) && !isEmpty(val);
+}
+
 export function isEmpty<T = unknown>(val: T): val is T {
+  if (isNil(val)) {
+    return true;
+  }
+
   if (isArray(val) || isString(val)) {
     return val.length === 0;
   }
@@ -36,6 +45,8 @@ export function isDate(val: unknown): val is Date {
   return is(val, 'Date');
 }
 
+
+
 export function isNull(val: unknown): val is null {
   return val === null;
 }
diff --git a/apps/admin/src/utils/propTypes.ts b/apps/admin/src/utils/propTypes.ts
index 16cf9cd..b4f0623 100644
--- a/apps/admin/src/utils/propTypes.ts
+++ b/apps/admin/src/utils/propTypes.ts
@@ -20,13 +20,13 @@ const newPropTypes = createTypes({
 // 从 vue-types v5.0 开始，extend()方法已经废弃，当前已改为官方推荐的ES6+方法 https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method
 class propTypes extends newPropTypes {
   // a native-like validator that supports the `.validable` method
-  static get style() {
+  static override get style() {
     return toValidableType('style', {
       type: [String, Object],
     });
   }
 
-  static get VNodeChild() {
+  static override get VNodeChild() {
     return toValidableType('VNodeChild', {
       type: undefined,
     });
diff --git a/apps/admin/src/utils/props.ts b/apps/admin/src/utils/props.ts
index 00b364d..8984cfa 100644
--- a/apps/admin/src/utils/props.ts
+++ b/apps/admin/src/utils/props.ts
@@ -129,7 +129,7 @@ export function buildProp<
 
   return {
     type:
-      typeof type === 'object' && Object.getOwnPropertySymbols(type).includes(wrapperKey)
+      typeof type === 'object' && Object.getOwnPropertySymbols(type).includes(wrapperKey) && type
         ? type[wrapperKey]
         : type,
     required: !!required,
@@ -175,9 +175,10 @@ export const buildProps = <
       : never;
   };
 
-export const definePropType = <T>(val: any) => ({ [wrapperKey]: val } as PropWrapper<T>);
+export const definePropType = <T>(val: any) => ({ [wrapperKey]: val }) as PropWrapper<T>;
+
+export const keyOf = <T extends object>(arr: T) => Object.keys(arr) as Array<keyof T>;
 
-export const keyOf = <T>(arr: T) => Object.keys(arr) as Array<keyof T>;
 export const mutable = <T extends readonly any[] | Record<string, unknown>>(val: T) =>
   val as Mutable<typeof val>;
 
diff --git a/apps/admin/src/utils/types.ts b/apps/admin/src/utils/types.ts
index 4453ec4..a853855 100644
--- a/apps/admin/src/utils/types.ts
+++ b/apps/admin/src/utils/types.ts
@@ -40,3 +40,26 @@ export type ComponentSize = 'large' | 'medium' | 'small' | 'mini';
 export type StyleValue = string | CSSProperties | Array<StyleValue>;
 
 export type Mutable<T> = { -readonly [P in keyof T]: T[P] };
+
+type Merge<O extends object, T extends object> = {
+  [K in keyof O | keyof T]: K extends keyof T ? T[K] : K extends keyof O ? O[K] : never;
+};
+
+/**
+ * T = [
+ *  { name: string; age: number; },
+ *  { sex: 'male' | 'female'; age: string }
+ * ]
+ * =>
+ * MergeAll<T> = {
+ *  name: string;
+ *  sex: 'male' | 'female';
+ *  age: string
+ * }
+ */
+export type MergeAll<T extends object[], R extends object = {}> = T extends [
+  infer F extends object,
+  ...infer Rest extends object[],
+]
+  ? MergeAll<Rest, Merge<R, F>>
+  : R;
diff --git a/apps/admin/types/axios.d.ts b/apps/admin/types/axios.d.ts
index 4f6d95c..0ff2f58 100644
--- a/apps/admin/types/axios.d.ts
+++ b/apps/admin/types/axios.d.ts
@@ -39,7 +39,7 @@ export interface Result<T = any> {
   code: number;
   type: 'success' | 'error' | 'warning';
   message: string;
-  data: T;
+  result: T;
 }
 
 // multipart/form-data: upload file
diff --git a/apps/admin/types/config.d.ts b/apps/admin/types/config.d.ts
index 18ef03a..959c55e 100644
--- a/apps/admin/types/config.d.ts
+++ b/apps/admin/types/config.d.ts
@@ -57,6 +57,7 @@ export interface HeaderSetting {
   // Show message center button
   showNotice: boolean;
   showSearch: boolean;
+  showApi: boolean;
 }
 
 export interface LocaleSetting {
diff --git a/apps/admin/types/global.d.ts b/apps/admin/types/global.d.ts
index 07c689c..301c19a 100644
--- a/apps/admin/types/global.d.ts
+++ b/apps/admin/types/global.d.ts
@@ -22,6 +22,13 @@ declare global {
   //   __APP__: App<Element>;
   // }
 
+  // fix FullScreen type error
+  interface Document {
+    mozFullScreenElement?: Element;
+    msFullscreenElement?: Element;
+    webkitFullscreenElement?: Element;
+  }
+
   // vue
   declare type PropType<T> = VuePropType<T>;
   declare type VueNode = VNodeChild | JSX.Element;
diff --git a/apps/admin/types/index.d.ts b/apps/admin/types/index.d.ts
index b279c0a..7f67f33 100644
--- a/apps/admin/types/index.d.ts
+++ b/apps/admin/types/index.d.ts
@@ -14,7 +14,7 @@ declare type LabelValueOptions = {
   [key: string]: string | number | boolean;
 }[];
 
-declare type EmitType = (event: string, ...args: any[]) => void;
+declare type EmitType = ReturnType<typeof defineEmits>;
 
 declare type TargetContext = '_self' | '_blank';
 
diff --git a/apps/admin/types/store.d.ts b/apps/admin/types/store.d.ts
index 36a6025..3c1b910 100644
--- a/apps/admin/types/store.d.ts
+++ b/apps/admin/types/store.d.ts
@@ -10,6 +10,11 @@ export interface LockInfo {
   isLock?: boolean;
 }
 
+export interface ApiAddress {
+  key: string;
+  val: string;
+}
+
 // Error-log information
 export interface ErrorLogInfo {
   // Type of error
diff --git a/apps/admin/types/vue-router.d.ts b/apps/admin/types/vue-router.d.ts
index 3c9bb9e..310d611 100644
--- a/apps/admin/types/vue-router.d.ts
+++ b/apps/admin/types/vue-router.d.ts
@@ -21,6 +21,8 @@ declare module 'vue-router' {
     affix?: boolean;
     // icon on tab
     icon?: string;
+    // img on tab
+    img?: string;
     frameSrc?: string;
     // current page transition
     transitionName?: string;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7d4565..cff5265 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,8 +63,8 @@ importers:
         specifier: ^2.2.1
         version: 2.2.1
       ant-design-vue:
-        specifier: ^3.2.20
-        version: 3.2.20(vue@3.3.7)
+        specifier: ^4.0.6
+        version: 4.0.6(vue@3.3.7)
       axios:
         specifier: ^1.6.0
         version: 1.6.0
@@ -107,6 +107,9 @@ importers:
       pinia:
         specifier: 2.0.33
         version: 2.0.33(typescript@5.2.2)(vue@3.3.7)
+      pinia-plugin-persistedstate:
+        specifier: ^3.2.0
+        version: 3.2.0(pinia@2.0.33)
       print-js:
         specifier: ^1.6.0
         version: 1.6.0
@@ -822,6 +825,16 @@ packages:
       '@ant-design/icons-svg': 4.2.1
       vue: 3.3.7(typescript@5.2.2)
 
+  /@ant-design/icons-vue@7.0.1(vue@3.3.7):
+    resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
+    peerDependencies:
+      vue: '>=3.0.3'
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.2.1
+      vue: 3.3.7(typescript@5.2.2)
+    dev: false
+
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -2677,6 +2690,14 @@ packages:
     resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==}
     engines: {node: '>=10'}
 
+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
+
+  /@emotion/unitless@0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+    dev: false
+
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}
@@ -6618,19 +6639,22 @@ packages:
       warning: 4.0.3
     dev: true
 
-  /ant-design-vue@3.2.20(vue@3.3.7):
-    resolution: {integrity: sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==}
+  /ant-design-vue@4.0.6(vue@3.3.7):
+    resolution: {integrity: sha512-6kh3b8Ito9SAbOKTW0wyfcCnd859uhQQlttjo8RjMj6YjLK52yNO2TdgYRwed06scUm5RwEnQ2JKMxYYoeG1MA==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: '>=3.2.0'
     dependencies:
       '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 6.1.0(vue@3.3.7)
+      '@ant-design/icons-vue': 7.0.1(vue@3.3.7)
       '@babel/runtime': 7.22.6
       '@ctrl/tinycolor': 3.6.0
+      '@emotion/hash': 0.9.1
+      '@emotion/unitless': 0.8.1
       '@simonwep/pickr': 1.8.2
       array-tree-filter: 2.1.0
       async-validator: 4.2.5
+      csstype: 3.1.2
       dayjs: 1.11.10
       dom-align: 1.12.4
       dom-scroll-into-view: 2.0.1
@@ -6639,6 +6663,8 @@ packages:
       resize-observer-polyfill: 1.5.1
       scroll-into-view-if-needed: 2.2.31
       shallow-equal: 1.2.1
+      stylis: 4.3.0
+      throttle-debounce: 5.0.0
       vue: 3.3.7(typescript@5.2.2)
       vue-types: 3.0.2(vue@3.3.7)
       warning: 4.0.3
@@ -15600,6 +15626,14 @@ packages:
     requiresBuild: true
     optional: true
 
+  /pinia-plugin-persistedstate@3.2.0(pinia@2.0.33):
+    resolution: {integrity: sha512-tZbNGf2vjAQcIm7alK40sE51Qu/m9oWr+rEgNm/2AWr1huFxj72CjvpQcIQzMknDBJEkQznCLAGtJTIcLKrKdw==}
+    peerDependencies:
+      pinia: ^2.0.0
+    dependencies:
+      pinia: 2.0.33(typescript@5.2.2)(vue@3.3.7)
+    dev: false
+
   /pinia@2.0.33(typescript@5.2.2)(vue@3.3.7):
     resolution: {integrity: sha512-HOj1yVV2itw6rNIrR2f7+MirGNxhORjrULL8GWgRwXsGSvEqIQ+SE0MYt6cwtpegzCda3i+rVTZM+AM7CG+kRg==}
     peerDependencies:
@@ -17785,6 +17819,10 @@ packages:
       - supports-color
     dev: true
 
+  /stylis@4.3.0:
+    resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
+    dev: false
+
   /superagent-proxy@3.0.0(superagent@8.0.9):
     resolution: {integrity: sha512-wAlRInOeDFyd9pyonrkJspdRAxdLrcsZ6aSnS+8+nu4x1aXbz6FWSTT9M6Ibze+eG60szlL7JA8wEIV7bPWuyQ==}
     engines: {node: '>=6'}
@@ -18062,6 +18100,11 @@ packages:
     resolution: {integrity: sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==}
     dev: false
 
+  /throttle-debounce@5.0.0:
+    resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
+    engines: {node: '>=12.22'}
+    dev: false
+
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
     dependencies: