zen-gitsync 2.12.7 → 2.12.9
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 +58 -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/EditorView-C4DezJRA.js +0 -0
- package/src/ui/public/assets/{EditorView-DK-Xgt7r.css → EditorView-DEd8QuPp.css} +1 -1
- package/src/ui/public/assets/SourceMapView-B521sL_k.js +3 -0
- package/src/ui/public/assets/SourceMapView-P9hbpXgz.css +1 -0
- package/src/ui/public/assets/WorkbenchView-75x9qygA.js +1 -0
- package/src/ui/public/assets/WorkbenchView-Dc9vThI8.css +1 -0
- package/src/ui/public/assets/_plugin-vue_export-helper-DMUTnP0C.js +9 -0
- 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-BCIFnj7e.css +1 -0
- package/src/ui/public/assets/index-cS1g7H--.js +65 -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-B2yudN8R.css +1 -0
- package/src/ui/public/assets/{vendor-BMFU1ekz.js → vendor-C1sPhIEb.js} +242 -249
- package/src/ui/public/favicon.svg +75 -75
- package/src/ui/public/index.html +23 -22
- package/src/ui/public/logo.svg +74 -74
- package/src/ui/server/index.js +9 -0
- package/src/ui/server/routes/workbench.js +1068 -0
- package/src/ui/public/assets/EditorView-DDyMmxPI.js +0 -0
- package/src/ui/public/assets/SourceMapView-DakscAmd.js +0 -3
- package/src/ui/public/assets/SourceMapView-DyMK80hS.css +0 -1
- package/src/ui/public/assets/index-CPUqt5Ue.js +0 -73
- package/src/ui/public/assets/index-a-r8YYZJ.css +0 -1
- package/src/ui/public/assets/vendor-BPPhhD0O.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
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
# 间距值转换工具使用说明
|
|
2
|
-
|
|
3
|
-
## 功能说明
|
|
4
|
-
|
|
5
|
-
该脚本将项目中 `padding`、`margin`、`gap` 属性中的 px 值转换为标准的 CSS 变量引用。
|
|
6
|
-
|
|
7
|
-
## 标准间距映射规则
|
|
8
|
-
|
|
9
|
-
根据项目中的 CSS 变量定义(`src/ui/client/src/styles/variables.scss`):
|
|
10
|
-
|
|
11
|
-
| 原始值 | 转换后 | CSS变量定义 |
|
|
12
|
-
|--------|--------|-------------|
|
|
13
|
-
| 2px | var(--spacing-xs) | 2px |
|
|
14
|
-
| 4px | var(--spacing-sm) | 4px |
|
|
15
|
-
| 8px | var(--spacing-base) | 8px |
|
|
16
|
-
| 12px | var(--spacing-md) | 12px |
|
|
17
|
-
| 16px | var(--spacing-lg) | 16px |
|
|
18
|
-
| 20px | var(--spacing-xl) | 20px |
|
|
19
|
-
| 24px | var(--spacing-2xl) | 24px |
|
|
20
|
-
| 32px | var(--spacing-3xl) | 32px |
|
|
21
|
-
|
|
22
|
-
### 保留的特殊值
|
|
23
|
-
|
|
24
|
-
以下值不会被转换,保持原样:
|
|
25
|
-
- **1px** - 通常用于边框
|
|
26
|
-
- **3px, 5px** - 特殊设计值
|
|
27
|
-
- **6px, 10px** - 常用于紧凑布局
|
|
28
|
-
- **18px** - 通常与字体相关
|
|
29
|
-
- **40px 及其他** - 特殊大间距值
|
|
30
|
-
|
|
31
|
-
## 使用方法
|
|
32
|
-
|
|
33
|
-
### 基本用法
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
# 在项目根目录执行
|
|
37
|
-
node scripts/convert-spacing-to-vars.js
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### 转换示例
|
|
41
|
-
|
|
42
|
-
**转换前:**
|
|
43
|
-
```css
|
|
44
|
-
.example {
|
|
45
|
-
padding: 12px 16px;
|
|
46
|
-
margin: 8px;
|
|
47
|
-
gap: 16px;
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
**转换后:**
|
|
52
|
-
```css
|
|
53
|
-
.example {
|
|
54
|
-
padding: var(--spacing-md) var(--spacing-lg);
|
|
55
|
-
margin: var(--spacing-base);
|
|
56
|
-
gap: var(--spacing-lg);
|
|
57
|
-
}
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
**保留特殊值示例:**
|
|
61
|
-
```css
|
|
62
|
-
.example {
|
|
63
|
-
padding: 6px var(--spacing-md); /* 6px 保持不变 */
|
|
64
|
-
margin: 1px; /* 1px 保持不变(边框用途)*/
|
|
65
|
-
gap: var(--spacing-base); /* 8px 被转换 */
|
|
66
|
-
}
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
## 支持的文件类型
|
|
70
|
-
|
|
71
|
-
- `.vue` - Vue 单文件组件
|
|
72
|
-
- `.scss` - Sass 样式文件
|
|
73
|
-
- `.css` - 纯 CSS 文件
|
|
74
|
-
|
|
75
|
-
## 扫描范围
|
|
76
|
-
|
|
77
|
-
脚本会扫描 `src` 目录下的所有目标文件,自动跳过:
|
|
78
|
-
- `node_modules` 目录
|
|
79
|
-
- `.git` 目录
|
|
80
|
-
- `dist` 目录
|
|
81
|
-
|
|
82
|
-
## 输出报告
|
|
83
|
-
|
|
84
|
-
执行完成后会显示统计报告:
|
|
85
|
-
|
|
86
|
-
```
|
|
87
|
-
📊 转换统计报告
|
|
88
|
-
============================================================
|
|
89
|
-
总文件数: 150
|
|
90
|
-
修改文件数: 45
|
|
91
|
-
总替换次数: 234
|
|
92
|
-
|
|
93
|
-
📋 替换详情:
|
|
94
|
-
12px => var(--spacing-md): 89 次
|
|
95
|
-
16px => var(--spacing-lg): 67 次
|
|
96
|
-
8px => var(--spacing-base): 45 次
|
|
97
|
-
...
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## 注意事项
|
|
101
|
-
|
|
102
|
-
1. **备份建议**:运行脚本前建议先提交或备份当前代码
|
|
103
|
-
2. **检查结果**:转换完成后请检查 Git diff,确认转换符合预期
|
|
104
|
-
3. **测试验证**:转换后请运行项目测试,确保样式显示正常
|
|
105
|
-
4. **混合值处理**:脚本能正确处理混合值,如 `padding: 6px var(--spacing-md)`
|
|
106
|
-
|
|
107
|
-
## 优势
|
|
108
|
-
|
|
109
|
-
使用 CSS 变量的好处:
|
|
110
|
-
|
|
111
|
-
1. **统一管理**:所有间距在 `variables.scss` 中统一定义
|
|
112
|
-
2. **易于维护**:修改变量值即可全局更新
|
|
113
|
-
3. **主题支持**:方便实现深色主题等样式变体
|
|
114
|
-
4. **语义化**:变量名更具可读性(如 `--spacing-md` vs `12px`)
|
|
115
|
-
|
|
116
|
-
## 回滚方法
|
|
117
|
-
|
|
118
|
-
如果需要回滚更改:
|
|
119
|
-
|
|
120
|
-
```bash
|
|
121
|
-
# 如果还未提交
|
|
122
|
-
git checkout -- src/
|
|
123
|
-
|
|
124
|
-
# 如果已提交
|
|
125
|
-
git revert <commit-hash>
|
|
126
|
-
```
|
|
1
|
+
# 间距值转换工具使用说明
|
|
2
|
+
|
|
3
|
+
## 功能说明
|
|
4
|
+
|
|
5
|
+
该脚本将项目中 `padding`、`margin`、`gap` 属性中的 px 值转换为标准的 CSS 变量引用。
|
|
6
|
+
|
|
7
|
+
## 标准间距映射规则
|
|
8
|
+
|
|
9
|
+
根据项目中的 CSS 变量定义(`src/ui/client/src/styles/variables.scss`):
|
|
10
|
+
|
|
11
|
+
| 原始值 | 转换后 | CSS变量定义 |
|
|
12
|
+
|--------|--------|-------------|
|
|
13
|
+
| 2px | var(--spacing-xs) | 2px |
|
|
14
|
+
| 4px | var(--spacing-sm) | 4px |
|
|
15
|
+
| 8px | var(--spacing-base) | 8px |
|
|
16
|
+
| 12px | var(--spacing-md) | 12px |
|
|
17
|
+
| 16px | var(--spacing-lg) | 16px |
|
|
18
|
+
| 20px | var(--spacing-xl) | 20px |
|
|
19
|
+
| 24px | var(--spacing-2xl) | 24px |
|
|
20
|
+
| 32px | var(--spacing-3xl) | 32px |
|
|
21
|
+
|
|
22
|
+
### 保留的特殊值
|
|
23
|
+
|
|
24
|
+
以下值不会被转换,保持原样:
|
|
25
|
+
- **1px** - 通常用于边框
|
|
26
|
+
- **3px, 5px** - 特殊设计值
|
|
27
|
+
- **6px, 10px** - 常用于紧凑布局
|
|
28
|
+
- **18px** - 通常与字体相关
|
|
29
|
+
- **40px 及其他** - 特殊大间距值
|
|
30
|
+
|
|
31
|
+
## 使用方法
|
|
32
|
+
|
|
33
|
+
### 基本用法
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
# 在项目根目录执行
|
|
37
|
+
node scripts/convert-spacing-to-vars.js
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 转换示例
|
|
41
|
+
|
|
42
|
+
**转换前:**
|
|
43
|
+
```css
|
|
44
|
+
.example {
|
|
45
|
+
padding: 12px 16px;
|
|
46
|
+
margin: 8px;
|
|
47
|
+
gap: 16px;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
**转换后:**
|
|
52
|
+
```css
|
|
53
|
+
.example {
|
|
54
|
+
padding: var(--spacing-md) var(--spacing-lg);
|
|
55
|
+
margin: var(--spacing-base);
|
|
56
|
+
gap: var(--spacing-lg);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**保留特殊值示例:**
|
|
61
|
+
```css
|
|
62
|
+
.example {
|
|
63
|
+
padding: 6px var(--spacing-md); /* 6px 保持不变 */
|
|
64
|
+
margin: 1px; /* 1px 保持不变(边框用途)*/
|
|
65
|
+
gap: var(--spacing-base); /* 8px 被转换 */
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 支持的文件类型
|
|
70
|
+
|
|
71
|
+
- `.vue` - Vue 单文件组件
|
|
72
|
+
- `.scss` - Sass 样式文件
|
|
73
|
+
- `.css` - 纯 CSS 文件
|
|
74
|
+
|
|
75
|
+
## 扫描范围
|
|
76
|
+
|
|
77
|
+
脚本会扫描 `src` 目录下的所有目标文件,自动跳过:
|
|
78
|
+
- `node_modules` 目录
|
|
79
|
+
- `.git` 目录
|
|
80
|
+
- `dist` 目录
|
|
81
|
+
|
|
82
|
+
## 输出报告
|
|
83
|
+
|
|
84
|
+
执行完成后会显示统计报告:
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
📊 转换统计报告
|
|
88
|
+
============================================================
|
|
89
|
+
总文件数: 150
|
|
90
|
+
修改文件数: 45
|
|
91
|
+
总替换次数: 234
|
|
92
|
+
|
|
93
|
+
📋 替换详情:
|
|
94
|
+
12px => var(--spacing-md): 89 次
|
|
95
|
+
16px => var(--spacing-lg): 67 次
|
|
96
|
+
8px => var(--spacing-base): 45 次
|
|
97
|
+
...
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## 注意事项
|
|
101
|
+
|
|
102
|
+
1. **备份建议**:运行脚本前建议先提交或备份当前代码
|
|
103
|
+
2. **检查结果**:转换完成后请检查 Git diff,确认转换符合预期
|
|
104
|
+
3. **测试验证**:转换后请运行项目测试,确保样式显示正常
|
|
105
|
+
4. **混合值处理**:脚本能正确处理混合值,如 `padding: 6px var(--spacing-md)`
|
|
106
|
+
|
|
107
|
+
## 优势
|
|
108
|
+
|
|
109
|
+
使用 CSS 变量的好处:
|
|
110
|
+
|
|
111
|
+
1. **统一管理**:所有间距在 `variables.scss` 中统一定义
|
|
112
|
+
2. **易于维护**:修改变量值即可全局更新
|
|
113
|
+
3. **主题支持**:方便实现深色主题等样式变体
|
|
114
|
+
4. **语义化**:变量名更具可读性(如 `--spacing-md` vs `12px`)
|
|
115
|
+
|
|
116
|
+
## 回滚方法
|
|
117
|
+
|
|
118
|
+
如果需要回滚更改:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
# 如果还未提交
|
|
122
|
+
git checkout -- src/
|
|
123
|
+
|
|
124
|
+
# 如果已提交
|
|
125
|
+
git revert <commit-hash>
|
|
126
|
+
```
|
|
@@ -1,180 +1,180 @@
|
|
|
1
|
-
# CSS 样式变量标准化工具
|
|
2
|
-
|
|
3
|
-
## 功能说明
|
|
4
|
-
|
|
5
|
-
该脚本将项目中的 `border-radius` 和 `box-shadow` 值转换为标准的 CSS 变量引用。
|
|
6
|
-
|
|
7
|
-
## 转换规则
|
|
8
|
-
|
|
9
|
-
### border-radius 映射
|
|
10
|
-
|
|
11
|
-
| 原始值 | 转换后 | CSS变量定义 |
|
|
12
|
-
|--------|--------|-------------|
|
|
13
|
-
| 2px | var(--radius-xs) | 2px |
|
|
14
|
-
| 3px | var(--radius-sm) | 3px |
|
|
15
|
-
| 4px | var(--radius-base) | 4px |
|
|
16
|
-
| 6px | var(--radius-md) | 6px |
|
|
17
|
-
| 8px | var(--radius-lg) | 8px |
|
|
18
|
-
| 12px | var(--radius-xl) | 12px |
|
|
19
|
-
|
|
20
|
-
### box-shadow 映射
|
|
21
|
-
|
|
22
|
-
| 原始值 | 转换后 | 用途 |
|
|
23
|
-
|--------|--------|------|
|
|
24
|
-
| 0 1px 3px rgba(0, 0, 0, 0.04) | var(--shadow-sm) | 小阴影 |
|
|
25
|
-
| 0 1px 4px rgba(0, 0, 0, 0.04) | var(--shadow-base) | 基础阴影 |
|
|
26
|
-
| 0 2px 8px rgba(0, 0, 0, 0.08) | var(--shadow-md) | 中等阴影 |
|
|
27
|
-
| 0 4px 12px rgba(0, 0, 0, 0.08) | var(--shadow-lg) | 大阴影 |
|
|
28
|
-
| 0 8px 24px rgba(0, 0, 0, 0.12) | var(--shadow-xl) | 超大阴影 |
|
|
29
|
-
|
|
30
|
-
#### 模糊匹配规则
|
|
31
|
-
|
|
32
|
-
对于未精确匹配的 box-shadow 值,脚本会根据偏移量和模糊度智能选择:
|
|
33
|
-
|
|
34
|
-
- **小阴影** (--shadow-sm): offset ≤ 2px, blur ≤ 4px
|
|
35
|
-
- **中等阴影** (--shadow-md): offset 2-4px, blur 6-12px
|
|
36
|
-
- **大阴影** (--shadow-lg): offset 4-8px, blur 12-24px
|
|
37
|
-
|
|
38
|
-
## 使用方法
|
|
39
|
-
|
|
40
|
-
### 预览模式(推荐先运行)
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
# 预览将要进行的更改,不修改文件
|
|
44
|
-
node scripts/convert-to-standard-vars.js --dry-run
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### 实际应用
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
# 应用更改到文件
|
|
51
|
-
node scripts/convert-to-standard-vars.js
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
## 转换示例
|
|
55
|
-
|
|
56
|
-
### border-radius 转换
|
|
57
|
-
|
|
58
|
-
**转换前:**
|
|
59
|
-
```css
|
|
60
|
-
.card {
|
|
61
|
-
border-radius: 8px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.button {
|
|
65
|
-
border-radius: 6px;
|
|
66
|
-
}
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
**转换后:**
|
|
70
|
-
```css
|
|
71
|
-
.card {
|
|
72
|
-
border-radius: var(--radius-lg);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.button {
|
|
76
|
-
border-radius: var(--radius-md);
|
|
77
|
-
}
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
### box-shadow 转换
|
|
81
|
-
|
|
82
|
-
**转换前:**
|
|
83
|
-
```css
|
|
84
|
-
.card {
|
|
85
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.modal {
|
|
89
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
90
|
-
}
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
**转换后:**
|
|
94
|
-
```css
|
|
95
|
-
.card {
|
|
96
|
-
box-shadow: var(--shadow-md);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.modal {
|
|
100
|
-
box-shadow: var(--shadow-lg);
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
## 支持的文件类型
|
|
105
|
-
|
|
106
|
-
- `.vue` - Vue 单文件组件
|
|
107
|
-
- `.scss` - Sass 样式文件
|
|
108
|
-
- `.css` - 纯 CSS 文件
|
|
109
|
-
|
|
110
|
-
## 扫描范围
|
|
111
|
-
|
|
112
|
-
脚本会扫描 `src` 目录下的所有目标文件,自动跳过:
|
|
113
|
-
- `node_modules` 目录
|
|
114
|
-
- `.git` 目录
|
|
115
|
-
- `dist` 目录
|
|
116
|
-
|
|
117
|
-
## 输出报告
|
|
118
|
-
|
|
119
|
-
执行完成后会显示详细的统计报告:
|
|
120
|
-
|
|
121
|
-
```
|
|
122
|
-
📊 转换统计报告
|
|
123
|
-
============================================================
|
|
124
|
-
总文件数: 150
|
|
125
|
-
修改文件数: 38
|
|
126
|
-
border-radius 替换次数: 67
|
|
127
|
-
box-shadow 替换次数: 42
|
|
128
|
-
|
|
129
|
-
📋 border-radius 替换详情:
|
|
130
|
-
8px => var(--radius-lg): 28 次
|
|
131
|
-
6px => var(--radius-md): 19 次
|
|
132
|
-
4px => var(--radius-base): 12 次
|
|
133
|
-
...
|
|
134
|
-
|
|
135
|
-
📋 box-shadow 替换详情:
|
|
136
|
-
0 2px 8px rgba(0, 0, 0, 0.08) => var(--shadow-md): 23 次
|
|
137
|
-
0 4px 12px rgba(0, 0, 0, 0.08) => var(--shadow-lg): 15 次
|
|
138
|
-
...
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
## 注意事项
|
|
142
|
-
|
|
143
|
-
1. **备份建议**:运行脚本前建议先使用 `--dry-run` 参数预览更改
|
|
144
|
-
2. **Git 提交**:建议在运行前提交当前代码,方便回滚
|
|
145
|
-
3. **检查结果**:转换完成后请检查 Git diff,确认转换符合预期
|
|
146
|
-
4. **测试验证**:转换后请运行项目测试,确保样式显示正常
|
|
147
|
-
|
|
148
|
-
## 优势
|
|
149
|
-
|
|
150
|
-
使用 CSS 变量的好处:
|
|
151
|
-
|
|
152
|
-
1. **统一管理**:所有样式值在 `variables.scss` 中统一定义
|
|
153
|
-
2. **易于维护**:修改变量值即可全局更新
|
|
154
|
-
3. **主题支持**:方便实现深色主题等样式变体
|
|
155
|
-
4. **语义化**:变量名更具可读性
|
|
156
|
-
5. **一致性**:确保整个项目使用统一的设计规范
|
|
157
|
-
|
|
158
|
-
## 回滚方法
|
|
159
|
-
|
|
160
|
-
如果需要回滚更改:
|
|
161
|
-
|
|
162
|
-
```bash
|
|
163
|
-
# 如果还未提交
|
|
164
|
-
git checkout -- src/
|
|
165
|
-
|
|
166
|
-
# 如果已提交
|
|
167
|
-
git revert <commit-hash>
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
## 组合使用
|
|
171
|
-
|
|
172
|
-
该脚本可以与间距转换脚本配合使用,实现完整的样式标准化:
|
|
173
|
-
|
|
174
|
-
```bash
|
|
175
|
-
# 1. 转换间距值
|
|
176
|
-
node scripts/convert-spacing-to-vars.js
|
|
177
|
-
|
|
178
|
-
# 2. 转换圆角和阴影
|
|
179
|
-
node scripts/convert-to-standard-vars.js
|
|
180
|
-
```
|
|
1
|
+
# CSS 样式变量标准化工具
|
|
2
|
+
|
|
3
|
+
## 功能说明
|
|
4
|
+
|
|
5
|
+
该脚本将项目中的 `border-radius` 和 `box-shadow` 值转换为标准的 CSS 变量引用。
|
|
6
|
+
|
|
7
|
+
## 转换规则
|
|
8
|
+
|
|
9
|
+
### border-radius 映射
|
|
10
|
+
|
|
11
|
+
| 原始值 | 转换后 | CSS变量定义 |
|
|
12
|
+
|--------|--------|-------------|
|
|
13
|
+
| 2px | var(--radius-xs) | 2px |
|
|
14
|
+
| 3px | var(--radius-sm) | 3px |
|
|
15
|
+
| 4px | var(--radius-base) | 4px |
|
|
16
|
+
| 6px | var(--radius-md) | 6px |
|
|
17
|
+
| 8px | var(--radius-lg) | 8px |
|
|
18
|
+
| 12px | var(--radius-xl) | 12px |
|
|
19
|
+
|
|
20
|
+
### box-shadow 映射
|
|
21
|
+
|
|
22
|
+
| 原始值 | 转换后 | 用途 |
|
|
23
|
+
|--------|--------|------|
|
|
24
|
+
| 0 1px 3px rgba(0, 0, 0, 0.04) | var(--shadow-sm) | 小阴影 |
|
|
25
|
+
| 0 1px 4px rgba(0, 0, 0, 0.04) | var(--shadow-base) | 基础阴影 |
|
|
26
|
+
| 0 2px 8px rgba(0, 0, 0, 0.08) | var(--shadow-md) | 中等阴影 |
|
|
27
|
+
| 0 4px 12px rgba(0, 0, 0, 0.08) | var(--shadow-lg) | 大阴影 |
|
|
28
|
+
| 0 8px 24px rgba(0, 0, 0, 0.12) | var(--shadow-xl) | 超大阴影 |
|
|
29
|
+
|
|
30
|
+
#### 模糊匹配规则
|
|
31
|
+
|
|
32
|
+
对于未精确匹配的 box-shadow 值,脚本会根据偏移量和模糊度智能选择:
|
|
33
|
+
|
|
34
|
+
- **小阴影** (--shadow-sm): offset ≤ 2px, blur ≤ 4px
|
|
35
|
+
- **中等阴影** (--shadow-md): offset 2-4px, blur 6-12px
|
|
36
|
+
- **大阴影** (--shadow-lg): offset 4-8px, blur 12-24px
|
|
37
|
+
|
|
38
|
+
## 使用方法
|
|
39
|
+
|
|
40
|
+
### 预览模式(推荐先运行)
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
# 预览将要进行的更改,不修改文件
|
|
44
|
+
node scripts/convert-to-standard-vars.js --dry-run
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### 实际应用
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# 应用更改到文件
|
|
51
|
+
node scripts/convert-to-standard-vars.js
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 转换示例
|
|
55
|
+
|
|
56
|
+
### border-radius 转换
|
|
57
|
+
|
|
58
|
+
**转换前:**
|
|
59
|
+
```css
|
|
60
|
+
.card {
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.button {
|
|
65
|
+
border-radius: 6px;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**转换后:**
|
|
70
|
+
```css
|
|
71
|
+
.card {
|
|
72
|
+
border-radius: var(--radius-lg);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.button {
|
|
76
|
+
border-radius: var(--radius-md);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### box-shadow 转换
|
|
81
|
+
|
|
82
|
+
**转换前:**
|
|
83
|
+
```css
|
|
84
|
+
.card {
|
|
85
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.modal {
|
|
89
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
**转换后:**
|
|
94
|
+
```css
|
|
95
|
+
.card {
|
|
96
|
+
box-shadow: var(--shadow-md);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.modal {
|
|
100
|
+
box-shadow: var(--shadow-lg);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## 支持的文件类型
|
|
105
|
+
|
|
106
|
+
- `.vue` - Vue 单文件组件
|
|
107
|
+
- `.scss` - Sass 样式文件
|
|
108
|
+
- `.css` - 纯 CSS 文件
|
|
109
|
+
|
|
110
|
+
## 扫描范围
|
|
111
|
+
|
|
112
|
+
脚本会扫描 `src` 目录下的所有目标文件,自动跳过:
|
|
113
|
+
- `node_modules` 目录
|
|
114
|
+
- `.git` 目录
|
|
115
|
+
- `dist` 目录
|
|
116
|
+
|
|
117
|
+
## 输出报告
|
|
118
|
+
|
|
119
|
+
执行完成后会显示详细的统计报告:
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
📊 转换统计报告
|
|
123
|
+
============================================================
|
|
124
|
+
总文件数: 150
|
|
125
|
+
修改文件数: 38
|
|
126
|
+
border-radius 替换次数: 67
|
|
127
|
+
box-shadow 替换次数: 42
|
|
128
|
+
|
|
129
|
+
📋 border-radius 替换详情:
|
|
130
|
+
8px => var(--radius-lg): 28 次
|
|
131
|
+
6px => var(--radius-md): 19 次
|
|
132
|
+
4px => var(--radius-base): 12 次
|
|
133
|
+
...
|
|
134
|
+
|
|
135
|
+
📋 box-shadow 替换详情:
|
|
136
|
+
0 2px 8px rgba(0, 0, 0, 0.08) => var(--shadow-md): 23 次
|
|
137
|
+
0 4px 12px rgba(0, 0, 0, 0.08) => var(--shadow-lg): 15 次
|
|
138
|
+
...
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## 注意事项
|
|
142
|
+
|
|
143
|
+
1. **备份建议**:运行脚本前建议先使用 `--dry-run` 参数预览更改
|
|
144
|
+
2. **Git 提交**:建议在运行前提交当前代码,方便回滚
|
|
145
|
+
3. **检查结果**:转换完成后请检查 Git diff,确认转换符合预期
|
|
146
|
+
4. **测试验证**:转换后请运行项目测试,确保样式显示正常
|
|
147
|
+
|
|
148
|
+
## 优势
|
|
149
|
+
|
|
150
|
+
使用 CSS 变量的好处:
|
|
151
|
+
|
|
152
|
+
1. **统一管理**:所有样式值在 `variables.scss` 中统一定义
|
|
153
|
+
2. **易于维护**:修改变量值即可全局更新
|
|
154
|
+
3. **主题支持**:方便实现深色主题等样式变体
|
|
155
|
+
4. **语义化**:变量名更具可读性
|
|
156
|
+
5. **一致性**:确保整个项目使用统一的设计规范
|
|
157
|
+
|
|
158
|
+
## 回滚方法
|
|
159
|
+
|
|
160
|
+
如果需要回滚更改:
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
# 如果还未提交
|
|
164
|
+
git checkout -- src/
|
|
165
|
+
|
|
166
|
+
# 如果已提交
|
|
167
|
+
git revert <commit-hash>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
## 组合使用
|
|
171
|
+
|
|
172
|
+
该脚本可以与间距转换脚本配合使用,实现完整的样式标准化:
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
# 1. 转换间距值
|
|
176
|
+
node scripts/convert-spacing-to-vars.js
|
|
177
|
+
|
|
178
|
+
# 2. 转换圆角和阴影
|
|
179
|
+
node scripts/convert-to-standard-vars.js
|
|
180
|
+
```
|
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.md-preview[data-v-e8ca9eee]{color:inherit;word-break:break-word;padding:20px 24px;font-size:14px;line-height:1.6}.md-preview[data-v-e8ca9eee] h1,.md-preview[data-v-e8ca9eee] h2,.md-preview[data-v-e8ca9eee] h3,.md-preview[data-v-e8ca9eee] h4,.md-preview[data-v-e8ca9eee] h5,.md-preview[data-v-e8ca9eee] h6{border-bottom:1px solid var(--border-color,#d0d7de);margin-top:24px;margin-bottom:16px;padding-bottom:.3em;font-weight:600}.md-preview[data-v-e8ca9eee] h1{font-size:1.8em}.md-preview[data-v-e8ca9eee] h2{font-size:1.4em}.md-preview[data-v-e8ca9eee] h3{font-size:1.2em}.md-preview[data-v-e8ca9eee] p{margin:0 0 14px}.md-preview[data-v-e8ca9eee] a{color:var(--link-color,#0969da);text-decoration:none}.md-preview[data-v-e8ca9eee] a:hover{text-decoration:underline}.md-preview[data-v-e8ca9eee] code{background:var(--code-bg,#f6f8fa);border-radius:4px;padding:2px 5px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:87%}.md-preview[data-v-e8ca9eee] pre{background:var(--code-bg,#f6f8fa);border-radius:6px;margin:0 0 16px;padding:14px 16px;overflow:auto}.md-preview[data-v-e8ca9eee] pre code{background:0 0;padding:0;font-size:100%}.md-preview[data-v-e8ca9eee] blockquote{border-left:3px solid var(--border-color,#d0d7de);color:var(--text-secondary,#656d76);margin:0 0 16px;padding:0 16px}.md-preview[data-v-e8ca9eee] img{border-radius:4px;max-width:100%}.md-preview[data-v-e8ca9eee] hr{border:none;border-top:1px solid var(--border-color,#d0d7de);margin:24px 0}.md-preview[data-v-e8ca9eee] table{border-collapse:collapse;width:100%;margin-bottom:16px}.md-preview[data-v-e8ca9eee] th,.md-preview[data-v-e8ca9eee] td{border:1px solid var(--border-color,#d0d7de);padding:6px 13px}.md-preview[data-v-e8ca9eee] thead tr{background:var(--code-bg,#f6f8fa)}.md-preview[data-v-e8ca9eee] ul,.md-preview[data-v-e8ca9eee] ol{margin-bottom:16px;padding-left:2em}.md-preview[data-v-e8ca9eee] li{margin:4px 0}.md-segment[data-v-e8ca9eee]{display:block}.md-mindmap[data-v-e8ca9eee]{border:1px solid var(--border-color,#d0d7de);background:var(--bg-panel,#fff);border-radius:8px;margin:18px 0 28px;overflow:hidden}.md-mindmap-title[data-v-e8ca9eee]{color:var(--text-secondary,#656d76);background:var(--code-bg,#f6f8fa);border-bottom:1px solid var(--border-color,#d0d7de);letter-spacing:.5px;padding:8px 12px;font-size:12px;font-weight:600}.md-mindmap-canvas[data-v-e8ca9eee]{width:100%;height:480px;display:block}.mindmap-preview[data-v-acae9330]{background:var(--bg-container,#fff);flex-direction:column;width:100%;height:100%;display:flex}.mindmap-preview-header[data-v-acae9330]{border-bottom:1px solid var(--border-color,#d0d7de);background:var(--bg-panel,#f6f8fa);align-items:center;gap:12px;padding:8px 14px;font-size:12px;display:flex}.mindmap-preview-title[data-v-acae9330]{color:var(--text-primary,#1f2328);letter-spacing:.5px;font-weight:600}.mindmap-preview-hint[data-v-acae9330]{color:var(--text-secondary,#656d76);font-size:11px}.mindmap-preview-canvas[data-v-acae9330]{flex:1;width:100%;min-height:0}.mindmap-preview-canvas[data-v-acae9330] .zm-mindmap,.mindmap-preview-canvas[data-v-acae9330]>*{width:100%;height:100%}.editor-view[data-v-165ffaa9]{background:var(--bg-container);border:1px solid var(--border-color);width:100%;height:100%;box-shadow:var(--shadow-sm);border-radius:0;display:flex;overflow:hidden}.editor-sidebar[data-v-165ffaa9]{border-right:1px solid var(--border-color);background:var(--bg-panel);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar-header[data-v-165ffaa9]{border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 10px 6px;display:flex}.sidebar-title[data-v-165ffaa9]{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-size:11px;font-weight:700}.sidebar-action-btn[data-v-165ffaa9]{cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-base);background:0 0;border:none;align-items:center;padding:3px;display:flex}.sidebar-action-btn[data-v-165ffaa9]:hover{color:var(--text-primary);background:var(--bg-hover)}.sidebar-tree[data-v-165ffaa9]{flex:1;padding:4px 0;overflow:hidden auto}.tree-node[data-v-165ffaa9]{cursor:pointer;-webkit-user-select:none;user-select:none;height:24px;color:var(--text-primary);white-space:nowrap;border-radius:4px;align-items:center;gap:4px;padding-right:8px;font-size:13px;transition:background .1s;display:flex;overflow:hidden}.tree-node[data-v-165ffaa9]:hover{background:var(--bg-hover)}.tree-node--active[data-v-165ffaa9]{color:var(--color-primary);background:#3b82f61f}.tree-node--selected[data-v-165ffaa9]{outline-offset:-1px;background:#63b3ed26;outline:1px solid #63b3ed59}.tree-arrow[data-v-165ffaa9]{color:var(--text-tertiary);flex-shrink:0;align-items:center;width:12px;transition:transform .15s;display:flex}.tree-arrow.expanded[data-v-165ffaa9]{transform:rotate(90deg)}.tree-arrow-spacer[data-v-165ffaa9]{flex-shrink:0;width:12px}.tree-icon[data-v-165ffaa9]{flex-shrink:0;align-items:center;font-size:14px;line-height:1;display:flex}.tree-icon.mit-icon[data-v-165ffaa9]{fill:currentColor;vertical-align:middle;width:14px;height:14px;display:inline-block}.tree-icon--dir[data-v-165ffaa9]{color:#e8b84b}.tree-name[data-v-165ffaa9]{text-overflow:ellipsis;flex:1;min-width:0;font-size:13px;overflow:hidden}.tree-loading[data-v-165ffaa9]{border:1.5px solid var(--color-primary);border-top-color:#0000;border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:.8s linear infinite spin-165ffaa9;display:inline-block}.tree-empty[data-v-165ffaa9]{color:var(--text-tertiary);text-align:center;padding:24px 12px;font-size:12px}.sidebar-loading[data-v-165ffaa9]{flex:1;justify-content:center;align-items:center;display:flex}.spin-icon[data-v-165ffaa9]{border:2px solid var(--color-primary);border-top-color:#0000;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin-165ffaa9;display:inline-block}@keyframes spin-165ffaa9{to{transform:rotate(360deg)}}.editor-resizer[data-v-165ffaa9]{cursor:col-resize;z-index:2;background:0 0;flex-shrink:0;width:6px;transition:background .15s;position:relative}.editor-resizer[data-v-165ffaa9]:after{content:"";background:var(--color-gray-300);border-radius:2px;width:2px;height:32px;transition:background .15s,height .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.editor-resizer[data-v-165ffaa9]:hover{background:#3b82f60f}.editor-resizer[data-v-165ffaa9]:hover:after{background:var(--color-primary);height:48px;box-shadow:0 0 8px #3b82f666}.editor-main[data-v-165ffaa9]{flex-direction:column;flex:1;display:flex;overflow:hidden}.editor-tabs[data-v-165ffaa9]{border-bottom:1px solid var(--border-color);background:var(--bg-panel);scrollbar-width:none;flex-shrink:0;display:flex;overflow:auto hidden}.editor-tabs[data-v-165ffaa9]::-webkit-scrollbar{display:none}.editor-tab[data-v-165ffaa9]{border-right:1px solid var(--border-color);cursor:pointer;height:34px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:6px;min-width:80px;max-width:200px;padding:0 12px;font-size:12.5px;transition:background .1s,color .1s;display:flex}.editor-tab[data-v-165ffaa9]:hover{background:var(--bg-hover);color:var(--text-primary)}.editor-tab.active[data-v-165ffaa9]{background:var(--bg-container);color:var(--text-primary);border-bottom:2px solid var(--color-primary)}.tab-name[data-v-165ffaa9]{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.tab-dirty-dot[data-v-165ffaa9]{background:var(--color-warning);border-radius:50%;flex-shrink:0;width:6px;height:6px}.tab-close[data-v-165ffaa9]{cursor:pointer;color:var(--text-tertiary);opacity:0;background:0 0;border:none;border-radius:3px;flex-shrink:0;align-items:center;padding:2px;transition:opacity .1s,background .1s;display:flex}.editor-tab:hover .tab-close[data-v-165ffaa9],.editor-tab.active .tab-close[data-v-165ffaa9]{opacity:1}.tab-close[data-v-165ffaa9]:hover{background:var(--bg-hover);color:var(--color-danger)}.editor-empty[data-v-165ffaa9]{color:var(--text-tertiary);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;font-size:13px;display:flex}.editor-empty p[data-v-165ffaa9]{margin:0}.editor-empty-hint[data-v-165ffaa9]{opacity:.6;font-size:11px}.monaco-container[data-v-165ffaa9]{flex:1;min-width:0;overflow:hidden}.monaco-container.hidden[data-v-165ffaa9]{display:none}.image-tab-placeholder[data-v-165ffaa9]{justify-content:center;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary);background:var(--bg-container);text-align:center;padding:var(--spacing-lg);flex-direction:column;flex:1;display:flex}.image-tab-placeholder-title[data-v-165ffaa9]{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-primary);word-break:break-all;margin:0}.image-tab-placeholder-hint[data-v-165ffaa9]{font-size:var(--font-size-sm);color:var(--text-tertiary);margin:0}.editor-body[data-v-165ffaa9]{flex:1;min-height:0;display:flex;overflow:hidden}.preview-resizer[data-v-165ffaa9]{cursor:col-resize;z-index:2;background:0 0;flex-shrink:0;order:99;width:6px;margin-left:auto;transition:background .15s;position:relative}.preview-resizer[data-v-165ffaa9]:after{content:"";background:var(--color-gray-300);border-radius:2px;width:2px;height:32px;transition:background .15s,height .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-resizer[data-v-165ffaa9]:hover{background:#3b82f60f}.preview-resizer[data-v-165ffaa9]:hover:after{background:var(--color-primary);height:48px;box-shadow:0 0 8px #3b82f666}.preview-panel[data-v-165ffaa9]{border-left:1px solid var(--border-color);background:var(--bg-panel);flex-direction:column;flex:1 1 0;min-width:200px;display:flex;overflow:hidden}.preview-header[data-v-165ffaa9]{border-bottom:1px solid var(--border-color);background:var(--bg-panel);flex-shrink:0;align-items:center;gap:6px;height:34px;padding:0 10px;display:flex}.preview-title[data-v-165ffaa9]{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-size:11px;font-weight:700}.preview-ext-badge[data-v-165ffaa9]{color:var(--color-primary);letter-spacing:.04em;background:#3b82f626;border-radius:3px;padding:1px 5px;font-size:10px;font-weight:600}.preview-header-spacer[data-v-165ffaa9]{flex:1}.preview-close-btn[data-v-165ffaa9]{cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-base);background:0 0;border:none;align-items:center;padding:3px;transition:color .1s,background .1s;display:flex}.preview-close-btn[data-v-165ffaa9]:hover{color:var(--color-danger);background:var(--bg-hover)}.preview-body[data-v-165ffaa9]{flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-iframe[data-v-165ffaa9]{background:0 0;border:none;flex:1;width:100%;height:100%}.preview-markdown[data-v-165ffaa9]{background:var(--bg-container,#fff);width:100%;height:100%;color:var(--text-primary,#1f2328);flex:1;overflow:auto}.preview-mindmap[data-v-165ffaa9]{background:var(--bg-container,#fff);flex-direction:column;flex:1;width:100%;height:100%;display:flex;overflow:hidden}.mindmap-toggle-btn.disabled[data-v-165ffaa9]{opacity:.45;cursor:not-allowed}.mindmap-toggle-btn.active[data-v-165ffaa9]{color:#fff;background:linear-gradient(#6366f1 0%,#4f46e5 100%);border-color:#4f46e5}.preview-image-wrap[data-v-165ffaa9]{background:var(--bg-container);flex:1;justify-content:center;align-items:center;padding:16px;display:flex;overflow:auto}.preview-image-wrap img[data-v-165ffaa9]{object-fit:contain;border-radius:4px;max-width:100%;max-height:100%;box-shadow:0 2px 12px #0003}.editor-tabs-spacer[data-v-165ffaa9]{flex:1}.preview-toggle-btn[data-v-165ffaa9]{cursor:pointer;height:34px;color:var(--text-secondary);white-space:nowrap;border:none;border-left:1px solid var(--border-color);background:0 0;flex-shrink:0;align-items:center;gap:5px;padding:0 10px;font-size:12px;transition:background .1s,color .1s;display:flex}.preview-toggle-btn[data-v-165ffaa9]:hover{background:var(--bg-hover);color:var(--text-primary)}.preview-toggle-btn.active[data-v-165ffaa9]{color:var(--color-primary);background:#3b82f614}.sidebar-actions[data-v-165ffaa9]{align-items:center;gap:2px;display:flex}.tree-inline-input-row[data-v-165ffaa9]{cursor:default;background:var(--bg-hover)}.tree-inline-input[data-v-165ffaa9]{background:var(--bg-container);border:1px solid var(--color-primary);min-width:0;height:20px;color:var(--text-primary);border-radius:3px;outline:none;flex:1;padding:0 5px;font-family:inherit;font-size:12.5px}.ctx-menu[data-v-165ffaa9]{z-index:9999;background:var(--bg-panel);border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;border-radius:6px;min-width:160px;padding:4px;position:fixed;box-shadow:0 8px 24px #00000040}.ctx-menu-item[data-v-165ffaa9]{cursor:pointer;width:100%;color:var(--text-primary);text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;padding:6px 10px;font-size:12.5px;transition:background .1s;display:flex}.ctx-menu-item[data-v-165ffaa9]:hover{background:var(--bg-hover)}.ctx-menu-item--danger[data-v-165ffaa9]{color:var(--color-danger)}.ctx-menu-item--danger[data-v-165ffaa9]:hover{background:#ef44441a}.ctx-menu-sep[data-v-165ffaa9]{background:var(--border-color);height:1px;margin:4px 2px}
|
|
1
|
+
.md-preview[data-v-d602e5a5]{color:inherit;word-break:break-word;padding:20px 24px;font-size:14px;line-height:1.6}.md-preview[data-v-d602e5a5] h1,.md-preview[data-v-d602e5a5] h2,.md-preview[data-v-d602e5a5] h3,.md-preview[data-v-d602e5a5] h4,.md-preview[data-v-d602e5a5] h5,.md-preview[data-v-d602e5a5] h6{border-bottom:1px solid var(--border-color,#d0d7de);margin-top:24px;margin-bottom:16px;padding-bottom:.3em;font-weight:600}.md-preview[data-v-d602e5a5] h1{font-size:1.8em}.md-preview[data-v-d602e5a5] h2{font-size:1.4em}.md-preview[data-v-d602e5a5] h3{font-size:1.2em}.md-preview[data-v-d602e5a5] p{margin:0 0 14px}.md-preview[data-v-d602e5a5] a{color:var(--link-color,#0969da);text-decoration:none}.md-preview[data-v-d602e5a5] a:hover{text-decoration:underline}.md-preview[data-v-d602e5a5] code{background:var(--code-bg,#f6f8fa);border-radius:4px;padding:2px 5px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:87%}.md-preview[data-v-d602e5a5] pre{background:var(--code-bg,#f6f8fa);border-radius:6px;margin:0 0 16px;padding:14px 16px;overflow:auto}.md-preview[data-v-d602e5a5] pre code{background:0 0;padding:0;font-size:100%}.md-preview[data-v-d602e5a5] blockquote{border-left:3px solid var(--border-color,#d0d7de);color:var(--text-secondary,#656d76);margin:0 0 16px;padding:0 16px}.md-preview[data-v-d602e5a5] img{border-radius:4px;max-width:100%}.md-preview[data-v-d602e5a5] hr{border:none;border-top:1px solid var(--border-color,#d0d7de);margin:24px 0}.md-preview[data-v-d602e5a5] table{border-collapse:collapse;width:100%;margin-bottom:16px}.md-preview[data-v-d602e5a5] th,.md-preview[data-v-d602e5a5] td{border:1px solid var(--border-color,#d0d7de);padding:6px 13px}.md-preview[data-v-d602e5a5] thead tr{background:var(--code-bg,#f6f8fa)}.md-preview[data-v-d602e5a5] ul,.md-preview[data-v-d602e5a5] ol{margin-bottom:16px;padding-left:2em}.md-preview[data-v-d602e5a5] li{margin:4px 0}.md-segment[data-v-d602e5a5]{display:block}.md-mindmap[data-v-d602e5a5]{border:1px solid var(--border-color,#d0d7de);background:var(--bg-panel,#fff);border-radius:8px;margin:18px 0 28px;overflow:hidden}.md-mindmap-title[data-v-d602e5a5]{color:var(--text-secondary,#656d76);background:var(--code-bg,#f6f8fa);border-bottom:1px solid var(--border-color,#d0d7de);letter-spacing:.5px;padding:8px 12px;font-size:12px;font-weight:600}.md-mindmap-canvas[data-v-d602e5a5]{width:100%;height:480px;display:block}.mindmap-preview[data-v-5988cf1a]{background:var(--bg-container,#fff);flex-direction:column;width:100%;height:100%;display:flex}.mindmap-preview-header[data-v-5988cf1a]{border-bottom:1px solid var(--border-color,#d0d7de);background:var(--bg-panel,#f6f8fa);align-items:center;gap:12px;padding:8px 14px;font-size:12px;display:flex}.mindmap-preview-title[data-v-5988cf1a]{color:var(--text-primary,#1f2328);letter-spacing:.5px;font-weight:600}.mindmap-preview-hint[data-v-5988cf1a]{color:var(--text-secondary,#656d76);font-size:11px}.mindmap-preview-canvas[data-v-5988cf1a]{flex:1;width:100%;min-height:0}.mindmap-preview-canvas[data-v-5988cf1a] .zm-mindmap,.mindmap-preview-canvas[data-v-5988cf1a]>*{width:100%;height:100%}.editor-view[data-v-165ffaa9]{background:var(--bg-container);border:1px solid var(--border-color);width:100%;height:100%;box-shadow:var(--shadow-sm);border-radius:0;display:flex;overflow:hidden}.editor-sidebar[data-v-165ffaa9]{border-right:1px solid var(--border-color);background:var(--bg-panel);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar-header[data-v-165ffaa9]{border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 10px 6px;display:flex}.sidebar-title[data-v-165ffaa9]{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-size:11px;font-weight:700}.sidebar-action-btn[data-v-165ffaa9]{cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-base);background:0 0;border:none;align-items:center;padding:3px;display:flex}.sidebar-action-btn[data-v-165ffaa9]:hover{color:var(--text-primary);background:var(--bg-hover)}.sidebar-tree[data-v-165ffaa9]{flex:1;padding:4px 0;overflow:hidden auto}.tree-node[data-v-165ffaa9]{cursor:pointer;-webkit-user-select:none;user-select:none;height:24px;color:var(--text-primary);white-space:nowrap;border-radius:4px;align-items:center;gap:4px;padding-right:8px;font-size:13px;transition:background .1s;display:flex;overflow:hidden}.tree-node[data-v-165ffaa9]:hover{background:var(--bg-hover)}.tree-node--active[data-v-165ffaa9]{color:var(--color-primary);background:#3b82f61f}.tree-node--selected[data-v-165ffaa9]{outline-offset:-1px;background:#63b3ed26;outline:1px solid #63b3ed59}.tree-arrow[data-v-165ffaa9]{color:var(--text-tertiary);flex-shrink:0;align-items:center;width:12px;transition:transform .15s;display:flex}.tree-arrow.expanded[data-v-165ffaa9]{transform:rotate(90deg)}.tree-arrow-spacer[data-v-165ffaa9]{flex-shrink:0;width:12px}.tree-icon[data-v-165ffaa9]{flex-shrink:0;align-items:center;font-size:14px;line-height:1;display:flex}.tree-icon.mit-icon[data-v-165ffaa9]{fill:currentColor;vertical-align:middle;width:14px;height:14px;display:inline-block}.tree-icon--dir[data-v-165ffaa9]{color:#e8b84b}.tree-name[data-v-165ffaa9]{text-overflow:ellipsis;flex:1;min-width:0;font-size:13px;overflow:hidden}.tree-loading[data-v-165ffaa9]{border:1.5px solid var(--color-primary);border-top-color:#0000;border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:.8s linear infinite spin-165ffaa9;display:inline-block}.tree-empty[data-v-165ffaa9]{color:var(--text-tertiary);text-align:center;padding:24px 12px;font-size:12px}.sidebar-loading[data-v-165ffaa9]{flex:1;justify-content:center;align-items:center;display:flex}.spin-icon[data-v-165ffaa9]{border:2px solid var(--color-primary);border-top-color:#0000;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin-165ffaa9;display:inline-block}@keyframes spin-165ffaa9{to{transform:rotate(360deg)}}.editor-resizer[data-v-165ffaa9]{cursor:col-resize;z-index:2;background:0 0;flex-shrink:0;width:6px;transition:background .15s;position:relative}.editor-resizer[data-v-165ffaa9]:after{content:"";background:var(--color-gray-300);border-radius:2px;width:2px;height:32px;transition:background .15s,height .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.editor-resizer[data-v-165ffaa9]:hover{background:#3b82f60f}.editor-resizer[data-v-165ffaa9]:hover:after{background:var(--color-primary);height:48px;box-shadow:0 0 8px #3b82f666}.editor-main[data-v-165ffaa9]{flex-direction:column;flex:1;display:flex;overflow:hidden}.editor-tabs[data-v-165ffaa9]{border-bottom:1px solid var(--border-color);background:var(--bg-panel);scrollbar-width:none;flex-shrink:0;display:flex;overflow:auto hidden}.editor-tabs[data-v-165ffaa9]::-webkit-scrollbar{display:none}.editor-tab[data-v-165ffaa9]{border-right:1px solid var(--border-color);cursor:pointer;height:34px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:6px;min-width:80px;max-width:200px;padding:0 12px;font-size:12.5px;transition:background .1s,color .1s;display:flex}.editor-tab[data-v-165ffaa9]:hover{background:var(--bg-hover);color:var(--text-primary)}.editor-tab.active[data-v-165ffaa9]{background:var(--bg-container);color:var(--text-primary);border-bottom:2px solid var(--color-primary)}.tab-name[data-v-165ffaa9]{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.tab-dirty-dot[data-v-165ffaa9]{background:var(--color-warning);border-radius:50%;flex-shrink:0;width:6px;height:6px}.tab-close[data-v-165ffaa9]{cursor:pointer;color:var(--text-tertiary);opacity:0;background:0 0;border:none;border-radius:3px;flex-shrink:0;align-items:center;padding:2px;transition:opacity .1s,background .1s;display:flex}.editor-tab:hover .tab-close[data-v-165ffaa9],.editor-tab.active .tab-close[data-v-165ffaa9]{opacity:1}.tab-close[data-v-165ffaa9]:hover{background:var(--bg-hover);color:var(--color-danger)}.editor-empty[data-v-165ffaa9]{color:var(--text-tertiary);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;font-size:13px;display:flex}.editor-empty p[data-v-165ffaa9]{margin:0}.editor-empty-hint[data-v-165ffaa9]{opacity:.6;font-size:11px}.monaco-container[data-v-165ffaa9]{flex:1;min-width:0;overflow:hidden}.monaco-container.hidden[data-v-165ffaa9]{display:none}.image-tab-placeholder[data-v-165ffaa9]{justify-content:center;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary);background:var(--bg-container);text-align:center;padding:var(--spacing-lg);flex-direction:column;flex:1;display:flex}.image-tab-placeholder-title[data-v-165ffaa9]{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-primary);word-break:break-all;margin:0}.image-tab-placeholder-hint[data-v-165ffaa9]{font-size:var(--font-size-sm);color:var(--text-tertiary);margin:0}.editor-body[data-v-165ffaa9]{flex:1;min-height:0;display:flex;overflow:hidden}.preview-resizer[data-v-165ffaa9]{cursor:col-resize;z-index:2;background:0 0;flex-shrink:0;order:99;width:6px;margin-left:auto;transition:background .15s;position:relative}.preview-resizer[data-v-165ffaa9]:after{content:"";background:var(--color-gray-300);border-radius:2px;width:2px;height:32px;transition:background .15s,height .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-resizer[data-v-165ffaa9]:hover{background:#3b82f60f}.preview-resizer[data-v-165ffaa9]:hover:after{background:var(--color-primary);height:48px;box-shadow:0 0 8px #3b82f666}.preview-panel[data-v-165ffaa9]{border-left:1px solid var(--border-color);background:var(--bg-panel);flex-direction:column;flex:1 1 0;min-width:200px;display:flex;overflow:hidden}.preview-header[data-v-165ffaa9]{border-bottom:1px solid var(--border-color);background:var(--bg-panel);flex-shrink:0;align-items:center;gap:6px;height:34px;padding:0 10px;display:flex}.preview-title[data-v-165ffaa9]{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-size:11px;font-weight:700}.preview-ext-badge[data-v-165ffaa9]{color:var(--color-primary);letter-spacing:.04em;background:#3b82f626;border-radius:3px;padding:1px 5px;font-size:10px;font-weight:600}.preview-header-spacer[data-v-165ffaa9]{flex:1}.preview-close-btn[data-v-165ffaa9]{cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-base);background:0 0;border:none;align-items:center;padding:3px;transition:color .1s,background .1s;display:flex}.preview-close-btn[data-v-165ffaa9]:hover{color:var(--color-danger);background:var(--bg-hover)}.preview-body[data-v-165ffaa9]{flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-iframe[data-v-165ffaa9]{background:0 0;border:none;flex:1;width:100%;height:100%}.preview-markdown[data-v-165ffaa9]{background:var(--bg-container,#fff);width:100%;height:100%;color:var(--text-primary,#1f2328);flex:1;overflow:auto}.preview-mindmap[data-v-165ffaa9]{background:var(--bg-container,#fff);flex-direction:column;flex:1;width:100%;height:100%;display:flex;overflow:hidden}.mindmap-toggle-btn.disabled[data-v-165ffaa9]{opacity:.45;cursor:not-allowed}.mindmap-toggle-btn.active[data-v-165ffaa9]{color:#fff;background:linear-gradient(#6366f1 0%,#4f46e5 100%);border-color:#4f46e5}.preview-image-wrap[data-v-165ffaa9]{background:var(--bg-container);flex:1;justify-content:center;align-items:center;padding:16px;display:flex;overflow:auto}.preview-image-wrap img[data-v-165ffaa9]{object-fit:contain;border-radius:4px;max-width:100%;max-height:100%;box-shadow:0 2px 12px #0003}.editor-tabs-spacer[data-v-165ffaa9]{flex:1}.preview-toggle-btn[data-v-165ffaa9]{cursor:pointer;height:34px;color:var(--text-secondary);white-space:nowrap;border:none;border-left:1px solid var(--border-color);background:0 0;flex-shrink:0;align-items:center;gap:5px;padding:0 10px;font-size:12px;transition:background .1s,color .1s;display:flex}.preview-toggle-btn[data-v-165ffaa9]:hover{background:var(--bg-hover);color:var(--text-primary)}.preview-toggle-btn.active[data-v-165ffaa9]{color:var(--color-primary);background:#3b82f614}.sidebar-actions[data-v-165ffaa9]{align-items:center;gap:2px;display:flex}.tree-inline-input-row[data-v-165ffaa9]{cursor:default;background:var(--bg-hover)}.tree-inline-input[data-v-165ffaa9]{background:var(--bg-container);border:1px solid var(--color-primary);min-width:0;height:20px;color:var(--text-primary);border-radius:3px;outline:none;flex:1;padding:0 5px;font-family:inherit;font-size:12.5px}.ctx-menu[data-v-165ffaa9]{z-index:9999;background:var(--bg-panel);border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;border-radius:6px;min-width:160px;padding:4px;position:fixed;box-shadow:0 8px 24px #00000040}.ctx-menu-item[data-v-165ffaa9]{cursor:pointer;width:100%;color:var(--text-primary);text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;padding:6px 10px;font-size:12.5px;transition:background .1s;display:flex}.ctx-menu-item[data-v-165ffaa9]:hover{background:var(--bg-hover)}.ctx-menu-item--danger[data-v-165ffaa9]{color:var(--color-danger)}.ctx-menu-item--danger[data-v-165ffaa9]:hover{background:#ef44441a}.ctx-menu-sep[data-v-165ffaa9]{background:var(--border-color);height:1px;margin:4px 2px}
|