zen-gitsync 2.13.6 → 2.13.8
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 +8 -4
- package/package.json +1 -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/verify-file-search.mjs +281 -0
- package/src/ui/public/assets/EditorView-CSUfBR5z.js +0 -0
- package/src/ui/public/assets/EditorView-Dvg7sMyU.css +1 -0
- package/src/ui/public/assets/SourceMapView-CPsyB1rP.js +3 -0
- package/src/ui/public/assets/WorkbenchView-BBDJOY3C.js +6 -0
- package/src/ui/public/assets/WorkbenchView-CA91BJc8.css +1 -0
- package/src/ui/public/assets/{_plugin-vue_export-helper-Dw3U5p9d.js → _plugin-vue_export-helper-rFkdzaHd.js} +3 -3
- package/src/ui/public/assets/{css.worker-CvXBzhp8.js → css.worker-Wv5dxAWO.js} +1 -1
- package/src/ui/public/assets/{html.worker-BO6WuOEO.js → html.worker-CQP8QQsS.js} +1 -1
- package/src/ui/public/assets/index-CLVL3Inb.js +66 -0
- package/src/ui/public/assets/index-ChSExFC3.css +1 -0
- package/src/ui/public/assets/{json.worker-BkJRGcCJ.js → json.worker-DzV-CpCQ.js} +1 -1
- package/src/ui/public/assets/{ts.worker-B0J26iPs.js → ts.worker-Dth06zuC.js} +15 -15
- package/src/ui/public/assets/{vendor-C30huq-U.js → vendor-CDAfMQIV.js} +240 -247
- package/src/ui/public/assets/vendor-CIeR0bF6.css +1 -0
- package/src/ui/public/favicon.svg +75 -75
- package/src/ui/public/index.html +23 -23
- package/src/ui/public/logo.svg +74 -74
- package/src/ui/server/routes/workbench.js +299 -160
- package/src/ui/public/assets/EditorView-BLK-Sohi.js +0 -0
- package/src/ui/public/assets/EditorView-DEd8QuPp.css +0 -1
- package/src/ui/public/assets/SourceMapView-CMJnpleg.js +0 -3
- package/src/ui/public/assets/WorkbenchView-CPcGSyVM.css +0 -1
- package/src/ui/public/assets/WorkbenchView-CTB3QNSR.js +0 -6
- package/src/ui/public/assets/index-CV4VteDa.css +0 -1
- package/src/ui/public/assets/index-DyR_trSU.js +0 -66
- package/src/ui/public/assets/vendor-Bq2rS2vY.css +0 -1
- /package/src/ui/public/assets/{editor.worker-Cn2oRESe.js → editor.worker-Bd9IXS8d.js} +0 -0
- /package/src/ui/public/assets/{rolldown-runtime-CMxvf4Kt.js → rolldown-runtime-BM3Ffeng.js} +0 -0
package/README.md
CHANGED
|
@@ -206,6 +206,7 @@ A full IDE-like editor (second icon in the activity bar) for browsing and editin
|
|
|
206
206
|
| Feature | Description |
|
|
207
207
|
|---|---|
|
|
208
208
|
| File tree | Collapsible directory tree with file-type icons |
|
|
209
|
+
| File search | Type in the sidebar search box to filter the tree (180 ms debounce); matched substrings are highlighted in node names; `Ctrl+F` / `Cmd+F` focuses the box; `Esc` clears the query or blurs the input |
|
|
209
210
|
| Multi-tab editing | Open multiple files simultaneously; tabs show unsaved (●) indicator |
|
|
210
211
|
| Monaco editor | Syntax highlighting for JS, TS, Vue, Python, Go, JSON, CSS, and more |
|
|
211
212
|
| Markdown preview | Toggle between source and rendered preview for `.md` files |
|
|
@@ -430,7 +431,7 @@ npm install -g zen-gitsync
|
|
|
430
431
|
- **项目启动** — 打开项目时自动运行命令或工作流
|
|
431
432
|
- **内置代码编辑器** — 基于 Monaco 的文件编辑器,支持 Markdown 预览
|
|
432
433
|
- **源码地图** — AI 生成的交互式代码库依赖关系图
|
|
433
|
-
- **工作台** — 任务驱动的 Claude 执行视图:提示词预置、子任务拆分、独立 bypass-permissions 进程、stdout 实时回传、AI
|
|
434
|
+
- **工作台** — 任务驱动的 Claude 执行视图:提示词预置、子任务拆分、独立 bypass-permissions 进程、stdout 实时回传、AI 自动生成预置提示词、子任务附件、任务字段自动保存、简单/复杂任务分类
|
|
434
435
|
- **重置到远程** — 在 Git 面板一键执行 `git reset --hard origin/<branch>`(点击前会先自动刷新分支信息,避免重置到陈旧分支)
|
|
435
436
|
- **AI 生成提交信息** — 基于 staged diff 自动生成提交消息
|
|
436
437
|
- **选择模式差异** — 当 Git 视图为当前激活标签时,AI 生成提交信息与一键提交/推送仅作用于当前勾选文件的 diff
|
|
@@ -585,6 +586,7 @@ Activity Bar 第二个视图,在 GUI 内直接浏览并编辑项目文件:
|
|
|
585
586
|
| 功能 | 说明 |
|
|
586
587
|
|---|---|
|
|
587
588
|
| 文件树 | 可折叠的目录树,附带文件类型图标 |
|
|
589
|
+
| 文件搜索 | 在侧边栏搜索框中输入关键字过滤文件树(180ms 防抖),命中片段会在节点名中高亮;`Ctrl+F` / `Cmd+F` 聚焦搜索框,`Esc` 清空内容或失焦 |
|
|
588
590
|
| 多标签页 | 同时打开多个文件,未保存文件显示 ● 标记 |
|
|
589
591
|
| Monaco 编辑器 | 支持 JS、TS、Vue、Python、Go、JSON、CSS 等语法高亮 |
|
|
590
592
|
| Markdown 预览 | `.md` 文件可切换源码与渲染预览模式 |
|
|
@@ -622,9 +624,11 @@ Activity Bar 第四个视图,用于在当前仓库上批量调度 Claude:定
|
|
|
622
624
|
|
|
623
625
|
| 功能 | 说明 |
|
|
624
626
|
|---|---|
|
|
625
|
-
| 任务列表 |
|
|
626
|
-
|
|
|
627
|
-
|
|
|
627
|
+
| 任务列表 | 新建、编辑、删除任务;每条任务显示子任务数量;简单任务左侧带绿色「简单」徽标 |
|
|
628
|
+
| 任务字段自动保存 | 标题 / 描述 / 预置提示词 / 简单任务覆盖 改动后 1.5s 防抖落盘,标题右侧显示「保存中 / 已保存 / 有未保存的更改」状态徽标;切换任务或关页面前自动 flush(含 `navigator.sendBeacon` 兜底) |
|
|
629
|
+
| 简单任务 | 新建任务时选「简单(直接执行)」即跳过子任务拆分;执行时把 task.desc 拼成单 sub 走 `/tasks/:id/run-simple`;可填「覆盖预置提示词」独立覆写预置模板;主任务附件 + 描述 + 覆盖三者合并驱动 Claude |
|
|
630
|
+
| 子任务拆分 | 增删改子任务,实时显示每个子任务的执行状态;空态提供居中插画卡片、主 CTA「添加子任务」与「用 AI 自动拆分」次级入口(仅复杂任务显示) |
|
|
631
|
+
| 子任务附件 | 每个子任务最多挂 9 个附件(图片 / PDF / 文本 / Markdown / CSV / JSON / log,单个 ≤ 5 MB);同 `originalName + size` 已存在则直接复用,跳过重复上传;执行时绝对路径会自动追加到 prompt 末尾,Claude 直接按路径读取 |
|
|
628
632
|
| 提示词预置 | 可复用提示词模板,支持 `{{task.title}}` / `{{task.desc}}` / `{{sub.title}}` / `{{sub.desc}}` / `{{repo.path}}` / `{{branch}}` 变量插值 |
|
|
629
633
|
| AI 生成预置 | 「新建 / 编辑预置」对话框内置 **AI 生成项目架构说明** 按钮 + **编辑指令** 按钮:服务端递归识别当前项目里的所有子项目(含 `.git` 或 9 种 manifest 之一的目录),为每个子项目独立读取关键文件(manifest 20 KB / README 8 KB / 2 层目录树),并发调 LLM 产出各子项目架构说明,多子项目场景再合并成一份整体说明;用户可点「编辑指令」自定义生成策略(持久化到 `~/.zen-gitsync/ai-instruction.json`);`max_tokens=4000`,单次请求最多 20 分钟 |
|
|
630
634
|
| 子任务覆盖 | 在子任务描述框可独立覆盖预置提示词的内容 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zen-gitsync",
|
|
3
|
-
"version": "2.13.
|
|
3
|
+
"version": "2.13.8",
|
|
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",
|
|
@@ -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
|
+
```
|