From 9c0000f0ff9d583fd06cdc9efa1efd86ec0f8ae8 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 16 Oct 2026 01:11:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E7=BD=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/HomeHeader/HomeHeader.css      | 64 +++++++++++++++++++
 .../views/components/HomeHeader/HomeHeader.js |  9 ++-
 .../components/HomeHeader/HomeHeader.vue      |  5 +-
 3 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/components/HomeHeader/HomeHeader.css b/frontend/src/views/components/HomeHeader/HomeHeader.css
index 8c37547..64fff72 100644
--- a/frontend/src/views/components/HomeHeader/HomeHeader.css
+++ b/frontend/src/views/components/HomeHeader/HomeHeader.css
@@ -232,6 +232,70 @@
   overflow: auto;
   container: settings-content / inline-size;
 }
+.settings-tabs.settings-tabs-top {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.settings-tabs.settings-tabs-top > :deep(.el-tabs__header) {
+  flex: none;
+  width: 100%;
+  max-height: none;
+  margin: 0 0 12px !important;
+  padding: 4px;
+  border-radius: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-gutter: stable;
+}
+
+.settings-tabs.settings-tabs-top > :deep(.el-tabs__header .el-tabs__nav-wrap) {
+  overflow: visible;
+}
+
+.settings-tabs.settings-tabs-top > :deep(.el-tabs__header .el-tabs__nav) {
+  display: flex;
+  width: max-content;
+  min-width: 100%;
+}
+
+.settings-tabs.settings-tabs-top > :deep(.el-tabs__header .el-tabs__item) {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: max-content;
+  min-height: 44px;
+  margin: 0 2px;
+  padding: 8px 12px !important;
+  border-radius: 8px;
+}
+
+.settings-tabs.settings-tabs-top .settings-category {
+  width: max-content;
+  min-width: max-content;
+}
+
+.settings-tabs.settings-tabs-top .settings-category-copy {
+  flex: 0 0 auto;
+  max-width: none;
+  overflow: visible;
+}
+
+.settings-tabs.settings-tabs-top .settings-category-label {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.settings-tabs.settings-tabs-top .settings-category-hint {
+  display: none;
+}
+
+.settings-tabs.settings-tabs-top > :deep(.el-tabs__content) {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding-right: 0;
+}
 
 @media (prefers-color-scheme: dark) {
   .settings-tabs {
diff --git a/frontend/src/views/components/HomeHeader/HomeHeader.js b/frontend/src/views/components/HomeHeader/HomeHeader.js
index 0cc79f6..b24b05b 100644
--- a/frontend/src/views/components/HomeHeader/HomeHeader.js
+++ b/frontend/src/views/components/HomeHeader/HomeHeader.js
@@ -35,11 +35,15 @@ export function usePage() {
   const userInfos = globalStatus.userInfos;
   
   const isMobile = ref(window.innerWidth <= 768);
-  
+  const isWideSettingsViewport = ref(window.innerWidth >= 1280);
+
   const handleResize = () => {
     isMobile.value = window.innerWidth <= 768;
+    isWideSettingsViewport.value = window.innerWidth >= 1280;
   };
-  
+
+  const useVerticalSettingsTabs = computed(() => !isMobile.value && isWideSettingsViewport.value);
+
   onMounted(() => {
     window.addEventListener('resize', handleResize);
   });
@@ -104,6 +108,7 @@ export function usePage() {
     globalStatus,
     userInfos,
     isMobile,
+    useVerticalSettingsTabs,
     handleResize,
     settingsMenu,
     activeSettings,
diff --git a/frontend/src/views/components/HomeHeader/HomeHeader.vue b/frontend/src/views/components/HomeHeader/HomeHeader.vue
index e1ebf15..1a01310 100644
--- a/frontend/src/views/components/HomeHeader/HomeHeader.vue
+++ b/frontend/src/views/components/HomeHeader/HomeHeader.vue
@@ -38,8 +38,8 @@
     </template>
     <el-tabs
       v-model="globalStatus.settingsActiveTab"
-      :tab-position="isMobile ? 'top' : 'right'"
-      class="settings-tabs"
+      :tab-position="useVerticalSettingsTabs ? 'right' : 'top'"
+      :class="['settings-tabs', useVerticalSettingsTabs ? 'settings-tabs-vertical' : 'settings-tabs-top']"
       :before-leave="beforeSettingsLeave"
     >
       <el-tab-pane
@@ -80,6 +80,7 @@ import {
 const {
   globalStatus,
   isMobile,
+  useVerticalSettingsTabs,
   lang,
   settingsMenu,
   activeSettings,