perf(setting-drawer): perf setting-drawer

build/vite/plugin/html.ts

+import type { Plugin } from 'vite';
+import ViteHtmlPlugin from 'vite-plugin-html';
+import { isProdFn, isSiteMode, ViteEnv } from '../../utils';
+
+import { hmScript } from '../hm';
+// @ts-ignore
+import pkg from '../../../package.json';
+import { GLOB_CONFIG_FILE_NAME } from '../../constant';
+
+export function setupHtmlPlugin(plugins: Plugin[], env: ViteEnv) {
+  const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+
+  const htmlPlugin = ViteHtmlPlugin({
+    // html title
+    title: VITE_GLOB_APP_TITLE,
+    minify: isProdFn(),
+    options: {
+      // Package and insert additional configuration files
+      injectConfig: isProdFn()
+        ? `<script src='${VITE_PUBLIC_PATH || './'}${GLOB_CONFIG_FILE_NAME}?v=${
+            pkg.version
+          }-${new Date().getTime()}'></script>`
+        : '',
+      // Insert Baidu statistics code
+      hmScript: isSiteMode() ? hmScript : '',
+      title: VITE_GLOB_APP_TITLE,
+    },
+  });
+
+  plugins.push(htmlPlugin);
+  return plugins;
+}

build/vite/plugin/index.ts

 import type { Plugin as VitePlugin } from 'vite';
 import type { Plugin as rollupPlugin } from 'rollup';
 
-import { createMockServer } from 'vite-plugin-mock';
-import { VitePWA } from 'vite-plugin-pwa';
-import ViteHtmlPlugin from 'vite-plugin-html';
 import PurgeIcons from 'vite-plugin-purge-icons';
 
 import visualizer from 'rollup-plugin-visualizer';
 import gzipPlugin from './gzip/index';
 
-import { hmScript } from '../hm';
-
 // @ts-ignore
 import pkg from '../../../package.json';
-import { isDevFn, isProdFn, isSiteMode, ViteEnv, isReportMode, isBuildGzip } from '../../utils';
-import { GLOB_CONFIG_FILE_NAME } from '../../constant';
+import { isProdFn, isSiteMode, ViteEnv, isReportMode, isBuildGzip } from '../../utils';
+import { setupHtmlPlugin } from './html';
+import { setupPwaPlugin } from './pwa';
+import { setupMockPlugin } from './mock';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv) {
-  const { VITE_USE_MOCK, VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH, VITE_USE_PWA } = viteEnv;
-
   const vitePlugins: VitePlugin[] = [];
 
   // vite-plugin-html
-  vitePlugins.push(
-    ViteHtmlPlugin({
-      // html title
-      title: VITE_GLOB_APP_TITLE,
-      minify: isProdFn(),
-      options: {
-        // Package and insert additional configuration files
-        injectConfig: isProdFn()
-          ? `<script src='${VITE_PUBLIC_PATH || './'}${GLOB_CONFIG_FILE_NAME}?v=${
-              pkg.version
-            }-${new Date().getTime()}'></script>`
-          : '',
-        // Insert Baidu statistics code
-        hmScript: isSiteMode() ? hmScript : '',
-        title: VITE_GLOB_APP_TITLE,
-      },
-    })
-  );
+  setupHtmlPlugin(vitePlugins, viteEnv);
+  // vite-plugin-pwa
+  setupPwaPlugin(vitePlugins, viteEnv);
+  // vite-plugin-mock
+  setupMockPlugin(vitePlugins, viteEnv);
 
   // vite-plugin-purge-icons
   vitePlugins.push(PurgeIcons());
 
-  if (isProdFn() && VITE_USE_PWA) {
-    vitePlugins.push(
-      VitePWA({
-        manifest: {
-          name: 'Vben Admin',
-          short_name: 'vben_admin',
-          icons: [
-            {
-              src: './resource/img/pwa-192x192.png',
-              sizes: '192x192',
-              type: 'image/png',
-            },
-            {
-              src: './resource/img/pwa-512x512.png',
-              sizes: '512x512',
-              type: 'image/png',
-            },
-          ],
-        },
-      })
-    );
-  }
-
-  // vite-plugin-mock
-  if (isDevFn() && VITE_USE_MOCK) {
-    // open mock
-    vitePlugins.push(
-      createMockServer({
-        ignore: /^\_/,
-        mockPath: 'mock',
-        showTime: true,
-      })
-    );
-  }
   return vitePlugins;
 }
 
@@ -86,17 +34,15 @@ export function createVitePlugins(viteEnv: ViteEnv) {
 export function createRollupPlugin() {
   const rollupPlugins: rollupPlugin[] = [];
 
-  if (isProdFn()) {
-    if (isReportMode()) {
-      // rollup-plugin-visualizer
-      rollupPlugins.push(
-        visualizer({ filename: './build/.cache/stats.html', open: true }) as Plugin
-      );
-    }
-    if (isBuildGzip() || isSiteMode()) {
-      // rollup-plugin-gizp
-      rollupPlugins.push(gzipPlugin());
-    }
+  if (!isProdFn() && isReportMode()) {
+    // rollup-plugin-visualizer
+    rollupPlugins.push(visualizer({ filename: './build/.cache/stats.html', open: true }) as Plugin);
   }
+
+  if (!isProdFn() && (isBuildGzip() || isSiteMode())) {
+    // rollup-plugin-gizp
+    rollupPlugins.push(gzipPlugin());
+  }
+
   return rollupPlugins;
 }

build/vite/plugin/mock.ts

+import { createMockServer } from 'vite-plugin-mock';
+import type { Plugin } from 'vite';
+import { isDevFn, ViteEnv } from '../../utils';
+
+export function setupMockPlugin(plugins: Plugin[], env: ViteEnv) {
+  const { VITE_USE_MOCK } = env;
+  const mockPlugin = createMockServer({
+    ignore: /^\_/,
+    mockPath: 'mock',
+    showTime: true,
+  });
+  if (isDevFn() && VITE_USE_MOCK) {
+    plugins.push(mockPlugin);
+  }
+  return plugins;
+}

build/vite/plugin/pwa.ts

+import { VitePWA } from 'vite-plugin-pwa';
+import type { Plugin } from 'vite';
+import { isProdFn, ViteEnv } from '../../utils';
+
+export function setupPwaPlugin(plugins: Plugin[], env: ViteEnv) {
+  const { VITE_USE_PWA } = env;
+
+  const pwaPlugin = VitePWA({
+    manifest: {
+      name: 'Vben Admin',
+      short_name: 'vben_admin',
+      icons: [
+        {
+          src: './resource/img/pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: './resource/img/pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+      ],
+    },
+  });
+
+  if (isProdFn() && VITE_USE_PWA) {
+    plugins.push(pwaPlugin);
+  }
+  return plugins;
+}

src/components/Menu/src/BasicMenu.tsx

@@ -103,7 +103,7 @@ export default defineComponent({
         const isHorizontal = unref(getIsHorizontal) || getSplit.value;
 
         return {
-          height: isHorizontal ? `calc(100%)` : `calc(100% - ${props.showLogo ? '48px' : '0px'})`,
+          height: isHorizontal ? '100%' : `calc(100% - ${props.showLogo ? '48px' : '0px'})`,
           overflowY: isHorizontal ? 'hidden' : 'auto',
         };
       }

src/hooks/web/useI18n.ts

@@ -25,9 +25,9 @@ export function useI18n(namespace?: string) {
 
   return {
     ...methods,
-    t: (key: string, ...arg: Parameters<typeof t>) => {
+    t: (key: string, ...arg: Partial<Parameters<typeof t>>) => {
       if (!key) return '';
-      return t(getKey(key), ...arg);
+      return t(getKey(key), ...(arg as Parameters<typeof t>));
     },
   };
 }

src/layouts/default/setting/components/InputNumberItem.vue

+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <InputNumber
+      v-bind="$attrs"
+      size="small"
+      :class="`${prefixCls}-input-number`"
+      @change="handleChange"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import { InputNumber } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'InputNumberItem',
+    components: { InputNumber },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+        default: () => {},
+      },
+      title: {
+        type: String,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-input-number-item');
+
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-setting-input-number-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    &-input-number {
+      width: 126px;
+    }
+  }
+</style>

src/layouts/default/setting/components/SelectItem.vue

+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <Select
+      v-bind="getBindValue"
+      :class="`${prefixCls}-select`"
+      @change="handleChange"
+      :disabled="disabled"
+      size="small"
+      :options="options"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+
+  import { Select } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'SelectItem',
+    components: { Select },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+        default: () => {},
+      },
+      disabled: {
+        type: Boolean,
+      },
+      title: {
+        type: String,
+      },
+      def: {
+        type: [String, Number] as PropType<string | number>,
+      },
+      initValue: {
+        type: [String, Number] as PropType<string | number>,
+      },
+      options: {
+        type: Array as PropType<LabelValueOptions>,
+        default: [],
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-select-item');
+      const getBindValue = computed(() => {
+        return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
+      });
+
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        handleChange,
+        getBindValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-setting-select-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    &-select {
+      width: 126px;
+    }
+  }
+</style>

src/layouts/default/setting/components/SettingFooter.vue

+<template>
+  <div :class="prefixCls">
+    <a-button type="primary" block @click="handleCopy">
+      <CopyOutlined class="mr-2" />
+      {{ t('layout.setting.copyBtn') }}
+    </a-button>
+
+    <a-button color="warning" block @click="handleResetSetting" class="my-3">
+      <RedoOutlined class="mr-2" />
+      {{ t('layout.setting.resetBtn') }}
+    </a-button>
+
+    <a-button color="error" block @click="handleClearAndRedo">
+      <RedoOutlined class="mr-2" />
+      {{ t('layout.setting.clearBtn') }}
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
+  import { appStore } from '/@/store/modules/app';
+  import defaultSetting from '/@/settings/projectSetting';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
+
+  export default defineComponent({
+    name: 'SettingFooter',
+    components: { CopyOutlined, RedoOutlined },
+    setup() {
+      const { getRootSetting } = useRootSetting();
+      const { prefixCls } = useDesign('setting-footer');
+      const { t } = useI18n();
+      const { createSuccessModal, createMessage } = useMessage();
+
+      function handleCopy() {
+        const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(getRootSetting), null, 2));
+        unref(isSuccessRef) &&
+          createSuccessModal({
+            title: t('layout.setting.operatingTitle'),
+            content: t('layout.setting.operatingContent'),
+          });
+      }
+      function handleResetSetting() {
+        try {
+          appStore.commitProjectConfigState(defaultSetting);
+          const { colorWeak, grayMode } = defaultSetting;
+          // updateTheme(themeColor);
+          updateColorWeak(colorWeak);
+          updateGrayMode(grayMode);
+          createMessage.success(t('layout.setting.resetSuccess'));
+        } catch (error) {
+          createMessage.error(error);
+        }
+      }
+
+      function handleClearAndRedo() {
+        localStorage.clear();
+        appStore.resumeAllState();
+        location.reload();
+      }
+      return {
+        prefixCls,
+        t,
+        handleCopy,
+        handleResetSetting,
+        handleClearAndRedo,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-setting-footer';
+
+  .@{prefix-cls} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

src/layouts/default/setting/components/SwitchItem.vue

+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <Switch
+      v-bind="getBindValue"
+      @change="handleChange"
+      :disabled="disabled"
+      :checkedChildren="t('layout.setting.on')"
+      :unCheckedChildren="t('layout.setting.off')"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+
+  import { Switch } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'SwitchItem',
+    components: { Switch },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+        default: () => {},
+      },
+      disabled: {
+        type: Boolean,
+      },
+      title: {
+        type: String,
+      },
+      def: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-switch-item');
+      const { t } = useI18n();
+
+      const getBindValue = computed(() => {
+        return props.def ? { checked: props.def } : {};
+      });
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        t,
+        handleChange,
+        getBindValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-setting-switch-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+  }
+</style>

src/layouts/default/setting/components/ThemePicker.vue

+<template>
+  <div :class="prefixCls">
+    <template v-for="color in colorList || []" :key="color">
+      <span
+        @click="handleClick(color)"
+        :class="[
+          `${prefixCls}__item`,
+          {
+            [`${prefixCls}__item--active`]: def === color,
+          },
+        ]"
+        :style="{ background: color }"
+      >
+        <CheckOutlined />
+      </span>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { CheckOutlined } from '@ant-design/icons-vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'ThemePicker',
+    components: { CheckOutlined },
+    props: {
+      colorList: {
+        type: Array as PropType<string[]>,
+        defualt: [],
+      },
+      event: {
+        type: Number as PropType<HandlerEnum>,
+        default: () => {},
+      },
+      def: {
+        type: String,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-theme-picker');
+
+      function handleClick(color: string) {
+        props.event && baseHandler(props.event, color);
+      }
+      return {
+        prefixCls,
+        handleClick,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-setting-theme-picker';
+
+  .@{prefix-cls} {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 16px 0;
+    justify-content: space-around;
+
+    &__item {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      border-radius: 2px;
+
+      svg {
+        display: none;
+      }
+
+      &--active {
+        border: 1px solid lighten(@primary-color, 10%);
+
+        svg {
+          display: inline-block;
+          margin: 0 0 3px 3px;
+          font-size: 12px;
+          fill: @white !important;
+        }
+      }
+    }
+  }
+</style>

src/layouts/default/setting/components/TypePicker.vue

+<template>
+  <div :class="prefixCls">
+    <template v-for="item in menuTypeList || []" :key="item.title">
+      <Tooltip :title="item.title" placement="bottom">
+        <div
+          @click="handler(item)"
+          :class="[
+            `${prefixCls}__item`,
+            {
+              [`${prefixCls}__item--active`]: def === item.type,
+            },
+          ]"
+        >
+          <img :src="item.src" />
+        </div>
+      </Tooltip>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import { Tooltip } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { menuTypeList } from '../enum';
+  export default defineComponent({
+    name: 'MenuTypePicker',
+    components: { Tooltip },
+    props: {
+      menuTypeList: {
+        type: Array as PropType<typeof menuTypeList>,
+        defualt: [],
+      },
+      handler: {
+        type: Function as PropType<Fn>,
+        default: () => {},
+      },
+      def: {
+        type: String,
+      },
+    },
+    setup() {
+      const { prefixCls } = useDesign('setting-menu-type-picker');
+
+      return {
+        prefixCls,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-setting-menu-type-picker';
+
+  .@{prefix-cls} {
+    display: flex;
+
+    &__item {
+      position: relative;
+      width: 70px;
+      height: 50px;
+      margin: 0 20px 20px 0;
+      cursor: pointer;
+      border-radius: 6px;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        content: '';
+        opacity: 0;
+        transition: all 0.3s;
+      }
+
+      &:hover,
+      &--active {
+        &::after {
+          top: -8px;
+          left: -4px;
+          width: 80px;
+          height: 64px;
+          border: 2px solid @primary-color;
+          border-radius: 6px;
+          opacity: 1;
+        }
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+</style>

src/layouts/default/setting/components/index.ts

+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
+export const ThemePicker = createAsyncComponent(() => import('./ThemePicker.vue'));
+export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.vue'));
+export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'));
+export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'));
+export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'));

src/layouts/default/setting/index.less

-.setting-drawer {
-  .ant-drawer-body {
-    padding-top: 0;
-    background: @white;
-  }
-
-  &__footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &__cell-item {
-    display: flex;
-    justify-content: space-between;
-    margin: 16px 0;
-  }
-
-  &__theme-item {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 16px 0;
-    justify-content: space-around;
-
-    > span {
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      border: 1px solid #ddd;
-      border-radius: 2px;
-
-      svg {
-        display: none;
-      }
-
-      &.active {
-        border: 1px solid lighten(@primary-color, 10%);
-
-        svg {
-          display: inline-block;
-          margin: 0 0 3px 3px;
-          font-size: 12px;
-          fill: @white;
-        }
-      }
-    }
-  }
-
-  &__siderbar {
-    display: flex;
-
-    > div {
-      position: relative;
-
-      .check-icon {
-        position: absolute;
-        top: 40%;
-        left: 40%;
-        display: none;
-        color: @primary-color;
-
-        &.active {
-          display: inline-block;
-        }
-      }
-    }
-
-    img {
-      margin-right: 10px;
-      cursor: pointer;
-    }
-  }
-}

src/layouts/default/setting/index.vue

 <template>
-  <div @click="openDrawer" class="setting-button">
+  <div @click="openDrawer" :class="prefixCls">
     <SettingOutlined />
     <SettingDrawer @register="register" />
   </div>
@@ -10,13 +10,17 @@
   import SettingDrawer from './SettingDrawer';
 
   import { useDrawer } from '/@/components/Drawer';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'SettingBtn',
     components: { SettingOutlined, SettingDrawer },
     setup() {
       const [register, { openDrawer }] = useDrawer();
+
+      const { prefixCls } = useDesign('setting-button');
       return {
+        prefixCls,
         register,
         openDrawer,
       };
@@ -25,9 +29,9 @@
 </script>
 <style lang="less">
   @import (reference) '../../../design/index.less';
-  @import './index.less';
+  @prefix-cls: ~'@{namespace}-setting-button';
 
-  .setting-button {
+  .@{prefix-cls} {
     position: absolute;
     top: 45%;
     right: 0;