Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions desktop-tauri/ui-islands/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# ui-islands(面板前端「岛」)

面板前端的 React 岛源码。产物构建到 `../ui/islands/`(`ui.js` / `ui.css` / `login.js`,**检入仓库**)。

## 先装两个包的依赖,别只装这里

```bash
cd desktop-tauri/ui-kit && npm install # ← 必须。漏了它,下面的构建一定会失败
cd ../ui-islands && npm install
```

`vite.config.ts` 把 `@ui` 别名指向 `../ui-kit/src`(源码,不是打包产物),而 `ui-kit` 有**独立的 package.json**。只装 `ui-islands` 时的两个典型症状(都不是代码问题):

- `tsc --noEmit` 报一片 `Parameter 'value' implicitly has an 'any' type` —— `ui-kit` 的 `@base-ui/react` 类型解析不到,回调参数退化成 `any`;
- 跳过 tsc 后 `vite build` 报 `Can't resolve 'tw-animate-css'` —— 那是 `ui-kit` 的 devDependency,由 `ui-kit/styles/globals.css` 引入。

装完 `ui-kit` 依赖,两者同时消失。

## 构建

```bash
npm run build # tsc --noEmit && vite build && vite build --config vite.login.config.ts
```

产物在 `../ui/islands/`。裸机 / headless 网关读的是 `dist/ui/`(`run-headless.ps1` 的 `AGENT2API_UI_DIR`),改完要再同步一次:

```powershell
Copy-Item desktop-tauri\ui\islands\* dist\ui\islands\ -Force
```

新增静态资源(如 `assets/providers/<id>.png`)两边都要放:`desktop-tauri/ui/assets/` 与 `dist/ui/assets/`。

## 用 pnpm 的话

仓库标准是 npm(`package-lock.json` 在版本控制里)。pnpm 10+ 默认拦依赖构建脚本,会以 `ERR_PNPM_IGNORED_BUILDS: esbuild` 退出,且 `pnpm run build` 在跑脚本前先做一次校验安装,会连 vite 都起不来。放行:`pnpm approve-builds`,或临时加 `"pnpm": { "onlyBuiltDependencies": ["esbuild"] }`(本仓库未提交这段)。在 `ui-kit` 里用 pnpm 时别提交它生成的 `pnpm-lock.yaml`。

## 别手改产物

`ui.js` 是 minified 单行文件:手插一条映射能跑,但任何人重建都会覆盖,而且 rebuild 后是整包 diff(约 84 行全变),手改痕迹会淹没真改动。

完整的构建 / 排错说明见 [docs/ui-build.md](../../docs/ui-build.md)。
3 changes: 3 additions & 0 deletions desktop-tauri/ui-islands/src/islands/add-provider-pick.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,9 @@ export const PROVIDER_ICONS: Record<string, string> = {
'chatgpt-subscription': 'assets/providers/openai.png',
'copilot-subscription': 'assets/providers/copilot.svg',
'gemini-subscription': 'assets/providers/gemini-cli.svg',
// 插件家(`quwork`)没有内置枚举,图标与内置家走同一张表:图取自客户端
// 安装目录 `QuWork.exe` 的 256×256 图标资源。
quwork: 'assets/providers/quwork.png',
}

/**
Expand Down
Binary file added desktop-tauri/ui/assets/providers/quwork.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions desktop-tauri/ui/islands/login.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion desktop-tauri/ui/islands/ui.css

Large diffs are not rendered by default.

168 changes: 84 additions & 84 deletions desktop-tauri/ui/islands/ui.js

Large diffs are not rendered by default.

50 changes: 50 additions & 0 deletions docs/ui-build.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# 前端(UI 岛)构建

面板前端是仓库里的两份 React 岛,**产物检入仓库**:`desktop-tauri/ui/islands/ui.js`、`ui.css`、`login.js`。改完 `.tsx` 不构建,等于没改。

## 两个包,别漏装

| 目录 | 角色 | 为什么必须装 |
|---|---|---|
| `desktop-tauri/ui-islands` | 岛本体(vite 入口) | 构建就发生在这里 |
| `desktop-tauri/ui-kit` | 私有组件库 `@agent2api/ui` | `vite.config.ts` 把 `@ui` 别名指到它的 **源码**(`../ui-kit/src`),而它有**独立的 `package.json`** |

**只装 `ui-islands` 会失败**,症状分两段,容易误判成代码问题:

1. `tsc --noEmit` 报一片 `Parameter 'value' implicitly has an 'any' type` —— 不是真类型错误,是 `ui-kit` 的 `@base-ui/react` 类型解析不到,回调参数退化成 `any`;
2. 跳过 tsc 后 `vite build` 报 `Can't resolve 'tw-animate-css'` —— 那是 `ui-kit` 的 devDependency,由 `ui-kit/styles/globals.css` 引入。

两处都是**装完 `ui-kit` 依赖即刻消失**。

## 步骤

```bash
# 一次
cd desktop-tauri/ui-kit && npm install
cd ../ui-islands && npm install

# 每次改完前端
cd desktop-tauri/ui-islands && npm run build # tsc --noEmit && vite build && vite build --config vite.login.config.ts
```

产物落在 `desktop-tauri/ui/islands/`。**裸机 / headless 网关读的是 `dist/ui/`**(`run-headless.ps1` 里 `AGENT2API_UI_DIR` 指向它),所以要再同步一次:

```powershell
Copy-Item desktop-tauri\ui\islands\* dist\ui\islands\ -Force
```

前端新增的静态资源(如 `assets/providers/<id>.png`)同样两边都要有:`desktop-tauri/ui/assets/` 与 `dist/ui/assets/`。

## 用 pnpm 代替 npm 时的两个坑

仓库标准是 npm(`ui-islands/package-lock.json` 在版本控制里)。如果你本地用 pnpm:

1. pnpm 10+ 默认拦掉依赖的构建脚本,`pnpm install` 会以 `ERR_PNPM_IGNORED_BUILDS: esbuild` 退出,**且 `pnpm run build` 会在跑脚本前做一次校验安装,于是连 vite 都起不来**。放行方式二选一:
- `pnpm approve-builds` 交互式勾选;
- 或在 `ui-islands/package.json` 加 `"pnpm": { "onlyBuiltDependencies": ["esbuild"] }`(本仓库**没有**提交这一段,因为标准是 npm)。
2. 在 `ui-kit` 里跑 `pnpm install` 会生成 `pnpm-lock.yaml`,不要提交它 —— 仓库用的是 `package-lock.json`。只想装依赖不写锁文件时用 `pnpm install --lockfile=false --ignore-scripts`。

## 别做这两件事

- **不要手改 `ui.js`**:产物是 minified 单行文件,手工插入一条映射能跑,但下次任何人重建都会覆盖,而且 rebuild 后是整包 diff(84 行全变),混着手改会看不出什么才是真改动。
- **不要只改 `dist/ui`**:那是运行时拷贝,下一次发版/构建就没了;源在 `desktop-tauri/ui/` 与 `ui-islands/src/`。