diff --git a/public/api/workspace.php b/public/api/workspace.php
index bfc4247..9121828 100644
--- a/public/api/workspace.php
+++ b/public/api/workspace.php
@@ -218,7 +218,15 @@ function validateWorkspaceContent($content) {
         ]);
 
     } elseif ($action === 'list') {
+        // 从权限表获取文件
         $fileIds = getUserAccessibleFiles($dbPermissions, $username);
+        
+        // 兼容旧数据：同时从用户文件列表获取文件
+        $userFilesKey = sanitizeDbKey($username . '_files');
+        $legacyFileIds = $dbUsers->get_array($userFilesKey);
+        if ($legacyFileIds && is_array($legacyFileIds)) {
+            $fileIds = array_unique(array_merge($fileIds ?: [], $legacyFileIds));
+        }
 
         $list = [];
         if ($fileIds && is_array($fileIds)) {
@@ -232,6 +240,15 @@ function validateWorkspaceContent($content) {
                 $fileData = json_decode($fileRaw, true);
                 if (!$fileData || !isset($fileData['metadata'])) continue;
 
+                // 兼容旧数据：自动迁移权限记录
+                $permKey = sanitizeDbKey("perm_{$fileId}_{$username}");
+                if ($dbPermissions->get($permKey) === null) {
+                    // 检查文件作者是否是当前用户
+                    if (isset($fileData['metadata']['author']) && $fileData['metadata']['author'] === $username) {
+                        grantFilePermission($dbPermissions, $fileId, $username, 'owner');
+                    }
+                }
+
                 $list[] = [
                     'fileId' => $fileId,
                     'metadata' => $fileData['metadata']
@@ -258,11 +275,6 @@ function validateWorkspaceContent($content) {
             respond(['success' => false, 'message' => '文件ID格式无效']);
         }
 
-        // 检查读权限
-        if (!hasFilePermission($dbPermissions, $fileId, $username, 'read')) {
-            respond(['success' => false, 'message' => '无权访问该文件'], 403);
-        }
-
         // 消毒文件 ID
         $sanitizedFileId = sanitizeDbKey($fileId);
 
@@ -276,6 +288,20 @@ function validateWorkspaceContent($content) {
              respond(['success' => false, 'message' => '文件格式损坏']);
         }
 
+        // 检查读权限（兼容旧数据：如果没有权限记录，检查文件作者）
+        $permKey = sanitizeDbKey("perm_{$fileId}_{$username}");
+        if ($dbPermissions->get($permKey) === null) {
+            // 没有权限记录，检查文件作者
+            if (isset($fileData['metadata']['author']) && $fileData['metadata']['author'] === $username) {
+                // 自动迁移：创建权限记录
+                grantFilePermission($dbPermissions, $fileId, $username, 'owner');
+            } else {
+                respond(['success' => false, 'message' => '无权访问该文件'], 403);
+            }
+        } elseif (!hasFilePermission($dbPermissions, $fileId, $username, 'read')) {
+            respond(['success' => false, 'message' => '无权访问该文件'], 403);
+        }
+
         respond([
             'success' => true,
             'data' => $fileData
@@ -291,15 +317,26 @@ function validateWorkspaceContent($content) {
              respond(['success' => false, 'message' => '文件ID格式无效']);
          }
 
-         // 检查写权限
-         if (!hasFilePermission($dbPermissions, $fileId, $username, 'write')) {
-             respond(['success' => false, 'message' => '无权删除该文件'], 403);
-         }
-
          // 消毒文件 ID
          $sanitizedFileId = sanitizeDbKey($fileId);
 
          $fileRaw = $dbFiles->get($sanitizedFileId);
+         
+         // 检查写权限（兼容旧数据：如果没有权限记录，检查文件作者）
+         $permKey = sanitizeDbKey("perm_{$fileId}_{$username}");
+         if ($dbPermissions->get($permKey) === null) {
+             // 没有权限记录，检查文件作者
+             $fileData = $fileRaw ? json_decode($fileRaw, true) : null;
+             if ($fileData && isset($fileData['metadata']['author']) && $fileData['metadata']['author'] === $username) {
+                 // 自动迁移：创建权限记录
+                 grantFilePermission($dbPermissions, $fileId, $username, 'owner');
+             } else {
+                 respond(['success' => false, 'message' => '无权删除该文件'], 403);
+             }
+         } elseif (!hasFilePermission($dbPermissions, $fileId, $username, 'write')) {
+             respond(['success' => false, 'message' => '无权删除该文件'], 403);
+         }
+
          if ($fileRaw !== null) {
              $dbFiles->delete($sanitizedFileId);
 
diff --git a/src/App.vue b/src/App.vue
index 0863d16..aa252b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,14 +71,14 @@ onMounted(async () => {
 
     if (isCtrl && e.key === 'z' && !e.shiftKey) {
       e.preventDefault()
-      if (canUndo()) {
+      if (canUndo.value) {
         undo()
       }
     }
 
     if (isCtrl && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
       e.preventDefault()
-      if (canRedo()) {
+      if (canRedo.value) {
         redo()
       }
     }
diff --git a/src/assets/main.css b/src/assets/main.css
index e53adc7..b1aba3d 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -131,11 +131,11 @@
   --color-bg-hover: #2a3f5c;
   --color-bg-overlay: rgba(0, 0, 0, 0.7);
 
-  /* 文字颜色 - 提升禁用文字对比度 */
+  /* 文字颜色 - 优化深色模式可读性 */
   --color-text-primary: #f1f5f9;
   --color-text-secondary: #cbd5e1;
-  --color-text-muted: #94a3b8;
-  --color-text-disabled: #7b8fa3;
+  --color-text-muted: #a0aec0;
+  --color-text-disabled: #8899aa;
   --color-text-inverse: #ffffff;
 
   /* 边框颜色 - 提升可见度 */
@@ -143,7 +143,7 @@
   --color-border-strong: #536578;
   --color-border-hover: #536578;
   --color-border-light: #253347;
-  --color-border-dark: #7b8fa3;
+  --color-border-dark: #8899aa;
 
   /* 次要背景色 */
   --color-bg-secondary: #151d2e;
@@ -250,15 +250,15 @@
 
     --color-text-primary: #f1f5f9;
     --color-text-secondary: #cbd5e1;
-    --color-text-muted: #94a3b8;
-    --color-text-disabled: #7b8fa3;
+    --color-text-muted: #a0aec0;
+    --color-text-disabled: #8899aa;
     --color-text-inverse: #ffffff;
 
     --color-border: #3d4f63;
     --color-border-strong: #536578;
     --color-border-hover: #536578;
     --color-border-light: #253347;
-    --color-border-dark: #7b8fa3;
+    --color-border-dark: #8899aa;
 
     --color-bg-secondary: #151d2e;
 
diff --git a/src/components/auth/LoginDialog.vue b/src/components/auth/LoginDialog.vue
index 42cd5e8..6892fc0 100644
--- a/src/components/auth/LoginDialog.vue
+++ b/src/components/auth/LoginDialog.vue
@@ -247,7 +247,7 @@ const handleSubmit = async () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/auth/SyncSettingsDialog.vue b/src/components/auth/SyncSettingsDialog.vue
index 33597f6..aea36c2 100644
--- a/src/components/auth/SyncSettingsDialog.vue
+++ b/src/components/auth/SyncSettingsDialog.vue
@@ -214,7 +214,7 @@ const handleSubmit = async () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/docs/RuleUsageGuide.vue b/src/components/docs/RuleUsageGuide.vue
index ab4464d..e2262f7 100644
--- a/src/components/docs/RuleUsageGuide.vue
+++ b/src/components/docs/RuleUsageGuide.vue
@@ -305,7 +305,7 @@
   padding: 10px 12px;
   background: var(--color-info-bg);
   border-radius: 8px;
-  border: 1px solid #bfdbfe;
+  border: 1px solid var(--color-border);
   font-size: 12px;
   color: var(--color-info);
   line-height: 1.5;
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 1b5168d..df2440b 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -67,8 +67,6 @@
 
     <UnifiedSettingsDialog
       v-if="showUnifiedSettings"
-      :visible="showUnifiedSettings"
-      @update:visible="showUnifiedSettings = $event"
       @save="handleSaveSettings"
     />
   </header>
@@ -80,6 +78,7 @@ import { Cloud, FolderOpen, Github, LogIn, Monitor, Moon, Settings, Sun, User }
 import { useAuth } from '@/composables/useAuth'
 import { useCloudWorkspaceDialog } from '@/composables/useCloudWorkspaceDialog'
 import { useGlobalSettings } from '@/composables/useGlobalSettings'
+import { useSettingsDialog } from '@/composables/useSettingsDialog'
 
 const UnifiedSettingsDialog = defineAsyncComponent(() => import('../settings/UnifiedSettingsDialog.vue'))
 
@@ -88,9 +87,9 @@ const emit = defineEmits(['open-login'])
 const { currentUser, webdavConfig, isLoggedIn, logout, authType, initAuth } = useAuth()
 const { openCloudDialog } = useCloudWorkspaceDialog()
 const { settings, saveToLocalStorage, applyColorScheme, applyThemeColor } = useGlobalSettings()
+const { visible: showUnifiedSettings, openSettings, closeSettings } = useSettingsDialog()
 
 const showDropdown = ref(false)
-const showUnifiedSettings = ref(false)
 const menuContainer = ref(null)
 
 const hasRetiehe = computed(() => !!currentUser.value)
@@ -122,7 +121,7 @@ const openWorkspaceManagement = () => {
 }
 
 const openUnifiedSettings = () => {
-  showUnifiedSettings.value = true
+  openSettings()
   showDropdown.value = false
 }
 
@@ -148,7 +147,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', closeDropdownOnOutsideClick)
-  showUnifiedSettings.value = false
+  closeSettings()
 })
 </script>
 
@@ -162,7 +161,7 @@ onBeforeUnmount(() => {
   width: 100%;
   background: var(--color-primary);
   height: 100px;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 0 30px;
   box-shadow: var(--shadow-md);
   gap: 20px;
@@ -196,7 +195,7 @@ onBeforeUnmount(() => {
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
+  color: var(--color-text-inverse);
   padding: 8px 16px;
   border-radius: 24px;
   font-size: 14px;
@@ -334,7 +333,7 @@ onBeforeUnmount(() => {
 
 .theme-btn.active {
   background: rgba(255, 255, 255, 0.2);
-  color: white;
+  color: var(--color-text-inverse);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
diff --git a/src/components/layout/EditorPanel.vue b/src/components/layout/EditorPanel.vue
index 361e546..3d0d0ec 100644
--- a/src/components/layout/EditorPanel.vue
+++ b/src/components/layout/EditorPanel.vue
@@ -104,7 +104,6 @@ const candidatePanelStyle = computed(() => {
   flex: 1;
   min-height: 0;
   background: var(--color-surface);
-  border-bottom: 2px solid var(--color-border);
   overflow: hidden;
   display: flex;
   flex-direction: column;
diff --git a/src/components/layout/ExportPreview.vue b/src/components/layout/ExportPreview.vue
index 9ed6d5f..a66714b 100644
--- a/src/components/layout/ExportPreview.vue
+++ b/src/components/layout/ExportPreview.vue
@@ -316,7 +316,7 @@
         <div class="dialog-footer">
           <button class="btn secondary" @click="$emit('close')">关闭</button>
           <template v-if="activeTab === 'image'">
-            <button v-if="authType === 'webdav'" class="btn primary" style="background:#0ea5e9;" :disabled="isGenerating || isUploading" @click="handleCloudExportImage">
+            <button v-if="authType === 'webdav'" class="btn primary btn-info" :disabled="isGenerating || isUploading" @click="handleCloudExportImage">
               <Loader2 v-if="isUploading" :size="14" stroke-width="2" class="spin-icon" />
               <CloudUpload v-else :size="14" stroke-width="2" />
               {{ isUploading ? '上传中...' : '保存至云盘' }}
@@ -328,7 +328,7 @@
             </button>
           </template>
           <template v-if="activeTab === 'excel'">
-            <button v-if="authType === 'webdav'" class="btn excel" style="background:var(--color-success);" :disabled="isExcelDownloading || isUploading" @click="handleCloudExportExcel">
+            <button v-if="authType === 'webdav'" class="btn excel" :disabled="isExcelDownloading || isUploading" @click="handleCloudExportExcel">
               <Loader2 v-if="isUploading" :size="14" stroke-width="2" class="spin-icon" />
               <CloudUpload v-else :size="14" stroke-width="2" />
               {{ isUploading ? '上传中...' : '保存至云盘' }}
@@ -640,7 +640,7 @@ const excelPreviewHtml = computed(() => {
 
   // 4. 开始构建 HTML 表格（含 Excel 式的外层标号 A, B, 1, 2）
   let html = `<div style="font-family:Calibri,'Microsoft YaHei',sans-serif;display:flex;flex-direction:column;width:max-content;border:1px solid var(--color-border-strong);background:var(--color-surface);">`
-  html += `<div style="overflow:auto;background:#e6e6e6;max-height:65vh;">`
+  html += `<div style="overflow:auto;background:var(--color-bg-soft);max-height:65vh;">`
   html += `<table style="border-collapse:collapse;font-family:inherit;margin:0;table-layout:fixed;">`
 
   // `<colgroup>` 精确设置列宽
@@ -970,7 +970,7 @@ onBeforeUnmount(() => {
 .export-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.55);
+  background: var(--color-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1117,7 +1117,7 @@ onBeforeUnmount(() => {
 .tag-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
 .tag-row {
   display: flex; flex-direction: column; gap: 4px; padding: 6px 8px;
-  background: var(--color-bg-subtle); border-radius: 6px; border: 1px solid #eee;
+  background: var(--color-bg-subtle); border-radius: 6px; border: 1px solid var(--color-border);
 }
 .tag-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }
 .tag-input {
@@ -1205,7 +1205,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
   position: relative;
   flex-shrink: 0;
-  background-image: repeating-linear-gradient(45deg, var(--color-border-strong) 0, var(--color-border-strong) 1px, #f8f8f8 1px, #f8f8f8 5px);
+  background-image: repeating-linear-gradient(45deg, var(--color-border-strong) 0, var(--color-border-strong) 1px, var(--color-bg-soft) 1px, var(--color-bg-soft) 5px);
   background-size: 6px 6px;
   box-sizing: border-box;
 }
@@ -1351,6 +1351,8 @@ onBeforeUnmount(() => {
 .btn.secondary:hover { background: var(--color-border); }
 .btn.primary { background: var(--color-primary); color: var(--color-text-inverse); }
 .btn.primary:hover { background: var(--color-primary-hover); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 30%, transparent); }
+.btn.btn-info { background: var(--color-info); }
+.btn.btn-info:hover { background: var(--color-info-hover); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-info) 30%, transparent); }
 .btn.excel { background: var(--color-success); color: var(--color-text-inverse); }
 .btn.excel:hover { background: var(--color-success-hover); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-success) 30%, transparent); }
 .btn:disabled { opacity: 0.6; cursor: not-allowed; }
diff --git a/src/components/layout/SeatConfigDialog.vue b/src/components/layout/SeatConfigDialog.vue
index f00920c..0b3514f 100644
--- a/src/components/layout/SeatConfigDialog.vue
+++ b/src/components/layout/SeatConfigDialog.vue
@@ -311,7 +311,7 @@ function handleConfirm() {
 .seat-config-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/layout/SidebarPanel.vue b/src/components/layout/SidebarPanel.vue
index 3af977b..1498d51 100644
--- a/src/components/layout/SidebarPanel.vue
+++ b/src/components/layout/SidebarPanel.vue
@@ -524,6 +524,7 @@ const AssignmentInlineReport = defineAsyncComponent(() => import('../rule/Assign
 import { useAuth } from '@/composables/useAuth'
 import { useUndo } from '@/composables/useUndo'
 import { useCloudWorkspaceDialog } from '@/composables/useCloudWorkspaceDialog'
+import { useAutoSave } from '@/composables/useAutoSave'
 
 const { activeTab, mobileMenuOpen, setActiveTab, closeMobileMenu } = useSidebar()
 const { seatConfig, updateConfig, clearAllSeats, seats, shiftSeats, getAvailableSeats } = useSeatChart()
@@ -543,6 +544,7 @@ const { scale, zoomIn, zoomOut, MIN_SCALE, MAX_SCALE, fitToViewport } = useZoom(
 const { zones } = useZoneData()
 const { recordBatch, createSnapshot } = useUndo()
 const { openCloudLoad, openCloudSave } = useCloudWorkspaceDialog()
+const { markSaved } = useAutoSave()
 const showSeatConfigDialog = ref(false)
 const totalSeats = computed(() => {
   const config = seatConfig.value
@@ -724,6 +726,7 @@ const onExported = (payload) => {
 const handleSaveWorkspace = () => {
   const isSuccess = saveWorkspace()
   if (isSuccess) {
+    markSaved()
     success('工作区已成功保存到本地！')
   } else {
     error('工作区保存到本地失败，请查看控制台了解详情')
@@ -2273,12 +2276,12 @@ const formatLogTime = (timestamp) => {
 
 .log-warning {
   border-left-color: var(--color-warning);
-  background: var(--color-surface)bf0;
 }
 
-
-
-
+.log-error {
+  border-left-color: var(--color-danger);
+  background: var(--color-danger-bg-light);
+}
 
 .log-empty {
   text-align: center;
@@ -2434,7 +2437,7 @@ const formatLogTime = (timestamp) => {
     display: block;
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.35);
+    background: var(--color-bg-overlay);
     z-index: 998;
     backdrop-filter: blur(2px);
   }
diff --git a/src/components/relation/SeatRuleEditor.vue b/src/components/relation/SeatRuleEditor.vue
index 7f889e4..85db740 100644
--- a/src/components/relation/SeatRuleEditor.vue
+++ b/src/components/relation/SeatRuleEditor.vue
@@ -209,7 +209,7 @@ const close = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   display: flex;
@@ -219,11 +219,11 @@ const close = () => {
 }
 
 .modal-container {
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--color-dialog-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 16px;
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-border);
   width: 95%;
   max-width: 900px;
   max-height: 90vh;
@@ -275,7 +275,7 @@ const close = () => {
   display: flex;
   gap: 12px;
   border-bottom: 1px solid var(--color-border-light);
-  background: rgba(248, 250, 252, 0.5);
+  background: var(--color-bg-subtle);
   padding: 0 24px;
   flex-shrink: 0;
 }
@@ -315,7 +315,7 @@ const close = () => {
 
 .tab-badge {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-text-inverse);
   border-radius: 10px;
   padding: 1px 7px;
   font-size: 11px;
@@ -566,7 +566,7 @@ const close = () => {
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -803,13 +803,13 @@ const close = () => {
 }
 
 .strength-option.active {
-  color: white;
+  color: var(--color-text-inverse);
   border-color: transparent;
 }
 
 .strength-option.active .strength-label,
 .strength-option.active .strength-desc {
-  color: white;
+  color: var(--color-text-inverse);
 }
 
 .strength-option.disabled {
diff --git a/src/components/rule/RuleList.vue b/src/components/rule/RuleList.vue
index 09266f7..f8eeda9 100644
--- a/src/components/rule/RuleList.vue
+++ b/src/components/rule/RuleList.vue
@@ -920,7 +920,7 @@ defineExpose({ focusRule })
 
 .btn-delete.confirming {
   background: var(--color-danger);
-  color: white;
+  color: var(--color-text-inverse);
   border-color: var(--color-danger);
 }
 
diff --git a/src/components/seat/SeatChart.vue b/src/components/seat/SeatChart.vue
index a58971c..5ec98e8 100644
--- a/src/components/seat/SeatChart.vue
+++ b/src/components/seat/SeatChart.vue
@@ -232,7 +232,7 @@ const {
 const { firstSelectedSeat, setFirstSelectedSeat, clearFirstSelectedSeat } = useEditMode()
 const { clearSelection: clearStudentSelection, students } = useStudentData()
 const { scale, panX, panY, zoomIn, zoomOut, setScale, setPan, MIN_SCALE, MAX_SCALE, registerViewport, fitToViewport } = useZoom()
-const { recordAssign, recordClear, recordSwap, recordToggleEmpty, recordBatch, createSnapshot, canUndo, canRedo, undo, redo } = useUndo()
+const { recordAssign, recordBatch, createSnapshot, canUndo, canRedo, undo, redo } = useUndo()
 const { isDraggingFromSeat: globalIsDraggingFromSeat } = useDragState()
 const {
   clearSelection: clearSeatSelection,
@@ -624,7 +624,6 @@ const handleDrop = (e) => {
         }
         clearSeatSelection()
       } else if (data.seatId !== targetSeatId) {
-        recordSwap(data.seatId, targetSeatId)
         swapSeats(data.seatId, targetSeatId)
         endDragPreview([targetSeatId])
         clearSeatSelection()
@@ -655,8 +654,6 @@ const handleToolbarDrop = (e) => {
   try {
     const data = JSON.parse(raw)
     if (data.type === 'seat' && data.seatId) {
-      const studentId = getStudentAtSeat(data.seatId)
-      recordClear(data.seatId, studentId)
       clearSeat(data.seatId)
       clearSeatSelection()
     }
@@ -724,8 +721,6 @@ const handleTouchSeatDrop = (e) => {
     }
     clearSeatSelection()
   } else if (sourceSeatId !== targetSeatId) {
-    // 单个座位交换
-    recordSwap(sourceSeatId, targetSeatId)
     swapSeats(sourceSeatId, targetSeatId)
   }
 }
@@ -739,19 +734,17 @@ const handleTouchSeatToList = (e) => {
   const { seatId, isSelection, selectedSeatIds } = e.detail
 
   if (isSelection && selectedSeatIds && selectedSeatIds.length > 1) {
-    // 选区整体移出
+    const beforeSnapshot = createSnapshot()
     selectedSeatIds.forEach(sid => {
       const studentId = getStudentAtSeat(sid)
       if (studentId !== null) {
-        recordClear(sid, studentId)
-        clearSeat(sid)
+        clearSeat(sid, false)
       }
     })
+    const afterSnapshot = createSnapshot()
+    recordBatch(beforeSnapshot, afterSnapshot)
     clearSeatSelection()
   } else {
-    // 单个座位移出
-    const studentId = getStudentAtSeat(seatId)
-    recordClear(seatId, studentId)
     clearSeat(seatId)
   }
 }
@@ -840,13 +833,15 @@ watch([selectedSeatsArray, scale, panX, panY], () => {
 }, { deep: true })
 
 const handleSelClear = () => {
+  const beforeSnapshot = createSnapshot()
   for (const seatId of selectedSeatsArray.value) {
     const studentId = getStudentAtSeat(seatId)
     if (studentId) {
-      recordClear(seatId, studentId)
-      clearSeat(seatId)
+      clearSeat(seatId, false)
     }
   }
+  const afterSnapshot = createSnapshot()
+  recordBatch(beforeSnapshot, afterSnapshot)
   clearSeatSelection()
 }
 
@@ -855,20 +850,23 @@ const handleSelShuffle = () => {
   const studentIds = ids.map(id => getStudentAtSeat(id)).filter(Boolean)
   if (studentIds.length < 2) return
 
+  const beforeSnapshot = createSnapshot()
+
   if (ids.length === 2) {
     const [seatA, seatB] = ids
     const studentA = getStudentAtSeat(seatA)
     const studentB = getStudentAtSeat(seatB)
     if (studentA && studentB) {
-      recordSwap(seatA, seatB)
-      swapSeats(seatA, seatB)
+      swapSeats(seatA, seatB, false)
     } else if (studentA || studentB) {
       const fromSeat = studentA ? seatA : seatB
       const toSeat = studentA ? seatB : seatA
       const studentId = studentA || studentB
-      clearSeat(fromSeat)
-      assignStudent(toSeat, studentId)
+      clearSeat(fromSeat, false)
+      assignStudent(toSeat, studentId, false)
     }
+    const afterSnapshot = createSnapshot()
+    recordBatch(beforeSnapshot, afterSnapshot)
     return
   }
 
@@ -878,11 +876,13 @@ const handleSelShuffle = () => {
   }
   const occupiedIds = ids.filter(id => getStudentAtSeat(id))
   for (const seatId of occupiedIds) {
-    clearSeat(seatId)
+    clearSeat(seatId, false)
   }
   for (let i = 0; i < occupiedIds.length; i++) {
-    assignStudent(occupiedIds[i], studentIds[i])
+    assignStudent(occupiedIds[i], studentIds[i], false)
   }
+  const afterSnapshot = createSnapshot()
+  recordBatch(beforeSnapshot, afterSnapshot)
 }
 
 const handleSelAssign = () => {
@@ -892,10 +892,12 @@ const handleSelAssign = () => {
   if (emptyIds.length === 0 || unassigned.length === 0) return
   const shuffled = [...unassigned].sort(() => Math.random() - 0.5)
   const count = Math.min(emptyIds.length, shuffled.length)
+  const beforeSnapshot = createSnapshot()
   for (let i = 0; i < count; i++) {
-    assignStudent(emptyIds[i], shuffled[i].id)
-    recordAssign(emptyIds[i], shuffled[i].id, null)
+    assignStudent(emptyIds[i], shuffled[i].id, false)
   }
+  const afterSnapshot = createSnapshot()
+  recordBatch(beforeSnapshot, afterSnapshot)
   clearSeatSelection()
 }
 
@@ -1000,40 +1002,33 @@ const handleAssignStudent = (seatId, studentId) => {
   const existingSeat = findSeatByStudent(studentId)
   const previousSeatId = existingSeat ? existingSeat.id : null
   if (existingSeat) {
-    clearSeat(existingSeat.id)
+    clearSeat(existingSeat.id, false)
   }
-  assignStudent(seatId, studentId)
+  assignStudent(seatId, studentId, false)
   clearStudentSelection()
   recordAssign(seatId, studentId, previousSeatId)
 }
 
 // 处理切换空置状态
 const handleToggleEmpty = (seatId) => {
-  recordToggleEmpty(seatId)
   toggleEmpty(seatId)
 }
 
 // 处理清空座位
 const handleClearSeat = (seatId) => {
-  const studentId = getStudentAtSeat(seatId)
-  recordClear(seatId, studentId)
   clearSeat(seatId)
 }
 
 // 处理交换座位
 const handleSwapSeat = (seatId, sourceSeatId = null) => {
   if (sourceSeatId) {
-    // 拖拽交换模式：直接交换两个座位
-    recordSwap(sourceSeatId, seatId)
     swapSeats(sourceSeatId, seatId)
   } else {
-    // 点击交换模式：依次选择两个座位
     if (!firstSelectedSeat.value) {
       setFirstSelectedSeat(seatId)
     } else if (firstSelectedSeat.value === seatId) {
       clearFirstSelectedSeat()
     } else {
-      recordSwap(firstSelectedSeat.value, seatId)
       swapSeats(firstSelectedSeat.value, seatId)
       clearFirstSelectedSeat()
     }
diff --git a/src/components/seat/SeatItem.vue b/src/components/seat/SeatItem.vue
index ebdf3e3..8620df8 100644
--- a/src/components/seat/SeatItem.vue
+++ b/src/components/seat/SeatItem.vue
@@ -23,8 +23,8 @@
       <span class="empty-text">空置</span>
     </div>
     <template v-else-if="hasStudent">
-      <div class="student-display" :class="{ 'bottom-tag-mode': tagDisplayMode === 'bottom' }">
-        <div class="student-name">{{ studentInfo.name || '未命名' }}</div>
+      <div class="student-display" :class="{ 'bottom-tag-mode': tagDisplayMode === 'bottom', 'name-hidden': !showStudentName, 'number-hidden': !showStudentNumber, 'large-name': largeNameMode, 'large-number': largeNumberMode }">
+        <div v-if="showStudentName" class="student-name">{{ studentInfo.name || '未命名' }}</div>
         <!-- 颜色点模式：显示所有标签，用实心/空心区分 -->
         <div v-if="hasTags && tagDisplayMode === 'dot'" class="student-tags">
           <span v-for="tag in allVisibleTags" :key="tag.id"
@@ -34,10 +34,10 @@
           </span>
         </div>
         <!-- 座位下部文字模式：学号绝对定位到右上角 -->
-        <div v-if="tagDisplayMode === 'bottom'" class="student-number-corner">
+        <div v-if="showStudentNumber && tagDisplayMode === 'bottom'" class="student-number-corner">
           {{ studentInfo.studentNumber || '-' }}
         </div>
-        <div v-else class="student-number">{{ studentInfo.studentNumber || '-' }}</div>
+        <div v-else-if="showStudentNumber" class="student-number">{{ studentInfo.studentNumber || '-' }}</div>
         <!-- 座位下部文字模式：只显示学生拥有的标签 -->
         <div v-if="hasTags && tagDisplayMode === 'bottom'" class="student-tags-text">
           <span v-for="tag in studentTags" :key="tag.id"
@@ -102,6 +102,12 @@ const { selectedSeatIds, selectedSeatsArray, isDraggingSelection, startDraggingS
 const { startDragPreview, updateDragPreview, endDragPreview, isGhostSeat } = useDragPreview()
 const { settings } = useGlobalSettings()
 
+const showStudentName = computed(() => settings.value.ui.showStudentName !== false)
+const showStudentNumber = computed(() => settings.value.ui.showStudentNumber !== false)
+const hasHiddenElement = computed(() => !showStudentName.value || !showStudentNumber.value)
+const largeNameMode = computed(() => showStudentName.value && hasHiddenElement.value && settings.value.ui.largeNameMode)
+const largeNumberMode = computed(() => showStudentNumber.value && hasHiddenElement.value && settings.value.ui.largeNumberMode)
+
 const isDragOver = ref(false)
 const isDragging = ref(false)
 let dragEnterCount = 0
@@ -713,6 +719,32 @@ onUnmounted(() => {
   width: 100%;
 }
 
+.student-display.name-hidden.number-hidden {
+  justify-content: center;
+}
+
+.student-display.name-hidden:not(.number-hidden) .student-number {
+  font-size: 16px;
+}
+
+.student-display.large-name .student-name {
+  font-size: 28px;
+}
+
+.student-display.large-number .student-number {
+  font-size: 18px;
+  padding: 4px 14px;
+}
+
+.student-display.large-number .student-number-corner {
+  font-size: 12px;
+  padding: 2px 7px;
+}
+
+.student-display.bottom-tag-mode {
+  gap: 2px;
+}
+
 .student-tags {
   display: flex;
   gap: 3px;
@@ -747,7 +779,7 @@ onUnmounted(() => {
 .tag-text-item {
   font-size: 9px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 1px 4px;
   border-radius: 3px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
@@ -769,7 +801,7 @@ onUnmounted(() => {
 .corner-tag-item {
   font-size: 8px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 1px 4px;
   border-radius: 3px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
@@ -838,16 +870,14 @@ onUnmounted(() => {
 
 /* 撤销/重做高亮效果 - 灰色显示 */
 .seat-item.undo-highlighted {
-  background: var(--color-bg-secondary) !important;
-  border-color: var(--color-border-dark) !important;
-  opacity: 0.6;
+  border-color: var(--color-border-dark);
   transition: all 0.3s ease;
   animation: undo-pulse 2s ease-in-out forwards;
 }
 
 .seat-item.undo-highlighted .student-name,
 .seat-item.undo-highlighted .student-number {
-  color: var(--color-text-secondary) !important;
+  animation: undo-text-fade 2s ease-in-out forwards;
 }
 
 @keyframes undo-pulse {
@@ -855,11 +885,13 @@ onUnmounted(() => {
     background: var(--color-bg-hover);
     border-color: var(--color-border-dark);
     transform: scale(1);
+    opacity: 1;
   }
-  50% {
+  15% {
     background: var(--color-bg-secondary);
     border-color: var(--color-border);
     transform: scale(0.98);
+    opacity: 0.6;
   }
   100% {
     background: inherit;
@@ -869,6 +901,18 @@ onUnmounted(() => {
   }
 }
 
+@keyframes undo-text-fade {
+  0% {
+    color: var(--color-text-secondary);
+  }
+  15% {
+    color: var(--color-text-secondary);
+  }
+  100% {
+    color: inherit;
+  }
+}
+
 /* 选区高亮 */
 .seat-item.zone-highlight {
   background: var(--zone-color, var(--color-border));
@@ -933,6 +977,14 @@ onUnmounted(() => {
     padding: 1px 8px;
   }
 
+  .student-display.large-name .student-name {
+    font-size: 20px;
+  }
+
+  .student-display.large-number .student-number {
+    font-size: 14px;
+  }
+
   .student-number-corner {
     font-size: 8px;
     padding: 1px 4px;
@@ -986,6 +1038,14 @@ onUnmounted(() => {
     padding: 1px 7px;
   }
 
+  .student-display.large-name .student-name {
+    font-size: 18px;
+  }
+
+  .student-display.large-number .student-number {
+    font-size: 13px;
+  }
+
   .student-number-corner {
     font-size: 7px;
     padding: 1px 3px;
@@ -1047,6 +1107,14 @@ onUnmounted(() => {
     padding: 2px 6px;
   }
 
+  .student-display.large-name .student-name {
+    font-size: 16px;
+  }
+
+  .student-display.large-number .student-number {
+    font-size: 14px;
+  }
+
   .student-number-corner {
     font-size: 8px;
     padding: 1px 4px;
diff --git a/src/components/settings/UnifiedSettingsDialog.vue b/src/components/settings/UnifiedSettingsDialog.vue
index b4d2942..ef6b3ce 100644
--- a/src/components/settings/UnifiedSettingsDialog.vue
+++ b/src/components/settings/UnifiedSettingsDialog.vue
@@ -102,16 +102,13 @@ import ExportPanel from './panels/ExportPanel.vue'
 import AboutPanel from './panels/AboutPanel.vue'
 import { useGlobalSettings } from '@/composables/useGlobalSettings'
 import { useLogger } from '@/composables/useLogger'
+import { useSettingsDialog } from '@/composables/useSettingsDialog'
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  }
-})
+const props = defineProps({})
 
-const emit = defineEmits(['update:visible', 'save'])
+const emit = defineEmits(['save'])
 
+const { visible, initialTab, initialCategory, closeSettings } = useSettingsDialog()
 const { settings, saveToLocalStorage, resetSettings, applyThemeColor, applyColorScheme } = useGlobalSettings()
 const { success, warning } = useLogger()
 
@@ -183,8 +180,10 @@ const handleKeydown = (e) => {
   if (e.key === 'Escape') handleCancel()
 }
 
-watch(() => props.visible, (newVal) => {
+watch(visible, (newVal) => {
   if (newVal) {
+    activeTab.value = initialTab.value
+    activeCategory.value = initialCategory.value
     document.addEventListener('keydown', handleKeydown)
   } else {
     document.removeEventListener('keydown', handleKeydown)
@@ -207,11 +206,11 @@ const handleSave = () => {
     success('工作区设置已保存')
   }
   emit('save')
-  emit('update:visible', false)
+  closeSettings()
 }
 
 const handleCancel = () => {
-  emit('update:visible', false)
+  closeSettings()
 }
 
 const handleReset = () => {
@@ -382,7 +381,7 @@ const handleReset = () => {
 
 .btn-primary {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-text-inverse);
 }
 
 .btn-primary:hover {
@@ -449,7 +448,7 @@ const handleReset = () => {
 
   .sub-tab-btn.active {
     background: var(--color-primary);
-    color: white;
+    color: var(--color-text-inverse);
     font-weight: 500;
   }
 
diff --git a/src/components/settings/panels/AboutPanel.vue b/src/components/settings/panels/AboutPanel.vue
index 30db519..d942092 100644
--- a/src/components/settings/panels/AboutPanel.vue
+++ b/src/components/settings/panels/AboutPanel.vue
@@ -156,7 +156,7 @@ import { Github, Heart, Cloud } from 'lucide-vue-next'
 .tech-tag {
   padding: 4px 10px;
   background: var(--color-primary);
-  color: white;
+  color: var(--color-text-inverse);
   border-radius: 12px;
   font-size: 12px;
   font-weight: 500;
diff --git a/src/components/settings/panels/SyncPanel.vue b/src/components/settings/panels/SyncPanel.vue
index c7b02b5..add4f15 100644
--- a/src/components/settings/panels/SyncPanel.vue
+++ b/src/components/settings/panels/SyncPanel.vue
@@ -427,7 +427,7 @@ const handleSave = async () => {
 .btn-primary {
   flex: 1;
   background: var(--color-primary);
-  color: white;
+  color: var(--color-text-inverse);
 }
 
 .btn-primary:hover:not(:disabled) {
diff --git a/src/components/settings/panels/UIPanel.vue b/src/components/settings/panels/UIPanel.vue
index c682e07..da3d7d5 100644
--- a/src/components/settings/panels/UIPanel.vue
+++ b/src/components/settings/panels/UIPanel.vue
@@ -641,6 +641,87 @@
           </button>
         </div>
       </div>
+
+      <div class="setting-item">
+        <div class="setting-row">
+          <label class="setting-label">标签显示模式</label>
+        </div>
+        <div class="tag-mode-options">
+          <label class="tag-mode-option" :class="{ active: localTagDisplayMode === 'dot' }">
+            <input type="radio" v-model="localTagDisplayMode" value="dot" />
+            <span class="mode-icon dot-icon"></span>
+            <span class="mode-text">颜色点</span>
+          </label>
+          <label class="tag-mode-option" :class="{ active: localTagDisplayMode === 'corner' }">
+            <input type="radio" v-model="localTagDisplayMode" value="corner" />
+            <span class="mode-icon corner-icon"></span>
+            <span class="mode-text">右上角文字</span>
+          </label>
+          <label class="tag-mode-option" :class="{ active: localTagDisplayMode === 'bottom' }">
+            <input type="radio" v-model="localTagDisplayMode" value="bottom" />
+            <span class="mode-icon bottom-icon"></span>
+            <span class="mode-text">座位下部文字</span>
+          </label>
+        </div>
+        <span class="hint-text">控制标签在座位表中的显示方式</span>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-row">
+          <label class="setting-label">座位表元素显示</label>
+        </div>
+        <div class="element-toggles">
+          <div class="element-toggle-group">
+            <label class="toggle-item">
+              <input
+                v-model="localSettings.showStudentName"
+                type="checkbox"
+                class="setting-checkbox"
+              />
+              <span>姓名</span>
+            </label>
+            <label class="toggle-item sub-toggle" :class="{ disabled: !canEnableLargeName }">
+              <input
+                v-model="localSettings.largeNameMode"
+                type="checkbox"
+                class="setting-checkbox"
+                :disabled="!canEnableLargeName"
+              />
+              <span>大字号</span>
+            </label>
+          </div>
+          <div class="element-toggle-group">
+            <label class="toggle-item">
+              <input
+                v-model="localSettings.showStudentNumber"
+                type="checkbox"
+                class="setting-checkbox"
+              />
+              <span>学号</span>
+            </label>
+            <label class="toggle-item sub-toggle" :class="{ disabled: !canEnableLargeNumber }">
+              <input
+                v-model="localSettings.largeNumberMode"
+                type="checkbox"
+                class="setting-checkbox"
+                :disabled="!canEnableLargeNumber"
+              />
+              <span>大字号</span>
+            </label>
+          </div>
+          <div class="element-toggle-group">
+            <label class="toggle-item">
+              <input
+                v-model="localShowTags"
+                type="checkbox"
+                class="setting-checkbox"
+              />
+              <span>标签</span>
+            </label>
+          </div>
+        </div>
+        <span class="hint-text">隐藏至少一个元素后可启用对应的大字号模式</span>
+      </div>
     </div>
   </div>
 </template>
@@ -649,6 +730,7 @@
 import { computed, watch } from 'vue'
 import { RotateCcw, Sun, Moon, Monitor } from 'lucide-vue-next'
 import { useGlobalSettings } from '@/composables/useGlobalSettings'
+import { useTagData } from '@/composables/useTagData'
 import { checkColorCombination } from '@/utils/colorContrast'
 
 const props = defineProps({
@@ -661,12 +743,42 @@ const props = defineProps({
 const emit = defineEmits(['update:settings'])
 
 const { defaultSettings, applyThemeColor, applyColorScheme } = useGlobalSettings()
+const { tagDisplayMode, setTagDisplayMode, showTagsInSeatChart, setShowTagsInSeatChart } = useTagData()
 
 const localSettings = computed({
-  get: () => props.settings,
+  get: () => props.settings || {},
   set: (value) => emit('update:settings', value)
 })
 
+const localTagDisplayMode = computed({
+  get: () => tagDisplayMode.value,
+  set: (val) => setTagDisplayMode(val)
+})
+const localShowTags = computed({
+  get: () => showTagsInSeatChart.value,
+  set: (val) => setShowTagsInSeatChart(val)
+})
+
+const hasHiddenElement = computed(() => {
+  return !localSettings.value.showStudentName || !localSettings.value.showStudentNumber || !localShowTags.value
+})
+
+const canEnableLargeName = computed(() => {
+  return hasHiddenElement.value && localSettings.value.showStudentName
+})
+
+const canEnableLargeNumber = computed(() => {
+  return hasHiddenElement.value && localSettings.value.showStudentNumber
+})
+
+watch(canEnableLargeName, (val) => {
+  if (!val) localSettings.value.largeNameMode = false
+})
+
+watch(canEnableLargeNumber, (val) => {
+  if (!val) localSettings.value.largeNumberMode = false
+})
+
 // 判断是否为默认值
 const isDefaultColorMode = computed(() =>
   localSettings.value.colorMode === defaultSettings.ui.colorMode
@@ -1035,4 +1147,156 @@ watch(() => localSettings.value.customColors, () => {
   border-color: var(--color-primary);
   color: var(--color-primary);
 }
+
+.tag-mode-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tag-mode-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tag-mode-option:hover {
+  background: var(--color-bg-soft);
+  border-color: var(--color-border-strong);
+}
+
+.tag-mode-option.active {
+  background: var(--color-bg-selected);
+  border-color: var(--color-primary);
+}
+
+.tag-mode-option input[type="radio"] {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.mode-icon {
+  width: 48px;
+  height: 36px;
+  border-radius: 4px;
+  position: relative;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mode-icon::before {
+  content: '张三';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+.bottom-icon::before {
+  top: 40%;
+}
+
+.dot-icon::after {
+  content: '';
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 4px;
+  display: flex;
+  gap: 2px;
+  justify-content: center;
+  background:
+    radial-gradient(circle, var(--color-danger) 1.5px, transparent 1.5px) 0 0,
+    radial-gradient(circle, var(--color-primary) 1.5px, transparent 1.5px) 6px 0,
+    radial-gradient(circle, var(--color-warning) 1.5px, transparent 1.5px) 12px 0;
+  background-size: 4px 4px, 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+
+.corner-icon::after {
+  content: 'A';
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--color-surface);
+  background: var(--color-danger);
+  padding: 1px 4px;
+  border-radius: 2px;
+  line-height: 1.2;
+}
+
+.bottom-icon::after {
+  content: 'A';
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 8px;
+  font-weight: 700;
+  color: var(--color-surface);
+  background: var(--color-danger);
+  padding: 1px 5px;
+  border-radius: 2px;
+  line-height: 1.2;
+}
+
+.mode-text {
+  font-size: 13px;
+  color: var(--color-text-primary);
+}
+
+.element-toggles {
+  display: flex;
+  gap: 16px;
+}
+
+.element-toggle-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.toggle-item.sub-toggle {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  padding-left: 4px;
+  border-left: 1px solid var(--color-border);
+}
+
+.toggle-item.sub-toggle.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.toggle-item .setting-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/student/BatchEditDialog.vue b/src/components/student/BatchEditDialog.vue
index 0d48017..e3904c1 100644
--- a/src/components/student/BatchEditDialog.vue
+++ b/src/components/student/BatchEditDialog.vue
@@ -220,7 +220,7 @@ const close = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -434,7 +434,7 @@ const close = () => {
 .tag-badge {
   font-size: 10px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 2px 6px;
   border-radius: 4px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
diff --git a/src/components/student/CandidateItem.vue b/src/components/student/CandidateItem.vue
index 3a78f7b..02796d2 100644
--- a/src/components/student/CandidateItem.vue
+++ b/src/components/student/CandidateItem.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="candidate-item" :class="{ dragging: isStudentDragging }"
+  <div class="candidate-item" :class="{ dragging: isStudentDragging, selected: isSelected }"
     ref="itemRef" :draggable="canHtmlDrag()"
+    @click="handleClick"
     @dragstart="handleDragStart" @dragend="handleDragEnd"
     @dblclick="handleDoubleClick"
     @contextmenu.prevent @pointerdown="handlePointerDown">
-    <div class="student-display" :class="{ 'bottom-tag-mode': tagDisplayMode === 'bottom' }">
-      <div class="student-name">{{ student.name || '未命名' }}</div>
+    <div class="student-display" :class="{ 'bottom-tag-mode': tagDisplayMode === 'bottom', 'name-hidden': !showStudentName, 'number-hidden': !showStudentNumber, 'large-name': largeNameMode, 'large-number': largeNumberMode }">
+      <div v-if="showStudentName" class="student-name">{{ student.name || '未命名' }}</div>
       <!-- 颜色点模式：显示所有标签，用实心/空心区分 -->
       <div v-if="hasTags && tagDisplayMode === 'dot'" class="student-tags">
         <span v-for="tag in allVisibleTags" :key="tag.id"
@@ -15,10 +16,10 @@
         </span>
       </div>
       <!-- 座位下部文字模式：学号绝对定位到右上角 -->
-      <div v-if="tagDisplayMode === 'bottom'" class="student-number-corner">
+      <div v-if="showStudentNumber && tagDisplayMode === 'bottom'" class="student-number-corner">
         {{ student.studentNumber || '-' }}
       </div>
-      <div v-else class="student-number">{{ student.studentNumber || '-' }}</div>
+      <div v-else-if="showStudentNumber" class="student-number">{{ student.studentNumber || '-' }}</div>
       <!-- 座位下部文字模式：只显示学生拥有的标签 -->
       <div v-if="hasTags && tagDisplayMode === 'bottom'" class="student-tags-text">
         <span v-for="tag in studentTags" :key="tag.id"
@@ -46,6 +47,8 @@ import { computed, ref } from 'vue'
 import { useStudentDragging } from '@/composables/useStudentDragging'
 import { useTagData } from '@/composables/useTagData'
 import { useSeatChart } from '@/composables/useSeatChart'
+import { useStudentData } from '@/composables/useStudentData'
+import { useEditMode } from '@/composables/useEditMode'
 import { useGlobalSettings } from '@/composables/useGlobalSettings'
 import { useLogger } from '@/composables/useLogger'
 
@@ -61,9 +64,19 @@ const emit = defineEmits(['edit-student'])
 const itemRef = ref(null)
 const { tags, showTagsInSeatChart, tagDisplayMode } = useTagData()
 const { getEmptySeats, assignStudent } = useSeatChart()
+const { selectedStudentId, selectStudent, clearSelection } = useStudentData()
+const { currentMode, setMode, EditMode } = useEditMode()
 const { settings } = useGlobalSettings()
 const { success, warning } = useLogger()
 
+const isSelected = computed(() => selectedStudentId.value === props.student.id)
+
+const showStudentName = computed(() => settings.value.ui.showStudentName !== false)
+const showStudentNumber = computed(() => settings.value.ui.showStudentNumber !== false)
+const hasHiddenElement = computed(() => !showStudentName.value || !showStudentNumber.value)
+const largeNameMode = computed(() => showStudentName.value && hasHiddenElement.value && settings.value.ui.largeNameMode)
+const largeNumberMode = computed(() => showStudentNumber.value && hasHiddenElement.value && settings.value.ui.largeNumberMode)
+
 const allVisibleTags = computed(() => {
   if (!showTagsInSeatChart.value) return []
   return tags.value.filter(tag => tag.showInSeatChart !== false)
@@ -93,6 +106,17 @@ const {
   handleDragEnd
 } = useStudentDragging(itemRef, computed(() => props.student))
 
+const handleClick = () => {
+  if (isSelected.value) {
+    clearSelection()
+    return
+  }
+  if (currentMode.value !== EditMode.NORMAL) {
+    setMode(EditMode.NORMAL)
+  }
+  selectStudent(props.student.id)
+}
+
 // 双击处理
 const handleDoubleClick = () => {
   const doubleClickAction = settings.value.editor.doubleClickAction
@@ -159,6 +183,12 @@ const handleDoubleClick = () => {
   transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
+.candidate-item.selected {
+  border-color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-card));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
+}
+
 .student-display {
   display: flex;
   flex-direction: column;
@@ -174,6 +204,23 @@ const handleDoubleClick = () => {
   gap: 2px;
 }
 
+.student-display.name-hidden.number-hidden {
+  justify-content: center;
+}
+
+.student-display.name-hidden:not(.number-hidden) .student-number {
+  font-size: 14px;
+}
+
+.student-display.large-name .student-name {
+  font-size: 20px;
+}
+
+.student-display.large-number .student-number {
+  font-size: 16px;
+  padding: 4px 14px;
+}
+
 .student-tags {
   display: flex;
   gap: 3px;
@@ -243,7 +290,7 @@ const handleDoubleClick = () => {
 .tag-text-item {
   font-size: 9px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 1px 4px;
   border-radius: 3px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
@@ -265,7 +312,7 @@ const handleDoubleClick = () => {
 .corner-tag-item {
   font-size: 8px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 1px 4px;
   border-radius: 3px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
diff --git a/src/components/student/StudentEditDialog.vue b/src/components/student/StudentEditDialog.vue
index 1498ded..8ffc967 100644
--- a/src/components/student/StudentEditDialog.vue
+++ b/src/components/student/StudentEditDialog.vue
@@ -175,7 +175,7 @@ const close = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/student/StudentItem.vue b/src/components/student/StudentItem.vue
index 006359a..432cffb 100644
--- a/src/components/student/StudentItem.vue
+++ b/src/components/student/StudentItem.vue
@@ -323,7 +323,7 @@ const getTagColor = (id) => getTag(id)?.color || '#999999'
 .tag-text-item {
   font-size: 9px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-inverse);
   padding: 1px 4px;
   border-radius: 3px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
diff --git a/src/components/student/StudentList.vue b/src/components/student/StudentList.vue
index f401e37..c06af6d 100644
--- a/src/components/student/StudentList.vue
+++ b/src/components/student/StudentList.vue
@@ -147,7 +147,7 @@ const { loadWorkspace, applyWorkspaceData, saveLastWorkspace } = useWorkspace()
 const { isLoggedIn, isLoginDialogVisible } = useAuth()
 const { importFromExcel, downloadTemplate } = useExcelData()
 const { isTouchDraggingFromSeat } = useDragState()
-const { recordClear } = useUndo()
+const { recordBatch, createSnapshot } = useUndo()
 const { width: windowWidth } = useWindowSize()
 const { openCloudLoad } = useCloudWorkspaceDialog()
 const { userHeight, getEffectiveHeight } = useResizablePanel()
@@ -313,20 +313,18 @@ const handleDrop = (e) => {
   try {
     const data = JSON.parse(raw)
     if (data.type === 'seat' && data.studentId != null) {
-      // 检查是否是选区批量移出
       if (data.selectedSeatIds && data.selectedSeatIds.length > 1) {
-        // 批量移出选中的座位
+        const beforeSnapshot = createSnapshot()
         data.selectedSeatIds.forEach(seatId => {
           const studentId = getStudentAtSeat(seatId)
           if (studentId !== null) {
-            recordClear(seatId, studentId)
-            clearSeat(seatId)
+            clearSeat(seatId, false)
           }
         })
+        const afterSnapshot = createSnapshot()
+        recordBatch(beforeSnapshot, afterSnapshot)
         success(`已将 ${data.selectedSeatIds.length} 名学生移回候选列表`)
       } else {
-        // 单个座位移出
-        recordClear(data.seatId, data.studentId)
         clearSeat(data.seatId)
         success('已将学生移回候选列表')
       }
diff --git a/src/components/student/StudentListHeader.vue b/src/components/student/StudentListHeader.vue
index 50024ff..a298287 100644
--- a/src/components/student/StudentListHeader.vue
+++ b/src/components/student/StudentListHeader.vue
@@ -55,6 +55,7 @@ import { useStudentData } from '@/composables/useStudentData'
 import { useSeatChart } from '@/composables/useSeatChart'
 import { useEditMode } from '@/composables/useEditMode'
 import { useLogger } from '@/composables/useLogger'
+import { useUndo } from '@/composables/useUndo'
 
 const ExportDialog = defineAsyncComponent(() => import('../layout/ExportPreview.vue'))
 
@@ -71,6 +72,7 @@ const { students } = useStudentData()
 const { findSeatByStudent, getEmptySeats, assignStudent } = useSeatChart()
 const { currentMode, setMode, EditMode, clearFirstSelectedSeat } = useEditMode()
 const { success, warning } = useLogger()
+const { recordBatch, createSnapshot } = useUndo()
 
 const showExportDialog = ref(false)
 const lastExportUrl = ref('')
@@ -133,10 +135,13 @@ const handleRandomAssign = () => {
   }
 
   let assignedCount = 0
+  const beforeSnapshot = createSnapshot()
   for (let i = 0; i < candidates.length && i < shuffledSeats.length; i++) {
-    assignStudent(shuffledSeats[i].id, candidates[i].id)
+    assignStudent(shuffledSeats[i].id, candidates[i].id, false)
     assignedCount++
   }
+  const afterSnapshot = createSnapshot()
+  recordBatch(beforeSnapshot, afterSnapshot)
 
   success(`已随机入座 ${assignedCount} 名学生！`)
   emit('random-assign')
diff --git a/src/components/student/StudentRosterDialog.vue b/src/components/student/StudentRosterDialog.vue
index 123622e..b4b4fd4 100644
--- a/src/components/student/StudentRosterDialog.vue
+++ b/src/components/student/StudentRosterDialog.vue
@@ -182,7 +182,7 @@ const close = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   display: flex;
diff --git a/src/components/student/TagManager.vue b/src/components/student/TagManager.vue
index 06d2307..20e2b9f 100644
--- a/src/components/student/TagManager.vue
+++ b/src/components/student/TagManager.vue
@@ -328,7 +328,7 @@ const deleteTagHandler = (tagId, tagName) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/student/TagSettingsDialog.vue b/src/components/student/TagSettingsDialog.vue
index 83a0a6c..5abfe7b 100644
--- a/src/components/student/TagSettingsDialog.vue
+++ b/src/components/student/TagSettingsDialog.vue
@@ -8,25 +8,13 @@
           <input type="checkbox" v-model="localShowTagsInSeatChart" />
           <span class="checkbox-text">在座位表中显示标签</span>
         </label>
-        <div class="display-mode-section" :class="{ disabled: !localShowTagsInSeatChart }">
-          <label class="mode-label">显示模式:</label>
-          <div class="mode-options">
-            <label class="mode-option" :class="{ active: localTagDisplayMode === 'dot' }">
-              <input type="radio" v-model="localTagDisplayMode" value="dot" :disabled="!localShowTagsInSeatChart" />
-              <span class="mode-icon dot-icon"></span>
-              <span class="mode-text">颜色点</span>
-            </label>
-            <label class="mode-option" :class="{ active: localTagDisplayMode === 'corner' }">
-              <input type="radio" v-model="localTagDisplayMode" value="corner" :disabled="!localShowTagsInSeatChart" />
-              <span class="mode-icon corner-icon"></span>
-              <span class="mode-text">右上角文字</span>
-            </label>
-            <label class="mode-option" :class="{ active: localTagDisplayMode === 'bottom' }">
-              <input type="radio" v-model="localTagDisplayMode" value="bottom" :disabled="!localShowTagsInSeatChart" />
-              <span class="mode-icon bottom-icon"></span>
-              <span class="mode-text">座位下部文字</span>
-            </label>
-          </div>
+        <div class="display-mode-redirect">
+          <span class="redirect-label">显示模式已移至</span>
+          <button class="redirect-btn" @click="goToDisplayModeSettings">
+            <Settings :size="14" stroke-width="2" />
+            设置 - 界面偏好
+            <ChevronRight :size="14" stroke-width="2" />
+          </button>
         </div>
       </div>
       
@@ -98,13 +86,14 @@
 
 <script setup>
 import { ref, watch, nextTick, computed } from 'vue'
-import { Pencil, X, Plus } from 'lucide-vue-next'
+import { Pencil, X, Plus, Settings, ChevronRight } from 'lucide-vue-next'
 import TagStudentSelector from './TagStudentSelector.vue'
 import { getNextColor } from '@/constants/tagColors'
 import { useConfirmAction } from '@/composables/useConfirmAction'
 import { useLogger } from '@/composables/useLogger'
 import { useTagData } from '@/composables/useTagData'
 import { useStudentData } from '@/composables/useStudentData'
+import { useSettingsDialog } from '@/composables/useSettingsDialog'
 
 const props = defineProps({
   visible: {
@@ -115,17 +104,17 @@ const props = defineProps({
 
 const emit = defineEmits(['update:visible'])
 
-const { tags, showTagsInSeatChart, tagDisplayMode, addTag, editTag, deleteTag, setShowTagsInSeatChart, setTagDisplayMode } = useTagData()
+const { tags, showTagsInSeatChart, addTag, editTag, deleteTag, setShowTagsInSeatChart } = useTagData()
 const { students, addTagToStudents, removeTagFromStudent, removeTagFromStudents } = useStudentData()
 const { requestConfirm, isPending } = useConfirmAction()
 const { warning, info, success } = useLogger()
+const { openSettings } = useSettingsDialog()
 
 const getTagStudentCount = (tagId) => {
   return students.value.filter(s => s.tags.includes(tagId)).length
 }
 
 const localShowTagsInSeatChart = ref(true)
-const localTagDisplayMode = ref('dot')
 const tagDialogVisible = ref(false)
 const isEditing = ref(false)
 const currentTag = ref({ id: null, name: '', color: '#23587b' })
@@ -135,7 +124,6 @@ const selectedStudentIds = ref([])
 watch(() => props.visible, (val) => {
   if (val) {
     localShowTagsInSeatChart.value = showTagsInSeatChart.value
-    localTagDisplayMode.value = tagDisplayMode.value
   }
 })
 
@@ -143,14 +131,15 @@ watch(localShowTagsInSeatChart, (val) => {
   setShowTagsInSeatChart(val)
 })
 
-watch(localTagDisplayMode, (val) => {
-  setTagDisplayMode(val)
-})
-
 const close = () => {
   emit('update:visible', false)
 }
 
+const goToDisplayModeSettings = () => {
+  close()
+  openSettings('global', 'ui')
+}
+
 const showAddDialog = () => {
   isEditing.value = false
   const nextColor = getNextColor(tags.length)
@@ -255,7 +244,7 @@ const deleteTagHandler = (tagId, tagName) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -314,140 +303,39 @@ const deleteTagHandler = (tagId, tagName) => {
   border-bottom: 1px solid var(--color-border);
 }
 
-.display-mode-section {
-  margin-top: 16px;
+.display-mode-redirect {
+  margin-top: 12px;
   padding-left: 26px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.display-mode-section.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.mode-label {
-  display: block;
+.redirect-label {
   font-size: 13px;
   color: var(--color-text-secondary);
-  margin-bottom: 8px;
-}
-
-.mode-options {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
 }
 
-.mode-option {
-  display: flex;
+.redirect-btn {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--color-bg-secondary);
+  gap: 4px;
+  padding: 4px 10px;
+  background: var(--color-bg-subtle);
   border: 1px solid var(--color-border);
   border-radius: 6px;
   cursor: pointer;
+  font-size: 13px;
+  color: var(--color-primary);
+  font-weight: 500;
   transition: all 0.2s ease;
 }
 
-.mode-option:hover {
-  background: var(--color-bg-subtle);
-  border-color: var(--color-border);
-}
-
-.mode-option.active {
+.redirect-btn:hover {
   background: var(--color-bg-selected);
   border-color: var(--color-primary);
 }
 
-.mode-option input[type="radio"] {
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-}
-
-.mode-icon {
-  width: 48px;
-  height: 36px;
-  border-radius: 4px;
-  position: relative;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mode-icon::before {
-  content: '张三';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 11px;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-}
-
-.bottom-icon::before {
-  top: 40%;
-}
-
-.dot-icon::after {
-  content: '';
-  position: absolute;
-  bottom: 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 16px;
-  height: 4px;
-  display: flex;
-  gap: 2px;
-  justify-content: center;
-}
-
-.dot-icon::after {
-  background:
-    radial-gradient(circle, var(--color-danger) 1.5px, transparent 1.5px) 0 0,
-    radial-gradient(circle, var(--color-primary) 1.5px, transparent 1.5px) 6px 0,
-    radial-gradient(circle, #f39c12 1.5px, transparent 1.5px) 12px 0;
-  background-size: 4px 4px, 4px 4px, 4px 4px;
-  background-repeat: no-repeat;
-}
-
-.corner-icon::after {
-  content: 'A';
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  font-size: 9px;
-  font-weight: 700;
-  color: var(--color-surface);
-  background: var(--color-danger);
-  padding: 1px 4px;
-  border-radius: 2px;
-  line-height: 1.2;
-}
-
-.bottom-icon::after {
-  content: 'A';
-  position: absolute;
-  bottom: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 8px;
-  font-weight: 700;
-  color: var(--color-surface);
-  background: var(--color-danger);
-  padding: 1px 5px;
-  border-radius: 2px;
-  line-height: 1.2;
-}
-
-.mode-text {
-  font-size: 13px;
-  color: var(--color-text-primary);
-}
-
 .checkbox-label {
   display: flex;
   align-items: center;
diff --git a/src/components/student/TagStudentSelector.vue b/src/components/student/TagStudentSelector.vue
index 9e064a0..12dd2d4 100644
--- a/src/components/student/TagStudentSelector.vue
+++ b/src/components/student/TagStudentSelector.vue
@@ -137,7 +137,7 @@ const toggleStudent = (studentId) => {
 .student-list {
   max-height: 200px;
   overflow-y: auto;
-  border: 1px solid #e8eef2;
+  border: 1px solid var(--color-border);
   border-radius: 6px;
   background: var(--color-surface);
 }
diff --git a/src/components/ui/GlobalDropZone.vue b/src/components/ui/GlobalDropZone.vue
index 2908849..866a884 100644
--- a/src/components/ui/GlobalDropZone.vue
+++ b/src/components/ui/GlobalDropZone.vue
@@ -16,13 +16,11 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useDragState } from '@/composables/useDragState'
 import { useSeatChart } from '@/composables/useSeatChart'
 import { useStudentData } from '@/composables/useStudentData'
-import { useUndo } from '@/composables/useUndo'
 import { useLogger } from '@/composables/useLogger'
 
 const { isDraggingFromSeat } = useDragState()
-const { clearSeat, getStudentAtSeat } = useSeatChart()
+const { clearSeat } = useSeatChart()
 const { clearSelection, students } = useStudentData()
-const { recordClear } = useUndo()
 const { success } = useLogger()
 
 const isDragOver = ref(false)
@@ -53,8 +51,6 @@ const handleDrop = (e) => {
   try {
     const data = JSON.parse(raw)
     if (data.type === 'seat' && data.seatId) {
-      const studentId = getStudentAtSeat(data.seatId)
-      recordClear(data.seatId, studentId)
       clearSeat(data.seatId)
       clearSelection()
       success('已将学生移出座位')
diff --git a/src/components/ui/LoadingSpinner.vue b/src/components/ui/LoadingSpinner.vue
index 27ba145..1ce6d6c 100644
--- a/src/components/ui/LoadingSpinner.vue
+++ b/src/components/ui/LoadingSpinner.vue
@@ -23,7 +23,7 @@ defineProps({
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.7);
+  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/ui/ResizeDivider.vue b/src/components/ui/ResizeDivider.vue
index b6142f8..366f417 100644
--- a/src/components/ui/ResizeDivider.vue
+++ b/src/components/ui/ResizeDivider.vue
@@ -11,8 +11,12 @@
       @mousedown="handleMouseDown"
       @touchstart.prevent="handleTouchStart"
     >
-      <div class="divider-handle">
-        <GripHorizontal :size="16" stroke-width="2" />
+      <div class="divider-line">
+        <div class="divider-grip">
+          <span class="grip-dot"></span>
+          <span class="grip-dot"></span>
+          <span class="grip-dot"></span>
+        </div>
       </div>
     </div>
 
@@ -23,15 +27,15 @@
       :aria-label="isCollapsed ? '展开候选栏' : '折叠候选栏'"
       :title="isCollapsed ? '展开候选栏' : '折叠候选栏'"
     >
-      <ChevronDown v-if="!isCollapsed" :size="14" />
-      <ChevronUp v-else :size="14" />
+      <ChevronDown v-if="!isCollapsed" :size="12" stroke-width="2.5" />
+      <ChevronUp v-else :size="12" stroke-width="2.5" />
     </button>
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import { GripHorizontal, ChevronUp, ChevronDown } from 'lucide-vue-next'
+import { ChevronUp, ChevronDown } from 'lucide-vue-next'
 import { useResizablePanel } from '@/composables/useResizablePanel'
 
 const props = defineProps({
@@ -105,8 +109,7 @@ const handleToggleClick = (e) => {
 <style scoped>
 .resize-divider {
   position: relative;
-  height: 6px;
-  background: var(--color-border-light);
+  height: 12px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -118,10 +121,10 @@ const handleToggleClick = (e) => {
 
 .divider-drag-area {
   position: absolute;
-  top: -8px;
+  top: -4px;
   left: 0;
   right: 0;
-  height: 22px;
+  height: 20px;
   cursor: ns-resize;
   display: flex;
   align-items: center;
@@ -129,65 +132,89 @@ const handleToggleClick = (e) => {
   touch-action: none;
 }
 
-.divider-drag-area:hover {
-  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
-}
-
-.resize-divider.is-dragging {
-  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
-}
-
-.resize-divider.is-dragging .divider-drag-area {
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+.divider-line {
+  width: 100%;
+  height: 1px;
+  background: var(--color-border);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
 }
 
-.divider-handle {
+.divider-grip {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 20px;
+  gap: 3px;
+  padding: 4px 10px;
   background: var(--color-surface);
-  border: 1px solid var(--color-border-strong);
-  border-radius: 8px;
-  color: var(--color-text-disabled);
-  opacity: 1;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  position: relative;
+  z-index: 1;
   transition: all 0.2s ease;
   pointer-events: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
-.divider-drag-area:hover .divider-handle {
+.grip-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-text-disabled);
+  transition: background 0.2s ease;
+}
+
+.divider-drag-area:hover .divider-line {
+  background: var(--color-border-strong);
+}
+
+.divider-drag-area:hover .divider-grip {
   border-color: var(--color-primary);
-  color: var(--color-primary);
-  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
 }
 
-.resize-divider.is-dragging .divider-handle {
-  border-color: var(--color-primary-hover);
-  color: var(--color-primary-hover);
-  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent);
-  transform: scale(1.05);
+.divider-drag-area:hover .grip-dot {
+  background: var(--color-primary);
+}
+
+.resize-divider.is-dragging {
+  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
+}
+
+.resize-divider.is-dragging .divider-line {
+  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
+
+.resize-divider.is-dragging .divider-grip {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
+  transform: scale(1.08);
+}
+
+.resize-divider.is-dragging .grip-dot {
+  background: var(--color-primary);
 }
 
 .collapse-toggle {
   position: absolute;
-  left: calc(50% + 32px);
+  left: calc(50% + 30px);
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   background: var(--color-surface);
-  border: 1px solid var(--color-border-strong);
-  border-radius: 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
   color: var(--color-text-muted);
   cursor: pointer;
   transition: all 0.2s ease;
   z-index: 11;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   touch-action: manipulation;
 }
 
@@ -195,51 +222,58 @@ const handleToggleClick = (e) => {
   background: var(--color-bg-subtle);
   border-color: var(--color-primary);
   color: var(--color-primary);
-  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
   transform: translateY(-50%) scale(1.1);
 }
 
 .collapse-toggle:active {
-  transform: translateY(-50%) scale(0.95);
+  transform: translateY(-50%) scale(0.92);
 }
 
 .collapse-toggle.is-collapsed {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-surface);
-  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 
 .collapse-toggle.is-collapsed:hover {
   background: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
-  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 35%, transparent);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.resize-divider.is-collapsed .divider-line {
+  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 
-.resize-divider.is-collapsed {
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+.resize-divider.is-collapsed .divider-grip {
+  opacity: 0.4;
 }
 
-.resize-divider.is-collapsed .divider-handle {
-  opacity: 0.5;
+.resize-divider.is-collapsed .grip-dot {
+  background: var(--color-primary);
 }
 
-/* 触摸屏优化 */
 @media (hover: none) and (pointer: coarse) {
   .divider-drag-area {
-    height: 32px;
-    top: -13px;
+    height: 28px;
+    top: -8px;
   }
 
-  .divider-handle {
-    width: 56px;
-    height: 24px;
+  .divider-grip {
+    padding: 5px 12px;
+    gap: 4px;
+  }
+
+  .grip-dot {
+    width: 4px;
+    height: 4px;
   }
 
   .collapse-toggle {
-    width: 32px;
-    height: 32px;
-    left: calc(50% + 36px);
+    width: 28px;
+    height: 28px;
+    left: calc(50% + 34px);
   }
 
   .collapse-toggle:hover {
@@ -248,30 +282,29 @@ const handleToggleClick = (e) => {
 
   .collapse-toggle:active {
     transform: translateY(-50%) scale(0.9);
-    background: var(--color-bg-secondary);
-  }
-
-  .collapse-toggle.is-collapsed:active {
-    background: var(--color-primary-hover);
   }
 }
 
-/* 桌面触摸屏优化（如 Surface） */
 @media (hover: hover) and (pointer: coarse) {
   .divider-drag-area {
-    height: 28px;
-    top: -11px;
+    height: 24px;
+    top: -6px;
+  }
+
+  .divider-grip {
+    padding: 5px 11px;
+    gap: 3.5px;
   }
 
-  .divider-handle {
-    width: 52px;
-    height: 22px;
+  .grip-dot {
+    width: 3.5px;
+    height: 3.5px;
   }
 
   .collapse-toggle {
-    width: 28px;
-    height: 28px;
-    left: calc(50% + 34px);
+    width: 24px;
+    height: 24px;
+    left: calc(50% + 32px);
   }
 }
 
diff --git a/src/components/workspace/CloudWorkspaceDialog.vue b/src/components/workspace/CloudWorkspaceDialog.vue
index 44f8962..5b37db5 100644
--- a/src/components/workspace/CloudWorkspaceDialog.vue
+++ b/src/components/workspace/CloudWorkspaceDialog.vue
@@ -154,6 +154,7 @@ import { useWorkspace } from '@/composables/useWorkspace'
 import { useLogger } from '@/composables/useLogger'
 import { useConfirmAction } from '@/composables/useConfirmAction'
 import { useAuth } from '@/composables/useAuth'
+import { useAutoSave } from '@/composables/useAutoSave'
 
 const props = defineProps({
   visible: Boolean,
@@ -170,6 +171,7 @@ const { getWorkspaceJson, applyWorkspaceData, saveLastWorkspace } = useWorkspace
 const { success, error } = useLogger()
 const { requestConfirm } = useConfirmAction()
 const { currentUser, webdavConfig, authType, backupMode } = useAuth()
+const { markSaved } = useAutoSave()
 
 const isSaveMode = ref(false)
 const workspaces = ref([])
@@ -271,6 +273,7 @@ const handleSave = async () => {
     )
     
     if (result.success) {
+      markSaved()
       success('工作区已保存至云端！')
       
       // 记录到 Cookie
@@ -380,7 +383,7 @@ const formatSize = (bytes) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-bg-overlay);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   display: flex;
@@ -631,7 +634,7 @@ const formatSize = (bytes) => {
   width: 100%;
   padding: 12px;
   background: var(--color-primary);
-  color: white;
+  color: var(--color-text-inverse);
   border: none;
   border-radius: 6px;
   font-size: 16px;
diff --git a/src/composables/useAutoSave.js b/src/composables/useAutoSave.js
index fc5fdd9..3aac21a 100644
--- a/src/composables/useAutoSave.js
+++ b/src/composables/useAutoSave.js
@@ -4,29 +4,30 @@ import { useWorkspace } from './useWorkspace'
 import { useLogger } from './useLogger'
 
 let autoSaveTimer = null
+let lastSavedJson = null
 
 export function useAutoSave() {
   const { settings } = useGlobalSettings()
   const { getWorkspaceJson } = useWorkspace()
-  const { info } = useLogger()
+  const { error } = useLogger()
 
   const isAutoSaveEnabled = ref(false)
   const lastSaveTime = ref(null)
 
-  // 执行自动保存
   const performAutoSave = () => {
     try {
       const json = getWorkspaceJson()
       if (!json) return
 
-      // 保存到 localStorage 作为自动保存备份
+      if (lastSavedJson !== null && json === lastSavedJson) return
+
       localStorage.setItem('sce-autosave-backup', json)
       localStorage.setItem('sce-autosave-time', new Date().toISOString())
 
+      lastSavedJson = json
       lastSaveTime.value = new Date()
-      info('已自动保存')
-    } catch (error) {
-      console.error('Auto save failed:', error)
+    } catch (err) {
+      error('自动保存失败: ' + (err.message || err))
     }
   }
 
@@ -79,7 +80,10 @@ export function useAutoSave() {
     return null
   }
 
-  // 清除自动保存备份
+  const markSaved = () => {
+    lastSavedJson = getWorkspaceJson()
+  }
+
   const clearAutoSaveBackup = () => {
     localStorage.removeItem('sce-autosave-backup')
     localStorage.removeItem('sce-autosave-time')
@@ -91,6 +95,7 @@ export function useAutoSave() {
     startAutoSave,
     stopAutoSave,
     performAutoSave,
+    markSaved,
     getAutoSaveBackup,
     clearAutoSaveBackup
   }
diff --git a/src/composables/useGlobalSettings.js b/src/composables/useGlobalSettings.js
index d4e2b36..95f9f0f 100644
--- a/src/composables/useGlobalSettings.js
+++ b/src/composables/useGlobalSettings.js
@@ -49,7 +49,11 @@ const defaultSettings = {
       infoHover: '#1e40af'
     },
     defaultZoom: 100,
-    enableAnimations: true
+    enableAnimations: true,
+    showStudentName: true,
+    showStudentNumber: true,
+    largeNameMode: false,
+    largeNumberMode: false
   },
   editor: {
     autoSaveInterval: 60000, // 1分钟
diff --git a/src/composables/useSettingsDialog.ts b/src/composables/useSettingsDialog.ts
new file mode 100644
index 0000000..9f82e69
--- /dev/null
+++ b/src/composables/useSettingsDialog.ts
@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+
+const visible = ref(false)
+const initialTab = ref('global')
+const initialCategory = ref('ui')
+
+export function useSettingsDialog() {
+  const openSettings = (tab?: string, category?: string) => {
+    if (tab) initialTab.value = tab
+    else initialTab.value = 'global'
+    if (category) initialCategory.value = category
+    else initialCategory.value = 'sync'
+    visible.value = true
+  }
+
+  const closeSettings = () => {
+    visible.value = false
+  }
+
+  return {
+    visible,
+    initialTab,
+    initialCategory,
+    openSettings,
+    closeSettings
+  }
+}
diff --git a/src/composables/useUndo.js b/src/composables/useUndo.js
index eda1394..0f81e08 100644
--- a/src/composables/useUndo.js
+++ b/src/composables/useUndo.js
@@ -77,7 +77,12 @@ export function useUndo() {
       case 'redo_wrapper':
       case 'undo_wrapper':
         if (command.snapshot) {
-          command.snapshot.forEach(s => affected.push(s.id))
+          command.snapshot.forEach(s => {
+            const current = seats.value.find(seat => seat.id === s.id)
+            if (current && (current.studentId !== s.studentId || current.isEmpty !== s.isEmpty)) {
+              affected.push(s.id)
+            }
+          })
         }
         break
     }