From d59deb78ae2bdc5ad17913373a1ecf39e48935fe Mon Sep 17 00:00:00 2001
From: nanxun <nanxun@nxsir.cn>
Date: Wed, 29 Apr 2026 18:50:42 +0800
Subject: [PATCH] fix: refine dark mode and table scrolling

---
 frontend/src/components/layout/MainLayout.vue |  13 +-
 frontend/src/styles/main.css                  |   8 +
 frontend/src/views/LiveRoomsView.vue          | 174 +++++++++++++++++-
 frontend/src/views/SettingsView.vue           | 145 +++++++++++++++
 4 files changed, 327 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/layout/MainLayout.vue b/frontend/src/components/layout/MainLayout.vue
index 74d2400..eec6fa3 100644
--- a/frontend/src/components/layout/MainLayout.vue
+++ b/frontend/src/components/layout/MainLayout.vue
@@ -388,15 +388,10 @@ async function handleLogout() {
   overflow-y: auto;
   padding: 20px 16px;
   border-right: 1px solid var(--border-subtle);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.16));
+  background: var(--sidebar-shell-bg);
   backdrop-filter: blur(18px);
 }
 
-:global(html[data-theme="dark"]) .app-sidebar {
-  background: var(--bg-subtle);
-  border-right-color: var(--border-base);
-}
-
 :global(html[data-theme="dark"]) .app-nav-menu :deep(.el-menu-item.is-active) {
   background: linear-gradient(180deg, rgba(91, 168, 255, 0.18), rgba(91, 168, 255, 0.1));
   box-shadow: inset 0 0 0 1px rgba(91, 168, 255, 0.2);
@@ -671,15 +666,11 @@ async function handleLogout() {
   padding: 18px 20px;
   border-radius: 10px;
   border: 1px solid var(--border-subtle);
-  background: rgba(255, 255, 255, 0.56);
+  background: var(--topbar-shell-bg);
   backdrop-filter: blur(16px);
   box-shadow: var(--shadow-soft);
 }
 
-:global(html[data-theme="dark"]) .app-topbar__main {
-  background: rgba(15, 27, 41, 0.78);
-}
-
 .app-topbar__lead {
   display: flex;
   align-items: flex-start;
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 1180cc9..39229d3 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -28,6 +28,10 @@
   --shadow-soft: 0 10px 30px rgba(15, 23, 38, 0.06);
   --shadow-card: 0 18px 42px rgba(15, 23, 38, 0.08);
   --shadow-float: 0 24px 60px rgba(15, 23, 38, 0.12);
+  --sidebar-shell-bg:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)),
+    var(--bg-emphasis);
+  --topbar-shell-bg: rgba(255, 255, 255, 0.56);
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 10px;
@@ -101,6 +105,10 @@ html[data-theme="dark"] {
   --shadow-soft: 0 12px 30px rgba(2, 6, 12, 0.32);
   --shadow-card: 0 18px 40px rgba(2, 6, 12, 0.4);
   --shadow-float: 0 24px 60px rgba(2, 6, 12, 0.52);
+  --sidebar-shell-bg:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    var(--bg-subtle);
+  --topbar-shell-bg: rgba(15, 27, 41, 0.78);
 
   --el-color-primary: var(--accent);
   --el-color-primary-light-3: #7db9ff;
diff --git a/frontend/src/views/LiveRoomsView.vue b/frontend/src/views/LiveRoomsView.vue
index 57edbcd..20822e8 100644
--- a/frontend/src/views/LiveRoomsView.vue
+++ b/frontend/src/views/LiveRoomsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import apiClient, { getApiErrorMessage } from "@/api/client";
 import { useViewport } from "@/composables/useViewport";
@@ -37,6 +37,10 @@ const rooms = ref<LiveRoom[]>([]);
 const selectedRooms = ref<LiveRoom[]>([]);
 const loadError = ref("");
 const { isMobile } = useViewport();
+const roomsTableShellRef = ref<HTMLElement | null>(null);
+const roomsTableProxyRef = ref<HTMLElement | null>(null);
+const showRoomsTableProxyScroll = ref(false);
+const roomsTableProxyInnerWidth = ref(0);
 
 const createForm = reactive({
   url: "",
@@ -106,6 +110,142 @@ const recordDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 44
 const settingsDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 760px)" : "840px"));
 const deleteDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 560px)" : "clamp(480px, 46vw, 560px)"));
 let autoRefreshTimer: number | null = null;
+let roomsTableScrollWrap: HTMLElement | null = null;
+let roomsTableResizeObserver: ResizeObserver | null = null;
+let observedRoomsTableShell: HTMLElement | null = null;
+let observedRoomsTableWrap: HTMLElement | null = null;
+let syncingRoomsTableProxy = false;
+let syncingRoomsTableBody = false;
+
+function cleanupRoomsTableScrollSync() {
+  if (roomsTableScrollWrap) {
+    roomsTableScrollWrap.removeEventListener("scroll", handleRoomsTableBodyScroll);
+    roomsTableScrollWrap = null;
+  }
+
+  roomsTableResizeObserver?.disconnect();
+  roomsTableResizeObserver = null;
+  observedRoomsTableShell = null;
+  observedRoomsTableWrap = null;
+}
+
+function getRoomsTableScrollWrap() {
+  const shell = roomsTableShellRef.value;
+
+  if (!shell) {
+    return null;
+  }
+
+  return shell.querySelector<HTMLElement>(".el-table__body-wrapper .el-scrollbar__wrap") ??
+    shell.querySelector<HTMLElement>(".el-scrollbar__wrap") ??
+    shell.querySelector<HTMLElement>(".el-table__body-wrapper");
+}
+
+function handleRoomsTableBodyScroll() {
+  if (syncingRoomsTableProxy) {
+    return;
+  }
+
+  const proxy = roomsTableProxyRef.value;
+
+  if (!proxy || !roomsTableScrollWrap) {
+    return;
+  }
+
+  syncingRoomsTableBody = true;
+  proxy.scrollLeft = roomsTableScrollWrap.scrollLeft;
+  window.requestAnimationFrame(() => {
+    syncingRoomsTableBody = false;
+  });
+}
+
+function handleRoomsTableProxyScroll() {
+  if (syncingRoomsTableBody || !roomsTableScrollWrap) {
+    return;
+  }
+
+  const proxy = roomsTableProxyRef.value;
+
+  if (!proxy) {
+    return;
+  }
+
+  syncingRoomsTableProxy = true;
+  roomsTableScrollWrap.scrollLeft = proxy.scrollLeft;
+  window.requestAnimationFrame(() => {
+    syncingRoomsTableProxy = false;
+  });
+}
+
+function ensureRoomsTableResizeObserver() {
+  if (typeof ResizeObserver === "undefined") {
+    return;
+  }
+
+  const shell = roomsTableShellRef.value;
+  const wrap = roomsTableScrollWrap;
+
+  if (roomsTableResizeObserver && observedRoomsTableShell === shell && observedRoomsTableWrap === wrap) {
+    return;
+  }
+
+  roomsTableResizeObserver?.disconnect();
+  roomsTableResizeObserver = new ResizeObserver(() => {
+    void syncRoomsTableProxyScroll();
+  });
+
+  if (shell) {
+    roomsTableResizeObserver.observe(shell);
+  }
+
+  if (wrap) {
+    roomsTableResizeObserver.observe(wrap);
+  }
+
+  observedRoomsTableShell = shell;
+  observedRoomsTableWrap = wrap;
+}
+
+async function syncRoomsTableProxyScroll() {
+  await nextTick();
+
+  if (isMobile.value) {
+    showRoomsTableProxyScroll.value = false;
+    roomsTableProxyInnerWidth.value = 0;
+    cleanupRoomsTableScrollSync();
+    return;
+  }
+
+  const wrap = getRoomsTableScrollWrap();
+
+  if (roomsTableScrollWrap !== wrap) {
+    roomsTableScrollWrap?.removeEventListener("scroll", handleRoomsTableBodyScroll);
+    roomsTableScrollWrap = wrap;
+    roomsTableScrollWrap?.addEventListener("scroll", handleRoomsTableBodyScroll, { passive: true });
+  }
+
+  const proxy = roomsTableProxyRef.value;
+
+  if (!wrap) {
+    showRoomsTableProxyScroll.value = false;
+    roomsTableProxyInnerWidth.value = 0;
+    ensureRoomsTableResizeObserver();
+    return;
+  }
+
+  const scrollWidth = Math.max(wrap.scrollWidth, wrap.firstElementChild?.scrollWidth ?? 0);
+  const clientWidth = wrap.clientWidth;
+  const canScrollHorizontally = scrollWidth > clientWidth + 1;
+
+  roomsTableProxyInnerWidth.value = scrollWidth;
+  showRoomsTableProxyScroll.value = canScrollHorizontally;
+
+  if (canScrollHorizontally && proxy && Math.abs(proxy.scrollLeft - wrap.scrollLeft) > 1) {
+    proxy.scrollLeft = wrap.scrollLeft;
+  }
+
+  ensureRoomsTableResizeObserver();
+}
 
 async function loadRooms() {
   loading.value = true;
@@ -114,6 +254,7 @@ async function loadRooms() {
   try {
     const { data } = await apiClient.get<LiveRoom[]>("/live-rooms");
     rooms.value = data;
+    void syncRoomsTableProxyScroll();
   } catch (error) {
     loadError.value = getApiErrorMessage(error, "直播间列表加载失败，请稍后重试。");
   } finally {
@@ -148,6 +289,7 @@ async function autoRefreshRooms() {
     const { data } = await apiClient.get<LiveRoom[]>("/live-rooms");
     rooms.value = data;
     loadError.value = "";
+    void syncRoomsTableProxyScroll();
   } catch {
     // Keep the current view stable; the background poller will try again.
   }
@@ -594,13 +736,17 @@ function nullableStringFromSelect(value: string | number) {
 
 onMounted(async () => {
   await loadRooms();
+  void syncRoomsTableProxyScroll();
   startAutoRefresh();
   document.addEventListener("visibilitychange", handleVisibilityChange);
+  window.addEventListener("resize", syncRoomsTableProxyScroll);
 });
 
 onBeforeUnmount(() => {
   stopAutoRefresh();
   document.removeEventListener("visibilitychange", handleVisibilityChange);
+  window.removeEventListener("resize", syncRoomsTableProxyScroll);
+  cleanupRoomsTableScrollSync();
 });
 </script>
 
@@ -745,7 +891,16 @@ onBeforeUnmount(() => {
         </article>
       </div>
 
-      <div v-else class="table-scroll-shell rooms-table-shell">
+      <div v-else ref="roomsTableShellRef" class="table-scroll-shell rooms-table-shell">
+        <div
+          v-if="showRoomsTableProxyScroll"
+          ref="roomsTableProxyRef"
+          class="rooms-table-proxy-scroll"
+          @scroll.passive="handleRoomsTableProxyScroll"
+        >
+          <div class="rooms-table-proxy-scroll__inner" :style="{ width: `${roomsTableProxyInnerWidth}px` }"></div>
+        </div>
+
         <el-table
           :data="rooms"
           v-loading="loading"
@@ -1246,8 +1401,23 @@ onBeforeUnmount(() => {
 }
 
 .rooms-table-shell {
+  overflow: hidden;
+}
+
+.rooms-table-proxy-scroll {
+  position: sticky;
+  top: 0;
+  z-index: 5;
   overflow-x: auto;
   overflow-y: hidden;
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  background: var(--surface);
+  scrollbar-width: thin;
+}
+
+.rooms-table-proxy-scroll__inner {
+  height: 1px;
 }
 
 .rooms-table {
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index a1c8225..4c88c44 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1487,6 +1487,16 @@ onMounted(loadSettings);
         </el-tab-pane>
       </el-tabs>
     </div>
+
+    <div class="settings-savebar">
+      <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>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -1494,12 +1504,17 @@ onMounted(loadSettings);
 .page-stack {
   display: grid;
   gap: 24px;
+  padding-bottom: 28px;
 }
 
 .page-error-alert {
   border-radius: 14px;
 }
 
+.page-toolbar :deep(.el-button--primary) {
+  display: none;
+}
+
 .settings-import-input {
   display: none;
 }
@@ -1515,6 +1530,56 @@ onMounted(loadSettings);
   grid-column: auto;
 }
 
+.settings-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border: 1px solid var(--border-subtle);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(180deg, var(--surface-raised), var(--surface-muted));
+  box-shadow: var(--shadow-soft);
+}
+
+.settings-tabs :deep(.el-tabs__nav-wrap) {
+  padding-inline: 16px;
+}
+
+.settings-tabs :deep(.el-tabs__nav-wrap::after) {
+  background: var(--border-subtle);
+}
+
+.settings-tabs :deep(.el-tabs__nav) {
+  border: 0 !important;
+  background: transparent;
+}
+
+.settings-tabs :deep(.el-tabs__item) {
+  height: 48px;
+  color: var(--text-secondary);
+  border: 0 !important;
+  transition:
+    color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.settings-tabs :deep(.el-tabs__item:hover) {
+  color: var(--text-primary);
+}
+
+.settings-tabs :deep(.el-tabs__item.is-active) {
+  color: var(--text-primary);
+  background: var(--surface);
+  box-shadow: inset 0 -2px 0 var(--accent);
+}
+
+.settings-tabs :deep(.el-tabs__content) {
+  padding: 18px;
+  border: 1px solid var(--border-subtle);
+  border-top: 0;
+  border-radius: 0 0 12px 12px;
+  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
+  box-shadow: var(--shadow-soft);
+}
+
 .settings-card :deep(.el-card__body) {
   padding-top: 20px;
 }
@@ -1756,6 +1821,56 @@ onMounted(loadSettings);
   border-color: rgba(245, 158, 11, 0.18);
 }
 
+:global(html[data-theme="dark"]) .test-result--success {
+  background: rgba(14, 43, 28, 0.88);
+  border-color: rgba(34, 197, 94, 0.28);
+}
+
+:global(html[data-theme="dark"]) .test-result--warning {
+  background: rgba(58, 34, 10, 0.88);
+  border-color: rgba(245, 158, 11, 0.28);
+}
+
+.settings-savebar {
+  position: sticky;
+  bottom: 18px;
+  z-index: 24;
+  pointer-events: none;
+}
+
+.settings-savebar__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  border-radius: 14px;
+  border: 1px solid var(--border-base);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
+    var(--surface-raised);
+  box-shadow: var(--shadow-float);
+  backdrop-filter: blur(18px);
+  pointer-events: auto;
+}
+
+.settings-savebar__copy {
+  min-width: 0;
+}
+
+.settings-savebar__title {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.settings-savebar__subtitle {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
 .test-result__title {
   font-size: 14px;
   font-weight: 700;
@@ -1797,9 +1912,30 @@ onMounted(loadSettings);
   .action-strip :deep(.el-button) {
     width: 100%;
   }
+
+  .settings-savebar__content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .settings-savebar__content :deep(.el-button) {
+    width: 100%;
+  }
 }
 
 @media (max-width: 768px) {
+  .page-stack {
+    padding-bottom: 20px;
+  }
+
+  .settings-tabs :deep(.el-tabs__nav-wrap) {
+    padding-inline: 10px;
+  }
+
+  .settings-tabs :deep(.el-tabs__content) {
+    padding: 14px;
+  }
+
   .settings-card :deep(.el-col) {
     flex: 0 0 100%;
     max-width: 100%;
@@ -1821,5 +1957,14 @@ onMounted(loadSettings);
   .template-section {
     padding: 16px 16px 2px;
   }
+
+  .settings-savebar {
+    bottom: 12px;
+  }
+
+  .settings-savebar__content {
+    padding: 12px 14px;
+    border-radius: 12px;
+  }
 }
 </style>