pda-kit-mcp-server 2.0.1

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.
Files changed (81) hide show
  1. package/README.md +107 -0
  2. package/bin/pda-kit-mcp.js +35 -0
  3. package/dist/file-reader.d.ts +83 -0
  4. package/dist/file-reader.d.ts.map +1 -0
  5. package/dist/file-reader.js +170 -0
  6. package/dist/file-reader.js.map +1 -0
  7. package/dist/http-entry.d.ts +12 -0
  8. package/dist/http-entry.d.ts.map +1 -0
  9. package/dist/http-entry.js +149 -0
  10. package/dist/http-entry.js.map +1 -0
  11. package/dist/http-server.d.ts +5 -0
  12. package/dist/http-server.d.ts.map +1 -0
  13. package/dist/http-server.js +114 -0
  14. package/dist/http-server.js.map +1 -0
  15. package/dist/index.d.ts +8 -0
  16. package/dist/index.d.ts.map +1 -0
  17. package/dist/index.js +90 -0
  18. package/dist/index.js.map +1 -0
  19. package/dist/paths.d.ts +37 -0
  20. package/dist/paths.d.ts.map +1 -0
  21. package/dist/paths.js +52 -0
  22. package/dist/paths.js.map +1 -0
  23. package/dist/server.d.ts +12 -0
  24. package/dist/server.d.ts.map +1 -0
  25. package/dist/server.js +308 -0
  26. package/dist/server.js.map +1 -0
  27. package/dist/stdio-server.d.ts +8 -0
  28. package/dist/stdio-server.d.ts.map +1 -0
  29. package/dist/stdio-server.js +83 -0
  30. package/dist/stdio-server.js.map +1 -0
  31. package/dist/tools/generate-component.d.ts +54 -0
  32. package/dist/tools/generate-component.d.ts.map +1 -0
  33. package/dist/tools/generate-component.js +80 -0
  34. package/dist/tools/generate-component.js.map +1 -0
  35. package/dist/tools/get-component-spec.d.ts +70 -0
  36. package/dist/tools/get-component-spec.d.ts.map +1 -0
  37. package/dist/tools/get-component-spec.js +95 -0
  38. package/dist/tools/get-component-spec.js.map +1 -0
  39. package/dist/tools/get-global-rules.d.ts +42 -0
  40. package/dist/tools/get-global-rules.d.ts.map +1 -0
  41. package/dist/tools/get-global-rules.js +83 -0
  42. package/dist/tools/get-global-rules.js.map +1 -0
  43. package/dist/tools/list-components.d.ts +52 -0
  44. package/dist/tools/list-components.d.ts.map +1 -0
  45. package/dist/tools/list-components.js +104 -0
  46. package/dist/tools/list-components.js.map +1 -0
  47. package/dist/tools/search-components.d.ts +54 -0
  48. package/dist/tools/search-components.d.ts.map +1 -0
  49. package/dist/tools/search-components.js +124 -0
  50. package/dist/tools/search-components.js.map +1 -0
  51. package/dist/tools/validate-html.d.ts +43 -0
  52. package/dist/tools/validate-html.d.ts.map +1 -0
  53. package/dist/tools/validate-html.js +116 -0
  54. package/dist/tools/validate-html.js.map +1 -0
  55. package/package.json +59 -0
  56. package/spec-data/badge.md +461 -0
  57. package/spec-data/button.md +148 -0
  58. package/spec-data/camera.md +622 -0
  59. package/spec-data/dialog.md +419 -0
  60. package/spec-data/divider.md +208 -0
  61. package/spec-data/drawer.md +301 -0
  62. package/spec-data/empty-state.md +336 -0
  63. package/spec-data/home-page.md +352 -0
  64. package/spec-data/input-row.md +346 -0
  65. package/spec-data/layout-page.md +317 -0
  66. package/spec-data/list-item.md +128 -0
  67. package/spec-data/location-selector.md +630 -0
  68. package/spec-data/more-actions.md +427 -0
  69. package/spec-data/navbar.md +482 -0
  70. package/spec-data/photo-list.md +461 -0
  71. package/spec-data/picker-single.md +199 -0
  72. package/spec-data/picker.md +586 -0
  73. package/spec-data/scan-input.md +304 -0
  74. package/spec-data/section-heading.md +268 -0
  75. package/spec-data/selectable-list.md +331 -0
  76. package/spec-data/stepper.md +247 -0
  77. package/spec-data/tab-bar.md +254 -0
  78. package/spec-data/tab.md +349 -0
  79. package/spec-data/tag.md +363 -0
  80. package/spec-data/tooltip.md +202 -0
  81. package/spec-data/waybill-number.md +257 -0
package/spec-data/layout-page.md ADDED
@@ -0,0 +1,317 @@
1
+ ---
2
+ id: layout-page
3
+ name: LayoutPage 页面骨架
4
+ category: template
5
+ version: "2.0.0"
6
+ tokens:
7
+ pdaWidth: 480px
8
+ pdaMinHeight: 800px
9
+ contentFlex: flex-1
10
+ contentOverflow: overflow-y-auto
11
+ bottomBarHeight: 64px
12
+ navbarHeight: 56px
13
+ gap: gap-0
14
+ responsive:
15
+ mobile: "width: 100vw; height: 100vh; border-radius: 0"
16
+ desktop: "width: 412px; height: 844px; border-radius: 16px; box-shadow"
17
+ composes:
18
+ - navbar (顶部导航 → 绝对定位 left:64px)
19
+ - page-content (中部内容 → flex-1 overflow-y-auto)
20
+ - bottom-bar (底部操作 → flex-shrink: 0)
21
+ ---
22
+
23
+ > **🧠 AI 指令 — 强制约束（MANDATORY，违反即错误）**
24
+ >
25
+ > ```yaml
26
+ > NEGATIVE_PROMPTS:
27
+ > - ⛔ 禁止生成 Web 网页居中卡片（如 max-w-md mx-auto mt-20）
28
+ > - ⛔ 禁止 body 居中布局（如 flex justify-center items-center min-h-screen）
29
+ > - ⛔ 禁止使用固定定位底部栏（position: fixed; bottom: 0）
30
+ > - ⛔ 禁止内容区不设 flex-1 + overflow-y-auto（导致内容溢出或截断）
31
+ > - ⛔ 禁止使用 rounded-lg / rounded-xl 等大圆角作为容器圆角
32
+ > - ⛔ 禁止在 body 上添加 padding / margin
33
+ > - ⛔ 禁止使用 div.card / div.container 等 Web 页面包装器
34
+ > - ⛔ 禁止在 HTML 中手写 style="background: var(--color-*)"
35
+ > - ⛔ 禁止使用 transition 属性
36
+ >
37
+ > MANDATORY:
38
+ > - 最外层必须响应式：移动端 100vw/100vh，桌面端 412×844px 沙箱
39
+ > - 布局必须为 Flex 垂直流式：Navbar → PageContent(flex-1) → BottomBar
40
+ > - 圆角统一 rounded（4px），不可使用更大圆角
41
+ > - 所有容器禁止 transition
42
+ > ```
43
+
44
+ ---
45
+
46
+ # LayoutPage 页面骨架
47
+
48
+ > **PDA 页面的唯一真理骨架。** 任何 PDA 业务页面（扫描签收、取货入库、拍照列表等）都必须以此为根模板拼装。
49
+
50
+ ## 语义结构（Semantic Structure）
51
+
52
+ ```
53
+ ┌─────────────────────────────────┐
54
+ │ #app-shell（响应式容器） │
55
+ │ ┌─────────────────────────────┐│
56
+ │ │ Navbar (56px, flex-shrink) ││ ← 顶部固定
57
+ │ ├─────────────────────────────┤│
58
+ │ │ ││
59
+ │ │ PageContent (flex-1) ││ ← 中部滚动区
60
+ │ │ overflow-y-auto ││ ScanInput / ListItem 等
61
+ │ │ ││ 组件在此区域内纵向排列
62
+ │ ├─────────────────────────────┤│
63
+ │ │ BottomBar (flex-shrink) ││ ← 底部固定
64
+ │ └─────────────────────────────┘│
65
+ └─────────────────────────────────┘
66
+ ```
67
+
68
+ ## 响应式布局策略
69
+
70
+ | 环境 | 容器宽度 | 容器高度 | 圆角 | 阴影 |
71
+ |------|---------|---------|------|------|
72
+ | **PDA 真机** (< 768px) | 100vw | 100vh | 0 | 无 |
73
+ | **桌面预览** (≥ 768px) | 412px | 844px | 16px | 0 4px 24px rgba(0,0,0,0.12) |
74
+
75
+ > PDA 真机全屏无圆角无阴影；桌面端用 412×844px 沙箱模拟真机，方便产品/研发预览调试。
76
+
77
+ ## 完整 HTML 骨架
78
+
79
+ ```html
80
+ <!DOCTYPE html>
81
+ <html lang="zh-CN">
82
+ <head>
83
+ <meta charset="UTF-8">
84
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
85
+ <title><!-- 页面标题 --></title>
86
+
87
+ <!-- Tailwind CDN + PDA Kit 配置 -->
88
+ <script src="https://cdn.tailwindcss.com"></script>
89
+ <script>
90
+ tailwind.config = {
91
+ theme: {
92
+ colors: {
93
+ 'main-1': 'var(--color-main-1)',
94
+ 'main-6': 'var(--color-main-6)',
95
+ 'main-7': 'var(--color-main-7)',
96
+ 'main-2': 'var(--color-main-2)',
97
+ 'grey-1': 'var(--color-grey-1)',
98
+ 'grey-2': 'var(--color-grey-2)',
99
+ 'grey-3': 'var(--color-grey-3)',
100
+ 'grey-4': 'var(--color-grey-4)',
101
+ 'grey-6': 'var(--color-grey-6)',
102
+ 'black-1': 'var(--color-black-1)',
103
+ 'black-2': 'var(--color-black-2)',
104
+ 'black-3': 'var(--color-black-3)',
105
+ 'black-5': 'var(--color-black-5)',
106
+ 'black-6': 'var(--color-black-6)',
107
+ 'black-7': 'var(--color-black-7)',
108
+ 'red-1': 'var(--color-red-1)',
109
+ 'red-6': 'var(--color-red-6)',
110
+ 'green-1': 'var(--color-green-1)',
111
+ 'green-6': 'var(--color-green-6)',
112
+ 'blue-6': 'var(--color-blue-6)',
113
+ 'mask': 'var(--color-mask)',
114
+ 'transparent': 'transparent',
115
+ 'current': 'currentColor',
116
+ },
117
+ fontSize: {
118
+ '14': ['14px', { lineHeight: '20px' }],
119
+ '16': ['16px', { lineHeight: '22px' }],
120
+ '20': ['20px', { lineHeight: '28px' }],
121
+ '22': ['22px', { lineHeight: '30px' }],
122
+ '24': ['24px', { lineHeight: '36px' }],
123
+ },
124
+ borderRadius: {
125
+ 'sm': '2px',
126
+ 'DEFAULT': '4px',
127
+ 'full': '9999px',
128
+ },
129
+ spacing: {
130
+ '4': '4px', '8': '8px', '16': '16px', '24': '24px', '40': '40px',
131
+ },
132
+ },
133
+ };
134
+ </script>
135
+
136
+ <style>
137
+ /* ══ tokens/variables.css :root 块逐字复制到此 ══ */
138
+ :root {
139
+ --color-main-1: #f1e7ff;
140
+ --color-main-2: #d4c2f4;
141
+ --color-main-6: #6445d1;
142
+ --color-main-7: #432cb0;
143
+ --color-grey-1: #ffffff;
144
+ --color-grey-2: #f3f4f6;
145
+ --color-grey-3: #e0e4f0;
146
+ --color-grey-4: #a4acca;
147
+ --color-grey-6: #52567b;
148
+ --color-black-1: #eeeeee;
149
+ --color-black-2: #dddddd;
150
+ --color-black-3: #bbbbbb;
151
+ --color-black-5: #666666;
152
+ --color-black-6: #333333;
153
+ --color-black-7: #000000;
154
+ --color-red-1: #ffece8;
155
+ --color-red-6: #fb5251;
156
+ --color-green-1: #e9fff0;
157
+ --color-green-6: #03c15f;
158
+ --color-blue-6: #3376fa;
159
+ --color-mask: rgba(0, 0, 0, 0.6);
160
+ --spacing-4dp: 4px;
161
+ --spacing-8dp: 8px;
162
+ --spacing-16dp: 16px;
163
+ --spacing-24dp: 24px;
164
+ --spacing-40dp: 40px;
165
+ --radius-2dp: 2px;
166
+ --radius-4dp: 4px;
167
+ --radius-full: 9999px;
168
+ }
169
+
170
+ /* ══ PDA 页面骨架 ══ */
171
+ * { margin: 0; padding: 0; box-sizing: border-box; }
172
+
173
+ html, body {
174
+ width: 100%;
175
+ height: 100%;
176
+ overflow: hidden; /* ⛔ body 不可滚动 */
177
+ font-family: "PingFang SC", -apple-system, sans-serif;
178
+ background: var(--color-grey-2);
179
+ }
180
+
181
+ /* 响应式：移动端全屏 / 桌面端 412×844px 沙箱 */
182
+ #app-shell {
183
+ width: 100vw;
184
+ height: 100vh;
185
+ display: flex;
186
+ flex-direction: column;
187
+ background: var(--color-grey-2);
188
+ overflow: hidden;
189
+ }
190
+
191
+ @media (min-width: 768px) {
192
+ body {
193
+ display: flex;
194
+ justify-content: center;
195
+ align-items: center;
196
+ }
197
+ #app-shell {
198
+ width: 412px;
199
+ height: 844px;
200
+ border-radius: 16px;
201
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
202
+ overflow: hidden;
203
+ }
204
+ }
205
+
206
+ /* Navbar */
207
+ .navbar {
208
+ display: flex;
209
+ align-items: center;
210
+ position: relative;
211
+ width: 100%;
212
+ height: 56px;
213
+ padding: 0 16px;
214
+ background: var(--color-grey-2);
215
+ flex-shrink: 0;
216
+ }
217
+ .navbar-back {
218
+ width: 40px; height: 40px;
219
+ display: flex; align-items: center; justify-content: center;
220
+ color: var(--color-black-6);
221
+ }
222
+ .navbar-title {
223
+ position: absolute;
224
+ left: 64px;
225
+ font: 600 24px/36px "PingFang SC", -apple-system, sans-serif;
226
+ color: var(--color-black-6);
227
+ }
228
+ .navbar-more {
229
+ width: 40px; height: 40px;
230
+ margin-left: auto;
231
+ display: flex; align-items: center; justify-content: center;
232
+ color: var(--color-black-6);
233
+ }
234
+
235
+ /* 内容主区域 */
236
+ .page-content {
237
+ flex: 1;
238
+ display: flex;
239
+ flex-direction: column;
240
+ overflow-y: auto;
241
+ padding: 0 12px;
242
+ }
243
+
244
+ /* 底部操作栏 */
245
+ .bottom-bar {
246
+ display: flex;
247
+ align-items: center;
248
+ padding: 12px 16px;
249
+ background: var(--color-grey-2);
250
+ gap: 8px;
251
+ flex-shrink: 0;
252
+ }
253
+
254
+ /* ⛔ 以下为全局禁止项（AI 不可绕过的红线） */
255
+ /* 禁止所有 transition */
256
+ *, *::before, *::after { transition: none !important; }
257
+ /* 禁止 focus ring */
258
+ *:focus { outline: none !important; }
259
+ </style>
260
+ </head>
261
+ <body>
262
+
263
+ <div id="app-shell">
264
+ <!-- Navbar -->
265
+ <div class="navbar">
266
+ <div class="navbar-back">
267
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
268
+ <polyline points="15 18 9 12 15 6"/>
269
+ </svg>
270
+ </div>
271
+ <span class="navbar-title"><!-- 页面标题 --></span>
272
+ <div class="navbar-more">
273
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
274
+ <circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none"/>
275
+ <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
276
+ <circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none"/>
277
+ </svg>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- 页面内容区（在此区域按顺序放置 ScanInput、ListItem 等组件） -->
282
+ <div class="page-content">
283
+ <!-- 组件按 Flex 纵向排列于此 -->
284
+ </div>
285
+
286
+ <!-- 底部操作栏 -->
287
+ <div class="bottom-bar">
288
+ <!-- 按钮放这里 -->
289
+ </div>
290
+ </div>
291
+
292
+ </body>
293
+ </html>
294
+ ```
295
+
296
+ ## 页面组装规则（Assembly Rules）
297
+
298
+ 生成 PDA 页面时，必须严格按以下顺序在 `.page-content` 内纵向堆叠组件：
299
+
300
+ ```
301
+ 1. ScanInput ← 扫描输入框（块级，独占整行）
302
+ 2. SummaryBar ← 统计条（可选，如"共 N 件包裹"）
303
+ 3. ListItem[] ← 列表项（Flex 纵向排列）
304
+ 4. EmptyState ← 空状态（列表为空时显示）
305
+ ```
306
+
307
+ **禁止在 `.page-content` 外放置任何业务组件。**
308
+
309
+ ## AI 生成规则
310
+
311
+ 1. **必须使用本文件提供的完整 HTML 骨架**，不可自行构建页面结构
312
+ 2. Navbar 高度固定 56px，标题 `left: 64px`，必须有返回图标和更多图标
313
+ 3. `.page-content` 必须设置 `flex: 1; overflow-y: auto;`
314
+ 4. `.bottom-bar` 必须设置 `flex-shrink: 0;`，不可使用 `position: fixed`
315
+ 5. 移动端全屏（100vw/100vh），桌面端 412×844px 沙箱
316
+ 6. 全局禁止 `transition`，禁止 `outline`
317
+ 7. 所有颜色通过 Tailwind 类名，禁止 `style="background: var(...)"`
package/spec-data/list-item.md ADDED
@@ -0,0 +1,128 @@
1
+ ---
2
+ id: list-item
3
+ name: ListItem 列表项
4
+ category: molecule
5
+ version: "2.0.0"
6
+ tokens:
7
+ height: 68px
8
+ borderRadius: rounded
9
+ dividerColor: border-black-2
10
+ titleFont: text-20 font-semibold
11
+ subtitleFont: text-16 font-normal
12
+ tagFont: text-14 font-semibold
13
+ padding: p-16
14
+ states:
15
+ - normal (bg-grey-1, 底部 1px 分割线)
16
+ - pressed (bg-main-1，无 transition)
17
+ - selected (border-main-6 bg-main-1)
18
+ ---
19
+
20
+ > **🧠 AI 指令 — 强制约束（MANDATORY，违反即错误）**
21
+ >
22
+ > ```yaml
23
+ > NEGATIVE_PROMPTS:
24
+ > - ⛔ 禁止使用 shadow / shadow-sm（PDA 不用阴影）
25
+ > - ⛔ 禁止使用 rounded-lg / rounded-xl / rounded-2xl
26
+ > - ⛔ 禁止使用 transition（如 transition-colors / transition-all）
27
+ > - ⛔ 禁止使用 :hover 伪类（PDA 触屏无 hover）
28
+ > - ⛔ 禁止项之间用 margin 分隔，必须用底部分割线
29
+ > - ⛔ 禁止使用 text-sm / text-base 等 Tailwind 默认字号
30
+ > - ⛔ 禁止列表项高度不固定（必须 height: 68px）
31
+ > - ⛔ 禁止在 HTML 中手写 style="background: var(--color-*)"
32
+ >
33
+ > MANDATORY:
34
+ > - 行高固定 68px，圆角 rounded（4px）
35
+ > - 每项底部必须有 1px 分割线（border-b border-black-2）
36
+ > - 选中态：瞬间切换（无 transition），border-main-6 + bg-main-1
37
+ > - 状态标签触控热区 ≥ 48px（height: 48px）
38
+ > - 所有图标通过 <use href="#icon_name"/> 调用
39
+ > ```
40
+ >
41
+ > ```css
42
+ > /* ⛔ AI 必须逐字复制这些关键值，不可修改 */
43
+ > .list-item-row { height: 68px; padding: 16px; border-bottom: 1px solid var(--color-black-2); }
44
+ > .list-item-title { font: 600 20px/28px "PingFang SC", -apple-system, sans-serif; color: var(--color-black-6); }
45
+ > .list-item-sub { font: 400 16px/22px "PingFang SC", -apple-system, sans-serif; color: var(--color-black-5); }
46
+ > .list-item-tag { height: 48px; font: 600 14px/20px "PingFang SC", -apple-system, sans-serif; }
47
+ > /* ⛔ 无 transition */
48
+ > ```
49
+
50
+ ---
51
+
52
+ # ListItem 列表项
53
+
54
+ ## 语义结构（Semantic Structure）
55
+
56
+ ```
57
+ ListItem（固定 68px，底部 1px 分割线）
58
+ ├── Left Checkbox（48×48px，可选，用于多选）
59
+ ├── Content（flex-1）
60
+ │ ├── Title（20px/600，单行省略号）
61
+ │ └── Subtitle（16px/400，辅助信息）
62
+ ├── Right Tag（48px 高，状态标签）
63
+ │ ├── default → bg-grey-2 text-grey-6（待处理）
64
+ │ ├── success → bg-green-1 text-green-6（已完成）
65
+ │ └── error → bg-red-1 text-red-6（异常）
66
+ └── Divider（1px solid color-black-2，在每项最底部）
67
+ ```
68
+
69
+ ## 完整实现
70
+
71
+ ```html
72
+ <div class="
73
+ flex items-center gap-16
74
+ h-[68px] px-16
75
+ rounded
76
+ border-b border-black-2
77
+ bg-grey-1
78
+ cursor-pointer
79
+ active:bg-main-1
80
+ ">
81
+ <!-- 可选：左侧复选框 -->
82
+ <div class="w-12 h-12 flex items-center justify-center shrink-0">
83
+ <div class="w-6 h-6 rounded-sm border-2 border-black-3 flex items-center justify-center">
84
+ <svg class="hidden w-4 h-4 text-grey-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
85
+ <polyline points="20 6 9 17 4 12"/>
86
+ </svg>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- 内容区 -->
91
+ <div class="flex-1 min-w-0">
92
+ <div class="font-semibold text-20 text-black-6 truncate">包裹号 PK20260702001</div>
93
+ <div class="flex gap-8">
94
+ <span class="font-normal text-16 text-black-5">上海仓</span>
95
+ <span class="font-normal text-16 text-black-5">3.2kg · 2件</span>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- 状态标签 -->
100
+ <div class="
101
+ shrink-0 h-12 px-8 rounded-sm
102
+ flex items-center
103
+ font-semibold text-14
104
+ bg-green-1 text-green-6
105
+ ">
106
+ 已签收
107
+ </div>
108
+ </div>
109
+ ```
110
+
111
+ ## 状态定义
112
+
113
+ | 状态 | 触发 | 背景+边框 | 标签 背景+文字 |
114
+ |------|------|----------|---------------|
115
+ | **Normal** | 默认 | bg-grey-1, border-black-2 | bg-grey-2, text-grey-6 |
116
+ | **Pressed** | :active | bg-main-1 | 不变 |
117
+ | **Selected** | 点击复选框 | border-main-6, bg-main-1 | 不变 |
118
+
119
+ ## AI 生成规则
120
+
121
+ 1. 行高固定 **68px**，不可弹性伸缩
122
+ 2. 项与项之间用 **`border-b border-black-2`** 分割线分隔，**不可用 margin/gap**
123
+ 3. 标题 `text-20 font-semibold`，超出省略 `truncate`
124
+ 4. 辅助文字 `text-16 font-normal`
125
+ 5. 标签 `h-12 font-semibold text-14`，触控热区 48px
126
+ 6. 圆角 = `rounded`（4px）
127
+ 7. 禁止 `transition`，`:active` 瞬间切换 `bg-main-1`
128
+ 8. 所有图标通过 `<svg><use href="#icon_name"/></svg>` 调用