From 1b1d9830609c4d41208c6513155cc96bf6ed2a32 Mon Sep 17 00:00:00 2001
From: mangmang <362165265@qq.com>
Date: Sun, 19 Jul 2026 19:31:00 +0800
Subject: [PATCH] WIP: preserve frontend redesign

---
 frontend/src/App.vue                       |  735 ++++++---
 frontend/src/api/config.ts                 |    3 +
 frontend/src/api/health.ts                 |   10 +
 frontend/src/components/IngestTab.vue      | 1601 ++++++++++++++++----
 frontend/src/components/common/AppIcon.vue |  143 ++
 frontend/src/composables/useAppState.ts    |  128 ++
 frontend/src/composables/usePaths.ts       |   48 +
 frontend/src/styles/theme.css              |  205 ++-
 8 files changed, 2345 insertions(+), 528 deletions(-)
 create mode 100644 frontend/src/api/health.ts
 create mode 100644 frontend/src/components/common/AppIcon.vue
 create mode 100644 frontend/src/composables/useAppState.ts
 create mode 100644 frontend/src/composables/usePaths.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 904151e..fc15845 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,315 +1,606 @@
 <template>
-  <el-container class="app-root">
-    <el-aside width="220px" class="app-aside">
-      <div class="app-logo">
-        <span class="app-logo-title">MangTool</span>
-        <span class="app-logo-sub">音乐工具箱</span>
+  <div class="console-shell">
+    <!-- 移动端顶部条：品牌 + 抽屉开关 -->
+    <div class="mobile-topbar">
+      <div class="brand-mini">
+        <span class="brand-mark"><app-icon name="logo" :size="18" :stroke-width="2.5" /></span>
+        <span class="brand-mini-name">MangTool</span>
       </div>
-      <el-menu
-        :default-active="activeKey"
-        class="app-menu"
-        @select="handleSelect"
+      <button
+        class="drawer-toggle"
+        type="button"
+        :aria-expanded="drawerOpen"
+        aria-label="切换导航菜单"
+        @click="drawerOpen = !drawerOpen"
       >
-        <el-menu-item
-          v-for="tab in visibleTabs"
-          :key="tab.key"
-          :index="tab.key"
-        >
-          {{ tab.menuLabel }}
-        </el-menu-item>
-      </el-menu>
-    </el-aside>
+        <app-icon :name="drawerOpen ? 'reject' : 'chart'" :size="18" />
+      </button>
+    </div>
 
-    <el-container>
-      <el-header class="app-header">
-        <div class="app-header-title">
-          <h1>{{ currentTitle }}</h1>
-          <p>{{ currentSubtitle }}</p>
+    <!-- 侧边栏遮罩（仅移动端抽屉展开时） -->
+    <div
+      v-if="drawerOpen"
+      class="drawer-scrim"
+      @click="drawerOpen = false"
+    ></div>
+
+    <!-- 左侧固定侧边栏 -->
+    <aside class="sidebar" :class="{ 'is-open': drawerOpen }">
+      <div class="sidebar-brand">
+        <span class="brand-mark"><app-icon name="logo" :size="20" :stroke-width="2.5" /></span>
+        <div class="brand-text">
+          <span class="brand-name">MangTool</span>
+          <span class="brand-sub">音乐工作台</span>
         </div>
-        <div class="app-header-meta">
-          <span class="app-header-index">{{ currentTab.badge }}</span>
-          <span class="app-header-helper">执行面板</span>
+      </div>
+
+      <nav class="sidebar-nav c-scroll" aria-label="主导航">
+        <p class="nav-group-label">主控工作区</p>
+        <button
+          v-for="item in navItems"
+          :key="item.key"
+          type="button"
+          class="nav-item"
+          :class="{ 'is-active': activeKey === item.key }"
+          :aria-current="activeKey === item.key ? 'page' : undefined"
+          @click="selectNav(item.key)"
+        >
+          <span class="nav-item-main">
+            <app-icon :name="item.icon" :size="16" />
+            <span>{{ item.label }}</span>
+          </span>
+          <span
+            v-if="item.key === 'ingest' && appState.ingestRunning"
+            class="nav-dot pulse"
+            title="导入任务运行中"
+          ></span>
+        </button>
+      </nav>
+
+      <div class="sidebar-status">
+        <div class="status-row">
+          <span class="status-label">引擎健康状态</span>
+          <span class="status-value" :class="healthClass">
+            <span class="status-dot" :class="{ pulse: appState.health === 'ok' }"></span>
+            {{ healthText }}
+          </span>
         </div>
-      </el-header>
-      <el-main class="app-main">
+        <div class="status-path" :title="rootPathDisplay">
+          <span class="status-path-key">Root: </span>
+          <span class="status-path-val">{{ rootPathDisplay }}</span>
+        </div>
+      </div>
+    </aside>
+
+    <!-- 右侧主区域 -->
+    <div class="main-area">
+      <header class="topbar">
+        <div class="topbar-left">
+          <h2 class="topbar-title">{{ activeMeta.title }}</h2>
+          <span class="topbar-badge">{{ activeMeta.badge }}</span>
+        </div>
+        <div class="topbar-right">
+          <span class="topbar-health" :class="healthClass">
+            <span class="status-dot" :class="{ pulse: appState.health === 'ok' }"></span>
+            <span class="topbar-health-text">{{ healthText }}</span>
+          </span>
+          <span class="topbar-sep" aria-hidden="true">|</span>
+          <span class="topbar-basepath" :title="rootPathDisplay">{{ rootPathDisplay }}</span>
+        </div>
+      </header>
+
+      <main class="content c-scroll">
         <component :is="currentComponent" />
-      </el-main>
-    </el-container>
-  </el-container>
+      </main>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue';
 import type { Component } from 'vue';
+import AppIcon from './components/common/AppIcon.vue';
+import { useAppState } from './composables/useAppState';
 
 const IngestTab = defineAsyncComponent(() => import('./components/IngestTab.vue'));
-const AggregateTab = defineAsyncComponent(() => import('./components/AggregateTab.vue'));
-const ConvertTab = defineAsyncComponent(() => import('./components/ConvertTab.vue'));
-const DedupTab = defineAsyncComponent(() => import('./components/DedupTab.vue'));
-const TraditionalFilterTab = defineAsyncComponent(() => import('./components/TraditionalFilterTab.vue'));
-const RenameTab = defineAsyncComponent(() => import('./components/RenameTab.vue'));
-const MergeTab = defineAsyncComponent(() => import('./components/MergeTab.vue'));
 const SettingsTab = defineAsyncComponent(() => import('./components/SettingsTab.vue'));
 
-type TabKey =
-  | 'ingest'
-  | 'aggregate'
-  | 'convert'
-  | 'dedup'
-  | 'zhconvert'
-  | 'organize'
-  | 'merge'
-  | 'settings';
+// 旧版六步工具组件保留在源码中（隐藏、不在导航中暴露）。
+// 静态引用确保它们随构建保留，且未来可按需恢复到导航。
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const LEGACY_COMPONENTS = {
+  aggregate: () => import('./components/AggregateTab.vue'),
+  convert: () => import('./components/ConvertTab.vue'),
+  dedup: () => import('./components/DedupTab.vue'),
+  zhconvert: () => import('./components/TraditionalFilterTab.vue'),
+  organize: () => import('./components/RenameTab.vue'),
+  merge: () => import('./components/MergeTab.vue')
+};
+void LEGACY_COMPONENTS;
 
-interface TabDefinition {
-  key: TabKey;
-  menuLabel: string;
+type NavKey = 'ingest' | 'settings';
+
+interface NavItem {
+  key: NavKey;
+  label: string;
+  icon: string;
   badge: string;
   title: string;
-  subtitle: string;
   component: Component;
 }
 
-const tabs: TabDefinition[] = [
+const navItems: NavItem[] = [
   {
     key: 'ingest',
-    menuLabel: '一键导入',
-    badge: 'INGEST',
+    label: '一键智能导入',
+    icon: 'bolt',
+    badge: 'AUTOMATED',
     title: '一键导入',
-    subtitle: '自动扫描、校验、转码、去重、整理入库 —— 一步到位。',
     component: IngestTab
   },
-  {
-    key: 'aggregate',
-    menuLabel: '01 音频文件汇聚',
-    badge: 'STEP 01',
-    title: '01 · 音频文件汇聚',
-    subtitle: '将分散音频扁平化汇聚，为后续处理统一入口。',
-    component: AggregateTab
-  },
-  {
-    key: 'convert',
-    menuLabel: '02 音频格式智能处理',
-    badge: 'STEP 02',
-    title: '02 · 音频格式智能处理',
-    subtitle: '智能识别无损/有损格式并统一转码为 FLAC。',
-    component: ConvertTab
-  },
-  {
-    key: 'dedup',
-    menuLabel: '03 音乐去重',
-    badge: 'STEP 03',
-    title: '03 · 音乐去重',
-    subtitle: '基于 MD5 与元数据的双重策略进行音乐去重。',
-    component: DedupTab
-  },
-  {
-    key: 'zhconvert',
-    menuLabel: '04 元数据繁简转换',
-    badge: 'STEP 04',
-    title: '04 · 音乐元数据繁体转简体',
-    subtitle: '批量检测并转换标签中的繁体中文。',
-    component: TraditionalFilterTab
-  },
-  {
-    key: 'organize',
-    menuLabel: '05 音乐整理',
-    badge: 'STEP 05',
-    title: '05 · 音乐整理',
-    subtitle: '按 Navidrome 规范重命名与整理目录结构。',
-    component: RenameTab
-  },
-  {
-    key: 'merge',
-    menuLabel: '06 整理入库',
-    badge: 'STEP 06',
-    title: '06 · 整理入库',
-    subtitle: '将整理好的 staging 目录智能合并入主库。',
-    component: MergeTab
-  },
   {
     key: 'settings',
-    menuLabel: '全局设置',
+    label: '全局存储配置',
+    icon: 'gear',
     badge: 'CONFIG',
     title: '全局配置与路径设置',
-    subtitle: '配置全局工作目录与各阶段标准子目录。',
     component: SettingsTab
   }
 ];
 
-const tabMap = tabs.reduce((acc, tab) => {
-  acc[tab.key] = tab;
+const navMap = navItems.reduce((acc, item) => {
+  acc[item.key] = item;
   return acc;
-}, {} as Record<TabKey, TabDefinition>);
+}, {} as Record<NavKey, NavItem>);
 
-const activeKey = ref<TabKey>('ingest');
+const activeKey = ref<NavKey>('ingest');
+const drawerOpen = ref(false);
 
-// 用户可见的导航菜单：仅保留一键导入 + 配置（旧版六步标签隐藏但保留功能）
-const visibleTabs = computed(() => tabs.filter(t => t.key === 'ingest' || t.key === 'settings'));
+const activeMeta = computed(() => navMap[activeKey.value] ?? navItems[0]);
+const currentComponent = computed(() => activeMeta.value.component);
 
-const currentTab = computed(() => tabMap[activeKey.value] || tabs[0]);
-const currentComponent = computed(() => currentTab.value.component);
-const currentTitle = computed(() => currentTab.value.title);
-const currentSubtitle = computed(() => currentTab.value.subtitle);
+const { state: appState, refreshConfig, startHealthPolling, stopHealthPolling } = useAppState();
 
-function handleSelect(key: string) {
-  activeKey.value = key as TabKey;
+const rootPathDisplay = computed(() => appState.config.basePath || '未配置工作根目录');
+
+const healthText = computed(() => {
+  if (appState.health === 'ok') return '运行中';
+  if (appState.health === 'error') return '连接失败';
+  return '检测中';
+});
+
+const healthClass = computed(() => ({
+  'is-ok': appState.health === 'ok',
+  'is-error': appState.health === 'error',
+  'is-checking': appState.health === 'checking'
+}));
+
+function selectNav(key: NavKey) {
+  activeKey.value = key;
+  drawerOpen.value = false;
 }
+
+onMounted(() => {
+  startHealthPolling();
+  // 顶部条与侧边栏需要真实 basePath，主动拉取一次（各面板也会各自刷新）。
+  void refreshConfig().catch(() => {
+    /* 配置加载失败不阻塞外壳渲染，各面板会显示未配置状态 */
+  });
+});
+
+onUnmounted(() => {
+  stopHealthPolling();
+});
 </script>
 
 <style scoped>
-.app-root {
-  min-height: 100vh;
-  padding: 18px;
-  background:
-    radial-gradient(circle at 12% 12%, rgba(15, 118, 110, 0.13), transparent 45%),
-    radial-gradient(circle at 78% 4%, rgba(14, 116, 144, 0.16), transparent 40%),
-    linear-gradient(145deg, #f8fbff 0%, #f3f7fd 42%, #eef5fa 100%);
+.console-shell {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--c-bg-root);
+  color: var(--c-text-primary);
 }
 
-.app-aside {
-  margin-right: 14px;
-  border: 1px solid rgba(148, 163, 184, 0.28);
-  border-radius: 20px;
-  padding: 18px 12px;
-  background: rgba(255, 255, 255, 0.78);
-  backdrop-filter: blur(12px);
-  box-shadow:
-    0 20px 45px -30px rgba(15, 23, 42, 0.45),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+/* ---------- 侧边栏 ---------- */
+.sidebar {
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
+  width: 256px;
+  background: var(--c-bg-panel);
+  border-right: 1px solid var(--c-border);
 }
 
-.app-logo {
-  padding: 2px 14px 16px;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.26);
-  margin-bottom: 14px;
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--c-border);
 }
 
-.app-logo-title {
-  display: block;
-  font-size: 24px;
+.brand-mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--c-accent-strong), var(--c-teal));
+  box-shadow: 0 8px 20px -8px rgba(5, 150, 105, 0.6);
+}
+
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.brand-name {
+  font-size: 15px;
   font-weight: 700;
-  letter-spacing: 0.4px;
-  color: #0f172a;
+  color: #fff;
 }
 
-.app-logo-sub {
-  display: block;
-  margin-top: 4px;
-  font-size: 13px;
-  letter-spacing: 1.3px;
-  text-transform: uppercase;
-  color: #475569;
+.brand-sub {
+  font-size: 11px;
+  color: var(--c-text-secondary);
 }
 
-.app-menu {
+.sidebar-nav {
   flex: 1;
-  border-right: none;
+  min-height: 0;
+  padding: 16px 12px;
+  overflow-y: auto;
 }
 
-.app-menu :deep(.el-menu-item) {
-  height: 44px;
-  line-height: 44px;
-  border-radius: 11px;
-  margin: 2px 6px;
-  color: #334155;
-  transition: all 0.2s ease;
+.nav-group-label {
+  padding: 0 12px;
+  margin: 0 0 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-muted);
 }
 
-.app-menu :deep(.el-menu-item:hover) {
-  color: #0f172a;
-  background: rgba(15, 118, 110, 0.08);
-}
-
-.app-menu :deep(.el-menu-item.is-active) {
-  color: #0f766e;
-  font-weight: 600;
-  background: linear-gradient(95deg, rgba(15, 118, 110, 0.14), rgba(14, 116, 144, 0.07));
-}
-
-.app-header {
+.nav-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 88px;
-  padding: 0 26px;
-  border: 1px solid rgba(148, 163, 184, 0.22);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.88);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 16px 35px -30px rgba(15, 23, 42, 0.45);
+  width: 100%;
+  padding: 10px 14px;
+  margin-bottom: 6px;
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--c-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.app-header-title h1 {
+.nav-item:hover {
+  background: rgba(30, 41, 59, 0.6);
+  color: var(--c-text-regular);
+}
+
+.nav-item.is-active {
+  border-left-color: var(--c-accent);
+  background: rgba(16, 185, 129, 0.08);
+  color: var(--c-accent-text);
+}
+
+.nav-item-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.nav-item-main span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-dot {
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--c-accent);
+}
+
+.sidebar-status {
+  padding: 16px;
+  border-top: 1px solid var(--c-border);
+  background: rgba(2, 6, 23, 0.4);
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.status-label {
+  color: var(--c-text-muted);
+  font-weight: 500;
+}
+
+.status-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.status-value.is-ok {
+  color: var(--c-accent-text);
+}
+
+.status-value.is-error {
+  color: var(--c-error-text);
+}
+
+.status-value.is-checking {
+  color: var(--c-text-secondary);
+}
+
+.status-dot {
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.status-path {
+  padding: 8px 10px;
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background: var(--c-bg-inset);
+  font-family: var(--c-mono);
+  font-size: 10px;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-path-key {
+  color: var(--c-text-muted);
+}
+
+.status-path-val {
+  color: var(--c-text-regular);
+}
+
+/* ---------- 主区域 ---------- */
+.main-area {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 56px;
+  flex-shrink: 0;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--c-border);
+  background: rgba(15, 23, 42, 0.5);
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.topbar-title {
   margin: 0;
-  font-size: 22px;
+  font-size: 15px;
   font-weight: 700;
-  color: #0f172a;
+  color: #fff;
+  white-space: nowrap;
 }
 
-.app-header-title p {
-  margin: 6px 0 0;
-  font-size: 14px;
-  color: #475569;
+.topbar-badge {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  border-radius: 6px;
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--c-accent-text);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
 }
 
-.app-header-meta {
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.topbar-health {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.topbar-health.is-ok {
+  color: var(--c-accent-text);
+}
+
+.topbar-health.is-error {
+  color: var(--c-error-text);
+}
+
+.topbar-health.is-checking {
+  color: var(--c-text-secondary);
+}
+
+.topbar-sep {
+  color: var(--c-text-faint);
+}
+
+.topbar-basepath {
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--c-mono);
+  font-size: 11px;
+  color: var(--c-text-secondary);
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  padding: 24px;
+  overflow-y: auto;
+  background: rgba(2, 6, 23, 0.3);
+}
+
+/* ---------- 移动端顶部条 / 抽屉 ---------- */
+.mobile-topbar {
+  display: none;
+}
+
+.drawer-scrim {
+  display: none;
+}
+
+.brand-mini {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-.app-header-index {
+.brand-mini-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.drawer-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.8px;
-  color: #0b5f59;
-  background: rgba(15, 118, 110, 0.12);
+  width: 38px;
+  height: 38px;
+  border: 1px solid var(--c-border);
+  border-radius: 10px;
+  background: var(--c-bg-elevated);
+  color: var(--c-text-regular);
+  cursor: pointer;
 }
 
-.app-header-helper {
-  font-size: 13px;
-  color: #64748b;
+/* 脉冲动画（reduced-motion 下由 theme.css 关闭） */
+.pulse {
+  animation: consolePulse 2s ease-in-out infinite;
 }
 
-.app-main {
-  margin-top: 14px;
-  border-radius: 18px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.66);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-@media (max-width: 992px) {
-  .app-root {
-    padding: 12px;
+@keyframes consolePulse {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: scale(0.92);
   }
-
-  .app-aside {
-    width: 100% !important;
-    margin-right: 0;
-    margin-bottom: 12px;
+  50% {
+    opacity: 1;
+    transform: scale(1.08);
   }
+}
 
-  .app-header {
-    padding: 16px;
-    min-height: auto;
+/* ---------- 响应式：平板 / 移动端 ---------- */
+@media (max-width: 900px) {
+  .console-shell {
     flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
   }
 
-  .app-main {
-    margin-top: 10px;
-    padding: 14px;
+  .mobile-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 54px;
+    flex-shrink: 0;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--c-border);
+    background: var(--c-bg-panel);
+    z-index: 40;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 260px;
+    max-width: 82vw;
+    transform: translateX(-100%);
+    transition: transform 0.22s ease;
+    z-index: 60;
+  }
+
+  .sidebar.is-open {
+    transform: translateX(0);
+  }
+
+  .drawer-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(2, 6, 23, 0.6);
+    z-index: 50;
+  }
+
+  .topbar {
+    padding: 0 16px;
+  }
+
+  .topbar-basepath {
+    max-width: 180px;
+  }
+
+  .content {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 560px) {
+  .topbar-title {
+    font-size: 14px;
+  }
+
+  .topbar-right {
+    gap: 8px;
+  }
+
+  .topbar-sep,
+  .topbar-basepath {
+    display: none;
   }
 }
 </style>
diff --git a/frontend/src/api/config.ts b/frontend/src/api/config.ts
index 5d0a228..ced4ede 100644
--- a/frontend/src/api/config.ts
+++ b/frontend/src/api/config.ts
@@ -3,6 +3,9 @@ import request from './request';
 export interface ConfigResponse {
   basePath: string;
   inputDir: string;
+  libraryDir: string;
+  rejectedDir: string;
+  // 保留原有字段以保证向后兼容
   aggregatedDir: string;
   formatIssuesDir: string;
   duplicatesDir: string;
diff --git a/frontend/src/api/health.ts b/frontend/src/api/health.ts
new file mode 100644
index 0000000..ff76c34
--- /dev/null
+++ b/frontend/src/api/health.ts
@@ -0,0 +1,10 @@
+import request from './request';
+
+/**
+ * 后端健康检查。
+ * 对应 GET /api/health，成功时后端返回 Result<String>（data 为 "OK"）。
+ * request 拦截器会自动解包 Result，成功返回 data 字符串；失败会 reject。
+ */
+export function getHealth(): Promise<string> {
+  return request.get('/api/health');
+}
diff --git a/frontend/src/components/IngestTab.vue b/frontend/src/components/IngestTab.vue
index b194e0a..4003180 100644
--- a/frontend/src/components/IngestTab.vue
+++ b/frontend/src/components/IngestTab.vue
@@ -1,161 +1,309 @@
 <template>
-  <div class="ingest-container">
-    <el-row :gutter="24">
-      <!-- 任务控制卡片 -->
-      <el-col :xs="24" :sm="24" :md="12" :lg="10">
-        <el-card class="config-card" shadow="hover">
-          <template #header>
-            <task-card-header :icon="Upload" title="一键导入" />
-          </template>
+  <div class="ingest-view">
+    <!-- 产品说明横幅 -->
+    <section class="banner">
+      <div class="banner-text">
+        <div class="banner-title-row">
+          <h3 class="banner-title">一键导入</h3>
+          <span class="banner-tag">AUTOMATED</span>
+        </div>
+        <p class="banner-desc">
+          自动扫描输入目录，完成音频完整性校验、格式转码、指纹去重与元数据检查，
+          合格文件整理入库，异常文件归入拒绝目录。全流程状态实时回传。
+        </p>
+      </div>
+      <span class="banner-batch">PIPELINE: INPUT → LIBRARY / REJECTED</span>
+    </section>
 
-          <div class="ingest-description">
-            <p>自动扫描 Input 目录中的音频文件，校验元数据、繁简转换、转码为 FLAC、去重后整理入 Library 目录。</p>
+    <!-- 5/7 分栏 -->
+    <div class="split">
+      <!-- 左：控制卡 -->
+      <div class="split-left">
+        <div class="panel control-card">
+          <div class="panel-head">
+            <app-icon name="folder" :size="16" class="panel-head-icon" />
+            <h4 class="panel-head-title">当前挂载路径</h4>
+            <button
+              class="icon-btn"
+              type="button"
+              title="刷新配置"
+              aria-label="刷新配置"
+              :disabled="configLoading"
+              @click="reloadConfig"
+            >
+              <app-icon name="refresh" :size="14" :class="{ spin: configLoading }" />
+            </button>
           </div>
 
-          <el-form label-width="100px" label-position="left">
-            <el-form-item label="输入目录">
-              <el-input :model-value="config.inputDir" disabled>
-                <template #prefix>
-                  <el-icon><FolderOpened /></el-icon>
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="库目录">
-              <el-input :model-value="config.libraryDir" disabled>
-                <template #prefix>
-                  <el-icon><FolderOpened /></el-icon>
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="拒绝目录">
-              <el-input :model-value="config.rejectedDir" disabled>
-                <template #prefix>
-                  <el-icon><FolderOpened /></el-icon>
-                </template>
-              </el-input>
-            </el-form-item>
+          <div class="path-list">
+            <div class="path-field">
+              <span class="path-label">输入目录 (INPUT)</span>
+              <div class="path-value">
+                <app-icon name="login" :size="14" class="path-value-icon" />
+                <span class="path-text selectable" :title="appState.config.inputDir || '未配置'">
+                  {{ appState.config.inputDir || '未配置' }}
+                </span>
+                <button
+                  v-if="appState.config.inputDir"
+                  class="copy-btn"
+                  type="button"
+                  title="复制路径"
+                  aria-label="复制输入目录"
+                  @click="copyPath(appState.config.inputDir)"
+                >
+                  <app-icon name="check" :size="12" />
+                </button>
+              </div>
+            </div>
 
-            <el-divider />
+            <div class="path-field">
+              <span class="path-label">入库目录 (LIBRARY)</span>
+              <div class="path-value">
+                <app-icon name="shield" :size="14" class="path-value-icon" />
+                <span class="path-text selectable" :title="appState.config.libraryDir || '未配置'">
+                  {{ appState.config.libraryDir || '未配置' }}
+                </span>
+                <button
+                  v-if="appState.config.libraryDir"
+                  class="copy-btn"
+                  type="button"
+                  title="复制路径"
+                  aria-label="复制入库目录"
+                  @click="copyPath(appState.config.libraryDir)"
+                >
+                  <app-icon name="check" :size="12" />
+                </button>
+              </div>
+            </div>
 
-            <el-form-item>
-              <el-button
-                type="primary"
-                :loading="submitting"
-                :disabled="!canStart"
-                @click="startIngest"
-                size="large"
-                style="width: 100%"
-              >
-                <el-icon v-if="!submitting"><VideoPlay /></el-icon>
-                <span style="margin-left: 4px">{{ submitting ? '导入中...' : '开始一键导入' }}</span>
-              </el-button>
-            </el-form-item>
+            <div class="path-field">
+              <span class="path-label">拒绝目录 (REJECTED)</span>
+              <div class="path-value">
+                <app-icon name="reject" :size="14" class="path-value-icon" />
+                <span class="path-text selectable" :title="appState.config.rejectedDir || '未配置'">
+                  {{ appState.config.rejectedDir || '未配置' }}
+                </span>
+                <button
+                  v-if="appState.config.rejectedDir"
+                  class="copy-btn"
+                  type="button"
+                  title="复制路径"
+                  aria-label="复制拒绝目录"
+                  @click="copyPath(appState.config.rejectedDir)"
+                >
+                  <app-icon name="check" :size="12" />
+                </button>
+              </div>
+            </div>
+          </div>
 
-            <el-form-item>
-              <el-button
-                :disabled="!config.basePath"
-                @click="loadConfig"
-                size="default"
-                style="width: 100%"
-              >
-                <el-icon><Refresh /></el-icon>
-                <span style="margin-left: 4px">刷新配置</span>
-              </el-button>
-            </el-form-item>
-          </el-form>
+          <!-- 未配置提示 -->
+          <div v-if="appState.config.attempted && !isConfigured" class="notice notice-warn">
+            <app-icon name="warn" :size="16" class="notice-icon" />
+            <div class="notice-body">
+              <p class="notice-title">尚未配置工作根目录</p>
+              <p class="notice-desc">请前往「全局存储配置」设置根目录后再执行导入。</p>
+            </div>
+          </div>
 
-          <!-- 配置提示 -->
-          <el-alert
-            v-if="!config.basePath"
-            type="warning"
-            :closable="false"
-            show-icon
-          >
-            <template #title>
-              请先在<strong>配置</strong>页面设置工作根目录
+          <!-- 操作按钮 -->
+          <div class="control-actions">
+            <button
+              v-if="!running"
+              class="btn btn-primary"
+              type="button"
+              :disabled="!canStart"
+              @click="startIngest"
+            >
+              <app-icon name="play" :size="16" filled />
+              <span>执行一键入库</span>
+            </button>
+            <button
+              v-else
+              class="btn btn-running"
+              type="button"
+              disabled
+            >
+              <app-icon name="refresh" :size="16" class="spin" />
+              <span>正在导入分析… ({{ percentage }}%)</span>
+            </button>
+
+            <button
+              class="btn btn-ghost"
+              type="button"
+              :disabled="running || activity.length === 0"
+              :title="running ? '任务运行中不可清除' : '仅清除本地活动记录，不影响后端统计'"
+              @click="clearActivity"
+            >
+              <app-icon name="refresh" :size="14" />
+              <span>清除本地活动记录</span>
+            </button>
+          </div>
+
+          <p class="control-hint">
+            <app-icon name="info" :size="14" class="hint-icon" />
+            <span>路径来自「全局存储配置」。此处仅展示只读真值，修改请前往配置页。</span>
+          </p>
+        </div>
+      </div>
+
+      <!-- 右：遥测面板 -->
+      <div class="split-right">
+        <div class="panel telemetry-card">
+          <div class="panel-head">
+            <app-icon name="chart" :size="16" class="panel-head-icon" />
+            <h4 class="panel-head-title">智能入库监控台</h4>
+            <span class="run-badge" :class="runBadgeClass">{{ runBadgeText }}</span>
+          </div>
+
+          <!-- 主统计 -->
+          <div class="stats-grid stats-primary">
+            <div class="stat-cell">
+              <span class="stat-name">已处理</span>
+              <span class="stat-num">{{ progress.processed ?? 0 }}</span>
+            </div>
+            <div class="stat-cell tone-ok">
+              <span class="stat-name">已入库</span>
+              <span class="stat-num">{{ progress.ingestedFiles ?? 0 }}</span>
+            </div>
+            <div class="stat-cell tone-warn">
+              <span class="stat-name">重复跳过</span>
+              <span class="stat-num">{{ progress.duplicateFiles ?? 0 }}</span>
+            </div>
+            <div class="stat-cell tone-purple">
+              <span class="stat-name">缺元数据</span>
+              <span class="stat-num">{{ progress.missingMetadataFiles ?? 0 }}</span>
+            </div>
+          </div>
+
+          <!-- 次级错误统计 -->
+          <div class="stats-grid stats-secondary">
+            <div class="stat-cell-sm tone-error">
+              <span class="stat-name-sm">损坏不可读</span>
+              <span class="stat-num-sm">{{ progress.unreadableFiles ?? 0 }}</span>
+            </div>
+            <div class="stat-cell-sm">
+              <span class="stat-name-sm">转码失败</span>
+              <span class="stat-num-sm">{{ progress.conversionFailedFiles ?? 0 }}</span>
+            </div>
+            <div class="stat-cell-sm">
+              <span class="stat-name-sm">其他拒绝</span>
+              <span class="stat-num-sm">{{ progress.otherRejectedFiles ?? 0 }}</span>
+            </div>
+          </div>
+
+          <!-- 进度条 -->
+          <div class="progress-block">
+            <div class="progress-meta">
+              <span>总体处理进度</span>
+              <span class="progress-pct" :class="progressToneClass">{{ percentage }}%</span>
+            </div>
+            <div class="progress-track">
+              <div
+                class="progress-fill"
+                :class="progressToneClass"
+                :style="{ width: percentage + '%' }"
+              ></div>
+            </div>
+          </div>
+
+          <!-- 当前文件 / 最新消息 -->
+          <div class="current-line">
+            <template v-if="progress.currentFile">
+              <span class="current-tag">当前</span>
+              <span class="current-file" :title="progress.currentFile">{{ progress.currentFile }}</span>
+            </template>
+            <template v-else-if="latestMessage">
+              <span class="current-tag">消息</span>
+              <span class="current-file" :title="latestMessage">{{ latestMessage }}</span>
+            </template>
+            <template v-else>
+              <span class="current-idle">等待任务开始…</span>
             </template>
-          </el-alert>
-        </el-card>
-      </el-col>
-
-      <!-- 任务进度卡片 -->
-      <el-col :xs="24" :sm="24" :md="12" :lg="14">
-        <el-card class="progress-card" shadow="hover">
-          <template #header>
-            <task-card-header :icon="DataLine" title="导入进度" :status="connectionStatus" />
-          </template>
-
-          <div v-if="!progress.taskId" class="empty-state">
-            <el-icon class="empty-icon"><Upload /></el-icon>
-            <p class="empty-text">准备就绪，点击「开始一键导入」...</p>
           </div>
 
-          <div v-else class="progress-content">
-            <!-- 统计信息 -->
-            <task-stats-grid :items="progressStats" />
+          <!-- 完成状态汇总 -->
+          <div v-if="progress.completed" class="result-banner" :class="resultClass">
+            <app-icon :name="resultIcon" :size="16" class="result-icon" />
+            <span>{{ resultText }}</span>
+          </div>
 
-            <!-- 进度条 -->
-            <div class="progress-section">
-              <el-progress
-                :percentage="percentage"
-                :status="progress.completed ? 'success' : progress.message?.includes('失败') ? 'exception' : undefined"
-                :stroke-width="12"
-                :show-text="true"
-                :format="formatProgress"
-              />
+          <!-- 活动记录 -->
+          <div class="console-head">
+            <div class="console-legend">
+              <span class="legend-dot dot-error"></span>
+              <span class="legend-dot dot-warn"></span>
+              <span class="legend-dot dot-ok"></span>
+              <span class="console-legend-label">活动记录</span>
             </div>
-
-            <!-- 当前文件 -->
-            <div v-if="progress.currentFile" class="current-file-section">
-              <el-icon class="file-icon"><Document /></el-icon>
-              <span class="file-text">{{ progress.currentFile }}</span>
-            </div>
-
-            <!-- 消息提示 -->
-            <div v-if="progress.message" class="message-section">
-              <el-alert
-                :type="alertType"
-                :closable="false"
-                show-icon
+            <div class="filter-group" role="group" aria-label="活动记录筛选">
+              <button
+                v-for="f in filters"
+                :key="f.key"
+                type="button"
+                class="filter-btn"
+                :class="{ 'is-active': activeFilter === f.key }"
+                @click="activeFilter = f.key"
               >
-                <template #title>
-                  <span>{{ progress.message }}</span>
-                </template>
-              </el-alert>
+                {{ f.label }}
+              </button>
             </div>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
+
+          <div
+            ref="consoleEl"
+            class="console-body c-scroll"
+            @scroll="onConsoleScroll"
+          >
+            <div v-if="filteredActivity.length === 0" class="console-empty">
+              <app-icon name="wave" :size="30" class="console-empty-icon" />
+              <span>{{ activity.length === 0 ? '暂无活动记录' : '当前筛选无匹配记录' }}</span>
+              <span class="console-empty-hint">活动记录仅在本次会话内存中构建，刷新页面后无法恢复历史</span>
+            </div>
+            <div v-else class="console-lines">
+              <div
+                v-for="entry in filteredActivity"
+                :key="entry.id"
+                class="log-line"
+              >
+                <span class="log-time">{{ entry.time }}</span>
+                <span class="log-badge" :class="'badge-' + entry.level">{{ entry.badge }}</span>
+                <span class="log-text">
+                  <span v-if="entry.file" class="log-file">{{ entry.file }}</span>
+                  <span class="log-msg">{{ entry.message }}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <p class="console-note">
+            共 {{ activity.length }} 条本地记录（上限 300）。历史记录随页面刷新清空，无法重建。
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, onMounted, onUnmounted } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessage } from 'element-plus';
-import { Upload, VideoPlay, Refresh, DataLine, FolderOpened, Document } from '@element-plus/icons-vue';
+import AppIcon from './common/AppIcon.vue';
 import { getConfig } from '../api/config';
-import type { ConfigResponse } from '../api/config';
 import { startIngest as apiStartIngest, getIngestStatus, getIngestCurrentStatus } from '../api/ingest';
 import type { IngestStatusResponse } from '../api/ingest';
 import { useWebSocket } from '../composables/useWebSocket';
 import type { ProgressMessage } from '../composables/useWebSocket';
-import TaskCardHeader from './common/TaskCardHeader.vue';
-import TaskStatsGrid from './common/TaskStatsGrid.vue';
-import type { StatItem } from './common/TaskStatsGrid.vue';
+import { useAppState } from '../composables/useAppState';
+
+const { state: appState, isConfigured, refreshConfig, setIngestRunning, setIngestPercentage } = useAppState();
 
 const submitting = ref(false);
+const configLoading = ref(false);
 const taskId = ref<string | null>(null);
 
-// 配置
-const config = reactive<{ basePath: string; inputDir: string; libraryDir: string; rejectedDir: string }>({
-  basePath: '',
-  inputDir: '',
-  libraryDir: '',
-  rejectedDir: ''
-});
+/** 任务运行态：提交中或后端上报 running。 */
+const running = computed(() => submitting.value);
 
-// 进度
 const progress = reactive<ProgressMessage>({
   taskId: '',
   type: '',
@@ -165,34 +313,24 @@ const progress = reactive<ProgressMessage>({
   failed: 0,
   currentFile: '',
   message: '',
-  completed: false
+  completed: false,
+  ingestedFiles: 0,
+  duplicateFiles: 0,
+  missingMetadataFiles: 0,
+  unreadableFiles: 0,
+  conversionFailedFiles: 0,
+  otherRejectedFiles: 0
 });
 
-// 连接状态
-const connectionStatus = ref<'connected' | 'connecting' | 'completed' | null>(null);
-
-const canStart = computed(() => !!config.basePath && !submitting.value);
+const canStart = computed(() => isConfigured.value && !submitting.value);
 
 const percentage = computed(() => {
-  if (!progress.total || !progress.processed) return 0;
   if (progress.completed) return 100;
-  return Math.round((progress.processed / progress.total) * 100);
+  if (!progress.total || !progress.processed) return 0;
+  return Math.min(100, Math.round((progress.processed / progress.total) * 100));
 });
 
-const progressStats = computed((): StatItem[] => {
-  if (!progress.taskId) return [];
-  return [
-    { label: '已处理', value: progress.processed ?? 0 },
-    { label: '已入库', value: progress.ingestedFiles ?? 0, tone: 'success' },
-    { label: '重复跳过', value: progress.duplicateFiles ?? 0, tone: 'warning' },
-    { label: '缺元数据', value: progress.missingMetadataFiles ?? 0, tone: 'failed' },
-    { label: '不可读', value: progress.unreadableFiles ?? 0, tone: 'failed' },
-    { label: '转码失败', value: progress.conversionFailedFiles ?? 0, tone: 'failed' },
-    { label: '其他拒绝', value: progress.otherRejectedFiles ?? 0, tone: 'failed' },
-  ];
-});
-
-/** 所有被拒绝类别之和（不含已入库） */
+/** 被拒绝类别之和（不含已入库）。 */
 const totalRejected = computed(() =>
   (progress.duplicateFiles ?? 0)
   + (progress.missingMetadataFiles ?? 0)
@@ -201,41 +339,210 @@ const totalRejected = computed(() =>
   + (progress.otherRejectedFiles ?? 0)
 );
 
-/** 是否为致命/内部错误 */
 const isFatalError = computed(() => {
   const msg = progress.message || '';
   return msg.startsWith('导入任务失败') || msg.startsWith('任务内部错误') || msg.includes('异常终止');
 });
 
-/** 任务完成后的提醒类型 */
-const alertType = computed(() => {
-  if (!progress.completed) return 'info';
-  if (isFatalError.value) return 'error';
-  if (totalRejected.value > 0) return 'warning';
-  return 'success';
+const latestMessage = computed(() => progress.message || '');
+
+/** 运行状态徽章。 */
+const runBadgeText = computed(() => {
+  if (submitting.value) return 'INGESTING';
+  if (progress.completed) {
+    if (isFatalError.value) return 'FAILED';
+    if (totalRejected.value > 0) return 'PARTIAL';
+    return 'DONE';
+  }
+  if (progress.taskId) return 'IDLE';
+  return 'STANDBY';
 });
 
-function formatProgress() {
-  if (progress.completed) return '完成';
-  return `${progress.processed ?? 0} / ${progress.total ?? 0}`;
+const runBadgeClass = computed(() => {
+  if (submitting.value) return 'badge-run-active';
+  if (progress.completed) {
+    if (isFatalError.value) return 'badge-run-error';
+    if (totalRejected.value > 0) return 'badge-run-warn';
+    return 'badge-run-ok';
+  }
+  return 'badge-run-idle';
+});
+
+const progressToneClass = computed(() => {
+  if (progress.completed && isFatalError.value) return 'tone-error';
+  if (progress.completed && totalRejected.value > 0) return 'tone-warn';
+  return 'tone-ok';
+});
+
+const resultClass = computed(() => {
+  if (isFatalError.value) return 'result-error';
+  if (totalRejected.value > 0) return 'result-warn';
+  return 'result-ok';
+});
+
+const resultIcon = computed(() => {
+  if (isFatalError.value) return 'warn';
+  if (totalRejected.value > 0) return 'info';
+  return 'check';
+});
+
+const resultText = computed(() => {
+  if (isFatalError.value) {
+    return progress.message || '导入任务失败';
+  }
+  if (totalRejected.value > 0) {
+    return `导入完成：成功入库 ${progress.ingestedFiles ?? 0} 首，${totalRejected.value} 首被拒绝`;
+  }
+  return `导入完成：全部 ${progress.processed ?? 0} 首成功入库`;
+});
+
+/* ---------------- 活动记录（仅由真实状态转移构建） ---------------- */
+
+type ActivityLevel = 'normal' | 'warning' | 'error';
+
+interface ActivityEntry {
+  id: number;
+  time: string;
+  level: ActivityLevel;
+  badge: string;
+  file: string;
+  message: string;
 }
 
-// WebSocket 消息处理
+const ACTIVITY_CAP = 300;
+const activity = reactive<ActivityEntry[]>([]);
+let activitySeq = 0;
+/** 去重键：连续相同的（file+message）不重复入栈（应对轮询重复）。 */
+let lastActivityKey = '';
+
+const filters = [
+  { key: 'all', label: '全部' },
+  { key: 'normal', label: '正常' },
+  { key: 'warning', label: '警告' },
+  { key: 'error', label: '错误' }
+] as const;
+
+type FilterKey = (typeof filters)[number]['key'];
+const activeFilter = ref<FilterKey>('all');
+
+const filteredActivity = computed(() => {
+  if (activeFilter.value === 'all') return activity;
+  return activity.filter((e) => e.level === activeFilter.value);
+});
+
+/** 根据真实进度消息推断记录级别与徽章。 */
+function classifyLevel(msg: ProgressMessage): { level: ActivityLevel; badge: string } {
+  const text = msg.message || '';
+  const fatal =
+    text.startsWith('导入任务失败') || text.startsWith('任务内部错误') || text.includes('异常终止');
+  if (fatal) return { level: 'error', badge: '[失败]' };
+  if (text.includes('损坏') || text.includes('不可读') || text.includes('转码失败')) {
+    return { level: 'error', badge: '[错误]' };
+  }
+  if (text.includes('重复') || text.includes('跳过') || text.includes('缺') || text.includes('拒绝')) {
+    return { level: 'warning', badge: '[警告]' };
+  }
+  return { level: 'normal', badge: '[进行]' };
+}
+
+/**
+ * 由真实状态转移追加活动记录。
+ * - 仅在 file 或 message 发生变化时记录，避免轮询重复刷屏。
+ * - 上限 300，超出丢弃最旧。
+ */
+function recordActivity(msg: ProgressMessage) {
+  const file = msg.currentFile || '';
+  const message = msg.message || '';
+  if (!file && !message) return;
+
+  const key = `${file}||${message}`;
+  if (key === lastActivityKey) return;
+  lastActivityKey = key;
+
+  const { level, badge } = classifyLevel(msg);
+  activity.push({
+    id: ++activitySeq,
+    time: new Date().toLocaleTimeString(),
+    level,
+    badge,
+    file,
+    message
+  });
+
+  if (activity.length > ACTIVITY_CAP) {
+    activity.splice(0, activity.length - ACTIVITY_CAP);
+  }
+
+  void scrollConsoleIfPinned();
+}
+
+function clearActivity() {
+  if (submitting.value) return;
+  activity.splice(0, activity.length);
+  lastActivityKey = '';
+  ElMessage.success('已清除本地活动记录');
+}
+
+/* ---------------- 控制台自动滚动（用户阅读旧记录时不强制滚动） ---------------- */
+
+const consoleEl = ref<HTMLElement | null>(null);
+const pinnedToBottom = ref(true);
+
+function onConsoleScroll() {
+  const el = consoleEl.value;
+  if (!el) return;
+  const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+  pinnedToBottom.value = distance < 24;
+}
+
+async function scrollConsoleIfPinned() {
+  if (!pinnedToBottom.value) return;
+  await nextTick();
+  const el = consoleEl.value;
+  if (el) el.scrollTop = el.scrollHeight;
+}
+
+/* ---------------- 进度消息处理 ---------------- */
+
 function handleProgressMessage(msg: ProgressMessage) {
   Object.assign(progress, msg);
-  connectionStatus.value = msg.completed ? 'completed' : 'connected';
+  recordActivity(msg);
 
+  submitting.value = !msg.completed && (submitting.value || !!msg.taskId);
   if (msg.completed) {
     submitting.value = false;
   }
+
+  setIngestRunning(submitting.value);
+  setIngestPercentage(percentage.value);
 }
 
-// WebSocket
 const { connect: wsConnect, disconnect: wsDisconnect } = useWebSocket(taskId, handleProgressMessage);
 
-// 轮询兜底
+/* ---------------- 轮询兜底 ---------------- */
+
 let pollTimer: ReturnType<typeof setInterval> | null = null;
 
+function statusToProgress(resp: IngestStatusResponse): ProgressMessage {
+  return {
+    taskId: resp.taskId,
+    type: 'ingest',
+    total: resp.total,
+    processed: resp.processed,
+    success: resp.ingestedFiles,
+    failed: resp.otherRejectedFiles,
+    currentFile: '',
+    message: resp.message,
+    completed: resp.completed,
+    ingestedFiles: resp.ingestedFiles,
+    duplicateFiles: resp.duplicateFiles,
+    missingMetadataFiles: resp.missingMetadataFiles,
+    unreadableFiles: resp.unreadableFiles,
+    conversionFailedFiles: resp.conversionFailedFiles,
+    otherRejectedFiles: resp.otherRejectedFiles
+  };
+}
+
 function startPolling() {
   stopPolling();
   pollTimer = setInterval(async () => {
@@ -243,29 +550,13 @@ function startPolling() {
     try {
       const resp = await getIngestStatus(taskId.value);
       if (resp) {
-        handleProgressMessage({
-          taskId: resp.taskId,
-          type: 'ingest',
-          total: resp.total,
-          processed: resp.processed,
-          success: resp.ingestedFiles,
-          failed: resp.otherRejectedFiles,
-          currentFile: '',
-          message: resp.message,
-          completed: resp.completed,
-          ingestedFiles: resp.ingestedFiles,
-          duplicateFiles: resp.duplicateFiles,
-          missingMetadataFiles: resp.missingMetadataFiles,
-          unreadableFiles: resp.unreadableFiles,
-          conversionFailedFiles: resp.conversionFailedFiles,
-          otherRejectedFiles: resp.otherRejectedFiles,
-        });
+        handleProgressMessage(statusToProgress(resp));
         if (resp.completed) {
           stopPolling();
         }
       }
     } catch {
-      // 忽略轮询错误
+      // 忽略轮询错误，等待下次
     }
   }, 2000);
 }
@@ -277,115 +568,913 @@ function stopPolling() {
   }
 }
 
-// 开始导入
+/* ---------------- 启动导入 ---------------- */
+
 async function startIngest() {
   if (submitting.value) return;
   submitting.value = true;
+  setIngestRunning(true);
 
   try {
     const resp = await apiStartIngest();
     taskId.value = resp.taskId;
 
-    // 重置进度
     Object.assign(progress, {
-      taskId: resp.taskId, type: 'ingest', total: 0, processed: 0,
-      success: 0, failed: 0, currentFile: '', message: '开始导入任务...',
-      completed: false, ingestedFiles: 0, duplicateFiles: 0,
-      missingMetadataFiles: 0, unreadableFiles: 0,
-      conversionFailedFiles: 0, otherRejectedFiles: 0
-    });
-
-    // 连接 WebSocket
-    wsConnect();
-    // 开启轮询兜底
-    startPolling();
-  } catch (e: any) {
-    submitting.value = false;
-    const msg = e?.response?.data?.message || e?.message || '启动任务失败';
-    ElMessage.error(msg);
-  }
-}
-
-// 页面挂载恢复：查询是否存在正在运行或最近完成的任务
-async function resumeFromCurrentTask() {
-  try {
-    let resp: IngestStatusResponse | null = null;
-    try {
-      resp = await getIngestCurrentStatus();
-    } catch {
-      // 没有当前任务或接口不可用
-      return;
-    }
-
-    if (!resp || (!resp.taskId && !resp.running)) return;
-
-    taskId.value = resp.taskId;
-    submitting.value = resp.running;
-
-    // 组装进度消息
-    handleProgressMessage({
       taskId: resp.taskId,
       type: 'ingest',
-      total: resp.total,
-      processed: resp.processed,
-      success: resp.ingestedFiles,
-      failed: resp.otherRejectedFiles,
+      total: 0,
+      processed: 0,
+      success: 0,
+      failed: 0,
       currentFile: '',
-      message: resp.message || (resp.running ? '恢复轮询...' : '已完成'),
-      completed: resp.completed,
-      ingestedFiles: resp.ingestedFiles,
-      duplicateFiles: resp.duplicateFiles,
-      missingMetadataFiles: resp.missingMetadataFiles,
-      unreadableFiles: resp.unreadableFiles,
-      conversionFailedFiles: resp.conversionFailedFiles,
-      otherRejectedFiles: resp.otherRejectedFiles,
+      message: '开始导入任务...',
+      completed: false,
+      ingestedFiles: 0,
+      duplicateFiles: 0,
+      missingMetadataFiles: 0,
+      unreadableFiles: 0,
+      conversionFailedFiles: 0,
+      otherRejectedFiles: 0
     });
+    lastActivityKey = '';
+    recordActivity(progress);
+    setIngestPercentage(0);
 
-    if (resp.running) {
-      wsConnect();
-      startPolling();
-    }
-  } catch {
-    // 恢复失败不阻塞页面
+    wsConnect();
+    startPolling();
+  } catch (e: unknown) {
+    submitting.value = false;
+    setIngestRunning(false);
+    ElMessage.error(extractError(e, '启动任务失败'));
   }
 }
 
-// 加载配置
-async function loadConfig() {
+/* ---------------- 刷新后恢复当前任务 ---------------- */
+
+async function resumeFromCurrentTask() {
+  let resp: IngestStatusResponse | null = null;
   try {
-    const cfg: ConfigResponse | null = await getConfig();
-    if (cfg) {
-      config.basePath = cfg.basePath || '';
-      config.inputDir = cfg.inputDir || '';
-      config.libraryDir = cfg.libraryDir || '';
-      config.rejectedDir = cfg.rejectedDir || '';
-    }
+    resp = await getIngestCurrentStatus();
+  } catch {
+    return;
+  }
+
+  if (!resp || (!resp.taskId && !resp.running)) return;
+
+  taskId.value = resp.taskId;
+  submitting.value = resp.running;
+  setIngestRunning(resp.running);
+
+  handleProgressMessage(statusToProgress({
+    ...resp,
+    message: resp.message || (resp.running ? '恢复任务状态...' : '任务已完成')
+  }));
+
+  if (resp.running) {
+    wsConnect();
+    startPolling();
+  }
+}
+
+/* ---------------- 配置加载 ---------------- */
+
+async function reloadConfig() {
+  configLoading.value = true;
+  try {
+    await refreshConfig();
   } catch {
     ElMessage.error('加载配置失败');
+  } finally {
+    configLoading.value = false;
   }
 }
 
-onMounted(() => {
-  loadConfig();
-  resumeFromCurrentTask();
+/* ---------------- 工具 ---------------- */
+
+function extractError(e: unknown, fallback: string): string {
+  if (typeof e === 'object' && e !== null) {
+    const maybe = e as { response?: { data?: { message?: unknown } }; message?: unknown };
+    const respMsg = maybe.response?.data?.message;
+    if (typeof respMsg === 'string' && respMsg) return respMsg;
+    if (typeof maybe.message === 'string' && maybe.message) return maybe.message;
+  }
+  return fallback;
+}
+
+async function copyPath(text: string) {
+  if (!text) return;
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      ElMessage.success('路径已复制');
+      return;
+    }
+    throw new Error('clipboard unavailable');
+  } catch {
+    ElMessage.warning('复制失败，请手动选择路径文本');
+  }
+}
+
+/* ---------------- 生命周期 ---------------- */
+
+onMounted(async () => {
+  // 若外壳尚未加载配置，则此处兜底加载真值。
+  if (!appState.config.attempted) {
+    await reloadConfig();
+  }
+  await resumeFromCurrentTask();
 });
 
 onUnmounted(() => {
-  if (wsDisconnect) wsDisconnect();
+  wsDisconnect();
   stopPolling();
+  // 组件卸载不代表任务停止，但本视图不再持有运行指示。
+  setIngestRunning(false);
 });
 </script>
 
 <style scoped>
-@import '../styles/panel-shared.css';
+.ingest-view {
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
 
-.ingest-description {
-  color: var(--el-text-color-secondary);
-  font-size: 13px;
+/* ---------- 横幅 ---------- */
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(16, 185, 129, 0.12);
+  border-radius: var(--c-radius-lg);
+  background: linear-gradient(120deg, rgba(6, 78, 59, 0.18), rgba(15, 23, 42, 0.6));
+}
+
+.banner-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.banner-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.banner-tag {
+  padding: 2px 8px;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  border-radius: 6px;
+  background: rgba(16, 185, 129, 0.16);
+  color: var(--c-accent-text);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.banner-desc {
+  margin: 6px 0 0;
+  max-width: 640px;
+  font-size: 12px;
   line-height: 1.6;
-  margin-bottom: 16px;
-  padding: 12px;
-  background: var(--el-fill-color-light);
+  color: var(--c-text-secondary);
+}
+
+.banner-batch {
+  flex-shrink: 0;
+  padding: 5px 10px;
+  border: 1px solid var(--c-border);
   border-radius: 8px;
+  background: var(--c-bg-panel);
+  color: var(--c-text-muted);
+  font-family: var(--c-mono);
+  font-size: 10px;
+}
+
+/* ---------- 分栏 ---------- */
+.split {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: 20px;
+  align-items: start;
+}
+
+/* ---------- 面板通用 ---------- */
+.panel {
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-lg);
+  background: var(--c-bg-panel-soft);
+  padding: 18px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.panel-head-icon {
+  color: var(--c-accent-text);
+}
+
+.panel-head-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-text-regular);
+}
+
+.icon-btn {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background: var(--c-bg-elevated);
+  color: var(--c-text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.icon-btn:hover:not(:disabled) {
+  color: var(--c-accent-text);
+  border-color: var(--c-border-strong);
+}
+
+.icon-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---------- 路径列表 ---------- */
+.path-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.path-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.path-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--c-text-muted);
+}
+
+.path-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: var(--c-bg-inset);
+}
+
+.path-value-icon {
+  color: var(--c-text-muted);
+  flex-shrink: 0;
+}
+
+.path-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--c-mono);
+  font-size: 12px;
+  color: var(--c-text-regular);
+}
+
+.selectable {
+  user-select: all;
+}
+
+.copy-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--c-border);
+  border-radius: 6px;
+  background: var(--c-bg-elevated);
+  color: var(--c-text-muted);
+  cursor: pointer;
+}
+
+.copy-btn:hover {
+  color: var(--c-accent-text);
+}
+
+/* ---------- 提示 ---------- */
+.notice {
+  display: flex;
+  gap: 10px;
+  margin-top: 16px;
+  padding: 12px;
+  border-radius: var(--c-radius-sm);
+}
+
+.notice-warn {
+  border: 1px solid rgba(245, 158, 11, 0.25);
+  background: rgba(245, 158, 11, 0.08);
+}
+
+.notice-icon {
+  flex-shrink: 0;
+  color: var(--c-warning-text);
+}
+
+.notice-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--c-warning-text);
+}
+
+.notice-desc {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: var(--c-text-secondary);
+}
+
+/* ---------- 操作按钮 ---------- */
+.control-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--c-radius-sm);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  color: #fff;
+  background: linear-gradient(120deg, var(--c-accent-strong), var(--c-teal));
+}
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.92;
+}
+
+.btn-primary:disabled {
+  opacity: 0.45;
+}
+
+.btn-running {
+  color: var(--c-accent-text);
+  background: var(--c-bg-elevated);
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.btn-ghost {
+  padding: 8px 16px;
+  color: var(--c-text-regular);
+  background: var(--c-bg-elevated);
+  border-color: var(--c-border);
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  color: var(--c-text-primary);
+  border-color: var(--c-border-strong);
+}
+
+.btn-ghost:disabled {
+  opacity: 0.5;
+}
+
+.control-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 16px 0 0;
+  padding: 10px 12px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: rgba(2, 6, 23, 0.4);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--c-text-secondary);
+}
+
+.hint-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--c-text-muted);
+}
+
+/* ---------- 遥测卡 ---------- */
+.telemetry-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.run-badge {
+  margin-left: auto;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  border: 1px solid var(--c-border);
+}
+
+.badge-run-idle {
+  background: var(--c-bg-inset);
+  color: var(--c-text-muted);
+}
+
+.badge-run-active {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.25);
+  color: var(--c-accent-text);
+}
+
+.badge-run-ok {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.25);
+  color: var(--c-accent-text);
+}
+
+.badge-run-warn {
+  background: rgba(245, 158, 11, 0.1);
+  border-color: rgba(245, 158, 11, 0.25);
+  color: var(--c-warning-text);
+}
+
+.badge-run-error {
+  background: rgba(244, 63, 94, 0.1);
+  border-color: rgba(244, 63, 94, 0.25);
+  color: var(--c-error-text);
+}
+
+/* ---------- 统计网格 ---------- */
+.stats-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.stats-primary {
+  grid-template-columns: repeat(4, 1fr);
+  margin-bottom: 8px;
+}
+
+.stats-secondary {
+  grid-template-columns: repeat(3, 1fr);
+  margin-bottom: 16px;
+}
+
+.stat-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 10px 6px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: rgba(2, 6, 23, 0.4);
+}
+
+.stat-name {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--c-text-muted);
+}
+
+.stat-num {
+  font-family: var(--c-mono);
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--c-text-primary);
+}
+
+.stat-cell.tone-ok {
+  border-color: rgba(16, 185, 129, 0.16);
+  background: rgba(16, 185, 129, 0.06);
+}
+
+.stat-cell.tone-ok .stat-num {
+  color: var(--c-accent-text);
+}
+
+.stat-cell.tone-warn {
+  border-color: rgba(245, 158, 11, 0.16);
+  background: rgba(245, 158, 11, 0.06);
+}
+
+.stat-cell.tone-warn .stat-num {
+  color: var(--c-warning-text);
+}
+
+.stat-cell.tone-purple {
+  border-color: rgba(168, 85, 247, 0.16);
+  background: rgba(168, 85, 247, 0.06);
+}
+
+.stat-cell.tone-purple .stat-num {
+  color: var(--c-purple-text);
+}
+
+.stat-cell-sm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 7px 6px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: rgba(2, 6, 23, 0.4);
+}
+
+.stat-name-sm {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--c-text-muted);
+}
+
+.stat-num-sm {
+  font-family: var(--c-mono);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--c-text-regular);
+}
+
+.stat-cell-sm.tone-error {
+  border-color: rgba(244, 63, 94, 0.16);
+  background: rgba(244, 63, 94, 0.06);
+}
+
+.stat-cell-sm.tone-error .stat-name-sm {
+  color: var(--c-error-text);
+}
+
+.stat-cell-sm.tone-error .stat-num-sm {
+  color: var(--c-error-text);
+}
+
+/* ---------- 进度条 ---------- */
+.progress-block {
+  margin-bottom: 16px;
+}
+
+.progress-meta {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--c-text-secondary);
+}
+
+.progress-pct {
+  font-family: var(--c-mono);
+}
+
+.progress-pct.tone-ok {
+  color: var(--c-accent-text);
+}
+
+.progress-pct.tone-warn {
+  color: var(--c-warning-text);
+}
+
+.progress-pct.tone-error {
+  color: var(--c-error-text);
+}
+
+.progress-track {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--c-bg-inset);
+  border: 1px solid var(--c-border);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.3s ease;
+  background: linear-gradient(90deg, var(--c-accent), var(--c-teal));
+}
+
+.progress-fill.tone-warn {
+  background: linear-gradient(90deg, #d97706, var(--c-warning));
+}
+
+.progress-fill.tone-error {
+  background: linear-gradient(90deg, #e11d48, var(--c-error));
+}
+
+/* ---------- 当前文件行 ---------- */
+.current-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 10px;
+  margin-bottom: 12px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: rgba(2, 6, 23, 0.4);
+}
+
+.current-tag {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--c-bg-elevated);
+  color: var(--c-text-muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.current-file {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--c-mono);
+  font-size: 11px;
+  color: var(--c-text-regular);
+}
+
+.current-idle {
+  font-size: 11px;
+  color: var(--c-text-muted);
+}
+
+/* ---------- 完成汇总 ---------- */
+.result-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 14px;
+  border-radius: var(--c-radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.result-icon {
+  flex-shrink: 0;
+}
+
+.result-ok {
+  border: 1px solid rgba(16, 185, 129, 0.25);
+  background: rgba(16, 185, 129, 0.08);
+  color: var(--c-accent-text);
+}
+
+.result-warn {
+  border: 1px solid rgba(245, 158, 11, 0.25);
+  background: rgba(245, 158, 11, 0.08);
+  color: var(--c-warning-text);
+}
+
+.result-error {
+  border: 1px solid rgba(244, 63, 94, 0.25);
+  background: rgba(244, 63, 94, 0.08);
+  color: var(--c-error-text);
+}
+
+/* ---------- 活动记录控制台 ---------- */
+.console-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 12px;
+  border: 1px solid var(--c-border);
+  border-bottom: none;
+  border-radius: var(--c-radius-sm) var(--c-radius-sm) 0 0;
+  background: var(--c-bg-inset);
+}
+
+.console-legend {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.dot-error {
+  background: var(--c-error);
+}
+
+.dot-warn {
+  background: var(--c-warning);
+}
+
+.dot-ok {
+  background: var(--c-accent);
+}
+
+.console-legend-label {
+  margin-left: 4px;
+  font-family: var(--c-mono);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--c-text-muted);
+}
+
+.filter-group {
+  display: flex;
+  gap: 4px;
+}
+
+.filter-btn {
+  padding: 3px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: var(--c-bg-panel);
+  color: var(--c-text-muted);
+  font-size: 10px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.filter-btn:hover {
+  color: var(--c-text-regular);
+}
+
+.filter-btn.is-active {
+  border-color: rgba(16, 185, 129, 0.25);
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--c-accent-text);
+}
+
+.console-body {
+  flex: 1;
+  min-height: 220px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 12px;
+  border: 1px solid var(--c-border);
+  border-radius: 0 0 var(--c-radius-sm) var(--c-radius-sm);
+  background: rgba(2, 6, 23, 0.7);
+}
+
+.console-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 100%;
+  min-height: 200px;
+  color: var(--c-text-faint);
+  text-align: center;
+  font-size: 12px;
+}
+
+.console-empty-icon {
+  color: var(--c-border-strong);
+}
+
+.console-empty-hint {
+  font-size: 10px;
+  color: var(--c-text-faint);
+}
+
+.console-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.log-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(30, 41, 59, 0.4);
+  font-family: var(--c-mono);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.log-line:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.log-time {
+  flex-shrink: 0;
+  color: var(--c-text-faint);
+  user-select: none;
+}
+
+.log-badge {
+  flex-shrink: 0;
+  font-weight: 700;
+}
+
+.badge-normal {
+  color: var(--c-accent-text);
+}
+
+.badge-warning {
+  color: var(--c-warning-text);
+}
+
+.badge-error {
+  color: var(--c-error-text);
+}
+
+.log-text {
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.log-file {
+  margin-right: 6px;
+  color: #fff;
+  font-weight: 700;
+}
+
+.log-msg {
+  color: var(--c-text-secondary);
+}
+
+.console-note {
+  margin: 8px 0 0;
+  font-size: 10px;
+  color: var(--c-text-faint);
+}
+
+/* ---------- 响应式 ---------- */
+@media (max-width: 1024px) {
+  .split {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .banner-batch {
+    align-self: flex-start;
+  }
+
+  .stats-primary {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stats-secondary {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/frontend/src/components/common/AppIcon.vue b/frontend/src/components/common/AppIcon.vue
new file mode 100644
index 0000000..a21d000
--- /dev/null
+++ b/frontend/src/components/common/AppIcon.vue
@@ -0,0 +1,143 @@
+<template>
+  <svg
+    class="app-icon"
+    :width="size"
+    :height="size"
+    :viewBox="viewBox"
+    :fill="filled ? 'currentColor' : 'none'"
+    :stroke="filled ? 'none' : 'currentColor'"
+    :stroke-width="filled ? undefined : strokeWidth"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path v-for="(d, i) in paths" :key="i" :d="d" />
+    <template v-if="circles.length">
+      <circle
+        v-for="(c, i) in circles"
+        :key="`c-${i}`"
+        :cx="c.cx"
+        :cy="c.cy"
+        :r="c.r"
+      />
+    </template>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * 本地内联 SVG 图标组件。所有图标显式指定 width/height，避免在 flex 布局
+ * 下被拉伸放大（对应旧原型 image_881d9c.png 巨型齿轮问题）。
+ * 全部为本地矢量路径，不引用任何远程字体 / 图标库。
+ */
+
+interface IconDef {
+  paths: string[];
+  circles?: Array<{ cx: number; cy: number; r: number }>;
+  /** true 表示实心填充图标（如播放三角），默认描边图标。 */
+  filled?: boolean;
+  viewBox?: string;
+}
+
+const ICONS: Record<string, IconDef> = {
+  logo: {
+    paths: ['M9 18V5l12-2v13M9 10l12-2'],
+    circles: [
+      { cx: 6, cy: 18, r: 3 },
+      { cx: 18, cy: 16, r: 3 }
+    ]
+  },
+  bolt: {
+    paths: ['M13 10V3L4 14h7v7l9-11h-7z']
+  },
+  gear: {
+    paths: [
+      'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
+      'M15 12a3 3 0 11-6 0 3 3 0 016 0z'
+    ]
+  },
+  folder: {
+    paths: ['M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z']
+  },
+  login: {
+    paths: [
+      'M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1'
+    ]
+  },
+  shield: {
+    paths: [
+      'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'
+    ]
+  },
+  reject: {
+    paths: [
+      'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
+    ]
+  },
+  play: {
+    paths: [
+      'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z',
+      'M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+    ]
+  },
+  refresh: {
+    paths: ['M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H19M9 5a7 7 0 0112.56 3.44']
+  },
+  info: {
+    paths: ['M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z']
+  },
+  chart: {
+    paths: [
+      'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14m-6 0a2 2 0 002 2h2a2 2 0 002-2'
+    ]
+  },
+  check: {
+    paths: ['M5 13l4 4L19 7']
+  },
+  pipeline: {
+    paths: [
+      'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'
+    ]
+  },
+  wave: {
+    paths: ['M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5']
+  },
+  warn: {
+    paths: [
+      'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
+    ]
+  },
+  plug: {
+    paths: [
+      'M13 10V3L4 14h7v7l9-11h-7z'
+    ]
+  }
+};
+
+interface Props {
+  name: keyof typeof ICONS | string;
+  size?: number | string;
+  strokeWidth?: number | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 16,
+  strokeWidth: 2
+});
+
+const def = computed<IconDef>(() => ICONS[props.name] ?? ICONS.info);
+const paths = computed(() => def.value.paths);
+const circles = computed(() => def.value.circles ?? []);
+const filled = computed(() => def.value.filled ?? false);
+const viewBox = computed(() => def.value.viewBox ?? '0 0 24 24');
+</script>
+
+<style scoped>
+.app-icon {
+  display: block;
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/composables/useAppState.ts b/frontend/src/composables/useAppState.ts
new file mode 100644
index 0000000..7a0f5e2
--- /dev/null
+++ b/frontend/src/composables/useAppState.ts
@@ -0,0 +1,128 @@
+import { computed, reactive } from 'vue';
+import { getHealth } from '../api/health';
+import { getConfig } from '../api/config';
+import type { ConfigResponse } from '../api/config';
+
+/**
+ * 轻量级全局状态：在应用外壳、一键导入、全局配置之间共享后端真实数据。
+ *
+ * 这不是新框架，只是一个模块级 reactive 对象加若干动作函数。所有值都来自
+ * 真实接口 / 运行时（GET /api/health、GET /api/config/base-path、导入任务运行态），
+ * 不含任何模拟数据。
+ */
+
+export type HealthStatus = 'checking' | 'ok' | 'error';
+
+interface AppConfigState {
+  /** 是否已经尝试过加载（用于区分「加载中」与「未配置」）。 */
+  attempted: boolean;
+  basePath: string;
+  inputDir: string;
+  libraryDir: string;
+  rejectedDir: string;
+  /** 后端返回的原始配置，供预览优先使用后端真值。 */
+  raw: ConfigResponse | null;
+}
+
+interface AppState {
+  health: HealthStatus;
+  config: AppConfigState;
+  /** 导入任务是否正在运行（由一键导入面板依据真实任务状态写入）。 */
+  ingestRunning: boolean;
+  /** 导入任务真实百分比（0-100）。 */
+  ingestPercentage: number;
+}
+
+const state = reactive<AppState>({
+  health: 'checking',
+  config: {
+    attempted: false,
+    basePath: '',
+    inputDir: '',
+    libraryDir: '',
+    rejectedDir: '',
+    raw: null
+  },
+  ingestRunning: false,
+  ingestPercentage: 0
+});
+
+/** 是否已配置工作根目录。 */
+const isConfigured = computed(() => !!state.config.basePath);
+
+/** 拉取真实健康状态；失败时如实标记为 error。 */
+async function refreshHealth(): Promise<void> {
+  try {
+    await getHealth();
+    state.health = 'ok';
+  } catch {
+    state.health = 'error';
+  }
+}
+
+/** 拉取后端配置真值并写入共享状态。返回原始配置或 null。 */
+async function refreshConfig(): Promise<ConfigResponse | null> {
+  const cfg = await getConfig();
+  state.config.attempted = true;
+  if (cfg && cfg.basePath) {
+    state.config.basePath = cfg.basePath;
+    state.config.inputDir = cfg.inputDir || '';
+    state.config.libraryDir = cfg.libraryDir || '';
+    state.config.rejectedDir = cfg.rejectedDir || '';
+    state.config.raw = cfg;
+  } else {
+    state.config.basePath = '';
+    state.config.inputDir = '';
+    state.config.libraryDir = '';
+    state.config.rejectedDir = '';
+    state.config.raw = null;
+  }
+  return cfg;
+}
+
+function setIngestRunning(running: boolean): void {
+  state.ingestRunning = running;
+}
+
+function setIngestPercentage(percentage: number): void {
+  state.ingestPercentage = Math.max(0, Math.min(100, Math.round(percentage)));
+}
+
+let healthTimer: ReturnType<typeof setInterval> | null = null;
+let healthConsumers = 0;
+
+/**
+ * 启动健康轮询（引用计数，避免多个消费者重复轮询）。
+ * 立即执行一次，随后每 15s 刷新。
+ */
+function startHealthPolling(intervalMs = 15000): void {
+  healthConsumers += 1;
+  if (healthTimer === null) {
+    void refreshHealth();
+    healthTimer = setInterval(() => {
+      void refreshHealth();
+    }, intervalMs);
+  }
+}
+
+/** 释放一个健康轮询消费者；无消费者时停止定时器。 */
+function stopHealthPolling(): void {
+  healthConsumers = Math.max(0, healthConsumers - 1);
+  if (healthConsumers === 0 && healthTimer !== null) {
+    clearInterval(healthTimer);
+    healthTimer = null;
+  }
+}
+
+export function useAppState() {
+  return {
+    state,
+    isConfigured,
+    refreshHealth,
+    refreshConfig,
+    setIngestRunning,
+    setIngestPercentage,
+    startHealthPolling,
+    stopHealthPolling
+  };
+}
diff --git a/frontend/src/composables/usePaths.ts b/frontend/src/composables/usePaths.ts
new file mode 100644
index 0000000..ceb3588
--- /dev/null
+++ b/frontend/src/composables/usePaths.ts
@@ -0,0 +1,48 @@
+/**
+ * 跨平台路径拼接助手。
+ *
+ * 前端仅用于「预览」派生路径，实际创建目录由后端完成。为了与后端
+ * PathUtils.joinPath 的行为保持一致，这里统一：
+ *  - 将反斜杠 \ 归一化为正斜杠 /
+ *  - 去除父路径末尾多余的分隔符
+ *  - 去除子路径开头多余的分隔符
+ *  - 以单个 / 连接
+ *
+ * 注意：这只是显示层的规范化，不做真实文件系统解析。
+ */
+
+/** 归一化根路径：转 POSIX 分隔符并去掉结尾斜杠。 */
+export function normalizeRoot(raw: string): string {
+  if (!raw) {
+    return '';
+  }
+  return raw.replace(/\\/g, '/').replace(/\/+$/, '');
+}
+
+/** 以规范化方式拼接父/子路径，返回 POSIX 形式字符串。 */
+export function joinPath(parent: string, child: string): string {
+  const parentPosix = normalizeRoot(parent);
+  if (!parentPosix) {
+    return child ? child.replace(/\\/g, '/') : '';
+  }
+  if (!child) {
+    return parentPosix;
+  }
+  const childPosix = child.replace(/\\/g, '/').replace(/^\/+/, '');
+  return `${parentPosix}/${childPosix}`;
+}
+
+/**
+ * 校验路径是否合法（与后端 PathUtils.isValidPath 对齐）。
+ * Windows 盘符后的冒号是合法的，其余情况下不允许出现 < > " | ? *。
+ */
+export function isValidPath(path: string): boolean {
+  if (!path || !path.trim()) {
+    return false;
+  }
+  let pathToValidate = path.trim();
+  if (/^[A-Za-z]:[/\\]/.test(pathToValidate)) {
+    pathToValidate = pathToValidate.substring(2);
+  }
+  return !/[<>"|?*]/.test(pathToValidate);
+}
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 47f5435..dc87128 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -1,67 +1,172 @@
+/*
+ * MangTool 暗色控制台主题。
+ *
+ * 使用本地 CSS 变量构建视觉系统（slate/emerald），并对 Element Plus 的
+ * 控件 token 做暗色适配。尽量减少大范围 !important 覆盖：仅在 Element Plus
+ * 通过内联变量/较高权重选择器时才使用。
+ */
+
 :root {
-  --brand-50: #f0fdfa;
-  --brand-100: #ccfbf1;
-  --brand-200: #99f6e4;
-  --brand-500: #14b8a6;
-  --brand-600: #0d9488;
-  --brand-700: #0f766e;
-  --ink-900: #0f172a;
-  --ink-700: #334155;
-  --ink-500: #64748b;
+  /* 背景层级 */
+  --c-bg-root: #020617;      /* slate-950 */
+  --c-bg-panel: #0f172a;     /* slate-900 */
+  --c-bg-panel-soft: rgba(15, 23, 42, 0.8);
+  --c-bg-elevated: #1e293b;  /* slate-800 */
+  --c-bg-inset: #020617;
+  --c-bg-hover: #334155;
 
-  --el-color-primary: var(--brand-600);
-  --el-color-primary-light-3: #2fb9ae;
-  --el-color-primary-light-5: #5ac7bf;
-  --el-color-primary-light-7: #8ad9d3;
-  --el-color-primary-light-8: #a9e5e1;
-  --el-color-primary-light-9: #daf4f2;
-  --el-color-primary-dark-2: #0c857a;
+  /* 边框 */
+  --c-border: #1e293b;       /* slate-800 */
+  --c-border-soft: rgba(148, 163, 184, 0.14);
+  --c-border-strong: #334155;
 
-  --el-bg-color: rgba(255, 255, 255, 0.92);
-  --el-bg-color-page: #f3f7fb;
-  --el-text-color-primary: var(--ink-900);
-  --el-text-color-regular: var(--ink-700);
-  --el-text-color-secondary: var(--ink-500);
-  --el-border-color: #d6dee8;
-  --el-border-color-light: #e5ebf2;
-  --el-border-color-lighter: #edf2f7;
+  /* 文本 */
+  --c-text-primary: #f1f5f9; /* slate-100 */
+  --c-text-regular: #cbd5e1; /* slate-300 */
+  --c-text-secondary: #94a3b8; /* slate-400 */
+  --c-text-muted: #64748b;   /* slate-500 */
+  --c-text-faint: #475569;   /* slate-600 */
 
-  --el-border-radius-base: 12px;
-  --el-border-radius-small: 10px;
+  /* 主题色 */
+  --c-accent: #10b981;       /* emerald-500 */
+  --c-accent-strong: #059669;/* emerald-600 */
+  --c-accent-text: #34d399;  /* emerald-400 */
+  --c-teal: #14b8a6;
+
+  /* 语义色 */
+  --c-warning: #f59e0b;      /* amber-500 */
+  --c-warning-text: #fbbf24;
+  --c-error: #f43f5e;        /* rose-500 */
+  --c-error-text: #fb7185;
+  --c-purple: #a855f7;
+  --c-purple-text: #c084fc;
+  --c-info: #38bdf8;
+
+  --c-radius-lg: 14px;
+  --c-radius-md: 10px;
+  --c-radius-sm: 8px;
+
+  --c-mono: 'Fira Code', 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+
+  /* Element Plus 暗色 token 适配 */
+  --el-color-primary: var(--c-accent-strong);
+  --el-color-primary-light-3: #34d399;
+  --el-color-primary-light-5: #6ee7b7;
+  --el-color-primary-light-7: #a7f3d0;
+  --el-color-primary-light-8: #bbf7d0;
+  --el-color-primary-light-9: #12321f;
+  --el-color-primary-dark-2: #047857;
+
+  --el-bg-color: var(--c-bg-panel);
+  --el-bg-color-overlay: var(--c-bg-panel);
+  --el-bg-color-page: var(--c-bg-root);
+  --el-fill-color-blank: var(--c-bg-inset);
+  --el-fill-color-light: rgba(30, 41, 59, 0.6);
+  --el-fill-color-lighter: rgba(30, 41, 59, 0.4);
+
+  --el-text-color-primary: var(--c-text-primary);
+  --el-text-color-regular: var(--c-text-regular);
+  --el-text-color-secondary: var(--c-text-secondary);
+  --el-text-color-placeholder: var(--c-text-muted);
+  --el-text-color-disabled: var(--c-text-faint);
+
+  --el-border-color: var(--c-border-strong);
+  --el-border-color-light: var(--c-border);
+  --el-border-color-lighter: var(--c-border);
+  --el-border-color-extra-light: var(--c-border);
+  --el-border-color-hover: var(--c-border-strong);
+
+  --el-border-radius-base: 10px;
+  --el-border-radius-small: 8px;
+
+  --el-color-success: var(--c-accent);
+  --el-color-warning: var(--c-warning);
+  --el-color-danger: var(--c-error);
+  --el-color-error: var(--c-error);
+  --el-color-info: var(--c-text-secondary);
+
+  color-scheme: dark;
+}
+
+html,
+body {
+  background: var(--c-bg-root);
 }
 
 body {
-  color: var(--ink-900);
-  font-family: 'Avenir Next', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+  color: var(--c-text-primary);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 #app {
   isolation: isolate;
 }
 
-.el-card {
-  border: 1px solid rgba(148, 163, 184, 0.24) !important;
-  box-shadow: 0 20px 40px -36px rgba(15, 23, 42, 0.5) !important;
-  background: rgba(255, 255, 255, 0.88) !important;
-}
-
-.el-card:hover {
-  box-shadow: 0 26px 48px -36px rgba(15, 23, 42, 0.56) !important;
-}
-
-.el-button--primary {
-  background: linear-gradient(120deg, #0d9488, #0e7490) !important;
-  border-color: transparent !important;
-}
-
-.el-button--primary:hover {
-  opacity: 0.93;
-}
-
+/* Element Plus 暗色控件适配（局部、克制的覆盖） */
 .el-input__wrapper,
-.el-textarea__inner,
-.el-select__wrapper {
-  background-color: rgba(255, 255, 255, 0.82) !important;
+.el-textarea__inner {
+  background-color: var(--c-bg-inset) !important;
+  box-shadow: 0 0 0 1px var(--c-border) inset !important;
+}
+
+.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px var(--c-border-strong) inset !important;
+}
+
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px var(--c-accent) inset !important;
+}
+
+.el-input__inner {
+  color: var(--c-text-primary);
+}
+
+.el-input.is-disabled .el-input__wrapper {
+  background-color: rgba(2, 6, 23, 0.6) !important;
+}
+
+/* 消息 / 通知（渲染在 body 层，需全局暗色样式） */
+.el-message {
+  background-color: var(--c-bg-panel) !important;
+  border-color: var(--c-border) !important;
+}
+
+.el-message .el-message__content {
+  color: var(--c-text-regular) !important;
+}
+
+/* 滚动条 */
+.c-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
+}
+
+.c-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.c-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.c-scroll::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.24);
+  border-radius: 6px;
+}
+
+.c-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 185, 129, 0.42);
+}
+
+/* 键盘可达性：统一可见焦点环 */
+:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
 }
 
 @media (prefers-reduced-motion: reduce) {