perf: 优化中英文翻译与切换

packages/ui/certd-client/src/vben/preferences/config.ts

@@ -108,7 +108,7 @@ const defaultPreferences: Preferences = {
   widget: {
     fullscreen: true,
     globalSearch: true,
-    languageToggle: false,
+    languageToggle: true,
     lockScreen: true,
     notification: false,
     refresh: true,

packages/ui/certd-client/src/vben/preferences/index.ts

@@ -1,35 +1,23 @@
-import type { Preferences } from './types';
+import type { Preferences } from "./types";
 
-import { preferencesManager } from './preferences';
+import { preferencesManager } from "./preferences";
 
 // 偏好设置（带有层级关系）
-const preferences: Preferences =
-  preferencesManager.getPreferences.apply(preferencesManager);
+const preferences: Preferences = preferencesManager.getPreferences.apply(preferencesManager);
 
 // 更新偏好设置
-const updatePreferences =
-  preferencesManager.updatePreferences.bind(preferencesManager);
+const updatePreferences = preferencesManager.updatePreferences.bind(preferencesManager);
 
 // 重置偏好设置
-const resetPreferences =
-  preferencesManager.resetPreferences.bind(preferencesManager);
+const resetPreferences = preferencesManager.resetPreferences.bind(preferencesManager);
 
-const clearPreferencesCache =
-  preferencesManager.clearCache.bind(preferencesManager);
+const clearPreferencesCache = preferencesManager.clearCache.bind(preferencesManager);
 
 // 初始化偏好设置
-const initPreferences =
-  preferencesManager.initPreferences.bind(preferencesManager);
+const initPreferences = preferencesManager.initPreferences.bind(preferencesManager);
 
-export {
-  clearPreferencesCache,
-  initPreferences,
-  preferences,
-  preferencesManager,
-  resetPreferences,
-  updatePreferences,
-};
+export { clearPreferencesCache, initPreferences, preferences, preferencesManager, resetPreferences, updatePreferences };
 
-export * from './constants';
-export type * from './types';
-export * from './use-preferences';
+export * from "./constants";
+export type * from "./types";
+export * from "./use-preferences";

packages/ui/certd-client/src/vben/preferences/preferences.ts

@@ -1,22 +1,18 @@
-import type { DeepPartial } from '/@/vben/typings';
+import type { DeepPartial } from "/@/vben/typings";
 
-import type { InitialOptions, Preferences } from './types';
+import type { InitialOptions, Preferences } from "./types";
 
-import { markRaw, reactive, readonly, watch } from 'vue';
+import { markRaw, reactive, readonly, watch } from "vue";
 
-import { StorageManager } from '/@/vben/shared/cache';
-import { isMacOs, merge } from '/@/vben/shared/utils';
+import { StorageManager } from "/@/vben/shared/cache";
+import { isMacOs, merge } from "/@/vben/shared/utils";
 
-import {
-  breakpointsTailwind,
-  useBreakpoints,
-  useDebounceFn,
-} from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints, useDebounceFn } from "@vueuse/core";
 
-import { defaultPreferences } from './config';
-import { updateCSSVariables } from './update-css-variables';
+import { defaultPreferences } from "./config";
+import { updateCSSVariables } from "./update-css-variables";
 
-const STORAGE_KEY = 'preferences';
+const STORAGE_KEY = "preferences";
 const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
 const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
 
@@ -33,14 +29,11 @@ class PreferenceManager {
     this.cache = new StorageManager();
 
     // 避免频繁的操作缓存
-    this.savePreferences = useDebounceFn(
-      (preference: Preferences) => this._savePreferences(preference),
-      150,
-    );
+    this.savePreferences = useDebounceFn((preference: Preferences) => this._savePreferences(preference), 150);
   }
 
   clearCache() {
-    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
+    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach(key => {
       this.cache?.removeItem(key);
     });
   }
@@ -73,7 +66,7 @@ class PreferenceManager {
       {},
       // overrides,
       this.loadCachedPreferences() || {},
-      this.initialPreferences,
+      this.initialPreferences
     );
 
     // 更新偏好设置
@@ -103,7 +96,7 @@ class PreferenceManager {
     // 保存重置后的偏好设置
     this.savePreferences(this.state);
     // 从存储中移除偏好设置项
-    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
+    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach(key => {
       this.cache?.removeItem(key);
     });
     this.updatePreferences(this.state);
@@ -145,17 +138,14 @@ class PreferenceManager {
       updateCSSVariables(this.state);
     }
 
-    if (
-      Reflect.has(appUpdates, 'colorGrayMode') ||
-      Reflect.has(appUpdates, 'colorWeakMode')
-    ) {
+    if (Reflect.has(appUpdates, "colorGrayMode") || Reflect.has(appUpdates, "colorWeakMode")) {
       this.updateColorMode(this.state);
     }
   }
 
   private initPlatform() {
     const dom = document.documentElement;
-    dom.dataset.platform = isMacOs() ? 'macOs' : 'window';
+    dom.dataset.platform = isMacOs() ? "macOs" : "window";
   }
 
   /**
@@ -183,25 +173,23 @@ class PreferenceManager {
 
     // 监听断点，判断是否移动端
     const breakpoints = useBreakpoints(breakpointsTailwind);
-    const isMobile = breakpoints.smaller('md');
+    const isMobile = breakpoints.smaller("md");
     watch(
       () => isMobile.value,
-      (val) => {
+      val => {
         this.updatePreferences({
           app: { isMobile: val },
         });
       },
-      { immediate: true },
+      { immediate: true }
     );
 
     // 监听系统主题偏好设置变化
-    window
-      .matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', ({ matches: isDark }) => {
-        this.updatePreferences({
-          theme: { mode: isDark ? 'dark' : 'light' },
-        });
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
+      this.updatePreferences({
+        theme: { mode: isDark ? "dark" : "light" },
       });
+    });
   }
 
   /**
@@ -212,14 +200,10 @@ class PreferenceManager {
     if (preference.app) {
       const { colorGrayMode, colorWeakMode } = preference.app;
       const dom = document.documentElement;
-      const COLOR_WEAK = 'invert-mode';
-      const COLOR_GRAY = 'grayscale-mode';
-      colorWeakMode
-        ? dom.classList.add(COLOR_WEAK)
-        : dom.classList.remove(COLOR_WEAK);
-      colorGrayMode
-        ? dom.classList.add(COLOR_GRAY)
-        : dom.classList.remove(COLOR_GRAY);
+      const COLOR_WEAK = "invert-mode";
+      const COLOR_GRAY = "grayscale-mode";
+      colorWeakMode ? dom.classList.add(COLOR_WEAK) : dom.classList.remove(COLOR_WEAK);
+      colorGrayMode ? dom.classList.add(COLOR_GRAY) : dom.classList.remove(COLOR_GRAY);
     }
   }
 }

packages/ui/certd-client/src/vben/preferences/update-css-variables.ts

@@ -1,9 +1,9 @@
-import type { Preferences } from './types';
+import type { Preferences } from "./types";
 
-import { generatorColorVariables } from '/@/vben/shared/color';
-import { updateCSSVariables as executeUpdateCSSVariables } from '/@/vben/shared/utils';
+import { generatorColorVariables } from "/@/vben/shared/color";
+import { updateCSSVariables as executeUpdateCSSVariables } from "/@/vben/shared/utils";
 
-import { BUILT_IN_THEME_PRESETS } from './constants';
+import { BUILT_IN_THEME_PRESETS } from "./constants";
 
 /**
  * 更新主题的 CSS 变量以及其他 CSS 变量
@@ -21,13 +21,13 @@ function updateCSSVariables(preferences: Preferences) {
   const { builtinType, mode, radius } = theme;
 
   // html 设置 dark 类
-  if (Reflect.has(theme, 'mode')) {
+  if (Reflect.has(theme, "mode")) {
     const dark = isDarkTheme(mode);
-    root.classList.toggle('dark', dark);
+    root.classList.toggle("dark", dark);
   }
 
   // html 设置 data-theme=[builtinType]
-  if (Reflect.has(theme, 'builtinType')) {
+  if (Reflect.has(theme, "builtinType")) {
     const rootTheme = root.dataset.theme;
     if (rootTheme !== builtinType) {
       root.dataset.theme = builtinType;
@@ -35,36 +35,26 @@ function updateCSSVariables(preferences: Preferences) {
   }
 
   // 获取当前的内置主题
-  const currentBuiltType = [...BUILT_IN_THEME_PRESETS].find(
-    (item) => item.type === builtinType,
-  );
+  const currentBuiltType = [...BUILT_IN_THEME_PRESETS].find(item => item.type === builtinType);
 
-  let builtinTypeColorPrimary: string | undefined = '';
+  let builtinTypeColorPrimary: string | undefined = "";
 
   if (currentBuiltType) {
     const isDark = isDarkTheme(preferences.theme.mode);
     // 设置不同主题的主要颜色
-    const color = isDark
-      ? currentBuiltType.darkPrimaryColor || currentBuiltType.primaryColor
-      : currentBuiltType.primaryColor;
+    const color = isDark ? currentBuiltType.darkPrimaryColor || currentBuiltType.primaryColor : currentBuiltType.primaryColor;
     builtinTypeColorPrimary = color || currentBuiltType.color;
   }
 
   // 如果内置主题颜色和自定义颜色都不存在，则不更新主题颜色
-  if (
-    builtinTypeColorPrimary ||
-    Reflect.has(theme, 'colorPrimary') ||
-    Reflect.has(theme, 'colorDestructive') ||
-    Reflect.has(theme, 'colorSuccess') ||
-    Reflect.has(theme, 'colorWarning')
-  ) {
+  if (builtinTypeColorPrimary || Reflect.has(theme, "colorPrimary") || Reflect.has(theme, "colorDestructive") || Reflect.has(theme, "colorSuccess") || Reflect.has(theme, "colorWarning")) {
     // preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary;
     updateMainColorVariables(preferences);
   }
 
   // 更新圆角
-  if (Reflect.has(theme, 'radius')) {
-    document.documentElement.style.setProperty('--radius', `${radius}rem`);
+  if (Reflect.has(theme, "radius")) {
+    document.documentElement.style.setProperty("--radius", `${radius}rem`);
   }
 }
 
@@ -76,22 +66,21 @@ function updateMainColorVariables(preference: Preferences) {
   if (!preference.theme) {
     return;
   }
-  const { colorDestructive, colorPrimary, colorSuccess, colorWarning } =
-    preference.theme;
+  const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = preference.theme;
 
   const colorVariables = generatorColorVariables([
-    { color: colorPrimary, name: 'primary' },
-    { alias: 'warning', color: colorWarning, name: 'yellow' },
-    { alias: 'success', color: colorSuccess, name: 'green' },
-    { alias: 'destructive', color: colorDestructive, name: 'red' },
+    { color: colorPrimary, name: "primary" },
+    { alias: "warning", color: colorWarning, name: "yellow" },
+    { alias: "success", color: colorSuccess, name: "green" },
+    { alias: "destructive", color: colorDestructive, name: "red" },
   ]);
 
   // 要设置的 CSS 变量映射
   const colorMappings = {
-    '--green-500': '--success',
-    '--primary-500': '--primary',
-    '--red-500': '--destructive',
-    '--yellow-500': '--warning',
+    "--green-500": "--success",
+    "--primary-500": "--primary",
+    "--red-500": "--destructive",
+    "--yellow-500": "--warning",
   };
 
   // 统一处理颜色变量的更新
@@ -106,9 +95,9 @@ function updateMainColorVariables(preference: Preferences) {
 }
 
 function isDarkTheme(theme: string) {
-  let dark = theme === 'dark';
-  if (theme === 'auto') {
-    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  let dark = theme === "dark";
+  if (theme === "auto") {
+    dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
   return dark;
 }

packages/ui/certd-client/src/vben/preferences/use-preferences.ts

@@ -166,7 +166,7 @@ function usePreferences() {
     if (!enablePreferences) {
       return {
         fixed: false,
-        header: false
+        header: false,
       };
     }
 
@@ -182,7 +182,7 @@ function usePreferences() {
     if (preferencesButtonPosition !== "auto") {
       return {
         fixed: preferencesButtonPosition === "fixed",
-        header: isHeaderPosition
+        header: isHeaderPosition,
       };
     }
 
@@ -191,7 +191,7 @@ function usePreferences() {
 
     return {
       fixed,
-      header: !fixed
+      header: !fixed,
     };
   });
 
@@ -219,7 +219,7 @@ function usePreferences() {
     locale,
     preferencesButtonPosition,
     sidebarCollapsed,
-    theme
+    theme,
   };
 }