From 242b4198758f0cde25b8fa6f42453e6bbe00d7e7 Mon Sep 17 00:00:00 2001
From: nanxun <nanxun@nxsir.cn>
Date: Thu, 30 Apr 2026 19:34:39 +0800
Subject: [PATCH] fix: pin settings savebar to viewport

---
 frontend/src/views/SettingsView.vue | 41 +++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 4c88c44..c025afa 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -10,10 +10,14 @@ import type {
 } from "@/types";
 import { outputFormatLabelMap, recordingTemplateLabelMap, saveModeLabelMap } from "@/types";
 import { useAuthStore } from "@/stores/auth";
+import { useViewport } from "@/composables/useViewport";
+import { useUiPreferences } from "@/composables/useUiPreferences";
 
 type ScriptEventType = "live_started" | "live_ended" | "segment_completed";
 
 const authStore = useAuthStore();
+const { isMobile } = useViewport();
+const { sidebarCollapsed } = useUiPreferences();
 
 const loading = ref(false);
 const saving = ref(false);
@@ -39,6 +43,22 @@ const retentionCleanupResult = ref<RetentionCleanupResult | null>(null);
 const loadError = ref("");
 const activeSettingTab = ref("recording");
 
+const savebarStyle = computed(() => {
+  if (isMobile.value) {
+    return {
+      left: "16px",
+      right: "16px",
+      bottom: "12px"
+    };
+  }
+
+  return {
+    left: sidebarCollapsed.value ? "120px" : "304px",
+    right: "28px",
+    bottom: "18px"
+  };
+});
+
 const form = reactive<SystemSettings>({
   ffmpegPath: "ffmpeg",
   outputRoot: "records",
@@ -1488,13 +1508,13 @@ onMounted(loadSettings);
       </el-tabs>
     </div>
 
-    <div class="settings-savebar">
+    <div class="settings-savebar" :style="savebarStyle">
       <div class="settings-savebar__content">
         <div class="settings-savebar__copy">
           <div class="settings-savebar__title">当前修改不会自动保存</div>
           <div class="settings-savebar__subtitle">滚动到页面任何位置都可以直接保存当前设置。</div>
         </div>
-        <el-button type="primary" :loading="saving" @click="saveSettings">淇濆瓨璁剧疆</el-button>
+        <el-button type="primary" :loading="saving" @click="saveSettings">保存设置</el-button>
       </div>
     </div>
   </div>
@@ -1504,7 +1524,7 @@ onMounted(loadSettings);
 .page-stack {
   display: grid;
   gap: 24px;
-  padding-bottom: 28px;
+  padding-bottom: 132px;
 }
 
 .page-error-alert {
@@ -1832,10 +1852,13 @@ onMounted(loadSettings);
 }
 
 .settings-savebar {
-  position: sticky;
-  bottom: 18px;
-  z-index: 24;
+  position: fixed;
+  z-index: 60;
   pointer-events: none;
+  transition:
+    left 0.2s ease,
+    right 0.2s ease,
+    bottom 0.2s ease;
 }
 
 .settings-savebar__content {
@@ -1925,7 +1948,7 @@ onMounted(loadSettings);
 
 @media (max-width: 768px) {
   .page-stack {
-    padding-bottom: 20px;
+    padding-bottom: 112px;
   }
 
   .settings-tabs :deep(.el-tabs__nav-wrap) {
@@ -1958,10 +1981,6 @@ onMounted(loadSettings);
     padding: 16px 16px 2px;
   }
 
-  .settings-savebar {
-    bottom: 12px;
-  }
-
   .settings-savebar__content {
     padding: 12px 14px;
     border-radius: 12px;