From fb744dbab7950eec529f472bb1a63663bdfd9787 Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Thu, 27 Nov 2025 12:24:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=B8=AD=E7=9A=84=E2=80=9C=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E2=80=9D=E6=9B=B4=E5=90=8D=E4=B8=BA=E2=80=9C?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A8=A1=E5=BC=8F=E2=80=9D=EF=BC=8C=E2=80=9C?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A8=A1=E5=BC=8F=E2=80=9D=E6=9B=B4=E5=90=8D?=
 =?UTF-8?q?=E4=B8=BA=E2=80=9C=E8=8F=9C=E5=8D=95=E5=B8=83=E5=B1=80=E2=80=9D?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E6=8F=90=E5=8D=87=E5=91=BD=E5=90=8D=E7=9A=84?=
 =?UTF-8?q?=E4=B8=93=E4=B8=9A=E6=80=A7=E4=B8=8E=E6=B8=85=E6=99=B0=E5=BA=A6?=
 =?UTF-8?q?=20(#1247)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.zh_CN.md                          | 12 +++---
 locales/en.yaml                             | 16 ++++----
 locales/zh-CN.yaml                          | 16 ++++----
 public/platform-config.json                 |  2 +-
 src/layout/components/lay-setting/index.vue | 42 ++++++++++-----------
 src/layout/hooks/useDataThemeChange.ts      | 12 +++---
 src/layout/hooks/useLayout.ts               |  2 +-
 src/layout/index.vue                        | 10 ++---
 src/store/modules/app.ts                    |  2 +-
 src/store/modules/epTheme.ts                |  2 +-
 src/utils/responsive.ts                     |  4 +-
 src/views/account-settings/index.vue        |  2 +-
 src/views/login/index.vue                   |  4 +-
 types/global.d.ts                           |  6 +--
 14 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 93cfdb168..3e0d5f4dc 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -2,7 +2,7 @@
 
 ### 🎫 Feat
 
--  添加全屏`403`、`404`、`500`页面，全屏错误页面清晰且安全，提升用户体验
+- 添加全屏`403`、`404`、`500`页面，全屏错误页面清晰且安全，提升用户体验
 
 ### 🐞 Bug fixes
 
@@ -26,7 +26,7 @@
 
 ### 🐞 Bug fixes
 
-- 修复`ReSegmented`分段控制器组件在浅色和深色整体风格切换时的闪烁问题
+- 修复`ReSegmented`分段控制器组件在浅色和深色主题模式切换时的闪烁问题
 - 修复`resetRouter`未清空全部路由数据问题
 - 修复标签页-关闭左侧标签页关闭异常问题
 
@@ -231,8 +231,8 @@
 
 - 修复`windwos`下点击注册页面会出现滚动条问题
 - 修复`windows`下页面切换，内容区会出现滚动条问题
-- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
-- 修复系统配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+- 修复`pure-table`带状态表格在深色主题模式下状态样式消失的问题
+- 修复系统配置中开启灰色模式和深色主题模式，刷新页面主题模式异常
 
 ### 🍏 Perf
 
@@ -285,7 +285,7 @@
 - 内嵌`iframe`页支持设置`keepAlive`，保持页面状态
 - 优化导航，弹出的菜单超出内容区自适应且可滚动
 - 添加文件上传示例
-- 添加整体风格自适应操作系统浅色、深色、自动主题功能
+- 添加主题模式自适应操作系统浅色、深色、自动主题功能
 - 添加页脚
 - 支持多标签页打开已经登录的系统后无需再登录并添加内免登录功能（用户可选择免登录的天数）
 - 带来高级感的终端命令行
@@ -485,7 +485,7 @@
 - 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题
 - 修复按 `ESC` 退出全屏后，工具栏按钮文案展示问题
 - 修复移动端通知栏 `tooltip` 点击穿透问题
-- 修复当左侧菜单收起后，切换到 `horizontal` 导航模式时文字不展示的问题
+- 修复当左侧菜单收起后，切换到 `horizontal` 菜单布局时文字不展示的问题
 - 修复导航 `tab` 关闭其他标签页无法重置状态问题
 - 修复 `getHistoryMode` 函数中环境变量未初始化带来的页面热更新报错
 - 修复导航 `tab` 过多导致关闭左侧标签页无法正常显示
diff --git a/locales/en.yaml b/locales/en.yaml
index 86b712a23..1b38890a1 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -31,15 +31,15 @@ panel:
   pureCloseSystemSet: Close System Configs
   pureClearCacheAndToLogin: Clear cache and return to login page
   pureClearCache: Clear Cache
-  pureOverallStyle: Overall Style
-  pureOverallStyleLight: Light
-  pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
-  pureOverallStyleDark: Dark
-  pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
-  pureOverallStyleSystem: Auto
-  pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
+  pureThemeMode: Theme Mode
+  pureThemeModeLight: Light
+  pureThemeModeLightTip: Set sail freshly and light up the comfortable work interface
+  pureThemeModeDark: Dark
+  pureThemeModeDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
+  pureThemeModeSystem: Auto
+  pureThemeModeSystemTip: Synchronize time, the interface naturally responds to morning and dusk
   pureThemeColor: Theme Color
-  pureLayoutModel: Layout Model
+  pureMenuLayout: Menu Layout
   pureVerticalTip: The menu on the left is familiar and friendly
   pureHorizontalTip: Top menu, concise overview
   pureMixTip: Mixed menu, flexible
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index f03d21b58..48fb0ec6c 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -31,15 +31,15 @@ panel:
   pureCloseSystemSet: 关闭配置
   pureClearCacheAndToLogin: 清空缓存并返回登录页
   pureClearCache: 清空缓存
-  pureOverallStyle: 整体风格
-  pureOverallStyleLight: 浅色
-  pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
-  pureOverallStyleDark: 深色
-  pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
-  pureOverallStyleSystem: 自动
-  pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
+  pureThemeMode: 主题模式
+  pureThemeModeLight: 浅色
+  pureThemeModeLightTip: 清新启航，点亮舒适的工作界面
+  pureThemeModeDark: 深色
+  pureThemeModeDarkTip: 月光序曲，沉醉于夜的静谧雅致
+  pureThemeModeSystem: 自动
+  pureThemeModeSystemTip: 同步时光，界面随晨昏自然呼应
   pureThemeColor: 主题色
-  pureLayoutModel: 导航模式
+  pureMenuLayout: 菜单布局
   pureVerticalTip: 左侧菜单，亲切熟悉
   pureHorizontalTip: 顶部菜单，简洁概览
   pureMixTip: 混合菜单，灵活多变
diff --git a/public/platform-config.json b/public/platform-config.json
index 0e153f612..fade967c9 100644
--- a/public/platform-config.json
+++ b/public/platform-config.json
@@ -9,7 +9,7 @@
   "Layout": "vertical",
   "Theme": "light",
   "DarkMode": false,
-  "OverallStyle": "light",
+  "ThemeMode": "light",
   "Grey": false,
   "Weak": false,
   "HideTabs": false,
diff --git a/src/layout/components/lay-setting/index.vue b/src/layout/components/lay-setting/index.vue
index db8dbae9f..0ae2b2a2b 100644
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -37,7 +37,7 @@ const horizontalRef = ref();
 
 const {
   dataTheme,
-  overallStyle,
+  themeMode,
   layoutTheme,
   themeColors,
   toggleClass,
@@ -50,7 +50,7 @@ if (unref(layoutTheme)) {
   const layout = unref(layoutTheme).layout;
   const theme = unref(layoutTheme).theme;
   document.documentElement.setAttribute("data-theme", theme);
-  setLayoutModel(layout);
+  setMenuLayout(layout);
 }
 
 /** 默认灵动模式 */
@@ -195,24 +195,24 @@ const pClass = computed(() => {
 const themeOptions = computed<Array<OptionsType>>(() => {
   return [
     {
-      label: t("panel.pureOverallStyleLight"),
+      label: t("panel.pureThemeModeLight"),
       icon: DayIcon,
       theme: "light",
-      tip: t("panel.pureOverallStyleLightTip"),
+      tip: t("panel.pureThemeModeLightTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     },
     {
-      label: t("panel.pureOverallStyleDark"),
+      label: t("panel.pureThemeModeDark"),
       icon: DarkIcon,
       theme: "dark",
-      tip: t("panel.pureOverallStyleDarkTip"),
+      tip: t("panel.pureThemeModeDarkTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     },
     {
-      label: t("panel.pureOverallStyleSystem"),
+      label: t("panel.pureThemeModeSystem"),
       icon: SystemIcon,
       theme: "system",
-      tip: t("panel.pureOverallStyleSystemTip"),
+      tip: t("panel.pureThemeModeSystemTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     }
   ];
@@ -238,8 +238,8 @@ const markOptions = computed<Array<OptionsType>>(() => {
   ];
 });
 
-/** 设置导航模式 */
-function setLayoutModel(layout: string) {
+/** 设置菜单布局 */
+function setMenuLayout(layout: string) {
   layoutTheme.value.layout = layout;
   window.document.body.setAttribute("layout", layout);
   $storage.layout = {
@@ -249,7 +249,7 @@ function setLayoutModel(layout: string) {
     sidebarStatus: $storage.layout?.sidebarStatus,
     epThemeColor: $storage.layout?.epThemeColor,
     themeColor: $storage.layout?.themeColor,
-    overallStyle: $storage.layout?.overallStyle
+    themeMode: $storage.layout?.themeMode
   };
   useAppStoreHook().setLayout(layout);
 }
@@ -276,15 +276,15 @@ watch($storage, ({ layout }) => {
 
 const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
 
-/** 根据操作系统主题设置平台整体风格 */
+/** 根据操作系统主题设置平台主题模式 */
 function updateTheme() {
-  if (overallStyle.value !== "system") return;
+  if (themeMode.value !== "system") return;
   if (mediaQueryList.matches) {
     dataTheme.value = true;
   } else {
     dataTheme.value = false;
   }
-  dataThemeChange(overallStyle.value);
+  dataThemeChange(themeMode.value);
 }
 
 function removeMatchMedia() {
@@ -317,18 +317,18 @@ onUnmounted(() => removeMatchMedia);
 <template>
   <LayPanel>
     <div class="p-5">
-      <p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
+      <p :class="pClass">{{ t("panel.pureThemeMode") }}</p>
       <Segmented
         resize
         class="select-none"
-        :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :modelValue="themeMode === 'system' ? 2 : dataTheme ? 1 : 0"
         :options="themeOptions"
         @change="
           theme => {
             theme.index === 1 && theme.index !== 2
               ? (dataTheme = true)
               : (dataTheme = false);
-            overallStyle = theme.option.theme;
+            themeMode = theme.option.theme;
             dataThemeChange(theme.option.theme);
             theme.index === 2 && watchSystemThemeChange();
           }
@@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
+      <p :class="['mt-5!', pClass]">{{ t("panel.pureMenuLayout") }}</p>
       <ul class="pure-theme">
         <li
           ref="verticalRef"
@@ -363,7 +363,7 @@ onUnmounted(() => removeMatchMedia);
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
-          @click="setLayoutModel('vertical')"
+          @click="setMenuLayout('vertical')"
         >
           <div />
           <div />
@@ -376,7 +376,7 @@ onUnmounted(() => removeMatchMedia);
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
-          @click="setLayoutModel('horizontal')"
+          @click="setMenuLayout('horizontal')"
         >
           <div />
           <div />
@@ -389,7 +389,7 @@ onUnmounted(() => removeMatchMedia);
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
-          @click="setLayoutModel('mix')"
+          @click="setMenuLayout('mix')"
         >
           <div />
           <div />
diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts
index 4b08dff1f..3c260ce42 100644
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -33,7 +33,7 @@ export function useDataThemeChange() {
 
   const { $storage } = useGlobal<GlobalPropertiesApi>();
   const dataTheme = ref<boolean>($storage?.layout?.darkMode);
-  const overallStyle = ref<string>($storage?.layout?.overallStyle);
+  const themeMode = ref<string>($storage?.layout?.themeMode);
   const body = document.documentElement as HTMLElement;
 
   function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
@@ -59,7 +59,7 @@ export function useDataThemeChange() {
       sidebarStatus: $storage.layout?.sidebarStatus,
       epThemeColor: $storage.layout?.epThemeColor,
       themeColor: isClick ? theme : storageThemeColor,
-      overallStyle: overallStyle.value
+      themeMode: themeMode.value
     };
 
     if (theme === "default" || theme === "light") {
@@ -89,9 +89,9 @@ export function useDataThemeChange() {
     }
   };
 
-  /** 浅色、深色整体风格切换 */
-  function dataThemeChange(overall?: string) {
-    overallStyle.value = overall;
+  /** 浅色、深色主题模式切换 */
+  function dataThemeChange(mode?: string) {
+    themeMode.value = mode;
     if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
       setLayoutThemeColor("default", false);
     } else {
@@ -126,7 +126,7 @@ export function useDataThemeChange() {
   return {
     body,
     dataTheme,
-    overallStyle,
+    themeMode,
     layoutTheme,
     themeColors,
     onReset,
diff --git a/src/layout/hooks/useLayout.ts b/src/layout/hooks/useLayout.ts
index 5fb0235d4..cd65de040 100644
--- a/src/layout/hooks/useLayout.ts
+++ b/src/layout/hooks/useLayout.ts
@@ -29,7 +29,7 @@ export function useLayout() {
         sidebarStatus: $config?.SidebarStatus ?? true,
         epThemeColor: $config?.EpThemeColor ?? "#409EFF",
         themeColor: $config?.Theme ?? "light",
-        overallStyle: $config?.OverallStyle ?? "light"
+        themeMode: $config?.ThemeMode ?? "light"
       };
     }
     /** 灰色模式、色弱模式、隐藏标签页 */
diff --git a/src/layout/index.vue b/src/layout/index.vue
index edbe1e324..897df164b 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -67,16 +67,16 @@ const set: setType = reactive({
   })
 });
 
-function setTheme(layoutModel: string) {
-  window.document.body.setAttribute("layout", layoutModel);
+function setTheme(menuLayout: string) {
+  window.document.body.setAttribute("layout", menuLayout);
   $storage.layout = {
-    layout: `${layoutModel}`,
+    layout: `${menuLayout}`,
     theme: $storage.layout?.theme,
     darkMode: $storage.layout?.darkMode,
     sidebarStatus: $storage.layout?.sidebarStatus,
     epThemeColor: $storage.layout?.epThemeColor,
     themeColor: $storage.layout?.themeColor,
-    overallStyle: $storage.layout?.overallStyle
+    themeMode: $storage.layout?.themeMode
   };
 }
 
@@ -123,7 +123,7 @@ onMounted(() => {
 });
 
 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+  useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
 });
 
 const LayHeader = defineComponent({
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index c9284dac0..59437cb8a 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -18,7 +18,7 @@ export const useAppStore = defineStore("pure-app", {
       withoutAnimation: false,
       isClickCollapse: false
     },
-    // 这里的layout用于监听容器拖拉后恢复对应的导航模式
+    // 这里的layout用于监听容器拖拉后恢复对应的菜单布局
     layout:
       storageLocal().getItem<StorageConfigs>(
         `${responsiveStorageNameSpace()}layout`
diff --git a/src/store/modules/epTheme.ts b/src/store/modules/epTheme.ts
index e6f62d203..264401f84 100644
--- a/src/store/modules/epTheme.ts
+++ b/src/store/modules/epTheme.ts
@@ -21,7 +21,7 @@ export const useEpThemeStore = defineStore("pure-epTheme", {
     getEpThemeColor(state) {
       return state.epThemeColor;
     },
-    /** 用于mix导航模式下hamburger-svg的fill属性 */
+    /** 用于mix菜单布局下hamburger-svg的fill属性 */
     fill(state) {
       if (state.epTheme === "light") {
         return "#409eff";
diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts
index 28f1bcfcf..8cc317dda 100644
--- a/src/utils/responsive.ts
+++ b/src/utils/responsive.ts
@@ -19,8 +19,8 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
         darkMode: config.DarkMode ?? false,
         sidebarStatus: config.SidebarStatus ?? true,
         epThemeColor: config.EpThemeColor ?? "#409EFF",
-        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
-        overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
+        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色主题模式切换的影响，只会在手动点击主题色时改变）
+        themeMode: config.ThemeMode ?? "light" // 主题模式（浅色：light、深色：dark、自动：system）
       },
       // 系统配置-界面显示
       configure: Storage.getData("configure", nameSpace) ?? {
diff --git a/src/views/account-settings/index.vue b/src/views/account-settings/index.vue
index e12478a87..0e507c79d 100644
--- a/src/views/account-settings/index.vue
+++ b/src/views/account-settings/index.vue
@@ -25,7 +25,7 @@ const router = useRouter();
 const isOpen = ref(deviceDetection() ? false : true);
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+  useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
 });
 
 const userInfo = ref({
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index e76d446ae..eaa0809f7 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -52,8 +52,8 @@ const currentPage = computed(() => {
 const { t } = useI18n();
 const { initStorage } = useLayout();
 initStorage();
-const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
-dataThemeChange(overallStyle.value);
+const { dataTheme, themeMode, dataThemeChange } = useDataThemeChange();
+dataThemeChange(themeMode.value);
 const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
diff --git a/types/global.d.ts b/types/global.d.ts
index d3baa9f5b..fbd0dad32 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -93,7 +93,7 @@ declare global {
     Layout?: string;
     Theme?: string;
     DarkMode?: boolean;
-    OverallStyle?: string;
+    ThemeMode?: string;
     Grey?: boolean;
     Weak?: boolean;
     HideTabs?: boolean;
@@ -140,7 +140,7 @@ declare global {
     sidebarStatus?: boolean;
     epThemeColor?: string;
     themeColor?: string;
-    overallStyle?: string;
+    themeMode?: string;
     showLogo?: boolean;
     showModel?: string;
     menuSearchHistory?: number;
@@ -169,7 +169,7 @@ declare global {
       sidebarStatus?: boolean;
       epThemeColor?: string;
       themeColor?: string;
-      overallStyle?: string;
+      themeMode?: string;
     };
     configure: {
       grey?: boolean;