From f8e4c14fa8ad1930912dc8149d7f2defd6108184 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Thu, 17 Apr 2025 22:32:24 +0800
Subject: [PATCH] update

---
 .gitignore                                    |   1 +
 packages/frontend/src/App.vue                 |  58 +-
 .../components/NotificationSettingForm.vue    | 158 +++++-
 .../src/components/NotificationSettings.vue   | 133 +++--
 .../src/components/StyleCustomizer.vue        | 532 ++++++++++++------
 packages/frontend/src/views/SettingsView.vue  | 282 ++++++----
 6 files changed, 854 insertions(+), 310 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5d6c39d..a855724 100644
--- a/.gitignore
+++ b/.gitignore
@@ -135,3 +135,4 @@ dist
 /packages/data
 *.db
 *.db
+*.jpg
diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 3ddc5e5..631d885 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
+import { RouterLink, RouterView, useRoute } from 'vue-router';
+import { ref, onMounted, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from './stores/auth.store';
 import { useSettingsStore } from './stores/settings.store';
@@ -20,6 +21,35 @@ const { isAuthenticated } = storeToRefs(authStore);
 const { showPopupFileEditorBoolean } = storeToRefs(settingsStore);
 const { isStyleCustomizerVisible } = storeToRefs(appearanceStore); // 从外观 store 获取可见性状态
 
+const route = useRoute();
+const navRef = ref<HTMLElement | null>(null);
+const underlineRef = ref<HTMLElement | null>(null);
+
+const updateUnderline = async () => {
+  await nextTick(); // 等待 DOM 更新
+  if (navRef.value && underlineRef.value) {
+    const activeLink = navRef.value.querySelector('.router-link-exact-active') as HTMLElement;
+    if (activeLink) {
+      underlineRef.value.style.left = `${activeLink.offsetLeft}px`;
+      underlineRef.value.style.width = `${activeLink.offsetWidth}px`;
+      underlineRef.value.style.opacity = '1'; // Make it visible
+    } else {
+      underlineRef.value.style.opacity = '0'; // Hide if no active link (e.g., on login page if not a nav link)
+    }
+  }
+};
+
+onMounted(() => {
+  // Initial position update
+  // Use setTimeout to ensure styles are applied and elements have dimensions
+  setTimeout(updateUnderline, 100);
+});
+
+watch(route, () => {
+  updateUnderline();
+});
+
+
 const handleLogout = () => {
   authStore.logout();
 };
@@ -38,7 +68,7 @@ const closeStyleCustomizer = () => {
 <template>
   <div id="app-container">
     <header>
-      <nav>
+      <nav ref="navRef">
         <div class="nav-left"> <!-- Group left-aligned links -->
             <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink>
             <RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink>
@@ -53,6 +83,8 @@ const closeStyleCustomizer = () => {
             <RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
             <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
         </div>
+        <!-- Sliding underline element -->
+        <div ref="underlineRef" class="nav-underline"></div>
       </nav>
     </header>
 
@@ -133,19 +165,19 @@ nav a.router-link-exact-active {
   font-weight: 500; /* Medium weight */
   color: var(--link-active-color); /* Use active link color */
   background-color: transparent; /* Remove background for active link */
-  /* Add a bottom border for active state */
+  /* The underline is now handled by a separate element */
 }
 
-/* Add a pseudo-element for the active indicator */
-nav a.router-link-exact-active::after {
-    content: '';
-    position: absolute;
-    bottom: -1px; /* Position slightly below the text, aligning with header border */
-    left: 10%; /* Start slightly indented */
-    right: 10%; /* End slightly indented */
-    height: 2px; /* Thickness of the indicator */
-    background-color: var(--link-active-color); /* Color of the indicator */
-    border-radius: 1px;
+/* Style for the sliding underline */
+.nav-underline {
+  position: absolute;
+  bottom: 0px; /* Position at the very bottom of the nav */
+  height: 2px; /* Thickness of the indicator */
+  background-color: var(--link-active-color); /* Color of the indicator */
+  border-radius: 1px;
+  transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* Smooth transition for sliding */
+  opacity: 0; /* Initially hidden */
+  pointer-events: none; /* Prevent interaction */
 }
 
 
diff --git a/packages/frontend/src/components/NotificationSettingForm.vue b/packages/frontend/src/components/NotificationSettingForm.vue
index aefdb4f..3de5033 100644
--- a/packages/frontend/src/components/NotificationSettingForm.vue
+++ b/packages/frontend/src/components/NotificationSettingForm.vue
@@ -458,15 +458,161 @@ const handleTestNotification = async () => {
 
 <style scoped>
 .notification-setting-form {
-  padding: 1.5rem;
-  background-color: #fff;
-  border-radius: 0.3rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: var(--base-padding);
+  background-color: var(--app-bg-color); /* Use app background */
+  border: 1px solid var(--border-color); /* Add border consistent with theme */
+  border-radius: 4px;
+  color: var(--text-color);
+  /* Removed box-shadow for a flatter look, can be added back if desired */
 }
+
+h3 {
+  color: var(--text-color);
+  margin-bottom: calc(var(--base-margin) * 2);
+  padding-bottom: var(--base-margin);
+  border-bottom: 1px solid var(--border-color);
+  font-size: 1.25rem; /* Slightly larger heading */
+}
+
+.mb-3 { /* Bootstrap margin bottom class */
+  margin-bottom: calc(var(--base-margin) * 1.5) !important; /* Use variable, increase slightly */
+}
+
+.form-label {
+  display: block;
+  margin-bottom: calc(var(--base-margin) / 2);
+  color: var(--text-color);
+  font-weight: bold;
+}
+
+.form-control, .form-select, .form-check-input {
+  background-color: var(--app-bg-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  width: 100%; /* Ensure inputs take full width */
+  box-sizing: border-box; /* Include padding and border in element's total width */
+}
+.form-control:focus, .form-select:focus {
+    border-color: var(--link-active-color); /* Highlight focus */
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Optional focus shadow */
+}
+
+textarea.form-control {
+    min-height: 80px; /* Give textareas more space */
+}
+
+.form-check {
+  display: flex; /* Align checkbox and label */
+  align-items: center;
+  padding-left: 0; /* Reset Bootstrap padding */
+}
+.form-check-input {
+  width: auto; /* Don't force checkbox to full width */
+  margin-right: 0.5rem; /* Space between checkbox and label */
+  margin-top: 0; /* Align vertically */
+  border: 1px solid var(--border-color); /* Ensure border is visible */
+}
+.form-check-label {
+  margin-bottom: 0; /* Reset label margin */
+  font-weight: normal; /* Normal weight for checkbox labels */
+}
+
+.text-muted {
+  color: var(--text-color-secondary);
+  font-size: 0.85em;
+  display: block; /* Ensure it takes its own line */
+  margin-top: calc(var(--base-margin) / 2);
+}
+.text-danger {
+    color: #dc3545; /* Keep specific danger color */
+}
+.text-success {
+    color: #198754; /* Keep specific success color */
+}
+
+.channel-config {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: var(--base-padding);
+  margin-top: var(--base-margin);
+  background-color: var(--header-bg-color); /* Slightly different background */
+}
+
 .channel-config h4 {
     font-size: 1rem;
     font-weight: bold;
-    margin-bottom: 1rem;
+    margin-bottom: var(--base-margin);
+    color: var(--text-color);
+    padding-bottom: calc(var(--base-margin) / 2);
+    border-bottom: 1px dashed var(--border-color); /* Dashed separator */
+}
+
+/* Button styling (reuse from NotificationSettings or define globally) */
+.btn {
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+    font-weight: bold;
+}
+.btn-primary {
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-bg-color);
+    color: var(--button-text-color);
+}
+.btn-primary:hover {
+     background-color: var(--button-hover-bg-color);
+     border-color: var(--button-hover-bg-color);
+     color: var(--button-text-color);
+}
+.btn-primary:disabled {
+    opacity: 0.65;
+    cursor: not-allowed;
+}
+.btn-secondary {
+    background-color: var(--text-color-secondary);
+    border: 1px solid var(--text-color-secondary);
+    color: var(--app-bg-color);
+}
+.btn-secondary:hover {
+    background-color: var(--text-color);
+    border-color: var(--text-color);
+    color: var(--app-bg-color);
+}
+.btn-outline-secondary {
+    color: var(--text-color-secondary);
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+}
+.btn-outline-secondary:hover {
+    background-color: var(--header-bg-color);
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+}
+
+.spinner-border-sm {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.2em;
+    vertical-align: -0.125em; /* Align spinner better with text */
+}
+
+.alert { /* General alert styling */
+    padding: var(--base-padding);
+    margin-top: var(--base-margin);
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+.alert-danger {
+    color: #842029;
+    background-color: #f8d7da;
+    border-color: #f5c2c7;
 }
-/* Add more specific styling if needed */
 </style>
diff --git a/packages/frontend/src/components/NotificationSettings.vue b/packages/frontend/src/components/NotificationSettings.vue
index d1ce9ec..e45a1d2 100644
--- a/packages/frontend/src/components/NotificationSettings.vue
+++ b/packages/frontend/src/components/NotificationSettings.vue
@@ -118,66 +118,133 @@ const handleSave = (savedSetting: NotificationSetting) => {
 
 <style scoped>
 .notification-settings {
-  padding: var(--base-padding, 1rem); /* 使用变量 */
-  /* Inherits text color and background from parent */
-}
-.loading-indicator, .error-message {
-  margin-top: var(--base-margin, 1rem); /* 使用变量 */
-  color: var(--text-color-secondary); /* 使用次要文本颜色 */
-}
-.error-message {
-  color: var(--bs-danger); /* 保留 Bootstrap 变量或特定错误颜色 */
+  padding: var(--base-padding);
+  /* Inherits text color and background from parent (NotificationsView) */
 }
 
-/* Apply variables to list items if needed (assuming Bootstrap classes handle most styling) */
-.list-group-item {
-    background-color: var(--app-bg-color);
-    border-color: var(--border-color);
-    color: var(--text-color);
+h2 {
+  color: var(--text-color);
+  margin-bottom: calc(var(--base-margin) * 2);
+  padding-bottom: var(--base-margin);
+  border-bottom: 1px solid var(--border-color);
 }
-.list-group-item .text-muted {
-    color: var(--text-color-secondary);
+
+.loading-indicator, .error-message, .alert-info {
+  margin-top: var(--base-margin);
+  padding: var(--base-padding);
+  border-radius: 4px;
+  color: var(--text-color-secondary);
+  background-color: var(--header-bg-color); /* Use header bg for subtle background */
+  border: 1px solid var(--border-color);
 }
-/* Apply variables to buttons if not handled by global styles or Bootstrap */
+
+.error-message {
+  color: #dc3545; /* Keep specific error color */
+  border-color: #dc3545;
+  background-color: #f8d7da; /* Light red background for errors */
+}
+
+.alert-info {
+    color: var(--text-color); /* Use primary text color for info */
+}
+
+.btn { /* General button styling */
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+    margin: var(--base-margin) 0; /* Add some default margin */
+}
+
 .btn-primary {
     background-color: var(--button-bg-color);
-    border-color: var(--button-bg-color);
+    border: 1px solid var(--button-bg-color);
     color: var(--button-text-color);
 }
 .btn-primary:hover {
      background-color: var(--button-hover-bg-color);
      border-color: var(--button-hover-bg-color);
+     color: var(--button-text-color);
 }
+
 .btn-outline-secondary {
     color: var(--text-color-secondary);
-    border-color: var(--border-color);
+    border: 1px solid var(--border-color);
+    background-color: transparent;
 }
 .btn-outline-secondary:hover {
-    background-color: var(--header-bg-color); /* Example hover */
+    background-color: var(--header-bg-color);
     color: var(--text-color);
+    border-color: var(--border-color);
 }
+
 .btn-outline-danger {
-    color: var(--bs-danger); /* Keep specific color */
-    border-color: var(--bs-danger);
+    color: #dc3545; /* Keep specific danger color */
+    border: 1px solid #dc3545;
+    background-color: transparent;
 }
 .btn-outline-danger:hover {
-    background-color: var(--bs-danger);
+    background-color: #dc3545;
     color: var(--button-text-color);
+    border-color: #dc3545;
 }
-/* Apply variables to badges if needed */
+
+.list-group {
+    list-style: none;
+    padding: 0;
+    margin-top: var(--base-margin);
+}
+
+.list-group-item {
+    background-color: var(--app-bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    padding: var(--base-padding);
+    margin-bottom: var(--base-margin); /* Space between items */
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.list-group-item:last-child {
+    margin-bottom: 0;
+}
+
+.list-group-item strong {
+    color: var(--text-color);
+}
+
+.list-group-item .text-muted {
+    color: var(--text-color-secondary);
+    font-size: 0.9em;
+    margin-top: calc(var(--base-margin) / 2);
+}
+
+.badge {
+    padding: 0.3em 0.6em;
+    font-size: 0.8em;
+    border-radius: 0.25rem;
+    font-weight: bold;
+}
+
 .badge.bg-secondary {
     background-color: var(--text-color-secondary);
-    color: var(--button-text-color); /* Assuming high contrast needed */
+    color: var(--app-bg-color); /* Use app background for contrast */
+}
+.badge.bg-success {
+    background-color: #198754; /* Keep specific success color */
+    color: #fff;
+}
+.badge.bg-warning {
+    background-color: #ffc107; /* Keep specific warning color */
+    color: #000; /* Black text for better contrast on yellow */
 }
-/* Keep success/warning colors for status or define specific variables later */
-/* .badge.bg-success {} */
-/* .badge.bg-warning {} */
-
 
 .modal-placeholder {
-  margin-top: calc(var(--base-margin, 1rem) * 2); /* 使用变量 */
-  padding: var(--base-padding, 1rem); /* 使用变量 */
-  border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
-  background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
+  margin-top: calc(var(--base-margin) * 3);
+  padding: var(--base-padding);
+  border: 1px solid var(--border-color);
+  background-color: var(--header-bg-color);
+  border-radius: 4px;
 }
 </style>
diff --git a/packages/frontend/src/components/StyleCustomizer.vue b/packages/frontend/src/components/StyleCustomizer.vue
index 1dbd51e..c978427 100644
--- a/packages/frontend/src/components/StyleCustomizer.vue
+++ b/packages/frontend/src/components/StyleCustomizer.vue
@@ -517,77 +517,87 @@ const formatXtermLabel = (key: keyof ITheme): string => {
 <style scoped>
 .style-customizer-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0; /* top, right, bottom, left = 0 */
+  background-color: rgba(0, 0, 0, 0.6); /* 更深的遮罩 */
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000; /* 确保在顶层 */
+  z-index: 1000;
 }
 
 .style-customizer-panel {
-  background-color: var(--app-bg-color, #fff);
-  color: var(--text-color, #333);
+  background-color: var(--app-bg-color);
+  color: var(--text-color);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  width: 80%;
-  max-width: 700px; /* 最大宽度 */
-  max-height: 80vh; /* 最大高度 */
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  max-width: 800px; /* 增加最大宽度 */
+  height: 85vh; /* 使用视口高度 */
+  max-height: 700px; /* 限制最大高度 */
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* 防止内容溢出 */
+  overflow: hidden;
 }
 
 .panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--base-padding, 1rem);
-  border-bottom: 1px solid var(--border-color, #ccc);
-  background-color: var(--header-bg-color, #f0f0f0); /* 使用头部背景色 */
+  padding: calc(var(--base-padding) * 0.8) var(--base-padding); /* 调整内边距 */
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--header-bg-color);
+  flex-shrink: 0; /* 防止头部被压缩 */
 }
 
 .panel-header h2 {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 1.25rem; /* 稍大标题 */
+  color: var(--text-color);
 }
 
 .close-button {
   background: none;
   border: none;
-  font-size: 1.5rem;
+  font-size: 1.8rem; /* 增大关闭按钮 */
+  line-height: 1;
   cursor: pointer;
-  color: var(--text-color-secondary, #666);
+  color: var(--text-color-secondary);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+}
+.close-button:hover {
+    color: var(--text-color);
+    background-color: rgba(0,0,0,0.1);
 }
 
 .panel-content {
   display: flex;
   flex-grow: 1;
-  overflow-y: auto; /* 内部滚动 */
+  overflow: hidden; /* 防止内部滚动条影响布局 */
 }
 
 .panel-nav {
-  width: 150px; /* 固定导航宽度 */
-  border-right: 1px solid var(--border-color, #ccc);
-  padding: var(--base-padding, 1rem);
-  background-color: var(--header-bg-color, #f0f0f0); /* 轻微区分背景 */
-  flex-shrink: 0; /* 防止导航栏被压缩 */
+  width: 180px; /* 增加导航宽度 */
+  border-right: 1px solid var(--border-color);
+  padding: var(--base-padding);
+  background-color: var(--header-bg-color);
+  flex-shrink: 0;
+  overflow-y: auto; /* 导航内部滚动 */
 }
 
 .panel-nav button {
   display: block;
   width: 100%;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
+  padding: 0.7rem 0.8rem; /* 增加导航按钮内边距 */
+  margin-bottom: var(--base-margin);
   text-align: left;
   background: none;
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
-  color: var(--text-color, #333);
+  color: var(--text-color);
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .panel-nav button:hover {
@@ -595,222 +605,328 @@ const formatXtermLabel = (key: keyof ITheme): string => {
 }
 
 .panel-nav button.active {
-  background-color: var(--link-active-color, #007bff);
-  color: var(--button-text-color, #fff);
+  background-color: var(--button-bg-color); /* 使用按钮背景色 */
+  color: var(--button-text-color);
   font-weight: bold;
 }
 .panel-nav button:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
-    background-color: transparent !important; /* 确保禁用时背景透明 */
-    color: var(--text-color-secondary, #999); /* 禁用时文字颜色变灰 */
+    background-color: transparent !important;
+    color: var(--text-color-secondary);
 }
 
-
 .panel-main {
   flex-grow: 1;
-  padding: var(--base-padding, 1rem);
+  padding: var(--base-padding) calc(var(--base-padding) * 1.5); /* 增加左右内边距 */
   overflow-y: auto; /* 主要内容区域滚动 */
 }
 
 .panel-main h3 {
   margin-top: 0;
-  border-bottom: 1px solid var(--border-color, #ccc);
-  padding-bottom: 0.5rem;
-  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: var(--base-margin);
+  margin-bottom: calc(var(--base-margin) * 2);
+  font-size: 1.15rem;
+  color: var(--text-color);
 }
 .panel-main h4 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.8rem;
+    margin-top: calc(var(--base-margin) * 2.5);
+    margin-bottom: var(--base-margin);
     color: var(--text-color);
+    font-size: 1.05rem;
 }
 
-.panel-main p {
+.panel-main p:not(.error-message):not(.setting-description) {
     color: var(--text-color-secondary);
     font-size: 0.9rem;
-    margin-bottom: 1.5rem;
+    line-height: 1.6;
+    margin-bottom: calc(var(--base-margin) * 1.5);
 }
 
 .setting-description {
     font-size: 0.85rem;
     color: var(--text-color-secondary);
-    margin-top: -0.5rem; /* 减少与上方元素的间距 */
-    margin-bottom: 1rem;
+    margin-top: calc(var(--base-margin) / -2); /* 减少与上方元素的间距 */
+    margin-bottom: var(--base-margin);
 }
 
 .form-group {
-    margin-bottom: 1rem;
-    display: flex; /* 使用 flex 布局 */
-    align-items: center; /* 垂直居中对齐 */
-    flex-wrap: wrap; /* 允许换行 */
+    margin-bottom: calc(var(--base-margin) * 1.5);
+    display: grid;
+    /* Define grid columns: Auto label, flexible control, auto button */
+    grid-template-columns: auto minmax(0, 1fr) auto; /* Let label width adjust */
+    align-items: center; /* Vertically center items in the row */
+    gap: calc(var(--base-margin) * 1.5); /* Increase gap slightly for better spacing */
 }
+/* Adjust grid for rows without a third element (like inline buttons) */
+.form-group > *:nth-child(2):last-child {
+    grid-column: 2 / 4; /* Let the second element span if it's the last */
+}
+/* Specific adjustments for theme editor rows if needed */
+section[v-if*="isEditingTheme"] .form-group {
+     /* Keep 2 columns for editor: auto label + flexible input */
+    grid-template-columns: auto 1fr;
+    margin-bottom: var(--base-margin);
+    gap: var(--base-margin); /* Keep editor gap smaller */
+}
+
 
 .form-group label {
-    /* display: inline-block; */
-    min-width: 150px; /* 调整标签最小宽度以适应更长的文本 */
-    margin-right: 0.5rem;
-    /* vertical-align: middle; */
-    text-align: right; /* 标签右对齐 */
-    padding-right: 5px; /* 标签和输入框间距 */
-    flex-shrink: 0; /* 防止标签被压缩 */
+    grid-column: 1 / 2;
+    text-align: left; /* Keep text aligned to the left */
+    /* justify-self: start; Removed */
+    padding-right: 0; /* Ensure no right padding interferes */
+    padding-left: 0; /* Ensure no left padding interferes */
+    color: var(--text-color);
+    font-size: 0.9rem;
+    margin-bottom: 0;
+    /* white-space: nowrap; Removed in case it affects alignment */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500; /* 稍微加粗标签 */
+    /* Ensure it behaves predictably within the grid cell */
+    display: block; /* Or inline-block if needed, but block is usually fine */
+    width: 100%; /* Occupy the auto-calculated width */
 }
 
-.form-group input[type="color"] {
-    /* vertical-align: middle; */
-    border: 1px solid var(--border-color);
-    padding: 2px;
-    cursor: pointer;
-    width: 150px; /* 统一输入框宽度 */
-    height: 30px; /* 增加高度 */
-}
-
-.form-group input[type="text"].text-input {
-    /* vertical-align: middle; */
-    border: 1px solid var(--border-color);
-    padding: 4px 6px;
-    border-radius: 3px;
-    width: 150px; /* 统一文本输入框宽度 */
-    flex-grow: 1; /* 允许输入框扩展 */
-    min-width: 100px; /* 最小宽度 */
-}
-.form-group input[type="text"].wide-input {
-    /* width: calc(100% - 200px); */ /* 调整宽度以适应按钮 */
-    /* min-width: 200px; */
-    flex-grow: 1; /* 占据更多空间 */
-}
+/* 输入控件 */
+.form-group input[type="color"],
+.form-group input[type="text"].text-input,
 .form-group select {
-    padding: 4px 6px;
+    grid-column: 2 / 3;
     border: 1px solid var(--border-color);
-    border-radius: 3px;
-    flex-grow: 1;
-    min-width: 150px;
+    padding: 0.5rem 0.7rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    background-color: var(--app-bg-color);
+    color: var(--text-color);
+    width: 100%;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
 }
-.form-group input[type="range"] {
-    flex-grow: 1;
-    margin: 0 10px;
+.form-group input[type="color"] {
+    padding: 2px;
+    height: 34px;
+    min-width: 50px;
+    max-width: 70px;
+    justify-self: start;
+    border-radius: 4px; /* 保持圆角一致 */
+}
+.form-group input:focus, .form-group select:focus {
+    border-color: var(--link-active-color);
+    outline: 0;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* 调整聚焦阴影 */
+}
+
+/* Input controls (text, color, select) */
+.form-group input[type="color"],
+.form-group input[type="text"].text-input,
+.form-group select {
+    grid-column: 2 / 3; /* Place in the second column */
+    /* Existing styles below... */
+    border: 1px solid var(--border-color);
+    padding: 0.5rem 0.7rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    background-color: var(--app-bg-color);
+    color: var(--text-color);
+    width: 100%;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
+}
+.form-group input[type="color"] {
+    padding: 2px;
+    height: 34px;
+    min-width: 50px;
+    max-width: 70px;
+    justify-self: start;
+    border-radius: 4px; /* 保持圆角一致 */
+}
+.form-group input:focus, .form-group select:focus {
+    border-color: var(--link-active-color);
+    outline: 0;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* 调整聚焦阴影 */
 }
 
 
-.panel-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--base-padding, 1rem);
-  border-top: 1px solid var(--border-color, #ccc);
-  background-color: var(--footer-bg-color, #f0f0f0); /* 使用底部背景色 */
+/* Inline buttons within form-group */
+.form-group .button-inline,
+.form-group .button-danger {
+    grid-column: 3 / 4; /* Place in the third column */
+    margin-left: 0; /* Reset margin if needed */
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
+    border: 1px solid var(--border-color);
+    white-space: nowrap;
+    justify-self: start;
+    border-radius: 4px; /* 统一圆角 */
+    transition: background-color 0.2s ease, border-color 0.2s ease; /* 添加过渡 */
 }
-
-.panel-footer button {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-left: 0.5rem;
-  border: 1px solid transparent;
-}
-
-.button-primary {
-  background-color: var(--button-bg-color, #007bff);
-  color: var(--button-text-color, #fff);
-  border-color: var(--button-bg-color, #007bff);
-}
-.button-primary:hover {
-  background-color: var(--button-hover-bg-color, #0056b3);
-  border-color: var(--button-hover-bg-color, #0056b3);
-}
-
-.button-secondary {
-  background-color: #6c757d; /* 暂时硬编码，后续可改为变量 */
-  color: #fff;
-  border-color: #6c757d;
-}
-.button-secondary:hover {
-  background-color: #5a6268;
-  border-color: #545b62;
-}
-
 .button-inline {
-    margin-left: 10px;
-    padding: 4px 8px;
-    /* vertical-align: middle; */
-    flex-shrink: 0; /* 防止按钮被压缩 */
+    background-color: var(--header-bg-color); /* Default inline button style */
+    color: var(--text-color);
 }
+.form-group .button-inline:hover:not(:disabled) {
+    background-color: var(--border-color);
+    border-color: var(--text-color-secondary);
+}
+/* Danger button specific styles remain */
+.form-group .button-danger {
+    background-color: #f8d7da;
+    color: #842029;
+    border-color: #f5c2c7;
+}
+.form-group .button-danger:hover:not(:disabled) {
+    background-color: #f1aeb5;
+    border-color: #ec8a98;
+}
+.form-group .button-danger:disabled,
+.form-group .button-inline:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+
 
 hr {
     border: none;
-    border-top: 1px solid var(--border-color, #eee);
-    margin: 1.5rem 0;
+    border-top: 1px solid var(--border-color);
+    margin: calc(var(--base-padding) * 2) 0;
 }
 
 /* Theme Management Styles */
 .theme-management-buttons {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: var(--base-padding);
+    margin-bottom: calc(var(--base-padding) * 1.5);
     display: flex;
-    gap: 10px; /* 按钮间距 */
-    flex-wrap: wrap; /* 允许换行 */
+    gap: var(--base-margin);
+    flex-wrap: wrap;
+    padding-bottom: var(--base-padding);
+    border-bottom: 1px dashed var(--border-color);
 }
+/* Apply unified styles to theme management buttons - matching button-inline */
 .theme-management-buttons button {
-    padding: 0.5rem 1rem;
+    padding: 0.4rem 0.8rem; /* Match button-inline */
+    font-size: 0.9rem; /* Match button-inline */
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--header-bg-color); /* Match button-inline */
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    white-space: nowrap; /* Match button-inline */
 }
+.theme-management-buttons button:hover:not(:disabled) {
+    background-color: var(--border-color); /* Match button-inline hover */
+    border-color: var(--text-color-secondary);
+}
+.theme-management-buttons button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 
 .theme-list {
     list-style: none;
     padding: 0;
-    margin-top: 1rem;
-    max-height: 200px; /* 限制列表高度并滚动 */
+    margin-top: 0;
+    max-height: 280px;
     overflow-y: auto;
     border: 1px solid var(--border-color);
     border-radius: 4px;
+    background-color: var(--app-bg-color);
 }
 
 .theme-list li {
-    display: flex;
-    justify-content: space-between;
+    display: grid; /* 使用 Grid 布局列表项 */
+    grid-template-columns: 1fr auto; /* 名称弹性，按钮固定 */
     align-items: center;
-    padding: 0.5rem 1rem;
+    padding: 0.7rem 1rem;
     border-bottom: 1px solid var(--border-color);
+    font-size: 0.95rem;
+    transition: background-color 0.2s ease;
+    gap: var(--base-margin); /* 列间距 */
+}
+.theme-list li:hover {
+    background-color: var(--header-bg-color);
 }
 .theme-list li:last-child {
     border-bottom: none;
 }
+.theme-list li span { /* 主题名称 */
+    grid-column: 1 / 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .theme-list li.preset-theme span {
     font-style: italic;
     color: var(--text-color-secondary);
 }
 .theme-actions {
-    flex-shrink: 0; /* 防止按钮组被压缩 */
+    grid-column: 2 / 3; /* 按钮组在第二列 */
+    flex-shrink: 0;
+    display: flex;
+    gap: 0.5rem;
 }
+/* Apply unified styles to theme action buttons - matching button-inline */
 .theme-actions button {
-    margin-left: 0.5rem;
-    padding: 2px 6px;
-    font-size: 0.8rem;
+    margin-left: 0;
+    padding: 0.4rem 0.8rem; /* Corrected padding to match button-inline */
+    font-size: 0.9rem; /* Corrected font size to match button-inline */
+    border: 1px solid var(--border-color);
+    border-radius: 4px; /* Match border-radius */
+    background-color: var(--header-bg-color); /* Default style */
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    white-space: nowrap;
 }
-.button-danger {
-    background-color: #dc3545;
-    color: white;
-    border-color: #dc3545;
+.theme-actions button:hover:not(:disabled) {
+    background-color: var(--border-color);
+    border-color: var(--text-color-secondary);
 }
-.button-danger:hover {
-    background-color: #c82333;
-    border-color: #bd2130;
+/* Specific style for danger button within theme actions */
+/* Specific style for danger button within theme actions */
+.theme-actions button.button-danger {
+    /* Danger colors override default */
+    background-color: #f8d7da;
+    color: #842029;
+    border-color: #f5c2c7;
+    /* Size and padding are inherited from the base .theme-actions button rule */
 }
-.button-danger:disabled {
-    opacity: 0.5;
+.theme-actions button.button-danger:hover:not(:disabled) {
+    /* Danger hover overrides default hover */
+    background-color: #f1aeb5;
+    border-color: #ec8a98;
+}
+.theme-actions button:disabled {
+    opacity: 0.6;
     cursor: not-allowed;
 }
 
+
 .editor-footer {
-    margin-top: 1.5rem;
+    margin-top: var(--base-padding);
     display: flex;
     justify-content: flex-end;
-    gap: 10px;
+    gap: var(--base-margin);
+    padding-top: var(--base-padding);
+    border-top: 1px solid var(--border-color);
+}
+.editor-footer button { /* 确保页脚按钮样式统一 */
+    padding: 0.6rem 1.2rem;
+    border-radius: 4px;
+    font-weight: bold;
 }
 
 /* Background Styles */
 .background-preview {
     width: 100%;
-    height: 100px;
+    height: 150px;
     border: 1px dashed var(--border-color);
-    margin-bottom: 10px;
+    margin-bottom: var(--base-margin);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -818,21 +934,115 @@ hr {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+    border-radius: 4px;
+    background-color: var(--header-bg-color);
+    position: relative;
+    overflow: hidden; /* 防止背景图溢出圆角 */
 }
+.background-preview span {
+    background-color: rgba(255, 255, 255, 0.8); /* 增加背景不透明度 */
+    padding: 0.4rem 0.8rem; /* 增加内边距 */
+    border-radius: 3px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-color); /* 使用主文本颜色 */
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 添加轻微阴影 */
+}
+
 .background-controls {
     display: flex;
-    gap: 10px;
-    margin-bottom: 1rem;
+    gap: var(--base-margin);
+    margin-bottom: var(--base-padding);
     flex-wrap: wrap;
+    align-items: center;
 }
-.background-controls button {
-    padding: 0.5rem 1rem;
+/* Style default buttons in background-controls - matching button-inline */
+.background-controls button:not(.button-danger) {
+    padding: 0.4rem 0.8rem; /* Match button-inline */
+    font-size: 0.9rem; /* Match button-inline */
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--header-bg-color); /* Match button-inline */
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    white-space: nowrap; /* Match button-inline */
+}
+.background-controls button:not(.button-danger):hover:not(:disabled) {
+    background-color: var(--border-color); /* Match button-inline hover */
+    border-color: var(--text-color-secondary);
+}
+/* Ensure danger button styles override default if necessary */
+.background-controls button.button-danger {
+    /* Keep specific danger styles */
+    padding: 0.4rem 0.8rem; /* Match padding */
+    font-size: 0.9rem; /* Match font size */
+    border-radius: 4px; /* Match border radius */
+    white-space: nowrap; /* Match button-inline */
+    background-color: #f8d7da; /* 淡红色背景 */
+    color: #842029; /* 深红色文字 */
+    border-color: #f5c2c7; /* 边框颜色 */
+}
+.background-controls button.button-danger:hover:not(:disabled) {
+    background-color: #f1aeb5;
+    border-color: #ec8a98;
+}
+.background-controls button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
 .error-message {
-    color: red;
-    font-size: 0.9rem;
-    margin-top: 5px;
-    width: 100%; /* 确保错误消息占满宽度 */
+  color: #842029;
+  background-color: #f8d7da;
+  border: 1px solid #f5c2c7;
+  padding: calc(var(--base-padding) * 0.75);
+  border-radius: 4px;
+  margin-top: var(--base-margin);
+  font-size: 0.9rem;
+  width: 100%;
+  box-sizing: border-box;
+  grid-column: 1 / -1; /* 错误消息横跨所有列 */
 }
+
+.panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--base-padding);
+  border-top: 1px solid var(--border-color);
+  background-color: var(--footer-bg-color);
+  flex-shrink: 0;
+}
+
+.panel-footer button {
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: var(--base-margin);
+  border: 1px solid transparent;
+  font-weight: bold;
+}
+
+.panel-footer .button-primary {
+  background-color: var(--button-bg-color);
+  color: var(--button-text-color);
+  border-color: var(--button-bg-color);
+}
+.panel-footer .button-primary:hover:not(:disabled) {
+  background-color: var(--button-hover-bg-color);
+  border-color: var(--button-hover-bg-color);
+}
+.panel-footer .button-secondary {
+  background-color: var(--header-bg-color);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+.panel-footer .button-secondary:hover:not(:disabled) {
+  background-color: var(--border-color);
+}
+.panel-footer button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 </style>
diff --git a/packages/frontend/src/views/SettingsView.vue b/packages/frontend/src/views/SettingsView.vue
index 3650118..3de9f10 100644
--- a/packages/frontend/src/views/SettingsView.vue
+++ b/packages/frontend/src/views/SettingsView.vue
@@ -574,200 +574,288 @@ onMounted(async () => {
 
 <style scoped>
 .settings-view {
-  padding: var(--base-padding, 20px); /* 使用变量，保留默认值 */
+  padding: var(--base-padding);
   color: var(--text-color);
   background-color: var(--app-bg-color);
 }
 
-.settings-section {
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 3); /* 调整间距 */
-  padding: var(--base-padding, 20px); /* 使用变量 */
-  border: 1px solid var(--border-color, #ccc); /* 使用变量 */
-  border-radius: 5px;
-  background-color: var(--app-bg-color); /* 确保背景色一致 */
+h1 {
+  margin-bottom: calc(var(--base-margin) * 3);
+  padding-bottom: var(--base-margin);
+  border-bottom: 1px solid var(--border-color);
 }
 
+.settings-section {
+  margin-bottom: calc(var(--base-margin) * 4); /* 增加区域间距 */
+  padding: calc(var(--base-padding) * 1.5); /* 增加区域内边距 */
+  border: 1px solid var(--border-color);
+  border-radius: 6px; /* 稍圆润的边角 */
+  background-color: var(--app-bg-color);
+  /* box-shadow: 0 1px 3px rgba(0,0,0,0.05); */ /* 可选：添加轻微阴影 */
+}
+
+.settings-section h2 {
+  font-size: 1.3rem;
+  color: var(--text-color);
+  margin-top: 0;
+  margin-bottom: calc(var(--base-margin) * 2);
+  padding-bottom: var(--base-margin);
+  border-bottom: 1px dashed var(--border-color); /* 虚线分隔 */
+}
+
+.settings-section p:not([class*="-message"]) { /* 普通段落样式 */
+    color: var(--text-color-secondary);
+    line-height: 1.6;
+    margin-bottom: var(--base-margin);
+}
+.setting-description { /* 特定描述文本 */
+    font-size: 0.9em;
+    color: var(--text-color-secondary);
+    margin-bottom: var(--base-margin);
+}
+
+
 .form-group {
-  margin-bottom: 15px;
+  margin-bottom: calc(var(--base-margin) * 1.5);
 }
 
 label {
   display: block;
-  margin-bottom: 5px;
+  margin-bottom: calc(var(--base-margin) / 2);
+  font-weight: bold;
+  color: var(--text-color);
 }
 
 input[type="password"],
 input[type="text"],
+input[type="number"], /* 添加 number 类型 */
 textarea,
-select { /* Add select style */
+select {
   width: 100%;
-  padding: 8px; /* 保持特定内边距 */
+  padding: 0.6rem 0.8rem; /* 调整内边距 */
   box-sizing: border-box;
-  border: 1px solid var(--border-color, #ccc); /* 使用变量 */
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  font-family: var(--font-family-sans-serif, sans-serif); /* 使用变量 */
-  font-size: inherit;
-  color: var(--text-color); /* 确保输入文本颜色 */
-  background-color: var(--app-bg-color); /* 确保输入背景色 */
+  font-family: var(--font-family-sans-serif);
+  font-size: 1rem;
+  color: var(--text-color);
+  background-color: var(--app-bg-color);
+  transition: border-color 0.2s ease;
+}
+input:focus, textarea:focus, select:focus {
+    border-color: var(--link-active-color); /* 聚焦时高亮边框 */
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15); /* 细微的聚焦阴影 */
 }
 
 textarea {
     resize: vertical;
-    min-height: 80px;
+    min-height: 100px;
 }
 
 small {
     display: block;
-    margin-top: 5px;
+    margin-top: calc(var(--base-margin) / 2);
     font-size: 0.85em;
-    color: var(--text-color-secondary, #666); /* 使用变量 */
+    color: var(--text-color-secondary);
 }
 
-
-button {
-  padding: 10px 15px;
+button, .btn { /* 统一按钮样式 */
+  padding: 0.6rem 1.2rem; /* 调整按钮内边距 */
   cursor: pointer;
-  background-color: var(--button-bg-color, #007bff); /* 使用变量 */
-  color: var(--button-text-color, #ffffff); /* 使用变量 */
-  border: none; /* 移除默认边框 */
+  background-color: var(--button-bg-color);
+  color: var(--button-text-color);
+  border: 1px solid var(--button-bg-color); /* 添加边框 */
   border-radius: 4px;
+  font-weight: bold;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  margin-right: var(--base-margin); /* 按钮间距 */
+}
+button:last-of-type, .btn:last-of-type {
+    margin-right: 0;
 }
 
-button:hover:not(:disabled) {
-  background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
+button:hover:not(:disabled), .btn:hover:not(:disabled) {
+  background-color: var(--button-hover-bg-color);
+  border-color: var(--button-hover-bg-color);
 }
 
-button:disabled {
+button:disabled, .btn:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
+/* 次要按钮样式 (例如取消按钮) */
+button[type="button"], .btn-secondary {
+    background-color: var(--header-bg-color);
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+button[type="button"]:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
+    background-color: var(--border-color);
+    border-color: var(--border-color);
+}
+
 hr {
     border: none;
-    border-top: 1px solid var(--border-color, #eee); /* 使用变量 */
-    margin: 30px 0;
+    border-top: 1px solid var(--border-color);
+    margin: calc(var(--base-margin) * 4) 0; /* 增加分隔线间距 */
 }
 
 code {
-    background-color: var(--header-bg-color, #f1f1f1); /* 使用变量 */
-    padding: 2px 4px;
+    background-color: var(--header-bg-color);
+    padding: 0.2em 0.4em;
     border-radius: 3px;
-    color: var(--text-color); /* 确保代码文本颜色 */
+    color: var(--text-color);
     font-family: monospace;
+    font-size: 0.9em;
 }
 
 img {
     display: block;
-    margin: 10px 0;
+    margin: var(--base-margin) auto; /* 居中显示 */
     max-width: 200px;
+    border: 1px solid var(--border-color);
+    padding: 5px;
+    background-color: white; /* 确保二维码背景是白色 */
 }
 
 .success-message {
-  color: green;
-  margin-top: 10px;
+  color: #198754; /* Bootstrap success color */
+  background-color: #d1e7dd; /* Light green background */
+  border: 1px solid #a3cfbb;
+  padding: var(--base-padding);
+  border-radius: 4px;
+  margin-top: var(--base-margin);
 }
 
 .error-message {
-  color: red;
-  margin-top: 10px;
+  color: #842029; /* Bootstrap danger color */
+  background-color: #f8d7da; /* Light red background */
+  border: 1px solid #f5c2c7;
+  padding: var(--base-padding);
+  border-radius: 4px;
+  margin-top: var(--base-margin);
+}
+.loading-message {
+    margin-top: var(--base-margin);
+    color: var(--text-color-secondary);
+    font-style: italic;
 }
 
 /* Blacklist Table Styles */
 .blacklist-table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: 15px;
+  margin-top: var(--base-padding);
+  font-size: 0.95rem;
 }
 
 .blacklist-table th,
 .blacklist-table td {
-  border: 1px solid var(--border-color, #ddd); /* 使用变量 */
-  padding: 8px;
+  border: 1px solid var(--border-color);
+  padding: 0.75rem; /* 调整单元格内边距 */
   text-align: left;
+  vertical-align: middle;
+}
+
+.blacklist-table th {
+  background-color: var(--header-bg-color);
+  font-weight: bold;
+  color: var(--text-color);
+}
+
+.blacklist-table tr:nth-child(even) {
+    background-color: var(--header-bg-color); /* 斑马纹 */
+}
+
+.blacklist-table .btn-danger {
+  background-color: #dc3545;
+  color: var(--button-text-color);
+  border: none;
+  padding: 0.3rem 0.6rem; /* 调整小按钮内边距 */
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9em;
+}
+
+.blacklist-table .btn-danger:disabled {
+  background-color: #f8d7da;
+  cursor: not-allowed;
+  opacity: 0.7;
 }
 
 /* 复选框组样式 */
 .form-group-checkbox {
   display: flex;
   align-items: center;
+  margin-bottom: var(--base-margin); /* 确保与其他组间距一致 */
 }
 
 .form-group-checkbox input[type="checkbox"] {
-  width: auto; /* 不要占满宽度 */
-  margin-right: 10px;
+  width: auto;
+  margin-right: 0.6rem; /* 调整复选框和标签间距 */
+  flex-shrink: 0; /* 防止复选框被压缩 */
+  appearance: none; /* 自定义样式 */
+  background-color: var(--app-bg-color);
+  border: 1px solid var(--border-color);
+  width: 1.1em;
+  height: 1.1em;
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+  top: 2px; /* 微调垂直对齐 */
 }
+.form-group-checkbox input[type="checkbox"]:checked {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-bg-color);
+}
+/* 添加勾选标记 */
+.form-group-checkbox input[type="checkbox"]:checked::after {
+    content: '✔';
+    position: absolute;
+    color: var(--button-text-color);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.8em;
+}
+
 
 .form-group-checkbox label {
-  display: inline-block; /* 让标签和复选框在同一行 */
-  margin-bottom: 0; /* 移除默认的块级标签下边距 */
+  display: inline-block;
+  margin-bottom: 0;
   cursor: pointer;
+  font-weight: normal; /* 普通标签字体重量 */
 }
 
-.blacklist-table th {
-  background-color: var(--header-bg-color, #f2f2f2); /* 使用变量 */
-  font-weight: bold;
-  color: var(--text-color); /* 确保表头文本颜色 */
-}
-
-.blacklist-table .btn-danger {
-  background-color: #dc3545; /* 保留危险色 */
-  color: var(--button-text-color, white); /* 使用变量 */
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.blacklist-table .btn-danger:disabled {
-  background-color: #f8d7da;
-  cursor: not-allowed;
-}
-
-.loading-message {
-    margin-top: 15px;
-    color: var(--text-color-secondary, #666); /* 使用变量 */
-}
-
-/* Pagination Styles (Optional) */
-.pagination {
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.pagination button {
-    margin: 0 5px;
-}
-.pagination span {
-    margin: 0 10px;
-}
 
 /* Blacklist Settings Form Styles */
 .blacklist-settings-form {
-    margin-top: 15px;
+    margin-top: var(--base-padding);
+    padding-top: var(--base-padding);
+    border-top: 1px dashed var(--border-color);
 }
 .blacklist-settings-form .inline-group {
-    display: inline-block;
-    margin-right: 20px;
-    margin-bottom: 10px;
+    display: inline-flex; /* 使用 flex 布局 */
+    align-items: center; /* 垂直居中 */
+    margin-right: calc(var(--base-margin) * 2);
+    margin-bottom: var(--base-margin);
 }
 .blacklist-settings-form .inline-group label {
-    display: inline-block;
-    margin-right: 5px;
-    width: auto;
-    margin-bottom: 0;
+    margin-right: var(--base-margin);
+    margin-bottom: 0; /* 移除 label 下边距 */
+    white-space: nowrap; /* 防止标签换行 */
 }
 .blacklist-settings-form .inline-group input[type="number"] {
-    width: 80px;
-    display: inline-block;
-    padding: 6px;
+    width: 80px; /* 固定宽度 */
+    padding: 0.5rem; /* 调整内边距 */
 }
 .blacklist-settings-form button {
-    vertical-align: bottom;
+    vertical-align: middle; /* 尝试对齐按钮 */
 }
 .blacklist-settings-form p {
-    margin-top: 10px;
+    margin-top: var(--base-margin);
 }
 
-
 </style>