perf(projects): perf code

src/components/common/color-schema-switch.vue

@@ -5,7 +5,7 @@ import { $t } from '@/locales';
 defineOptions({ name: 'ColorSchemaSwitch' });
 
 interface Props {
-  colorSchema: App.Theme.ColorScheme;
+  themeSchema: UnionKey.ThemeScheme;
   isDark: boolean;
 }
 
@@ -21,13 +21,13 @@ function handleSwitch() {
   emit('switch');
 }
 
-const icons: Record<App.Theme.ColorScheme, string> = {
+const icons: Record<UnionKey.ThemeScheme, string> = {
   light: 'material-symbols:sunny',
   dark: 'material-symbols:nightlight-rounded',
   auto: 'material-symbols:hdr-auto'
 };
 
-const icon = computed(() => icons[props.colorSchema]);
+const icon = computed(() => icons[props.themeSchema]);
 </script>
 
 <template>

src/constants/app.ts

@@ -1,46 +1,42 @@
-import { transformObjectToOption } from '@/utils/common';
+import { transformRecordToOption } from '@/utils/common';
 
-export const loginModuleLabels: Record<UnionKey.LoginModule, App.I18n.I18nKey> = {
+export const themeSchemaRecord: Record<UnionKey.ThemeScheme, App.I18n.I18nKey> = {
+  light: 'theme.themeSchema.light',
+  dark: 'theme.themeSchema.dark',
+  auto: 'theme.themeSchema.auto'
+};
+
+export const loginModuleRecord: Record<UnionKey.LoginModule, App.I18n.I18nKey> = {
   'pwd-login': 'page.login.pwdLogin.title',
   'code-login': 'page.login.codeLogin.title',
   register: 'page.login.register.title',
   'reset-pwd': 'page.login.resetPwd.title',
   'bind-wechat': 'page.login.bindWeChat.title'
 };
 
-export const themeLayoutModeLabels: Record<UnionKey.ThemeLayoutMode, string> = {
+export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, string> = {
   vertical: '左侧菜单模式',
   horizontal: '顶部菜单模式',
   'vertical-mix': '左侧菜单混合模式',
   'horizontal-mix': '顶部菜单混合模式'
 };
-export const themeLayoutModeOptions = transformObjectToOption(themeLayoutModeLabels);
+export const themeLayoutModeOptions = transformRecordToOption(themeLayoutModeRecord);
 
-export const themeScrollModeLabels: Record<UnionKey.ThemeScrollMode, string> = {
+export const themeScrollModeRecord: Record<UnionKey.ThemeScrollMode, string> = {
   wrapper: '外层滚动',
   content: '主体滚动'
 };
-export const themeScrollModeOptions = transformObjectToOption(themeScrollModeLabels);
+export const themeScrollModeOptions = transformRecordToOption(themeScrollModeRecord);
 
-export const themeTabModeLabels: Record<UnionKey.ThemeTabMode, string> = {
+export const themeTabModeRecord: Record<UnionKey.ThemeTabMode, string> = {
   chrome: '谷歌风格',
   button: '按钮风格'
 };
-export const themeTabModeOptions = transformObjectToOption(themeTabModeLabels);
+export const themeTabModeOptions = transformRecordToOption(themeTabModeRecord);
 
-export const themeHorizontalMenuPositionLabels: Record<UnionKey.ThemeHorizontalMenuPosition, string> = {
+export const themeHorizontalMenuPositionRecord: Record<UnionKey.ThemeHorizontalMenuPosition, string> = {
   'flex-start': '居左',
   center: '居中',
   'flex-end': '居右'
 };
-export const themeHorizontalMenuPositionOptions = transformObjectToOption(themeHorizontalMenuPositionLabels);
-
-// export const themeAnimateModeLabels: Record<UnionKey.ThemeAnimateMode, string> = {
-//   'zoom-fade': '渐变',
-//   'zoom-out': '闪现',
-//   'fade-slide': '滑动',
-//   fade: '消退',
-//   'fade-bottom': '底部消退',
-//   'fade-scale': '缩放消退'
-// };
-// export const themeAnimateModeOptions = transformObjectToOption(themeAnimateModeLabels);
+export const themeHorizontalMenuPositionOptions = transformRecordToOption(themeHorizontalMenuPositionRecord);

src/layouts/modules/global-header/index.vue

@@ -25,9 +25,9 @@ defineOptions({
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
       <ColorSchemaSwitch
-        :color-schema="themeStore.colorScheme"
+        :theme-schema="themeStore.themeScheme"
         :is-dark="themeStore.darkMode"
-        @switch="themeStore.toggleColorScheme"
+        @switch="themeStore.toggleThemeScheme"
       />
       <ThemeButton />
       <UserAvatar />

src/layouts/modules/theme-drawer/components/dark-mode.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'DarkMode'
+});
+</script>
+
+<template>
+  <ADivider>{{ $t('themeDrawer.darkMode') }}</ADivider>
+</template>
+
+<style scoped></style>

src/layouts/modules/theme-drawer/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
+import DarkMode from './components/dark-mode.vue';
 
 defineOptions({
   name: 'ThemeDrawer'
@@ -17,8 +18,9 @@ const appStore = useAppStore();
     @close="appStore.closeThemeDrawer"
   >
     <template #extra>
-      <AButton @click="appStore.closeThemeDrawer">{{ $t('common.cancel') }}</AButton>
+      <AButton v-if="appStore.isMobile" @click="appStore.closeThemeDrawer">{{ $t('common.cancel') }}</AButton>
     </template>
+    <DarkMode />
   </ADrawer>
 </template>
 

src/locales/lang/en.ts

@@ -21,8 +21,16 @@ const local: App.I18n.Schema = {
     logout: 'Logout',
     logoutConfirm: 'Are you sure you want to log out?'
   },
+  theme: {
+    themeSchema: {
+      light: 'Light',
+      dark: 'Dark',
+      auto: 'Follow System'
+    }
+  },
   themeDrawer: {
-    title: 'Theme Configuration'
+    title: 'Theme Configuration',
+    darkMode: 'Dark Mode'
   },
   route: {
     login: 'Login',

src/locales/lang/zh-CN.ts

@@ -21,8 +21,16 @@ const local: App.I18n.Schema = {
     logout: '退出登录',
     logoutConfirm: '确认退出登录吗？'
   },
+  theme: {
+    themeSchema: {
+      light: '亮色模式',
+      dark: '暗黑模式',
+      auto: '跟随系统'
+    }
+  },
   themeDrawer: {
-    title: '主题配置'
+    title: '主题配置',
+    darkMode: '深色模式'
   },
   route: {
     login: '登录',

src/store/modules/theme/index.ts

@@ -20,37 +20,37 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings(themeTokens.colors));
 
   /**
-   * set color scheme
-   * @param colorScheme
+   * set theme scheme
+   * @param themeScheme
    */
-  function setColorScheme(colorScheme: App.Theme.ColorScheme) {
-    settings.value.colorScheme = colorScheme;
+  function setThemeScheme(themeScheme: UnionKey.ThemeScheme) {
+    settings.value.themeScheme = themeScheme;
   }
 
   /**
-   * toggle color scheme
+   * toggle theme scheme
    */
-  function toggleColorScheme() {
-    const colorSchemes: App.Theme.ColorScheme[] = ['light', 'dark', 'auto'];
+  function toggleThemeScheme() {
+    const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
 
-    const index = colorSchemes.findIndex(item => item === settings.value.colorScheme);
+    const index = themeSchemes.findIndex(item => item === settings.value.themeScheme);
 
-    const nextIndex = index === colorSchemes.length - 1 ? 0 : index + 1;
+    const nextIndex = index === themeSchemes.length - 1 ? 0 : index + 1;
 
-    const nextColorScheme = colorSchemes[nextIndex];
+    const nextThemeScheme = themeSchemes[nextIndex];
 
-    setColorScheme(nextColorScheme);
+    setThemeScheme(nextThemeScheme);
   }
 
   /**
    * dark mode
    */
   const darkMode = computed(() => {
-    if (settings.value.colorScheme === 'auto') {
+    if (settings.value.themeScheme === 'auto') {
       return osTheme.value === 'dark';
     }
 
-    return settings.value.colorScheme === 'dark';
+    return settings.value.themeScheme === 'dark';
   });
 
   /**
@@ -87,8 +87,8 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   return {
     ...toRefs(settings.value),
     darkMode,
-    setColorScheme,
-    toggleColorScheme,
+    setThemeScheme,
+    toggleThemeScheme,
     antdTheme
   };
 });

src/store/modules/theme/shared.ts

@@ -14,7 +14,7 @@ export function initThemeSettings(colors: App.Theme.ThemeTokenColor) {
   const { primary: themeColor, info, success, warning, error } = colors;
 
   const themeSettings: App.Theme.ThemeSetting = {
-    colorScheme: 'light',
+    themeScheme: 'light',
     themeColor,
     otherColor: {
       info,

src/typings/app.d.ts

@@ -8,19 +8,14 @@ declare namespace App {
   namespace Theme {
     type ColorPaletteNumber = import('@sa/color-palette').ColorPaletteNumber;
 
-    /**
-     * color scheme
-     */
-    type ColorScheme = 'light' | 'dark' | 'auto';
-
     /**
      * theme setting
      */
     interface ThemeSetting {
       /**
-       * color scheme
+       * theme scheme
        */
-      colorScheme: ColorScheme;
+      themeScheme: UnionKey.ThemeScheme;
       /**
        * theme color
        */
@@ -228,8 +223,12 @@ declare namespace App {
         logout: string;
         logoutConfirm: string;
       };
+      theme: {
+        themeSchema: Record<UnionKey.ThemeScheme, string>;
+      };
       themeDrawer: {
         title: string;
+        darkMode: string;
       };
       route: Record<I18nRouteKey, string>;
       page: {

src/typings/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']

src/typings/union-key.d.ts

@@ -2,11 +2,6 @@
  * the union key namespace
  */
 declare namespace UnionKey {
-  /**
-   * the content-type of http request header
-   */
-  type ContentType = 'application/json' | 'application/x-www-form-urlencoded' | 'multipart/form-data';
-
   /**
    * the login module
    * - pwd-login: password login
@@ -17,6 +12,11 @@ declare namespace UnionKey {
    */
   type LoginModule = 'pwd-login' | 'code-login' | 'register' | 'reset-pwd' | 'bind-wechat';
 
+  /**
+   * theme scheme
+   */
+  type ThemeScheme = 'light' | 'dark' | 'auto';
+
   /**
    * the layout mode
    * - vertical: the vertical menu in left

src/utils/common.ts

@@ -1,5 +1,21 @@
-export function transformObjectToOption<T extends object>(obj: T) {
-  return Object.entries(obj).map(([value, label]) => ({
+/**
+ * transform record to option
+ * @param record
+ * @example
+ * ```ts
+ * const record = {
+ *   key1: 'label1',
+ *   key2: 'label2'
+ * };
+ * const options = transformRecordToOption(record);
+ * // [
+ * //   { value: 'key1', label: 'label1' },
+ * //   { value: 'key2', label: 'label2' }
+ * // ]
+ * ```
+ */
+export function transformRecordToOption<T extends Record<string, string>>(record: T) {
+  return Object.entries(record).map(([value, label]) => ({
     value,
     label
   })) as Common.Option<keyof T>[];

src/views/_builtin/login/components/pwd-login.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
-import { loginModuleLabels } from '@/constants/app';
+import { loginModuleRecord } from '@/constants/app';
 import { useRouterPush } from '@/hooks/common/router';
 import { reactive } from 'vue';
 import { useAntdForm, useFormRules } from '@/hooks/common/form';
@@ -58,11 +58,11 @@ async function handleSubmit() {
       </AButton>
       <div class="flex-y-center justify-between">
         <AButton class="flex-1" block @click="toggleLoginModule('code-login')">
-          {{ $t(loginModuleLabels['code-login']) }}
+          {{ $t(loginModuleRecord['code-login']) }}
         </AButton>
         <div class="w-12px"></div>
         <AButton class="flex-1" block @click="toggleLoginModule('register')">
-          {{ $t(loginModuleLabels.register) }}
+          {{ $t(loginModuleRecord.register) }}
         </AButton>
       </div>
     </ASpace>

src/views/_builtin/login/index.vue

@@ -5,7 +5,7 @@ import { getColorPalette, mixColor } from '@sa/utils';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { loginModuleLabels } from '@/constants/app';
+import { loginModuleRecord } from '@/constants/app';
 import PwdLogin from './components/pwd-login.vue';
 import CodeLogin from './components/code-login.vue';
 import Register from './components/register.vue';
@@ -33,11 +33,11 @@ interface LoginModule {
 }
 
 const modules: LoginModule[] = [
-  { key: 'pwd-login', label: loginModuleLabels['pwd-login'], component: PwdLogin },
-  { key: 'code-login', label: loginModuleLabels['code-login'], component: CodeLogin },
-  { key: 'register', label: loginModuleLabels.register, component: Register },
-  { key: 'reset-pwd', label: loginModuleLabels['reset-pwd'], component: ResetPwd },
-  { key: 'bind-wechat', label: loginModuleLabels['bind-wechat'], component: BindWechat }
+  { key: 'pwd-login', label: loginModuleRecord['pwd-login'], component: PwdLogin },
+  { key: 'code-login', label: loginModuleRecord['code-login'], component: CodeLogin },
+  { key: 'register', label: loginModuleRecord.register, component: Register },
+  { key: 'reset-pwd', label: loginModuleRecord['reset-pwd'], component: ResetPwd },
+  { key: 'bind-wechat', label: loginModuleRecord['bind-wechat'], component: BindWechat }
 ];
 
 const activeModule = computed(() => {
@@ -70,10 +70,10 @@ const transitionName: UnionKey.ThemeAnimateMode = 'slide-in-left';
           <h3 class="text-28px font-500 text-primary <sm:text-22px">{{ $t('system.title') }}</h3>
           <div class="i-flex-vertical">
             <ColorSchemaSwitch
-              :color-schema="themeStore.colorScheme"
+              :theme-schema="themeStore.themeScheme"
               :is-dark="themeStore.darkMode"
               class="text-20px <sm:text-18px"
-              @switch="themeStore.toggleColorScheme"
+              @switch="themeStore.toggleThemeScheme"
             />
             <LangSwitch
               :lang="appStore.locale"