Cmochance · Cmochance · Jun 17, 2026 · Jun 17, 2026 · Jun 17, 2026 · Jun 17, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -134,6 +134,19 @@ jobs:
           workspaces: '. -> target'
           key: tauri
 
+      # frontend/ 是 Vite 项目, 其 dist 被 src-tauri include_dir! 编译期嵌入。
+      # 必须在 cargo check 前 npm build 产出 frontend/dist, 否则 include_dir! panic。
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Build frontend (produce dist for include_dir!)
+        run: |
+          npm --prefix frontend ci
+          npm --prefix frontend run build
+
       - name: cargo check -p codex-app-transfer
         run: cargo check -p codex-app-transfer --all-targets
 

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -174,6 +174,21 @@ jobs:
       # 因为第二次 cargo tauri build --bundles dmg 时 Tauri 会重新 bundle .app,
       # 把手动 codesign 结果覆盖 (PR #13 review 实测验证). 必须 Tauri 自己在
       # 同一次 build 里完成签名链.
+      # frontend/ 是 Vite 项目, dist 被 src-tauri include_dir! 编译期嵌入。
+      # 必须在 cargo tauri build 前产出 frontend/dist (CI runner 无 node_modules,
+      # 且 tauri.conf.json 不设 beforeBuildCommand)。setup-node 跨平台。
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Build frontend (produce dist for include_dir!)
+        shell: bash
+        run: |
+          npm --prefix frontend ci
+          npm --prefix frontend run build
+
       - name: cargo tauri build
         working-directory: src-tauri
         shell: bash

diff --git a/.gitignore b/.gitignore
@@ -86,6 +86,12 @@ feedback-worker/node_modules/
 src-tauri/gen/
 **/*.rs.bk
 
+# Vue/Vite frontend (Stage 1 起 frontend/ 是 Vite 项目; dist 被 src-tauri
+# include_dir! 编译期嵌入, 由 npm run build 生成, 不入仓)
+frontend/node_modules/
+frontend/dist/
+frontend/.vite/
+
 # IDE / editor noise
 .vscode/
 .idea/

diff --git a/Makefile b/Makefile
@@ -17,6 +17,8 @@ help:
 	@echo "         tag 触发: git tag v<x.y.z> && git push --tags"
 
 mac-app:
+	npm --prefix frontend ci
+	npm --prefix frontend run build
 	CARGO_TARGET_DIR=target cargo tauri build --bundles app
 	mkdir -p dist/mac
 	rm -rf "dist/mac/Codex App Transfer.app"

diff --git a/ONBOARDING.md b/ONBOARDING.md
@@ -110,10 +110,10 @@ codex-app-transfer/
 │   ├── codex_integration/      # 守护 ~/.codex/{config.toml,auth.json} 快照 / 还原 + MCP OAuth 凭据可移植保险箱
 │   └── gemini_oauth/           # Gemini CLI + Antigravity OAuth flow
 │
-├── frontend/                   # 前端 (静态文件被 include_dir! 编进二进制)
-│   ├── css/{tokens,base,responsive}.css + components/<name>.css + pages/<route>.css
-│   ├── gallery.html            # 组件预览页 (不需 dev server, 直接 open)
-│   └── js/api.js               # 调 cas://localhost/api/*
+├── frontend/                   # 前端 (Vue 3 + Vite + TS; npm run build 出 dist/ 被 include_dir! 编进二进制)
+│   ├── src/                    # main.ts + App.vue (重构进行中: 逐步迁 components/pages/stores/api/i18n)
+│   ├── vite.config.ts          # base './' + modulePreload.polyfill=false (CSP script-src 'self' 合规)
+│   └── public/assets/          # app + provider 图标 (vite 原样拷到 dist 根)
 │
 ├── xtask/                      # release-bundle (签名 + latest.json) + gen-fixtures
 ├── release/                    # 内置公钥 PEM (build-time include_str!)
@@ -530,7 +530,7 @@ Codex Desktop 默认隐藏 `Plugins` 选项卡(只对 ChatGPT 账号开放)。Pl
 | `cargo run -p xtask -- release-bundle` 报 "no platform artifacts found" | 这是预期,首次跑生成 keypair 即可 |
 | MiMo / Kimi 突然连不通 | 先查 `~/.codex-app-transfer/config.json` 里 `apiFormat` / `extraHeaders` 是否完整,缺失就是 healing 没生效 |
 | 客户端验签失败 | `rsa` / `sha2` crate 版本是否两边对齐(`src-tauri` vs `xtask`),`sha2` 必须带 `oid` feature |
-| `cargo tauri dev` 改前端不刷新 | frontend 是 `include_dir!` 编进二进制的,dev 模式仍走文件系统;改 `frontend/*.html|css|js` 不需重编译,改 Rust 需 |
+| `cargo tauri dev` 改前端不刷新 | 前端是 Vite 项目,dev 经 `beforeDevCommand` 拉起 vite(`localhost:1420`)+ HMR;改 `frontend/src/*.vue\|*.ts` 自动热更,改 Rust 需重编。prod 是 `npm run build` 出 `frontend/dist/` 被 `include_dir!` 嵌进二进制 |
 | 单实例锁死(双开打不开) | `tauri_plugin_single_instance` + `fs2::FileExt` 跨进程 file lock 双层;查 `~/.codex-app-transfer/.lock`(或类似) |
 
 ---

diff --git a/README.en.md b/README.en.md
@@ -221,28 +221,15 @@ The viewer now has six tabs (switch via the "Kind" dropdown): **forward** (proto
 
 ### Tweaking the UI
 
-`frontend/css/` is organized as a small component library — no need to grep the whole `style.css`:
+The frontend is **Vue 3 + Vite + TypeScript** (`frontend/`, mid-migration from the old vanilla-JS stack). Source lives in `frontend/src/` (SFC single-file components + Pinia + vue-router).
 
-| What to tweak | Where to edit |
-|---|---|
-| Theme colors / radius / shadow / spacing (design tokens) | `frontend/css/tokens.css` (129 vars + 6 themes) |
-| Global reset / body font / focus ring | `frontend/css/base.css` |
-| Buttons / cards / forms / badges / modals etc. | `frontend/css/components/<name>.css` |
-| Page-specific styles for dashboard / providers / proxy / settings / guide | `frontend/css/pages/<route>.css` |
-| Responsive breakpoints (1100px / 720px) | `frontend/css/responsive.css` |
-
-Preview every component + variant + theme switching:
+Dev (hot reload):
 
 ```bash
-# Open directly in your browser (no dev server needed)
-open frontend/gallery.html        # macOS
-xdg-open frontend/gallery.html    # Linux
-start frontend/gallery.html       # Windows
+cargo tauri dev    # beforeDevCommand spins up vite (localhost:1420) + HMR; editing .vue/.ts auto-refreshes
 ```
 
-`gallery.html` has a theme picker + dark/light toggle at the top, refresh after editing component css to see changes. `frontend/index.html`'s `<link href="css/style.css">` does not need to change — `style.css` is just an `@import` entry that aggregates every sub-file.
-
-To add a new component: create `components/<name>.css` + add a line `@import url("components/<name>.css");` to `style.css` + add a section in `gallery.html`.
+Build: `npm --prefix frontend run build` emits `frontend/dist/`, embedded into the binary via `src-tauri`'s `include_dir!` (prod loads over `cas://localhost/` under a strict CSP `script-src 'self'`). The MacBook-style design system and three themes (light / dark / Chinese-ink) land across the refactor stages.
 
 ## Troubleshooting
 

diff --git a/README.md b/README.md
@@ -220,30 +220,17 @@ viewer 现在有六个分页(顶部 `种类` 下拉切换):**forward**(协议转
 
 forward 分页详情为调 adapter 准备了几件利器(借鉴 [`liaohch3/claude-tap`](https://github.com/liaohch3/claude-tap),MOC-184):**一键 copy-as-cURL**(把 OUTBOUND 复刻成 curl 打上游,秒分「adapter 错 vs 上游错」;凭据已脱敏需自行填回)+ 复制 INBOUND/OUTBOUND body;**INBOUND↔OUTBOUND 行级 diff**(直接看出 adapter 把 Codex 原始请求转成了啥);**单请求 token 用量分解**(输入/输出/总计/缓存命中/推理,兼容 Responses / Chat / Gemini / Anthropic 各家命名);**tools[] 与消息结构化卡片**(跨协议尽力识别,识别不了退回原文)。列表还可按 `provider` / `model` 分组,`j`/`k`(或方向键)键盘上下导航。
 
-### 想改 UI 样式怎么改
+### 想改 UI 怎么改
 
-`frontend/css/` 走"组件库"形式拆开,不需要全文 grep `style.css`:
+前端是 **Vue 3 + Vite + TypeScript**(`frontend/`,正从旧 vanilla JS 逐步重构迁移)。源码在 `frontend/src/`(SFC 单文件组件 + Pinia + vue-router)。
 
-| 想改什么 | 改哪个文件 |
-|---|---|
-| 主题色 / 圆角 / 阴影 / 间距等 design tokens | `frontend/css/tokens.css`(129 vars + 6 套主题) |
-| 全局 reset / body 字体 / focus 描边 | `frontend/css/base.css` |
-| 按钮 / 卡片 / 表单 / 徽章 / 模态等组件 | `frontend/css/components/<name>.css` |
-| 仪表盘 / 提供商 / 转发 / 设置 / 引导某一页专属样式 | `frontend/css/pages/<route>.css` |
-| 响应式断点 / 1100px / 720px | `frontend/css/responsive.css` |
-
-预览所有组件 + 各状态 + 主题切换:
+开发(热更新):
 
 ```bash
-# 浏览器直接打开(不需 dev server)
-open frontend/gallery.html        # macOS
-xdg-open frontend/gallery.html    # Linux
-start frontend/gallery.html       # Windows
+cargo tauri dev    # 经 beforeDevCommand 拉起 vite (localhost:1420) + HMR,改 .vue/.ts 自动刷新
 ```
 
-`gallery.html` 顶部有主题切换 + 深浅色按钮,改 component css 后刷新即看。`frontend/index.html` 主入口 `<link href="css/style.css">` 不需要改 — `style.css` 只是 @import 入口聚合所有子文件。
-
-加新组件: 在 `components/` 建 `<name>.css` + 在 `style.css` 加一行 `@import url("components/<name>.css");` + 在 `gallery.html` 加 section。
+打包:`npm --prefix frontend run build` 出 `frontend/dist/`,被 `src-tauri` 的 `include_dir!` 编进二进制(prod 走 `cas://localhost/` 加载,严格 CSP `script-src 'self'`)。MacBook 风设计系统与三套主题(白 / 黑 / 国风)随重构阶段落地。
 
 ## 常见问题
 

diff --git a/finetune-inkwash.png b/finetune-inkwash.png
diff --git a/finetune-settings.png b/finetune-settings.png
diff --git a/frontend/env.d.ts b/frontend/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/vue" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+  export default component
+}