zen-gitsync 2.13.10 → 2.13.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -5
- package/package.json +2 -1
- package/scripts/README_COLOR_CONVERTER.md +196 -196
- package/scripts/README_FONTSIZE_CONVERTER.md +278 -278
- package/scripts/README_SPACING_CONVERTER.md +126 -126
- package/scripts/README_STYLE_VARS.md +180 -180
- package/scripts/dev-ping.cjs +61 -0
- package/src/ui/public/assets/EditorView-CdNgAtwl.js +0 -0
- package/src/ui/public/assets/SourceMapView-DsL2l02A.js +3 -0
- package/src/ui/public/assets/WorkbenchView-D0eGFIZx.js +6 -0
- package/src/ui/public/assets/WorkbenchView-DCGi3Ef1.css +1 -0
- package/src/ui/public/assets/__vite-optional-peer-dep_katex_markstream-vue-Bg9-FXxr.js +1 -0
- package/src/ui/public/assets/__vite-optional-peer-dep_mermaid_markstream-vue-cPZl55sA.js +1 -0
- package/src/ui/public/assets/__vite-optional-peer-dep_stream-markdown_markstream-vue-Dhgp-lRL.js +1 -0
- package/src/ui/public/assets/__vite-optional-peer-dep_stream-monaco_markstream-vue-Cr1d6De7.js +1 -0
- package/src/ui/public/assets/{_plugin-vue_export-helper-rin5I4Hu.js → _plugin-vue_export-helper-CNd9lWx2.js} +3 -3
- package/src/ui/public/assets/d2_markstream-vue-xMoF3M5G.js +1 -0
- package/src/ui/public/assets/index-CrcxldZ2.css +1 -0
- package/src/ui/public/assets/index-DvRkCEGg.js +66 -0
- package/src/ui/public/assets/mhchem_markstream-vue-tp86PqxG.js +1 -0
- package/src/ui/public/assets/vendor-CgFFAa1w.js +1508 -0
- package/src/ui/public/assets/{vendor-Bq2rS2vY.css → vendor-irUC_mD1.css} +1 -1
- package/src/ui/public/favicon.svg +75 -75
- package/src/ui/public/index.html +22 -22
- package/src/ui/public/logo.svg +74 -74
- package/src/ui/server/routes/npm.js +11 -0
- package/src/ui/server/routes/workbench.js +29 -0
- package/src/ui/public/assets/EditorView-B4g8XOLB.js +0 -0
- package/src/ui/public/assets/SourceMapView-BVfD3VYO.js +0 -3
- package/src/ui/public/assets/WorkbenchView-Cx2p-WGc.js +0 -6
- package/src/ui/public/assets/WorkbenchView-_Z4j_RIa.css +0 -1
- package/src/ui/public/assets/index-8cDK0aD_.js +0 -66
- package/src/ui/public/assets/index-CmMxt1ti.css +0 -1
- package/src/ui/public/assets/vendor-C30huq-U.js +0 -1350
package/README.md
CHANGED
|
@@ -245,18 +245,23 @@ A dedicated view (fourth icon in the activity bar) for batch-running Claude agai
|
|
|
245
245
|
| Feature | Description |
|
|
246
246
|
|---|---|
|
|
247
247
|
| Task list | Create, edit, delete tasks; each shows its subtask count; click the **Simple / Complex** badge on any task to flip its type in place (Complex → Simple with subtasks asks for confirmation and clears them; Simple → Complex is instant) |
|
|
248
|
+
| Top-bar type switch | A segmented control (Complex / Simple) lives in the task header, right next to **Run task**, so you can flip the current task's type without going back to the sidebar; the same confirmation rule (Complex → Simple with subtasks) applies |
|
|
249
|
+
| AI split (promoted) | The "AI split" action is now a dedicated accent button with a sparkle icon and a subtle pulse, sitting between the type switcher and the primary **Run task** button — it is always enabled for complex tasks with a non-empty title |
|
|
250
|
+
| Description collapsible by default | Selecting a task collapses the description + attachment area into a one-line summary "Task description (optional)" to free up vertical space; click the summary to expand. When the description is filled or attachments are present, an "Filled" badge and the attachment count appear on the right of the summary |
|
|
251
|
+
| Minimal task & chat layout | The task execution view is now stripped of redundant borders / shadows: a flatter sidebar, transparent title input and textarea, and a clean left/right execution body. Visual reference follows the Claude Code desktop app |
|
|
248
252
|
| Subtask breakdown | Add / edit / remove subtasks per task, with per-subtask status; the empty state ships a centered illustration card with a primary "Add subtask" CTA and a secondary "Split with AI" shortcut |
|
|
249
|
-
| Subtask attachments | Attach up to 9 files per subtask (image / PDF / text / Markdown / CSV / JSON / log, ≤ 5 MB each); their absolute paths are appended to the prompt so Claude reads them directly |
|
|
253
|
+
| Subtask attachments | Attach up to 9 files per subtask (image / PDF / text / Markdown / CSV / JSON / log, ≤ 5 MB each); their absolute paths are appended to the prompt so Claude reads them directly. Right-click an image attachment to copy it to the system clipboard (`image/png` / `jpeg` / `webp` / `gif`) |
|
|
250
254
|
| Prompt presets | Reusable prompt templates with `{{task.title}}` / `{{task.desc}}` / `{{sub.title}}` / `{{sub.desc}}` / `{{repo.path}}` / `{{branch}}` variable interpolation |
|
|
251
255
|
| AI prompt generation | "New / Edit preset" dialog has an **AI Generate** button — the server reads the current project tree (depth 2) + README + manifests (package.json / pyproject.toml / go.mod / Cargo.toml / …) and asks the configured LLM to draft a project-aware preset (name + body) |
|
|
252
256
|
| Per-subtask override | Override the preset's content for a specific subtask in its description field |
|
|
253
257
|
| Sequential execution | Runs subtasks in declared order; the next one starts only after the previous process exits |
|
|
254
258
|
| Pipe-mode launcher | Spawns `claude -p "<prompt>" --output-format text --permission-mode bypassPermissions --dangerously-skip-permissions` with stdout/stderr piped to the server — no external terminal window is opened, so output streams directly into the UI |
|
|
255
259
|
| Isolated windows | Every subtask runs as its own detached process with fresh context, so memory and conversation state never accumulate across subtasks |
|
|
256
|
-
| Live log | Each
|
|
260
|
+
| Live log | Each subtask has a "执行日志 / Execution log" panel that **opens by default** and auto-scrolls, showing accumulated `stdout` + `stderr` (capped at 256 KB server-side, last 64 KB rendered client-side) |
|
|
257
261
|
| Live status | Subtask status (todo / pending / running / done / error) and PID stream in real time over SSE |
|
|
258
262
|
| Running animation | Subtasks in `running` state get a breathing primary-color glow + a sliding progress bar on top of the card; the status badge uses a shimmer gradient with a pulsing white dot and outer halo, easing back to neutral on completion |
|
|
259
263
|
| Cross-view indicator | While any Workbench subtask is running, a pulsing dot appears on the Workbench icon in the Activity Bar so you can see job state from the Git or Editor view |
|
|
264
|
+
| Execution log manager (dialog) | The "Execution logs" button in the workbench top bar (replaces the previous standalone tab) opens a dialog with the list / filter / batch delete / clear / retention-policy UI; the task execution view stays mounted so no work-in-progress state is dropped |
|
|
260
265
|
|
|
261
266
|
Prompt presets and tasks are persisted to `~/.zen-gitsync/prompts.json` and `~/.zen-gitsync/tasks.json` (cross-project, shared across repos).
|
|
262
267
|
|
|
@@ -275,6 +280,14 @@ Prompt presets and tasks are persisted to `~/.zen-gitsync/prompts.json` and `~/.
|
|
|
275
280
|
|
|
276
281
|
---
|
|
277
282
|
|
|
283
|
+
### Self-Upgrade
|
|
284
|
+
|
|
285
|
+
The footer version chip in the GUI checks npm for newer releases once per session. When an update is available, a **Upgrade** button appears next to the version; clicking it streams `npm install -g zen-gitsync` output into a modal dialog. On success, the dialog switches to a "Restart and reload now" CTA that calls `POST /api/app-restart` (which gracefully exits the Node process — your launcher / desktop shell brings it back up) and then reloads the browser tab so the new SPA bundle takes effect. The footer version also updates instantly to the new number so you can see the bump even before restarting.
|
|
286
|
+
|
|
287
|
+
On macOS / Linux, the global install is run under `sudo -n` (non-interactive); if sudo can't authenticate non-interactively, re-launch the GUI with admin rights and try again.
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
278
291
|
## Development Notes
|
|
279
292
|
|
|
280
293
|
### Line endings
|
|
@@ -625,20 +638,26 @@ Activity Bar 第四个视图,用于在当前仓库上批量调度 Claude:定
|
|
|
625
638
|
| 功能 | 说明 |
|
|
626
639
|
|---|---|
|
|
627
640
|
| 任务列表 | 新建、编辑、删除任务;每条任务显示子任务数量;点击徽标可在「简单(绿色)/ 复杂(紫色)」间即时切换,复杂→简单且带子任务时弹窗确认并清空子任务 |
|
|
641
|
+
| 顶部类型切换器 | 任务头部增加 segmented control(复杂 / 简单),无需回到左侧即可切换当前任务类型;切换逻辑与左侧徽标共享,复杂→简单且带子任务时同样弹窗确认 |
|
|
642
|
+
| AI 拆分(升级) | AI 拆分升级为带 sparkle 图标 + 轻微 pulse 动效的 accent 按钮,位置紧贴主「执行任务」按钮;只要标题非空,复杂任务下始终可点 |
|
|
643
|
+
| 任务描述默认折叠 | 选中任务后默认仅显示一行「任务描述(可选)」摘要,节省首屏纵向空间;点击 summary 展开后即可看到描述输入框和附件区;已填写描述或挂有附件时摘要右侧会出现「已填写」徽标和附件数量 |
|
|
644
|
+
| 极简任务 / 对话样式 | 任务执行视图整体极简化:减少冗余边框与阴影、标题 / 描述输入框透明化、执行主体左右两段式分列;视觉参考 Claude Code 桌面版 |
|
|
645
|
+
| 执行中状态点 pill | 任务行 / 详情区 pill 退化为 8px 彩色圆点(无文字),running 时由外层行边框跑马灯 + 圆点呼吸两层动效传达"进行中",避免文字 pill 与动效叠加产生视觉歧义 |
|
|
628
646
|
| 任务字段自动保存 | 标题 / 描述 / 预置提示词 / 简单任务覆盖 改动后 1.5s 防抖落盘,标题右侧显示「保存中 / 已保存 / 有未保存的更改」状态徽标;切换任务或关页面前自动 flush(含 `navigator.sendBeacon` 兜底) |
|
|
629
|
-
| 简单任务 | 新建任务时选「简单(直接执行)」即跳过子任务拆分;执行时把 task.desc 拼成单 sub 走 `/tasks/:id/run-simple`;可填「覆盖预置提示词」独立覆写预置模板;主任务附件 + 描述 + 覆盖三者合并驱动 Claude |
|
|
647
|
+
| 简单任务 | 新建任务时选「简单(直接执行)」即跳过子任务拆分;执行时把 task.desc 拼成单 sub 走 `/tasks/:id/run-simple`;可填「覆盖预置提示词」独立覆写预置模板;主任务附件 + 描述 + 覆盖三者合并驱动 Claude;运行中详情区状态条末尾带「停止」按钮(带二次确认),与复杂任务子任务停止按钮对齐 |
|
|
630
648
|
| 子任务拆分 | 增删改子任务,实时显示每个子任务的执行状态;空态提供居中插画卡片、主 CTA「添加子任务」与「用 AI 自动拆分」次级入口(仅复杂任务显示) |
|
|
631
|
-
| 子任务附件 | 每个子任务最多挂 9 个附件(图片 / PDF / 文本 / Markdown / CSV / JSON / log,单个 ≤ 5 MB);同 `originalName + size` 已存在则直接复用,跳过重复上传;执行时绝对路径会自动追加到 prompt 末尾,Claude
|
|
649
|
+
| 子任务附件 | 每个子任务最多挂 9 个附件(图片 / PDF / 文本 / Markdown / CSV / JSON / log,单个 ≤ 5 MB);同 `originalName + size` 已存在则直接复用,跳过重复上传;执行时绝对路径会自动追加到 prompt 末尾,Claude 直接按路径读取。**右键图片附件可一键复制到系统剪贴板**(支持 png / jpeg / webp / gif) |
|
|
632
650
|
| 提示词预置 | 可复用提示词模板,支持 `{{task.title}}` / `{{task.desc}}` / `{{sub.title}}` / `{{sub.desc}}` / `{{repo.path}}` / `{{branch}}` 变量插值 |
|
|
633
651
|
| AI 生成预置 | 「新建 / 编辑预置」对话框内置 **AI 生成项目架构说明** 按钮 + **编辑指令** 按钮:服务端递归识别当前项目里的所有子项目(含 `.git` 或 9 种 manifest 之一的目录),为每个子项目独立读取关键文件(manifest 20 KB / README 8 KB / 2 层目录树),并发调 LLM 产出各子项目架构说明,多子项目场景再合并成一份整体说明;用户可点「编辑指令」自定义生成策略(持久化到 `~/.zen-gitsync/ai-instruction.json`);`max_tokens=4000`,单次请求最多 20 分钟 |
|
|
634
652
|
| 子任务覆盖 | 在子任务描述框可独立覆盖预置提示词的内容 |
|
|
635
653
|
| 顺序执行 | 按声明顺序依次执行子任务;上一个进程退出后才启动下一个 |
|
|
636
654
|
| 管道模式启动 | 直接以 `claude -p "<prompt>" --output-format text --permission-mode bypassPermissions --dangerously-skip-permissions` 拉起进程,stdout / stderr 通过管道回传服务端,不再弹外部终端窗口 |
|
|
637
655
|
| 独立上下文 | 每个子任务都是独立的 detached 进程,上下文与状态不会跨子任务累积 |
|
|
638
|
-
| 实时日志 |
|
|
656
|
+
| 实时日志 | 子任务的「执行日志」面板**默认展开**(不再仅在运行中展开),方便随时回看上次执行结果;面板内自动滚到底,展示累积的 stdout / stderr(服务端缓存 256 KB,客户端渲染最近 64 KB) |
|
|
639
657
|
| 实时状态 | 子任务状态(todo / pending / running / done / error)和 PID 通过 SSE 实时推送 |
|
|
640
658
|
| 执行中动效 | 状态为 `running` 的子任务卡片整体呈现蓝色呼吸光晕 + 顶部流动进度光带;状态徽章为渐变 shimmer + 脉冲白点 + 外发光,停下后平滑恢复 |
|
|
641
659
|
| 跨视图指示 | 任意子任务运行中时,Activity Bar 上的工作台图标会显示脉动小圆点;切换到 Git 或编辑器视图也能看到运行状态 |
|
|
660
|
+
| 执行日志管理(弹窗) | 顶部「执行日志」按钮(替代原独立 tab)唤起弹窗:列表 / 过滤 / 批量删除 / 清空 / 保留策略全部可在此一次性管理;弹窗关闭后任务执行视图常驻,避免切换时不必要的卸载 |
|
|
642
661
|
|
|
643
662
|
提示词预置与任务数据持久化到 `~/.zen-gitsync/prompts.json` 和 `~/.zen-gitsync/tasks.json`(跨项目共享)。子任务附件落盘在 `~/.zen-gitsync/workbench-images/<subId>/`。
|
|
644
663
|
|
|
@@ -657,6 +676,14 @@ Activity Bar 第四个视图,用于在当前仓库上批量调度 Claude:定
|
|
|
657
676
|
|
|
658
677
|
---
|
|
659
678
|
|
|
679
|
+
### 自升级
|
|
680
|
+
|
|
681
|
+
GUI 底栏版本号每个会话会向 npm 查询一次最新版本。检测到更新时版本旁会出现 **升级** 按钮,点击后在弹窗里实时回传 `npm install -g zen-gitsync` 的输出;升级成功后弹窗会切换为「**立即重启并刷新**」主 CTA,调用 `POST /api/app-restart` 让 Node 进程优雅退出(外层 launcher / desktop 壳会自动拉起新版本),再 reload 当前 tab 让新 SPA 资源生效。同时底栏版本号会立刻刷新到新版本号,重启前就能看到。
|
|
682
|
+
|
|
683
|
+
> macOS / Linux 上全局安装需要 sudo,前端会用 `sudo -n` 非交互式尝试;如非免密 sudo,请以管理员权限重启 GUI 后再试。
|
|
684
|
+
|
|
685
|
+
---
|
|
686
|
+
|
|
660
687
|
## 开发约定
|
|
661
688
|
|
|
662
689
|
### 行尾规范
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zen-gitsync",
|
|
3
|
-
"version": "2.13.
|
|
3
|
+
"version": "2.13.11",
|
|
4
4
|
"description": "Auto commit, scheduled sync, and visual GUI for Git. Run `g` in any repo for one-key commit & push, AI commit messages, scheduled background sync, and a drag-and-drop workflow builder.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"pull": "git pull",
|
|
13
13
|
"dev:server": "nodemon server.js --no-open",
|
|
14
14
|
"dev": "concurrently \"npm run dev:server\" \"npm run start:vue\"",
|
|
15
|
+
"dev:ping": "node scripts/dev-ping.cjs",
|
|
15
16
|
"start:server:no-open": "node server.js --no-open",
|
|
16
17
|
"start:vue": "cd ./src/ui/client && npm run dev",
|
|
17
18
|
"release": "node ./scripts/release.js",
|
|
@@ -1,196 +1,196 @@
|
|
|
1
|
-
# 颜色值转换工具使用说明
|
|
2
|
-
|
|
3
|
-
## 功能说明
|
|
4
|
-
|
|
5
|
-
该脚本将项目中硬编码的十六进制颜色值转换为标准的 CSS 变量引用。
|
|
6
|
-
|
|
7
|
-
## 颜色映射规则
|
|
8
|
-
|
|
9
|
-
基于项目中的 `src/ui/client/src/styles/variables.scss` 定义:
|
|
10
|
-
|
|
11
|
-
### 主色调
|
|
12
|
-
- `#409eff` → `var(--color-primary)`
|
|
13
|
-
- `#5a67d8`, `#66b1ff` → `var(--color-primary-light)`
|
|
14
|
-
- `#337ecc` → `var(--color-primary-dark)`
|
|
15
|
-
|
|
16
|
-
### 成功色
|
|
17
|
-
- `#67c23a` → `var(--color-success)`
|
|
18
|
-
- `#10b981` → `var(--color-success-light)`
|
|
19
|
-
|
|
20
|
-
### 警告色
|
|
21
|
-
- `#e6a23c` → `var(--color-warning)`
|
|
22
|
-
- `#f59e0b` → `var(--color-warning-light)`
|
|
23
|
-
|
|
24
|
-
### 危险色
|
|
25
|
-
- `#f56c6c` → `var(--color-danger)`
|
|
26
|
-
- `#ef4444` → `var(--color-danger-light)`
|
|
27
|
-
- `#dc2626` → `var(--color-danger-dark)`
|
|
28
|
-
|
|
29
|
-
### 信息色
|
|
30
|
-
- `#909399` → `var(--color-info)`
|
|
31
|
-
- `#8b5cf6` → `var(--color-info-light)`
|
|
32
|
-
|
|
33
|
-
### 文字颜色
|
|
34
|
-
- `#303133` → `var(--text-primary)`
|
|
35
|
-
- `#606266` → `var(--text-secondary)`
|
|
36
|
-
- `#909399` → `var(--text-tertiary)`
|
|
37
|
-
- `#c0c4cc`, `#a8abb2` → `var(--text-placeholder)`
|
|
38
|
-
|
|
39
|
-
### Git 状态颜色
|
|
40
|
-
- `#10b981` → `var(--git-status-added)`
|
|
41
|
-
- `#f59e0b` → `var(--git-status-modified)`
|
|
42
|
-
- `#ef4444` → `var(--git-status-deleted)`
|
|
43
|
-
- `#8b5cf6` → `var(--git-status-untracked)`
|
|
44
|
-
|
|
45
|
-
## 使用方法
|
|
46
|
-
|
|
47
|
-
### 预览模式(推荐先运行)
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
# 预览将要进行的更改,不修改文件
|
|
51
|
-
node scripts/convert-colors-to-vars.cjs --dry-run
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### 实际应用
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
# 应用更改到文件
|
|
58
|
-
node scripts/convert-colors-to-vars.cjs
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## 转换示例
|
|
62
|
-
|
|
63
|
-
**转换前:**
|
|
64
|
-
```vue
|
|
65
|
-
<style>
|
|
66
|
-
.button {
|
|
67
|
-
background: #409eff;
|
|
68
|
-
color: #ffffff;
|
|
69
|
-
border: 1px solid #66b1ff;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.success-button {
|
|
73
|
-
background: #67c23a;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.text {
|
|
77
|
-
color: #303133;
|
|
78
|
-
}
|
|
79
|
-
</style>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
**转换后:**
|
|
83
|
-
```vue
|
|
84
|
-
<style>
|
|
85
|
-
.button {
|
|
86
|
-
background: var(--color-primary);
|
|
87
|
-
color: var(--color-white);
|
|
88
|
-
border: 1px solid var(--color-primary-light);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.success-button {
|
|
92
|
-
background: var(--color-success);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.text {
|
|
96
|
-
color: var(--text-primary);
|
|
97
|
-
}
|
|
98
|
-
</style>
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
## 支持的文件类型
|
|
102
|
-
|
|
103
|
-
- `.vue` - Vue 单文件组件
|
|
104
|
-
- `.scss` - Sass 样式文件
|
|
105
|
-
- `.css` - 纯 CSS 文件
|
|
106
|
-
|
|
107
|
-
## 跳过的文件
|
|
108
|
-
|
|
109
|
-
脚本会自动跳过以下文件(这些文件定义了变量本身):
|
|
110
|
-
- `variables.scss`
|
|
111
|
-
- `dark-theme.scss`
|
|
112
|
-
|
|
113
|
-
同时自动跳过以下目录:
|
|
114
|
-
- `node_modules`
|
|
115
|
-
- `.git`
|
|
116
|
-
- `dist`
|
|
117
|
-
|
|
118
|
-
## 输出报告
|
|
119
|
-
|
|
120
|
-
执行完成后会显示详细的统计报告:
|
|
121
|
-
|
|
122
|
-
```
|
|
123
|
-
📊 转换统计报告
|
|
124
|
-
============================================================
|
|
125
|
-
总文件数: 150
|
|
126
|
-
修改文件数: 42
|
|
127
|
-
总替换次数: 289
|
|
128
|
-
|
|
129
|
-
📋 替换详情:
|
|
130
|
-
#409eff => var(--color-primary): 78 次
|
|
131
|
-
#67c23a => var(--color-success): 45 次
|
|
132
|
-
#f56c6c => var(--color-danger): 32 次
|
|
133
|
-
...
|
|
134
|
-
|
|
135
|
-
⚠️ 未映射的颜色(需要手动检查):
|
|
136
|
-
#f8faff
|
|
137
|
-
#eef4ff
|
|
138
|
-
...
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
## 注意事项
|
|
142
|
-
|
|
143
|
-
1. **备份建议**:运行脚本前建议先使用 `--dry-run` 参数预览更改
|
|
144
|
-
2. **Git 提交**:建议在运行前提交当前代码,方便回滚
|
|
145
|
-
3. **未映射颜色**:脚本会列出未映射的颜色,需要手动检查这些颜色是否需要添加到映射表
|
|
146
|
-
4. **特殊颜色**:某些渐变色或特殊效果的颜色可能需要保留原值
|
|
147
|
-
5. **rgba 颜色**:当前脚本仅处理十六进制颜色值,rgba 格式需要手动处理
|
|
148
|
-
|
|
149
|
-
## 优势
|
|
150
|
-
|
|
151
|
-
使用 CSS 变量替代硬编码颜色的好处:
|
|
152
|
-
|
|
153
|
-
1. **统一管理**:所有颜色在 `variables.scss` 中统一定义
|
|
154
|
-
2. **主题切换**:轻松实现深色主题等样式变体
|
|
155
|
-
3. **易于维护**:修改变量值即可全局更新
|
|
156
|
-
4. **语义化**:变量名更具可读性(如 `--color-success` vs `#67c23a`)
|
|
157
|
-
5. **一致性**:确保整个项目使用统一的配色方案
|
|
158
|
-
|
|
159
|
-
## 扩展映射表
|
|
160
|
-
|
|
161
|
-
如果发现新的颜色值需要映射,编辑脚本中的 `COLOR_MAP` 对象:
|
|
162
|
-
|
|
163
|
-
```javascript
|
|
164
|
-
const COLOR_MAP = {
|
|
165
|
-
// 添加新的映射
|
|
166
|
-
'#your-color': 'var(--your-variable)',
|
|
167
|
-
// ...
|
|
168
|
-
};
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
## 回滚方法
|
|
172
|
-
|
|
173
|
-
如果需要回滚更改:
|
|
174
|
-
|
|
175
|
-
```bash
|
|
176
|
-
# 如果还未提交
|
|
177
|
-
git checkout -- src/
|
|
178
|
-
|
|
179
|
-
# 如果已提交
|
|
180
|
-
git revert <commit-hash>
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
## 与其他脚本配合
|
|
184
|
-
|
|
185
|
-
该脚本可以与其他样式标准化脚本配合使用:
|
|
186
|
-
|
|
187
|
-
```bash
|
|
188
|
-
# 1. 转换间距值
|
|
189
|
-
node scripts/convert-spacing-to-vars.cjs
|
|
190
|
-
|
|
191
|
-
# 2. 转换圆角和阴影
|
|
192
|
-
node scripts/convert-to-standard-vars.js
|
|
193
|
-
|
|
194
|
-
# 3. 转换颜色值
|
|
195
|
-
node scripts/convert-colors-to-vars.cjs
|
|
196
|
-
```
|
|
1
|
+
# 颜色值转换工具使用说明
|
|
2
|
+
|
|
3
|
+
## 功能说明
|
|
4
|
+
|
|
5
|
+
该脚本将项目中硬编码的十六进制颜色值转换为标准的 CSS 变量引用。
|
|
6
|
+
|
|
7
|
+
## 颜色映射规则
|
|
8
|
+
|
|
9
|
+
基于项目中的 `src/ui/client/src/styles/variables.scss` 定义:
|
|
10
|
+
|
|
11
|
+
### 主色调
|
|
12
|
+
- `#409eff` → `var(--color-primary)`
|
|
13
|
+
- `#5a67d8`, `#66b1ff` → `var(--color-primary-light)`
|
|
14
|
+
- `#337ecc` → `var(--color-primary-dark)`
|
|
15
|
+
|
|
16
|
+
### 成功色
|
|
17
|
+
- `#67c23a` → `var(--color-success)`
|
|
18
|
+
- `#10b981` → `var(--color-success-light)`
|
|
19
|
+
|
|
20
|
+
### 警告色
|
|
21
|
+
- `#e6a23c` → `var(--color-warning)`
|
|
22
|
+
- `#f59e0b` → `var(--color-warning-light)`
|
|
23
|
+
|
|
24
|
+
### 危险色
|
|
25
|
+
- `#f56c6c` → `var(--color-danger)`
|
|
26
|
+
- `#ef4444` → `var(--color-danger-light)`
|
|
27
|
+
- `#dc2626` → `var(--color-danger-dark)`
|
|
28
|
+
|
|
29
|
+
### 信息色
|
|
30
|
+
- `#909399` → `var(--color-info)`
|
|
31
|
+
- `#8b5cf6` → `var(--color-info-light)`
|
|
32
|
+
|
|
33
|
+
### 文字颜色
|
|
34
|
+
- `#303133` → `var(--text-primary)`
|
|
35
|
+
- `#606266` → `var(--text-secondary)`
|
|
36
|
+
- `#909399` → `var(--text-tertiary)`
|
|
37
|
+
- `#c0c4cc`, `#a8abb2` → `var(--text-placeholder)`
|
|
38
|
+
|
|
39
|
+
### Git 状态颜色
|
|
40
|
+
- `#10b981` → `var(--git-status-added)`
|
|
41
|
+
- `#f59e0b` → `var(--git-status-modified)`
|
|
42
|
+
- `#ef4444` → `var(--git-status-deleted)`
|
|
43
|
+
- `#8b5cf6` → `var(--git-status-untracked)`
|
|
44
|
+
|
|
45
|
+
## 使用方法
|
|
46
|
+
|
|
47
|
+
### 预览模式(推荐先运行)
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# 预览将要进行的更改,不修改文件
|
|
51
|
+
node scripts/convert-colors-to-vars.cjs --dry-run
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 实际应用
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
# 应用更改到文件
|
|
58
|
+
node scripts/convert-colors-to-vars.cjs
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## 转换示例
|
|
62
|
+
|
|
63
|
+
**转换前:**
|
|
64
|
+
```vue
|
|
65
|
+
<style>
|
|
66
|
+
.button {
|
|
67
|
+
background: #409eff;
|
|
68
|
+
color: #ffffff;
|
|
69
|
+
border: 1px solid #66b1ff;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.success-button {
|
|
73
|
+
background: #67c23a;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.text {
|
|
77
|
+
color: #303133;
|
|
78
|
+
}
|
|
79
|
+
</style>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
**转换后:**
|
|
83
|
+
```vue
|
|
84
|
+
<style>
|
|
85
|
+
.button {
|
|
86
|
+
background: var(--color-primary);
|
|
87
|
+
color: var(--color-white);
|
|
88
|
+
border: 1px solid var(--color-primary-light);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.success-button {
|
|
92
|
+
background: var(--color-success);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.text {
|
|
96
|
+
color: var(--text-primary);
|
|
97
|
+
}
|
|
98
|
+
</style>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## 支持的文件类型
|
|
102
|
+
|
|
103
|
+
- `.vue` - Vue 单文件组件
|
|
104
|
+
- `.scss` - Sass 样式文件
|
|
105
|
+
- `.css` - 纯 CSS 文件
|
|
106
|
+
|
|
107
|
+
## 跳过的文件
|
|
108
|
+
|
|
109
|
+
脚本会自动跳过以下文件(这些文件定义了变量本身):
|
|
110
|
+
- `variables.scss`
|
|
111
|
+
- `dark-theme.scss`
|
|
112
|
+
|
|
113
|
+
同时自动跳过以下目录:
|
|
114
|
+
- `node_modules`
|
|
115
|
+
- `.git`
|
|
116
|
+
- `dist`
|
|
117
|
+
|
|
118
|
+
## 输出报告
|
|
119
|
+
|
|
120
|
+
执行完成后会显示详细的统计报告:
|
|
121
|
+
|
|
122
|
+
```
|
|
123
|
+
📊 转换统计报告
|
|
124
|
+
============================================================
|
|
125
|
+
总文件数: 150
|
|
126
|
+
修改文件数: 42
|
|
127
|
+
总替换次数: 289
|
|
128
|
+
|
|
129
|
+
📋 替换详情:
|
|
130
|
+
#409eff => var(--color-primary): 78 次
|
|
131
|
+
#67c23a => var(--color-success): 45 次
|
|
132
|
+
#f56c6c => var(--color-danger): 32 次
|
|
133
|
+
...
|
|
134
|
+
|
|
135
|
+
⚠️ 未映射的颜色(需要手动检查):
|
|
136
|
+
#f8faff
|
|
137
|
+
#eef4ff
|
|
138
|
+
...
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## 注意事项
|
|
142
|
+
|
|
143
|
+
1. **备份建议**:运行脚本前建议先使用 `--dry-run` 参数预览更改
|
|
144
|
+
2. **Git 提交**:建议在运行前提交当前代码,方便回滚
|
|
145
|
+
3. **未映射颜色**:脚本会列出未映射的颜色,需要手动检查这些颜色是否需要添加到映射表
|
|
146
|
+
4. **特殊颜色**:某些渐变色或特殊效果的颜色可能需要保留原值
|
|
147
|
+
5. **rgba 颜色**:当前脚本仅处理十六进制颜色值,rgba 格式需要手动处理
|
|
148
|
+
|
|
149
|
+
## 优势
|
|
150
|
+
|
|
151
|
+
使用 CSS 变量替代硬编码颜色的好处:
|
|
152
|
+
|
|
153
|
+
1. **统一管理**:所有颜色在 `variables.scss` 中统一定义
|
|
154
|
+
2. **主题切换**:轻松实现深色主题等样式变体
|
|
155
|
+
3. **易于维护**:修改变量值即可全局更新
|
|
156
|
+
4. **语义化**:变量名更具可读性(如 `--color-success` vs `#67c23a`)
|
|
157
|
+
5. **一致性**:确保整个项目使用统一的配色方案
|
|
158
|
+
|
|
159
|
+
## 扩展映射表
|
|
160
|
+
|
|
161
|
+
如果发现新的颜色值需要映射,编辑脚本中的 `COLOR_MAP` 对象:
|
|
162
|
+
|
|
163
|
+
```javascript
|
|
164
|
+
const COLOR_MAP = {
|
|
165
|
+
// 添加新的映射
|
|
166
|
+
'#your-color': 'var(--your-variable)',
|
|
167
|
+
// ...
|
|
168
|
+
};
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## 回滚方法
|
|
172
|
+
|
|
173
|
+
如果需要回滚更改:
|
|
174
|
+
|
|
175
|
+
```bash
|
|
176
|
+
# 如果还未提交
|
|
177
|
+
git checkout -- src/
|
|
178
|
+
|
|
179
|
+
# 如果已提交
|
|
180
|
+
git revert <commit-hash>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
## 与其他脚本配合
|
|
184
|
+
|
|
185
|
+
该脚本可以与其他样式标准化脚本配合使用:
|
|
186
|
+
|
|
187
|
+
```bash
|
|
188
|
+
# 1. 转换间距值
|
|
189
|
+
node scripts/convert-spacing-to-vars.cjs
|
|
190
|
+
|
|
191
|
+
# 2. 转换圆角和阴影
|
|
192
|
+
node scripts/convert-to-standard-vars.js
|
|
193
|
+
|
|
194
|
+
# 3. 转换颜色值
|
|
195
|
+
node scripts/convert-colors-to-vars.cjs
|
|
196
|
+
```
|