优化设置菜单响应式布局

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 {

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,

frontend/src/views/components/HomeHeader/HomeHeader.vue

@@ -38,8 +38,8 @@
     </template>
     <el-tabs
       v-model="globalStatus.settingsActiveTab"
-      :tab-position="isMobile ? 'top' : 'right'"
+      :tab-position="useVerticalSettingsTabs ? 'right' : 'top'"
-      class="settings-tabs"
+      :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,