zen-gitsync 2.13.28 → 2.13.30
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 +2 -2
- 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/src/ui/public/assets/AppVersionBadge-CFkZrkhd.js +2 -0
- package/src/ui/public/assets/{AppVersionBadge-CTUXSSX1.css → AppVersionBadge-KZ64lrZQ.css} +1 -1
- package/src/ui/public/assets/BranchSelector-BzaBCj1X.js +1 -0
- package/src/ui/public/assets/CommandConsole-DKwcJRbO.js +17 -0
- package/src/ui/public/assets/CommitForm-w_CCHowb.js +6 -0
- package/src/ui/public/assets/CustomCommandManager-C81Su49z.js +1 -0
- package/src/ui/public/assets/EditorView-Do6ivdLH.js +0 -0
- package/src/ui/public/assets/FileDiffViewer-CXMo-Rez.js +13 -0
- package/src/ui/public/assets/{FlowExecutionViewer-DAsEnHsE.js → FlowExecutionViewer-Bhcnqca8.js} +1 -1
- package/src/ui/public/assets/FlowOrchestrationWorkspace-Cb6C2RyD.js +21 -0
- package/src/ui/public/assets/GitStatus-D90r1nV4.js +6 -0
- package/src/ui/public/assets/ImagePreview-kHYBPYW5.js +1 -0
- package/src/ui/public/assets/LogList-D6nSWEwN.js +7 -0
- package/src/ui/public/assets/ProjectStartupButton-BliaT11B.js +1 -0
- package/src/ui/public/assets/RemoteRepoCard-CUs9RQZg.js +1 -0
- package/src/ui/public/assets/ResetToRemoteButton-BBsIG2FU.js +1 -0
- package/src/ui/public/assets/SourceMapView-Cvp-7LtP.js +3 -0
- package/src/ui/public/assets/TemplateManager-Clov9VqY.js +1 -0
- package/src/ui/public/assets/UserInputNode-yVqO69ll.js +1 -0
- package/src/ui/public/assets/WorkbenchView-BDYbbkM1.js +12 -0
- package/src/ui/public/assets/WorkbenchView-zUE7sv6z.css +1 -0
- package/src/ui/public/assets/{_plugin-vue_export-helper-CHzCpi8c.js → _plugin-vue_export-helper-CpTW8798.js} +3 -3
- package/src/ui/public/assets/element-plus-CRTdimvR.js +24 -0
- package/src/ui/public/assets/{flow-mindmap-mZisamFd.js → flow-mindmap-oBAz3_QK.js} +4 -4
- package/src/ui/public/assets/index-B666KMk3.js +7 -0
- package/src/ui/public/assets/vendor-BxotT5qN.js +93 -0
- package/src/ui/public/assets/vue-flow-Bx03URoq.js +39 -0
- 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/index.js +1 -0
- package/src/ui/server/routes/npm.js +161 -8
- package/src/ui/server/routes/workbench.js +17 -3
- package/src/ui/server/utils/instanceRegistry.js +11 -0
- package/src/ui/server/utils/startServerOnAvailablePort.js +13 -0
- package/src/ui/public/assets/AppVersionBadge-C63UkgfW.js +0 -2
- package/src/ui/public/assets/BranchSelector-Dx2OFvQn.js +0 -1
- package/src/ui/public/assets/CommandConsole-CWGa4uzV.js +0 -17
- package/src/ui/public/assets/CommitForm-DDx1W2nU.js +0 -6
- package/src/ui/public/assets/CustomCommandManager-COAy_rkz.js +0 -1
- package/src/ui/public/assets/EditorView-BI31hRI_.js +0 -0
- package/src/ui/public/assets/FileDiffViewer-B2BI1bGl.js +0 -13
- package/src/ui/public/assets/FlowOrchestrationWorkspace-DBgGQhNc.js +0 -21
- package/src/ui/public/assets/GitStatus-DJKc0Trp.js +0 -6
- package/src/ui/public/assets/ImagePreview-BrXFnZf_.js +0 -1
- package/src/ui/public/assets/LogList-DA4kCWzm.js +0 -7
- package/src/ui/public/assets/ProjectStartupButton-BkB5UNRF.js +0 -1
- package/src/ui/public/assets/RemoteRepoCard-DPfD9ETA.js +0 -1
- package/src/ui/public/assets/ResetToRemoteButton-nUKiK2JR.js +0 -1
- package/src/ui/public/assets/SourceMapView-B49a7U0e.js +0 -3
- package/src/ui/public/assets/TemplateManager-BTDGivoE.js +0 -1
- package/src/ui/public/assets/UserInputNode-BkdGs5AU.js +0 -1
- package/src/ui/public/assets/WorkbenchView-CX-g5psr.js +0 -12
- package/src/ui/public/assets/WorkbenchView-KpSRlP_a.css +0 -1
- package/src/ui/public/assets/__vite-optional-peer-dep_katex_markstream-vue-Bg9-FXxr.js +0 -1
- package/src/ui/public/assets/__vite-optional-peer-dep_mermaid_markstream-vue-cPZl55sA.js +0 -1
- package/src/ui/public/assets/__vite-optional-peer-dep_stream-markdown_markstream-vue-Dhgp-lRL.js +0 -1
- package/src/ui/public/assets/__vite-optional-peer-dep_stream-monaco_markstream-vue-Cr1d6De7.js +0 -1
- package/src/ui/public/assets/d2_markstream-vue-xMoF3M5G.js +0 -1
- package/src/ui/public/assets/element-plus-rcpA4EGF.js +0 -26
- package/src/ui/public/assets/index-BTHO-83r.js +0 -7
- package/src/ui/public/assets/mhchem_markstream-vue-tp86PqxG.js +0 -1
- package/src/ui/public/assets/vendor-DoD2dmIW.js +0 -226
- package/src/ui/public/assets/vue-flow-CfamgGcL.js +0 -39
package/README.md
CHANGED
|
@@ -288,7 +288,7 @@ Prompt presets and tasks are persisted to `~/.zen-gitsync/prompts.json` and `~/.
|
|
|
288
288
|
|
|
289
289
|
### Self-Upgrade
|
|
290
290
|
|
|
291
|
-
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
|
|
291
|
+
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. Clicking it calls `POST /api/app-restart`, which **self-respawns a new Node process** (no external launcher / desktop shell is required), waits for the new process to bind its port, streams that port back to the browser over NDJSON, and gracefully exits the old process. The browser then **redirects** to the new port (preserving the current path, query, and hash) so the upgraded backend serves the next request. The footer version also updates instantly to the new number so you can see the bump even before restarting. If the child process fails to come up within 8s, the old process is preserved and an error toast is shown — your session stays connected.
|
|
292
292
|
|
|
293
293
|
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.
|
|
294
294
|
|
|
@@ -690,7 +690,7 @@ Activity Bar 第四个视图,用于在当前仓库上批量调度 Claude:定
|
|
|
690
690
|
|
|
691
691
|
### 自升级
|
|
692
692
|
|
|
693
|
-
GUI 底栏版本号每个会话会向 npm 查询一次最新版本。检测到更新时版本旁会出现 **升级** 按钮,点击后在弹窗里实时回传 `npm install -g zen-gitsync` 的输出;升级成功后弹窗会切换为「**立即重启并刷新**」主 CTA
|
|
693
|
+
GUI 底栏版本号每个会话会向 npm 查询一次最新版本。检测到更新时版本旁会出现 **升级** 按钮,点击后在弹窗里实时回传 `npm install -g zen-gitsync` 的输出;升级成功后弹窗会切换为「**立即重启并刷新**」主 CTA。点击后调用 `POST /api/app-restart`,后端**自行 spawn 新 Node 进程**(不依赖任何外层 launcher / 桌面壳),通过 NDJSON 流把新进程端口推回前端,旧进程再优雅退出;浏览器**重定向**到新端口(保留当前 path、query、hash)由新后端服务后续请求。同时底栏版本号会立刻刷新到新版本号,重启前就能看到。若子进程 8 秒内未就绪,旧进程不退出并弹错误提示,您的会话保持连接。
|
|
694
694
|
|
|
695
695
|
> macOS / Linux 上全局安装需要 sudo,前端会用 `sudo -n` 非交互式尝试;如非免密 sudo,请以管理员权限重启 GUI 后再试。
|
|
696
696
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zen-gitsync",
|
|
3
|
-
"version": "2.13.
|
|
3
|
+
"version": "2.13.30",
|
|
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
|
+
```
|