From 12b7e3178324ebfddbea50f41807ad9fe322dd4b Mon Sep 17 00:00:00 2001
From: mangmang <362165265@qq.com>
Date: Sun, 19 Jul 2026 19:49:05 +0800
Subject: [PATCH] Complete frontend console redesign

---
 frontend/src/App.vue                       |   15 +-
 frontend/src/components/IngestTab.vue      |   72 +-
 frontend/src/components/SettingsTab.vue    | 1020 ++++++++++++++++----
 frontend/src/components/common/AppIcon.vue |   19 +-
 frontend/src/composables/useAppState.ts    |  127 ++-
 frontend/src/composables/usePaths.ts       |   44 +-
 frontend/src/styles/theme.css              |   14 +
 7 files changed, 1097 insertions(+), 214 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index fc15845..8e9555f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -13,7 +13,7 @@
         aria-label="切换导航菜单"
         @click="drawerOpen = !drawerOpen"
       >
-        <app-icon :name="drawerOpen ? 'reject' : 'chart'" :size="18" />
+        <app-icon :name="drawerOpen ? 'close' : 'menu'" :size="18" />
       </button>
     </div>
 
@@ -159,7 +159,14 @@ const drawerOpen = ref(false);
 const activeMeta = computed(() => navMap[activeKey.value] ?? navItems[0]);
 const currentComponent = computed(() => activeMeta.value.component);
 
-const { state: appState, refreshConfig, startHealthPolling, stopHealthPolling } = useAppState();
+const {
+  state: appState,
+  refreshConfig,
+  startHealthPolling,
+  stopHealthPolling,
+  startIngestStatusSync,
+  stopIngestStatusSync
+} = useAppState();
 
 const rootPathDisplay = computed(() => appState.config.basePath || '未配置工作根目录');
 
@@ -182,6 +189,8 @@ function selectNav(key: NavKey) {
 
 onMounted(() => {
   startHealthPolling();
+  // 外壳持有导入任务状态同步：离开导入页后仍能如实更新导航指示灯。
+  startIngestStatusSync();
   // 顶部条与侧边栏需要真实 basePath，主动拉取一次（各面板也会各自刷新）。
   void refreshConfig().catch(() => {
     /* 配置加载失败不阻塞外壳渲染，各面板会显示未配置状态 */
@@ -190,6 +199,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   stopHealthPolling();
+  stopIngestStatusSync();
 });
 </script>
 
@@ -197,6 +207,7 @@ onUnmounted(() => {
 .console-shell {
   display: flex;
   width: 100%;
+  max-width: 100vw;
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
diff --git a/frontend/src/components/IngestTab.vue b/frontend/src/components/IngestTab.vue
index 4003180..426e9cc 100644
--- a/frontend/src/components/IngestTab.vue
+++ b/frontend/src/components/IngestTab.vue
@@ -115,7 +115,7 @@
               :disabled="!canStart"
               @click="startIngest"
             >
-              <app-icon name="play" :size="16" filled />
+              <app-icon name="play" :size="16" :filled="true" />
               <span>执行一键入库</span>
             </button>
             <button
@@ -288,14 +288,21 @@
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import AppIcon from './common/AppIcon.vue';
-import { getConfig } 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 { useAppState } from '../composables/useAppState';
 
-const { state: appState, isConfigured, refreshConfig, setIngestRunning, setIngestPercentage } = useAppState();
+const {
+  state: appState,
+  isConfigured,
+  refreshConfig,
+  setIngestRunning,
+  setIngestPercentage,
+  claimIngestViewOwnership,
+  releaseIngestViewOwnership
+} = useAppState();
 
 const submitting = ref(false);
 const configLoading = ref(false);
@@ -330,10 +337,12 @@ const percentage = computed(() => {
   return Math.min(100, Math.round((progress.processed / progress.total) * 100));
 });
 
-/** 被拒绝类别之和（不含已入库）。 */
+/**
+ * 被拒绝类别之和（不含已入库、不含重复跳过）。
+ * 重复文件是设计上的跳过，不计入拒绝/部分失败。
+ */
 const totalRejected = computed(() =>
-  (progress.duplicateFiles ?? 0)
-  + (progress.missingMetadataFiles ?? 0)
+  (progress.missingMetadataFiles ?? 0)
   + (progress.unreadableFiles ?? 0)
   + (progress.conversionFailedFiles ?? 0)
   + (progress.otherRejectedFiles ?? 0)
@@ -393,7 +402,11 @@ const resultText = computed(() => {
   if (totalRejected.value > 0) {
     return `导入完成：成功入库 ${progress.ingestedFiles ?? 0} 首，${totalRejected.value} 首被拒绝`;
   }
-  return `导入完成：全部 ${progress.processed ?? 0} 首成功入库`;
+  const dups = progress.duplicateFiles ?? 0;
+  if (dups > 0) {
+    return `导入完成：成功入库 ${progress.ingestedFiles ?? 0} 首，${dups} 首重复跳过`;
+  }
+  return `导入完成：全部 ${progress.ingestedFiles ?? progress.processed ?? 0} 首成功入库`;
 });
 
 /* ---------------- 活动记录（仅由真实状态转移构建） ---------------- */
@@ -439,9 +452,20 @@ function classifyLevel(msg: ProgressMessage): { level: ActivityLevel; badge: str
   if (text.includes('损坏') || text.includes('不可读') || text.includes('转码失败')) {
     return { level: 'error', badge: '[错误]' };
   }
+  // 重复/跳过按设计是警告级事件记录，但不计入完成态「拒绝」统计。
   if (text.includes('重复') || text.includes('跳过') || text.includes('缺') || text.includes('拒绝')) {
     return { level: 'warning', badge: '[警告]' };
   }
+  if (msg.completed) {
+    // 完成分类仅看真实拒绝类别，不含 duplicateFiles。
+    const rejected =
+      (msg.missingMetadataFiles ?? 0)
+      + (msg.unreadableFiles ?? 0)
+      + (msg.conversionFailedFiles ?? 0)
+      + (msg.otherRejectedFiles ?? 0);
+    if (rejected > 0) return { level: 'warning', badge: '[部分]' };
+    return { level: 'normal', badge: '[完成]' };
+  }
   return { level: 'normal', badge: '[进行]' };
 }
 
@@ -678,6 +702,9 @@ async function copyPath(text: string) {
 /* ---------------- 生命周期 ---------------- */
 
 onMounted(async () => {
+  // 接管细粒度进度源，暂停外壳后台监视（避免双重 HTTP 轮询）。
+  claimIngestViewOwnership();
+
   // 若外壳尚未加载配置，则此处兜底加载真值。
   if (!appState.config.attempted) {
     await reloadConfig();
@@ -688,8 +715,8 @@ onMounted(async () => {
 onUnmounted(() => {
   wsDisconnect();
   stopPolling();
-  // 组件卸载不代表任务停止，但本视图不再持有运行指示。
-  setIngestRunning(false);
+  // 交还所有权：若任务仍在跑，由外壳后台监视继续同步真实完成态。
+  releaseIngestViewOwnership(submitting.value);
 });
 </script>
 
@@ -1476,5 +1503,32 @@ onUnmounted(() => {
   .stats-secondary {
     grid-template-columns: 1fr;
   }
+
+  .console-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .filter-group {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 390px) {
+  .ingest-view {
+    gap: 14px;
+  }
+
+  .panel {
+    padding: 14px;
+  }
+
+  .stat-num {
+    font-size: 16px;
+  }
+
+  .log-line {
+    flex-wrap: wrap;
+  }
 }
 </style>
diff --git a/frontend/src/components/SettingsTab.vue b/frontend/src/components/SettingsTab.vue
index 761ee52..c9046a8 100644
--- a/frontend/src/components/SettingsTab.vue
+++ b/frontend/src/components/SettingsTab.vue
@@ -1,250 +1,880 @@
 <template>
-  <el-card class="settings-root">
-    <template #header>
-      <task-card-header :icon="Setting" title="全局路径配置" />
-    </template>
-    <el-form label-width="140px">
-      <el-form-item label="工作根目录 (BasePath)" required>
-        <el-input
-          v-model="basePath"
-          placeholder="例如：D:/MusicWork 或 /home/user/MusicWork"
-          clearable
+  <div class="settings-view">
+    <section class="page-intro">
+      <h3 class="page-title">全局配置与路径设置</h3>
+      <p class="page-desc">
+        规划底层工作区的挂载主根目录，并对各子通道所派生的标准管道路径进行集中管控。
+      </p>
+    </section>
+
+    <!-- 基础挂载 -->
+    <section class="panel">
+      <div class="panel-head">
+        <app-icon name="gear" :size="16" class="panel-head-icon" />
+        <h4 class="panel-head-title">基础挂载中心</h4>
+        <span v-if="isDirty" class="dirty-badge">未保存</span>
+      </div>
+
+      <div class="field-block">
+        <div class="field-label-row">
+          <label class="field-label" for="basepath-input">
+            工作根目录 (BASEPATH) <span class="req">*</span>
+          </label>
+          <span class="field-hint-mono">双向实时更新</span>
+        </div>
+
+        <div class="field-row">
+          <div class="input-wrap">
+            <app-icon name="folder" :size="16" class="input-icon" />
+            <input
+              id="basepath-input"
+              v-model="draftPath"
+              type="text"
+              class="path-input"
+              placeholder="例如：/home/user/MusicWork 或 D:/MusicWork"
+              :disabled="saving || loading"
+              autocomplete="off"
+              spellcheck="false"
+              @keydown.enter.prevent="save"
+            />
+          </div>
+          <button
+            type="button"
+            class="btn btn-secondary"
+            :disabled="saving || loading || !hasLoadedSnapshot"
+            title="恢复为最近一次从后端加载的配置"
+            @click="restoreLoaded"
+          >
+            恢复已加载
+          </button>
+        </div>
+
+        <p v-if="validationError" class="field-error">{{ validationError }}</p>
+      </div>
+    </section>
+
+    <!-- 管道流向 -->
+    <section class="panel">
+      <div class="panel-head">
+        <app-icon name="pipeline" :size="16" class="panel-head-icon" />
+        <h4 class="panel-head-title">数据管道数据流向模型</h4>
+        <span class="pipe-badge">Active Pipe</span>
+      </div>
+
+      <div class="flow-map">
+        <div class="flow-node">
+          <span class="flow-node-title">1. 待整入 Input</span>
+          <span class="flow-node-sub">外部待理音频</span>
+        </div>
+        <span class="flow-arrow" aria-hidden="true">→</span>
+        <div class="flow-node">
+          <span class="flow-node-title tone-ok">2. 校验 / 转码 / 去重</span>
+          <span class="flow-node-sub">完整性与指纹</span>
+        </div>
+        <span class="flow-arrow" aria-hidden="true">→</span>
+        <div class="flow-node tone-lib">
+          <span class="flow-node-title tone-ok">3. 归档 Library</span>
+          <span class="flow-node-sub">高保真规整库</span>
+        </div>
+        <span class="flow-slash" aria-hidden="true">/</span>
+        <div class="flow-node tone-rej">
+          <span class="flow-node-title tone-err">4. 废品 Rejected</span>
+          <span class="flow-node-sub">破损 / 缺元数据</span>
+        </div>
+      </div>
+
+      <!-- 简化模型 -->
+      <div class="preview-block">
+        <span class="preview-label">衍生工作子存储节点（简化模型）</span>
+        <div class="preview-list">
+          <div class="preview-row">
+            <span class="preview-key">Input</span>
+            <span class="preview-val selectable" :title="preview.input || '未配置'">
+              {{ preview.input || '未配置' }}
+            </span>
+          </div>
+          <div class="preview-row">
+            <span class="preview-key">Library</span>
+            <span class="preview-val selectable" :title="preview.library || '未配置'">
+              {{ preview.library || '未配置' }}
+            </span>
+          </div>
+          <div class="preview-row">
+            <span class="preview-key">Rejected</span>
+            <span class="preview-val selectable" :title="preview.rejected || '未配置'">
+              {{ preview.rejected || '未配置' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 旧版兼容 -->
+      <div class="preview-block">
+        <div class="preview-label-row">
+          <span class="preview-label">派生子存储路径（旧版向后兼容）</span>
+          <span class="compat-badge">COMPAT</span>
+        </div>
+        <div class="preview-list legacy">
+          <div
+            v-for="item in legacyPreview"
+            :key="item.key"
+            class="preview-row legacy-row"
+          >
+            <div class="legacy-name">
+              <span class="preview-key-lg">{{ item.name }}</span>
+              <span class="legacy-tag" :class="item.tagTone">{{ item.tag }}</span>
+            </div>
+            <span class="preview-val selectable" :title="item.path || '未配置'">
+              {{ item.path || '未配置' }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 底部操作 -->
+    <div class="footer-bar">
+      <span class="footer-hint">更改会在下一次「一键执行入库」时全局生效。</span>
+      <div class="footer-actions">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          :disabled="loading || saving"
+          @click="loadConfig"
         >
-          <template #prefix>
-            <el-icon><Folder /></el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :loading="saving" @click="save" size="default">
-          <el-icon v-if="!saving"><Check /></el-icon>
-          <span style="margin-left: 4px">{{ saving ? '保存中...' : '保存配置' }}</span>
-        </el-button>
-        <el-button @click="loadConfig" size="default" style="margin-left: 8px">
-          <el-icon><Refresh /></el-icon>
-          <span style="margin-left: 4px">刷新</span>
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-divider />
-
-    <h4 class="preview-title">派生目录预览（简化模型）</h4>
-    <el-descriptions :column="1" size="small" border>
-      <el-descriptions-item label="Input">
-        <span class="path-text">{{ preview.input || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Library">
-        <span class="path-text">{{ preview.library || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Rejected">
-        <span class="path-text">{{ preview.rejected || '未配置' }}</span>
-      </el-descriptions-item>
-    </el-descriptions>
-
-    <el-divider />
-
-    <h4 class="preview-title">派生目录预览（旧版，向后兼容）</h4>
-    <el-descriptions :column="1" size="small" border>
-      <el-descriptions-item label="Input (SRC_ACC_DIR)">
-        <span class="path-text">{{ preview.input || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Staging_Aggregated (DST_ACC_DIR)">
-        <span class="path-text">{{ preview.aggregated || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Staging_Format_Issues (DST_CONV_ISSUE)">
-        <span class="path-text">{{ preview.formatIssues || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Staging_Duplicates (DST_DEDUP_TRASH)">
-        <span class="path-text">{{ preview.duplicates || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Staging_T2S_Output (DST_ZH_CONV)">
-        <span class="path-text">{{ preview.zhOutput || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Staging_Organized (DST_ORG_DIR)">
-        <span class="path-text">{{ preview.organized || '未配置' }}</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="Library_Final (DST_LIB_FINAL)">
-        <span class="path-text">{{ preview.libraryFinal || '未配置' }}</span>
-      </el-descriptions-item>
-    </el-descriptions>
-
-    <!-- 消息提示 -->
-    <div v-if="message.text" class="message-section">
-      <el-alert
-        :type="message.type"
-        :closable="true"
-        show-icon
-        @close="message.text = ''"
-      >
-        <template #title>
-          <span>{{ message.text }}</span>
-        </template>
-      </el-alert>
+          <app-icon name="refresh" :size="14" :class="{ spin: loading }" />
+          <span>{{ loading ? '加载中…' : '重新加载' }}</span>
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          :disabled="!canSave"
+          @click="save"
+        >
+          <app-icon v-if="!saving" name="check" :size="16" />
+          <app-icon v-else name="refresh" :size="16" class="spin" />
+          <span>{{ saving ? '保存中…' : '保存全局配置' }}</span>
+        </button>
+      </div>
     </div>
-  </el-card>
+
+    <p v-if="statusMessage" class="status-line" :class="'status-' + statusType">
+      {{ statusMessage }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { ElMessage } from 'element-plus';
-import { Setting, Folder, Check, Refresh } from '@element-plus/icons-vue';
+import AppIcon from './common/AppIcon.vue';
 import { saveBasePath, getConfig } from '../api/config';
-import TaskCardHeader from './common/TaskCardHeader.vue';
+import type { ConfigResponse } from '../api/config';
+import { isValidPath, joinPath, normalizeRoot } from '../composables/usePaths';
+import { useAppState } from '../composables/useAppState';
+
+const { refreshConfig } = useAppState();
+
+/** 本地编辑草稿（用户输入）。 */
+const draftPath = ref('');
+/** 最近一次从后端成功加载的路径，用于「恢复已加载」。 */
+const loadedPath = ref('');
+/** 最近一次成功加载的完整配置（用于预览优先展示后端真值）。 */
+const loadedConfig = ref<ConfigResponse | null>(null);
+const hasLoadedSnapshot = ref(false);
 
-const basePath = ref('');
 const saving = ref(false);
 const loading = ref(false);
-const message = ref<{ text: string; type: 'success' | 'error' | 'warning' | 'info' }>({
-  text: '',
-  type: 'info'
-});
+const statusMessage = ref('');
+const statusType = ref<'success' | 'error' | 'info'>('info');
 
-const preview = computed(() => {
-  const root = basePath.value.replace(/\\/g, '/').replace(/\/+$/, '');
-  if (!root) {
-    return {
-      input: '',
-      aggregated: '',
-      library: '',
-      rejected: '',
-      formatIssues: '',
-      duplicates: '',
-      zhOutput: '',
-      organized: '',
-      libraryFinal: ''
-    };
+const normalizedDraft = computed(() => normalizeRoot(draftPath.value.trim()));
+
+const isDirty = computed(() => {
+  if (!hasLoadedSnapshot.value) {
+    return !!draftPath.value.trim();
   }
-  return {
-    input: `${root}/Input`,
-    aggregated: `${root}/Staging_Aggregated`,
-    library: `${root}/Library`,
-    rejected: `${root}/Rejected`,
-    formatIssues: `${root}/Staging_Format_Issues`,
-    duplicates: `${root}/Staging_Duplicates`,
-    zhOutput: `${root}/Staging_T2S_Output`,
-    organized: `${root}/Staging_Organized`,
-    libraryFinal: `${root}/Library_Final`
-  };
+  return normalizeRoot(loadedPath.value) !== normalizedDraft.value;
 });
 
 /**
- * 验证路径是否合法
- * 根据文档08的要求，Windows路径中的冒号（:）在盘符后是合法的
+ * 草稿与最近加载配置一致时，预览优先使用后端返回的派生路径；
+ * 未保存的本地编辑则用规范化 join 生成预览。
  */
-function validatePath(path: string): boolean {
-  if (!path || !path.trim()) {
-    return false;
-  }
+const useBackendDerived = computed(
+  () =>
+    !isDirty.value
+    && !!loadedConfig.value
+    && !!loadedConfig.value.basePath
+    && normalizeRoot(loadedConfig.value.basePath) === normalizedDraft.value
+);
 
-  // 提取路径中需要验证的部分
-  let pathToValidate = path.trim();
-  
-  // 如果是Windows路径（如 C:\ 或 C:/），移除盘符部分
-  if (pathToValidate.match(/^[A-Za-z]:[/\\]/)) {
-    pathToValidate = pathToValidate.substring(2);
+const validationError = computed(() => {
+  const raw = draftPath.value.trim();
+  if (!raw) return '';
+  if (!isValidPath(raw)) {
+    return '路径包含非法字符（不允许 < > " | ? *），Windows 盘符后的冒号除外';
   }
+  return '';
+});
 
-  // 检查是否包含非法字符：< > " | ? *
-  // 注意：冒号（:）在Windows盘符后是合法的，已在上一步移除
-  const invalidChars = /[<>"|?*]/;
-  if (invalidChars.test(pathToValidate)) {
-    return false;
+const canSave = computed(
+  () =>
+    !saving.value
+    && !loading.value
+    && !!draftPath.value.trim()
+    && !validationError.value
+    && isDirty.value
+);
+
+const preview = computed(() => {
+  if (useBackendDerived.value && loadedConfig.value) {
+    const cfg = loadedConfig.value;
+    return {
+      input: cfg.inputDir || '',
+      library: cfg.libraryDir || '',
+      rejected: cfg.rejectedDir || ''
+    };
   }
+  const root = normalizedDraft.value;
+  if (!root) {
+    return { input: '', library: '', rejected: '' };
+  }
+  return {
+    input: joinPath(root, 'Input'),
+    library: joinPath(root, 'Library'),
+    rejected: joinPath(root, 'Rejected')
+  };
+});
 
-  return true;
+const legacyPreview = computed(() => {
+  if (useBackendDerived.value && loadedConfig.value) {
+    const cfg = loadedConfig.value;
+    return [
+      { key: 'src', name: 'Input', tag: 'SRC_ACC_DIR', tagTone: 'tag-blue', path: cfg.inputDir || '' },
+      { key: 'agg', name: 'Staging_Aggregated', tag: 'DST_ACC_DIR', tagTone: '', path: cfg.aggregatedDir || '' },
+      { key: 'conv', name: 'Staging_Format_Issues', tag: 'DST_CONV_ISSUE', tagTone: 'tag-amber', path: cfg.formatIssuesDir || '' },
+      { key: 'dup', name: 'Staging_Duplicates', tag: 'DST_DEDUP_TRASH', tagTone: '', path: cfg.duplicatesDir || '' },
+      { key: 'zh', name: 'Staging_T2S_Output', tag: 'DST_ZH_CONV', tagTone: 'tag-teal', path: cfg.zhOutputDir || '' },
+      { key: 'org', name: 'Staging_Organized', tag: 'DST_ORG_DIR', tagTone: '', path: cfg.organizedDir || '' },
+      { key: 'final', name: 'Library_Final', tag: 'DST_LIB_FINAL', tagTone: 'tag-ok', path: cfg.libraryFinalDir || '' }
+    ];
+  }
+  const root = normalizedDraft.value;
+  const p = (child: string) => (root ? joinPath(root, child) : '');
+  return [
+    { key: 'src', name: 'Input', tag: 'SRC_ACC_DIR', tagTone: 'tag-blue', path: p('Input') },
+    { key: 'agg', name: 'Staging_Aggregated', tag: 'DST_ACC_DIR', tagTone: '', path: p('Staging_Aggregated') },
+    { key: 'conv', name: 'Staging_Format_Issues', tag: 'DST_CONV_ISSUE', tagTone: 'tag-amber', path: p('Staging_Format_Issues') },
+    { key: 'dup', name: 'Staging_Duplicates', tag: 'DST_DEDUP_TRASH', tagTone: '', path: p('Staging_Duplicates') },
+    { key: 'zh', name: 'Staging_T2S_Output', tag: 'DST_ZH_CONV', tagTone: 'tag-teal', path: p('Staging_T2S_Output') },
+    { key: 'org', name: 'Staging_Organized', tag: 'DST_ORG_DIR', tagTone: '', path: p('Staging_Organized') },
+    { key: 'final', name: 'Library_Final', tag: 'DST_LIB_FINAL', tagTone: 'tag-ok', path: p('Library_Final') }
+  ];
+});
+
+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 save() {
-  const pathToSave = basePath.value.trim();
-  
-  if (!pathToSave) {
-    message.value = { text: '请输入工作根目录', type: 'warning' };
-    return;
-  }
+function setStatus(text: string, type: 'success' | 'error' | 'info') {
+  statusMessage.value = text;
+  statusType.value = type;
+}
 
-  // 验证路径
-  if (!validatePath(pathToSave)) {
-    message.value = { text: '路径包含非法字符，请检查', type: 'error' };
-    return;
-  }
+function applyLoaded(config: ConfigResponse | null, fallbackBase = '') {
+  const base = config?.basePath || fallbackBase;
+  const normalized = normalizeRoot(base);
+  draftPath.value = normalized;
+  loadedPath.value = normalized;
+  loadedConfig.value = config;
+  hasLoadedSnapshot.value = true;
+}
 
-  saving.value = true;
-  message.value = { text: '', type: 'info' };
-
-  try {
-    // 确保路径使用平台无关的表示方式，统一使用 / 作为分隔符
-    const normalizedRoot = pathToSave.replace(/\\/g, '/');
-    
-    await saveBasePath({ basePath: normalizedRoot });
-    
-    message.value = { text: '配置保存成功！所有子目录已自动创建', type: 'success' };
-    ElMessage.success('配置保存成功');
-    
-    // 重新加载配置以更新预览
-    await loadConfig();
-  } catch (error: any) {
-    message.value = { 
-      text: error.message || '保存配置失败，请检查路径是否正确', 
-      type: 'error' 
-    };
-  } finally {
-    saving.value = false;
-  }
+function restoreLoaded() {
+  if (!hasLoadedSnapshot.value) return;
+  draftPath.value = loadedPath.value;
+  setStatus('已恢复为最近一次从后端加载的配置', 'info');
 }
 
 async function loadConfig() {
   loading.value = true;
-  message.value = { text: '', type: 'info' };
-
+  setStatus('', 'info');
   try {
     const config = await getConfig();
     if (config && config.basePath) {
-      basePath.value = config.basePath;
-      message.value = { text: '配置加载成功', type: 'success' };
+      applyLoaded(config);
+      // 同步外壳共享状态
+      await refreshConfig().catch(() => {
+        /* 共享状态刷新失败不阻塞本地展示 */
+      });
+      setStatus('配置加载成功', 'success');
     } else {
-      basePath.value = '';
-      message.value = { text: '未找到已保存的配置', type: 'info' };
+      draftPath.value = '';
+      loadedPath.value = '';
+      loadedConfig.value = null;
+      hasLoadedSnapshot.value = true;
+      setStatus('未找到已保存的配置', 'info');
     }
-  } catch (error: any) {
-    message.value = { 
-      text: error.message || '加载配置失败', 
-      type: 'error' 
-    };
+  } catch (e: unknown) {
+    setStatus(extractError(e, '加载配置失败'), 'error');
   } finally {
     loading.value = false;
   }
 }
 
-// 页面加载时自动获取配置
+async function save() {
+  if (!canSave.value) return;
+
+  const pathToSave = draftPath.value.trim();
+  if (!pathToSave) {
+    setStatus('请输入工作根目录', 'error');
+    return;
+  }
+  if (!isValidPath(pathToSave)) {
+    setStatus('路径包含非法字符，请检查', 'error');
+    return;
+  }
+
+  saving.value = true;
+  setStatus('', 'info');
+
+  // 失败时保留用户输入：不在 try 中改 draftPath。
+  const normalizedRoot = normalizeRoot(pathToSave);
+
+  try {
+    await saveBasePath({ basePath: normalizedRoot });
+    ElMessage.success('配置保存成功');
+    setStatus('配置保存成功，所有子目录已自动创建', 'success');
+
+    // 成功后重新拉取后端真值（而非硬编码默认）
+    try {
+      const config = await getConfig();
+      if (config && config.basePath) {
+        applyLoaded(config);
+      } else {
+        applyLoaded(null, normalizedRoot);
+      }
+      await refreshConfig().catch(() => {
+        /* 外壳状态刷新失败不阻塞 */
+      });
+    } catch {
+      // 保存已成功，仅刷新失败时仍以本地规范化路径作为已加载快照
+      applyLoaded(null, normalizedRoot);
+    }
+  } catch (e: unknown) {
+    // 保留 draftPath，仅提示错误
+    setStatus(extractError(e, '保存配置失败，请检查路径是否正确'), 'error');
+    ElMessage.error(extractError(e, '保存配置失败'));
+  } finally {
+    saving.value = false;
+  }
+}
+
 onMounted(() => {
-  loadConfig();
+  void loadConfig();
 });
 </script>
 
 <style scoped>
-@import '../styles/panel-shared.css';
-
-.settings-root {
-  max-width: 800px;
+.settings-view {
+  max-width: 880px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.preview-title {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  color: var(--el-text-color-primary);
+.page-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.path-text {
-  font-family: 'Courier New', monospace;
+.page-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.page-desc {
+  margin: 0;
   font-size: 12px;
-  color: var(--el-text-color-regular);
-  word-break: break-all;
+  line-height: 1.55;
+  color: var(--c-text-secondary);
 }
 
-.message-section {
-  margin-top: 20px;
+.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);
+  flex-shrink: 0;
+}
+
+.panel-head-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-text-regular);
+}
+
+.dirty-badge {
+  margin-left: auto;
+  padding: 2px 8px;
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: 6px;
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--c-warning-text);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.pipe-badge {
+  margin-left: auto;
+  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-family: var(--c-mono);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.field-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.field-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--c-text-muted);
+}
+
+.req {
+  color: var(--c-error-text);
+}
+
+.field-hint-mono {
+  font-family: var(--c-mono);
+  font-size: 9px;
+  color: var(--c-text-muted);
+}
+
+.field-row {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.input-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.input-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--c-text-muted);
+  pointer-events: none;
+}
+
+.path-input {
+  width: 100%;
+  padding: 10px 12px 10px 38px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: var(--c-bg-inset);
+  color: var(--c-text-primary);
+  font-family: var(--c-mono);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.path-input:hover:not(:disabled) {
+  border-color: var(--c-border-strong);
+}
+
+.path-input:focus {
+  border-color: var(--c-accent);
+}
+
+.path-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.field-error {
+  margin: 0;
+  font-size: 11px;
+  color: var(--c-error-text);
+}
+
+/* ---------- 流向 ---------- */
+.flow-map {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px;
+  margin-bottom: 18px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-md);
+  background: var(--c-bg-inset);
+}
+
+.flow-node {
+  width: 118px;
+  flex-shrink: 0;
+  padding: 10px 8px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: var(--c-bg-panel);
+  text-align: center;
+}
+
+.flow-node.tone-lib {
+  border-color: rgba(16, 185, 129, 0.25);
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.flow-node.tone-rej {
+  border-color: rgba(244, 63, 94, 0.25);
+  background: rgba(244, 63, 94, 0.08);
+}
+
+.flow-node-title {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--c-text-regular);
+}
+
+.flow-node-title.tone-ok {
+  color: var(--c-accent-text);
+}
+
+.flow-node-title.tone-err {
+  color: var(--c-error-text);
+}
+
+.flow-node-sub {
+  display: block;
+  font-size: 9px;
+  color: var(--c-text-muted);
+}
+
+.flow-arrow,
+.flow-slash {
+  flex-shrink: 0;
+  color: var(--c-text-faint);
+  font-weight: 700;
+  font-size: 14px;
+}
+
+/* ---------- 预览列表 ---------- */
+.preview-block {
+  margin-top: 16px;
+}
+
+.preview-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.preview-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--c-text-muted);
+}
+
+.preview-label-row .preview-label {
+  margin-bottom: 0;
+}
+
+.compat-badge {
+  padding: 1px 6px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: 4px;
+  background: var(--c-bg-elevated);
+  color: var(--c-text-muted);
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.preview-list {
+  border: 1px solid var(--c-border);
+  border-radius: var(--c-radius-sm);
+  background: var(--c-bg-inset);
+  padding: 12px 14px;
+}
+
+.preview-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(30, 41, 59, 0.55);
+  min-width: 0;
+}
+
+.preview-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.preview-row:first-child {
+  padding-top: 0;
+}
+
+.preview-key {
+  flex-shrink: 0;
+  width: 72px;
+  font-family: var(--c-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--c-text-secondary);
+}
+
+.preview-key-lg {
+  font-family: var(--c-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--c-text-regular);
+}
+
+.preview-val {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  font-family: var(--c-mono);
+  font-size: 11px;
+  color: var(--c-text-muted);
+}
+
+.selectable {
+  user-select: all;
+}
+
+.legacy-row {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+}
+
+.legacy-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.legacy .preview-val {
+  text-align: left;
+}
+
+.legacy-tag {
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--c-bg-elevated);
+  color: var(--c-text-muted);
+  font-family: sans-serif;
+  font-size: 8px;
+  font-weight: 700;
+}
+
+.legacy-tag.tag-blue {
+  color: #60a5fa;
+  background: rgba(59, 130, 246, 0.12);
+}
+
+.legacy-tag.tag-amber {
+  color: var(--c-warning-text);
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.legacy-tag.tag-teal {
+  color: #2dd4bf;
+  background: rgba(20, 184, 166, 0.12);
+}
+
+.legacy-tag.tag-ok {
+  color: var(--c-accent-text);
+  background: rgba(16, 185, 129, 0.12);
+}
+
+/* ---------- 底部 ---------- */
+.footer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-top: 4px;
+  border-top: 1px solid var(--c-border);
+}
+
+.footer-hint {
+  font-size: 11px;
+  color: var(--c-text-muted);
+}
+
+.footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px 14px;
+  border: 1px solid transparent;
+  border-radius: var(--c-radius-sm);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  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-secondary {
+  color: var(--c-text-regular);
+  background: var(--c-bg-elevated);
+  border-color: var(--c-border);
+  font-weight: 600;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  color: var(--c-text-primary);
+  border-color: var(--c-border-strong);
+}
+
+.status-line {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-success {
+  color: var(--c-accent-text);
+}
+
+.status-error {
+  color: var(--c-error-text);
+}
+
+.status-info {
+  color: var(--c-text-secondary);
+}
+
+@media (max-width: 720px) {
+  .field-row {
+    flex-direction: column;
+  }
+
+  .footer-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .footer-actions {
+    width: 100%;
+  }
+
+  .footer-actions .btn {
+    flex: 1;
+  }
+
+  .flow-arrow {
+    display: none;
+  }
+
+  .flow-map {
+    flex-direction: column;
+  }
+
+  .flow-node {
+    width: 100%;
+  }
+
+  .preview-row:not(.legacy-row) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .preview-val {
+    text-align: left;
+    width: 100%;
+  }
 }
 </style>
diff --git a/frontend/src/components/common/AppIcon.vue b/frontend/src/components/common/AppIcon.vue
index a21d000..52e4ec7 100644
--- a/frontend/src/components/common/AppIcon.vue
+++ b/frontend/src/components/common/AppIcon.vue
@@ -114,6 +114,12 @@ const ICONS: Record<string, IconDef> = {
     paths: [
       'M13 10V3L4 14h7v7l9-11h-7z'
     ]
+  },
+  menu: {
+    paths: ['M4 6h16M4 12h16M4 18h16']
+  },
+  close: {
+    paths: ['M6 18L18 6M6 6l12 12']
   }
 };
 
@@ -121,6 +127,8 @@ interface Props {
   name: keyof typeof ICONS | string;
   size?: number | string;
   strokeWidth?: number | string;
+  /** 覆盖图标定义：true 实心填充，false 描边。未传则使用图标内置定义。 */
+  filled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -131,13 +139,22 @@ const props = withDefaults(defineProps<Props>(), {
 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 filled = computed(() =>
+  typeof props.filled === 'boolean' ? props.filled : (def.value.filled ?? false)
+);
 const viewBox = computed(() => def.value.viewBox ?? '0 0 24 24');
+const sizePx = computed(() =>
+  typeof props.size === 'number' ? `${props.size}px` : String(props.size)
+);
 </script>
 
 <style scoped>
 .app-icon {
   display: block;
   flex-shrink: 0;
+  width: v-bind(sizePx);
+  height: v-bind(sizePx);
+  max-width: 48px;
+  max-height: 48px;
 }
 </style>
diff --git a/frontend/src/composables/useAppState.ts b/frontend/src/composables/useAppState.ts
index 7a0f5e2..0128b3f 100644
--- a/frontend/src/composables/useAppState.ts
+++ b/frontend/src/composables/useAppState.ts
@@ -2,6 +2,7 @@ import { computed, reactive } from 'vue';
 import { getHealth } from '../api/health';
 import { getConfig } from '../api/config';
 import type { ConfigResponse } from '../api/config';
+import { getIngestCurrentStatus } from '../api/ingest';
 
 /**
  * 轻量级全局状态：在应用外壳、一键导入、全局配置之间共享后端真实数据。
@@ -27,7 +28,7 @@ interface AppConfigState {
 interface AppState {
   health: HealthStatus;
   config: AppConfigState;
-  /** 导入任务是否正在运行（由一键导入面板依据真实任务状态写入）。 */
+  /** 导入任务是否正在运行（真实任务状态，外壳与导入页共享）。 */
   ingestRunning: boolean;
   /** 导入任务真实百分比（0-100）。 */
   ingestPercentage: number;
@@ -82,12 +83,18 @@ async function refreshConfig(): Promise<ConfigResponse | null> {
 
 function setIngestRunning(running: boolean): void {
   state.ingestRunning = running;
+  if (running) {
+    // 导入页或其它入口声明任务在跑时，确保外壳后台监视已启动。
+    ensureIngestBackgroundWatch();
+  }
 }
 
 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;
 
@@ -114,15 +121,131 @@ function stopHealthPolling(): void {
   }
 }
 
+/* ---------------- 导入任务后台状态同步（外壳持有，避免离开导入页后指示灯过期） ---------------- */
+
+/**
+ * 后台 HTTP 监视器：仅在导入页卸载且任务仍在跑时由外壳接管，
+ * 或应用启动时发现有进行中的任务。导入页挂载期间会 pause，
+ * 由导入页自己的 WS/轮询负责细粒度进度，避免双重轮询。
+ */
+let ingestBgTimer: ReturnType<typeof setInterval> | null = null;
+/** 导入页是否正持有细粒度进度源（挂载中）。为 true 时后台监视暂停。 */
+let ingestViewOwned = false;
+let ingestBgConsumers = 0;
+
+function applyIngestStatus(resp: {
+  running: boolean;
+  completed: boolean;
+  total: number;
+  processed: number;
+}): void {
+  state.ingestRunning = !!resp.running;
+  if (resp.completed) {
+    state.ingestPercentage = 100;
+  } else if (resp.total > 0) {
+    state.ingestPercentage = Math.min(
+      100,
+      Math.round((resp.processed / resp.total) * 100)
+    );
+  }
+}
+
+/**
+ * 拉取一次当前导入任务真值并更新外壳指示灯。
+ * 网络错误时不改写既有状态，避免误闪。
+ */
+async function refreshIngestStatus(): Promise<void> {
+  try {
+    const resp = await getIngestCurrentStatus();
+    if (!resp) {
+      state.ingestRunning = false;
+      stopIngestBackgroundWatch();
+      return;
+    }
+    applyIngestStatus(resp);
+    if (resp.running) {
+      ensureIngestBackgroundWatch();
+    } else {
+      stopIngestBackgroundWatch();
+    }
+  } catch {
+    // 保留上次已知状态
+  }
+}
+
+function ensureIngestBackgroundWatch(): void {
+  // 导入页持有时不启动后台轮询，避免与页内轮询重复。
+  if (ingestViewOwned) return;
+  if (ingestBgConsumers <= 0) return;
+  if (ingestBgTimer !== null) return;
+  ingestBgTimer = setInterval(() => {
+    void refreshIngestStatus();
+  }, 2000);
+}
+
+function stopIngestBackgroundWatch(): void {
+  if (ingestBgTimer !== null) {
+    clearInterval(ingestBgTimer);
+    ingestBgTimer = null;
+  }
+}
+
+/**
+ * 外壳挂载时调用：引用计数 + 立即查一次当前任务。
+ * 若发现 running，则启动后台轮询直到完成。
+ */
+function startIngestStatusSync(): void {
+  ingestBgConsumers += 1;
+  void refreshIngestStatus();
+}
+
+/** 外壳卸载时调用。 */
+function stopIngestStatusSync(): void {
+  ingestBgConsumers = Math.max(0, ingestBgConsumers - 1);
+  if (ingestBgConsumers === 0) {
+    stopIngestBackgroundWatch();
+  }
+}
+
+/**
+ * 导入页挂载：接管进度源，暂停外壳后台轮询（避免双重 HTTP 轮询）。
+ * 导入页自己的 WS/轮询负责细粒度更新，并通过 setIngestRunning 回写外壳。
+ */
+function claimIngestViewOwnership(): void {
+  ingestViewOwned = true;
+  stopIngestBackgroundWatch();
+}
+
+/**
+ * 导入页卸载：交还所有权。若任务仍在跑且外壳仍存活，恢复后台监视。
+ */
+function releaseIngestViewOwnership(stillRunning: boolean): void {
+  ingestViewOwned = false;
+  if (stillRunning) {
+    state.ingestRunning = true;
+    ensureIngestBackgroundWatch();
+    // 立即校准一次，避免等待下一个 interval。
+    void refreshIngestStatus();
+  } else {
+    state.ingestRunning = false;
+    stopIngestBackgroundWatch();
+  }
+}
+
 export function useAppState() {
   return {
     state,
     isConfigured,
     refreshHealth,
     refreshConfig,
+    refreshIngestStatus,
     setIngestRunning,
     setIngestPercentage,
     startHealthPolling,
-    stopHealthPolling
+    stopHealthPolling,
+    startIngestStatusSync,
+    stopIngestStatusSync,
+    claimIngestViewOwnership,
+    releaseIngestViewOwnership
   };
 }
diff --git a/frontend/src/composables/usePaths.ts b/frontend/src/composables/usePaths.ts
index ceb3588..cd9130a 100644
--- a/frontend/src/composables/usePaths.ts
+++ b/frontend/src/composables/usePaths.ts
@@ -4,19 +4,35 @@
  * 前端仅用于「预览」派生路径，实际创建目录由后端完成。为了与后端
  * PathUtils.joinPath 的行为保持一致，这里统一：
  *  - 将反斜杠 \ 归一化为正斜杠 /
- *  - 去除父路径末尾多余的分隔符
+ *  - 去除父路径末尾多余的分隔符（但保留文件系统根 `/` 与 Windows 盘符根）
  *  - 去除子路径开头多余的分隔符
  *  - 以单个 / 连接
  *
  * 注意：这只是显示层的规范化，不做真实文件系统解析。
  */
 
-/** 归一化根路径：转 POSIX 分隔符并去掉结尾斜杠。 */
+/** 归一化根路径：转 POSIX 分隔符；去掉结尾斜杠，但保留 `/` 与 `C:` 形式的根。 */
 export function normalizeRoot(raw: string): string {
   if (!raw) {
     return '';
   }
-  return raw.replace(/\\/g, '/').replace(/\/+$/, '');
+  const posix = raw.replace(/\\/g, '/');
+
+  // 纯根斜杠：'/'、'//' → '/'
+  if (/^\/+$/.test(posix)) {
+    return '/';
+  }
+
+  // Windows 盘符根：'C:'、'C:/'、'C://' → 'C:'
+  const driveRoot = posix.match(/^([A-Za-z]:)\/+$/);
+  if (driveRoot) {
+    return driveRoot[1];
+  }
+  if (/^[A-Za-z]:$/.test(posix)) {
+    return posix;
+  }
+
+  return posix.replace(/\/+$/, '');
 }
 
 /** 以规范化方式拼接父/子路径，返回 POSIX 形式字符串。 */
@@ -29,20 +45,38 @@ export function joinPath(parent: string, child: string): string {
     return parentPosix;
   }
   const childPosix = child.replace(/\\/g, '/').replace(/^\/+/, '');
+
+  // 文件系统根：'/' + 'Input' → '/Input'
+  if (parentPosix === '/') {
+    return `/${childPosix}`;
+  }
+
   return `${parentPosix}/${childPosix}`;
 }
 
 /**
  * 校验路径是否合法（与后端 PathUtils.isValidPath 对齐）。
  * Windows 盘符后的冒号是合法的，其余情况下不允许出现 < > " | ? *。
+ * 文件系统根 `/` 与 Windows 盘符根（`C:` / `C:/`）视为合法。
  */
 export function isValidPath(path: string): boolean {
   if (!path || !path.trim()) {
     return false;
   }
-  let pathToValidate = path.trim();
-  if (/^[A-Za-z]:[/\\]/.test(pathToValidate)) {
+  let pathToValidate = path.trim().replace(/\\/g, '/');
+
+  // POSIX 根
+  if (pathToValidate === '/' || /^\/+$/.test(pathToValidate)) {
+    return true;
+  }
+  // Windows 盘符根
+  if (/^[A-Za-z]:\/?$/.test(pathToValidate)) {
+    return true;
+  }
+  // 去掉 Windows 盘符再检查非法字符
+  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 dc87128..955d1d5 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -91,6 +91,7 @@
 html,
 body {
   background: var(--c-bg-root);
+  overflow-x: hidden;
 }
 
 body {
@@ -103,6 +104,8 @@ body {
 
 #app {
   isolation: isolate;
+  min-height: 100%;
+  overflow-x: hidden;
 }
 
 /* Element Plus 暗色控件适配（局部、克制的覆盖） */
@@ -169,6 +172,17 @@ body {
   border-radius: 4px;
 }
 
+/* 通用旋转指示（refresh 图标等） */
+.spin {
+  animation: c-spin 0.85s linear infinite;
+}
+
+@keyframes c-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,