From 12b8a11f17447a5617041271f0e24c4314fa755e Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Fri, 15 May 2026 16:11:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=B9=E9=BD=90=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=97=A7=E7=89=88=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |    8 +
 frontend/src/AppShell.vue                 |  135 ++-
 frontend/src/components/DatabasePanel.vue |  112 +-
 frontend/src/components/FileWorkflow.vue  |    6 +-
 frontend/src/components/HistoryPanel.vue  |  150 ++-
 frontend/src/components/ScriptPanel.vue   |  127 +-
 frontend/src/components/SettingsPanel.vue |  151 +--
 frontend/src/composables/pageHeader.ts    |   41 +
 frontend/src/router.ts                    |    2 +-
 frontend/src/styles.css                   | 1314 +++++++++++++--------
 10 files changed, 1286 insertions(+), 760 deletions(-)
 create mode 100644 frontend/src/composables/pageHeader.ts

diff --git a/docs/project_context.md b/docs/project_context.md
index 5ce12a5..8ed5dce 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,13 @@
 # 项目上下文记录
 
+## 2026-05-15：对齐新版前端主体布局并修复全局拖拽默认行为
+
+- 新版 Vue 前端主体内容继续按旧版 `frontend_old/` 的工作区布局对齐：上传页保留旧版上传区尺寸和文件列表结构，数据库页恢复左侧表列表 + 右侧数据区，设置页恢复左右列，脚本页恢复编辑器容器和底部状态栏。
+- `frontend/src/composables/pageHeader.ts` 新增页面顶部副标题和动作注册机制；各页面把原本散落在页面内部的主要动作注册到 `AppShell` 顶栏，避免每个页面重复实现标题栏。
+- `AppShell.vue` 在捕获阶段统一拦截带 `Files` 的 `dragover/drop` 默认行为，修复文件拖到新版页面空白处时浏览器打开文件或弹出下载的问题；真正的文件处理仍由上传区自己的 `drop` 事件完成。
+- 上传区 `FileWorkflow.vue` 明确使用 `.prevent.stop` 处理拖拽事件，并继续支持文件和目录拖拽；目录读取使用 `webkitGetAsEntry()` 递归遍历，文件路径按相对路径去重。
+- 已执行 `npm run build`，构建通过，仅有 Monaco/Vite 大 chunk 体积警告；已用 headless Chrome 验证新版 `/upload` 上传区位于 `x=252,y=88,width=1156,height=220`，拖到页面空白处不会跳转，拖到上传区会加入 `drag-test.csv`。
+
 ## 2026-05-15：恢复新版数据库页左右工作区布局
 
 - `frontend/src/components/DatabasePanel.vue` 已从纵向卡片堆叠改回旧版主体布局：左侧固定 240px 数据表列表，右侧为表数据面板，左下角显示数据库版本和快速导入状态。
diff --git a/frontend/src/AppShell.vue b/frontend/src/AppShell.vue
index ffe6d0f..4f1bd53 100644
--- a/frontend/src/AppShell.vue
+++ b/frontend/src/AppShell.vue
@@ -4,12 +4,13 @@
     <n-layout-sider
       class="app-sider"
       collapse-mode="width"
+      :collapsed="sidebarCollapsed"
       :collapsed-width="64"
-      :width="224"
-      show-trigger
+      :width="220"
+      @update:collapsed="sidebarCollapsed = $event"
     >
       <div class="brand">
-        <div class="brand-mark">CR</div>
+        <div class="brand-mark">📊</div>
         <div class="brand-text">CapacityReport</div>
       </div>
       <n-menu
@@ -21,24 +22,55 @@
         @update:value="handleMenuChange"
       />
       <div class="sider-footer">
-        <span>v2.0</span>
-        <span>CapacityReport</span>
+        <span>版本：v2.0.2</span>
+        <span>Power by：NIXEVOL</span>
       </div>
     </n-layout-sider>
 
     <n-layout>
-      <n-layout-header bordered class="topbar">
-        <div class="topbar-title">
-          <div class="page-title">{{ currentTitle }}</div>
+      <n-layout-header bordered class="topbar page-header">
+        <button class="sidebar-toggle" type="button" title="展开/收起侧边栏" @click="toggleSidebar">
+          ☰
+        </button>
+        <div class="page-header-content">
+          <h1>{{ currentTitle }}</h1>
+          <span v-if="pageSubtitle" class="page-subtitle" :title="pageSubtitle">{{ pageSubtitle }}</span>
         </div>
-        <n-space align="center">
-          <n-tag size="small" type="success" round>已登录</n-tag>
-          <n-button tertiary circle title="退出登录" @click="logout">
+        <div class="page-header-actions">
+          <template v-for="action in pageHeader.actions" :key="action.key">
+            <span v-if="action.kind === 'text'" class="header-info-text">
+              {{ actionLabel(action) }}
+            </span>
+            <n-button
+              v-else
+              size="small"
+              :type="action.type === 'default' ? undefined : action.type"
+              :tertiary="action.variant !== 'solid'"
+              :text="action.variant === 'text'"
+              :loading="actionLoading(action)"
+              :disabled="actionDisabled(action)"
+              :title="actionTitle(action)"
+              @click="runHeaderAction(action)"
+            >
+              <template v-if="actionIcon(action)" #icon>
+                <span class="button-emoji">{{ actionIcon(action) }}</span>
+              </template>
+              {{ actionLabel(action) }}
+            </n-button>
+          </template>
+
+          <button class="theme-toggle" type="button" title="切换主题" @click="toggleTheme">
+            <span>🌓</span>
+          </button>
+          <button class="restart-btn" type="button" title="重启服务" @click="restartService">
+            <n-icon><PowerOutline /></n-icon>
+          </button>
+          <n-button tertiary circle title="退出登录" class="logout-button" @click="logout">
             <template #icon>
               <n-icon><LogOutOutline /></n-icon>
             </template>
           </n-button>
-        </n-space>
+        </div>
       </n-layout-header>
 
       <n-layout-content class="content">
@@ -49,7 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, ref, type Component } from 'vue';
+import { computed, h, onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue';
 import { RouterView, useRoute, useRouter } from 'vue-router';
 import { useMessage, type MenuOption, NIcon } from 'naive-ui';
 import {
@@ -57,6 +89,7 @@ import {
   ConstructOutline,
   FileTrayFullOutline,
   LogOutOutline,
+  PowerOutline,
   ServerOutline,
   SettingsOutline
 } from '@vicons/ionicons5';
@@ -64,12 +97,15 @@ import {
 import { apiPost, clearToken, getToken, setToken, setUnauthorizedHandler } from './api/client';
 import type { LoginResponse } from './types';
 import LoginView from './components/LoginView.vue';
+import { pageHeader, resetPageHeader, resolveHeaderValue, type PageHeaderAction } from './composables/pageHeader';
 
 const message = useMessage();
 const route = useRoute();
 const router = useRouter();
 const token = ref(getToken());
 const loginLoading = ref(false);
+const sidebarCollapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true');
+const theme = ref(localStorage.getItem('theme') || 'light');
 const menuKeys = ['workflow', 'history', 'database', 'script', 'settings'] as const;
 type MenuKey = (typeof menuKeys)[number];
 
@@ -88,6 +124,24 @@ const activeMenu = computed<MenuKey>(() => {
 const currentTitle = computed(() => {
   return String(route.meta.title || menuOptions.find(item => item.key === activeMenu.value)?.label || '');
 });
+const pageSubtitle = computed(() => resolveHeaderValue(pageHeader.subtitle || '', ''));
+
+document.documentElement.setAttribute('data-theme', theme.value);
+
+onMounted(() => {
+  window.addEventListener('dragover', preventWindowFileDrop, { capture: true });
+  window.addEventListener('drop', preventWindowFileDrop, { capture: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('dragover', preventWindowFileDrop, { capture: true });
+  window.removeEventListener('drop', preventWindowFileDrop, { capture: true });
+});
+
+watch(
+  () => route.name,
+  () => resetPageHeader()
+);
 
 setUnauthorizedHandler(() => {
   token.value = '';
@@ -113,6 +167,26 @@ function logout() {
   token.value = '';
 }
 
+function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+  localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value ? 'true' : 'false');
+}
+
+function toggleTheme() {
+  theme.value = theme.value === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('theme', theme.value);
+  document.documentElement.setAttribute('data-theme', theme.value);
+}
+
+async function restartService() {
+  try {
+    await apiPost('/api/service/restart');
+    message.success('服务正在重启');
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '重启服务失败');
+  }
+}
+
 function handleMenuChange(key: string | number) {
   if (!isMenuKey(key) || key === activeMenu.value) {
     return;
@@ -127,4 +201,39 @@ function isMenuKey(value: unknown): value is MenuKey {
 function renderIcon(icon: Component) {
   return () => h(NIcon, null, { default: () => h(icon) });
 }
+
+function actionLabel(action: PageHeaderAction) {
+  return resolveHeaderValue(action.label, '');
+}
+
+function actionIcon(action: PageHeaderAction) {
+  return resolveHeaderValue(action.icon, '');
+}
+
+function actionTitle(action: PageHeaderAction) {
+  return resolveHeaderValue(action.title, actionLabel(action));
+}
+
+function actionLoading(action: PageHeaderAction) {
+  return resolveHeaderValue(action.loading, false);
+}
+
+function actionDisabled(action: PageHeaderAction) {
+  return resolveHeaderValue(action.disabled, false);
+}
+
+function runHeaderAction(action: PageHeaderAction) {
+  void action.onClick?.();
+}
+
+function preventWindowFileDrop(event: DragEvent) {
+  const types = Array.from(event.dataTransfer?.types || []);
+  if (!types.includes('Files')) {
+    return;
+  }
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'copy';
+  }
+}
 </script>
diff --git a/frontend/src/components/DatabasePanel.vue b/frontend/src/components/DatabasePanel.vue
index f709432..45a5153 100644
--- a/frontend/src/components/DatabasePanel.vue
+++ b/frontend/src/components/DatabasePanel.vue
@@ -2,13 +2,6 @@
   <div class="database-workspace">
     <aside class="database-sidebar-pane">
       <section class="database-table-pane">
-        <div class="database-table-actions">
-          <n-button size="small" tertiary :loading="loadingTables" @click="loadTables">刷新数据表</n-button>
-          <n-button size="small" tertiary type="error" :disabled="tables.length === 0" @click="confirmDropAll">
-            删除全部
-          </n-button>
-        </div>
-
         <div class="database-table-list-wrap">
           <n-empty v-if="tables.length === 0 && !loadingTables" description="暂无数据表" />
           <n-spin v-else-if="loadingTables" class="database-list-loading" size="small" />
@@ -126,12 +119,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useDialog, useMessage } from 'naive-ui';
 import type { DataTableColumns } from 'naive-ui';
 
 import { apiGet, apiPost, download } from '../api/client';
 import type { ApiMessage, DatabaseInfo, TableData, TableInfo } from '../types';
+import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
 
 type RowData = Record<string, unknown>;
 type DownloadFormat = 'csv' | 'xlsx';
@@ -166,10 +160,27 @@ const columns = computed<DataTableColumns<RowData>>(() => {
 });
 
 onMounted(() => {
+  setPageHeader({
+    actions: [
+      {
+        key: 'drop-all-tables',
+        label: '删除全部表',
+        icon: '🗑️',
+        type: 'error',
+        variant: 'solid',
+        disabled: computed(() => tables.value.length === 0),
+        onClick: confirmDropAll
+      }
+    ]
+  });
   void testConnection();
   void loadTables();
 });
 
+onBeforeUnmount(() => {
+  resetPageHeader();
+});
+
 async function testConnection() {
   testing.value = true;
   try {
@@ -342,9 +353,10 @@ function formatCell(value: unknown): string {
 .database-workspace {
   display: flex;
   gap: 20px;
-  height: calc(100vh - 92px);
-  min-height: 560px;
+  height: 100%;
+  min-height: 0;
   min-width: 0;
+  padding: 24px 32px;
 }
 
 .database-sidebar-pane {
@@ -358,9 +370,9 @@ function formatCell(value: unknown): string {
 .database-table-pane,
 .database-content-pane,
 .database-server-info {
-  background: #fff;
-  border: 1px solid #dfe4ec;
-  border-radius: 6px;
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-border-color-light);
+  border-radius: var(--td-radius-default);
 }
 
 .database-table-pane {
@@ -370,16 +382,6 @@ function formatCell(value: unknown): string {
   flex-direction: column;
 }
 
-.database-table-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  min-height: 46px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #e6eaf0;
-}
-
 .database-table-list-wrap {
   display: flex;
   flex: 1;
@@ -403,36 +405,37 @@ function formatCell(value: unknown): string {
   min-height: 38px;
   align-items: center;
   gap: 10px;
-  padding: 8px 14px;
-  color: #1f2933;
+  padding: 10px 16px;
+  color: var(--td-text-color-primary);
   font: inherit;
   text-align: left;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid #e8ecf2;
+  border-bottom: 1px solid var(--td-border-color-light);
   cursor: pointer;
+  transition: all var(--td-transition);
 }
 
 .database-table-item:hover {
-  background: #f4f7fb;
+  background: var(--td-bg-color-container-hover);
 }
 
 .database-table-item.active {
-  color: #0052d9;
-  font-weight: 600;
-  background: #ecf2fe;
+  color: var(--td-brand-color);
+  font-weight: 500;
+  background: var(--td-brand-color-light);
 }
 
 .table-dot {
   width: 7px;
   height: 7px;
   flex: 0 0 auto;
-  background: #9aa4b2;
+  background: var(--td-text-color-placeholder);
   border-radius: 50%;
 }
 
 .database-table-item.active .table-dot {
-  background: #0052d9;
+  background: var(--td-brand-color);
 }
 
 .table-name {
@@ -447,7 +450,7 @@ function formatCell(value: unknown): string {
   flex-shrink: 0;
   padding: 10px 12px 28px;
   font-size: 12px;
-  background: #f8fafc;
+  background: var(--td-bg-color-secondarycontainer);
 }
 
 .server-info-item {
@@ -459,11 +462,11 @@ function formatCell(value: unknown): string {
 }
 
 .server-info-item:not(:last-of-type) {
-  border-bottom: 1px dashed #dfe4ec;
+  border-bottom: 1px dashed var(--td-border-color-light);
 }
 
 .info-label {
-  color: #4f5b6b;
+  color: var(--td-text-color-secondary);
 }
 
 .info-value {
@@ -484,18 +487,18 @@ function formatCell(value: unknown): string {
 }
 
 .status-badge.success {
-  color: #00a870;
-  background: #dff7ed;
+  color: var(--td-success-color);
+  background: var(--td-success-color-light);
 }
 
 .status-badge.warning {
-  color: #ed7b2f;
-  background: #fff1e6;
+  color: var(--td-warning-color);
+  background: var(--td-warning-color-light);
 }
 
 .status-badge.unknown {
-  color: #8b95a4;
-  background: #edf1f6;
+  color: var(--td-text-color-placeholder);
+  background: var(--td-bg-color-container-hover);
 }
 
 .connection-test {
@@ -518,9 +521,9 @@ function formatCell(value: unknown): string {
   justify-content: space-between;
   gap: 12px;
   min-height: 48px;
-  padding: 8px 14px;
-  background: #f8fafc;
-  border-bottom: 1px solid #e6eaf0;
+  padding: 12px 16px;
+  background: var(--td-bg-color-secondarycontainer);
+  border-bottom: 1px solid var(--td-border-color-light);
 }
 
 .toolbar-left {
@@ -533,8 +536,8 @@ function formatCell(value: unknown): string {
 .current-table {
   overflow: hidden;
   max-width: 42vw;
-  color: #1f2933;
-  font-weight: 700;
+  color: var(--td-text-color-primary);
+  font-weight: 600;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -542,9 +545,9 @@ function formatCell(value: unknown): string {
 .row-count {
   flex: 0 0 auto;
   padding: 2px 8px;
-  color: #667386;
+  color: var(--td-text-color-secondary);
   font-size: 12px;
-  background: #edf1f6;
+  background: var(--td-bg-color-component);
   border-radius: 10px;
 }
 
@@ -573,7 +576,7 @@ function formatCell(value: unknown): string {
 .columns-collapse {
   flex: 0 0 auto;
   padding: 0 14px 12px;
-  border-top: 1px solid #e6eaf0;
+  border-top: 1px solid var(--td-border-color-light);
 }
 
 .database-pagination {
@@ -582,15 +585,15 @@ function formatCell(value: unknown): string {
   justify-content: space-between;
   gap: 12px;
   min-height: 48px;
-  padding: 8px 14px;
-  background: #f8fafc;
-  border-top: 1px solid #e6eaf0;
+  padding: 12px 16px;
+  background: var(--td-bg-color-secondarycontainer);
+  border-top: 1px solid var(--td-border-color-light);
 }
 
 .pagination-total {
   flex: 0 0 auto;
-  color: #667386;
-  font-size: 12px;
+  color: var(--td-text-color-secondary);
+  font-size: 13px;
 }
 
 @media (max-width: 1180px) {
@@ -598,6 +601,7 @@ function formatCell(value: unknown): string {
     flex-direction: column;
     height: auto;
     min-height: 0;
+    padding: 16px;
   }
 
   .database-sidebar-pane {
diff --git a/frontend/src/components/FileWorkflow.vue b/frontend/src/components/FileWorkflow.vue
index 8ac4ec4..dd913c4 100644
--- a/frontend/src/components/FileWorkflow.vue
+++ b/frontend/src/components/FileWorkflow.vue
@@ -9,10 +9,10 @@
       @click="openFilePicker"
       @keydown.enter.prevent="openFilePicker"
       @keydown.space.prevent="openFilePicker"
-      @dragenter.prevent="onDragEnter"
-      @dragover.prevent="onDragOver"
+      @dragenter.prevent.stop="onDragEnter"
+      @dragover.prevent.stop="onDragOver"
       @dragleave="onDragLeave"
-      @drop="onDrop"
+      @drop.prevent.stop="onDrop"
     >
       <div class="upload-icon">
         <n-icon size="24"><FolderOpenOutline /></n-icon>
diff --git a/frontend/src/components/HistoryPanel.vue b/frontend/src/components/HistoryPanel.vue
index 5a55917..2d5ac9b 100644
--- a/frontend/src/components/HistoryPanel.vue
+++ b/frontend/src/components/HistoryPanel.vue
@@ -1,92 +1,98 @@
 <template>
-  <n-grid :cols="12" :x-gap="16" :y-gap="16" responsive="screen">
-    <n-gi :span="12" :m="5">
-      <n-card title="处理历史" size="small">
-        <template #header-extra>
-          <n-space>
-            <n-button size="small" tertiary :loading="loading" @click="loadHistory">刷新</n-button>
-            <n-button size="small" type="error" tertiary :disabled="records.length === 0" @click="confirmClear">
-              清空
-            </n-button>
-          </n-space>
-        </template>
+  <div class="history-page-body">
+    <n-spin v-if="loading" class="page-loading" />
 
-        <n-space vertical>
-          <n-alert v-if="cacheSize" type="default" :bordered="false">
-            缓存占用：{{ cacheSize.size_formatted }}，目录 {{ cacheSize.dir_count }} 个
-          </n-alert>
+    <div v-else-if="records.length === 0" class="empty-state history-empty-state">
+      <span class="empty-icon">📭</span>
+      <p>暂无处理记录</p>
+    </div>
 
-          <n-empty v-if="records.length === 0 && !loading" description="暂无历史记录" />
-          <n-scrollbar v-else class="history-list">
-            <n-list bordered>
-              <n-list-item v-for="record in records" :key="record.id">
-                <n-thing :title="record.id" :description="recordSummary(record)">
-                  <template #header-extra>
-                    <n-tag size="small" :type="statusType(record.status)">{{ statusText(record.status) }}</n-tag>
-                  </template>
-                  <template #action>
-                    <n-space>
-                      <n-button size="small" @click="openDetail(record.id)">详情</n-button>
-                      <n-button size="small" tertiary type="error" @click="confirmDelete(record.id)">删除</n-button>
-                    </n-space>
-                  </template>
-                </n-thing>
-              </n-list-item>
-            </n-list>
-          </n-scrollbar>
-        </n-space>
-      </n-card>
-    </n-gi>
-
-    <n-gi :span="12" :m="7">
-      <n-card title="任务详情" size="small">
-        <template #header-extra>
-          <n-button v-if="detail" size="small" tertiary @click="loadRecordSize(detail.id)">计算占用</n-button>
-        </template>
-
-        <n-empty v-if="!detail" description="请选择一条历史记录" />
-        <n-space v-else vertical size="large">
-          <n-descriptions bordered size="small" :column="2">
-            <n-descriptions-item label="任务 ID">{{ detail.id }}</n-descriptions-item>
-            <n-descriptions-item label="状态">{{ statusText(detail.status) }}</n-descriptions-item>
-            <n-descriptions-item label="文件数">{{ detail.file_count }}</n-descriptions-item>
-            <n-descriptions-item label="耗时">{{ formatElapsed(detail.elapsed_time) }}</n-descriptions-item>
-            <n-descriptions-item label="创建时间">{{ formatDate(detail.timestamp) }}</n-descriptions-item>
-            <n-descriptions-item label="占用">{{ recordSize }}</n-descriptions-item>
-            <n-descriptions-item label="工作目录" :span="2">{{ detail.work_dir }}</n-descriptions-item>
-            <n-descriptions-item v-if="detail.error" label="错误" :span="2">{{ detail.error }}</n-descriptions-item>
-          </n-descriptions>
-
-          <div>
-            <div class="section-label">处理日志</div>
-            <n-log :log="detail.logs.join('\n') || '暂无日志'" language="text" trim class="log-panel" />
+    <div v-else class="history-list">
+      <div v-for="record in records" :key="record.id" class="history-item">
+        <div class="history-status" :class="record.status"></div>
+        <div class="history-info">
+          <div class="history-id">{{ record.id }}</div>
+          <div class="history-meta">
+            {{ formatDate(record.timestamp) }} · {{ record.file_count }} 个文件 · {{ formatElapsed(record.elapsed_time) }}
           </div>
-        </n-space>
-      </n-card>
-    </n-gi>
-  </n-grid>
+        </div>
+        <span class="record-size">{{ statusText(record.status) }}</span>
+        <div class="history-actions">
+          <n-button size="small" tertiary @click="openDetail(record.id)">详情</n-button>
+          <n-button size="small" tertiary type="error" @click="confirmDelete(record.id)">删除</n-button>
+        </div>
+      </div>
+    </div>
+
+    <n-modal v-model:show="detailVisible" preset="card" class="history-detail-modal" title="任务详情">
+      <n-empty v-if="!detail" description="暂无详情" />
+      <n-space v-else vertical size="large">
+        <n-descriptions bordered size="small" :column="2">
+          <n-descriptions-item label="任务 ID">{{ detail.id }}</n-descriptions-item>
+          <n-descriptions-item label="状态">{{ statusText(detail.status) }}</n-descriptions-item>
+          <n-descriptions-item label="文件数">{{ detail.file_count }}</n-descriptions-item>
+          <n-descriptions-item label="耗时">{{ formatElapsed(detail.elapsed_time) }}</n-descriptions-item>
+          <n-descriptions-item label="创建时间">{{ formatDate(detail.timestamp) }}</n-descriptions-item>
+          <n-descriptions-item label="占用">
+            <n-button v-if="recordSize === '-'" size="tiny" text @click="loadRecordSize(detail.id)">计算占用</n-button>
+            <span v-else>{{ recordSize }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="工作目录" :span="2">{{ detail.work_dir }}</n-descriptions-item>
+          <n-descriptions-item v-if="detail.error" label="错误" :span="2">{{ detail.error }}</n-descriptions-item>
+        </n-descriptions>
+
+        <div>
+          <div class="section-label">处理日志</div>
+          <n-log :log="detail.logs.join('\n') || '暂无日志'" language="text" trim class="log-panel" />
+        </div>
+      </n-space>
+    </n-modal>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useDialog, useMessage } from 'naive-ui';
-import type { TagProps } from 'naive-ui';
 
 import { apiGet, apiPost } from '../api/client';
 import type { CacheSize, HistoryDetail, HistoryRecord } from '../types';
+import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
 
 const message = useMessage();
 const dialog = useDialog();
 const records = ref<HistoryRecord[]>([]);
 const detail = ref<HistoryDetail | null>(null);
+const detailVisible = ref(false);
 const cacheSize = ref<CacheSize | null>(null);
 const recordSize = ref('-');
 const loading = ref(false);
 
+const totalSizeText = computed(() => `总占用: ${cacheSize.value?.size_formatted || '计算中...'}`);
+const hasRecords = computed(() => records.value.length > 0);
+
 onMounted(() => {
+  setPageHeader({
+    actions: [
+      { key: 'refresh-history', label: '刷新', icon: '🔄', loading, onClick: loadHistory },
+      {
+        key: 'clear-history',
+        label: '清空历史',
+        icon: '🗑️',
+        type: 'error',
+        variant: 'solid',
+        disabled: computed(() => !hasRecords.value),
+        onClick: confirmClear
+      },
+      { key: 'history-size', kind: 'text', label: totalSizeText }
+    ]
+  });
   void loadHistory();
 });
 
+onBeforeUnmount(() => {
+  resetPageHeader();
+});
+
 async function loadHistory() {
   loading.value = true;
   try {
@@ -107,6 +113,7 @@ async function openDetail(recordId: string) {
   try {
     detail.value = await apiPost<HistoryDetail>('/api/history/detail', { record_id: recordId });
     recordSize.value = '-';
+    detailVisible.value = true;
   } catch (error) {
     message.error(error instanceof Error ? error.message : '加载任务详情失败');
   }
@@ -138,6 +145,7 @@ async function deleteRecord(recordId: string) {
     await apiPost('/api/history/delete', { record_id: recordId });
     if (detail.value?.id === recordId) {
       detail.value = null;
+      detailVisible.value = false;
     }
     message.success('删除成功');
     await loadHistory();
@@ -160,6 +168,7 @@ async function clearHistory() {
   try {
     await apiPost('/api/history/clear');
     detail.value = null;
+    detailVisible.value = false;
     message.success('已清空历史记录');
     await loadHistory();
   } catch (error) {
@@ -167,13 +176,6 @@ async function clearHistory() {
   }
 }
 
-function statusType(status: string): TagProps['type'] {
-  if (status === 'completed') return 'success';
-  if (status === 'failed') return 'error';
-  if (status === 'processing') return 'info';
-  return 'default';
-}
-
 function statusText(status: string): string {
   const map: Record<string, string> = {
     pending: '待处理',
@@ -184,10 +186,6 @@ function statusText(status: string): string {
   return map[status] || status;
 }
 
-function recordSummary(record: HistoryRecord): string {
-  return `${formatDate(record.timestamp)} / ${record.file_count} 个文件 / ${formatElapsed(record.elapsed_time)}`;
-}
-
 function formatDate(value: string): string {
   if (!value) return '-';
   return value.replace('T', ' ').slice(0, 19);
diff --git a/frontend/src/components/ScriptPanel.vue b/frontend/src/components/ScriptPanel.vue
index d9281bb..0f57134 100644
--- a/frontend/src/components/ScriptPanel.vue
+++ b/frontend/src/components/ScriptPanel.vue
@@ -1,46 +1,31 @@
 <template>
-  <div class="script-workspace">
-    <n-card size="small" class="work-card script-editor-pane">
-      <template #header>
-        <div class="script-card-title">
-          <span>脚本编辑</span>
-          <n-tag v-if="isModified" size="small" type="warning">已修改</n-tag>
-          <n-tag v-else size="small" type="success">已保存</n-tag>
+  <div class="script-page-body">
+    <div class="script-editor-container">
+      <div ref="editorHost" class="script-editor" />
+    </div>
+
+    <div class="script-status-bar">
+      <span>{{ cursorText }}</span>
+      <span>{{ editorStatus }}</span>
+      <span>{{ lineCount }} 行</span>
+    </div>
+
+    <div v-if="taskStatus" class="process-section script-process-section">
+      <div class="upload-process-card">
+        <div class="card-header">
+          <div class="card-header-left">
+            <span class="card-title">脚本执行进度</span>
+            <span class="process-status" :class="statusClass">{{ statusText }}</span>
+          </div>
+          <div class="card-header-right">
+            <n-button size="small" tertiary :disabled="!taskId" @click="refreshStatus">刷新</n-button>
+          </div>
+        </div>
+        <div class="card-body">
+          <n-log :log="logText" language="text" trim class="script-log" />
         </div>
-      </template>
-      <template #header-extra>
-        <n-space>
-          <n-button size="small" tertiary :loading="loading" @click="loadScript">重新加载</n-button>
-          <n-button size="small" type="primary" :loading="saving" @click="saveScript">保存</n-button>
-          <n-button size="small" type="warning" :loading="executing" @click="executeScript">执行</n-button>
-        </n-space>
-      </template>
-
-      <div class="script-editor-toolbar">
-        <span class="script-path" :title="scriptPath">{{ scriptPath || 'ReportScript.sql' }}</span>
-        <span class="script-modified">修改时间：{{ modified || '-' }}</span>
       </div>
-
-      <div ref="editorHost" class="monaco-editor-host" />
-
-      <div class="script-status-bar">
-        <span>{{ cursorText }}</span>
-        <span>{{ lineCount }} 行</span>
-        <span>{{ editorStatus }}</span>
-      </div>
-    </n-card>
-
-    <n-card title="执行状态" size="small" class="work-card script-log-pane">
-      <template #header-extra>
-        <n-space>
-          <n-tag v-if="taskStatus" :type="statusType">{{ statusText }}</n-tag>
-          <n-button size="small" tertiary :disabled="!taskId" @click="refreshStatus">刷新</n-button>
-        </n-space>
-      </template>
-
-      <n-empty v-if="!taskStatus" description="脚本尚未执行" />
-      <n-log v-else :log="logText" language="text" trim class="script-log" />
-    </n-card>
+    </div>
   </div>
 </template>
 
@@ -53,6 +38,7 @@ import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 
 import { apiGet, apiPost } from '../api/client';
 import type { ApiMessage, ScriptContent, TaskStatus } from '../types';
+import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
 
 type MonacoGlobal = typeof globalThis & {
   MonacoEnvironment?: {
@@ -81,13 +67,14 @@ const executing = ref(false);
 const taskId = ref('');
 const taskStatus = ref<TaskStatus | null>(null);
 let timer: number | undefined;
+let themeObserver: MutationObserver | undefined;
 let applyingRemoteContent = false;
 
 const logText = computed(() => taskStatus.value?.logs?.join('\n') || '等待执行日志');
-const statusType = computed(() => {
-  if (taskStatus.value?.status === 'completed') return 'success';
-  if (taskStatus.value?.status === 'failed') return 'error';
-  return 'info';
+const statusClass = computed(() => {
+  if (taskStatus.value?.status === 'completed') return 'completed';
+  if (taskStatus.value?.status === 'failed') return 'failed';
+  return 'processing';
 });
 const statusText = computed(() => {
   const status = taskStatus.value?.status;
@@ -102,15 +89,29 @@ const editorStatus = computed(() => {
   if (saving.value) return '保存中';
   return isModified.value ? '未保存' : '就绪';
 });
+const modifiedText = computed(() => (modified.value ? `最后修改: ${modified.value}` : '最后修改: -'));
 
 onMounted(async () => {
+  setPageHeader({
+    subtitle: computed(() => scriptPath.value || 'ReportScript.sql'),
+    actions: [
+      { key: 'script-modified', kind: 'text', label: modifiedText },
+      { key: 'save-script', label: computed(() => (isModified.value ? '保存 *' : '保存')), icon: '💾', type: 'primary', variant: 'solid', loading: saving, onClick: saveScript },
+      { key: 'format-script', label: '格式化', icon: '✨', onClick: formatScript },
+      { key: 'run-script', label: '运行脚本', icon: '▶️', type: 'success', variant: 'solid', loading: executing, onClick: executeScript }
+    ]
+  });
+
   await nextTick();
   createEditor();
+  observeTheme();
   await loadScript();
 });
 
 onBeforeUnmount(() => {
+  resetPageHeader();
   stopPolling();
+  themeObserver?.disconnect();
   for (const disposable of disposables) {
     disposable.dispose();
   }
@@ -123,17 +124,25 @@ function createEditor() {
   editor.value = monaco.editor.create(editorHost.value, {
     value: '-- 正在加载 ReportScript.sql',
     language: 'sql',
-    theme: 'vs',
+    theme: currentEditorTheme(),
     fontSize: 14,
-    fontFamily: "'Cascadia Code', Consolas, 'Courier New', monospace",
+    fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
     lineNumbers: 'on',
     minimap: { enabled: true },
     automaticLayout: true,
     scrollBeyondLastLine: false,
-    roundedSelection: false,
+    roundedSelection: true,
     renderLineHighlight: 'all',
     tabSize: 4,
-    wordWrap: 'off'
+    insertSpaces: true,
+    wordWrap: 'on',
+    folding: true,
+    showFoldingControls: 'always',
+    bracketPairColorization: { enabled: true },
+    guides: {
+      bracketPairs: true,
+      indentation: true
+    }
   });
 
   disposables.push(
@@ -193,6 +202,17 @@ async function saveScript() {
   }
 }
 
+async function formatScript() {
+  const action = editor.value?.getAction('editor.action.formatDocument');
+  if (!action) {
+    message.warning('当前编辑器没有可用的格式化动作');
+    return;
+  }
+
+  await action.run();
+  message.success('格式化完成');
+}
+
 async function executeScript() {
   executing.value = true;
   try {
@@ -238,6 +258,17 @@ function updateCursor() {
   cursorText.value = position ? `行 ${position.lineNumber}，列 ${position.column}` : '行 1，列 1';
 }
 
+function observeTheme() {
+  themeObserver = new MutationObserver(() => {
+    monaco.editor.setTheme(currentEditorTheme());
+  });
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+}
+
+function currentEditorTheme() {
+  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'vs-dark' : 'vs';
+}
+
 function startPolling() {
   stopPolling();
   void refreshStatus();
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index fa6e559..0e9c6f3 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="settings-workspace">
+    <input ref="configInput" class="hidden-input" type="file" accept=".json" @change="uploadConfigFile" />
+
     <div class="settings-column">
       <n-card title="数据库配置" size="small" class="work-card">
         <template #header-extra>
-          <n-space>
-            <n-button size="small" tertiary :loading="loading" @click="loadConfig">刷新</n-button>
-            <n-button size="small" tertiary :loading="testingDb" @click="testDatabase">测试连接</n-button>
-          </n-space>
+          <span class="muted-line">更新时间：{{ configUpdate || '-' }}</span>
         </template>
 
         <n-form label-placement="top">
@@ -37,15 +36,19 @@
               </n-form-item>
             </n-gi>
           </n-grid>
-          <div class="card-actions">
-            <span class="muted-line">更新时间：{{ configUpdate || '-' }}</span>
-            <n-button type="primary" :loading="savingMysql" @click="saveMysql">保存配置</n-button>
-          </div>
         </n-form>
+
+        <template #footer>
+          <n-space justify="end">
+            <n-button type="primary" :loading="savingMysql" @click="saveMysql">保存配置</n-button>
+            <n-button :loading="testingDb" @click="testDatabase">测试连接</n-button>
+          </n-space>
+        </template>
       </n-card>
 
       <n-card title="Sheet 过滤规则" size="small" class="work-card">
         <n-space vertical>
+          <p class="form-hint">匹配这些关键词的 Sheet 将被跳过处理</p>
           <div class="filter-tags">
             <n-tag
               v-for="(filter, index) in sheetFilters"
@@ -65,14 +68,16 @@
             />
             <n-button @click="addSheetFilter">添加</n-button>
           </n-input-group>
-          <div class="card-actions">
-            <span class="muted-line">匹配这些关键词的 Sheet 会跳过处理</span>
-            <n-button type="primary" :loading="savingSheetFilter" @click="saveSheetFilter">保存规则</n-button>
-          </div>
         </n-space>
+
+        <template #footer>
+          <n-space justify="end">
+            <n-button type="primary" :loading="savingSheetFilter" @click="saveSheetFilter">保存规则</n-button>
+          </n-space>
+        </template>
       </n-card>
 
-      <n-card title="登录密码" size="small" class="work-card">
+      <n-card title="修改登录密码" size="small" class="work-card">
         <n-form label-placement="top">
           <n-form-item label="当前密码">
             <n-input v-model:value="passwordForm.current_password" type="password" show-password-on="click" />
@@ -80,61 +85,39 @@
           <n-form-item label="新密码">
             <n-input v-model:value="passwordForm.new_password" type="password" show-password-on="click" />
           </n-form-item>
-          <n-form-item label="确认密码">
+          <n-form-item label="确认新密码">
             <n-input v-model:value="passwordForm.confirm_password" type="password" show-password-on="click" />
           </n-form-item>
-          <div class="card-actions">
-            <span />
-            <n-button type="primary" :loading="changingPassword" @click="changePassword">修改密码</n-button>
-          </div>
         </n-form>
-      </n-card>
 
-      <n-card title="配置文件与服务" size="small" class="work-card">
-        <n-space vertical>
-          <n-space>
-            <n-button @click="downloadConfig">下载配置</n-button>
-            <n-button @click="configInput?.click()">上传配置</n-button>
-            <input ref="configInput" class="hidden-input" type="file" accept=".json" @change="uploadConfigFile" />
+        <template #footer>
+          <n-space justify="end">
+            <n-button type="primary" :loading="changingPassword" @click="changePassword">修改密码</n-button>
           </n-space>
-
-          <n-descriptions v-if="serviceStatus" bordered size="small" :column="2">
-            <n-descriptions-item label="状态">{{ serviceStatus.status }}</n-descriptions-item>
-            <n-descriptions-item label="版本">{{ serviceStatus.version }}</n-descriptions-item>
-            <n-descriptions-item label="系统">{{ serviceStatus.platform }}</n-descriptions-item>
-            <n-descriptions-item label="进程">{{ serviceStatus.pid }}</n-descriptions-item>
-          </n-descriptions>
-
-          <div class="card-actions">
-            <n-button size="small" tertiary @click="loadServiceStatus">刷新状态</n-button>
-            <n-button type="warning" tertiary @click="confirmRestart">重启服务</n-button>
-          </div>
-        </n-space>
+        </template>
       </n-card>
+
     </div>
 
     <n-card size="small" class="work-card field-mapping-card">
       <template #header>
-        <div class="field-card-title">
-          <span>字段提取配置</span>
-          <n-tag size="small" round>{{ extractFields.length }} 个字段</n-tag>
+        <div class="field-card-header">
+          <div class="field-card-title-row">
+            <div class="field-card-title">
+              <span>字段映射配置</span>
+              <n-tag size="small" round>{{ extractFields.length }} 个字段</n-tag>
+            </div>
+            <n-input
+              v-model:value="fieldSearch"
+              size="small"
+              clearable
+              class="field-search"
+              placeholder="搜索字段..."
+            />
+          </div>
+          <p class="form-hint">定义 Excel 列名到数据库字段的映射规则，提取来源匹配任意一个即可</p>
         </div>
       </template>
-      <template #header-extra>
-        <n-space align="center">
-          <n-input
-            v-model:value="fieldSearch"
-            size="small"
-            clearable
-            class="field-search"
-            placeholder="搜索字段或提取来源"
-          />
-          <n-button size="small" @click="addFieldMapping">添加字段</n-button>
-          <n-button size="small" type="primary" :loading="savingExtractFields" @click="saveExtractFields">
-            保存映射
-          </n-button>
-        </n-space>
-      </template>
 
       <n-scrollbar class="field-mapping-scroll">
         <n-empty v-if="visibleFieldMappings.length === 0" description="没有匹配的字段配置" />
@@ -189,16 +172,26 @@
           </div>
         </div>
       </n-scrollbar>
+
+      <template #footer>
+        <n-space justify="end">
+          <n-button @click="addFieldMapping">添加字段</n-button>
+          <n-button type="primary" :loading="savingExtractFields" @click="saveExtractFields">
+            保存映射
+          </n-button>
+        </n-space>
+      </template>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
-import { useDialog, useMessage, type SelectOption } from 'naive-ui';
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { useMessage, type SelectOption } from 'naive-ui';
 
 import { apiGet, apiPost, downloadGet, upload } from '../api/client';
-import type { ApiMessage, AppConfig, ServiceStatus } from '../types';
+import type { ApiMessage, AppConfig } from '../types';
+import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
 
 interface ExtractFieldConfig {
   Field: string;
@@ -208,7 +201,6 @@ interface ExtractFieldConfig {
 }
 
 const message = useMessage();
-const dialog = useDialog();
 const configInput = ref<HTMLInputElement | null>(null);
 const configUpdate = ref('');
 const loading = ref(false);
@@ -217,7 +209,6 @@ const savingMysql = ref(false);
 const savingSheetFilter = ref(false);
 const savingExtractFields = ref(false);
 const changingPassword = ref(false);
-const serviceStatus = ref<ServiceStatus | null>(null);
 const sheetFilters = ref<string[]>([]);
 const newSheetFilter = ref('');
 const extractFields = ref<ExtractFieldConfig[]>([]);
@@ -258,8 +249,17 @@ const visibleFieldMappings = computed(() => {
 });
 
 onMounted(() => {
+  setPageHeader({
+    actions: [
+      { key: 'download-config', label: '下载配置', icon: '📥', onClick: downloadConfig },
+      { key: 'upload-config', label: '上传配置', icon: '📤', onClick: () => configInput.value?.click() }
+    ]
+  });
   void loadConfig();
-  void loadServiceStatus();
+});
+
+onBeforeUnmount(() => {
+  resetPageHeader();
 });
 
 async function loadConfig() {
@@ -454,33 +454,6 @@ async function uploadConfigFile(event: Event) {
   }
 }
 
-async function loadServiceStatus() {
-  try {
-    serviceStatus.value = await apiGet<ServiceStatus>('/api/service/status');
-  } catch (error) {
-    message.error(error instanceof Error ? error.message : '读取运行状态失败');
-  }
-}
-
-function confirmRestart() {
-  dialog.warning({
-    title: '重启服务',
-    content: '确认重启后端服务？',
-    positiveText: '重启',
-    negativeText: '取消',
-    onPositiveClick: restartService
-  });
-}
-
-async function restartService() {
-  try {
-    const result = await apiPost<ApiMessage>('/api/service/restart');
-    message.success(result.message || '服务正在重启');
-  } catch (error) {
-    message.error(error instanceof Error ? error.message : '重启服务失败');
-  }
-}
-
 function normalizeExtractFields(fields: Array<Record<string, unknown>>): ExtractFieldConfig[] {
   return fields.map(field => {
     const extract = Array.isArray(field.Extract) ? uniqueStrings(field.Extract) : [];
diff --git a/frontend/src/composables/pageHeader.ts b/frontend/src/composables/pageHeader.ts
new file mode 100644
index 0000000..accb110
--- /dev/null
+++ b/frontend/src/composables/pageHeader.ts
@@ -0,0 +1,41 @@
+import { shallowReactive, unref, type Ref } from 'vue';
+
+type HeaderValue<T> = T | Ref<T> | (() => T);
+
+export interface PageHeaderAction {
+  key: string;
+  label: HeaderValue<string>;
+  icon?: HeaderValue<string>;
+  title?: HeaderValue<string>;
+  kind?: 'button' | 'text';
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+  variant?: 'solid' | 'outline' | 'text';
+  loading?: HeaderValue<boolean>;
+  disabled?: HeaderValue<boolean>;
+  onClick?: () => void | Promise<void>;
+}
+
+export const pageHeader = shallowReactive<{
+  subtitle: HeaderValue<string> | '';
+  actions: PageHeaderAction[];
+}>({
+  subtitle: '',
+  actions: []
+});
+
+export function setPageHeader(config: { subtitle?: HeaderValue<string>; actions?: PageHeaderAction[] }) {
+  pageHeader.subtitle = config.subtitle || '';
+  pageHeader.actions = config.actions || [];
+}
+
+export function resetPageHeader() {
+  pageHeader.subtitle = '';
+  pageHeader.actions = [];
+}
+
+export function resolveHeaderValue<T>(value: HeaderValue<T> | undefined, fallback: T): T {
+  if (typeof value === 'function') {
+    return (value as () => T)();
+  }
+  return value === undefined ? fallback : unref(value);
+}
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 879590c..8115da8 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -9,7 +9,7 @@ const ScriptPanel = () => import('./components/ScriptPanel.vue');
 
 export const routes: RouteRecordRaw[] = [
   { path: '/', redirect: { name: 'workflow' } },
-  { path: '/upload', name: 'workflow', component: FileWorkflow, meta: { title: '数据上传' } },
+  { path: '/upload', name: 'workflow', component: FileWorkflow, meta: { title: '数据上传与处理' } },
   { path: '/history', name: 'history', component: HistoryPanel, meta: { title: '处理历史' } },
   { path: '/database', name: 'database', component: DatabasePanel, meta: { title: '数据管理' } },
   { path: '/script', name: 'script', component: ScriptPanel, meta: { title: '脚本编辑' } },
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5432f65..b97391d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,3 +1,69 @@
+/* ==================== TDesign style variables from the legacy UI ==================== */
+:root {
+  --td-brand-color: #0052d9;
+  --td-brand-color-hover: #0034b5;
+  --td-brand-color-active: #002a9c;
+  --td-brand-color-light: #ecf2fe;
+  --td-brand-color-focus: rgba(0, 82, 217, 0.2);
+  --td-success-color: #00a870;
+  --td-success-color-light: #e8f8f2;
+  --td-warning-color: #ed7b2f;
+  --td-warning-color-light: #fef3e6;
+  --td-error-color: #e34d59;
+  --td-error-color-light: #fdecee;
+  --td-text-color-primary: rgba(0, 0, 0, 0.9);
+  --td-text-color-secondary: rgba(0, 0, 0, 0.6);
+  --td-text-color-placeholder: rgba(0, 0, 0, 0.4);
+  --td-text-color-disabled: rgba(0, 0, 0, 0.26);
+  --td-text-color-anti: #ffffff;
+  --td-bg-color-page: #f3f3f3;
+  --td-bg-color-container: #ffffff;
+  --td-bg-color-container-hover: #f3f3f3;
+  --td-bg-color-container-active: #e7e7e7;
+  --td-bg-color-secondarycontainer: #f3f3f3;
+  --td-bg-color-component: #f3f3f3;
+  --td-bg-color-component-hover: #e7e7e7;
+  --td-bg-color-component-disabled: #eeeeee;
+  --td-border-color: #dcdcdc;
+  --td-border-color-light: #e7e7e7;
+  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
+  --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
+  --td-radius-small: 3px;
+  --td-radius-default: 6px;
+  --td-radius-large: 12px;
+  --td-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  --td-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --td-transition: 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+}
+
+[data-theme="dark"] {
+  --td-brand-color: #4787f0;
+  --td-brand-color-hover: #618dff;
+  --td-brand-color-active: #366ef4;
+  --td-brand-color-light: #1b2f51;
+  --td-brand-color-focus: rgba(71, 135, 240, 0.35);
+  --td-success-color-light: #0d3926;
+  --td-warning-color-light: #4f2a1d;
+  --td-error-color-light: #4b191d;
+  --td-text-color-primary: rgba(255, 255, 255, 0.9);
+  --td-text-color-secondary: rgba(255, 255, 255, 0.55);
+  --td-text-color-placeholder: rgba(255, 255, 255, 0.35);
+  --td-text-color-disabled: rgba(255, 255, 255, 0.22);
+  --td-bg-color-page: #181818;
+  --td-bg-color-container: #242424;
+  --td-bg-color-container-hover: #383838;
+  --td-bg-color-container-active: #4c4c4c;
+  --td-bg-color-secondarycontainer: #2c2c2c;
+  --td-bg-color-component: #383838;
+  --td-bg-color-component-hover: #4c4c4c;
+  --td-bg-color-component-disabled: #383838;
+  --td-border-color: #5e5e5e;
+  --td-border-color-light: #4c4c4c;
+  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.15), 0 4px 5px rgba(0, 0, 0, 0.22), 0 2px 4px -1px rgba(0, 0, 0, 0.32);
+  --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.15), 0 8px 10px 1px rgba(0, 0, 0, 0.18), 0 5px 5px -3px rgba(0, 0, 0, 0.28);
+}
+
+/* ==================== Base ==================== */
 * {
   box-sizing: border-box;
 }
@@ -6,30 +72,79 @@ html,
 body,
 #app {
   width: 100%;
-  min-width: 0;
   height: 100%;
+  min-width: 0;
   margin: 0;
 }
 
 body {
-  color: #1f2933;
-  background: #eef1f4;
-  font-family:
-    Inter,
-    "Segoe UI",
-    "Microsoft YaHei",
-    Arial,
-    sans-serif;
+  overflow: hidden;
+  color: var(--td-text-color-primary);
+  background: var(--td-bg-color-page);
+  font-family: var(--td-font-family);
+  font-size: 14px;
+  line-height: 22px;
+  transition: background-color var(--td-transition), color var(--td-transition);
 }
 
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--td-border-color);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--td-text-color-placeholder);
+}
+
+.hidden-input {
+  display: none;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.muted-line,
+.page-subtitle {
+  overflow: hidden;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.section-label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-weight: 600;
+}
+
+/* ==================== App shell ==================== */
 .app-layout {
-  min-height: 100vh;
-  background: #eef1f4;
+  height: 100vh;
+  background: var(--td-bg-color-page);
 }
 
 .app-sider {
-  background: #ffffff;
-  border-right: 1px solid #d9dee7;
+  background: var(--td-bg-color-container);
+  border-right: 1px solid var(--td-border-color-light);
+  transition: background-color var(--td-transition), border-color var(--td-transition);
 }
 
 .app-sider .n-layout-sider-scroll-container {
@@ -42,107 +157,228 @@ body {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  gap: 10px;
+  gap: 12px;
   height: 64px;
-  padding: 0 18px;
-  border-bottom: 1px solid #e4e8ef;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--td-border-color-light);
+}
+
+.n-layout-sider--collapsed .brand {
+  justify-content: center;
+  padding: 0 16px;
 }
 
 .brand-mark {
-  display: grid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 0 0 auto;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
-  background: #1f5ea8;
-  border-radius: 6px;
-}
-
-.brand-mark.large {
-  width: 44px;
-  height: 44px;
-  font-size: 15px;
+  width: 32px;
+  height: 32px;
+  color: #ffffff;
+  font-size: 18px;
+  background: linear-gradient(135deg, var(--td-brand-color), #618dff);
+  border-radius: var(--td-radius-default);
 }
 
 .brand-text {
   overflow: hidden;
-  font-weight: 700;
+  color: var(--td-text-color-primary);
+  font-size: 16px;
+  font-weight: 600;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.n-layout-sider--collapsed .brand-text {
+  display: none;
+}
+
 .app-menu {
   flex: 1;
   padding: 12px 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.app-menu .n-menu-item-content {
+  height: 40px;
+  margin-bottom: 2px;
+  padding: 0 16px !important;
+  color: var(--td-text-color-secondary);
+  border-radius: var(--td-radius-default);
+  transition: all var(--td-transition);
+}
+
+.app-menu .n-menu-item-content:hover {
+  color: var(--td-text-color-primary);
+  background: var(--td-bg-color-container-hover);
+}
+
+.app-menu .n-menu-item-content--selected {
+  color: var(--td-brand-color);
+  font-weight: 500;
+  background: var(--td-brand-color-light);
 }
 
 .sider-footer {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  gap: 3px;
-  padding: 12px 18px;
-  color: #7b8492;
-  font-size: 12px;
-  border-top: 1px solid #e4e8ef;
-}
-
-.topbar {
-  display: flex;
+  gap: 4px;
   align-items: center;
-  justify-content: space-between;
-  height: 64px;
-  padding: 0 20px;
-  background: #fff;
-}
-
-.topbar-title {
-  min-width: 0;
-}
-
-.page-title {
-  overflow: hidden;
-  max-width: 52vw;
-  font-size: 18px;
-  font-weight: 700;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.page-subtitle,
-.muted-line {
-  color: #6f7885;
+  padding: 12px 16px;
+  color: var(--td-text-color-secondary);
+  font-family: var(--td-font-family-mono);
   font-size: 12px;
+  text-align: center;
+  border-top: 1px solid var(--td-border-color-light);
+}
+
+.n-layout-sider--collapsed .sider-footer span:last-child {
+  display: none;
+}
+
+.topbar,
+.page-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 16px;
+  height: 64px;
+  padding: 0 32px;
+  background: var(--td-bg-color-container);
+  border-bottom: 1px solid var(--td-border-color-light);
+}
+
+.sidebar-toggle {
+  flex-shrink: 0;
+  margin-top: 2px;
+  padding: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 18px;
+  line-height: 1;
+  background: none;
+  border: none;
+  border-radius: var(--td-radius-default);
+  cursor: pointer;
+  transition: all var(--td-transition);
+}
+
+.sidebar-toggle:hover {
+  color: var(--td-text-color-primary);
+  background: var(--td-bg-color-container-hover);
+}
+
+.page-header-content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+  gap: 16px;
+}
+
+.page-header h1 {
+  margin: 0;
+  color: var(--td-text-color-primary);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.page-header-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-info-text {
+  color: var(--td-text-color-secondary);
+  font-family: var(--td-font-family-mono);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.button-emoji {
+  display: inline-block;
+  line-height: 1;
+}
+
+.theme-toggle,
+.restart-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 32px;
+  padding: 0 12px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  white-space: nowrap;
+  background: transparent;
+  border: 1px solid var(--td-border-color);
+  border-radius: var(--td-radius-default);
+  cursor: pointer;
+  transition: all var(--td-transition);
+}
+
+.theme-toggle:hover {
+  background: var(--td-bg-color-container-hover);
+  border-color: var(--td-text-color-secondary);
+}
+
+.restart-btn {
+  color: var(--td-error-color);
+  border-color: var(--td-error-color);
+}
+
+.restart-btn:hover {
+  color: var(--td-error-color);
+  background: var(--td-error-color-light);
+}
+
+.restart-btn svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.logout-button {
+  flex-shrink: 0;
 }
 
 .content {
-  min-width: 0;
   height: calc(100vh - 64px);
-  padding: 14px;
+  min-width: 0;
   overflow: auto;
-  background: #eef1f4;
-}
-
-.work-card,
-.n-card {
-  border-radius: 6px;
+  background: var(--td-bg-color-page);
 }
 
+/* ==================== Naive UI surface normalization ==================== */
+.n-card.work-card,
 .work-card {
-  border-color: #dfe4ec;
-  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
+  background: var(--td-bg-color-container);
+  border-color: var(--td-border-color-light);
+  border-radius: var(--td-radius-large);
+  transition: all var(--td-transition);
 }
 
-.work-card .n-card-header {
-  min-height: 46px;
-  padding: 10px 14px;
+.work-card > .n-card-header {
+  min-height: 54px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--td-border-color-light);
 }
 
-.work-card .n-card__content {
-  padding: 14px;
+.work-card > .n-card__content {
+  padding: 16px 20px;
+}
+
+.work-card > .n-card__footer {
+  padding: 12px 20px;
+  background: var(--td-bg-color-container);
+  border-top: 1px solid var(--td-border-color-light);
 }
 
 .login-page {
@@ -150,13 +386,13 @@ body {
   min-height: 100vh;
   place-items: center;
   padding: 24px;
-  background: #eef1f4;
+  background: var(--td-bg-color-page);
 }
 
 .login-card {
   width: min(420px, 100%);
-  border-radius: 8px;
-  box-shadow: 0 18px 48px rgba(21, 38, 62, 0.14);
+  border-radius: var(--td-radius-large);
+  box-shadow: var(--td-shadow-2);
 }
 
 .login-brand {
@@ -173,46 +409,22 @@ body {
 
 .login-brand p {
   margin: 3px 0 0;
-  color: #687282;
+  color: var(--td-text-color-secondary);
 }
 
-.hidden-input {
-  display: none;
+.brand-mark.large {
+  width: 44px;
+  height: 44px;
 }
 
-.full-width {
-  width: 100%;
+/* ==================== Upload ==================== */
+.upload-page-body,
+.history-page-body {
+  min-height: 100%;
+  padding: 24px 32px;
 }
 
-.file-list,
-.history-list,
-.table-list {
-  max-height: 360px;
-}
-
-.upload-page-body {
-  --upload-brand-color: #0052d9;
-  --upload-brand-color-hover: #0034b5;
-  --upload-brand-color-light: #ecf2fe;
-  --upload-success-color: #00a870;
-  --upload-success-color-light: #e8f8f2;
-  --upload-error-color: #e34d59;
-  --upload-error-color-light: #fdecee;
-  --upload-text-primary: rgba(0, 0, 0, 0.9);
-  --upload-text-secondary: rgba(0, 0, 0, 0.6);
-  --upload-text-placeholder: rgba(0, 0, 0, 0.4);
-  --upload-bg-container: #ffffff;
-  --upload-bg-container-hover: #f3f3f3;
-  --upload-bg-secondary: #f3f3f3;
-  --upload-border-color: #dcdcdc;
-  --upload-border-color-light: #e7e7e7;
-  --upload-radius: 6px;
-  --upload-radius-large: 12px;
-  --upload-transition: 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  padding: 10px 18px 24px;
-}
-
-.upload-page-body .upload-zone {
+.upload-zone {
   display: flex;
   position: relative;
   align-items: center;
@@ -221,369 +433,357 @@ body {
   padding: 32px 24px;
   flex-direction: column;
   text-align: center;
-  background: var(--upload-bg-container);
-  border: 1px dashed var(--upload-border-color);
-  border-radius: var(--upload-radius-large);
+  background: var(--td-bg-color-container);
+  border: 1px dashed var(--td-border-color);
+  border-radius: var(--td-radius-large);
   cursor: pointer;
-  transition: all var(--upload-transition);
+  transition: all var(--td-transition);
 }
 
-.upload-page-body .upload-zone:hover,
-.upload-page-body .upload-zone.dragover {
-  background: var(--upload-brand-color-light);
-  border-color: var(--upload-brand-color);
+.upload-zone:hover,
+.upload-zone.dragover {
+  background: var(--td-brand-color-light);
+  border-color: var(--td-brand-color);
 }
 
-.upload-page-body .upload-zone.dragover {
+.upload-zone.dragover {
   border-style: solid;
 }
 
-.upload-page-body .upload-zone.disabled {
+.upload-zone.disabled {
   cursor: not-allowed;
   opacity: 0.72;
 }
 
-.upload-page-body .upload-icon {
+.upload-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   margin: 0 auto 12px;
-  color: var(--upload-brand-color);
-  background: var(--upload-brand-color-light);
+  color: var(--td-brand-color);
+  font-size: 24px;
+  background: var(--td-brand-color-light);
   border-radius: 50%;
 }
 
-.upload-page-body .upload-zone h3 {
+.upload-zone h3 {
   margin: 0 0 8px;
-  color: var(--upload-text-primary);
+  color: var(--td-text-color-primary);
   font-size: 16px;
   font-weight: 500;
 }
 
-.upload-page-body .upload-zone p {
+.upload-zone p {
   margin: 0 0 4px;
-  color: var(--upload-text-secondary);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
 }
 
-.upload-page-body .upload-hint {
+.upload-hint {
   margin-top: 12px !important;
-  color: var(--upload-brand-color) !important;
+  color: var(--td-brand-color) !important;
   font-size: 13px !important;
 }
 
-.upload-page-body .file-list {
-  max-height: none;
+.file-list {
   margin-top: 20px;
 }
 
-.upload-page-body .file-list-header,
-.upload-page-body .file-list-footer,
-.upload-page-body .card-header,
-.upload-page-body .card-header-left,
-.upload-page-body .card-header-right,
-.upload-page-body .total-progress-header,
-.upload-page-body .upload-stats,
-.upload-page-body .upload-stats-item,
-.upload-page-body .file-item,
-.upload-page-body .file-item-status {
+.file-list-header,
+.file-list-footer,
+.upload-stats,
+.upload-stats-item,
+.file-item,
+.file-item-status,
+.card-header,
+.card-header-left,
+.card-header-right,
+.total-progress-header {
   display: flex;
   align-items: center;
 }
 
-.upload-page-body .file-list-header,
-.upload-page-body .file-list-footer,
-.upload-page-body .card-header,
-.upload-page-body .total-progress-header {
+.file-list-header,
+.file-list-footer,
+.card-header,
+.total-progress-header {
   justify-content: space-between;
 }
 
-.upload-page-body .file-list-header {
+.file-list-header {
   margin-bottom: 12px;
 }
 
-.upload-page-body .file-list-header h4 {
+.file-list-header h4 {
   margin: 0;
-  color: var(--upload-text-primary);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 500;
 }
 
-.upload-page-body .file-list-footer {
+.file-list-footer {
   margin-top: 16px;
 }
 
-.upload-page-body #fileCount {
-  color: var(--upload-text-secondary);
+#fileCount {
+  color: var(--td-text-color-secondary);
   font-size: 13px;
 }
 
-.upload-page-body .total-progress {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  padding: 16px;
-}
-
-.upload-page-body .total-progress-header {
-  margin-bottom: 8px;
-  font-size: 13px;
-}
-
-.upload-page-body .total-progress-header .label {
-  color: var(--upload-text-secondary);
-}
-
-.upload-page-body .total-progress-header .percent {
-  color: var(--upload-brand-color);
-  font-weight: 600;
-}
-
-.upload-page-body .total-progress-bar {
-  height: 6px;
-  overflow: hidden;
-  background: var(--upload-bg-secondary);
-  border-radius: 3px;
-}
-
-.upload-page-body .total-progress-bar-inner {
-  height: 100%;
-  background: linear-gradient(90deg, var(--upload-brand-color), #618dff);
-  border-radius: 3px;
-  transition: width 0.3s ease;
-}
-
-.upload-page-body .upload-stats {
-  gap: 16px;
-  margin: 0 16px 12px;
-  padding: 12px 16px;
-  font-size: 13px;
-  background: var(--upload-bg-secondary);
-  border-radius: var(--upload-radius);
-}
-
-.upload-page-body .upload-stats-item {
-  gap: 6px;
-}
-
-.upload-page-body .upload-stats-item .count {
-  color: var(--upload-text-primary);
-  font-weight: 600;
-}
-
-.upload-page-body .upload-stats-item.success .count {
-  color: var(--upload-success-color);
-}
-
-.upload-page-body .upload-stats-item.error .count {
-  color: var(--upload-error-color);
-}
-
-.upload-page-body .file-items {
+.file-items {
   max-height: 240px;
   margin-top: 20px;
   overflow-y: auto;
-  background: var(--upload-bg-container);
-  border: 1px solid var(--upload-border-color-light);
-  border-radius: var(--upload-radius);
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-border-color-light);
+  border-radius: var(--td-radius-default);
 }
 
-.upload-page-body .file-item {
+.file-item {
   position: relative;
+  min-height: 44px;
   padding: 10px 16px;
   flex-wrap: wrap;
-  color: var(--upload-text-primary);
+  color: var(--td-text-color-primary);
   font-size: 13px;
-  border-bottom: 1px solid var(--upload-border-color-light);
-  transition: background var(--upload-transition);
+  border-bottom: 1px solid var(--td-border-color-light);
+  transition: background var(--td-transition);
 }
 
-.upload-page-body .file-item:last-child {
-  border-bottom: 0;
+.file-item:last-child {
+  border-bottom: none;
 }
 
-.upload-page-body .file-item:hover {
-  background: var(--upload-bg-container-hover);
+.file-item:hover {
+  background: var(--td-bg-color-container-hover);
 }
 
-.upload-page-body .file-item.uploading {
-  background: var(--upload-brand-color-light);
+.file-item.uploading {
+  background: var(--td-brand-color-light);
 }
 
-.upload-page-body .file-item.uploaded {
-  background: var(--upload-success-color-light);
+.file-item.uploaded {
+  background: var(--td-success-color-light);
 }
 
-.upload-page-body .file-item.error {
-  background: var(--upload-error-color-light);
+.file-item.error {
+  background: var(--td-error-color-light);
 }
 
-.upload-page-body .file-item-icon {
+.file-item-icon {
   flex: 0 0 auto;
   margin-right: 10px;
-  color: var(--upload-brand-color);
+  color: var(--td-brand-color);
   font-size: 16px;
 }
 
-.upload-page-body .file-item-name {
+.file-item-name {
   min-width: 0;
   flex: 1;
   overflow: hidden;
-  font-family:
-    "Cascadia Code",
-    Consolas,
-    "Courier New",
-    monospace;
+  font-family: var(--td-font-family-mono);
   font-size: 12px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.upload-page-body .file-item-size {
+.file-item-size {
   flex: 0 0 auto;
   margin-left: 8px;
-  color: var(--upload-text-placeholder);
-  font-family:
-    "Cascadia Code",
-    Consolas,
-    "Courier New",
-    monospace;
+  color: var(--td-text-color-placeholder);
+  font-family: var(--td-font-family-mono);
   font-size: 12px;
 }
 
-.upload-page-body .file-item-status {
+.file-item-status {
   flex: 0 0 auto;
   gap: 6px;
   margin-left: 12px;
   font-size: 12px;
 }
 
-.upload-page-body .file-item-status.pending {
-  color: var(--upload-text-placeholder);
+.file-item-status.pending {
+  color: var(--td-text-color-placeholder);
 }
 
-.upload-page-body .file-item-status.uploading {
-  color: var(--upload-brand-color);
+.file-item-status.uploading {
+  color: var(--td-brand-color);
   font-weight: 500;
 }
 
-.upload-page-body .file-item-status.uploaded {
-  color: var(--upload-success-color);
+.file-item-status.uploaded {
+  color: var(--td-success-color);
 }
 
-.upload-page-body .file-item-status.error {
-  color: var(--upload-error-color);
+.file-item-status.error {
+  color: var(--td-error-color);
 }
 
-.upload-page-body .file-progress {
+.file-progress {
   width: 100%;
   height: 3px;
   margin-top: 8px;
   overflow: hidden;
-  background: var(--upload-bg-secondary);
+  background: var(--td-bg-color-component);
   border-radius: 2px;
 }
 
-.upload-page-body .file-progress-bar {
+.file-progress-bar {
   height: 100%;
-  background: var(--upload-brand-color);
+  background: var(--td-brand-color);
   border-radius: 2px;
   transition: width 0.2s ease;
 }
 
-.upload-page-body .file-item.uploaded .file-progress-bar {
-  background: var(--upload-success-color);
+.file-item.uploaded .file-progress-bar {
+  background: var(--td-success-color);
 }
 
-.upload-page-body .file-item.error .file-progress-bar {
-  background: var(--upload-error-color);
+.file-item.error .file-progress-bar {
+  background: var(--td-error-color);
 }
 
-.upload-page-body .process-section {
+.total-progress {
+  margin: 0 0 16px;
+}
+
+.total-progress-header {
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.total-progress-header .label {
+  color: var(--td-text-color-secondary);
+}
+
+.total-progress-header .percent {
+  color: var(--td-brand-color);
+  font-weight: 600;
+}
+
+.total-progress-bar {
+  height: 6px;
+  overflow: hidden;
+  background: var(--td-bg-color-component);
+  border-radius: 3px;
+}
+
+.total-progress-bar-inner {
+  height: 100%;
+  background: linear-gradient(90deg, var(--td-brand-color), #618dff);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.upload-stats {
+  gap: 16px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  font-size: 13px;
+  background: var(--td-bg-color-secondarycontainer);
+  border-radius: var(--td-radius-default);
+}
+
+.upload-stats-item {
+  gap: 6px;
+}
+
+.upload-stats-item .count {
+  color: var(--td-text-color-primary);
+  font-weight: 600;
+}
+
+.upload-stats-item.success .count {
+  color: var(--td-success-color);
+}
+
+.upload-stats-item.error .count {
+  color: var(--td-error-color);
+}
+
+.process-section {
   margin-top: 12px;
 }
 
-.upload-page-body .upload-process-card {
-  background: var(--upload-bg-container);
-  border: 1px solid var(--upload-border-color-light);
-  border-radius: var(--upload-radius-large);
-  transition: all var(--upload-transition);
+.upload-process-card {
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-border-color-light);
+  border-radius: var(--td-radius-large);
+  transition: all var(--td-transition);
 }
 
-.upload-page-body .card-header {
+.card-header {
   min-height: 58px;
   padding: 16px 20px;
-  color: var(--upload-text-primary);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 600;
-  border-bottom: 1px solid var(--upload-border-color-light);
+  border-bottom: 1px solid var(--td-border-color-light);
 }
 
-.upload-page-body .card-header-left,
-.upload-page-body .card-header-right {
+.card-header-left,
+.card-header-right {
   gap: 12px;
 }
 
-.upload-page-body .card-title {
-  color: var(--upload-text-primary);
+.card-title {
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 600;
 }
 
-.upload-page-body .card-body {
+.card-body {
   padding: 20px;
 }
 
-.upload-page-body .process-status {
+.process-status {
   padding: 4px 12px;
-  color: #fff;
+  color: #ffffff;
   font-size: 12px;
   font-weight: 500;
-  background: var(--upload-brand-color);
+  background: var(--td-brand-color);
   border-radius: 10px;
 }
 
-.upload-page-body .process-status.processing {
-  animation: upload-status-pulse 1.5s infinite;
+.process-status.processing {
+  animation: status-pulse 1.5s infinite;
 }
 
-.upload-page-body .process-status.completed {
-  background: var(--upload-success-color);
+.process-status.completed {
+  background: var(--td-success-color);
 }
 
-.upload-page-body .process-status.failed {
-  background: var(--upload-error-color);
+.process-status.failed {
+  background: var(--td-error-color);
 }
 
-.upload-page-body .task-alert {
+.task-alert {
   margin-bottom: 12px;
 }
 
-.upload-page-body .log-container {
+.log-container {
+  height: calc(100vh - 280px);
   min-height: 300px;
-  height: calc(100vh - 360px);
+  margin-top: 16px;
   padding: 16px;
   overflow-y: auto;
-  background: #eef1f4;
-  border: 1px solid var(--upload-border-color-light);
-  border-radius: var(--upload-radius);
+  background: var(--td-bg-color-page);
+  border: 1px solid var(--td-border-color-light);
+  border-radius: var(--td-radius-default);
 }
 
-.upload-page-body .log-content {
+.log-content {
   margin: 0;
-  color: var(--upload-text-secondary);
-  font-family:
-    "Cascadia Code",
-    Consolas,
-    "Courier New",
-    monospace;
+  color: var(--td-text-color-secondary);
+  font-family: var(--td-font-family-mono);
   font-size: 12px;
   line-height: 1.8;
   white-space: pre-wrap;
 }
 
-@keyframes upload-status-pulse {
+@keyframes status-pulse {
   0%,
   100% {
     opacity: 1;
@@ -594,43 +794,139 @@ body {
   }
 }
 
+/* ==================== History ==================== */
+.page-loading {
+  display: grid;
+  min-height: 220px;
+  place-items: center;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+  flex-direction: column;
+  gap: 10px;
+  color: var(--td-text-color-placeholder);
+}
+
+.empty-icon {
+  font-size: 42px;
+  line-height: 1;
+}
+
+.empty-state p {
+  margin: 0;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-border-color-light);
+  border-radius: var(--td-radius-default);
+  transition: all var(--td-transition);
+}
+
+.history-item:hover {
+  border-color: var(--td-brand-color);
+  box-shadow: var(--td-shadow-1);
+}
+
+.history-status {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+
+.history-status.completed {
+  background: var(--td-success-color);
+}
+
+.history-status.failed {
+  background: var(--td-error-color);
+}
+
+.history-status.processing {
+  background: var(--td-brand-color);
+  animation: status-pulse 1s infinite;
+}
+
+.history-status.pending {
+  background: var(--td-text-color-placeholder);
+}
+
+.history-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.history-id {
+  overflow: hidden;
+  margin-bottom: 4px;
+  color: var(--td-text-color-primary);
+  font-family: var(--td-font-family-mono);
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.history-meta {
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+}
+
+.record-size {
+  color: var(--td-text-color-secondary);
+  font-family: var(--td-font-family-mono);
+  white-space: nowrap;
+}
+
+.history-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+.history-detail-modal {
+  width: min(900px, calc(100vw - 48px));
+}
+
 .log-panel,
 .script-log {
   min-height: 320px;
   padding: 12px;
   color: #d7dde7;
   background: #111820;
-  border-radius: 6px;
-}
-
-.section-label {
-  margin-bottom: 8px;
-  color: #333b46;
-  font-weight: 700;
-}
-
-.table-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.restart-button {
-  margin-top: 16px;
+  border-radius: var(--td-radius-default);
 }
 
+/* ==================== Settings ==================== */
 .settings-workspace {
   display: grid;
-  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
+  grid-template-columns: 1fr 1.5fr;
   align-items: start;
-  gap: 14px;
+  gap: 20px;
+  min-height: 100%;
+  padding: 24px 32px 40px;
 }
 
 .settings-column {
   display: flex;
+  min-width: 0;
   flex-direction: column;
-  gap: 14px;
+  gap: 20px;
 }
 
 .card-actions {
@@ -645,92 +941,155 @@ body {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  min-height: 34px;
+  min-height: 28px;
+}
+
+.form-hint {
+  margin: 0;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .field-mapping-card {
   min-width: 0;
-  height: calc(100vh - 92px);
+  height: fit-content;
 }
 
-.field-mapping-card .n-card__content {
-  height: calc(100% - 48px);
-  padding: 0 14px 14px;
+.field-mapping-card > .n-card-header {
+  display: flex;
+  align-items: flex-start;
+  padding: 14px 20px;
 }
 
-.field-card-title,
-.script-card-title {
+.field-mapping-card > .n-card-header .n-card-header__main {
+  min-width: 0;
+  width: 100%;
+}
+
+.field-mapping-card > .n-card__content {
+  max-height: calc(100vh - 280px);
+  padding: 12px 16px;
+  overflow: hidden;
+}
+
+.field-mapping-card > .n-card__footer {
+  padding: 12px 20px;
+  background: var(--td-bg-color-container);
+  border-top: 1px solid var(--td-border-color-light);
+}
+
+.field-card-header {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.field-card-title-row {
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: space-between;
   min-width: 0;
-  font-weight: 700;
+  gap: 16px;
+}
+
+.field-card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--td-text-color-primary);
+  font-weight: 600;
 }
 
 .field-search {
-  width: 240px;
+  width: 200px;
 }
 
 .field-mapping-scroll {
-  height: 100%;
+  max-height: calc(100vh - 304px);
 }
 
 .field-mapping-scroll .n-scrollbar-content {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 2px 4px 4px 0;
+  padding: 0 4px 4px 0;
 }
 
 .field-mapping-item {
   position: relative;
-  min-width: 0;
-  padding: 32px 12px 12px;
-  background: #fff;
-  border: 1px solid #dfe4ec;
-  border-radius: 6px;
+  padding: 32px 14px 12px;
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-border-color);
+  border-radius: var(--td-radius-default);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition: box-shadow var(--td-transition);
 }
 
 .field-mapping-item:hover {
-  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.08);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
 
 .field-mapping-number {
+  display: flex;
   position: absolute;
-  top: 8px;
-  left: 10px;
-  display: grid;
-  width: 22px;
-  height: 22px;
-  place-items: center;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-  background: #1f5ea8;
-  border-radius: 4px;
+  top: 4px;
+  left: 4px;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--td-brand-color);
+  border-radius: var(--td-radius-small);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .field-remove-button {
   position: absolute;
-  top: 6px;
-  right: 8px;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
 }
 
 .field-mapping-header {
-  display: grid;
-  grid-template-columns: minmax(180px, 1fr) 160px;
+  display: flex;
+  align-items: flex-end;
   gap: 12px;
+  margin-bottom: 10px;
   padding-bottom: 10px;
-  border-bottom: 1px solid #e8ecf2;
+  border-bottom: 1px solid var(--td-border-color-light);
+}
+
+.field-name-control {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
+  padding-left: 28px;
 }
 
-.field-name-control,
 .field-type-control {
+  flex: 0 0 160px;
   margin-bottom: 0;
 }
 
+.field-name-control .n-form-item-label,
+.field-type-control .n-form-item-label {
+  min-height: 20px;
+  color: var(--td-text-color-secondary);
+  font-size: 12px;
+  font-weight: 500;
+}
+
 .extract-list {
-  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
 }
 
 .extract-list-header {
@@ -739,21 +1098,28 @@ body {
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 8px;
-  color: #4b5563;
-  font-size: 13px;
-  font-weight: 600;
+}
+
+.extract-list-header > span {
+  flex: 0 0 auto;
+  color: var(--td-text-color-primary);
+  font-size: 12px;
+  font-weight: 500;
 }
 
 .extract-add-group {
-  width: 300px;
+  flex: 1;
+  justify-content: flex-end;
+  min-width: 250px;
 }
 
 .extract-tree {
-  max-height: 130px;
-  overflow: auto;
-  background: #f6f8fb;
-  border: 1px solid #e1e6ee;
-  border-radius: 5px;
+  max-height: 120px;
+  margin-bottom: 8px;
+  overflow-y: auto;
+  background: var(--td-bg-color-secondarycontainer);
+  border: 1px solid var(--td-border-color-light);
+  border-radius: var(--td-radius-small);
 }
 
 .extract-tree-item {
@@ -762,21 +1128,23 @@ body {
   justify-content: space-between;
   gap: 12px;
   min-height: 32px;
-  padding: 5px 10px;
+  padding: 6px 10px;
+  color: var(--td-text-color-primary);
   font-size: 13px;
-  border-bottom: 1px solid #e8edf3;
+  border-bottom: 1px solid var(--td-border-color-light);
+  transition: background var(--td-transition);
 }
 
 .extract-tree-item:last-child {
-  border-bottom: 0;
+  border-bottom: none;
 }
 
 .extract-tree-item:hover {
-  background: #edf3fa;
+  background: var(--td-bg-color-container-hover);
 }
 
 .tree-text {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   min-width: 0;
   gap: 6px;
@@ -788,155 +1156,149 @@ body {
 .tree-text::before {
   content: "└";
   flex: 0 0 auto;
-  color: #8b95a4;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
 }
 
 .extract-empty {
-  padding: 9px 10px;
-  color: #8b95a4;
-  font-size: 13px;
-  background: #f6f8fb;
-  border: 1px dashed #cfd7e4;
-  border-radius: 5px;
+  margin-bottom: 8px;
+  padding: 12px;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+  text-align: center;
+  border: 1px dashed var(--td-border-color);
+  border-radius: var(--td-radius-small);
 }
 
-.script-workspace {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
-  gap: 14px;
-  height: calc(100vh - 92px);
-  min-height: 620px;
-}
-
-.script-editor-pane,
-.script-log-pane {
-  min-width: 0;
-  height: 100%;
-}
-
-.script-editor-pane .n-card__content {
+/* ==================== Script editor ==================== */
+.script-page-body {
   display: flex;
   flex-direction: column;
-  height: calc(100% - 48px);
-  padding: 0;
-}
-
-.script-editor-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 38px;
-  padding: 0 12px;
-  color: #596473;
-  font-size: 12px;
-  background: #f6f8fb;
-  border-top: 1px solid #e4e8ef;
-  border-bottom: 1px solid #e4e8ef;
-}
-
-.script-path {
+  height: 100%;
+  padding: 0 !important;
   overflow: hidden;
-  min-width: 0;
-  font-family:
-    "Cascadia Code",
-    Consolas,
-    "Courier New",
-    monospace;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 
-.script-modified {
-  flex: 0 0 auto;
-}
-
-.monaco-editor-host {
+.script-editor-container {
   flex: 1;
-  min-height: 480px;
+  min-height: 0;
+  margin: 16px 16px 0;
   overflow: hidden;
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-border-color);
+  border-radius: var(--td-radius-default);
+}
+
+.script-editor {
+  width: 100%;
+  height: 100%;
 }
 
 .script-status-bar {
   display: flex;
   align-items: center;
-  gap: 18px;
-  height: 28px;
-  padding: 0 12px;
-  color: #5f6b7a;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 16px;
+  margin: 8px 16px 16px;
+  padding: 6px 16px;
+  color: var(--td-text-color-secondary);
   font-size: 12px;
-  background: #f6f8fb;
-  border-top: 1px solid #e4e8ef;
+  background: var(--td-bg-color-secondarycontainer);
+  border-radius: var(--td-radius-default);
 }
 
-.script-log-pane .n-card__content {
-  height: calc(100% - 48px);
+.script-status-bar span:first-child,
+.script-status-bar span:last-child {
+  font-family: var(--td-font-family-mono);
+}
+
+.script-status-bar span:nth-child(2) {
+  font-weight: 500;
+}
+
+.script-process-section {
+  flex: 0 0 auto;
+  margin: 0 16px 16px;
+}
+
+.script-process-section .card-body {
+  padding: 12px 16px 16px;
 }
 
 .script-log {
-  height: 100%;
-  min-height: 0;
+  height: 240px;
+  min-height: 240px;
 }
 
-@media (max-width: 1180px) {
-  .settings-workspace,
-  .script-workspace {
+/* ==================== Responsive ==================== */
+@media (max-width: 1200px) {
+  .settings-workspace {
     grid-template-columns: 1fr;
-    height: auto;
-    min-height: 0;
-  }
-
-  .field-mapping-card,
-  .script-editor-pane,
-  .script-log-pane {
-    height: auto;
   }
 
+  .field-mapping-card > .n-card__content,
   .field-mapping-scroll {
-    height: min(680px, calc(100vh - 180px));
-  }
-
-  .script-workspace {
-    min-height: 0;
-  }
-
-  .monaco-editor-host {
-    height: 620px;
-    flex: 0 0 auto;
-  }
-
-  .script-log {
-    height: 360px;
+    max-height: none;
   }
 }
 
-@media (max-width: 720px) {
-  .topbar {
-    padding: 0 12px;
+@media (max-width: 900px) {
+  .topbar,
+  .page-header {
+    padding: 0 16px;
   }
 
-  .content {
-    padding: 10px;
+  .page-header-content {
+    gap: 8px;
   }
 
-  .page-title {
-    max-width: 46vw;
+  .page-header h1 {
+    font-size: 18px;
   }
 
-  .table-footer,
-  .card-actions,
-  .extract-list-header,
-  .script-editor-toolbar {
+  .page-subtitle,
+  .header-info-text {
+    display: none;
+  }
+
+  .upload-page-body,
+  .history-page-body,
+  .settings-workspace {
+    padding: 16px;
+  }
+
+  .history-item {
     align-items: flex-start;
     flex-direction: column;
+    gap: 10px;
+  }
+
+  .history-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .card-actions,
+  .field-card-title-row,
+  .extract-list-header {
+    align-items: stretch;
+    flex-direction: column;
   }
 
   .field-mapping-header {
-    grid-template-columns: 1fr;
+    align-items: stretch;
+    flex-direction: column;
   }
 
+  .field-name-control {
+    padding-left: 0;
+  }
+
+  .field-type-control,
   .field-search,
   .extract-add-group {
     width: 100%;
+    flex: none;
   }
 }