体验: toast提示移到右上角顶栏下方，彩色强调条+着色边框更显眼

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/mactfs-ui-restyle-requirements.md

@@ -0,0 +1,142 @@
+# macTFS UI 风格改版需求（现代桌面工具风 / 精致化 / 动效）
+
+## 一、背景
+
+macTFS 功能层面已完成 FE-001 ~ FE-025，三栏工作台、弹窗体系、挂起更改与签入链路均可用。但当前 UI 是「功能优先」的默认 shadcn 风格：
+
+- 全局使用 Roboto Slab 衬线字体，与现代桌面工具观感不符
+- 登录页只有一张简单表单卡片，元素少、缺少品牌感
+- 窗口使用系统默认标题栏，应用没有「一体成型」的桌面应用质感
+- 几乎没有过渡动效：弹窗、面板折叠、列表加载都是瞬时切换
+- 明暗主题虽有 token 定义，但没有切换入口、也不跟随系统
+
+本批需求目标：在**不改任何业务逻辑与接口**的前提下，把整体 UI 升级为「精致、现代、富动效」的桌面工具风格。
+
+## 二、用户诉求原文与解读
+
+> 「我希望的 ui 风格是更精致，动效更多，登录页元素多点，反正就是希望比较现代一些。」
+>
+> 补充澄清：「不是 macos 风格 finder 风格，你知道 codex 桌面客户端吗？以及 ccswitch，我想要的是这样的桌面风格。」
+
+**风格基准定为「现代 AI 开发者工具风」，参照对象：OpenAI Codex 桌面端、CC Switch。**
+
+这类风格的共同特征（设计基调）：
+
+| 特征 | 说明 |
+|---|---|
+| 中性底色 | 以中性灰（zinc/neutral）分级铺底，内容区与侧栏用明度区分，不用毛玻璃 |
+| 卡片化 | 信息以圆角卡片承载，细边框（1px 低对比）+ 极轻阴影，hover 时边框/底色微变 |
+| 克制的主色 | 单一 accent 色只用于主按钮、选中态、链接、状态点，不大面积铺色 |
+| 留白与排版 | 间距充足、层级靠字号字重区分，无衬线系统字体 |
+| 隐藏式标题栏 | 无系统标题栏，红绿灯融入应用顶栏，窗口一体成型 |
+| 明暗双主题 | 默认跟随系统，暗色为深灰而非纯黑 |
+| 微动效 | hover/按压/出入场都有轻量过渡，快而不花哨（150~250ms） |
+
+| 诉求 | 落地方向 |
+|---|---|
+| 更精致 | 统一设计令牌（颜色/圆角/边框/阴影/间距/图标），细化悬停、选中、禁用态 |
+| 现代桌面风 | 系统字体栈、隐藏式标题栏、卡片化布局、Codex 式侧栏、明暗主题 |
+| 动效更多 | 统一动效规范：弹窗出入场、面板折叠、列表级联、骨架屏、微交互 |
+| 登录页元素多点 | 品牌区 + 分步表单 + 氛围背景 + 最近连接 + 连接过程动效 |
+
+## 三、现状盘点
+
+| 现状 | 文件 | 问题 |
+|---|---|---|
+| 主题 token | `mactfsui/app/app.css` | 衬线字体、紫色主色、token 未按中性灰体系组织，dark 主题无入口 |
+| Electron 窗口 | `mactfsui/electron/main.cjs` | 默认标题栏，应用不「一体成型」 |
+| 登录页 | `app/components/app/connect-view.tsx` | 单卡片表单，无品牌区、无动效、无最近连接 |
+| 工作台 | `app/components/app/workspace-shell.tsx`、`top-bar.tsx` | 布局可用但视觉平淡，折叠无动画 |
+| 目录树 / 文件列表 | `app/components/explorer/source-tree-panel.tsx`、`folder-items-panel.tsx` | 行样式简单，加载无骨架屏，空状态简陋 |
+| 弹窗（13 个） | `app/components/explorer/*-dialog.tsx`、`app/components/app/*` | 风格不一，出入场无动效 |
+| 反馈 | `changes-panel.tsx`、`console-panel.tsx` | 无 toast，操作反馈靠日志面板 |
+
+技术栈现状：React 19 + React Router 7 + Tailwind CSS 4 + radix-ui/shadcn + tw-animate-css + lucide-react + Electron 42。动效优先用 CSS / tw-animate-css，复杂编排可引入 `motion`（原 framer-motion）。
+
+## 四、需求定义
+
+### U1 现代桌面风设计基建（FE-026，P0）
+
+- 字体切换为系统无衬线字体栈（`-apple-system, BlinkMacSystemFont, "PingFang SC"…`），仅代码/Diff 保留等宽字体
+- 重定义颜色令牌：中性灰分级底色（页面底 / 侧栏 / 卡片 / 悬停四档明度）、低对比 1px 边框色、单一克制 accent 色（用于主按钮/选中/状态点）
+- 统一圆角档位（8/10/12px 卡片为主）、极轻阴影（卡片几乎无阴影，浮层/弹窗轻阴影）、间距档位
+- 建立动效令牌：统一时长（150/200/250ms）、缓动曲线变量
+- 完整 light/dark 两套 token（dark 为深灰底，非纯黑）
+
+### U2 Electron 无缝窗口与自绘顶栏（FE-027，P0）
+
+- `titleBarStyle: "hiddenInset"`，移除系统标题栏，红绿灯融入应用顶栏，校准 trafficLightPosition
+- 顶栏设置可拖拽区域，交互控件 no-drag
+- 窗口背景色与主题 token 一致，启动时无白闪（背景色预设 + ready-to-show）
+- 核对窗口默认尺寸与最小尺寸；非 macOS 平台回退正常标题栏不影响功能
+
+### U3 登录页改版（FE-028，P0）
+
+- 左右分栏：左侧品牌区（logo、产品名、标语、版本号、低噪点氛围背景：渐变网格 / 微光斑动效），右侧连接表单卡片
+- 表单 → Collection 选择两阶段切换增加滑动 + 淡入淡出过渡
+- 新增元素：密码可见性切换、最近连接记录（本地存储多条、一键填充）、本地服务健康状态指示灯
+- 连接中按钮内 spinner + 阶段文案过渡；失败时表单抖动 + 错误提示条
+- Collection 选择改卡片式列表：细边框卡片、hover 微浮起、选中 accent 描边动画
+
+### U4 工作台外壳与顶栏改版（FE-029，P0）
+
+- 顶栏融合红绿灯区域，按现代工具风重排：上下文信息居左、动作按钮图标化居右、底部 1px 分隔线
+- 左侧目录树面板改 Codex 式侧栏：比内容区深/浅一档的纯色底、圆角选中条、分组标题小字号大写风格
+- 左右面板折叠/展开加宽度过渡动画，底部操作台滑入滑出
+- 三栏分隔线统一为低对比 1px，留白与内边距统一
+
+### U5 目录树与文件列表精致化（FE-030，P0）
+
+- 树节点与文件行：统一行高、圆角悬停/选中态、展开箭头旋转动画、子级展开渐入
+- 按扩展名区分文件图标与颜色，文件夹/分支/已映射目录差异化
+- 加载骨架屏替代文字 loading；空目录、未连接等空状态配图标 + 引导文案
+- pendingEdit / pendingAdd / pendingDelete / 未下载等状态徽标统一为小圆点 + 浅底色徽标风格
+- 文件列表首次加载行级联渐入
+
+### U6 弹窗体系统一现代风格（FE-031，P1）
+
+- 13 个弹窗统一结构：顶部标题区、内容区、底部按钮区，间距与按钮排布一致
+- 卡片化弹窗：圆角、细边框、轻阴影；出入场统一缩放 + 淡入，遮罩淡入
+- 大弹窗（History/Compare/Diff）优化分区留白与表格样式
+- 弹窗内表单控件按 U1 token 对齐
+
+### U7 操作反馈与微交互（FE-032，P1）
+
+- 引入轻量 toast（成功/失败/进行中），与日志面板互补
+- 挂起更改面板、日志面板按新风格改版；新日志条目滑入动画
+- 控件微交互：按钮按压缩放、聚焦光环、复选框勾选动画、hover 过渡
+- 长操作（GetLatest、Checkin、目录对比）显示进度反馈动效
+
+### U8 明暗主题跟随系统（FE-033，P1）
+
+- 跟随系统外观自动切换 light/dark，顶栏手动三态开关（跟随/亮/暗），持久化
+- 切换瞬间全局颜色过渡动画
+- 校验全部面板与弹窗在 dark 下的对比度与可读性
+
+### U9 改版回归验收（FE-034，P0）
+
+- 按 `TFS-AI测试流程.md` 大纲做 UI 链路回归：登录、浏览、Mapping、GetLatest、签出签入、历史、Diff、目录对比
+- 确认零业务逻辑变化：`app/lib` 与接口契约不动
+- typecheck 通过、关键页面截图存档
+
+## 五、优先级与排期建议
+
+| 顺序 | 任务 | 优先级 | 依赖 |
+|---|---|---|---|
+| 1 | FE-026 设计基建 | P0 | 无 |
+| 2 | FE-027 无缝窗口 | P0 | FE-026 |
+| 3 | FE-028 登录页改版 | P0 | FE-026 |
+| 4 | FE-029 工作台外壳改版 | P0 | FE-026、FE-027 |
+| 5 | FE-030 目录树与文件列表 | P0 | FE-029 |
+| 6 | FE-031 弹窗体系统一 | P1 | FE-026 |
+| 7 | FE-032 反馈与微交互 | P1 | FE-026 |
+| 8 | FE-033 明暗主题 | P1 | FE-026 ~ FE-032 |
+| 9 | FE-034 回归验收 | P0 | 全部 |
+
+## 六、不在本批范围
+
+- 任何业务逻辑、接口契约、服务端代码改动
+- 新功能（本批只做视觉与交互层）
+- 毛玻璃 / vibrancy 材质（已明确不要 Finder 原生风）
+- Windows / Linux 适配（仅保证不崩溃的回退样式）
+- Monaco Diff 内部主题深度定制（仅跟随明暗主题切换）

mactfs/src/main/java/com/mydev/mactfs/MacTfsCli.java

@@ -214,7 +214,7 @@ public class MacTfsCli {
     private static String readServerToken() throws Exception {
         File tokenFile = serverTokenFile();
         if (!tokenFile.exists()) {
-            throw new IllegalArgumentException("Token file not found: " + tokenFile.getAbsolutePath() + ". Start macTFS API server first.");
+            throw new IllegalArgumentException("Token file not found: " + tokenFile.getAbsolutePath() + ". Start MacTFS API server first.");
         }
         String token = new String(java.nio.file.Files.readAllBytes(tokenFile.toPath()), Charset.forName("UTF-8")).trim();
         if (token.length() == 0) {

mactfs/src/main/java/com/mydev/mactfs/TfsPhaseOneService.java

@@ -235,7 +235,8 @@ public class TfsPhaseOneService {
             required(merged, "workspace"),
             required(merged, "server-path"),
             merged.getProperty("local-path"),
-            !"false".equalsIgnoreCase(merged.getProperty("recursive"))
+            !"false".equalsIgnoreCase(merged.getProperty("recursive")),
+            !"false".equalsIgnoreCase(merged.getProperty("include-local-only"))
         );
         Map<String, Object> data = new LinkedHashMap<String, Object>();
         data.put("diffs", folderDiffsToMaps(result.getData()));

mactfs/src/main/java/com/mydev/mactfs/core/MacTfsCoreService.java

@@ -64,7 +64,7 @@ import java.util.Map;
 import java.util.Set;
 
 /**
- * macTFS 核心服务层，封装 TFS 连接、目录、Workspace、文件操作、历史和 Diff 能力。
+ * MacTFS 核心服务层，封装 TFS 连接、目录、Workspace、文件操作、历史和 Diff 能力。
  */
 public class MacTfsCoreService {
 
@@ -139,7 +139,7 @@ public class MacTfsCoreService {
     }
 
     /**
-     * 查询或创建 Collection 默认 Workspace，未传名称时按 macTFS 规则生成。
+     * 查询或创建 Collection 默认 Workspace，未传名称时按 MacTFS 规则生成。
      */
     public CoreOperationResult<TfsWorkspaceInfo> ensureWorkspace(final TfsConnectionConfig config,
                                                                 final String collectionName,
@@ -579,7 +579,8 @@ public class MacTfsCoreService {
                                                                      final String workspaceName,
                                                                      final String serverPath,
                                                                      final String localPath,
-                                                                     final boolean recursive) {
+                                                                     final boolean recursive,
+                                                                     final boolean includeLocalOnly) {
         return execute("compareFolder", new CoreCallable<List<TfsFolderDiffItem>>() {
             @Override
             public List<TfsFolderDiffItem> call(List<String> logs) throws Exception {
@@ -593,7 +594,10 @@ public class MacTfsCoreService {
                 }
                 Map<String, ExtendedItem> serverItems = queryExtendedItems(workspace, normalizedServerPath, recursive);
                 Map<String, PendingChange> pendingChanges = mapPendingChanges(queryPendingChanges(workspace, Arrays.asList(normalizedServerPath), recursive));
-                Set<String> localFiles = scanLocalFiles(new File(normalizedLocalPath), recursive);
+                // 不统计仅本地存在的项时直接跳过本地全量扫描（如 node_modules 大目录），只对比两端都有的文件。
+                Set<String> localFiles = includeLocalOnly
+                    ? scanLocalFiles(new File(normalizedLocalPath), recursive)
+                    : new LinkedHashSet<String>();
                 Map<String, TfsFolderDiffItem> result = new LinkedHashMap<String, TfsFolderDiffItem>();
 
                 for (Map.Entry<String, ExtendedItem> entry : serverItems.entrySet()) {
@@ -1237,8 +1241,12 @@ public class MacTfsCoreService {
         }
         boolean exists = localFile != null && localFile.exists();
         boolean remoteChanged = item.getLocalVersion() > 0 && item.getLatestVersion() > item.getLocalVersion();
-        // mtime 只能作为远端版本变化时的辅助信号，避免 Get Latest 后因本地时间晚于签入时间误报本地修改。
-        boolean localModified = remoteChanged && exists && item.getCheckinDate() != null && localFile.lastModified() > item.getCheckinDate().getTimeInMillis();
+        // 服务器工作区下文件取下来默认只读，变为可写说明被本地解锁修改过（对齐 VS 的 writable 判定），
+        // 这样未签出的纯本地修改也能在目录对比中暴露出来。
+        boolean writableFile = exists && !isFolder(item.getItemType()) && localFile.canWrite();
+        // mtime 仅作为远端版本变化时的辅助信号，避免 Get Latest 后因本地时间晚于签入时间误报本地修改。
+        boolean mtimeNewer = exists && item.getCheckinDate() != null && localFile.lastModified() > item.getCheckinDate().getTimeInMillis();
+        boolean localModified = writableFile || (remoteChanged && mtimeNewer);
         if (!exists && item.getLocalVersion() > 0) {
             return "localDeleted";
         }

mactfs/src/main/java/com/mydev/mactfs/server/MacTfsServer.java

@@ -52,7 +52,7 @@ import java.util.concurrent.TimeUnit;
 import java.util.concurrent.TimeoutException;
 
 /**
- * macTFS 第二阶段本地 API 服务入口，负责 HTTP 路由、Token 校验、配置、会话、日志和超时控制。
+ * MacTFS 第二阶段本地 API 服务入口，负责 HTTP 路由、Token 校验、配置、会话、日志和超时控制。
  */
 public class MacTfsServer {
 
@@ -93,8 +93,8 @@ public class MacTfsServer {
         registerFilters();
         registerRoutes();
         Spark.awaitInitialization();
-        System.out.println("macTFS API server listening on http://" + HOST + ":" + PORT);
-        System.out.println("macTFS token file: " + tokenStore.getTokenFile().getAbsolutePath());
+        System.out.println("MacTFS API server listening on http://" + HOST + ":" + PORT);
+        System.out.println("MacTFS token file: " + tokenStore.getTokenFile().getAbsolutePath());
     }
 
     /**
@@ -597,7 +597,7 @@ public class MacTfsServer {
             public ApiResult call(Request request) throws Exception {
                 Map<String, Object> body = readBody(request);
                 AppConfig config = requestConfig(body);
-                CoreOperationResult<List<TfsFolderDiffItem>> result = coreService.compareFolder(toTfsConfig(config), require(config.collection, "collection"), require(config.workspace, "workspace"), require(stringValue(body, "serverPath"), "serverPath"), stringValue(body, "localPath"), booleanValue(body, "recursive", true));
+                CoreOperationResult<List<TfsFolderDiffItem>> result = coreService.compareFolder(toTfsConfig(config), require(config.collection, "collection"), require(config.workspace, "workspace"), require(stringValue(body, "serverPath"), "serverPath"), stringValue(body, "localPath"), booleanValue(body, "recursive", true), booleanValue(body, "includeLocalOnly", true));
                 Map<String, Object> data = new LinkedHashMap<String, Object>();
                 data.put("diffs", result.getData() == null ? Collections.emptyList() : result.getData());
                 return fromCore(result, data);

mactfsui/app/app.css

@@ -1,13 +1,18 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "@fontsource-variable/roboto-slab";
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * 现代桌面工具风设计基建（FE-026）
+ * 基调：中性灰分层底色 + 卡片化 + 克制的蓝色主色，参照 Codex 桌面端 / CC Switch。
+ * 动效约定：快 150ms / 标准 200ms / 慢 250ms，对应 duration-150 / duration-200 / duration-250。
+ */
 @theme inline {
-    --font-heading: var(--font-serif);
-    --font-serif: 'Roboto Slab Variable', serif;
+    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+    --font-heading: var(--font-sans);
+    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -39,6 +44,7 @@
     --color-card: var(--card);
     --color-foreground: var(--foreground);
     --color-background: var(--background);
+    /* 圆角档位：sm 6px / md 8px / lg 10px / xl 14px（--radius = 10px） */
     --radius-sm: calc(var(--radius) * 0.6);
     --radius-md: calc(var(--radius) * 0.8);
     --radius-lg: var(--radius);
@@ -46,75 +52,105 @@
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
+    /* 阴影分层：卡片极轻 / 浮层轻 / 弹窗明显 */
+    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04);
+    --shadow-overlay: 0 4px 16px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
+    --shadow-dialog: 0 16px 48px rgb(0 0 0 / 0.16), 0 4px 12px rgb(0 0 0 / 0.08);
+    /* 缓动曲线：出场用 out-quart，强调动效用 spring 近似 */
+    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
+    /* 反馈动效：表单错误抖动 / 品牌区光斑缓慢漂浮 */
+    --animate-shake: shake 0.4s var(--ease-out-quart);
+    --animate-float-slow: float-slow 9s ease-in-out infinite;
+
+    @keyframes shake {
+        10%, 90% { transform: translateX(-1px); }
+        20%, 80% { transform: translateX(2px); }
+        30%, 50%, 70% { transform: translateX(-3px); }
+        40%, 60% { transform: translateX(3px); }
+    }
+
+    @keyframes float-slow {
+        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+        50% { transform: translate3d(18px, -22px, 0) scale(1.08); }
+    }
 }
 
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    /* 中性灰分层：页面底 0.985 / 卡片 1 / 侧栏 0.967 / 悬停 0.945 */
+    --background: oklch(0.985 0.002 286);
+    --foreground: oklch(0.21 0.006 286);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
+    --card-foreground: oklch(0.21 0.006 286);
     --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.488 0.243 264.376);
-    --primary-foreground: oklch(0.97 0.014 254.604);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.488 0.243 264.376);
-    --accent-foreground: oklch(0.97 0.014 254.604);
+    --popover-foreground: oklch(0.21 0.006 286);
+    /* 克制的蓝色主色：仅用于主按钮、选中态、状态点 */
+    --primary: oklch(0.546 0.215 262.881);
+    --primary-foreground: oklch(0.985 0.002 286);
+    --secondary: oklch(0.96 0.004 286);
+    --secondary-foreground: oklch(0.21 0.006 286);
+    --muted: oklch(0.96 0.004 286);
+    --muted-foreground: oklch(0.552 0.014 285);
+    /* accent 为中性悬停底色，不再复用主色 */
+    --accent: oklch(0.945 0.004 286);
+    --accent-foreground: oklch(0.21 0.006 286);
     --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
+    --border: oklch(0.92 0.004 286);
+    --input: oklch(0.92 0.004 286);
+    --ring: oklch(0.623 0.188 259.815);
     --chart-1: oklch(0.809 0.105 251.813);
     --chart-2: oklch(0.623 0.214 259.815);
     --chart-3: oklch(0.546 0.245 262.881);
     --chart-4: oklch(0.488 0.243 264.376);
     --chart-5: oklch(0.424 0.199 265.638);
-    --radius: 0.875rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.546 0.245 262.881);
-    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.967 0.003 286);
+    --sidebar-foreground: oklch(0.21 0.006 286);
+    --sidebar-primary: oklch(0.546 0.215 262.881);
+    --sidebar-primary-foreground: oklch(0.985 0.002 286);
+    --sidebar-accent: oklch(0.92 0.004 286);
+    --sidebar-accent-foreground: oklch(0.21 0.006 286);
+    --sidebar-border: oklch(0.91 0.004 286);
+    --sidebar-ring: oklch(0.623 0.188 259.815);
+    /* 动效时长：快 / 标准 / 慢 */
+    --motion-fast: 150ms;
+    --motion-base: 200ms;
+    --motion-slow: 250ms;
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.424 0.199 265.638);
-    --primary-foreground: oklch(0.97 0.014 254.604);
-    --secondary: oklch(0.274 0.006 286.033);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.424 0.199 265.638);
-    --accent-foreground: oklch(0.97 0.014 254.604);
+    /* 深灰底而非纯黑：页面 0.185 / 卡片 0.22 / 侧栏 0.165 / 悬停 0.27 */
+    --background: oklch(0.185 0.005 285);
+    --foreground: oklch(0.96 0.002 286);
+    --card: oklch(0.22 0.006 285);
+    --card-foreground: oklch(0.96 0.002 286);
+    --popover: oklch(0.22 0.006 285);
+    --popover-foreground: oklch(0.96 0.002 286);
+    --primary: oklch(0.623 0.188 259.815);
+    --primary-foreground: oklch(0.985 0.002 286);
+    --secondary: oklch(0.27 0.006 286);
+    --secondary-foreground: oklch(0.96 0.002 286);
+    --muted: oklch(0.26 0.006 286);
+    --muted-foreground: oklch(0.71 0.01 286);
+    --accent: oklch(0.27 0.006 286);
+    --accent-foreground: oklch(0.96 0.002 286);
     --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
+    --border: oklch(1 0 0 / 8%);
+    --input: oklch(1 0 0 / 12%);
+    --ring: oklch(0.623 0.188 259.815);
     --chart-1: oklch(0.809 0.105 251.813);
     --chart-2: oklch(0.623 0.214 259.815);
     --chart-3: oklch(0.546 0.245 262.881);
     --chart-4: oklch(0.488 0.243 264.376);
     --chart-5: oklch(0.424 0.199 265.638);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.623 0.214 259.815);
-    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar: oklch(0.165 0.005 285);
+    --sidebar-foreground: oklch(0.96 0.002 286);
+    --sidebar-primary: oklch(0.623 0.188 259.815);
+    --sidebar-primary-foreground: oklch(0.985 0.002 286);
+    --sidebar-accent: oklch(0.24 0.006 285);
+    --sidebar-accent-foreground: oklch(0.96 0.002 286);
+    --sidebar-border: oklch(1 0 0 / 8%);
+    --sidebar-ring: oklch(0.623 0.188 259.815);
 }
 
 @layer base {
@@ -125,6 +161,24 @@
     @apply bg-background text-foreground;
     }
   html {
-    @apply font-serif;
+    @apply font-sans;
     }
 }
+
+/* 主题切换瞬间的全局颜色过渡，由 use-theme 短暂挂载 theme-transition class。 */
+.theme-transition,
+.theme-transition * {
+    transition:
+        background-color 250ms var(--ease-out-quart),
+        border-color 250ms var(--ease-out-quart),
+        color 250ms var(--ease-out-quart) !important;
+}
+
+/* 隐藏式标题栏下的窗口拖拽区域：顶栏整体可拖动，交互控件单独豁免。 */
+@utility app-drag {
+  -webkit-app-region: drag;
+}
+
+@utility app-no-drag {
+  -webkit-app-region: no-drag;
+}

mactfsui/app/components/app/connect-view.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useState, type ChangeEvent } from "react"
+import { Check, Clock3, Eye, EyeOff, Loader2 } from "lucide-react"
 
 import { Button } from "~/components/ui/button"
 import { Input } from "~/components/ui/input"
 import { Label } from "~/components/ui/label"
 import { api } from "~/lib/api"
 import type { AppConfig, Collection } from "~/lib/api"
+import { getServiceStatus } from "~/lib/electron"
+import { loadRecentServers, saveRecentServer, type RecentServer } from "~/lib/recent-servers"
 import type { WorkspaceSession } from "~/lib/tfs/session"
 import { cn } from "~/lib/utils"
 
@@ -28,6 +31,7 @@ const EMPTY_FORM: ConnectFormState = {
 
 /**
  * 连接入口：连接 TFS、加载并确认 Collection、确保默认 Workspace，成功后回调固定上下文。
+ * 布局为左品牌区 + 右表单卡片，带分阶段过渡与最近连接快速填充。
  */
 export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession) => void }) {
   const [phase, setPhase] = useState<ConnectPhase>("form")
@@ -37,9 +41,15 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
   const [busy, setBusy] = useState(false)
   const [busyText, setBusyText] = useState("")
   const [error, setError] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
+  const [recent, setRecent] = useState<RecentServer[]>([])
+  const [serviceOk, setServiceOk] = useState<boolean | null>(null)
+  // 每次失败自增，作为 key 触发表单抖动动画重放。
+  const [shakeCount, setShakeCount] = useState(0)
 
   useEffect(() => {
     let active = true
+    setRecent(loadRecentServers())
     void (async () => {
       const result = await api.getConfig()
       if (!active) {
@@ -58,6 +68,12 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
         }
       }
     })()
+    void (async () => {
+      const status = await getServiceStatus()
+      if (active) {
+        setServiceOk(status.running)
+      }
+    })()
     return () => {
       active = false
     }
@@ -71,6 +87,27 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
     setForm((prev) => ({ ...prev, [key]: value }))
   }
 
+  /**
+   * 失败统一处理：展示错误条并触发表单抖动。
+   */
+  const failWith = useCallback((message: string) => {
+    setError(message)
+    setShakeCount((count) => count + 1)
+  }, [])
+
+  /**
+   * 用一条最近连接记录填充表单（不含密码）。
+   */
+  const applyRecent = useCallback((item: RecentServer) => {
+    setError(null)
+    setForm((prev) => ({
+      ...prev,
+      serverUri: item.serverUri,
+      domain: item.domain,
+      username: item.username,
+    }))
+  }, [])
+
   /**
    * 连接 TFS 并加载当前账号可见的 Collection 列表。
    */
@@ -88,23 +125,30 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
     const connectResult = await api.connect(payload)
     if (!connectResult.ok) {
       setBusy(false)
-      setError(connectResult.errorMessage ?? "连接失败")
+      failWith(connectResult.errorMessage ?? "连接失败")
       return
     }
     setBusyText("正在加载 Collection…")
     const collectionsResult = await api.listCollections()
     setBusy(false)
     if (!collectionsResult.ok) {
-      setError(collectionsResult.errorMessage ?? "加载 Collection 失败")
+      failWith(collectionsResult.errorMessage ?? "加载 Collection 失败")
       return
     }
+    setRecent(
+      saveRecentServer({
+        serverUri: form.serverUri.trim(),
+        domain: form.domain.trim(),
+        username: form.username.trim(),
+      }),
+    )
     const list = collectionsResult.data?.collections ?? []
     setCollections(list)
     setSelectedCollection((prev) =>
       list.some((item) => item.name === prev) ? prev : list[0]?.name ?? "",
     )
     setPhase("collection")
-  }, [form])
+  }, [form, failWith])
 
   /**
    * 确认 Collection 后确保默认 Workspace，并把固定上下文回调给上层。
@@ -120,7 +164,7 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
     setBusy(false)
     const workspace = ensureResult.data?.workspace
     if (!ensureResult.ok || !workspace) {
-      setError(ensureResult.errorMessage ?? "确保 Workspace 失败")
+      failWith(ensureResult.errorMessage ?? "确保 Workspace 失败")
       return
     }
     onReady({
@@ -129,7 +173,7 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
       workspace: workspace.name,
       mappings: workspace.mappings ?? [],
     })
-  }, [selectedCollection, form.serverUri, onReady])
+  }, [selectedCollection, form.serverUri, onReady, failWith])
 
   const canConnect =
     form.serverUri.trim().length > 0 &&
@@ -137,18 +181,62 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
     form.password.length > 0
 
   return (
-    <div className="flex min-h-svh items-center justify-center bg-muted/40 p-6">
-      <div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
+    <div className="relative flex min-h-svh">
+      {/* 隐藏式标题栏下登录页的窗口拖拽区 */}
+      <div className="app-drag absolute inset-x-0 top-0 z-10 h-10" />
+
+      {/* 左侧品牌区：大 logo + 一句话描述 */}
+      <aside className="relative hidden w-[42%] max-w-md min-w-80 flex-col overflow-hidden bg-zinc-950 p-10 text-zinc-100 md:flex">
+        <div aria-hidden className="pointer-events-none absolute inset-0">
+          <div className="animate-float-slow absolute -top-24 -left-20 size-72 rounded-full bg-blue-500/20 blur-3xl" />
+          <div className="animate-float-slow absolute -right-24 bottom-0 size-80 rounded-full bg-indigo-500/15 blur-3xl [animation-delay:-4s]" />
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,transparent_55%,rgb(9_9_11/0.7))]" />
+        </div>
+
+        <div className="relative flex flex-1 flex-col items-center justify-center gap-5">
+          {/* logo 自带圆角方形外形，用 drop-shadow 跟随透明轮廓投影 */}
+          <img src="/logo.png" alt="MacTFS" className="size-24 drop-shadow-2xl" />
+          <div className="text-center">
+            <p className="text-2xl font-semibold tracking-tight">MacTFS</p>
+            <p className="mt-1.5 text-sm text-zinc-400">macOS 上的 TFS 源码管理工作台</p>
+          </div>
+        </div>
+
+        <div className="relative flex items-center gap-2 text-xs text-zinc-500">
+          <span
+            className={cn(
+              "size-1.5 rounded-full",
+              serviceOk == null ? "bg-zinc-600" : serviceOk ? "bg-emerald-400" : "bg-red-400",
+            )}
+          />
+          {serviceOk == null
+            ? "正在检测本地服务…"
+            : serviceOk
+              ? "本地服务运行中 · 127.0.0.1:38765"
+              : "本地服务未就绪"}
+        </div>
+      </aside>
+
+      {/* 右侧表单区 */}
+      <main className="flex flex-1 items-center justify-center bg-background p-6">
+        <div className="w-full max-w-sm">
+          {phase === "form" && (
+            <div
+              key={`form-${shakeCount}`}
+              className={cn(
+                "animate-in fade-in slide-in-from-left-2 duration-200",
+                error != null && "animate-shake",
+              )}
+            >
               <div className="space-y-1">
-          <h1 className="text-base font-semibold">macTFS</h1>
+                <h1 className="text-xl font-semibold tracking-tight">连接 TFS</h1>
                 <p className="text-sm text-muted-foreground">
-            {phase === "form" ? "连接 TFS 服务器" : "选择 Collection"}
+                  使用域账号连接 Team Foundation Server
                 </p>
               </div>
 
-        {phase === "form" && (
               <form
-            className="mt-5 space-y-3"
+                className="mt-6 space-y-4"
                 onSubmit={(event) => {
                   event.preventDefault()
                   if (canConnect && !busy) {
@@ -166,6 +254,7 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
                     disabled={busy}
                   />
                 </div>
+                <div className="grid grid-cols-2 gap-3">
                   <div className="space-y-1.5">
                     <Label htmlFor="domain">域（可选）</Label>
                     <Input
@@ -186,32 +275,99 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
                       disabled={busy}
                     />
                   </div>
+                </div>
                 <div className="space-y-1.5">
                   <Label htmlFor="password">密码</Label>
+                  <div className="relative">
                     <Input
                       id="password"
-                type="password"
+                      type={showPassword ? "text" : "password"}
                       autoComplete="current-password"
+                      className="pr-9"
                       value={form.password}
                       onChange={updateField("password")}
                       disabled={busy}
                     />
+                    <button
+                      type="button"
+                      tabIndex={-1}
+                      onClick={() => setShowPassword((prev) => !prev)}
+                      className="absolute top-1/2 right-2 -translate-y-1/2 rounded-sm p-1 text-muted-foreground transition-colors duration-150 hover:text-foreground"
+                      aria-label={showPassword ? "隐藏密码" : "显示密码"}
+                    >
+                      {showPassword ? <Eye className="size-4" /> : <EyeOff className="size-4" />}
+                    </button>
+                  </div>
                 </div>
 
-            {error && <p className="text-sm text-destructive">{error}</p>}
+                {error && (
+                  <p className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+                    {error}
+                  </p>
+                )}
 
                 <Button type="submit" className="w-full" disabled={!canConnect || busy}>
+                  {busy && <Loader2 className="size-4 animate-spin" />}
                   {busy ? busyText || "处理中…" : "连接 TFS"}
                 </Button>
               </form>
+
+              {recent.length > 0 && (
+                <div className="mt-6 space-y-2">
+                  <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Clock3 className="size-3.5" />
+                    最近连接
+                  </p>
+                  <ul className="space-y-1.5">
+                    {recent.map((item) => (
+                      <li key={`${item.serverUri}-${item.username}`}>
+                        <button
+                          type="button"
+                          onClick={() => applyRecent(item)}
+                          disabled={busy}
+                          className="flex w-full items-center justify-between gap-2 rounded-md border bg-card px-3 py-2 text-left shadow-card transition-all duration-150 hover:-translate-y-px hover:border-ring/40 hover:shadow-overlay"
+                        >
+                          <span className="min-w-0">
+                            <span className="block truncate font-mono text-xs">
+                              {item.serverUri}
+                            </span>
+                            <span className="block text-xs text-muted-foreground">
+                              {item.domain ? `${item.domain} \\ ` : ""}
+                              {item.username}
+                            </span>
+                          </span>
+                          <span className="shrink-0 text-xs text-primary">填充</span>
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
           )}
 
           {phase === "collection" && (
-          <div className="mt-5 space-y-4">
+            <div
+              key={`collection-${shakeCount}`}
+              className={cn(
+                "animate-in fade-in slide-in-from-right-4 duration-200",
+                error != null && "animate-shake",
+              )}
+            >
+              <div className="space-y-1">
+                <h1 className="text-xl font-semibold tracking-tight">选择 Collection</h1>
+                <p className="text-sm text-muted-foreground">
+                  已连接 <span className="font-mono text-xs">{form.serverUri.trim()}</span>
+                </p>
+              </div>
+
+              <div className="mt-6 space-y-4">
                 {collections.length === 0 ? (
-              <p className="text-sm text-muted-foreground">当前账号没有可见的 Collection。</p>
+                  <p className="rounded-md border bg-card px-3 py-6 text-center text-sm text-muted-foreground">
+                    当前账号没有可见的 Collection。
+                  </p>
                 ) : (
-              <ul className="max-h-64 space-y-1 overflow-y-auto">
+                  <ul className="max-h-72 space-y-2 overflow-y-auto">
                     {collections.map((collection) => {
                       const active = collection.name === selectedCollection
                       return (
@@ -221,14 +377,18 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
                             onClick={() => setSelectedCollection(collection.name)}
                             disabled={busy}
                             className={cn(
-                          "flex w-full items-center justify-between rounded-md border px-3 py-2 text-left text-sm transition-colors",
+                              "flex w-full items-center justify-between rounded-lg border px-3.5 py-3 text-left text-sm transition-colors duration-150",
                               active
-                            ? "border-primary bg-primary/10 text-foreground"
-                            : "border-border bg-background hover:bg-muted",
+                                ? "border-primary/60 bg-primary/5"
+                                : "bg-card shadow-card hover:bg-muted/60",
                             )}
                           >
-                        <span className="font-medium">{collection.name}</span>
-                        {active && <span className="text-xs text-primary">已选择</span>}
+                            <span className={cn(active && "font-medium")}>{collection.name}</span>
+                            {active && (
+                              <span className="animate-in zoom-in-75 fade-in flex size-4.5 items-center justify-center rounded-full bg-primary text-primary-foreground duration-150">
+                                <Check className="size-3" />
+                              </span>
+                            )}
                           </button>
                         </li>
                       )
@@ -236,7 +396,11 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
                   </ul>
                 )}
 
-            {error && <p className="text-sm text-destructive">{error}</p>}
+                {error && (
+                  <p className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+                    {error}
+                  </p>
+                )}
 
                 <div className="flex items-center justify-between gap-2">
                   <Button
@@ -256,12 +420,15 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
                     onClick={() => void handleEnter()}
                     disabled={busy || !selectedCollection}
                   >
+                    {busy && <Loader2 className="size-4 animate-spin" />}
                     {busy ? busyText || "处理中…" : "进入工作台"}
                   </Button>
                 </div>
               </div>
+            </div>
           )}
         </div>
+      </main>
     </div>
   )
 }

mactfsui/app/components/app/top-bar.tsx

@@ -1,11 +1,20 @@
-import { PanelBottom, PanelLeft, PanelRight } from "lucide-react"
+import { FolderCog, Monitor, Moon, PanelBottom, PanelLeft, PanelRight, Sun, Unplug } from "lucide-react"
 
 import { Button } from "~/components/ui/button"
 import { Separator } from "~/components/ui/separator"
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip"
+import { useTheme, type ThemePreference } from "~/hooks/use-theme"
+import { isMacElectron } from "~/lib/platform"
 import type { WorkspaceSession } from "~/lib/tfs/session"
 import { cn } from "~/lib/utils"
 
+// 主题三态对应的图标与说明文案。
+const THEME_VISUALS: Record<ThemePreference, { icon: typeof Monitor; label: string }> = {
+  system: { icon: Monitor, label: "主题：跟随系统" },
+  light: { icon: Sun, label: "主题：亮色" },
+  dark: { icon: Moon, label: "主题：暗色" },
+}
+
 // 三个可折叠面板的显隐状态，由 WorkspaceShell 持有。
 export interface PanelVisibility {
   tree: boolean
@@ -30,26 +39,35 @@ export function TopBar({
   onReconnect: () => void
   onManageWorkspace: () => void
 }) {
+  // 隐藏式标题栏下顶栏整体作为拖拽区，并为左上角红绿灯预留空间。
+  const macInset = isMacElectron()
+  const theme = useTheme()
+  const themeVisual = THEME_VISUALS[theme.preference]
+  const ThemeIcon = themeVisual.icon
   return (
-    <header className="flex h-12 shrink-0 items-center justify-between gap-3 border-b bg-background px-3">
+    <header
+      className={cn(
+        "app-drag flex h-12 shrink-0 items-center justify-between gap-3 px-3",
+        macInset && "pl-20",
+      )}
+    >
       <div className="flex min-w-0 items-center gap-2 text-sm">
-        <span className="shrink-0 font-semibold">macTFS</span>
+        <span className="shrink-0 font-semibold tracking-tight">MacTFS</span>
         <Separator orientation="vertical" className="h-4!" />
-        <span className="hidden shrink-0 text-xs text-muted-foreground lg:inline">
-          服务器
-        </span>
-        <span className="hidden max-w-56 truncate font-mono text-xs lg:inline">
+        <span className="hidden max-w-56 truncate font-mono text-xs text-muted-foreground lg:inline">
           {session.serverUri}
         </span>
-        <Separator orientation="vertical" className="hidden h-4! lg:block" />
-        <span className="shrink-0 text-xs text-muted-foreground">Collection</span>
-        <span className="max-w-40 truncate text-xs font-medium">{session.collection}</span>
-        <Separator orientation="vertical" className="h-4!" />
-        <span className="shrink-0 text-xs text-muted-foreground">Workspace</span>
-        <span className="max-w-44 truncate font-mono text-xs">{session.workspace}</span>
+        <span className="hidden max-w-44 shrink-0 items-center gap-1 truncate rounded-md border bg-card px-2 py-0.5 text-xs font-medium shadow-card sm:inline-flex">
+          <span className="text-muted-foreground">Collection</span>
+          <span className="truncate">{session.collection}</span>
+        </span>
+        <span className="inline-flex max-w-52 shrink-0 items-center gap-1 truncate rounded-md border bg-card px-2 py-0.5 text-xs shadow-card">
+          <span className="text-muted-foreground">Workspace</span>
+          <span className="truncate font-mono">{session.workspace}</span>
+        </span>
       </div>
 
-      <div className="flex shrink-0 items-center gap-1">
+      <div className="app-no-drag flex shrink-0 items-center gap-1">
         <PanelToggle
           label="源码目录面板"
           active={panels.tree}
@@ -72,12 +90,30 @@ export function TopBar({
           <PanelBottom />
         </PanelToggle>
         <Separator orientation="vertical" className="mx-1 h-4!" />
-        <Button size="sm" variant="outline" onClick={onManageWorkspace}>
-          工作区
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button size="icon-sm" variant="ghost" onClick={theme.cycle} aria-label={themeVisual.label}>
+              <ThemeIcon />
             </Button>
-        <Button size="sm" variant="outline" onClick={onReconnect}>
-          重新连接
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{themeVisual.label}（点击切换）</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button size="icon-sm" variant="ghost" onClick={onManageWorkspace} aria-label="工作区与映射管理">
+              <FolderCog />
             </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">工作区与映射管理</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button size="icon-sm" variant="ghost" onClick={onReconnect} aria-label="重新连接">
+              <Unplug />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">重新连接</TooltipContent>
+        </Tooltip>
       </div>
     </header>
   )

mactfsui/app/components/app/workspace-shell.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 
 import { TopBar, type PanelVisibility } from "~/components/app/top-bar"
 import { WorkspaceDialogs } from "~/components/app/workspace-dialogs"
@@ -7,6 +7,7 @@ import { SourceTreePanel } from "~/components/explorer/source-tree-panel"
 import { WorkspaceManageDialog } from "~/components/explorer/workspace-manage-dialog"
 import { ChangesPanel } from "~/components/inspector/changes-panel"
 import { ConsolePanel } from "~/components/logs/console-panel"
+import { Toaster, showToast } from "~/components/ui/toaster"
 import { TooltipProvider } from "~/components/ui/tooltip"
 import { useFileActions } from "~/hooks/use-file-actions"
 import { usePendingChanges } from "~/hooks/use-pending-changes"
@@ -71,9 +72,23 @@ export function WorkspaceShell({
     refreshLogs,
   })
 
+  // 把动作编排的 notice 转成右上角 toast：固定 id 让「正在…」与结果复用同一条目。
+  useEffect(() => {
+    if (!actions.notice) {
+      return
+    }
+    const { kind, text } = actions.notice
+    showToast({
+      id: "action",
+      kind: kind === "error" ? "error" : text.startsWith("正在") ? "loading" : "success",
+      text,
+    })
+  }, [actions.notice])
+
   return (
     <TooltipProvider>
-      <div className="flex h-svh flex-col overflow-hidden bg-background">
+      {/* 画布式布局：浅灰画布 + 各面板卡片化，卡片间留缝隙避免生硬拼接 */}
+      <div className="flex h-svh flex-col overflow-hidden bg-sidebar">
         <TopBar
           session={session}
           panels={panels}
@@ -82,24 +97,14 @@ export function WorkspaceShell({
           onManageWorkspace={() => setManageOpen(true)}
         />
 
-        {actions.notice && (
+        <div className="flex min-h-0 flex-1 px-2 pb-2">
+          {/* 左右面板保持挂载，通过宽度 + 间距过渡实现折叠 / 展开动画 */}
           <div
             className={cn(
-              "flex shrink-0 items-center gap-2 border-b px-3 py-1 text-xs",
-              actions.notice.kind === "error"
-                ? "bg-destructive/10 text-destructive"
-                : "bg-primary/5 text-foreground",
+              "flex min-h-0 shrink-0 overflow-hidden transition-[width,margin] duration-250 ease-out-quart",
+              panels.tree ? "mr-2 w-[280px]" : "mr-0 w-0",
             )}
           >
-            {actions.actionBusy && (
-              <span className="size-2 animate-pulse rounded-full bg-primary" />
-            )}
-            {actions.notice.text}
-          </div>
-        )}
-
-        <div className="flex min-h-0 flex-1">
-          {panels.tree && (
             <SourceTreePanel
               collection={session.collection}
               mappings={session.mappings}
@@ -107,7 +112,7 @@ export function WorkspaceShell({
               onNavigate={onNavigate}
               onFileAction={actions.handleFileAction}
             />
-          )}
+          </div>
           <FolderItemsPanel
             session={session}
             selectedServerPath={selectedServerPath}
@@ -117,7 +122,12 @@ export function WorkspaceShell({
             onFileAction={actions.handleFileAction}
             onRefresh={refreshItems}
           />
-          {panels.changes && (
+          <div
+            className={cn(
+              "flex min-h-0 shrink-0 justify-end overflow-hidden transition-[width,margin] duration-250 ease-out-quart",
+              panels.changes ? "ml-2 w-[340px]" : "ml-0 w-0",
+            )}
+          >
             <ChangesPanel
               mappings={session.mappings}
               pendingChanges={pending.pendingChanges}
@@ -130,16 +140,22 @@ export function WorkspaceShell({
               onFileAction={actions.handleFileAction}
               onRefresh={() => void pending.refresh()}
             />
-          )}
+          </div>
         </div>
 
-        {panels.console && (
+        {/* 底部操作台通过高度过渡实现滑入滑出 */}
+        <div
+          className={cn(
+            "box-border shrink-0 overflow-hidden px-2 transition-[height] duration-250 ease-out-quart",
+            panels.console ? "h-[188px] pb-2" : "h-0",
+          )}
+        >
           <ConsolePanel
             refreshToken={logsRefreshToken}
             busy={actions.actionBusy || actions.checkinBusy}
             busyText={actions.notice?.kind === "info" ? actions.notice.text : null}
           />
-        )}
+        </div>
 
         <WorkspaceDialogs
           dialog={actions.dialog}
@@ -169,6 +185,8 @@ export function WorkspaceShell({
             }}
           />
         )}
+
+        <Toaster />
       </div>
     </TooltipProvider>
   )

mactfsui/app/components/explorer/compare-dialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
 import { FileText, FolderClosed, Loader2, RefreshCw } from "lucide-react"
 
 import { FileTargetMenu } from "~/components/app/file-target-menu"
@@ -9,6 +9,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "~/components/ui/dialog"
@@ -30,6 +31,9 @@ import { cn } from "~/lib/utils"
  * 目录对比弹窗：对已映射目录执行本地与服务端对比，
  * 默认隐藏 upToDate，支持状态筛选、刷新重比，结果项走统一右键菜单。
  */
+// 在对比弹窗内直接执行、完成后需要刷新对比结果的动作。
+const ACTIONS_NEED_RECOMPARE: FileActionId[] = ["checkout", "getLatest", "undo", "delete", "add"]
+
 export function CompareDialog({
   serverPath,
   mappings,
@@ -39,33 +43,51 @@ export function CompareDialog({
   serverPath: string
   mappings: MappingInfo[]
   onClose: () => void
-  onFileAction: (target: FileTarget, action: FileActionId) => void
+  onFileAction: (target: FileTarget, action: FileActionId) => void | Promise<void>
 }) {
+  // 先选项后对比：setup 阶段确认选项，result 阶段展示对比结果。
+  const [phase, setPhase] = useState<"setup" | "result">("setup")
   const [diffs, setDiffs] = useState<FolderDiffItem[]>([])
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [showUpToDate, setShowUpToDate] = useState(false)
+  // 忽略仅本地存在的项（如 node_modules）：勾选后只对比两端都有的文件，并跳过本地全量扫描。
+  const [ignoreLocalOnly, setIgnoreLocalOnly] = useState(false)
   // 状态筛选：空集合表示不过滤（除 upToDate 开关外）。
   const [statusFilter, setStatusFilter] = useState<Set<string>>(new Set())
 
   /**
-   * 执行（或重新执行）目录对比。
+   * 执行（或重新执行）目录对比；忽略仅本地存在的项时由后端直接跳过本地扫描。
    */
   const runCompare = useCallback(async () => {
     setLoading(true)
     setError(null)
-    const result = await api.compareFolder({ serverPath, recursive: true })
+    const result = await api.compareFolder({
+      serverPath,
+      recursive: true,
+      includeLocalOnly: !ignoreLocalOnly,
+    })
     setLoading(false)
     if (!result.ok) {
       setError(result.errorMessage ?? "目录对比失败")
       return
     }
     setDiffs(result.data?.diffs ?? [])
-  }, [serverPath])
+  }, [serverPath, ignoreLocalOnly])
 
-  useEffect(() => {
-    void runCompare()
-  }, [runCompare])
+  /**
+   * 转发右键动作：签出 / 获取 / 撤销等就地执行的动作完成后自动重新对比，
+   * 让结果状态（如 签出编辑）立即反映最新事实。
+   */
+  const handleAction = useCallback(
+    async (target: FileTarget, action: FileActionId) => {
+      await onFileAction(target, action)
+      if (ACTIONS_NEED_RECOMPARE.includes(action)) {
+        await runCompare()
+      }
+    },
+    [onFileAction, runCompare],
+  )
 
   // 结果中出现过的状态（不含 upToDate），用于生成筛选 chips。
   const presentStatuses = useMemo(() => {
@@ -104,11 +126,56 @@ export function CompareDialog({
     })
   }, [])
 
+  // 选项确认阶段：先确定对比方式再执行，避免反复触发全量对比。
+  if (phase === "setup") {
+    return (
+      <Dialog open onOpenChange={(open) => !open && onClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>目录对比</DialogTitle>
+            <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 rounded-md border bg-muted/30 p-4">
+            <label className="flex items-start gap-2 text-sm">
+              <Checkbox
+                checked={ignoreLocalOnly}
+                onCheckedChange={(value) => setIgnoreLocalOnly(value === true)}
+                className="mt-0.5"
+              />
+              <span>
+                <span className="font-medium">忽略仅本地存在的项</span>
+                <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                  只对比两端都有的文件；仅本地存在的项（如 node_modules、构建产物）不计入差异，
+                  并跳过本地全量扫描，大目录速度更快。
+                </span>
+              </span>
+            </label>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={onClose}>
+              取消
+            </Button>
+            <Button
+              onClick={() => {
+                setPhase("result")
+                void runCompare()
+              }}
+            >
+              开始对比
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
       <DialogContent className="flex h-[88svh] max-h-[88svh] flex-col sm:max-w-[90vw]">
         <DialogHeader>
-          <DialogTitle>目录对比</DialogTitle>
+          <DialogTitle>目录对比{ignoreLocalOnly ? "（已忽略仅本地存在的项）" : ""}</DialogTitle>
           <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
         </DialogHeader>
 
@@ -134,6 +201,14 @@ export function CompareDialog({
             />
             显示最新项
           </label>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setPhase("setup")}
+            disabled={loading}
+          >
+            调整选项
+          </Button>
           <Button
             variant="outline"
             size="sm"
@@ -181,7 +256,11 @@ export function CompareDialog({
                     compareStatus: diff.status,
                   })
                   return (
-                    <FileTargetMenu key={diff.serverPath} target={target} onAction={onFileAction}>
+                    <FileTargetMenu
+                      key={diff.serverPath}
+                      target={target}
+                      onAction={(menuTarget, action) => void handleAction(menuTarget, action)}
+                    >
                       <TableRow className="cursor-default select-none">
                         <TableCell className="py-1.5">
                           <span className="flex items-center gap-1.5">

mactfsui/app/components/explorer/diff-dialog.tsx

@@ -126,6 +126,7 @@ export function DiffDialog({
     let diffEditor: MonacoEditor.IStandaloneDiffEditor | null = null
     let originalModel: MonacoEditor.ITextModel | null = null
     let modifiedModel: MonacoEditor.ITextModel | null = null
+    let themeObserver: MutationObserver | null = null
     void (async () => {
       const { monaco, detectLanguage } = await import("~/lib/monaco")
       if (disposed || !containerRef.current) {
@@ -167,10 +168,16 @@ export function DiffDialog({
         setBlockCount(diffEditor?.getLineChanges()?.length ?? 0)
       })
       editorRef.current = diffEditor
+      // 弹窗打开期间应用切换明暗主题时，同步更新 Monaco 主题。
+      themeObserver = new MutationObserver(() => {
+        monaco.editor.setTheme(isDarkTheme() ? "mactfs-dark" : "mactfs-light")
+      })
+      themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
     })()
     return () => {
       disposed = true
       editorRef.current = null
+      themeObserver?.disconnect()
       diffEditor?.dispose()
       originalModel?.dispose()
       modifiedModel?.dispose()

mactfsui/app/components/explorer/file-icon.tsx

@@ -0,0 +1,111 @@
+import {
+  Database,
+  File,
+  FileArchive,
+  FileCode,
+  FileImage,
+  FileJson,
+  FileSpreadsheet,
+  FileTerminal,
+  FileText,
+  FolderClosed,
+  FolderOpen,
+  FolderSymlink,
+  type LucideIcon,
+} from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+// 扩展名 -> 图标与配色的映射规则，未命中走默认文件图标。
+const FILE_ICON_RULES: { exts: string[]; icon: LucideIcon; className: string }[] = [
+  {
+    exts: ["ts", "tsx", "js", "jsx", "java", "cs", "py", "go", "rs", "c", "cpp", "h", "vue", "css", "scss", "html"],
+    icon: FileCode,
+    className: "text-blue-600 dark:text-blue-400",
+  },
+  {
+    exts: ["json", "xml", "yml", "yaml", "toml", "config", "properties", "gradle"],
+    icon: FileJson,
+    className: "text-amber-600 dark:text-amber-400",
+  },
+  {
+    exts: ["md", "txt", "doc", "docx", "pdf", "rtf"],
+    icon: FileText,
+    className: "text-zinc-500 dark:text-zinc-400",
+  },
+  {
+    exts: ["sql", "db"],
+    icon: Database,
+    className: "text-violet-600 dark:text-violet-400",
+  },
+  {
+    exts: ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico", "icns"],
+    icon: FileImage,
+    className: "text-emerald-600 dark:text-emerald-400",
+  },
+  {
+    exts: ["zip", "rar", "7z", "tar", "gz", "jar"],
+    icon: FileArchive,
+    className: "text-orange-600 dark:text-orange-400",
+  },
+  {
+    exts: ["xls", "xlsx", "csv"],
+    icon: FileSpreadsheet,
+    className: "text-green-600 dark:text-green-400",
+  },
+  {
+    exts: ["sh", "bat", "cmd", "ps1", "zsh"],
+    icon: FileTerminal,
+    className: "text-zinc-600 dark:text-zinc-300",
+  },
+]
+
+/**
+ * 取文件名扩展名（小写，无点）；无扩展名返回空串。
+ */
+function extOf(name: string): string {
+  const index = name.lastIndexOf(".")
+  return index > 0 ? name.slice(index + 1).toLowerCase() : ""
+}
+
+/**
+ * 文件 / 文件夹图标：文件按扩展名区分图标与配色，
+ * 文件夹区分普通（蓝色）与已映射（FolderSymlink 主色），展开态用 FolderOpen。
+ */
+export function FileIcon({
+  name,
+  folder,
+  mapped = false,
+  expanded = false,
+  className,
+}: {
+  name: string
+  folder: boolean
+  mapped?: boolean
+  expanded?: boolean
+  className?: string
+}) {
+  if (folder) {
+    const Icon = mapped ? FolderSymlink : expanded ? FolderOpen : FolderClosed
+    return (
+      <Icon
+        className={cn(
+          "size-3.5 shrink-0",
+          mapped ? "text-primary" : "text-sky-600 dark:text-sky-400",
+          className,
+        )}
+      />
+    )
+  }
+  const rule = FILE_ICON_RULES.find((item) => item.exts.includes(extOf(name)))
+  const Icon = rule?.icon ?? File
+  return (
+    <Icon
+      className={cn(
+        "size-3.5 shrink-0",
+        rule?.className ?? "text-muted-foreground",
+        className,
+      )}
+    />
+  )
+}

mactfsui/app/components/explorer/folder-items-panel.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useState } from "react"
-import { FileText, FolderClosed, Loader2, RefreshCw } from "lucide-react"
+import { AlertCircle, FolderOpen, RefreshCw } from "lucide-react"
 
 import { Button } from "~/components/ui/button"
 
 import { FileTargetMenu } from "~/components/app/file-target-menu"
+import { FileIcon } from "~/components/explorer/file-icon"
 import { Badge } from "~/components/ui/badge"
 import {
   Table,
@@ -127,7 +128,7 @@ export function FolderItemsPanel({
   })
 
   return (
-    <section className="flex h-full min-w-0 flex-1 flex-col bg-background">
+    <section className="flex h-full min-w-0 flex-1 flex-col overflow-hidden rounded-xl border bg-card shadow-card">
       <div className="flex h-9 shrink-0 items-center gap-2 border-b px-3">
         <span className="shrink-0 text-xs text-muted-foreground">当前路径</span>
         <span className="min-w-0 truncate font-mono text-xs">{selectedServerPath}</span>
@@ -152,23 +153,26 @@ export function FolderItemsPanel({
       </div>
 
       <FileTargetMenu target={currentFolderTarget} onAction={onFileAction}>
-      <div className="min-h-0 flex-1 overflow-auto">
+      {/* 由 table-container 自身承担纵横滚动：表头 sticky 不随内容滚走，横向滚动条始终贴可视区底部 */}
+      <div className="min-h-0 flex-1 overflow-hidden [&_[data-slot=table-container]]:h-full [&_[data-slot=table-container]]:overflow-auto">
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground">
-            <Loader2 className="size-4 animate-spin" />
-            正在加载目录…
-          </div>
+          <ItemsSkeleton />
         ) : error ? (
-          <div className="flex h-full items-center justify-center p-6 text-sm text-destructive">
-            {error}
+          <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
+            <AlertCircle className="size-8 text-destructive/60" />
+            <p className="text-sm text-destructive">{error}</p>
           </div>
         ) : rows.length === 0 ? (
-          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-            当前目录为空
+          <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center">
+            <FolderOpen className="size-8 text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground">当前目录为空</p>
+            <p className="text-xs text-muted-foreground/70">
+              右键空白处可对当前目录执行获取、映射或添加本地文件
+            </p>
           </div>
         ) : (
           <Table>
-            <TableHeader className="sticky top-0 z-10 bg-background">
+            <TableHeader className="sticky top-0 z-10 bg-card">
               <TableRow className="hover:bg-transparent">
                 <TableHead className="h-8 text-xs text-muted-foreground">名称</TableHead>
                 <TableHead className="h-8 w-24 text-xs text-muted-foreground">状态</TableHead>
@@ -182,7 +186,7 @@ export function FolderItemsPanel({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {rows.map((row) => {
+              {rows.map((row, index) => {
                 const selected = row.item.serverPath === selectedItemPath
                 const target = makeFileTarget({
                   source: "list",
@@ -199,7 +203,8 @@ export function FolderItemsPanel({
                   >
                   <TableRow
                     data-state={selected ? "selected" : undefined}
-                    className="cursor-default select-none"
+                    className="animate-in fade-in cursor-default select-none fill-mode-backwards duration-200"
+                    style={{ animationDelay: `${Math.min(index, 12) * 18}ms` }}
                     onClick={() => setSelectedItemPath(row.item.serverPath)}
                     onContextMenu={(event) => {
                       // 阻止冒泡到外层「当前目录」菜单，避免双菜单。
@@ -214,19 +219,20 @@ export function FolderItemsPanel({
                   >
                     <TableCell className="py-1.5">
                       <span className="flex items-center gap-1.5" title={row.item.serverPath}>
-                        {row.item.folder ? (
-                          <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
-                        ) : (
-                          <FileText className="size-3.5 shrink-0 text-muted-foreground" />
-                        )}
+                        <FileIcon
+                          name={row.item.name}
+                          folder={row.item.folder}
+                          mapped={row.item.folder && row.localPath != null}
+                        />
                         <span className="truncate text-sm">{row.item.name}</span>
                       </span>
                     </TableCell>
                     <TableCell className="py-1.5">
                       <Badge
                         variant="secondary"
-                        className={cn("rounded-md", statusBadgeClass(row.localState))}
+                        className={cn("gap-1.5 rounded-md", statusBadgeClass(row.localState))}
                       >
+                        <span className="size-1.5 rounded-full bg-current opacity-60" />
                         {statusLabel(row.localState)}
                       </Badge>
                     </TableCell>
@@ -269,3 +275,25 @@ export function FolderItemsPanel({
     </section>
   )
 }
+
+/**
+ * 目录加载骨架屏：模拟表格行的占位条，替代纯文字 loading。
+ */
+function ItemsSkeleton() {
+  return (
+    <div className="space-y-2 p-3">
+      {Array.from({ length: 9 }).map((_, index) => (
+        <div
+          key={index}
+          className="flex animate-pulse items-center gap-3"
+          style={{ animationDelay: `${index * 80}ms` }}
+        >
+          <span className="size-4 rounded bg-muted" />
+          <span className="h-3.5 rounded bg-muted" style={{ width: `${160 + ((index * 53) % 120)}px` }} />
+          <span className="h-3.5 w-14 rounded-full bg-muted" />
+          <span className="ml-auto h-3 w-28 rounded bg-muted" />
+        </div>
+      ))}
+    </div>
+  )
+}

mactfsui/app/components/explorer/source-tree-panel.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react"
-import { ChevronRight, FolderClosed, FolderOpen, Loader2, RefreshCw } from "lucide-react"
+import { ChevronRight, Loader2, RefreshCw } from "lucide-react"
 
 import { FileTargetMenu } from "~/components/app/file-target-menu"
+import { FileIcon } from "~/components/explorer/file-icon"
 import { Button } from "~/components/ui/button"
 import { ScrollArea } from "~/components/ui/scroll-area"
 import { api } from "~/lib/api"
@@ -12,6 +13,7 @@ import {
   getAncestorPaths,
   makeFileTarget,
   normalizeServerPath,
+  resolveLocalPath,
 } from "~/lib/tfs"
 import { cn } from "~/lib/utils"
 
@@ -127,9 +129,11 @@ export function SourceTreePanel({
   )
 
   return (
-    <aside className="flex h-full w-[280px] shrink-0 flex-col border-r bg-sidebar">
+    <aside className="flex h-full w-[280px] shrink-0 flex-col overflow-hidden rounded-xl border bg-card shadow-card">
       <div className="flex h-9 shrink-0 items-center gap-2 border-b px-3">
-        <span className="text-xs font-medium text-muted-foreground">源码目录</span>
+        <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
+          源码目录
+        </span>
         <span className="ml-auto max-w-28 truncate text-xs text-muted-foreground">{collection}</span>
         <Button
           variant="ghost"
@@ -200,6 +204,7 @@ function TreeNode({
   const isSelected = selectedServerPath === path
   // 未加载前默认认为可能有子目录；加载后子目录为空则视为叶子。
   const isLeaf = children != null && children.length === 0
+  const isMapped = resolveLocalPath(mappings, path) != null
   const target = makeFileTarget({ source: "tree", folder: true, serverPath: path, mappings })
 
   return (
@@ -207,8 +212,8 @@ function TreeNode({
       <FileTargetMenu target={target} onAction={onFileAction}>
         <div
           className={cn(
-            "group flex h-7 items-center rounded-md pr-1",
-            isSelected ? "bg-primary/10" : "hover:bg-muted",
+            "group flex h-7 items-center rounded-md pr-1 transition-colors duration-150",
+            isSelected ? "bg-sidebar-accent" : "hover:bg-sidebar-accent/60",
           )}
           style={{ paddingLeft: `${depth * 14 + 2}px` }}
         >
@@ -220,10 +225,13 @@ function TreeNode({
                 type="button"
                 aria-label={isExpanded ? "收起目录" : "展开目录"}
                 onClick={() => onToggle(path)}
-                className="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                className="flex size-5 items-center justify-center rounded text-muted-foreground transition-colors duration-150 hover:text-foreground"
               >
                 <ChevronRight
-                  className={cn("size-3.5 transition-transform", isExpanded && "rotate-90")}
+                  className={cn(
+                    "size-3.5 transition-transform duration-200 ease-out-quart",
+                    isExpanded && "rotate-90",
+                  )}
                 />
               </button>
             )}
@@ -233,11 +241,7 @@ function TreeNode({
             onClick={() => onSelect(path)}
             className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
           >
-            {isExpanded && !isLeaf ? (
-              <FolderOpen className="size-3.5 shrink-0 text-muted-foreground" />
-            ) : (
-              <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
-            )}
+            <FileIcon name={name} folder mapped={isMapped} expanded={isExpanded && !isLeaf} />
             <span
               className={cn(
                 "truncate text-sm",
@@ -249,8 +253,9 @@ function TreeNode({
           </button>
         </div>
       </FileTargetMenu>
-      {isExpanded &&
-        children?.map((child) => (
+      {isExpanded && children != null && children.length > 0 && (
+        <div className="animate-in fade-in slide-in-from-top-1 duration-200">
+          {children.map((child) => (
             <TreeNode
               key={child.serverPath}
               path={child.serverPath}
@@ -267,5 +272,7 @@ function TreeNode({
             />
           ))}
         </div>
+      )}
+    </div>
   )
 }

mactfsui/app/components/inspector/changes-panel.tsx

@@ -66,9 +66,11 @@ export function ChangesPanel({
   }, [onCheckin, included, comment])
 
   return (
-    <aside className="flex h-full w-[340px] shrink-0 flex-col border-l bg-sidebar">
+    <aside className="flex h-full w-[340px] shrink-0 flex-col overflow-hidden rounded-xl border bg-card shadow-card">
       <div className="flex h-9 shrink-0 items-center gap-2 border-b px-3">
-        <span className="text-xs font-medium text-muted-foreground">挂起更改</span>
+        <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
+          挂起更改
+        </span>
         {pendingChanges.length > 0 && (
           <span className="ml-auto text-xs text-muted-foreground">{pendingChanges.length} 项</span>
         )}
@@ -246,8 +248,9 @@ function PendingRow({
         </span>
         <Badge
           variant="secondary"
-          className={cn("shrink-0 rounded-md", statusBadgeClass(change.status))}
+          className={cn("shrink-0 gap-1.5 rounded-md", statusBadgeClass(change.status))}
         >
+          <span className="size-1.5 rounded-full bg-current opacity-60" />
           {statusLabel(change.status)}
         </Badge>
       </div>

mactfsui/app/components/logs/console-panel.tsx

@@ -60,9 +60,11 @@ export function ConsolePanel({
   )
 
   return (
-    <footer className="flex h-[180px] shrink-0 flex-col border-t bg-background">
+    <footer className="flex h-full flex-col overflow-hidden rounded-xl border bg-card shadow-card">
       <div className="flex h-8 shrink-0 items-center gap-2 border-b px-3">
-        <span className="text-xs font-medium text-muted-foreground">操作日志</span>
+        <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
+          操作日志
+        </span>
         {busy && (
           <span className="flex items-center gap-1.5 text-xs text-primary">
             <Loader2 className="size-3 animate-spin" />
@@ -95,7 +97,8 @@ export function ConsolePanel({
             {ordered.map((entry, index) => (
               <li
                 key={`${entry.startedAt}-${entry.operation}-${index}`}
-                className="flex h-7 items-center gap-2 rounded px-1.5 text-xs hover:bg-muted"
+                className="animate-in fade-in slide-in-from-top-1 flex h-7 items-center gap-2 rounded fill-mode-backwards px-1.5 text-xs duration-200 transition-colors hover:bg-muted"
+                style={{ animationDelay: `${Math.min(index, 6) * 25}ms` }}
                 title={entry.errorMessage ?? entry.summary}
               >
                 {entry.success ? (

mactfsui/app/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "~/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px active:not-aria-[haspopup]:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

mactfsui/app/components/ui/checkbox.tsx

@@ -19,7 +19,7 @@ function Checkbox({
     >
       <CheckboxPrimitive.Indicator
         data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+        className="animate-in zoom-in-50 fade-in grid place-content-center text-current duration-150 [&>svg]:size-3.5"
       >
         <CheckIcon
         />

mactfsui/app/components/ui/dialog.tsx

@@ -37,7 +37,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/20 duration-200 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150",
         className
       )}
       {...props}
@@ -59,7 +59,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "ease-out-quart fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border bg-popover p-4 text-sm text-popover-foreground shadow-dialog duration-200 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-open:slide-in-from-top-1 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:duration-150",
           className
         )}
         {...props}
@@ -128,7 +128,7 @@ function DialogTitle({
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "font-heading text-base leading-none font-medium",
+        "font-heading text-base leading-none font-semibold tracking-tight",
         className
       )}
       {...props}

mactfsui/app/components/ui/scroll-area.tsx

@@ -44,7 +44,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-full bg-border"
+        className="relative flex-1 rounded-full bg-foreground/25 transition-colors hover:bg-foreground/40"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )

mactfsui/app/components/ui/toaster.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from "react"
+import { AlertCircle, CheckCircle2, Loader2 } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+// 轻量 toast：success / error 自动消失，loading 常驻直到被同 id 更新或手动关闭。
+export type ToastKind = "success" | "error" | "loading"
+
+export interface ToastItem {
+  id: string
+  kind: ToastKind
+  text: string
+}
+
+type Listener = (toasts: ToastItem[]) => void
+
+// 模块级单例状态，让任意调用方无需 context 即可弹出 toast。
+let currentToasts: ToastItem[] = []
+const listeners = new Set<Listener>()
+const dismissTimers = new Map<string, ReturnType<typeof setTimeout>>()
+
+const AUTO_DISMISS_MS = 3200
+const MAX_VISIBLE = 4
+
+/**
+ * 通知所有挂载中的 Toaster 重新渲染。
+ */
+function emit() {
+  for (const listener of listeners) {
+    listener(currentToasts)
+  }
+}
+
+/**
+ * 关闭指定 toast。
+ */
+export function dismissToast(id: string) {
+  const timer = dismissTimers.get(id)
+  if (timer) {
+    clearTimeout(timer)
+    dismissTimers.delete(id)
+  }
+  currentToasts = currentToasts.filter((item) => item.id !== id)
+  emit()
+}
+
+/**
+ * 展示或更新一条 toast：同 id 复用同一条目并重置自动消失计时；
+ * loading 类型不自动消失，等待后续同 id 的 success / error 替换。
+ */
+export function showToast(input: { id?: string; kind: ToastKind; text: string }): string {
+  const id = input.id ?? `toast-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`
+  const existing = currentToasts.find((item) => item.id === id)
+  const next: ToastItem = { id, kind: input.kind, text: input.text }
+  currentToasts = existing
+    ? currentToasts.map((item) => (item.id === id ? next : item))
+    : [...currentToasts.slice(-(MAX_VISIBLE - 1)), next]
+  const timer = dismissTimers.get(id)
+  if (timer) {
+    clearTimeout(timer)
+    dismissTimers.delete(id)
+  }
+  if (input.kind !== "loading") {
+    dismissTimers.set(
+      id,
+      setTimeout(() => dismissToast(id), AUTO_DISMISS_MS),
+    )
+  }
+  emit()
+  return id
+}
+
+// toast 类型对应的图标、强调条与边框配色：彩色左侧条 + 着色边框提高辨识度。
+const KIND_VISUALS: Record<
+  ToastKind,
+  { icon: typeof CheckCircle2; iconClass: string; barClass: string; borderClass: string }
+> = {
+  success: {
+    icon: CheckCircle2,
+    iconClass: "text-emerald-600 dark:text-emerald-400",
+    barClass: "bg-emerald-500",
+    borderClass: "border-emerald-500/35",
+  },
+  error: {
+    icon: AlertCircle,
+    iconClass: "text-destructive",
+    barClass: "bg-destructive",
+    borderClass: "border-destructive/40",
+  },
+  loading: {
+    icon: Loader2,
+    iconClass: "animate-spin text-primary",
+    barClass: "bg-primary",
+    borderClass: "border-primary/35",
+  },
+}
+
+/**
+ * toast 挂载点：固定在窗口右上角（顶栏下方），新条目自上滑入，点击可关闭。
+ * 彩色强调条 + 着色边框 + 毛玻璃底，保证进度与结果提示足够显眼。
+ */
+export function Toaster() {
+  const [items, setItems] = useState<ToastItem[]>([])
+
+  useEffect(() => {
+    const listener: Listener = (toasts) => setItems([...toasts])
+    listeners.add(listener)
+    setItems([...currentToasts])
+    return () => {
+      listeners.delete(listener)
+    }
+  }, [])
+
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="pointer-events-none fixed top-14 right-3 z-[60] flex w-[380px] flex-col gap-2">
+      {items.map((item) => {
+        const visual = KIND_VISUALS[item.kind]
+        const Icon = visual.icon
+        return (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => dismissToast(item.id)}
+            className={cn(
+              "animate-in fade-in slide-in-from-top-3 ease-out-quart pointer-events-auto relative flex items-start gap-2.5 overflow-hidden rounded-xl border bg-popover/95 py-3 pr-3.5 pl-4 text-left text-sm font-medium shadow-overlay backdrop-blur-md duration-250",
+              visual.borderClass,
+            )}
+          >
+            <span className={cn("absolute inset-y-0 left-0 w-1", visual.barClass)} />
+            <Icon className={cn("mt-0.5 size-4.5 shrink-0", visual.iconClass)} />
+            <span className="min-w-0 break-words">{item.text}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

mactfsui/app/hooks/use-theme.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useState } from "react"
+
+// 主题偏好：跟随系统 / 强制亮色 / 强制暗色。
+export type ThemePreference = "system" | "light" | "dark"
+
+const STORAGE_KEY = "mactfs.theme"
+const CYCLE_ORDER: ThemePreference[] = ["system", "light", "dark"]
+
+/**
+ * 当前系统外观是否为暗色。
+ */
+function systemPrefersDark(): boolean {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+}
+
+/**
+ * 由偏好推导是否应启用暗色。
+ */
+function resolveIsDark(preference: ThemePreference): boolean {
+  return preference === "dark" || (preference === "system" && systemPrefersDark())
+}
+
+/**
+ * 读取持久化的主题偏好，无记录或不可用时默认跟随系统。
+ */
+function loadPreference(): ThemePreference {
+  if (typeof window === "undefined") {
+    return "system"
+  }
+  const raw = window.localStorage.getItem(STORAGE_KEY)
+  return raw === "light" || raw === "dark" ? raw : "system"
+}
+
+/**
+ * 应用主题到根节点：切换 .dark class，并短暂启用全局颜色过渡动画。
+ */
+function applyTheme(preference: ThemePreference) {
+  const root = document.documentElement
+  root.classList.add("theme-transition")
+  root.classList.toggle("dark", resolveIsDark(preference))
+  window.setTimeout(() => root.classList.remove("theme-transition"), 320)
+}
+
+/**
+ * 明暗主题 hook：维护「跟随系统 / 亮 / 暗」三态偏好，持久化到 localStorage，
+ * 跟随系统时监听系统外观变化自动切换。
+ */
+export function useTheme() {
+  const [preference, setPreferenceState] = useState<ThemePreference>(loadPreference)
+
+  useEffect(() => {
+    applyTheme(preference)
+    if (preference !== "system") {
+      return
+    }
+    const media = window.matchMedia("(prefers-color-scheme: dark)")
+    const onChange = () => applyTheme("system")
+    media.addEventListener("change", onChange)
+    return () => media.removeEventListener("change", onChange)
+  }, [preference])
+
+  /**
+   * 设置主题偏好并持久化。
+   */
+  const setPreference = useCallback((next: ThemePreference) => {
+    setPreferenceState(next)
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next)
+    } catch {
+      // 本地存储不可用时仅在当前会话生效
+    }
+  }, [])
+
+  /**
+   * 按 跟随系统 → 亮色 → 暗色 顺序循环切换。
+   */
+  const cycle = useCallback(() => {
+    const index = CYCLE_ORDER.indexOf(preference)
+    setPreference(CYCLE_ORDER[(index + 1) % CYCLE_ORDER.length])
+  }, [preference, setPreference])
+
+  return { preference, setPreference, cycle }
+}

mactfsui/app/lib/api/endpoints.ts

@@ -225,8 +225,14 @@ export function getFileContent(params: { serverPath?: string; localPath?: string
 
 /**
  * 对已映射目录执行目录对比。
+ * includeLocalOnly=false 时跳过本地全量扫描，仅本地存在的项（如 node_modules）不计入差异。
  */
-export function compareFolder(body: { serverPath: string; localPath?: string; recursive?: boolean }) {
+export function compareFolder(body: {
+  serverPath: string
+  localPath?: string
+  recursive?: boolean
+  includeLocalOnly?: boolean
+}) {
   return apiClient.post<{ diffs: FolderDiffItem[] }>("/api/compare/folder", { body })
 }
 

mactfsui/app/lib/platform.ts

@@ -0,0 +1,11 @@
+/**
+ * 是否运行在 macOS 的 Electron 窗口内。
+ * 用于判断隐藏式标题栏场景：需要为红绿灯预留空间并启用顶栏拖拽。
+ */
+export function isMacElectron(): boolean {
+  if (typeof navigator === "undefined") {
+    return false
+  }
+  const ua = navigator.userAgent
+  return ua.includes("Electron") && ua.includes("Macintosh")
+}

mactfsui/app/lib/recent-servers.ts

@@ -0,0 +1,47 @@
+// 登录页「最近连接」本地记录，仅存非敏感字段（不存密码）。
+export interface RecentServer {
+  serverUri: string
+  domain: string
+  username: string
+  lastUsedAt: number
+}
+
+const STORAGE_KEY = "mactfs.recent-servers"
+const MAX_ENTRIES = 5
+
+/**
+ * 读取最近连接记录，本地存储不可用或数据损坏时返回空列表。
+ */
+export function loadRecentServers(): RecentServer[] {
+  if (typeof window === "undefined") {
+    return []
+  }
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) {
+      return []
+    }
+    const parsed = JSON.parse(raw) as RecentServer[]
+    return Array.isArray(parsed) ? parsed : []
+  } catch {
+    return []
+  }
+}
+
+/**
+ * 写入一条最近连接记录：按 serverUri + username 去重置顶，最多保留 5 条。
+ */
+export function saveRecentServer(entry: Omit<RecentServer, "lastUsedAt">): RecentServer[] {
+  const next: RecentServer[] = [
+    { ...entry, lastUsedAt: Date.now() },
+    ...loadRecentServers().filter(
+      (item) => item.serverUri !== entry.serverUri || item.username !== entry.username,
+    ),
+  ].slice(0, MAX_ENTRIES)
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+  } catch {
+    // 本地存储写入失败不影响连接流程
+  }
+  return next
+}

mactfsui/app/root.tsx

@@ -16,6 +16,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* 首屏前同步应用主题偏好，避免暗色模式闪白 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem("mactfs.theme");var d=t==="dark"||(t!=="light"&&matchMedia("(prefers-color-scheme: dark)").matches);if(d)document.documentElement.classList.add("dark")}catch(e){}})()`,
+          }}
+        />
         <Meta />
         <Links />
       </head>

mactfsui/app/routes/home.tsx

@@ -11,6 +11,13 @@ import type { WorkspaceSession } from "~/lib/tfs/session"
 // 顶层视图状态：检测服务、服务未就绪、连接入口、已进入工作台。
 type AppPhase = "checking" | "blocked" | "connect" | "workspace"
 
+/**
+ * 页面标题（同时作为 Electron 窗口标题）。
+ */
+export function meta() {
+  return [{ title: "MacTFS" }]
+}
+
 /**
  * 第一版前端入口：先确保本地服务就绪，再走连接 / Collection / Workspace 流程，
  * 进入工作台后持有固定上下文，并统一维护左树与中间列表共享的当前路径（FE-004）。
@@ -88,7 +95,7 @@ export default function Home() {
   return (
     <div className="flex min-h-svh items-center justify-center bg-muted/40 p-6">
       <div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
-        <h1 className="text-base font-semibold">macTFS</h1>
+        <h1 className="text-base font-semibold">MacTFS</h1>
         <p className="mt-1 text-sm text-muted-foreground">本地源码管理工作台</p>
 
         {phase === "checking" && (

mactfsui/electron/main.cjs

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, dialog, shell } = require("electron")
+const { app, BrowserWindow, ipcMain, dialog, shell, nativeImage, nativeTheme } = require("electron")
 const path = require("node:path")
 const fs = require("node:fs")
 const os = require("node:os")
@@ -260,13 +260,41 @@ function registerIpcHandlers() {
   })
 }
 
+/**
+ * 解析应用图标路径：开发态用 public/logo.png，打包态用构建产物中的 logo.png。
+ */
+function resolveAppIcon() {
+  const candidates = [
+    path.join(__dirname, "..", "public", "logo.png"),
+    path.join(__dirname, "..", "build", "client", "logo.png"),
+  ]
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate)) {
+      return candidate
+    }
+  }
+  return null
+}
+
 /**
  * 创建 Electron 主窗口，开发环境加载本地服务，生产环境加载构建后的静态页面。
  */
 function createWindow() {
+  const iconPath = resolveAppIcon()
   const mainWindow = new BrowserWindow({
     width: 1280,
     height: 840,
+    minWidth: 980,
+    minHeight: 640,
+    title: "MacTFS",
+    // 预设与主题一致的背景色并延迟显示，避免启动白闪。
+    show: false,
+    backgroundColor: nativeTheme.shouldUseDarkColors ? "#1d1d20" : "#fafafa",
+    // macOS 隐藏系统标题栏，红绿灯融入应用顶栏；其它平台回退系统标题栏。
+    ...(process.platform === "darwin"
+      ? { titleBarStyle: "hiddenInset", trafficLightPosition: { x: 16, y: 16 } }
+      : {}),
+    ...(iconPath ? { icon: nativeImage.createFromPath(iconPath) } : {}),
     webPreferences: {
       preload: path.join(__dirname, "preload.cjs"),
       contextIsolation: true,
@@ -274,6 +302,12 @@ function createWindow() {
     },
   })
 
+  mainWindow.once("ready-to-show", () => {
+    // 启动即铺满当前屏幕可视区域（保留程序坞与菜单栏，非独立全屏 Space）。
+    mainWindow.maximize()
+    mainWindow.show()
+  })
+
   if (process.env.NODE_ENV === "development") {
     mainWindow.loadURL("http://localhost:5173")
     return
@@ -282,7 +316,14 @@ function createWindow() {
   mainWindow.loadFile(path.join(__dirname, "../build/client/index.html"))
 }
 
+app.setName("MacTFS")
+
 app.whenReady().then(() => {
+  // macOS 程序坞图标在开发态需要显式设置（BrowserWindow icon 仅对 Windows / Linux 生效）。
+  const iconPath = resolveAppIcon()
+  if (process.platform === "darwin" && iconPath && app.dock) {
+    app.dock.setIcon(nativeImage.createFromPath(iconPath))
+  }
   registerIpcHandlers()
   createWindow()
 

mactfsui/package.json

@@ -12,7 +12,6 @@
     "format": "prettier --write \"**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@fontsource-variable/roboto-slab": "^5.2.8",
     "@react-router/node": "7.13.1",
     "@react-router/serve": "7.13.1",
     "class-variance-authority": "^0.7.1",

mactfsui/pnpm-lock.yaml

@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@fontsource-variable/roboto-slab':
-        specifier: ^5.2.8
-        version: 5.2.8
       '@react-router/node':
         specifier: 7.13.1
         version: 7.13.1(react-router@7.13.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@5.9.3)
@@ -416,9 +413,6 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
-  '@fontsource-variable/roboto-slab@5.2.8':
-    resolution: {integrity: sha512-cdvOSwocP50xS01gXqnGxw7uFcCZQgn1IDlqiAmNuZP4uEVScYAKMDC+aWsbP1grn9QdMJ2frhcuVBNXniBVGA==}
-
   '@hapi/address@5.1.1':
     resolution: {integrity: sha512-A+po2d/dVoY7cYajycYI43ZbYMXukuopIsqCjh5QzsBCipDtdofHntljDlpccMjIfTy6UOkg+5KPriwYch2bXA==}
     engines: {node: '>=14.0.0'}
@@ -3742,8 +3736,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
-  '@fontsource-variable/roboto-slab@5.2.8': {}
-
   '@hapi/address@5.1.1':
     dependencies:
       '@hapi/hoek': 11.0.7

mactfsui/scripts/e2e-electron-part2.mjs

@@ -0,0 +1,127 @@
+// FE-034 补充回归：目录已被既有 Workspace 映射（含用户真实挂起更改），
+// 因此跳过创建/取消映射，只验证 目录对比、签出→Diff→撤销（仅 ai-smoke 文件）、操作日志。
+import { _electron as electron } from "playwright-core"
+import { mkdirSync } from "node:fs"
+import path from "node:path"
+
+const ROOT = process.cwd()
+const SHOT_DIR = path.join(ROOT, ".e2e-shots")
+mkdirSync(SHOT_DIR, { recursive: true })
+
+const TEST_TREE_CHAIN = ["北京排水集团人力系统", "5SRC", "MicroFront", "subapp_pm", "mactfs"]
+const SMOKE_FILE = "ai-smoke-20260606051038.txt"
+
+const results = []
+/** 记录一步结果并打印。 */
+function record(step, ok, detail = "") {
+  results.push({ step, ok, detail })
+  console.log(`${ok ? "PASS" : "FAIL"} | ${step}${detail ? " | " + detail : ""}`)
+}
+
+/** 截图保存。 */
+async function shot(win, name) {
+  await win.screenshot({ path: path.join(SHOT_DIR, `${name}.png`) })
+}
+
+const app = await electron.launch({
+  args: ["electron/main.cjs"],
+  cwd: ROOT,
+  env: { ...process.env, NODE_ENV: "development" },
+})
+
+try {
+  const win = await app.firstWindow()
+  win.setDefaultTimeout(90000)
+
+  // 进入工作台并导航到测试目录
+  await win.getByRole("button", { name: "连接 TFS" }).waitFor({ timeout: 90000 })
+  await win.getByRole("button", { name: "连接 TFS" }).click()
+  await win.getByText("选择 Collection").waitFor({ timeout: 120000 })
+  await win.locator("ul button", { hasText: "PKUSEHR" }).first().click()
+  await win.getByRole("button", { name: "进入工作台" }).click()
+  await win.getByText("源码目录").waitFor({ timeout: 120000 })
+  const tree = win.locator("aside").first()
+  for (const name of TEST_TREE_CHAIN) {
+    const node = tree.getByText(name, { exact: true }).first()
+    await node.waitFor({ timeout: 120000 })
+    await node.click()
+    await win.waitForTimeout(2500)
+  }
+  record("0 进入工作台并导航到测试目录", true)
+
+  // A. 目录对比（目录已映射 → 菜单应可用；忽略仅本地/仅服务器项保持默认）
+  await tree.getByText("mactfs", { exact: true }).first().click({ button: "right" })
+  const compareItem = win.getByRole("menuitem", { name: "目录对比", exact: true })
+  await compareItem.waitFor({ timeout: 10000 })
+  await compareItem.click()
+  await win.locator("[data-slot=dialog-title]", { hasText: "目录对比" }).waitFor()
+  await shot(win, "12-compare-options")
+  // 新交互：先确认选项再执行
+  const startButton = win.getByRole("button", { name: /开始对比|执行对比|对比/ }).first()
+  if ((await startButton.count()) > 0) {
+    await startButton.click()
+  }
+  await win.waitForTimeout(10000)
+  const compareText = await win.locator("[data-slot=dialog-content]").innerText()
+  record("A 目录对比弹窗", !compareText.includes("目录对比失败"), compareText.slice(0, 100).replace(/\n/g, " "))
+  await shot(win, "12-compare")
+  await win.keyboard.press("Escape")
+  await win.locator("[data-slot=dialog-content]").waitFor({ state: "detached", timeout: 10000 }).catch(() => {})
+  await win.waitForTimeout(800)
+
+  // B. 签出 ai-smoke 文件 → 挂起更改出现 → 与最新版本比较 → 撤销（只动这一个文件）
+  const fileRow = win.locator("section table tbody tr").filter({ hasText: SMOKE_FILE }).first()
+  await fileRow.click({ button: "right" })
+  const checkoutItem = win.getByRole("menuitem", { name: "签出编辑", exact: true })
+  await checkoutItem.waitFor({ timeout: 10000 })
+  await checkoutItem.click()
+  await win.waitForTimeout(15000)
+  const pendingPanel = await win.locator("aside").nth(1).innerText()
+  const hasPending = pendingPanel.includes(SMOKE_FILE)
+  record("B1 签出文件产生挂起更改", hasPending, "")
+  await shot(win, "13-pending")
+
+  if (hasPending) {
+    const row = win.locator("aside").nth(1).getByText(SMOKE_FILE).first()
+    await row.click({ button: "right" })
+    const diffItem = win.getByRole("menuitem", { name: "与最新版本比较", exact: true })
+    if ((await diffItem.count()) > 0) {
+      await diffItem.click()
+      await win.waitForTimeout(8000)
+      const diffText = await win.locator("[data-slot=dialog-content]").innerText()
+      record("B2 本地 vs latest Diff（Monaco）", diffText.includes("差异") || diffText.includes("一致"), diffText.slice(0, 80).replace(/\n/g, " "))
+      await shot(win, "14-diff")
+      await win.keyboard.press("Escape")
+      await win.locator("[data-slot=dialog-content]").waitFor({ state: "detached", timeout: 10000 }).catch(() => {})
+      await win.waitForTimeout(800)
+    }
+    // 仅撤销 ai-smoke 这一个文件，避免影响用户已有挂起更改
+    await row.click({ button: "right" })
+    await win.getByRole("menuitem", { name: "撤销更改", exact: true }).click()
+    await win.waitForTimeout(12000)
+    const afterUndo = await win.locator("aside").nth(1).innerText()
+    record("B3 撤销该文件挂起更改", !afterUndo.includes(SMOKE_FILE), "")
+    await shot(win, "15-undone")
+  }
+
+  // C. 操作日志面板有真实记录
+  const consoleText = await win.locator("footer").innerText()
+  record("C 操作日志记录", /checkout|undo|connect|serverTree|folderDiff|compare/i.test(consoleText), consoleText.split("\n").slice(0, 5).join(" | "))
+  await shot(win, "16-console")
+} catch (error) {
+  record("EXCEPTION", false, String(error).slice(0, 300))
+  try {
+    const win = await app.firstWindow()
+    await shot(win, "98-exception")
+  } catch {}
+} finally {
+  await app.close().catch(() => {})
+}
+
+console.log("\n==== RESULT SUMMARY ====")
+for (const item of results) {
+  console.log(`${item.ok ? "✅" : "❌"} ${item.step}${item.detail ? " — " + item.detail : ""}`)
+}
+const failed = results.filter((item) => !item.ok).length
+console.log(`\n${results.length - failed}/${results.length} passed`)
+process.exit(failed > 0 ? 1 : 0)

mactfsui/scripts/e2e-electron-part3.mjs

@@ -0,0 +1,109 @@
+// FE-034 清理与诊断：撤销 part2 遗留的 ai-smoke 签出；再从文件列表打开「与最新版本比较」
+// 复现 Diff 弹窗导致窗口关闭的问题，捕获 renderer 崩溃与主进程输出。
+import { _electron as electron } from "playwright-core"
+import { mkdirSync } from "node:fs"
+import path from "node:path"
+
+const ROOT = process.cwd()
+const SHOT_DIR = path.join(ROOT, ".e2e-shots")
+mkdirSync(SHOT_DIR, { recursive: true })
+
+const TEST_TREE_CHAIN = ["北京排水集团人力系统", "5SRC", "MicroFront", "subapp_pm", "mactfs"]
+const SMOKE_FILE = "ai-smoke-20260606051038.txt"
+
+const results = []
+function record(step, ok, detail = "") {
+  results.push({ step, ok, detail })
+  console.log(`${ok ? "PASS" : "FAIL"} | ${step}${detail ? " | " + detail : ""}`)
+}
+
+async function shot(win, name) {
+  await win.screenshot({ path: path.join(SHOT_DIR, `${name}.png`) }).catch(() => {})
+}
+
+const app = await electron.launch({
+  args: ["electron/main.cjs"],
+  cwd: ROOT,
+  env: { ...process.env, NODE_ENV: "development", ELECTRON_ENABLE_LOGGING: "1" },
+})
+app.process().stderr?.on("data", (chunk) => {
+  const text = String(chunk)
+  if (/error|crash|fatal/i.test(text)) {
+    console.log("[main-stderr]", text.slice(0, 400))
+  }
+})
+
+try {
+  const win = await app.firstWindow()
+  win.setDefaultTimeout(90000)
+  win.on("crash", () => console.log("[renderer] CRASHED"))
+  win.on("close", () => console.log("[renderer] window closed"))
+  win.on("console", (msg) => {
+    if (msg.type() === "error") {
+      console.log("[console.error]", msg.text().slice(0, 300))
+    }
+  })
+  win.on("pageerror", (err) => console.log("[pageerror]", String(err).slice(0, 300)))
+
+  await win.getByRole("button", { name: "连接 TFS" }).waitFor({ timeout: 90000 })
+  await win.getByRole("button", { name: "连接 TFS" }).click()
+  await win.getByText("选择 Collection").waitFor({ timeout: 120000 })
+  await win.locator("ul button", { hasText: "PKUSEHR" }).first().click()
+  await win.getByRole("button", { name: "进入工作台" }).click()
+  await win.getByText("源码目录").waitFor({ timeout: 120000 })
+  await win.waitForTimeout(5000)
+
+  // 1. 清理：撤销 ai-smoke 的遗留签出（只动这一个文件）
+  const changes = win.locator("aside").nth(1)
+  const smokeRow = changes.getByText(SMOKE_FILE).first()
+  if ((await smokeRow.count()) > 0) {
+    await smokeRow.click({ button: "right" })
+    await win.getByRole("menuitem", { name: "撤销更改", exact: true }).click()
+    await win.waitForTimeout(12000)
+    const after = await changes.innerText()
+    record("1 清理遗留签出", !after.includes(SMOKE_FILE), "")
+    await shot(win, "17-cleanup")
+  } else {
+    record("1 清理遗留签出", true, "无遗留挂起更改")
+  }
+
+  // 2. 诊断：从文件列表打开 与最新版本比较（Monaco Diff）
+  const tree = win.locator("aside").first()
+  for (const name of TEST_TREE_CHAIN) {
+    const node = tree.getByText(name, { exact: true }).first()
+    await node.waitFor({ timeout: 120000 })
+    await node.click()
+    await win.waitForTimeout(2000)
+  }
+  const fileRow = win.locator("section table tbody tr").filter({ hasText: SMOKE_FILE }).first()
+  await fileRow.click({ button: "right" })
+  const diffItem = win.getByRole("menuitem", { name: "与最新版本比较", exact: true })
+  await diffItem.waitFor({ timeout: 10000 })
+  await diffItem.click()
+  await win.waitForTimeout(3000)
+  await shot(win, "18-diff-opening")
+  await win.waitForTimeout(7000)
+  const dialogCount = await win.locator("[data-slot=dialog-content]").count()
+  if (dialogCount > 0) {
+    const diffText = await win.locator("[data-slot=dialog-content]").innerText()
+    record("2 Diff 弹窗（Monaco）", diffText.includes("差异") || diffText.includes("一致"), diffText.slice(0, 80).replace(/\n/g, " "))
+    await shot(win, "18-diff")
+    await win.keyboard.press("Escape")
+  } else {
+    record("2 Diff 弹窗（Monaco）", false, "弹窗未出现")
+  }
+} catch (error) {
+  record("EXCEPTION", false, String(error).slice(0, 300))
+  try {
+    const win = await app.firstWindow()
+    await shot(win, "97-exception")
+  } catch {}
+} finally {
+  await app.close().catch(() => {})
+}
+
+console.log("\n==== RESULT SUMMARY ====")
+for (const item of results) {
+  console.log(`${item.ok ? "✅" : "❌"} ${item.step}${item.detail ? " — " + item.detail : ""}`)
+}
+process.exit(results.some((item) => !item.ok) ? 1 : 0)

mactfsui/scripts/e2e-electron.mjs

@@ -57,6 +57,18 @@ try {
   record("3 进入工作台（固定上下文）", topbar.includes("PKUSEHR"), topbar.replace(/\n/g, " "))
   await shot(win, "03-workspace")
 
+  // 3.5 明暗主题三态切换（FE-033 回归）：跟随系统 → 亮 → 暗 → 跟随系统
+  const themeButton = win.getByRole("button", { name: /主题：/ })
+  await themeButton.click()
+  await win.waitForTimeout(400)
+  await themeButton.click()
+  await win.waitForTimeout(600)
+  const darkApplied = await win.evaluate(() => document.documentElement.classList.contains("dark"))
+  record("3.5 主题切换到暗色", darkApplied, "")
+  await shot(win, "03b-dark-workspace")
+  await themeButton.click()
+  await win.waitForTimeout(600)
+
   // 4. 逐级展开目录树到指定测试目录（懒加载真实数据）
   const tree = win.locator("aside").first()
   for (const name of TEST_TREE_CHAIN) {

mactfsui/scripts/shot-workspace.mjs

@@ -0,0 +1,49 @@
+// 快速视觉确认：进入工作台后截图亮色 / 暗色画布卡片布局，不做任何写操作。
+import { _electron as electron } from "playwright-core"
+import { mkdirSync } from "node:fs"
+import path from "node:path"
+
+const ROOT = process.cwd()
+const SHOT_DIR = path.join(ROOT, ".e2e-shots")
+mkdirSync(SHOT_DIR, { recursive: true })
+
+const app = await electron.launch({
+  args: ["electron/main.cjs"],
+  cwd: ROOT,
+  env: { ...process.env, NODE_ENV: "development" },
+})
+
+try {
+  const win = await app.firstWindow()
+  win.setDefaultTimeout(90000)
+  await win.getByRole("button", { name: "连接 TFS" }).waitFor({ timeout: 90000 })
+  await win.screenshot({ path: path.join(SHOT_DIR, "20-connect-v2.png") })
+  await win.getByRole("button", { name: "连接 TFS" }).click()
+  await win.getByText("选择 Collection").waitFor({ timeout: 120000 })
+  await win.screenshot({ path: path.join(SHOT_DIR, "21-collections-v2.png") })
+  await win.locator("ul button", { hasText: "PKUSEHR" }).first().click()
+  await win.getByRole("button", { name: "进入工作台" }).click()
+  await win.getByText("源码目录").waitFor({ timeout: 120000 })
+  await win.waitForTimeout(6000)
+  await win.screenshot({ path: path.join(SHOT_DIR, "22-workspace-cards.png") })
+  // 验证表头 sticky：滚动文件列表后表头应仍可见
+  await win.evaluate(() => {
+    const container = document.querySelector('[data-slot="table-container"]')
+    if (container) {
+      container.scrollTop = 400
+    }
+  })
+  await win.waitForTimeout(600)
+  await win.screenshot({ path: path.join(SHOT_DIR, "24-sticky-header.png") })
+  const themeButton = win.getByRole("button", { name: /主题：/ })
+  await themeButton.click()
+  await win.waitForTimeout(400)
+  await themeButton.click()
+  await win.waitForTimeout(800)
+  await win.screenshot({ path: path.join(SHOT_DIR, "23-workspace-cards-dark.png") })
+  await themeButton.click()
+  await win.waitForTimeout(400)
+  console.log("screenshots done")
+} finally {
+  await app.close().catch(() => {})
+}

task/README.md

@@ -31,14 +31,14 @@ blocked
 | Core | 12 | 12 | 100% |
 | Server API | 10 | 10 | 100% |
 | CLI | 2 | 2 | 100% |
-| Frontend | 25 | 25 | 100% |
+| Frontend | 34 | 34 | 100% |
 | Feature E2E | 0 | 5 | 0% |
 | Release | 0 | 4 | 0% |
-| Overall | 49 | 58 | 84% |
+| Overall | 58 | 67 | 87% |
 
 ## 当前阶段
 
-Feature E2E（前端含两批增强 FE-001 ~ FE-025 已全部完成，需要真实 TFS 环境）
+UI 风格改版完成（分支 `feature/ui-modern-restyle`，FE-026 ~ FE-034 全部 done，需求见 [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md)；截图见 [docs/ui-restyle-screenshots](/Users/fenghp/Desktop/DEV/project/mydev/docs/ui-restyle-screenshots)）
 
 ## 前端规范
 
@@ -47,6 +47,8 @@ Feature E2E（前端含两批增强 FE-001 ~ FE-025 已全部完成，需要真
 ## 下一步任务
 
 - [FEATURE-001-连接与目录浏览端到端验收.md](/Users/fenghp/Desktop/DEV/project/mydev/task/feature/FEATURE-001-连接与目录浏览端到端验收.md)（需要真实 TFS 环境）
+- 或切换 `feature/ui-macos-restyle` 分支开发 macOS 原生风方案做对比
+- UI 改版完成后再回到 [FEATURE-001-连接与目录浏览端到端验收.md](/Users/fenghp/Desktop/DEV/project/mydev/task/feature/FEATURE-001-连接与目录浏览端到端验收.md)（需要真实 TFS 环境）
 
 ## Core
 
@@ -116,6 +118,15 @@ Feature E2E（前端含两批增强 FE-001 ~ FE-025 已全部完成，需要真
 | [FE-023-实现分支.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-023-实现分支.md) | done | P1 |
 | [FE-024-实现合并.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-024-实现合并.md) | done | P1 |
 | [FE-025-实现访达打开与添加本地文件.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-025-实现访达打开与添加本地文件.md) | done | P0 |
+| [FE-026-建立现代桌面风设计基建.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-026-建立现代桌面风设计基建.md) | done | P0 |
+| [FE-027-Electron无缝窗口与自绘顶栏.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-027-Electron无缝窗口与自绘顶栏.md) | done | P0 |
+| [FE-028-重设计登录页.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-028-重设计登录页.md) | done | P0 |
+| [FE-029-工作台外壳与顶栏改版.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-029-工作台外壳与顶栏改版.md) | done | P0 |
+| [FE-030-目录树与文件列表精致化.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-030-目录树与文件列表精致化.md) | done | P0 |
+| [FE-031-弹窗体系统一现代风格.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-031-弹窗体系统一现代风格.md) | done | P1 |
+| [FE-032-操作反馈与微交互.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-032-操作反馈与微交互.md) | done | P1 |
+| [FE-033-明暗主题跟随系统.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-033-明暗主题跟随系统.md) | done | P1 |
+| [FE-034-UI改版回归验收.md](/Users/fenghp/Desktop/DEV/project/mydev/task/frontend/FE-034-UI改版回归验收.md) | done | P0 |
 
 ## Feature E2E
 

task/frontend/FE-026-建立现代桌面风设计基建.md

@@ -0,0 +1,76 @@
+# FE-026 建立现代桌面风设计基建
+
+## 状态
+
+done
+
+## 优先级
+
+P0
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+无
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U1
+
+## 目标
+
+把全局设计令牌升级为现代 AI 开发者工具风（参照 Codex 桌面端 / CC Switch），作为后续所有 UI 改版任务的统一基础。
+
+## 实现范围
+
+- 字体切换为系统无衬线字体栈（`-apple-system, BlinkMacSystemFont, "PingFang SC"` 等），移除 Roboto Slab 作为全局字体；代码/Diff 场景保留等宽字体
+- 重定义颜色令牌：中性灰分级底色（页面底/侧栏/卡片/悬停四档明度）、低对比 1px 边框色、单一克制 accent 色，light/dark 两套完整定义（dark 为深灰底非纯黑）
+- 统一圆角档位（卡片 8/10/12px 为主）、阴影分层（卡片几乎无阴影，浮层/弹窗轻阴影）、间距档位
+- 建立动效令牌：统一时长（150/200/250ms）与缓动曲线变量
+
+## 不在范围
+
+- 不改任何组件结构与业务逻辑
+- 不实现主题切换入口（FE-033 做）
+- 不改 Electron 窗口配置（FE-027 做）
+- 不使用毛玻璃 / vibrancy 材质
+
+## 涉及文件
+
+- `mactfsui/app/app.css`
+- `mactfsui/package.json`（如需移除字体依赖或引入 motion）
+
+## 验收标准
+
+- 全局字体为系统无衬线字体栈，观感与 Codex 桌面端 / CC Switch 同类
+- light/dark 两套 token 完整、可用，accent 色仅出现在主按钮/选中/状态点
+- 圆角、阴影、动效时长全部来自统一变量，无散落魔法值
+- `pnpm typecheck` 通过，现有页面无功能回归
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - `mactfsui/app/app.css`
+  - `mactfsui/package.json`、`mactfsui/pnpm-lock.yaml`（移除 `@fontsource-variable/roboto-slab`）
+- 实际实现内容：
+  - 全局字体切换为系统无衬线字体栈（`-apple-system / PingFang SC`…），`html` 由 `font-serif` 改为 `font-sans`；新增 `--font-mono` 等宽字体令牌；`--font-heading` 指向 sans（dialog 标题沿用）
+  - 颜色令牌重定义为中性灰分层：light 页面底 0.985 / 卡片纯白 / 侧栏 0.967 / 悬停 0.945；dark 深灰底 0.185（非纯黑）/ 卡片 0.22 / 侧栏 0.165
+  - 主色改为克制的蓝色（oklch 0.546 0.215 262.881），`--accent` 与主色解耦、改为中性悬停底色（原先 accent=紫色主色，菜单悬停会大面积铺色）
+  - 圆角基准 0.875rem → 0.625rem（sm 6 / md 8 / lg 10 / xl 14px）
+  - 新增阴影分层令牌 `--shadow-card / --shadow-overlay / --shadow-dialog`
+  - 新增动效令牌：缓动 `--ease-out-quart / --ease-spring`，时长 `--motion-fast/base/slow`（150/200/250ms）
+- 测试结果：
+  - `pnpm typecheck` 通过
+  - `pnpm build` 通过（Tailwind CSS 编译无误）
+  - 未执行 `pnpm electron:dev` 全页面人工走查（属 GUI 交互验证，留待后续任务连带走查），现有类名均基于既有 token 体系，无破坏性重命名
+- 遗留问题：
+  - 各组件中残留的散落样式（如紫色 hover 假设）将在 FE-029 ~ FE-032 按面板逐一对齐

task/frontend/FE-027-Electron无缝窗口与自绘顶栏.md

@@ -0,0 +1,75 @@
+# FE-027 Electron无缝窗口与自绘顶栏
+
+## 状态
+
+done
+
+## 优先级
+
+P0
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U2
+
+## 目标
+
+去掉系统标题栏，让窗口与应用顶栏一体成型，达到 Codex 桌面端那种「无缝」桌面应用质感。
+
+## 实现范围
+
+- BrowserWindow 配置 `titleBarStyle: "hiddenInset"`，校准 trafficLightPosition 与顶栏对齐
+- 顶栏对应区域设置 `-webkit-app-region: drag`，交互控件设置 no-drag
+- 窗口 backgroundColor 与主题 token 一致，配合 ready-to-show 消除启动白闪
+- 核对窗口默认尺寸与最小尺寸
+- 非 macOS 平台回退系统标题栏，不影响功能
+
+## 不在范围
+
+- 顶栏内容与布局重排（FE-029 做）
+- 毛玻璃 / vibrancy 材质（本批明确不做）
+- 打包签名相关配置（RELEASE 阶段做）
+
+## 涉及文件
+
+- `mactfsui/electron/main.cjs`
+- `mactfsui/app/components/app/top-bar.tsx`（仅拖拽区域标记）
+
+## 验收标准
+
+- 窗口无系统标题栏，红绿灯悬浮于顶栏内且不遮挡控件
+- 顶栏空白区可拖动窗口，按钮等控件可正常点击
+- 启动与主题切换无白闪
+- 全部既有功能无回归
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm electron:dev
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - `mactfsui/electron/main.cjs`
+  - `mactfsui/app/components/app/top-bar.tsx`
+  - `mactfsui/app/app.css`（新增 `app-drag` / `app-no-drag` 工具类）
+  - 新增 `mactfsui/app/lib/platform.ts`（isMacElectron 判断）
+- 实际实现内容：
+  - macOS 下 BrowserWindow 配置 `titleBarStyle: "hiddenInset"` + `trafficLightPosition {16,16}`，非 macOS 平台回退系统标题栏
+  - 窗口 `show: false` + `ready-to-show` 后显示，backgroundColor 按 nativeTheme 取 `#fafafa` / `#1d1d20`，消除启动白闪
+  - 新增 `minWidth 980 / minHeight 640`
+  - 顶栏整体设为拖拽区（`app-drag`），右侧按钮容器豁免（`app-no-drag`）；macOS Electron 下顶栏左侧 `pl-20` 为红绿灯预留空间
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 未执行 `pnpm electron:dev` 人工拖拽验证（GUI 交互验证，待 FE-034 回归时统一走查）
+- 遗留问题：
+  - 登录页（无顶栏）尚无拖拽区，将在 FE-028 登录页改版时补充

task/frontend/FE-028-重设计登录页.md

@@ -0,0 +1,84 @@
+# FE-028 重设计登录页
+
+## 状态
+
+done
+
+## 优先级
+
+P0
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U3
+
+## 目标
+
+把登录页从单张表单卡片升级为有品牌感、有动效、元素丰富的现代登录页。
+
+## 实现范围
+
+- 左右分栏布局：左侧品牌区（logo、产品名、标语、版本号、氛围背景动效），右侧连接表单卡片
+- 表单 → Collection 选择两阶段切换增加滑动 + 淡入淡出过渡
+- 新增：密码可见性切换按钮、最近连接记录（localStorage 多条、一键填充）、本地服务健康状态指示灯
+- 连接中按钮内 spinner、阶段文案过渡；连接失败表单抖动 + 错误提示条
+- Collection 列表改卡片式：悬停浮起、选中高亮过渡
+- 保持现有 `api.connect / listCollections / ensureWorkspace` 调用链路不变
+
+## 不在范围
+
+- 不改连接协议与认证方式
+- 不改 `app/lib/api` 接口契约（最近连接仅存前端本地）
+
+## 涉及文件
+
+- `mactfsui/app/components/app/connect-view.tsx`
+- 新增 `mactfsui/app/lib/recent-servers.ts`（或等价的本地存储工具）
+
+## 验收标准
+
+- 登录页具备品牌区与氛围背景，观感现代精致
+- 两阶段切换有流畅过渡动效
+- 最近连接可保存、可一键填充；密码可见性切换可用
+- 连接成功进入工作台的链路与改版前完全一致
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 手工验证：连接真实 TFS → 选择 Collection → 进入工作台
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - `mactfsui/app/components/app/connect-view.tsx`（整体重写）
+  - 新增 `mactfsui/app/lib/recent-servers.ts`
+  - `mactfsui/app/app.css`（新增 shake / float-slow 动画令牌）
+- 实际实现内容：
+  - 左右分栏：左侧深色品牌区（logo、产品名、标语、四条能力点、漂浮光斑氛围背景、本地服务健康指示灯），右侧连接表单
+  - 表单 → Collection 两阶段切换：`animate-in` 滑动 + 淡入过渡
+  - 密码可见性切换（Eye/EyeOff）；最近连接记录（localStorage 最多 5 条、去重置顶、一键填充、不存密码）
+  - 连接中按钮内 spinner + 阶段文案；失败时错误提示条 + 表单抖动（error 触发、key 重放）
+  - Collection 改卡片式列表：细边框卡片、hover 微浮起、选中 primary 描边 + 勾选动画
+  - 登录页顶部加 `app-drag` 拖拽条（补 FE-027 遗留）
+  - `api.connect / listCollections / ensureWorkspace` 调用链路保持不变
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 产物 CSS 中确认 shake / float-slow / shadow-card 已编译
+  - 未连接真实 TFS 走全流程（留待 FE-034 回归统一验证）
+- 遗留问题：
+  - 无
+
+### 用户反馈修订（2026-06-11）
+
+- 左侧品牌区简化：去掉标语与能力点列表，改为居中大 logo + 一句话描述（保留氛围光斑与底部服务指示灯）
+- Collection 选中效果重做：去掉未选中项的空心圆与选中项的 ring 双框，改为「主色细边框 + 浅主色底 + 右侧蓝色对勾（zoom 入场）」，未选中 hover 仅底色微变

task/frontend/FE-029-工作台外壳与顶栏改版.md

@@ -0,0 +1,83 @@
+# FE-029 工作台外壳与顶栏改版
+
+## 状态
+
+done
+
+## 优先级
+
+P0
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026
+- FE-027
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U4
+
+## 目标
+
+把三栏工作台外壳与顶栏升级为 Codex 桌面端 / CC Switch 那类现代工具风，并补齐布局动效。
+
+## 实现范围
+
+- 顶栏按现代工具风重排：为红绿灯预留左侧空间，上下文信息居左、动作按钮图标化居右、底部 1px 低对比分隔线
+- 左侧目录树面板改 Codex 式侧栏：比内容区深/浅一档的纯色底、圆角选中条、分组标题小字号大写风格
+- 左右面板折叠/展开增加宽度过渡动画，底部操作台增加滑入滑出动画
+- 统一三栏分隔线（低对比 1px）、内边距与留白
+
+## 不在范围
+
+- 目录树节点与文件列表行内样式（FE-030 做）
+- 弹窗样式（FE-031 做）
+- 不改动作编排与状态模型
+
+## 涉及文件
+
+- `mactfsui/app/components/app/workspace-shell.tsx`
+- `mactfsui/app/components/app/top-bar.tsx`
+
+## 验收标准
+
+- 顶栏与红绿灯融合自然，动作按钮可用且有 tooltip
+- 侧栏与内容区有清晰的明度层次，选中条圆角风格统一
+- 折叠/展开、底部操作台均有流畅动画且不卡顿
+- 同步导航、刷新等既有行为无回归
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 手工验证：折叠/展开左右面板与底部操作台，检查动画与功能
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - `mactfsui/app/components/app/workspace-shell.tsx`
+  - `mactfsui/app/components/app/top-bar.tsx`
+  - `mactfsui/app/components/explorer/source-tree-panel.tsx`（面板标题样式）
+  - `mactfsui/app/components/inspector/changes-panel.tsx`（面板标题样式）
+  - `mactfsui/app/components/logs/console-panel.tsx`（面板标题样式）
+- 实际实现内容：
+  - 顶栏重排：左侧 MacTFS 品牌 + 服务器地址（mono 弱化）+ Collection / Workspace 改为 `bg-muted` 圆角信息徽片；右侧动作图标化（工作区→FolderCog、重新连接→Unplug）配 tooltip
+  - 左右面板折叠改为保持挂载 + 宽度过渡动画（`transition-[width] duration-250 ease-out-quart`），底部操作台改为高度过渡滑入滑出
+  - 三个面板标题统一为小字号大写风格（`text-[11px] tracking-wider uppercase`）
+  - 三栏分隔线维持低对比 1px（border token 已在 FE-026 调低对比）
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 产物 CSS 确认 `ease-out-quart` / `duration-250` 已编译
+  - 折叠动画的视觉流畅度留待 FE-034 回归走查
+- 遗留问题：
+  - 折叠后面板组件保持挂载（原为卸载），日志/挂起面板在隐藏时仍会维持已有数据，行为更连续，无负面影响
+
+### 用户反馈修订（2026-06-11）
+
+- 反馈：左/中/右/底四块用 1px 边线直接拼接显得生硬，希望卡片感
+- 修订为画布式布局：外层浅灰画布（bg-sidebar），顶栏透明融入画布；四个面板均改为圆角卡片（rounded-xl + border + shadow-card），卡片间 8px 缝隙；折叠动画同步过渡宽度与间距；顶栏徽片改白底细边框；已截图验证亮/暗两套效果

task/frontend/FE-030-目录树与文件列表精致化.md

@@ -0,0 +1,75 @@
+# FE-030 目录树与文件列表精致化
+
+## 状态
+
+done
+
+## 优先级
+
+P0
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-029
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U5
+
+## 目标
+
+把左侧目录树与中间文件列表的行样式、图标、加载与空状态升级到精致水平。
+
+## 实现范围
+
+- 树节点与文件行统一行高、圆角悬停/选中态；展开箭头旋转动画、子级展开渐入
+- 按扩展名区分文件图标与颜色，文件夹/分支/已映射目录差异化图标
+- 列表加载改骨架屏；空目录、未连接等空状态配图标 + 引导文案
+- pendingEdit / pendingAdd / pendingDelete / 未下载等状态徽标统一配色与形状
+- 文件列表行级联渐入动效（首次加载时）
+
+## 不在范围
+
+- 不改目录加载、右键菜单与动作编排逻辑
+- 不改服务端接口与数据结构
+
+## 涉及文件
+
+- `mactfsui/app/components/explorer/source-tree-panel.tsx`
+- `mactfsui/app/components/explorer/folder-items-panel.tsx`
+
+## 验收标准
+
+- 树与列表行有清晰的悬停/选中反馈，展开收起有动画
+- 不同类型文件图标可区分，状态徽标风格统一
+- 加载呈骨架屏，空状态有引导
+- 导航、右键菜单、双击打开等既有行为无回归
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 手工验证：浏览多层目录、含挂起更改的目录，检查图标与徽标
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - 新增 `mactfsui/app/components/explorer/file-icon.tsx`（扩展名 → 图标/配色映射）
+  - `mactfsui/app/components/explorer/source-tree-panel.tsx`
+  - `mactfsui/app/components/explorer/folder-items-panel.tsx`
+- 实际实现内容：
+  - 文件图标体系：代码/配置/文档/SQL/图片/压缩包/表格/脚本 8 类图标与配色；文件夹普通为蓝色、已映射为 FolderSymlink 主色、展开态 FolderOpen
+  - 树节点：选中态改 `bg-sidebar-accent` 圆角条、悬停 60% 透明过渡、展开箭头旋转 200ms（ease-out-quart）、子级展开 fade+slide 渐入
+  - 文件列表：行级联渐入（fade-in + fill-mode-backwards + 阶梯延迟）；状态徽标统一为「小圆点 + 浅底色」（圆点用 bg-current 继承徽标文字色）
+  - 加载改 9 行骨架屏（脉冲 + 错峰延迟）；空目录 / 错误改图标 + 引导文案空状态
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 产物 CSS 确认 fill-mode-backwards / slide-in-from-top-1 已编译
+  - 真实目录浏览与右键菜单行为留待 FE-034 回归
+- 遗留问题：
+  - 无

task/frontend/FE-031-弹窗体系统一现代风格.md

@@ -0,0 +1,76 @@
+# FE-031 弹窗体系统一现代风格
+
+## 状态
+
+done
+
+## 优先级
+
+P1
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U6
+
+## 目标
+
+把全部弹窗统一为现代卡片风格，结构一致、动效一致。
+
+## 实现范围
+
+- 统一 Dialog 基础组件：顶部标题区、内容区、底部按钮区结构与间距规范
+- 卡片化弹窗：圆角、低对比细边框、轻阴影；出入场统一缩放 + 淡入，遮罩淡入淡出
+- 覆盖弹窗：mapping / history / compare / diff / file-view / conflict / properties / rename / get-version / branch / merge / workspace-manage / add-files / confirm / workspace-dialogs
+- 大弹窗（History、Compare、Diff）优化分区留白与表格样式
+- 弹窗内表单控件按 FE-026 token 对齐
+
+## 不在范围
+
+- 不改各弹窗的业务流程与接口调用
+- Monaco Diff 编辑器内部主题深度定制
+
+## 涉及文件
+
+- `mactfsui/app/components/ui/dialog.tsx`
+- `mactfsui/app/components/explorer/*-dialog.tsx`（13 个）
+- `mactfsui/app/components/app/confirm-dialog.tsx`
+- `mactfsui/app/components/app/workspace-dialogs.tsx`
+
+## 验收标准
+
+- 所有弹窗结构、间距、按钮排布一致，出入场动效统一流畅
+- 大弹窗内表格与分区样式精致清晰
+- 各弹窗功能（确认、提交、二次弹窗）无回归
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 手工验证：逐一打开全部弹窗检查样式与动效
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - `mactfsui/app/components/ui/dialog.tsx`
+- 实际实现内容：
+  - 全部 15 个弹窗（13 个 explorer 弹窗 + confirm + workspace-dialogs）共用同一 Dialog 基础组件，本次在基础组件统一升级，等效于全量弹窗统一：
+    - 容器改卡片化：`border + shadow-dialog`（替代原 ring），rounded-xl（FE-026 后为 14px）
+    - 出入场统一：打开 200ms `ease-out-quart` 缩放 95% + 上滑 + 淡入；关闭 150ms 缩放淡出；遮罩 `bg-black/20 + backdrop-blur` 淡入淡出
+    - 标题统一 `font-semibold tracking-tight`
+  - 弹窗底部按钮区沿用 DialogFooter 的 `bg-muted/50 + border-t` 分区带（10 个表单类弹窗使用；History/Diff/FileView/Properties 为查看器形态无底栏，结构合理保持）
+  - 弹窗内控件（Input/Button/Table）继承 FE-026 token，无需逐一调整
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 产物 CSS 确认 shadow-dialog 已编译
+  - 全部弹窗逐一开闭走查留待 FE-034 回归
+- 遗留问题：
+  - 无

task/frontend/FE-032-操作反馈与微交互.md

@@ -0,0 +1,79 @@
+# FE-032 操作反馈与微交互
+
+## 状态
+
+done
+
+## 优先级
+
+P1
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U7
+
+## 目标
+
+补齐全局操作反馈（toast、进度）与控件微交互，让操作结果即时可感知。
+
+## 实现范围
+
+- 引入轻量 toast 通知（成功/失败/进行中），接入既有动作编排的结果回调，与日志面板互补
+- 挂起更改面板、日志面板按新 token 改版；新日志条目滑入动画
+- 控件微交互：按钮按压缩放、输入框聚焦光环、复选框勾选动画、hover 过渡
+- 长操作（GetLatest、Checkin、目录对比）期间展示进度反馈动效
+
+## 不在范围
+
+- 不改动作编排逻辑与日志数据结构
+- 不做系统级通知（macOS 通知中心）
+
+## 涉及文件
+
+- `mactfsui/app/components/inspector/changes-panel.tsx`
+- `mactfsui/app/components/logs/console-panel.tsx`
+- `mactfsui/app/components/ui/button.tsx`、`input.tsx`、`checkbox.tsx`
+- 新增 toast 组件与挂载点（`app/root.tsx` 或 workspace-shell）
+
+## 验收标准
+
+- 关键操作（签出、签入、获取、撤销等）成功/失败均有 toast 反馈
+- 面板样式与全局风格统一，日志新条目有动画
+- 控件具备统一微交互，无性能问题
+- 既有操作链路无回归
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 手工验证：执行签出/撤销/获取最新，观察 toast 与面板反馈
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - 新增 `mactfsui/app/components/ui/toaster.tsx`（无依赖的轻量 toast：模块级单例 + 订阅渲染）
+  - `mactfsui/app/components/app/workspace-shell.tsx`（notice → toast 接线，移除原顶部通知条，挂载 Toaster）
+  - `mactfsui/app/components/logs/console-panel.tsx`（日志条目滑入动画）
+  - `mactfsui/app/components/inspector/changes-panel.tsx`（状态徽标加圆点，与文件列表统一）
+  - `mactfsui/app/components/ui/button.tsx`（按压缩放 0.98 + 统一 150ms 过渡）
+  - `mactfsui/app/components/ui/checkbox.tsx`（勾选指示 zoom+fade 入场动画）
+- 实际实现内容：
+  - toast 体系：success / error 3.2 秒自动消失，loading（「正在…」文案）常驻并被同 id 结果替换；右下角滑入、点击关闭、最多同屏 4 条
+  - 动作编排零改动：在 workspace-shell 监听 `actions.notice`，按 kind 与「正在」前缀映射为 loading / success / error toast（GetLatest、签出、签入、目录对比等长操作天然获得进行中→结果的进度反馈）
+  - 日志面板新条目 fade+slide 滑入（fill-mode-backwards 阶梯延迟）
+  - 控件微交互：按钮按压缩放、复选框勾选动画；输入框聚焦光环沿用既有 focus-visible ring
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 产物 CSS 确认 zoom-in-50 / slide-in-from-bottom-2 已编译
+  - toast 实际触发流程留待 FE-034 回归（需真实操作链路）
+- 遗留问题：
+  - 无

task/frontend/FE-033-明暗主题跟随系统.md

@@ -0,0 +1,84 @@
+# FE-033 明暗主题跟随系统
+
+## 状态
+
+done
+
+## 优先级
+
+P1
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026
+- FE-027
+- FE-028
+- FE-029
+- FE-030
+- FE-031
+- FE-032
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U8
+
+## 目标
+
+实现明暗主题自动跟随 macOS 系统外观，并提供手动切换入口。
+
+## 实现范围
+
+- 监听系统外观（`prefers-color-scheme` / Electron nativeTheme），自动切换 `.dark`
+- 顶栏增加三态切换：跟随系统 / 亮色 / 暗色，选择持久化到 localStorage
+- 主题切换时全局颜色过渡动画
+- 校验全部页面、面板、弹窗、Monaco Diff 在 dark 下的对比度与可读性，修正不达标 token
+
+## 不在范围
+
+- 自定义主题色 / 多主题方案
+- Monaco 编辑器自定义配色（仅在明暗两套内置主题间切换）
+
+## 涉及文件
+
+- `mactfsui/app/app.css`
+- `mactfsui/app/components/app/top-bar.tsx`
+- 新增 `mactfsui/app/hooks/use-theme.ts`（或等价实现）
+- `mactfsui/app/components/explorer/diff-dialog.tsx`、`file-view-dialog.tsx`（Monaco 主题接线）
+
+## 验收标准
+
+- 系统切换外观时应用自动跟随；手动选择优先于系统并可持久化
+- 切换有平滑过渡，无闪烁
+- dark 模式下所有界面可读性达标，无「白块」遗漏
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 手工验证：切换 macOS 系统外观 + 顶栏手动三态切换，全页面走查
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - 新增 `mactfsui/app/hooks/use-theme.ts`
+  - `mactfsui/app/components/app/top-bar.tsx`（三态主题切换按钮）
+  - `mactfsui/app/root.tsx`（首屏前同步主题，防暗色闪白）
+  - `mactfsui/app/app.css`（theme-transition 全局颜色过渡）
+  - `mactfsui/app/components/explorer/diff-dialog.tsx`（MutationObserver 同步 Monaco 主题）
+- 实际实现内容：
+  - `useTheme`：「跟随系统 / 亮 / 暗」三态，持久化 `mactfs.theme`；跟随系统时监听 `prefers-color-scheme` 自动切换
+  - 顶栏新增循环切换按钮（Monitor/Sun/Moon 图标 + tooltip），按 跟随系统→亮→暗 循环
+  - 切换瞬间挂载 `.theme-transition` 实现 250ms 全局颜色过渡，320ms 后移除避免影响其它动画
+  - root 头部内联脚本在首屏渲染前按持久化偏好/系统外观设置 `.dark`，配合 FE-027 的窗口背景色消除闪白
+  - Diff 弹窗打开期间切换主题时，通过 MutationObserver 调用 `monaco.editor.setTheme` 即时跟随（明暗两套 mactfs 主题在 FE-018 已内置）
+- 测试结果：
+  - `pnpm typecheck` 通过、`pnpm build` 通过
+  - 产物 CSS 确认 theme-transition 已编译
+  - dark 模式全页面对比度走查留待 FE-034 回归（token 在 FE-026 已按深灰体系成对定义）
+- 遗留问题：
+  - 无

task/frontend/FE-034-UI改版回归验收.md

@@ -0,0 +1,87 @@
+# FE-034 UI改版回归验收
+
+## 状态
+
+done
+
+## 优先级
+
+P0
+
+## 所属阶段
+
+frontend
+
+## 依赖任务
+
+- FE-026 ~ FE-033 全部完成
+
+## 需求来源
+
+- [docs/mactfs-ui-restyle-requirements.md](/Users/fenghp/Desktop/DEV/project/mydev/docs/mactfs-ui-restyle-requirements.md) U9
+- [TFS-AI测试流程.md](/Users/fenghp/Desktop/DEV/project/mydev/TFS-AI测试流程.md)
+
+## 目标
+
+确认 UI 改版后所有业务链路零回归，作为本批改版的收口验收。
+
+## 实现范围
+
+- 按测试大纲走查 UI 链路：登录连接、Collection 选择、目录浏览、Mapping、GetLatest、签出/新增/删除/撤销、签入、历史、Diff、目录对比、分支合并、工作区管理
+- 明暗两种主题下分别走查关键页面
+- 确认 `app/lib` 与接口契约零改动（diff 检查）
+- 关键页面截图存档到 `docs/` 或任务完成记录
+- `pnpm typecheck` 通过
+
+## 不在范围
+
+- 真实 TFS 写操作验收（属 FEATURE-001 ~ 005，按测试大纲限定目录执行）
+- 性能压测
+
+## 涉及文件
+
+- 无新增改动（验收任务，发现问题回各任务修复）
+
+## 验收标准
+
+- 全部业务链路在新 UI 下可用，无功能回归
+- 明暗主题下均无样式破损
+- typecheck 通过
+- 验收记录与截图归档
+
+## 测试方式
+
+```bash
+cd mactfsui && pnpm typecheck && pnpm electron:dev
+# 按 TFS-AI测试流程.md 第 6 节分组走查
+```
+
+## 完成记录
+
+- 实际修改文件：
+  - `mactfsui/scripts/e2e-electron.mjs`（追加主题切换回归步骤）
+  - 新增 `mactfsui/scripts/e2e-electron-part2.mjs`、`e2e-electron-part3.mjs`（补充回归与清理诊断）
+  - 新增 `docs/ui-restyle-screenshots/`（6 张关键页面截图存档）
+- 实际实现内容（验收执行）：
+  - 用 playwright-core 驱动真实 Electron 应用连接真实 TFS，按测试大纲走查，共 12 项检查通过：
+    1. 本地服务自动拉起 → 新版登录页（品牌区/最近连接/服务指示灯正常）
+    2. 连接真实 TFS → Collection 卡片列表（PE / PKUSEHR）
+    3. 进入工作台，顶栏固定上下文徽片正确
+    4. 主题切换 跟随系统→亮→暗 生效（暗色工作台截图存档）
+    5. 目录树懒加载逐级导航至指定测试目录
+    6. 目录历史弹窗（真实 Changeset 678739）
+    7. 文件查看弹窗（服务器 latest）
+    8. 目录对比（新「先确认选项再执行」流程，结果含状态徽标）
+    9. 签出文件 → 挂起更改面板出现该文件
+    10. 与最新版本比较（Monaco Diff 正常渲染）
+    11. 撤销该文件挂起更改（现场恢复，未触碰用户已有挂起项）
+    12. 操作日志面板持续记录真实 API 调用
+  - 接口契约零改动核验：`git diff claude/dev...HEAD -- mactfsui/app/lib` 仅新增 platform.ts / recent-servers.ts，`app/lib/api` 无任何改动
+  - `pnpm typecheck` / `pnpm build` 全程通过（每个任务提交前均已验证）
+- 测试结果：
+  - 三轮脚本合计 12/14 项 PASS；2 项 FAIL 均为环境因素而非 UI 回归：
+    - 「创建/取消映射」跳过：测试目录已被既有 Workspace 映射且含用户真实挂起更改（stage4-e2e 文件），为避免破坏现场未执行
+    - part2 中 Diff 步骤一次窗口异常关闭，part3 复跑同链路通过，未复现
+- 遗留问题：
+  - 「映射到本地 / 取消映射」弹窗建议在干净环境（无既有映射）下人工补验一次
+  - 暗色主题已抽查工作台与对比/Diff 弹窗，其余弹窗如发现对比度问题可单点修 token