From 5c6cc05c54f8ea2b1d4bbf9b3e2e3e91cc8c322c Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Fri, 18 Apr 2025 19:01:58 +0800
Subject: [PATCH] update

---
 .../components/NotificationSettingForm.vue    | 298 +++++---
 .../src/components/NotificationSettings.vue   | 272 ++++---
 packages/frontend/src/locales/en.json         |   3 +-
 packages/frontend/src/locales/zh.json         |   3 +-
 packages/frontend/src/style.css               |   6 +-
 packages/frontend/src/views/AuditLogView.vue  | 191 ++---
 packages/frontend/src/views/SettingsView.vue  | 704 ++++++++++--------
 7 files changed, 854 insertions(+), 623 deletions(-)

diff --git a/packages/frontend/src/components/NotificationSettingForm.vue b/packages/frontend/src/components/NotificationSettingForm.vue
index 3de5033..fd72b03 100644
--- a/packages/frontend/src/components/NotificationSettingForm.vue
+++ b/packages/frontend/src/components/NotificationSettingForm.vue
@@ -114,7 +114,7 @@
     </div>
 
     <!-- Unified Test Button Area -->
-    <div class="mb-3 text-center">
+    <div class="test-button-area"> <!-- Added class -->
         <!-- Show button if editing OR if adding and required fields are filled -->
         <button
             v-if="isEditing || canTestUnsaved"
@@ -140,8 +140,8 @@
     <!-- Enabled Events -->
     <div class="mb-3">
         <label class="form-label">{{ $t('settings.notifications.form.enabledEvents') }}</label>
-        <div class="row">
-            <div v-for="event in allNotificationEvents" :key="event" class="col-md-4 col-sm-6">
+        <div class="enabled-events-grid"> <!-- Changed class -->
+            <div v-for="event in allNotificationEvents" :key="event"> <!-- Removed col classes -->
                 <div class="form-check">
                     <input
                         type="checkbox"
@@ -157,7 +157,7 @@
     </div>
 
 
-    <div class="d-flex justify-content-end">
+    <div class="form-actions"> <!-- Added class -->
       <button type="button" @click="handleCancel" class="btn btn-secondary me-2">{{ $t('common.cancel') }}</button>
       <button type="submit" class="btn btn-primary" :disabled="store.isLoading || !!headerError || testingNotification">
         {{ store.isLoading ? $t('common.saving') : $t('common.save') }}
@@ -457,162 +457,234 @@ const handleTestNotification = async () => {
 </script>
 
 <style scoped>
+/* Form container - Inherits styles from .form-section in parent */
 .notification-setting-form {
-  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 */
+  max-width: 800px; /* Limit form width */
+  margin: 0 auto; /* Center the form */
 }
 
 h3 {
   color: var(--text-color);
-  margin-bottom: calc(var(--base-margin) * 2);
+  margin-bottom: calc(var(--base-margin) * 1.5); /* Adjust margin */
   padding-bottom: var(--base-margin);
-  border-bottom: 1px solid var(--border-color);
-  font-size: 1.25rem; /* Slightly larger heading */
+  border-bottom: 1px solid var(--border-color-light, var(--border-color)); /* Lighter border */
+  font-size: 1.4rem; /* Adjust size */
+  font-weight: 600;
 }
 
-.mb-3 { /* Bootstrap margin bottom class */
-  margin-bottom: calc(var(--base-margin) * 1.5) !important; /* Use variable, increase slightly */
+.mb-3 {
+  margin-bottom: calc(var(--base-margin) * 1.2) !important; /* Consistent margin */
 }
 
+/* Form Elements Styling (Consistent with SettingsView) */
 .form-label {
   display: block;
-  margin-bottom: calc(var(--base-margin) / 2);
+  margin-bottom: calc(var(--base-margin) / 3);
+  font-weight: 600;
   color: var(--text-color);
-  font-weight: bold;
+  font-size: 0.9rem;
 }
 
-.form-control, .form-select, .form-check-input {
-  background-color: var(--app-bg-color);
-  color: var(--text-color);
+.form-control, .form-select {
+  width: 100%;
+  padding: 0.5rem 0.7rem;
+  box-sizing: border-box;
   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 */
+  border-radius: 5px;
+  font-family: var(--font-family-sans-serif);
+  font-size: 0.95rem;
+  color: var(--text-color);
+  background-color: var(--input-bg-color, var(--app-bg-color));
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 .form-control:focus, .form-select:focus {
-    border-color: var(--link-active-color); /* Highlight focus */
+    border-color: var(--link-active-color);
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Optional focus shadow */
+    box-shadow: 0 0 0 3px rgba(var(--rgb-link-active-color, 0, 123, 255), 0.2);
+}
+.form-select {
+    appearance: none; /* Custom arrow styling might be needed */
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
 }
 
 textarea.form-control {
-    min-height: 80px; /* Give textareas more space */
+    min-height: 100px; /* Adjust height */
+    resize: vertical;
 }
 
+/* Checkbox Styling (Consistent with SettingsView) */
 .form-check {
-  display: flex; /* Align checkbox and label */
+  display: flex;
   align-items: center;
-  padding-left: 0; /* Reset Bootstrap padding */
+  padding-left: 0;
+  margin-bottom: calc(var(--base-margin) / 2); /* Spacing for checkbox groups */
 }
 .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 {
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: 0.7rem;
+  flex-shrink: 0;
+  appearance: none;
+  background-color: var(--input-bg-color, var(--app-bg-color));
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  padding: var(--base-padding);
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.form-check-input:checked {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-bg-color);
+}
+.form-check-input:checked::after {
+    content: '✔';
+    position: absolute;
+    color: var(--button-text-color);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.85em;
+    font-weight: bold;
+}
+.form-check-input:focus {
+    box-shadow: 0 0 0 3px rgba(var(--rgb-link-active-color, 0, 123, 255), 0.2);
+    outline: 0;
+}
+.form-check-label {
+  margin-bottom: 0;
+  cursor: pointer;
+  font-weight: normal;
+  font-size: 0.95rem;
+  user-select: none;
+}
+
+/* Channel Config Section */
+.channel-config {
+  border: 1px solid var(--border-color-light, var(--border-color)); /* Lighter border */
+  border-radius: 6px; /* Slightly rounded */
+  padding: calc(var(--base-padding) * 1.2); /* Adjust padding */
   margin-top: var(--base-margin);
-  background-color: var(--header-bg-color); /* Slightly different background */
+  margin-bottom: calc(var(--base-margin) * 1.5); /* Ensure space below */
+  background-color: rgba(0,0,0,0.02); /* Very subtle background */
 }
 
 .channel-config h4 {
-    font-size: 1rem;
-    font-weight: bold;
+    font-size: 1.1rem; /* Adjust size */
+    font-weight: 600;
     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 */
+    padding-bottom: calc(var(--base-margin) * 0.75);
+    border-bottom: 1px dashed var(--border-color-light, var(--border-color));
 }
 
-/* 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;
+/* Enabled Events Layout */
+.enabled-events-grid { /* Use this class on the div wrapping the events */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
+    gap: calc(var(--base-margin) / 2) var(--base-margin); /* Row and column gap */
+    margin-top: calc(var(--base-margin) / 2);
 }
 
+/* Helper Text and Errors */
+.text-muted {
+  color: var(--text-color-secondary);
+  font-size: 0.85em;
+  display: block;
+  margin-top: calc(var(--base-margin) / 3);
+}
+.text-danger, .alert-danger {
+    color: #842029;
+    font-size: 0.9em;
+}
+.text-success {
+    color: #0f5132;
+    font-size: 0.9em;
+}
+.alert-danger { /* Style for form error */
+    background-color: #f8d7da;
+    border: 1px solid #f5c2c7;
+    border-left: 4px solid #842029;
+    padding: 0.8rem 1rem;
+    border-radius: 5px;
+    margin-top: var(--base-margin);
+}
+
+/* Test Button Area */
+.test-button-area { /* Add this class to the div wrapping the test button */
+    margin-top: calc(var(--base-margin) * 1.5);
+    margin-bottom: calc(var(--base-margin) * 1.5);
+    text-align: center;
+}
+.test-button-area .btn-outline-secondary {
+    /* Use base btn-outline-secondary */
+}
+.test-button-area .text-muted,
+.test-button-area .text-danger,
+.test-button-area .text-success {
+    margin-top: calc(var(--base-margin) / 2);
+}
+
+
+/* Button Styles (Inherited from parent component's style block) */
+/* Ensure .btn, .btn-primary, .btn-secondary, .btn-sm are defined there or globally */
 .spinner-border-sm {
     width: 1rem;
     height: 1rem;
     border-width: 0.2em;
-    vertical-align: -0.125em; /* Align spinner better with text */
+    vertical-align: -0.125em;
+    margin-right: 0.3rem; /* Space between spinner and text */
 }
 
-.alert { /* General alert styling */
-    padding: var(--base-padding);
-    margin-top: var(--base-margin);
-    border: 1px solid transparent;
-    border-radius: 4px;
+/* Final Action Buttons */
+.form-actions { /* Add this class to the div wrapping save/cancel */
+    display: flex;
+    justify-content: flex-end;
+    margin-top: calc(var(--base-margin) * 2);
+    padding-top: var(--base-margin);
+    border-top: 1px solid var(--border-color-light, var(--border-color));
 }
-.alert-danger {
-    color: #842029;
-    background-color: #f8d7da;
-    border-color: #f5c2c7;
+.form-actions .btn {
+    margin-left: var(--base-margin);
+    /* Re-affirming button styles for clarity */
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    border: 1px solid transparent;
+}
+.form-actions .btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+.form-actions .btn:active:not(:disabled) {
+    transform: translateY(0px);
+}
+.form-actions .btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+.form-actions .btn-primary {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-bg-color);
+    color: var(--button-text-color);
+}
+.form-actions .btn-primary:hover:not(:disabled) {
+     background-color: var(--button-hover-bg-color);
+     border-color: var(--button-hover-bg-color);
+}
+.form-actions .btn-secondary {
+    background-color: var(--secondary-button-bg-color, var(--header-bg-color));
+    color: var(--secondary-button-text-color, var(--text-color));
+    border: 1px solid var(--border-color);
+}
+.form-actions .btn-secondary:hover:not(:disabled) {
+    background-color: var(--secondary-button-hover-bg-color, var(--border-color));
+    border-color: var(--border-color);
 }
 </style>
diff --git a/packages/frontend/src/components/NotificationSettings.vue b/packages/frontend/src/components/NotificationSettings.vue
index e45a1d2..964d739 100644
--- a/packages/frontend/src/components/NotificationSettings.vue
+++ b/packages/frontend/src/components/NotificationSettings.vue
@@ -11,37 +11,40 @@
 
     <div v-if="!store.isLoading && !store.error">
       <button @click="showAddForm = true" class="btn btn-primary mb-3">
-        {{ $t('settings.notifications.addChannel') }}
+        <i class="fas fa-plus me-1"></i> {{ $t('settings.notifications.addChannel') }} <!-- Optional: Add icon -->
       </button>
 
       <div v-if="settings.length === 0" class="alert alert-info">
         {{ $t('settings.notifications.noChannels') }}
       </div>
 
-      <ul v-else class="list-group">
-        <li v-for="setting in settings" :key="setting.id" class="list-group-item d-flex justify-content-between align-items-center">
-          <div>
-            <strong class="me-2">{{ setting.name }}</strong>
-            <span class="badge bg-secondary me-1">{{ getChannelTypeName(setting.channel_type) }}</span>
-            <span :class="['badge', setting.enabled ? 'bg-success' : 'bg-warning']">
-              {{ setting.enabled ? $t('common.enabled') : $t('common.disabled') }}
-            </span>
-            <small class="d-block text-muted">{{ getEventNames(setting.enabled_events) }}</small>
+      <!-- Use a container for the list -->
+      <div v-else class="notification-list-container">
+        <div v-for="setting in settings" :key="setting.id" class="notification-item">
+          <div class="notification-item-details">
+            <strong class="notification-name">{{ setting.name }}</strong>
+            <div class="notification-badges">
+                <span class="badge badge-channel-type me-1">{{ getChannelTypeName(setting.channel_type) }}</span>
+                <span :class="['badge', setting.enabled ? 'badge-status-enabled' : 'badge-status-disabled']">
+                {{ setting.enabled ? $t('common.enabled') : $t('common.disabled') }}
+                </span>
+            </div>
+            <small class="notification-events">{{ getEventNames(setting.enabled_events) }}</small>
           </div>
-          <div>
-            <button @click="editSetting(setting)" class="btn btn-sm btn-outline-secondary me-2">
-              {{ $t('common.edit') }}
+          <div class="notification-item-actions">
+            <button @click="editSetting(setting)" class="btn btn-sm btn-secondary me-2"> <!-- Changed to btn-secondary -->
+              <i class="fas fa-pencil-alt"></i> {{ $t('common.edit') }} <!-- Optional: Add icon -->
             </button>
-            <button @click="confirmDelete(setting)" class="btn btn-sm btn-outline-danger">
-              {{ $t('common.delete') }}
+            <button @click="confirmDelete(setting)" class="btn btn-sm btn-danger"> <!-- Changed to btn-danger -->
+               <i class="fas fa-trash-alt"></i> {{ $t('common.delete') }} <!-- Optional: Add icon -->
             </button>
           </div>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
 
-    <!-- Add/Edit Form Modal (Placeholder - will create NotificationSettingForm.vue next) -->
-    <div v-if="showAddForm || editingSetting" class="modal-placeholder">
+    <!-- Add/Edit Form Section -->
+    <div v-if="showAddForm || editingSetting" class="form-section">
       <!-- Use a simple conditional rendering for the form for now -->
       <!-- TODO: Consider using a proper modal component for better UX -->
       <NotificationSettingForm
@@ -119,132 +122,209 @@ const handleSave = (savedSetting: NotificationSetting) => {
 <style scoped>
 .notification-settings {
   padding: var(--base-padding);
-  /* Inherits text color and background from parent (NotificationsView) */
 }
 
 h2 {
   color: var(--text-color);
-  margin-bottom: calc(var(--base-margin) * 2);
+  margin-bottom: calc(var(--base-margin) * 1.5); /* Adjust margin */
   padding-bottom: var(--base-margin);
   border-bottom: 1px solid var(--border-color);
+  font-size: 1.6rem; /* Adjust size */
 }
 
 .loading-indicator, .error-message, .alert-info {
   margin-top: var(--base-margin);
   padding: var(--base-padding);
-  border-radius: 4px;
+  border-radius: 6px; /* Consistent radius */
+  border: 1px solid transparent; /* Base border */
+}
+
+.loading-indicator {
   color: var(--text-color-secondary);
-  background-color: var(--header-bg-color); /* Use header bg for subtle background */
-  border: 1px solid var(--border-color);
+  font-style: italic;
+  text-align: center;
 }
 
 .error-message {
-  color: #dc3545; /* Keep specific error color */
-  border-color: #dc3545;
-  background-color: #f8d7da; /* Light red background for errors */
+  color: #842029;
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+  border-left: 4px solid #842029;
 }
 
 .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 */
+    color: var(--info-text-color, #0c5460);
+    background-color: var(--info-bg-color, #d1ecf1);
+    border-color: var(--info-border-color, #bee5eb);
+    border-left: 4px solid var(--info-border-color, #bee5eb);
 }
 
+/* Add Channel Button */
 .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);
+    margin-bottom: calc(var(--base-margin) * 1.5) !important; /* Ensure spacing below button */
+    /* Inherits base btn styles */
 }
 
-.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-outline-danger {
-    color: #dc3545; /* Keep specific danger color */
-    border: 1px solid #dc3545;
-    background-color: transparent;
-}
-.btn-outline-danger:hover {
-    background-color: #dc3545;
-    color: var(--button-text-color);
-    border-color: #dc3545;
-}
-
-.list-group {
-    list-style: none;
-    padding: 0;
+/* Notification List Container */
+.notification-list-container {
     margin-top: var(--base-margin);
+    display: grid; /* Use grid for layout */
+    gap: var(--base-margin); /* Space between items */
 }
 
-.list-group-item {
-    background-color: var(--app-bg-color);
+/* Individual Notification Item (Card-like) */
+.notification-item {
+    background-color: var(--content-bg-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;
+    border-radius: 8px; /* Rounded corners */
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start; /* Align items to the top */
+    gap: var(--base-margin); /* Space between details and actions */
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* Subtle shadow */
+    transition: box-shadow 0.2s ease;
 }
-.list-group-item:last-child {
-    margin-bottom: 0;
+.notification-item:hover {
+    box-shadow: 0 3px 8px rgba(0,0,0,0.06); /* Slightly larger shadow on hover */
 }
 
-.list-group-item strong {
+.notification-item-details {
+    flex-grow: 1; /* Allow details to take up available space */
+}
+
+.notification-name {
+    font-weight: 600; /* Make name slightly bolder */
+    font-size: 1.1rem;
     color: var(--text-color);
+    display: block; /* Ensure it takes its own line */
+    margin-bottom: calc(var(--base-margin) / 4);
 }
 
-.list-group-item .text-muted {
+.notification-badges {
+    margin-bottom: calc(var(--base-margin) / 2);
+}
+
+.notification-events {
     color: var(--text-color-secondary);
     font-size: 0.9em;
+    display: block; /* Ensure it takes its own line */
     margin-top: calc(var(--base-margin) / 2);
 }
 
+.notification-item-actions {
+    display: flex;
+    align-items: center; /* Align buttons vertically */
+    flex-shrink: 0; /* Prevent actions from shrinking */
+}
+
+/* Badge Styling */
 .badge {
-    padding: 0.3em 0.6em;
-    font-size: 0.8em;
-    border-radius: 0.25rem;
-    font-weight: bold;
+    padding: 0.3em 0.7em; /* Adjust padding */
+    font-size: 0.75rem; /* Adjust size */
+    border-radius: 4px; /* Slightly rounded */
+    font-weight: 600;
+    text-transform: uppercase; /* Optional: Uppercase text */
+    letter-spacing: 0.5px; /* Optional: Add letter spacing */
+    line-height: 1; /* Ensure consistent height */
 }
 
-.badge.bg-secondary {
-    background-color: var(--text-color-secondary);
-    color: var(--app-bg-color); /* Use app background for contrast */
+.badge-channel-type {
+    background-color: var(--secondary-button-bg-color, var(--header-bg-color));
+    color: var(--secondary-button-text-color, var(--text-color));
+    border: 1px solid var(--border-color);
 }
-.badge.bg-success {
-    background-color: #198754; /* Keep specific success color */
-    color: #fff;
+.badge-status-enabled {
+    background-color: var(--success-bg-color, #d1e7dd); /* Use variable or fallback */
+    color: var(--success-text-color, #0f5132);
+    border: 1px solid var(--success-border-color, #badbcc);
 }
-.badge.bg-warning {
-    background-color: #ffc107; /* Keep specific warning color */
-    color: #000; /* Black text for better contrast on yellow */
+.badge-status-disabled {
+    background-color: var(--warning-bg-color, #fff3cd); /* Use variable or fallback */
+    color: var(--warning-text-color, #664d03);
+    border: 1px solid var(--warning-border-color, #ffecb5);
 }
 
-.modal-placeholder {
-  margin-top: calc(var(--base-margin) * 3);
-  padding: var(--base-padding);
+
+/* Action Buttons within list item */
+.notification-item-actions .btn {
+    margin: 0; /* Remove default btn margin */
+    /* Use btn-sm for smaller buttons */
+}
+.notification-item-actions .btn-secondary {
+    /* Uses base btn-secondary styles */
+}
+.notification-item-actions .btn-danger {
+     /* Uses base btn-danger styles */
+}
+
+
+/* Form Section Styling */
+.form-section {
+  margin-top: calc(var(--base-margin) * 2); /* More space before form */
+  padding: calc(var(--base-padding) * 1.5); /* More padding */
   border: 1px solid var(--border-color);
-  background-color: var(--header-bg-color);
-  border-radius: 4px;
+  background-color: var(--content-bg-color, var(--app-bg-color)); /* Match item background */
+  border-radius: 8px; /* Consistent radius */
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Consistent shadow */
 }
+
+/* Inherited Button Styles (Ensure consistency with SettingsView/AuditLogView) */
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
+  font-weight: 600;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  border: 1px solid transparent;
+}
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+.btn:active:not(:disabled) {
+    transform: translateY(0px);
+}
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+.btn-primary {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-bg-color);
+    color: var(--button-text-color);
+}
+.btn-primary:hover:not(:disabled) {
+     background-color: var(--button-hover-bg-color);
+     border-color: var(--button-hover-bg-color);
+}
+.btn-secondary {
+    background-color: var(--secondary-button-bg-color, var(--header-bg-color));
+    color: var(--secondary-button-text-color, var(--text-color));
+    border: 1px solid var(--border-color);
+}
+.btn-secondary:hover:not(:disabled) {
+    background-color: var(--secondary-button-hover-bg-color, var(--border-color));
+    border-color: var(--border-color);
+}
+.btn-danger {
+  background-color: var(--danger-color, #dc3545);
+  color: white;
+  border-color: transparent;
+}
+.btn-danger:hover:not(:disabled) {
+  background-color: var(--danger-hover-color, #bb2d3b);
+  border-color: transparent;
+}
+.btn-sm { /* Small button variant */
+    padding: 0.25rem 0.6rem;
+    font-size: 0.85rem;
+}
+.mb-3 { /* Bootstrap margin bottom utility */
+    margin-bottom: var(--base-margin) !important;
+}
+.me-1 { margin-right: 0.25rem !important; }
+.me-2 { margin-right: 0.5rem !important; }
 </style>
diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json
index 396a898..f62f100 100644
--- a/packages/frontend/src/locales/en.json
+++ b/packages/frontend/src/locales/en.json
@@ -246,7 +246,8 @@
        "alreadyConnected": "An active SSH connection already exists.",
        "unknown": "Unknown status",
        "wsClosedWillRetry": "WebSocket connection closed, will attempt reconnect {attempt} in {seconds} seconds...",
-       "reconnecting": "Attempting to reconnect..."
+       "reconnecting": "Attempting to reconnect...",
+       "reconnectFailed": "Reconnect failed"
      },
      "terminal": {
       "infoPrefix": "[INFO]",
diff --git a/packages/frontend/src/locales/zh.json b/packages/frontend/src/locales/zh.json
index 53016dc..9d6e173 100644
--- a/packages/frontend/src/locales/zh.json
+++ b/packages/frontend/src/locales/zh.json
@@ -244,7 +244,8 @@
        "alreadyConnected": "已存在活动的 SSH 连接。",
        "unknown": "未知状态",
        "wsClosedWillRetry": "WebSocket 连接已关闭，将在 {seconds} 秒后尝试第 {attempt} 次重连...",
-       "reconnecting": "正在尝试重新连接..."
+       "reconnecting": "正在尝试重新连接...",
+       "reconnectFailed": "重连失败"
      },
      "selectConnectionPrompt": "请选择一个连接",
      "selectConnectionHint": "从左侧列表中选择一个连接，或点击'添加新连接'按钮创建一个新连接。",
diff --git a/packages/frontend/src/style.css b/packages/frontend/src/style.css
index a4eabe1..e15ddf2 100644
--- a/packages/frontend/src/style.css
+++ b/packages/frontend/src/style.css
@@ -47,8 +47,10 @@ a:hover {
 /* 可以添加更多全局样式规则 */
 
 /* 为 xterm 终端添加内边距 */
-.xterm-screen {
-  padding: 10px; /* 你可以根据需要调整这个值 */
+
+.xterm{
+  padding: 10px 10px 10px 10px; 
+
 }
 
 /* 为历史记录和快捷命令列表设置字体 */
diff --git a/packages/frontend/src/views/AuditLogView.vue b/packages/frontend/src/views/AuditLogView.vue
index 2e00c1f..09aa1c5 100644
--- a/packages/frontend/src/views/AuditLogView.vue
+++ b/packages/frontend/src/views/AuditLogView.vue
@@ -15,8 +15,9 @@
       <div v-if="logs.length === 0" class="alert alert-info">
         {{ $t('auditLog.noLogs') }}
       </div>
-      <div v-else>
-        <table class="table table-striped table-hover">
+      <div v-else> <!-- Wrapper for v-else content -->
+        <div class="table-container"> <!-- Add table container -->
+          <table class="table table-striped table-hover">
           <thead>
             <tr>
               <th>{{ $t('auditLog.table.timestamp') }}</th>
@@ -35,7 +36,7 @@
             </tr>
           </tbody>
         </table>
-
+      </div> <!-- End table container -->
         <!-- Pagination Controls -->
         <nav aria-label="Audit Log Pagination" v-if="totalPages > 1">
           <ul class="pagination justify-content-center">
@@ -54,9 +55,9 @@
          <div class="text-center text-muted mt-2">
             {{ $t('auditLog.paginationInfo', { currentPage, totalPages, totalLogs }) }}
         </div>
-      </div>
-    </div>
-  </div>
+      </div> <!-- This closes the v-else block starting implicitly at line 18 -->
+    </div> <!-- This closes the v-if block starting at line 14 -->
+  </div> <!-- This closes the root div -->
 </template>
 
 <script setup lang="ts">
@@ -145,155 +146,171 @@ const paginationRange = computed(() => {
 
 <style scoped>
 .audit-log-view {
-  padding: var(--base-padding, 20px); /* 使用变量 */
+  padding: var(--base-padding, 20px);
   color: var(--text-color);
   background-color: var(--app-bg-color);
-  min-height: calc(100vh - 60px); /* Example: Adjust based on header/footer height */
+  min-height: calc(100vh - 60px); /* Adjust based on actual header/footer */
+  max-width: 1400px; /* Limit max width for better readability on large screens */
+  margin: 0 auto; /* Center the view */
 }
 
 .audit-log-view h1 {
-    margin-bottom: calc(var(--base-margin, 1rem) * 2); /* Add space below title */
-    color: var(--text-color); /* Ensure title color */
+    margin-bottom: calc(var(--base-margin, 1rem) * 1.5); /* Adjust space */
+    padding-bottom: var(--base-margin, 1rem);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 1.8rem;
+    color: var(--text-color);
 }
 
-.loading-indicator, .error-message {
-  margin-top: var(--base-margin, 1rem); /* 使用变量 */
+.loading-indicator, .error-message, .alert {
+  margin-top: var(--base-margin, 1rem);
+  padding: var(--base-padding, 1rem);
+  border-radius: 6px; /* Consistent border radius */
   text-align: center;
-  color: var(--text-color-secondary); /* 使用次要文本颜色 */
+}
+
+.loading-indicator {
+  color: var(--text-color-secondary);
+  font-style: italic;
 }
 
 .error-message {
-  color: var(--bs-danger); /* 保留特定错误颜色 */
+  color: #842029;
+  background-color: #f8d7da;
+  border: 1px solid #f5c2c7;
+  border-left-width: 4px;
 }
 
-/* 表格容器，增加边框和圆角 */
+/* Table container with shadow and border */
 .table-container {
     border: 1px solid var(--border-color, #dee2e6);
-    border-radius: 5px;
-    overflow: hidden; /* Ensures border-radius clips table corners */
+    border-radius: 8px; /* Match SettingsView */
+    overflow: hidden; /* Clip table corners */
     margin-top: var(--base-margin, 1rem);
-    background-color: var(--app-bg-color); /* Ensure background */
+    background-color: var(--content-bg-color, var(--app-bg-color)); /* Match SettingsView */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Match SettingsView */
+    overflow-x: auto; /* Allow horizontal scroll on small screens */
 }
 
-/* 表格样式 */
+/* Table base styles */
 .table {
     width: 100%;
-    /* margin-top: var(--base-margin, 1rem); */ /* Moved margin to container */
-    border-collapse: collapse; /* 移除单元格间距 */
-    /* background-color: var(--app-bg-color); */ /* Background on container */
-    color: var(--text-color); /* 确保文本颜色 */
-    border: none; /* Remove table's own border if container has one */
+    border-collapse: collapse;
+    color: var(--text-color);
+    border: none; /* Container handles border */
+    font-size: 0.95rem; /* Slightly larger font */
 }
 
 .table th,
 .table td {
-    padding: 0.8rem 1rem; /* Slightly increase padding */
-    vertical-align: middle; /* Align vertically in the middle */
-    border-top: 1px solid var(--border-color, #dee2e6); /* 使用变量 */
-    text-align: left; /* 确保左对齐 */
+    padding: 0.9rem 1.1rem; /* Adjust padding */
+    vertical-align: middle;
+    border-top: 1px solid var(--border-color-light, var(--border-color)); /* Use lighter border */
+    text-align: left;
 }
 
-/* Remove top border for the first row */
+/* Remove top border for the first body row */
 .table tbody tr:first-child td {
     border-top: none;
 }
 
-
+/* Table header */
 .table thead th {
-    padding: 0.8rem 1rem; /* Match cell padding */
     vertical-align: bottom;
-    border-bottom: 2px solid var(--border-color, #dee2e6); /* 使用变量，加粗底部边框 */
-    border-top: none; /* No top border for header */
-    background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
-    color: var(--text-color); /* 确保表头文本颜色 */
-    font-weight: 600; /* Slightly less bold */
-    white-space: nowrap; /* Prevent header text wrapping */
+    border-bottom: 2px solid var(--border-color, #dee2e6);
+    border-top: none;
+    background-color: var(--table-header-bg-color, var(--header-bg-color)); /* Use variable */
+    color: var(--table-header-text-color, var(--text-color)); /* Use variable */
+    font-weight: 600;
+    white-space: nowrap;
 }
 
-/* 条纹样式 */
+/* Striped rows */
 .table-striped tbody tr:nth-of-type(odd) {
-     background-color: var(--header-bg-color, #f8f9fa); /* Use header bg for subtle stripe */
-     /* Ensure text color remains readable */
+     background-color: var(--table-stripe-bg-color, rgba(0,0,0,0.02)); /* More subtle stripe */
      color: var(--text-color);
 }
 .table-striped tbody tr:nth-of-type(even) {
-     background-color: var(--app-bg-color); /* Ensure even rows match app background */
+     background-color: transparent; /* Use container background */
 }
 
-
-/* 悬停样式 */
+/* Hover effect */
 .table-hover tbody tr:hover {
-    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */
-    /* Or use a variable like --row-hover-bg-color */
-    cursor: default; /* Indicate non-interactive rows */
+    background-color: var(--table-hover-bg-color, rgba(0,0,0,0.04)); /* Subtle hover */
+    cursor: default;
 }
 
-
+/* Details <pre> styling */
 pre {
-  white-space: pre-wrap; /* Allow wrapping */
-  word-break: break-all; /* Break long strings */
-  background-color: var(--app-bg-color); /* Match app background */
-  padding: calc(var(--base-padding, 0.5rem) * 0.8); /* Slightly smaller padding */
-  border: 1px solid var(--border-color, #dee2e6); /* 添加边框 */
-  border-radius: 4px; /* Consistent border radius */
-  font-size: 0.85em; /* Slightly smaller font */
-  color: var(--text-color); /* 确保文本颜色 */
-  max-height: 150px; /* Limit height */
-  overflow-y: auto; /* Add scroll if needed */
-  margin: 0; /* Remove default margin */
+  white-space: pre-wrap;
+  word-break: break-all;
+  background-color: var(--code-bg-color, var(--header-bg-color)); /* Use code background */
+  padding: 0.6rem 0.8rem; /* Adjust padding */
+  border: 1px solid var(--border-color-light, var(--border-color));
+  border-radius: 5px; /* Consistent radius */
+  font-size: 0.88em; /* Adjust font size */
+  color: var(--code-text-color, var(--text-color)); /* Use code text color */
+  max-height: 180px; /* Increase max height slightly */
+  overflow-y: auto;
+  margin: 0;
+  font-family: var(--font-family-monospace); /* Use monospace font */
 }
 
-/* 分页样式 */
+/* Pagination styling */
 .pagination {
-    margin-top: calc(var(--base-margin, 1rem) * 1.5); /* 使用变量 */
+    margin-top: calc(var(--base-margin, 1rem) * 2); /* Increase top margin */
+    justify-content: center; /* Ensure centered */
+    border: none;
 }
 
 .page-item .page-link {
-    color: var(--link-color, #007bff); /* 使用变量 */
-    background-color: var(--app-bg-color);
+    color: var(--link-color, #007bff);
+    background-color: var(--content-bg-color, var(--app-bg-color)); /* Match container bg */
     border: 1px solid var(--border-color, #dee2e6);
-    margin: 0 2px; /* Add small horizontal margin */
-    border-radius: 4px; /* Add border radius */
-    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smooth transition */
+    margin: 0 3px; /* Adjust margin */
+    border-radius: 5px; /* Match other elements */
+    padding: 0.4rem 0.8rem; /* Adjust padding */
+    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    font-size: 0.9rem;
 }
 
 .page-item.active .page-link {
     z-index: 3;
-    color: var(--button-text-color, #fff); /* 使用变量 */
-    background-color: var(--button-bg-color, #007bff); /* 使用变量 */
-    border-color: var(--button-bg-color, #007bff); /* 使用变量 */
+    color: var(--button-text-color, #fff);
+    background-color: var(--button-bg-color, #007bff);
+    border-color: var(--button-bg-color, #007bff);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
 .page-item.disabled .page-link {
-    color: var(--text-color-secondary, #6c757d); /* 使用变量 */
+    color: var(--text-color-secondary, #6c757d);
     pointer-events: none;
-    background-color: var(--app-bg-color);
+    background-color: var(--content-bg-color, var(--app-bg-color));
     border-color: var(--border-color, #dee2e6);
-    opacity: 0.65; /* Indicate disabled state */
+    opacity: 0.6; /* Adjust opacity */
 }
 
-.page-link:hover:not(.active) { /* Apply hover only if not active */
-    color: var(--link-hover-color, #0056b3); /* 使用变量 */
-    background-color: var(--header-bg-color, #e9ecef); /* 使用变量 */
+.page-link:hover { /* Combined hover for active/inactive */
+    z-index: 2;
+}
+
+.page-item:not(.active) .page-link:hover {
+    color: var(--link-hover-color, #0056b3);
+    background-color: var(--header-bg-color, #e9ecef);
     border-color: var(--border-color, #dee2e6);
 }
 
-/* Remove border from the pagination container itself */
-.pagination {
-    border: none;
-}
-
-/* Alert 样式 */
+/* Alert Info styling */
 .alert-info {
-    color: var(--text-color); /* 调整颜色使其更通用 */
-    background-color: var(--header-bg-color, #e9ecef); /* 使用变量 */
-    border-color: var(--border-color, #dee2e6); /* 使用变量 */
-    padding: var(--base-padding, 1rem);
-    margin-top: var(--base-margin, 1rem);
-    border-radius: 0.25rem;
+    color: var(--info-text-color, #0c5460); /* Specific info color */
+    background-color: var(--info-bg-color, #d1ecf1); /* Specific info background */
+    border: 1px solid var(--info-border-color, #bee5eb); /* Specific info border */
+    border-left-width: 4px; /* Add left accent border */
+    text-align: left; /* Align text left */
 }
 
 .text-muted {
-     color: var(--text-color-secondary) !important; /* 确保覆盖 Bootstrap */
+     color: var(--text-color-secondary) !important;
+     font-size: 0.9rem;
 }
 </style>
diff --git a/packages/frontend/src/views/SettingsView.vue b/packages/frontend/src/views/SettingsView.vue
index 3de9f10..4e2c33e 100644
--- a/packages/frontend/src/views/SettingsView.vue
+++ b/packages/frontend/src/views/SettingsView.vue
@@ -6,211 +6,199 @@
     <div v-if="settingsLoading" class="loading-message">{{ $t('common.loading') }}</div>
     <div v-if="settingsError" class="error-message">{{ settingsError }}</div>
 
-    <div class="settings-section">
-      <h2>{{ $t('settings.changePassword.title') }}</h2>
-      <form @submit.prevent="handleChangePassword">
-        <div class="form-group">
-          <label for="currentPassword">{{ $t('settings.changePassword.currentPassword') }}</label>
-          <input type="password" id="currentPassword" v-model="currentPassword" required>
-        </div>
-        <div class="form-group">
-          <label for="newPassword">{{ $t('settings.changePassword.newPassword') }}</label>
-          <input type="password" id="newPassword" v-model="newPassword" required>
-        </div>
-        <div class="form-group">
-          <label for="confirmPassword">{{ $t('settings.changePassword.confirmPassword') }}</label>
-          <input type="password" id="confirmPassword" v-model="confirmPassword" required>
-        </div>
-        <button type="submit" :disabled="changePasswordLoading">{{ changePasswordLoading ? $t('common.loading') : $t('settings.changePassword.submit') }}</button>
-        <p v-if="changePasswordMessage" :class="{ 'success-message': changePasswordSuccess, 'error-message': !changePasswordSuccess }">{{ changePasswordMessage }}</p>
-      </form>
-    </div>
-
-    <!-- 语言设置 -->
-    <div class="settings-section">
-      <h2>{{ $t('settings.language.title') }}</h2>
-      <form @submit.prevent="handleUpdateLanguage">
-        <div class="form-group">
-          <label for="languageSelect">{{ $t('settings.language.selectLabel') }}</label>
-          <select id="languageSelect" v-model="selectedLanguage" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc;">
-            <option value="en">English</option>
-            <option value="zh">中文</option>
-          </select>
-        </div>
-        <button type="submit" :disabled="languageLoading">{{ languageLoading ? $t('common.saving') : $t('settings.language.saveButton') }}</button>
-        <p v-if="languageMessage" :class="{ 'success-message': languageSuccess, 'error-message': !languageSuccess }">{{ languageMessage }}</p>
-      </form>
-    </div>
-
-    <!-- 弹窗编辑器设置 -->
-    <div class="settings-section">
-      <h2>{{ $t('settings.popupEditor.title') }}</h2>
-      <form @submit.prevent="handleUpdatePopupEditorSetting">
-          <div class="form-group form-group-checkbox">
-              <input type="checkbox" id="showPopupEditor" v-model="popupEditorEnabled">
-              <label for="showPopupEditor">{{ $t('settings.popupEditor.enableLabel') }}</label>
-          </div>
-          <button type="submit" :disabled="popupEditorLoading">{{ popupEditorLoading ? $t('common.saving') : $t('settings.popupEditor.saveButton') }}</button>
-          <p v-if="popupEditorMessage" :class="{ 'success-message': popupEditorSuccess, 'error-message': !popupEditorSuccess }">{{ popupEditorMessage }}</p>
-      </form>
-    </div>
-
-    <!-- 共享编辑器标签页设置 -->
-    <div class="settings-section">
-      <h2>{{ $t('settings.shareEditorTabs.title') }}</h2>
-      <form @submit.prevent="handleUpdateShareTabsSetting">
-          <div class="form-group form-group-checkbox">
-              <input type="checkbox" id="shareEditorTabs" v-model="shareTabsEnabled">
-              <label for="shareEditorTabs">{{ $t('settings.shareEditorTabs.enableLabel') }}</label>
-          </div>
-          <p class="setting-description">{{ $t('settings.shareEditorTabs.description') }}</p>
-          <button type="submit" :disabled="shareTabsLoading">{{ shareTabsLoading ? $t('common.saving') : $t('settings.shareEditorTabs.saveButton') }}</button>
-          <p v-if="shareTabsMessage" :class="{ 'success-message': shareTabsSuccess, 'error-message': !shareTabsSuccess }">{{ shareTabsMessage }}</p>
-      </form>
-    </div>
-
-
-    <hr>
-
-     <div class="settings-section">
-      <h2>Passkey 设置</h2>
-      <p>使用 Passkey（无密码认证）提升安全性和便捷性。您可以注册新的 Passkey 用于登录。</p>
-      <div class="form-group">
-        <label for="passkey-name">{{ $t('settings.passkey.nameLabel') }}:</label>
-        <input type="text" id="passkey-name" v-model="passkeyName" :placeholder="$t('settings.passkey.namePlaceholder')" required>
-      </div>
-      <button @click="handleRegisterPasskey" class="btn btn-primary">{{ $t('settings.passkey.registerButton') }}</button>
-      <p v-if="passkeyMessage" class="success-message">{{ passkeyMessage }}</p>
-      <p v-if="passkeyError" class="error-message">{{ passkeyError }}</p>
-    </div>
-
-    <div class="settings-section">
-      <h2>{{ $t('settings.twoFactor.title') }}</h2>
-
-      <!-- 如果 2FA 已启用 -->
-      <div v-if="twoFactorEnabled">
-        <p class="success-message">{{ $t('settings.twoFactor.status.enabled') }}</p>
-        <form @submit.prevent="handleDisable2FA">
-          <div class="form-group">
-            <label for="disablePassword">{{ $t('settings.twoFactor.disable.passwordPrompt') }}</label>
-            <input type="password" id="disablePassword" v-model="disablePassword" required>
-          </div>
-          <button type="submit" :disabled="twoFactorLoading">{{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.disable.button') }}</button>
-        </form>
-      </div>
-
-      <!-- 如果 2FA 未启用 -->
-      <div v-else>
-        <p>{{ $t('settings.twoFactor.status.disabled') }}</p>
-        <!-- 如果不在设置流程中，显示启用按钮 -->
-        <button v-if="!isSettingUp2FA" @click="handleSetup2FA" :disabled="twoFactorLoading">
-          {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.enable.button') }}
-        </button>
-
-        <!-- 如果正在设置中 -->
-        <div v-if="isSettingUp2FA && setupData">
-          <p>{{ $t('settings.twoFactor.setup.scanQrCode') }}</p>
-          <img :src="setupData.qrCodeUrl" alt="QR Code">
-          <p>{{ $t('settings.twoFactor.setup.orEnterSecret') }} <code>{{ setupData.secret }}</code></p>
-          <form @submit.prevent="handleVerifyAndActivate2FA">
+    <div class="settings-grid">
+      <!-- Column 1: Security Settings -->
+      <div class="settings-column">
+        <div class="settings-section">
+          <h2>{{ $t('settings.changePassword.title') }}</h2>
+          <form @submit.prevent="handleChangePassword">
             <div class="form-group">
-              <label for="verificationCode">{{ $t('settings.twoFactor.setup.enterCode') }}</label>
-              <input type="text" id="verificationCode" v-model="verificationCode" required pattern="\d{6}" title="请输入 6 位数字验证码">
+              <label for="currentPassword">{{ $t('settings.changePassword.currentPassword') }}</label>
+              <input type="password" id="currentPassword" v-model="currentPassword" required>
             </div>
-            <button type="submit" :disabled="twoFactorLoading">{{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.setup.verifyButton') }}</button>
-            <button type="button" @click="cancelSetup" :disabled="twoFactorLoading" style="margin-left: 10px;">{{ $t('common.cancel') }}</button>
+            <div class="form-group">
+              <label for="newPassword">{{ $t('settings.changePassword.newPassword') }}</label>
+              <input type="password" id="newPassword" v-model="newPassword" required>
+            </div>
+            <div class="form-group">
+              <label for="confirmPassword">{{ $t('settings.changePassword.confirmPassword') }}</label>
+              <input type="password" id="confirmPassword" v-model="confirmPassword" required>
+            </div>
+            <button type="submit" :disabled="changePasswordLoading">{{ changePasswordLoading ? $t('common.loading') : $t('settings.changePassword.submit') }}</button>
+            <p v-if="changePasswordMessage" :class="{ 'success-message': changePasswordSuccess, 'error-message': !changePasswordSuccess }">{{ changePasswordMessage }}</p>
+          </form>
+        </div>
+
+        <div class="settings-section">
+          <h2>Passkey 设置</h2>
+          <p>使用 Passkey（无密码认证）提升安全性和便捷性。您可以注册新的 Passkey 用于登录。</p>
+          <div class="form-group">
+            <label for="passkey-name">{{ $t('settings.passkey.nameLabel') }}:</label>
+            <input type="text" id="passkey-name" v-model="passkeyName" :placeholder="$t('settings.passkey.namePlaceholder')" required>
+          </div>
+          <button @click="handleRegisterPasskey" class="btn btn-primary">{{ $t('settings.passkey.registerButton') }}</button>
+          <p v-if="passkeyMessage" class="success-message">{{ passkeyMessage }}</p>
+          <p v-if="passkeyError" class="error-message">{{ passkeyError }}</p>
+        </div>
+
+        <div class="settings-section">
+          <h2>{{ $t('settings.twoFactor.title') }}</h2>
+          <!-- 2FA Content remains the same -->
+          <div v-if="twoFactorEnabled">
+            <p class="success-message">{{ $t('settings.twoFactor.status.enabled') }}</p>
+            <form @submit.prevent="handleDisable2FA">
+              <div class="form-group">
+                <label for="disablePassword">{{ $t('settings.twoFactor.disable.passwordPrompt') }}</label>
+                <input type="password" id="disablePassword" v-model="disablePassword" required>
+              </div>
+              <button type="submit" :disabled="twoFactorLoading">{{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.disable.button') }}</button>
+            </form>
+          </div>
+          <div v-else>
+            <p>{{ $t('settings.twoFactor.status.disabled') }}</p>
+            <button v-if="!isSettingUp2FA" @click="handleSetup2FA" :disabled="twoFactorLoading">
+              {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.enable.button') }}
+            </button>
+            <div v-if="isSettingUp2FA && setupData">
+              <p>{{ $t('settings.twoFactor.setup.scanQrCode') }}</p>
+              <img :src="setupData.qrCodeUrl" alt="QR Code">
+              <p>{{ $t('settings.twoFactor.setup.orEnterSecret') }} <code>{{ setupData.secret }}</code></p>
+              <form @submit.prevent="handleVerifyAndActivate2FA">
+                <div class="form-group">
+                  <label for="verificationCode">{{ $t('settings.twoFactor.setup.enterCode') }}</label>
+                  <input type="text" id="verificationCode" v-model="verificationCode" required pattern="\d{6}" title="请输入 6 位数字验证码">
+                </div>
+                <button type="submit" :disabled="twoFactorLoading">{{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.setup.verifyButton') }}</button>
+                <button type="button" @click="cancelSetup" :disabled="twoFactorLoading" class="btn-secondary" style="margin-left: 10px;">{{ $t('common.cancel') }}</button>
+              </form>
+            </div>
+          </div>
+          <p v-if="twoFactorMessage" :class="{ 'success-message': twoFactorSuccess, 'error-message': !twoFactorSuccess }">{{ twoFactorMessage }}</p>
+        </div>
+      </div>
+
+      <!-- Column 2: Interface & Network Settings -->
+      <div class="settings-column">
+        <div class="settings-section">
+          <h2>{{ $t('settings.language.title') }}</h2>
+          <form @submit.prevent="handleUpdateLanguage">
+            <div class="form-group">
+              <label for="languageSelect">{{ $t('settings.language.selectLabel') }}</label>
+              <select id="languageSelect" v-model="selectedLanguage">
+                <option value="en">English</option>
+                <option value="zh">中文</option>
+              </select>
+            </div>
+            <button type="submit" :disabled="languageLoading">{{ languageLoading ? $t('common.saving') : $t('settings.language.saveButton') }}</button>
+            <p v-if="languageMessage" :class="{ 'success-message': languageSuccess, 'error-message': !languageSuccess }">{{ languageMessage }}</p>
+          </form>
+        </div>
+
+        <div class="settings-section">
+          <h2>{{ $t('settings.appearance.title') }}</h2>
+          <p>{{ $t('settings.appearance.description') }}</p>
+          <button @click="openStyleCustomizer">{{ t('settings.appearance.customizeButton') }}</button>
+        </div>
+
+        <div class="settings-section">
+          <h2>{{ $t('settings.popupEditor.title') }}</h2>
+          <form @submit.prevent="handleUpdatePopupEditorSetting">
+              <div class="form-group form-group-checkbox">
+                  <input type="checkbox" id="showPopupEditor" v-model="popupEditorEnabled">
+                  <label for="showPopupEditor">{{ $t('settings.popupEditor.enableLabel') }}</label>
+              </div>
+              <button type="submit" :disabled="popupEditorLoading">{{ popupEditorLoading ? $t('common.saving') : $t('settings.popupEditor.saveButton') }}</button>
+              <p v-if="popupEditorMessage" :class="{ 'success-message': popupEditorSuccess, 'error-message': !popupEditorSuccess }">{{ popupEditorMessage }}</p>
+          </form>
+        </div>
+
+        <div class="settings-section">
+          <h2>{{ $t('settings.shareEditorTabs.title') }}</h2>
+          <form @submit.prevent="handleUpdateShareTabsSetting">
+              <div class="form-group form-group-checkbox">
+                  <input type="checkbox" id="shareEditorTabs" v-model="shareTabsEnabled">
+                  <label for="shareEditorTabs">{{ $t('settings.shareEditorTabs.enableLabel') }}</label>
+              </div>
+              <p class="setting-description">{{ $t('settings.shareEditorTabs.description') }}</p>
+              <button type="submit" :disabled="shareTabsLoading">{{ shareTabsLoading ? $t('common.saving') : $t('settings.shareEditorTabs.saveButton') }}</button>
+              <p v-if="shareTabsMessage" :class="{ 'success-message': shareTabsSuccess, 'error-message': !shareTabsSuccess }">{{ shareTabsMessage }}</p>
+          </form>
+        </div>
+
+        <div class="settings-section">
+          <h2>{{ $t('settings.ipWhitelist.title') }}</h2>
+          <p>{{ $t('settings.ipWhitelist.description') }}</p>
+          <form @submit.prevent="handleUpdateIpWhitelist">
+            <div class="form-group">
+              <label for="ipWhitelist">{{ $t('settings.ipWhitelist.label') }}</label>
+              <textarea id="ipWhitelist" v-model="ipWhitelistInput" rows="4"></textarea> <!-- Reduced rows -->
+              <small>{{ $t('settings.ipWhitelist.hint') }}</small>
+            </div>
+            <button type="submit" :disabled="ipWhitelistLoading">{{ ipWhitelistLoading ? $t('common.saving') : $t('settings.ipWhitelist.saveButton') }}</button>
+            <p v-if="ipWhitelistMessage" :class="{ 'success-message': ipWhitelistSuccess, 'error-message': !ipWhitelistSuccess }">{{ ipWhitelistMessage }}</p>
           </form>
         </div>
       </div>
 
-      <!-- 显示 2FA 操作的消息 -->
-      <p v-if="twoFactorMessage" :class="{ 'success-message': twoFactorSuccess, 'error-message': !twoFactorSuccess }">{{ twoFactorMessage }}</p>
-    </div>
+      <!-- Column 3: IP Blacklist (Spans across columns if needed, or stays in its own area) -->
+      <div class="settings-section settings-section-full-width">
+        <h2>IP 黑名单管理</h2>
+        <p>配置登录失败次数限制和自动封禁时长。本地地址 (127.0.0.1, ::1) 不会被封禁。</p>
 
-    <hr>
+        <!-- 黑名单配置表单 -->
+        <form @submit.prevent="handleUpdateBlacklistSettings" class="blacklist-settings-form">
+           <div class="form-group inline-group">
+             <label for="maxLoginAttempts">最大失败次数:</label>
+             <input type="number" id="maxLoginAttempts" v-model="blacklistSettingsForm.maxLoginAttempts" min="1" required>
+           </div>
+           <div class="form-group inline-group">
+             <label for="loginBanDuration">封禁时长 (秒):</label>
+             <input type="number" id="loginBanDuration" v-model="blacklistSettingsForm.loginBanDuration" min="1" required>
+           </div>
+           <button type="submit" :disabled="blacklistSettingsLoading">{{ blacklistSettingsLoading ? $t('common.saving') : '保存配置' }}</button>
+           <p v-if="blacklistSettingsMessage" :class="{ 'success-message': blacklistSettingsSuccess, 'error-message': !blacklistSettingsSuccess }">{{ blacklistSettingsMessage }}</p>
+        </form>
 
-    <div class="settings-section">
-      <h2>{{ $t('settings.ipWhitelist.title') }}</h2>
-      <p>{{ $t('settings.ipWhitelist.description') }}</p>
-      <form @submit.prevent="handleUpdateIpWhitelist">
-        <div class="form-group">
-          <label for="ipWhitelist">{{ $t('settings.ipWhitelist.label') }}</label>
-          <textarea id="ipWhitelist" v-model="ipWhitelistInput" rows="5"></textarea>
-          <small>{{ $t('settings.ipWhitelist.hint') }}</small>
+        <hr class="section-divider">
+
+        <h3>当前已封禁的 IP 地址</h3>
+        <div v-if="ipBlacklist.loading" class="loading-message">正在加载黑名单...</div>
+        <div v-if="ipBlacklist.error" class="error-message">{{ ipBlacklist.error }}</div>
+
+        <div v-if="!ipBlacklist.loading && !ipBlacklist.error" class="table-container">
+          <table v-if="ipBlacklist.entries.length > 0" class="blacklist-table">
+            <thead>
+              <tr>
+                <th>IP 地址</th>
+                <th>失败次数</th>
+                <th>最后尝试时间</th>
+                <th>封禁截止时间</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="entry in ipBlacklist.entries" :key="entry.ip">
+                <td>{{ entry.ip }}</td>
+                <td>{{ entry.attempts }}</td>
+                <td>{{ new Date(entry.last_attempt_at * 1000).toLocaleString() }}</td>
+                <td>{{ entry.blocked_until ? new Date(entry.blocked_until * 1000).toLocaleString() : 'N/A' }}</td>
+                <td>
+                  <button
+                    @click="handleDeleteIp(entry.ip)"
+                    :disabled="blacklistDeleteLoading && blacklistToDeleteIp === entry.ip"
+                    class="btn-danger btn-small"
+                  >
+                    {{ (blacklistDeleteLoading && blacklistToDeleteIp === entry.ip) ? '删除中...' : '移除' }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <p v-else>当前没有 IP 地址在黑名单中。</p>
+           <p v-if="blacklistDeleteError" class="error-message">{{ blacklistDeleteError }}</p>
         </div>
-        <button type="submit" :disabled="ipWhitelistLoading">{{ ipWhitelistLoading ? $t('common.saving') : $t('settings.ipWhitelist.saveButton') }}</button>
-        <p v-if="ipWhitelistMessage" :class="{ 'success-message': ipWhitelistSuccess, 'error-message': !ipWhitelistSuccess }">{{ ipWhitelistMessage }}</p>
-      </form>
-    </div>
-
-    <!-- 外观设置 -->
-    <div class="settings-section">
-        <h2>{{ $t('settings.appearance.title') }}</h2>
-        <p>{{ $t('settings.appearance.description') }}</p>
-        <button @click="openStyleCustomizer">{{ t('settings.appearance.customizeButton') }}</button>
-    </div>
-
-
-    <hr>
-
-     <div class="settings-section">
-      <h2>IP 黑名单管理</h2>
-      <p>配置登录失败次数限制和自动封禁时长。本地地址 (127.0.0.1, ::1) 不会被封禁。</p>
-
-      <!-- 黑名单配置表单 -->
-      <form @submit.prevent="handleUpdateBlacklistSettings" class="blacklist-settings-form">
-         <div class="form-group inline-group">
-           <label for="maxLoginAttempts">最大失败次数:</label>
-           <input type="number" id="maxLoginAttempts" v-model="blacklistSettingsForm.maxLoginAttempts" min="1" required>
-         </div>
-         <div class="form-group inline-group">
-           <label for="loginBanDuration">封禁时长 (秒):</label>
-           <input type="number" id="loginBanDuration" v-model="blacklistSettingsForm.loginBanDuration" min="1" required>
-         </div>
-         <button type="submit" :disabled="blacklistSettingsLoading">{{ blacklistSettingsLoading ? $t('common.saving') : '保存配置' }}</button>
-         <p v-if="blacklistSettingsMessage" :class="{ 'success-message': blacklistSettingsSuccess, 'error-message': !blacklistSettingsSuccess }">{{ blacklistSettingsMessage }}</p>
-      </form>
-
-      <hr style="margin-top: 20px; margin-bottom: 20px;">
-
-      <h3>当前已封禁的 IP 地址</h3>
-      <div v-if="ipBlacklist.loading" class="loading-message">正在加载黑名单...</div>
-      <div v-if="ipBlacklist.error" class="error-message">{{ ipBlacklist.error }}</div>
-
-      <div v-if="!ipBlacklist.loading && !ipBlacklist.error">
-        <table v-if="ipBlacklist.entries.length > 0" class="blacklist-table">
-          <thead>
-            <tr>
-              <th>IP 地址</th>
-              <th>失败次数</th>
-              <th>最后尝试时间</th>
-              <th>封禁截止时间</th>
-              <th>操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="entry in ipBlacklist.entries" :key="entry.ip">
-              <td>{{ entry.ip }}</td>
-              <td>{{ entry.attempts }}</td>
-              <td>{{ new Date(entry.last_attempt_at * 1000).toLocaleString() }}</td>
-              <td>{{ entry.blocked_until ? new Date(entry.blocked_until * 1000).toLocaleString() : 'N/A' }}</td>
-              <td>
-                <button
-                  @click="handleDeleteIp(entry.ip)"
-                  :disabled="blacklistDeleteLoading && blacklistToDeleteIp === entry.ip"
-                  class="btn-danger"
-                >
-                  {{ (blacklistDeleteLoading && blacklistToDeleteIp === entry.ip) ? '删除中...' : '移除' }}
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <p v-else>当前没有 IP 地址在黑名单中。</p>
-         <p v-if="blacklistDeleteError" class="error-message">{{ blacklistDeleteError }}</p>
       </div>
-    </div>
-
+    </div> <!-- End of settings-grid -->
   </div>
 </template>
 
@@ -577,99 +565,125 @@ onMounted(async () => {
   padding: var(--base-padding);
   color: var(--text-color);
   background-color: var(--app-bg-color);
+  max-width: 1200px; /* 限制最大宽度 */
+  margin: 0 auto; /* 居中 */
 }
 
 h1 {
-  margin-bottom: calc(var(--base-margin) * 3);
+  margin-bottom: calc(var(--base-margin) * 2); /* 减小标题下边距 */
   padding-bottom: var(--base-margin);
   border-bottom: 1px solid var(--border-color);
+  font-size: 1.8rem; /* 稍大标题 */
+  color: var(--text-color);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 响应式网格布局 */
+  gap: calc(var(--base-margin) * 2); /* 网格间距 */
+}
+
+.settings-column {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base-margin) * 2); /* 列内项目间距 */
 }
 
 .settings-section {
-  margin-bottom: calc(var(--base-margin) * 4); /* 增加区域间距 */
-  padding: calc(var(--base-padding) * 1.5); /* 增加区域内边距 */
+  /* margin-bottom: calc(var(--base-margin) * 2); 移除独立下边距，由 grid gap 控制 */
+  padding: calc(var(--base-padding) * 1.2); /* 调整内边距 */
   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); */ /* 可选：添加轻微阴影 */
+  border-radius: 8px; /* 更圆润的边角 */
+  background-color: var(--content-bg-color, var(--app-bg-color)); /* 使用内容背景色，回退到应用背景色 */
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 添加细微阴影 */
+  display: flex; /* 使 section 内部元素可以更好地控制 */
+  flex-direction: column; /* 默认垂直排列 */
+  height: 100%; /* 让 section 填充 grid 单元格高度 */
+}
+
+.settings-section-full-width {
+  grid-column: 1 / -1; /* 让黑名单部分横跨所有列 */
 }
 
 .settings-section h2 {
-  font-size: 1.3rem;
+  font-size: 1.2rem; /* 调整标题大小 */
   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); /* 虚线分隔 */
+  margin-bottom: var(--base-margin); /* 减小标题下边距 */
+  padding-bottom: calc(var(--base-margin) * 0.75);
+  border-bottom: 1px solid var(--border-color-light, var(--border-color)); /* 使用更浅的边框色 */
 }
 
-.settings-section p:not([class*="-message"]) { /* 普通段落样式 */
+.settings-section p:not([class*="-message"]) {
     color: var(--text-color-secondary);
     line-height: 1.6;
     margin-bottom: var(--base-margin);
+    font-size: 0.95rem; /* 调整段落字体大小 */
 }
-.setting-description { /* 特定描述文本 */
-    font-size: 0.9em;
+.setting-description {
+    font-size: 0.85em; /* 调整描述字体大小 */
     color: var(--text-color-secondary);
     margin-bottom: var(--base-margin);
 }
 
-
 .form-group {
-  margin-bottom: calc(var(--base-margin) * 1.5);
+  margin-bottom: var(--base-margin); /* 减小表单组间距 */
 }
 
 label {
   display: block;
-  margin-bottom: calc(var(--base-margin) / 2);
-  font-weight: bold;
+  margin-bottom: calc(var(--base-margin) / 3); /* 减小标签下边距 */
+  font-weight: 600; /* 稍粗字体 */
   color: var(--text-color);
+  font-size: 0.9rem; /* 调整标签字体大小 */
 }
 
 input[type="password"],
 input[type="text"],
-input[type="number"], /* 添加 number 类型 */
+input[type="number"],
 textarea,
 select {
   width: 100%;
-  padding: 0.6rem 0.8rem; /* 调整内边距 */
+  padding: 0.5rem 0.7rem; /* 调整内边距 */
   box-sizing: border-box;
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: 5px; /* 调整圆角 */
   font-family: var(--font-family-sans-serif);
-  font-size: 1rem;
+  font-size: 0.95rem; /* 调整输入框字体大小 */
   color: var(--text-color);
-  background-color: var(--app-bg-color);
-  transition: border-color 0.2s ease;
+  background-color: var(--input-bg-color, var(--app-bg-color)); /* 输入框背景色 */
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 input:focus, textarea:focus, select:focus {
-    border-color: var(--link-active-color); /* 聚焦时高亮边框 */
+    border-color: var(--link-active-color);
     outline: 0;
-    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15); /* 细微的聚焦阴影 */
+    box-shadow: 0 0 0 3px rgba(var(--rgb-link-active-color, 0, 123, 255), 0.2); /* 使用变量颜色 */
 }
 
 textarea {
     resize: vertical;
-    min-height: 100px;
+    min-height: 80px; /* 减小最小高度 */
 }
 
 small {
     display: block;
-    margin-top: calc(var(--base-margin) / 2);
-    font-size: 0.85em;
+    margin-top: calc(var(--base-margin) / 3);
+    font-size: 0.8em; /* 调整提示字体大小 */
     color: var(--text-color-secondary);
 }
 
-button, .btn { /* 统一按钮样式 */
-  padding: 0.6rem 1.2rem; /* 调整按钮内边距 */
+button, .btn {
+  padding: 0.5rem 1rem; /* 调整按钮内边距 */
   cursor: pointer;
   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); /* 按钮间距 */
+  border: 1px solid transparent; /* 默认透明边框 */
+  border-radius: 5px; /* 调整圆角 */
+  font-weight: 600; /* 稍粗字体 */
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
+  margin-right: calc(var(--base-margin) / 2); /* 减小按钮间距 */
+  font-size: 0.95rem; /* 调整按钮字体大小 */
+  line-height: 1.5; /* 确保文字垂直居中 */
 }
 button:last-of-type, .btn:last-of-type {
     margin-right: 0;
@@ -678,139 +692,159 @@ button:last-of-type, .btn:last-of-type {
 button:hover:not(:disabled), .btn:hover:not(:disabled) {
   background-color: var(--button-hover-bg-color);
   border-color: var(--button-hover-bg-color);
+  transform: translateY(-1px); /* 轻微上移效果 */
+}
+button:active:not(:disabled), .btn:active:not(:disabled) {
+    transform: translateY(0px); /* 按下时复原 */
 }
 
 button:disabled, .btn:disabled {
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: 0.65; /* 调整禁用透明度 */
 }
 
-/* 次要按钮样式 (例如取消按钮) */
-button[type="button"], .btn-secondary {
-    background-color: var(--header-bg-color);
-    color: var(--text-color);
-    border-color: var(--border-color);
+/* 次要按钮样式 */
+.btn-secondary {
+    background-color: var(--secondary-button-bg-color, var(--header-bg-color));
+    color: var(--secondary-button-text-color, var(--text-color));
+    border: 1px solid var(--border-color);
 }
-button[type="button"]:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
-    background-color: var(--border-color);
+.btn-secondary:hover:not(:disabled) {
+    background-color: var(--secondary-button-hover-bg-color, var(--border-color));
     border-color: var(--border-color);
 }
 
-hr {
+/* 危险按钮样式 (用于移除黑名单) */
+.btn-danger {
+  background-color: var(--danger-color, #dc3545);
+  color: white;
+  border-color: transparent;
+}
+.btn-danger:hover:not(:disabled) {
+  background-color: var(--danger-hover-color, #bb2d3b);
+  border-color: transparent;
+}
+.btn-danger:disabled {
+  background-color: var(--danger-color, #dc3545);
+  opacity: 0.65;
+}
+.btn-small { /* 小按钮 */
+    padding: 0.25rem 0.5rem;
+    font-size: 0.85rem;
+}
+
+
+hr.section-divider { /* 区域内分隔线 */
     border: none;
-    border-top: 1px solid var(--border-color);
-    margin: calc(var(--base-margin) * 4) 0; /* 增加分隔线间距 */
+    border-top: 1px dashed var(--border-color-light, var(--border-color));
+    margin: var(--base-margin) 0;
 }
 
 code {
-    background-color: var(--header-bg-color);
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    color: var(--text-color);
-    font-family: monospace;
+    background-color: var(--code-bg-color, var(--header-bg-color));
+    padding: 0.2em 0.5em;
+    border-radius: 4px;
+    color: var(--code-text-color, var(--text-color));
+    font-family: var(--font-family-monospace);
     font-size: 0.9em;
+    border: 1px solid var(--border-color-light, var(--border-color));
 }
 
-img {
+img { /* 二维码图片 */
     display: block;
-    margin: var(--base-margin) auto; /* 居中显示 */
-    max-width: 200px;
+    margin: var(--base-margin) auto;
+    max-width: 180px; /* 调整大小 */
     border: 1px solid var(--border-color);
-    padding: 5px;
-    background-color: white; /* 确保二维码背景是白色 */
+    padding: 4px;
+    background-color: white;
+    border-radius: 4px;
 }
 
+/* 消息提示样式优化 */
+.success-message, .error-message {
+  padding: 0.8rem 1rem; /* 调整内边距 */
+  border-radius: 5px;
+  margin-top: var(--base-margin);
+  font-size: 0.9rem;
+  border-left-width: 4px; /* 左侧加粗边框 */
+}
 .success-message {
-  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);
+  color: #0f5132;
+  background-color: #d1e7dd;
+  border-color: #badbcc;
+  border-left-color: #0f5132;
 }
-
 .error-message {
-  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);
+  color: #842029;
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+  border-left-color: #842029;
 }
 .loading-message {
     margin-top: var(--base-margin);
     color: var(--text-color-secondary);
     font-style: italic;
+    font-size: 0.9rem;
 }
 
-/* Blacklist Table Styles */
+/* 黑名单表格样式优化 */
+.table-container {
+    overflow-x: auto; /* 允许水平滚动 */
+    margin-top: var(--base-margin);
+}
 .blacklist-table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: var(--base-padding);
-  font-size: 0.95rem;
+  font-size: 0.9rem; /* 调整表格字体 */
+  white-space: nowrap; /* 防止单元格内容换行 */
 }
 
 .blacklist-table th,
 .blacklist-table td {
-  border: 1px solid var(--border-color);
-  padding: 0.75rem; /* 调整单元格内边距 */
+  border: 1px solid var(--border-color-light, var(--border-color));
+  padding: 0.6rem 0.8rem; /* 调整单元格内边距 */
   text-align: left;
   vertical-align: middle;
 }
 
 .blacklist-table th {
-  background-color: var(--header-bg-color);
-  font-weight: bold;
-  color: var(--text-color);
+  background-color: var(--table-header-bg-color, var(--header-bg-color));
+  font-weight: 600;
+  color: var(--table-header-text-color, var(--text-color));
 }
 
 .blacklist-table tr:nth-child(even) {
-    background-color: var(--header-bg-color); /* 斑马纹 */
+    background-color: var(--table-stripe-bg-color, var(--header-bg-color));
+}
+.blacklist-table tr:hover {
+    background-color: var(--table-hover-bg-color, rgba(0,0,0,0.03)); /* 悬停高亮 */
 }
 
-.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); /* 确保与其他组间距一致 */
+  margin-bottom: var(--base-margin);
+  cursor: pointer; /* 让整个区域可点击 */
 }
-
 .form-group-checkbox input[type="checkbox"] {
-  width: auto;
-  margin-right: 0.6rem; /* 调整复选框和标签间距 */
-  flex-shrink: 0; /* 防止复选框被压缩 */
-  appearance: none; /* 自定义样式 */
-  background-color: var(--app-bg-color);
+  width: 1.2em; /* 增大复选框 */
+  height: 1.2em;
+  margin-right: 0.7rem;
+  flex-shrink: 0;
+  appearance: none;
+  background-color: var(--input-bg-color, var(--app-bg-color));
   border: 1px solid var(--border-color);
-  width: 1.1em;
-  height: 1.1em;
-  border-radius: 3px;
+  border-radius: 4px; /* 调整圆角 */
   cursor: pointer;
   position: relative;
-  top: 2px; /* 微调垂直对齐 */
+  top: 0; /* 移除微调 */
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 .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;
@@ -818,44 +852,68 @@ img {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    font-size: 0.8em;
+    font-size: 0.85em; /* 调整勾选标记大小 */
+    font-weight: bold;
+}
+.form-group-checkbox input[type="checkbox"]:focus {
+    box-shadow: 0 0 0 3px rgba(var(--rgb-link-active-color, 0, 123, 255), 0.2);
 }
-
-
 .form-group-checkbox label {
   display: inline-block;
   margin-bottom: 0;
   cursor: pointer;
-  font-weight: normal; /* 普通标签字体重量 */
+  font-weight: normal;
+  font-size: 0.95rem; /* 调整标签字体 */
+  user-select: none; /* 防止选中文字 */
 }
 
-
-/* Blacklist Settings Form Styles */
+/* 黑名单配置表单样式优化 */
 .blacklist-settings-form {
-    margin-top: var(--base-padding);
-    padding-top: var(--base-padding);
-    border-top: 1px dashed var(--border-color);
+    margin-top: var(--base-margin);
+    padding-top: var(--base-margin);
+    border-top: 1px dashed var(--border-color-light, var(--border-color));
+    display: flex; /* 使用 Flex 布局 */
+    flex-wrap: wrap; /* 允许换行 */
+    align-items: flex-end; /* 底部对齐 */
+    gap: var(--base-margin); /* 项目间距 */
 }
 .blacklist-settings-form .inline-group {
-    display: inline-flex; /* 使用 flex 布局 */
-    align-items: center; /* 垂直居中 */
-    margin-right: calc(var(--base-margin) * 2);
-    margin-bottom: var(--base-margin);
+    display: flex;
+    flex-direction: column; /* 垂直排列标签和输入框 */
+    margin: 0; /* 移除独立 margin */
 }
 .blacklist-settings-form .inline-group label {
-    margin-right: var(--base-margin);
-    margin-bottom: 0; /* 移除 label 下边距 */
-    white-space: nowrap; /* 防止标签换行 */
+    margin-bottom: calc(var(--base-margin) / 4); /* 减小小间距 */
+    white-space: nowrap;
 }
 .blacklist-settings-form .inline-group input[type="number"] {
-    width: 80px; /* 固定宽度 */
-    padding: 0.5rem; /* 调整内边距 */
+    width: 100px; /* 调整宽度 */
+    padding: 0.4rem 0.6rem; /* 调整内边距 */
 }
 .blacklist-settings-form button {
-    vertical-align: middle; /* 尝试对齐按钮 */
+    margin-left: auto; /* 将按钮推到右侧（如果空间允许） */
+    align-self: flex-end; /* 确保按钮在底部 */
 }
-.blacklist-settings-form p {
-    margin-top: var(--base-margin);
+.blacklist-settings-form p { /* 消息提示 */
+    margin-top: 0; /* 移除顶部间距 */
+    width: 100%; /* 占满整行 */
+    order: 3; /* 确保消息在最后 */
+}
+
+/* 响应式调整 */
+@media (max-width: 900px) {
+  .settings-grid {
+    grid-template-columns: 1fr; /* 在较小屏幕上变为单列 */
+  }
+  .blacklist-settings-form {
+      flex-direction: column; /* 强制垂直排列 */
+      align-items: stretch; /* 拉伸项目 */
+  }
+  .blacklist-settings-form button {
+      margin-left: 0; /* 移除左外边距 */
+      width: 100%; /* 按钮占满宽度 */
+      margin-top: var(--base-margin); /* 添加顶部间距 */
+  }
 }
 
 </style>