From 358e1297655039744bf675fbd9a62eb9f3c69e97 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 4 Aug 2025 18:15:18 +0800
Subject: [PATCH 1/6] feat(hooks): add scrollX computation for total table
 width in useNaiveTable

---
 src/hooks/common/table.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
index 0b36e00c..0c943f58 100644
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -38,6 +38,13 @@ export function useNaiveTable<ResponseData, ApiData>(options: UseNaiveTableOptio
     getColumns
   });
 
+  // calculate the total width of the table this is used for horizontal scrolling
+  const scrollX = computed(() => {
+    return result.columns.value.reduce((acc, column) => {
+      return acc + Number(column.width ?? column.minWidth ?? 120);
+    }, 0);
+  });
+
   scope.run(() => {
     watch(
       () => appStore.locale,
@@ -51,7 +58,10 @@ export function useNaiveTable<ResponseData, ApiData>(options: UseNaiveTableOptio
     scope.stop();
   });
 
-  return result;
+  return {
+    ...result,
+    scrollX
+  };
 }
 
 type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;

From be8f915a0cedbeefa37348bdb983b19395f3b38c Mon Sep 17 00:00:00 2001
From: Azir-11 <2075125282@qq.com>
Date: Tue, 12 Aug 2025 22:45:55 +0800
Subject: [PATCH 2/6] chore(other): update the ESLint validation configuration
 to support more file types.

---
 .vscode/settings.json | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2c70ecf9..ee081a60 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,7 +4,18 @@
     "source.organizeImports": "never"
   },
   "editor.formatOnSave": false,
-  "eslint.validate": ["html", "css", "scss", "json", "jsonc"],
+  "eslint.validate": [
+    "html",
+    "css",
+    "scss",
+    "json",
+    "jsonc",
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ],
   "i18n-ally.displayLanguage": "zh-cn",
   "i18n-ally.enabledParsers": ["ts"],
   "i18n-ally.enabledFrameworks": ["vue"],

From a55b4dc073f4f22327bc4f05895127fb9b3b4a2e Mon Sep 17 00:00:00 2001
From: Azir-11 <2075125282@qq.com>
Date: Tue, 12 Aug 2025 23:13:21 +0800
Subject: [PATCH 3/6] feat(components): add the IconTooltip component.

---
 src/components/common/icon-tooltip.vue | 42 ++++++++++++++++++++++++++
 src/typings/components.d.ts            |  2 ++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/common/icon-tooltip.vue

diff --git a/src/components/common/icon-tooltip.vue b/src/components/common/icon-tooltip.vue
new file mode 100644
index 00000000..d98db322
--- /dev/null
+++ b/src/components/common/icon-tooltip.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+import type { PopoverPlacement } from 'naive-ui';
+
+defineOptions({ name: 'IconTooltip' });
+
+interface Props {
+  icon?: string;
+  localIcon?: string;
+  desc?: string;
+  placement?: PopoverPlacement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'mdi-help-circle',
+  localIcon: '',
+  desc: '',
+  placement: 'top'
+});
+
+const slots = useSlots();
+const hasCustomTrigger = computed(() => Boolean(slots.trigger));
+
+if (!hasCustomTrigger.value && !props.icon && !props.localIcon) {
+  throw new Error('icon or localIcon is required when no custom trigger slot is provided');
+}
+</script>
+
+<template>
+  <NTooltip :placement="placement">
+    <template #trigger>
+      <slot name="trigger">
+        <div class="cursor-pointer">
+          <SvgIcon :icon="icon" :local-icon="localIcon" />
+        </div>
+      </slot>
+    </template>
+    <slot>
+      <span>{{ desc }}</span>
+    </slot>
+  </NTooltip>
+</template>
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 33b5526f..6662146a 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -25,6 +25,7 @@ declare module 'vue' {
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
     IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
+    IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
@@ -56,6 +57,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']

From 4005763c000fe7774e11dae3756f51fdc0a7a7a5 Mon Sep 17 00:00:00 2001
From: Azir-11 <2075125282@qq.com>
Date: Tue, 12 Aug 2025 23:36:41 +0800
Subject: [PATCH 4/6] feat(components): replace NTooltip with IconTooltip and
 optimize the layout of related components.

---
 .../components/layout-mode-card.vue           |  4 +-
 .../theme-drawer/components/setting-item.vue  |  2 +-
 .../appearance/modules/theme-color.vue        | 41 ++++++++++---------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
index 351bb942..e0563508 100644
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -80,7 +80,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
       class="flex-col-center cursor-pointer"
       @click="handleChangeMode(key)"
     >
-      <NTooltip :placement="item.placement">
+      <IconTooltip :placement="item.placement">
         <template #trigger>
           <div
             class="h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary"
@@ -92,7 +92,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
           </div>
         </template>
         {{ $t(`theme.layout.layoutMode.${key}_detail`) }}
-      </NTooltip>
+      </IconTooltip>
       <p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p>
     </div>
   </div>
diff --git a/src/layouts/modules/theme-drawer/components/setting-item.vue b/src/layouts/modules/theme-drawer/components/setting-item.vue
index ccd29bd2..07316a6d 100644
--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/src/layouts/modules/theme-drawer/components/setting-item.vue
@@ -13,7 +13,7 @@ defineProps<Props>();
 
 <template>
   <div class="w-full flex-y-center justify-between">
-    <div>
+    <div class="flex-y-center">
       <span class="pr-8px text-base-text">{{ label }}</span>
       <slot name="suffix"></slot>
     </div>
diff --git a/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
index 42811c49..6c38897d 100644
--- a/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
+++ b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
@@ -36,27 +36,28 @@ const swatches: string[] = [
 <template>
   <NDivider>{{ $t('theme.appearance.themeColor.title') }}</NDivider>
   <div class="flex-col-stretch gap-12px">
-    <NTooltip placement="top-start">
-      <template #trigger>
-        <SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')">
-          <NSwitch v-model:value="themeStore.recommendColor" />
-        </SettingItem>
+    <SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')">
+      <template #suffix>
+        <IconTooltip>
+          <p>
+            <span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span>
+            <br />
+            <NButton
+              text
+              tag="a"
+              href="https://uicolors.app/create"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray"
+            >
+              https://uicolors.app/create
+            </NButton>
+          </p>
+        </IconTooltip>
       </template>
-      <p>
-        <span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span>
-        <br />
-        <NButton
-          text
-          tag="a"
-          href="https://uicolors.app/create"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-gray"
-        >
-          https://uicolors.app/create
-        </NButton>
-      </p>
-    </NTooltip>
+      <NSwitch v-model:value="themeStore.recommendColor" />
+    </SettingItem>
+
     <SettingItem
       v-for="(_, key) in themeStore.themeColors"
       :key="key"

From 29a2a5c66a536652eee10dbd9b3fb0ae4fd510bd Mon Sep 17 00:00:00 2001
From: Azir-11 <2075125282@qq.com>
Date: Tue, 12 Aug 2025 23:59:23 +0800
Subject: [PATCH 5/6] feat(projects): add prompt information for scrolling mode
 and tab bar caching.

---
 .../theme-drawer/modules/layout/modules/content-settings.vue   | 3 +++
 .../theme-drawer/modules/layout/modules/tab-settings.vue       | 3 +++
 src/locales/langs/en-us.ts                                     | 2 ++
 src/locales/langs/zh-cn.ts                                     | 2 ++
 src/typings/app.d.ts                                           | 3 ++-
 5 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
index d72b21d7..f0fadffe 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
@@ -19,6 +19,9 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
   <NDivider>{{ $t('theme.layout.content.title') }}</NDivider>
   <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
     <SettingItem key="1" :label="$t('theme.layout.content.scrollMode.title')">
+      <template #suffix>
+        <IconTooltip :desc="$t('theme.layout.content.scrollMode.tip')" />
+      </template>
       <NSelect
         v-model:value="themeStore.layout.scrollMode"
         :options="translateOptions(themeScrollModeOptions)"
diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
index 4a82a8f9..585da6ec 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
@@ -27,6 +27,9 @@ const themeStore = useThemeStore();
       <NSwitch v-model:value="themeStore.tab.visible" />
     </SettingItem>
     <SettingItem v-if="themeStore.tab.visible" key="2" :label="$t('theme.layout.tab.cache')">
+      <template #suffix>
+        <IconTooltip :desc="$t('theme.layout.tab.cacheTip')" />
+      </template>
       <NSwitch v-model:value="themeStore.tab.cache" />
     </SettingItem>
     <SettingItem v-if="themeStore.tab.visible" key="3" :label="$t('theme.layout.tab.height')">
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 440e7d64..ae721396 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -109,6 +109,7 @@ const local: App.I18n.Schema = {
         title: 'Tab Settings',
         visible: 'Tab Visible',
         cache: 'Tag Bar Info Cache',
+        cacheTip: 'One-click to open/close global keepalive',
         height: 'Tab Height',
         mode: {
           title: 'Tab Mode',
@@ -144,6 +145,7 @@ const local: App.I18n.Schema = {
         title: 'Content Area Settings',
         scrollMode: {
           title: 'Scroll Mode',
+          tip: 'The theme scroll only scrolls the main part, the outer scroll can carry the header and footer together',
           wrapper: 'Wrapper',
           content: 'Content'
         },
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index d1e8dbc9..342f1c60 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -106,6 +106,7 @@ const local: App.I18n.Schema = {
         title: '标签栏设置',
         visible: '显示标签栏',
         cache: '标签栏信息缓存',
+        cacheTip: '一键开启/关闭全局 keepalive',
         height: '标签栏高度',
         mode: {
           title: '标签栏风格',
@@ -141,6 +142,7 @@ const local: App.I18n.Schema = {
         title: '内容区域设置',
         scrollMode: {
           title: '滚动模式',
+          tip: '主题滚动仅 main 部分滚动，外层滚动可携带头部底部一起滚动',
           wrapper: '外层滚动',
           content: '主体滚动'
         },
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index dfa38fd8..dc2c8c7f 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -387,6 +387,7 @@ declare namespace App {
             title: string;
             visible: string;
             cache: string;
+            cacheTip: string;
             height: string;
             mode: { title: string } & Record<UnionKey.ThemeTabMode, string>;
           };
@@ -416,7 +417,7 @@ declare namespace App {
           };
           content: {
             title: string;
-            scrollMode: { title: string } & Record<UnionKey.ThemeScrollMode, string>;
+            scrollMode: { title: string; tip: string } & Record<UnionKey.ThemeScrollMode, string>;
             page: {
               animate: string;
               mode: { title: string } & Record<UnionKey.ThemePageAnimateMode, string>;

From d73111116a9938269224bba34fd1097e669e0cfa Mon Sep 17 00:00:00 2001
From: NicholasLD <878639947@qq.com>
Date: Thu, 14 Aug 2025 17:35:37 +0800
Subject: [PATCH 6/6] refactor(menu): optimize the margin on the menu

---
 .../modules/global-menu/modules/top-hybrid-sidebar-first.vue  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
index 3bb0b2ce..f402009a 100644
--- a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
+++ b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
@@ -30,7 +30,8 @@ const { selectedKey } = useMenu();
     />
   </Teleport>
   <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
-    <FirstLevelMenu
+    <div class="h-full pt-2">
+      <FirstLevelMenu
       :menus="firstLevelMenus"
       :active-menu-key="activeFirstLevelMenuKey"
       :sider-collapse="appStore.siderCollapse"
@@ -39,6 +40,7 @@ const { selectedKey } = useMenu();
       @select="handleSelectFirstLevelMenu"
       @toggle-sider-collapse="appStore.toggleSiderCollapse"
     />
+    </div>
   </Teleport>
 </template>