@yaoxiu/marketing-dsl 1.2.0 → 1.4.0

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.
@@ -0,0 +1,3624 @@
1
+ import { TRACK_EVENT_PATTERN, DSL_VERSION, ACTION_TYPES, NODE_TYPES, ALLOWED_STYLE_KEYS, CLOSE_POSITIONS } from '../chunk-FKZKLCVV.js';
2
+
3
+ // src/docs/reconcile.ts
4
+ function pickTokens(rows, columnIndex) {
5
+ const found = [];
6
+ rows.forEach((row) => {
7
+ const cell2 = row[columnIndex];
8
+ if (typeof cell2 !== "string") return;
9
+ const matched = cell2.match(/`([A-Za-z][A-Za-z0-9]*)`/g) || [];
10
+ matched.forEach((item) => found.push(item.slice(1, -1)));
11
+ });
12
+ return found;
13
+ }
14
+ function reconcileRows(options) {
15
+ const { rows, actual, column = 0, inline = false, label = "\u65B0\u589E" } = options;
16
+ const documented = inline ? pickTokens(rows, column) : rows.map((row) => String(row[column]));
17
+ const missing = actual.filter((item) => documented.indexOf(item) === -1);
18
+ const stale = documented.filter((item) => actual.indexOf(item) === -1);
19
+ const width = rows[0] ? rows[0].length : 3;
20
+ const extra = [];
21
+ if (missing.length) {
22
+ extra.push(
23
+ [
24
+ `\u26A0\uFE0F ${label}\uFF08\u6587\u6863\u672A\u8986\u76D6\uFF09`,
25
+ missing.map((item) => `\`${item}\``).join(" "),
26
+ "\u89E3\u91CA\u5668\u91CC\u5DF2\u7ECF\u652F\u6301\uFF0C\u4F46\u8FD9\u4EFD\u6587\u6863\u8FD8\u6CA1\u5199\u8BF4\u660E\uFF0C\u8BF7\u8865\u4E0A"
27
+ ].slice(0, width)
28
+ );
29
+ }
30
+ if (stale.length) {
31
+ extra.push(
32
+ [
33
+ "\u26A0\uFE0F \u5DF2\u5E9F\u5F03",
34
+ stale.map((item) => `\`${item}\``).join(" "),
35
+ "\u89E3\u91CA\u5668\u91CC\u5DF2\u7ECF\u6CA1\u6709\u4E86\uFF0C\u7167\u7740\u5199\u4F1A\u88AB\u6821\u9A8C\u62E6\u4E0B\uFF0C\u8BF7\u4ECE\u6587\u6863\u5220\u6389"
36
+ ].slice(0, width)
37
+ );
38
+ }
39
+ return extra;
40
+ }
41
+
42
+ // src/docs/sections/action.ts
43
+ var actionRows = [
44
+ ["navigate", "`url`\u3001`target`", "\u8DF3\u8F6C\u3002`target` \u9ED8\u8BA4 `_blank`"],
45
+ ["open", "`view`\u3001`mode`", "\u6253\u5F00\u53E6\u4E00\u4E2A\u89C6\u56FE\uFF0C\u89C1\u7B2C 12 \u8282"],
46
+ ["close", "`reason`", "\u5173\u6389\u5F53\u524D\u8FD9\u4E00\u5C42\uFF1B\u53EA\u5269\u4E00\u5C42\u65F6\u5C31\u662F\u6574\u4F53\u5173\u95ED"],
47
+ ["closeAll", "\u2014", "\u4E0D\u7BA1\u51E0\u5C42\uFF0C\u5168\u90E8\u5173\u6389"],
48
+ ["setState", "`key`\u3001`value`", "\u6539\u5C40\u90E8\u72B6\u6001\uFF0C\u7528\u6765\u505A\u9009\u4E2D\u5207\u6362"],
49
+ ["track", "`event`\u3001`params`", "\u57CB\u70B9\u4E0A\u62A5\u3002`event` \u6709\u547D\u540D\u89C4\u8303\uFF0C\u89C1\u4E0B"],
50
+ ["call", "`name`\u3001`params`", "\u8C03\u7528\u5BBF\u4E3B\u6CE8\u518C\u7684\u65B9\u6CD5\uFF08\u5982\u9886\u5238\uFF09\uFF0C`name` \u662F\u767D\u540D\u5355"],
51
+ ["sequence", "`actions`", "\u4F9D\u6B21\u6267\u884C\u591A\u4E2A\u52A8\u4F5C"]
52
+ ];
53
+ var sections = [
54
+ {
55
+ id: "action",
56
+ title: "11. \u52A8\u4F5C",
57
+ blocks: [
58
+ {
59
+ t: "p",
60
+ text: "\u4EFB\u4F55\u8282\u70B9\u52A0\u4E0A `action` \u5C31\u53EF\u4EE5\u70B9\u51FB\u3002\u6240\u6709\u52A8\u4F5C\u7531\u6E32\u67D3\u5668\u7EDF\u4E00\u6267\u884C\uFF0C\u57CB\u70B9\u53E3\u5F84\u5168\u5C40\u4E00\u81F4\u3002"
61
+ },
62
+ {
63
+ t: "table",
64
+ head: ["type", "\u5B57\u6BB5", "\u8BF4\u660E"],
65
+ rows: actionRows.concat(
66
+ reconcileRows({ rows: actionRows, actual: ACTION_TYPES, label: "\u65B0\u589E\u52A8\u4F5C" })
67
+ )
68
+ },
69
+ {
70
+ t: "code",
71
+ code: `// \u5178\u578B\uFF1A\u5148\u57CB\u70B9\u518D\u8DF3\u8F6C\uFF0C\u94FE\u63A5\u8DDF\u7740\u5F53\u524D\u9009\u4E2D\u9879\u8D70
72
+ "action": {
73
+ "type": "sequence",
74
+ "actions": [
75
+ { "type": "track", "event": "popup_order_click",
76
+ "params": { "plan": "{{ current.key }}" } },
77
+ { "type": "navigate", "url": "{{ current.url }}" }
78
+ ]
79
+ }
80
+
81
+ // \u9009\u4E2D\u5207\u6362
82
+ "action": { "type": "setState", "key": "period", "value": "{{ index }}" }`
83
+ },
84
+ {
85
+ t: "note",
86
+ tone: "danger",
87
+ text: "\u94FE\u63A5\u53EA\u5141\u8BB8 `http` / `https` / `mailto` / `tel` \u548C\u76F8\u5BF9\u8DEF\u5F84\u3002`javascript:` \u4F1A\u88AB\u62E6\u4E0B\u5E76\u4E0A\u62A5\u9519\u8BEF\u2014\u2014\u4E00\u4E2A\u300C\u8DF3\u8F6C\u94FE\u63A5\u300D\u5B57\u6BB5\u5982\u679C\u80FD\u5199 `javascript:`\uFF0C\u5C31\u7B49\u4E8E\u5F00\u4E86 JS \u6267\u884C\u6743\u9650\u3002"
88
+ },
89
+ { t: "h3", text: "track \u7684\u4E8B\u4EF6\u540D\u6709\u683C\u5F0F\u8981\u6C42\uFF08\u4E0D\u5408\u89C4\u76F4\u63A5\u5B58\u4E0D\u4E0A\uFF09" },
90
+ {
91
+ t: "p",
92
+ text: `\`track\` \u52A8\u4F5C\u7684 \`event\` \u5FC5\u987B\u5339\u914D \`${String(TRACK_EVENT_PATTERN.source)}\`\uFF1A**\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934**\uFF0C\u4E4B\u540E\u53EA\u80FD\u662F\u5C0F\u5199\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF\uFF0C\u603B\u957F **3~64** \u4E2A\u5B57\u7B26\u3002`
93
+ },
94
+ {
95
+ t: "note",
96
+ tone: "danger",
97
+ text: "\u8FD9\u662F **error \u7EA7\u6821\u9A8C\uFF0C\u76F4\u63A5\u963B\u65AD\u4FDD\u5B58**\uFF0C\u4E0D\u662F\u8B66\u544A\u3002\u5199\u6210\u4E2D\u6587\u3001\u9A7C\u5CF0\u3001\u5E26\u4E2D\u5212\u7EBF\u7684\u4E8B\u4EF6\u540D\uFF0C\u5728\u7F16\u8F91\u5668\u91CC\u70B9\u4FDD\u5B58\u90A3\u4E00\u523B\u5C31\u4F1A\u88AB\u62E6\u4E0B\u2014\u2014\u4E0D\u662F\u7B49\u4E0A\u7EBF\u540E\u624D\u53D1\u73B0\u6CA1\u6709\u6570\u636E\u3002AI \u751F\u6210\u7684\u914D\u7F6E\u5C24\u5176\u5BB9\u6613\u8E29\u8FD9\u6761\uFF0C\u62FF\u5230 AI \u7684\u8F93\u51FA\u5148\u5728\u8C03\u8BD5\u53F0\u6821\u9A8C\u4E00\u904D\u3002"
98
+ },
99
+ {
100
+ t: "table",
101
+ head: ["\u2705 \u6B63\u786E", "\u274C \u9519\u8BEF", "\u4E3A\u4EC0\u4E48"],
102
+ rows: [
103
+ ["`banner_renew_click`", "`\u7EED\u8D39\u70B9\u51FB`", "\u4E0D\u80FD\u7528\u4E2D\u6587"],
104
+ ["`popup_show`", "`bannerRenewClick`", "\u4E0D\u80FD\u7528\u9A7C\u5CF0 / \u5927\u5199\u5B57\u6BCD"],
105
+ ["`countdown_end`", "`banner-renew-click`", "\u4E0D\u80FD\u7528\u4E2D\u5212\u7EBF\uFF0C\u5206\u8BCD\u4E00\u5F8B\u7528\u4E0B\u5212\u7EBF"],
106
+ ["`cta_click_v2`", "`cta`", "\u4E0D\u8DB3 3 \u4E2A\u5B57\u7B26\uFF0C\u805A\u5408\u7684\u65F6\u5019\u770B\u4E0D\u51FA\u662F\u4EC0\u4E48"],
107
+ ["`notice_close`", "`1_click`", "\u5FC5\u987B\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934\uFF0C\u4E0D\u80FD\u662F\u6570\u5B57\u6216\u4E0B\u5212\u7EBF"],
108
+ ["`vip_renew_click`", "`vip renew click`", "\u4E0D\u80FD\u6709\u7A7A\u683C"]
109
+ ]
110
+ },
111
+ { t: "h3", text: "\u5EFA\u8BAE\u7684\u547D\u540D\u6A21\u5F0F\uFF1A`\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C`" },
112
+ {
113
+ t: "table",
114
+ head: ["\u6BB5", "\u5199\u4EC0\u4E48", "\u4F8B\u5B50"],
115
+ rows: [
116
+ ["\u5751\u4F4D", "\u8FD9\u4E2A\u4E1C\u897F\u662F\u4EC0\u4E48\u5F62\u6001\u3001\u51FA\u73B0\u5728\u54EA", "`popup` `banner` `notice`"],
117
+ ["\u4E1A\u52A1", "\u8FD9\u6B21\u6D3B\u52A8 / \u8FD9\u4E2A\u573A\u666F", "`renew` `vip` `autumn`"],
118
+ ["\u52A8\u4F5C", "\u7528\u6237\u505A\u4E86\u4EC0\u4E48", "`show` `click` `close` `end`"]
119
+ ]
120
+ },
121
+ {
122
+ t: "code",
123
+ code: `banner_renew_click // \u7EED\u8D39 Banner \u88AB\u70B9\u51FB
124
+ popup_vip_show // \u4F1A\u5458\u5F39\u7A97\u66DD\u5149
125
+ popup_vip_close // \u4F1A\u5458\u5F39\u7A97\u5173\u95ED
126
+ notice_autumn_close // \u79CB\u5B63\u6D3B\u52A8\u516C\u544A\u6761\u88AB\u5173\u6389
127
+ countdown_end // \u5012\u8BA1\u65F6\u5F52\u96F6`
128
+ },
129
+ {
130
+ t: "note",
131
+ tone: "info",
132
+ text: "**\u4E8B\u4EF6\u540D\u4E0D\u505A\u767D\u540D\u5355**\uFF0C\u8FD0\u8425\u53EF\u4EE5\u81EA\u7531\u5B9A\u4E49\uFF0C\u53EA\u7EDF\u4E00\u683C\u5F0F\u2014\u2014\u56E0\u4E3A\u540E\u7AEF\u662F\u6309\u524D\u7F00\u805A\u5408\u7684\uFF0C\u683C\u5F0F\u4E00\u4E71\u5C31\u6CA1\u6CD5\u5206\u7EC4\u7EDF\u8BA1\u3002\u540C\u4E00\u573A\u6D3B\u52A8\u7684\u6240\u6709\u4E8B\u4EF6\u7528\u540C\u4E00\u4E2A\u524D\u7F00\uFF0C\u770B\u677F\u4E0A\u5C31\u80FD\u4E00\u773C\u6536\u62E2\u3002\u8981\u533A\u5206\u5177\u4F53\u6863\u4F4D\u3001\u5177\u4F53\u6309\u94AE\uFF0C\u653E `params` \u91CC\uFF0C\u4E0D\u8981\u5F80\u4E8B\u4EF6\u540D\u4E0A\u5806\u3002"
133
+ },
134
+ {
135
+ t: "code",
136
+ code: `// \u2705 \u4E8B\u4EF6\u540D\u5199\u6B7B\uFF0C\u53D8\u91CF\u653E params
137
+ { "type": "track", "event": "popup_renew_click",
138
+ "params": { "plan": "{{ current.key }}", "price": "{{ current.price }}" } }
139
+
140
+ // \u274C \u522B\u628A\u53D8\u91CF\u62FC\u8FDB\u4E8B\u4EF6\u540D\uFF1A\u62FC\u51FA\u6765\u7684\u503C\u53EF\u80FD\u4E0D\u5408\u683C\u5F0F\uFF0C
141
+ // \u800C\u4E14\u6BCF\u4E2A\u6863\u4F4D\u4E00\u4E2A\u4E8B\u4EF6\u540D\uFF0C\u540E\u7AEF\u805A\u5408\u65F6\u4F1A\u6563\u6210\u4E00\u5806
142
+ { "type": "track", "event": "popup_renew_{{ current.key }}" }`
143
+ },
144
+ { t: "h3", text: "close \u5230\u5E95\u5173\u6389\u4E86\u4EC0\u4E48" },
145
+ {
146
+ t: "p",
147
+ text: "`close` \u4E0D\u662F\u6E32\u67D3\u5668\u81EA\u5DF1\u628A\u81EA\u5DF1\u85CF\u8D77\u6765\uFF0C\u800C\u662F**\u901A\u77E5\u5BBF\u4E3B\u9875\u9762\u300C\u7528\u6237\u60F3\u5173\u4E86\u300D**\uFF0C\u7531\u5BBF\u4E3B\u51B3\u5B9A\u5173\u4E0D\u5173\u3002\u8FD9\u662F\u523B\u610F\u7684\uFF1A\u4E00\u6BB5\u914D\u7F6E\u4E0D\u8BE5\u6709\u6743\u9650\u76F4\u63A5\u51B3\u5B9A\u5BBF\u4E3B\u9875\u9762\u7684\u663E\u793A\u3002"
148
+ },
149
+ {
150
+ t: "table",
151
+ head: ["\u573A\u666F", "\u5BBF\u4E3B\u4F1A\u4E0D\u4F1A\u6536\u5230\u901A\u77E5"],
152
+ rows: [
153
+ ["\u5355\u4E2A\u5F39\u7A97 / \u516C\u544A\u6761\uFF0C\u70B9 X \u6216\u70B9\u906E\u7F69", "\u4F1A\uFF0C\u5BBF\u4E3B\u5173\u6389\u5B83"],
154
+ ["\u591A\u89C6\u56FE\u53E0\u4E86\u4E24\u5C42\uFF0C\u5173\u6389\u4E0A\u9762\u90A3\u5C42", "**\u4E0D\u4F1A**\uFF0C\u53EA\u662F\u5185\u90E8\u56DE\u5230\u4E0B\u9762\u90A3\u5C42"],
155
+ ["\u591A\u89C6\u56FE\uFF0C\u5173\u6389\u6700\u540E\u4E00\u5C42", "\u4F1A"],
156
+ ["`closeAll`", "\u4F1A\uFF0C\u4E0D\u7BA1\u5F53\u65F6\u51E0\u5C42"],
157
+ ["\u5012\u8BA1\u65F6 `onEnd` \u914D\u4E86 `close`", "\u4F1A"]
158
+ ]
159
+ },
160
+ {
161
+ t: "note",
162
+ tone: "info",
163
+ text: '`close` \u7684 `reason` \u4F1A\u4E00\u8D77\u4F20\u7ED9\u5BBF\u4E3B\uFF0C\u5BBF\u4E3B\u636E\u6B64\u51B3\u5B9A\u540E\u7EED\u884C\u4E3A\u2014\u2014\u6BD4\u5982 `reason: "user-dismiss"` \u65F6\u8BB0\u4F4F\u300C\u4ECA\u5929\u4E0D\u518D\u663E\u793A\u300D\u3002\u4E0D\u5199 `reason` \u9ED8\u8BA4\u662F `action`\u3002'
164
+ },
165
+ {
166
+ t: "note",
167
+ tone: "warn",
168
+ text: "\u60F3\u8BA9\u5F39\u7A97\u300C\u5173\u4E86\u5C31\u522B\u518D\u51FA\u73B0\u300D\uFF0C\u5149\u9760 `close` \u4E0D\u591F\u2014\u2014\u5B83\u53EA\u7BA1\u8FD9\u4E00\u6B21\u3002\u8981\u914D\u4E00\u6761 `call` \u8BA9\u5BBF\u4E3B\u8BB0\u4E0B\u6765\uFF08\u89C1\u793A\u4F8B \u2461 \u548C \u2464 \u7684\u300C\u4E0D\u518D\u63D0\u9192\u300D\uFF09\u3002"
169
+ },
170
+ { t: "h3", text: "\u66DD\u5149\u548C\u5173\u95ED\u4E5F\u8981\u57CB\u70B9\uFF1Astage.onShow / stage.onClose" },
171
+ {
172
+ t: "p",
173
+ text: "\u53EA\u7ED9\u6309\u94AE\u57CB\u70B9\u4F1A\u6F0F\u6389\u6700\u57FA\u672C\u7684\u8F6C\u5316\u6570\u636E\u2014\u2014\u5F39\u4E86\u591A\u5C11\u6B21\u3001\u591A\u5C11\u4EBA\u76F4\u63A5\u5173\u6389\u3001\u662F\u70B9 X \u8D70\u7684\u8FD8\u662F\u70B9\u906E\u7F69\u8D70\u7684\u3002\u8FD9\u4E24\u4E2A\u94A9\u5B50\u5199\u5728 `stage` \u4E0A\uFF0C\u6BCF\u4E2A\u89C6\u56FE\u5404\u81EA\u4E00\u5957\u3002"
174
+ },
175
+ {
176
+ t: "code",
177
+ code: `"stage": {
178
+ "width": 420, "height": "auto", "layout": "flow",
179
+
180
+ // \u66DD\u5149\uFF1A\u6570\u636E\u5C31\u7EEA\u3001\u5F39\u7A97\u771F\u6B63\u6E32\u67D3\u51FA\u6765\u65F6\u89E6\u53D1\u4E00\u6B21
181
+ "onShow": { "type": "track", "event": "popup_show", "params": { "popup": "renew" } },
182
+
183
+ // \u5173\u95ED\uFF1A\u70B9 X\u3001\u70B9\u906E\u7F69\u3001\u8D70 close \u52A8\u4F5C\u3001\u88AB replace \u9876\u6389\uFF0C\u90FD\u4F1A\u89E6\u53D1
184
+ "onClose": { "type": "track", "event": "popup_close",
185
+ "params": { "popup": "renew", "reason": "{{ closeReason }}" } }
186
+ }`
187
+ },
188
+ {
189
+ t: "table",
190
+ head: ["closeReason", "\u4EC0\u4E48\u65F6\u5019"],
191
+ rows: [
192
+ ["`close-button`", "\u70B9\u4E86\u5173\u95ED\u6309\u94AE"],
193
+ ["`mask`", "\u70B9\u4E86\u906E\u7F69\uFF08\u9700\u8981 `maskClosable: true`\uFF09"],
194
+ ["`replace`", "\u88AB `open` \u7684 `replace` \u6A21\u5F0F\u9876\u6389"],
195
+ ["\u81EA\u5B9A\u4E49\u503C", '`close` \u52A8\u4F5C\u91CC\u81EA\u5DF1\u5199\u7684 `reason`\uFF0C\u5982 `"never-remind"`'],
196
+ ["`action`", "`close` \u52A8\u4F5C\u6CA1\u5199 `reason` \u65F6\u7684\u9ED8\u8BA4\u503C"]
197
+ ]
198
+ },
199
+ {
200
+ t: "note",
201
+ tone: "info",
202
+ text: "\u66DD\u5149\u57CB\u70B9\u7B49\u6570\u636E\u6E90\u8FD4\u56DE\u540E\u624D\u89E6\u53D1\u2014\u2014\u6570\u636E\u6CA1\u56DE\u6765\u65F6\u5F39\u7A97\u6839\u672C\u6CA1\u6E32\u67D3\uFF0C\u8FD9\u65F6\u5019\u4E0A\u62A5\u66DD\u5149\u4F1A\u628A\u8F6C\u5316\u7387\u7B97\u4F4E\u3002\u591A\u89C6\u56FE\u4E0B\u6BCF\u5C42\u5404\u57CB\u5404\u7684\uFF0C\u53EF\u4EE5\u5206\u522B\u7EDF\u8BA1\u300C\u516C\u544A\u6761\u66DD\u5149\u300D\u548C\u300C\u70B9\u5F00\u540E\u7684\u5F39\u7A97\u66DD\u5149\u300D\u3002"
203
+ },
204
+ { t: "h3", text: "\u516C\u544A\u6761 / Banner \u600E\u4E48\u5173" },
205
+ {
206
+ t: "p",
207
+ text: "\u516C\u544A\u6761\u4E0D\u9002\u5408\u7528 `stage.closeButton`\uFF08\u90A3\u662F\u538B\u5728\u89D2\u4E0A\u7684\u5706\u5F62\u6309\u94AE\uFF0C\u4E3A\u6574\u56FE\u5F39\u7A97\u8BBE\u8BA1\u7684\uFF09\u3002\u76F4\u63A5\u5728\u884C\u672B\u653E\u4E00\u4E2A\u5E26 `close` \u52A8\u4F5C\u7684 `text` \u8282\u70B9\u66F4\u81EA\u7136\uFF0C\u8DDF\u5176\u4ED6\u5185\u5BB9\u4E00\u8D77\u6392\u7248\u3002"
208
+ },
209
+ {
210
+ t: "code",
211
+ code: `{ "type": "text", "content": "\u2715",
212
+ "style": { "alignSelf": "center", "width": 22, "height": 22,
213
+ "textAlign": "center", "lineHeight": 22, "cursor": "pointer" },
214
+ "action": { "type": "sequence", "actions": [
215
+ { "type": "track", "event": "notice_close" },
216
+ { "type": "call", "name": "setNeverRemind" }, // \u8BB0\u4F4F\u522B\u518D\u51FA
217
+ { "type": "close", "reason": "user-dismiss" }
218
+ ] } }`
219
+ },
220
+ {
221
+ t: "note",
222
+ tone: "info",
223
+ text: "`close` \u53EA\u662F\u901A\u77E5\u5BBF\u4E3B\u300C\u7528\u6237\u5173\u6389\u4E86\u300D\uFF0C**\u5173\u6389\u4E4B\u540E\u8981\u4E0D\u8981\u518D\u51FA\u3001\u9694\u591A\u4E45\u518D\u51FA\u7531\u5BBF\u4E3B\u51B3\u5B9A**\u3002\u60F3\u8BA9\u5B83\u522B\u518D\u51FA\u73B0\uFF0C\u914D\u4E00\u6761 `call` \u8BA9\u5BBF\u4E3B\u8BB0\u4E0B\u6765\u3002"
224
+ },
225
+ {
226
+ t: "note",
227
+ tone: "info",
228
+ text: "\u6574\u6761\u516C\u544A\u6761\u53EF\u70B9\u3001\u884C\u672B\u53C8\u6709 \xD7 \u65F6\u4E0D\u7528\u62C5\u5FC3\u51B2\u7A81\uFF1A\u5185\u5C42\u8282\u70B9\u6709\u81EA\u5DF1\u7684 `action` \u5C31\u4E0D\u4F1A\u518D\u5192\u6CE1\u7ED9\u5916\u5C42\uFF0C\u70B9 \xD7 \u53EA\u4F1A\u5173\u95ED\uFF0C\u4E0D\u4F1A\u540C\u65F6\u89E6\u53D1\u5916\u5C42\u7684\u8DF3\u8F6C\u6216\u5F39\u7A97\u3002"
229
+ }
230
+ ]
231
+ }
232
+ ];
233
+ var action_default = sections;
234
+
235
+ // src/docs/sections/countdown.ts
236
+ var sections2 = [
237
+ {
238
+ id: "countdown",
239
+ title: "10. \u5012\u8BA1\u65F6",
240
+ blocks: [
241
+ {
242
+ t: "p",
243
+ text: "\u5012\u8BA1\u65F6\u8282\u70B9\u53EA\u8D1F\u8D23\u7B97\u65F6\u95F4\uFF0C\u4E0D\u8D1F\u8D23\u957F\u4EC0\u4E48\u6837\u3002\u5B83\u628A\u65F6\u95F4\u7247\u6BB5\u6CE8\u5165 `children` \u7684\u4E0A\u4E0B\u6587\uFF0C\u6392\u7248\u4F60\u81EA\u5DF1\u5199\u3002"
244
+ },
245
+ {
246
+ t: "code",
247
+ code: `{
248
+ "type": "countdown",
249
+ "to": "{{ user.trialEndAt }}",
250
+ "precision": "cs", // "s" \u6BCF\u79D2\uFF08\u9ED8\u8BA4\uFF09| "cs" \u5398\u79D2\uFF0C\u9010\u5E27\u5237\u65B0
251
+ "as": "cd", // \u6CE8\u5165\u7684\u53D8\u91CF\u540D\uFF0C\u9ED8\u8BA4 cd
252
+ "style": { "align": "center", "gap": 6 },
253
+ "onEnd": { "type": "track", "event": "countdown_end" },
254
+ "children": [
255
+ { "type": "text", "content": "{{ cd.h }}", "style": { "width": 42, "fontVariantNumeric": "tabular-nums" } },
256
+ { "type": "text", "content": ":" },
257
+ { "type": "text", "content": "{{ cd.m }}", "style": { "width": 42, "fontVariantNumeric": "tabular-nums" } },
258
+ { "type": "text", "content": ":" },
259
+ { "type": "text", "content": "{{ cd.s }}", "style": { "width": 42, "fontVariantNumeric": "tabular-nums" } }
260
+ ]
261
+ }`
262
+ },
263
+ {
264
+ t: "table",
265
+ head: ["\u7247\u6BB5", "\u542B\u4E49"],
266
+ rows: [
267
+ ["`cd.d`", "\u5929\u6570"],
268
+ ["`cd.h`", "\u5C0F\u65F6 0~23\uFF0C\u5DF2\u8865\u96F6"],
269
+ ["`cd.hAll`", "\u603B\u5C0F\u65F6\u6570\uFF0C\u7528\u4E8E `143:58:07` \u8FD9\u79CD\u4E0D\u6309\u5929\u6298\u7B97\u7684\u5199\u6CD5"],
270
+ ["`cd.m`", "\u5206\uFF0C\u5DF2\u8865\u96F6"],
271
+ ["`cd.s`", "\u79D2\uFF0C\u5DF2\u8865\u96F6"],
272
+ ["`cd.cs`", '\u5398\u79D2\uFF0C\u5DF2\u8865\u96F6\u3002\u53EA\u5728 `precision: "cs"` \u4E0B\u6709\u610F\u4E49'],
273
+ ["`cd.ended`", "\u662F\u5426\u5DF2\u7ED3\u675F"]
274
+ ]
275
+ },
276
+ { t: "h3", text: "onEnd\uFF1A\u5012\u8BA1\u65F6\u5F52\u96F6\u65F6\u505A\u70B9\u4EC0\u4E48" },
277
+ {
278
+ t: "p",
279
+ text: "\u5012\u8BA1\u65F6\u8D70\u5230 0 \u4F1A\u89E6\u53D1\u4E00\u6B21 `onEnd`\uFF0C\u53EF\u4EE5\u662F\u4EFB\u610F\u52A8\u4F5C\u2014\u2014\u4E0A\u62A5\u57CB\u70B9\u3001\u81EA\u52A8\u5173\u6389\u5F39\u7A97\u3001\u6216\u8005\u6362\u5230\u300C\u6D3B\u52A8\u5DF2\u7ED3\u675F\u300D\u90A3\u4E00\u5C4F\u3002"
280
+ },
281
+ {
282
+ t: "code",
283
+ code: `// \u4E0A\u62A5\u57CB\u70B9
284
+ "onEnd": { "type": "track", "event": "countdown_end" }
285
+
286
+ // \u5230\u70B9\u81EA\u52A8\u5173\u5F39\u7A97
287
+ "onEnd": { "type": "close", "reason": "countdown-end" }
288
+
289
+ // \u5230\u70B9\u6362\u4E00\u5C4F\uFF08\u591A\u89C6\u56FE\uFF09
290
+ "onEnd": { "type": "open", "view": "expired", "mode": "replace" }`
291
+ },
292
+ {
293
+ t: "note",
294
+ tone: "info",
295
+ text: "**\u53EA\u5728\u300C\u7528\u6237\u773C\u770B\u7740\u5B83\u5F52\u96F6\u300D\u65F6\u89E6\u53D1**\u3002\u6253\u5F00\u5F39\u7A97\u65F6\u6D3B\u52A8\u5C31\u5DF2\u7ECF\u8FC7\u671F\u7684\uFF0C\u4E0D\u4F1A\u89E6\u53D1 `onEnd`\u2014\u2014\u5426\u5219\u6BCF\u6B21\u6709\u4EBA\u6253\u5F00\u4E00\u4E2A\u8FC7\u671F\u5F39\u7A97\u90FD\u4E0A\u62A5\u4E00\u6B21\uFF0C\u8FD9\u4E2A\u57CB\u70B9\u5C31\u6CA1\u6CD5\u7528\u4E86\u3002\u8FD9\u79CD\u60C5\u51B5\u663E\u793A\u4E0A\u4ECD\u7136\u8D70 `endText`\u3002"
296
+ },
297
+ {
298
+ t: "p",
299
+ text: "\u60F3\u8BA9\u300C\u5DF2\u7ED3\u675F\u300D\u548C\u300C\u8FDB\u884C\u4E2D\u300D\u663E\u793A\u6210\u5B8C\u5168\u4E0D\u540C\u7684\u6392\u7248\uFF0C\u7528 `cd.ended` \u914D `visibleWhen`\uFF0C\u4E0D\u9700\u8981\u9760 `onEnd`\u3002"
300
+ },
301
+ {
302
+ t: "code",
303
+ code: `"children": [
304
+ { "type": "text", "content": "\u8FD8\u5269 {{ cd.h }}:{{ cd.m }}:{{ cd.s }}",
305
+ "visibleWhen": "!cd.ended" },
306
+ { "type": "text", "content": "\u6D3B\u52A8\u5DF2\u7ED3\u675F", "visibleWhen": "cd.ended",
307
+ "style": { "color": "#999" } }
308
+ ]`
309
+ },
310
+ { t: "h3", text: "to\uFF1A\u7ED3\u675F\u65F6\u95F4\u600E\u4E48\u5199" },
311
+ { t: "p", text: "**\u4E0D\u9700\u8981\u65F6\u95F4\u6233**\uFF0C\u76F4\u63A5\u5199\u65E5\u671F\u5C31\u884C\u3002\u4E0B\u9762\u8FD9\u4E9B\u5199\u6CD5\u90FD\u80FD\u8BC6\u522B\uFF1A" },
312
+ {
313
+ t: "table",
314
+ head: ["\u5199\u6CD5", "\u4F8B\u5B50"],
315
+ rows: [
316
+ ["\u65E5\u671F + \u65F6\u95F4", '`"2026-09-01 18:00:00"` `"2026-09-01 18:00"`'],
317
+ ["\u53EA\u5199\u65E5\u671F\uFF08\u5F53\u5929\u96F6\u70B9\uFF09", '`"2026-09-01"` `"2026/09/01"` `"2026.09.01"`'],
318
+ ["\u4E2D\u6587", '`"2026\u5E749\u67081\u65E5"` `"2026\u5E749\u67081\u65E5 18\u70B9"` `"2026\u5E749\u67081\u65E5 18\u70B930\u5206"`'],
319
+ ["\u63A5\u53E3\u8FD4\u56DE\u7684\u683C\u5F0F", '`"2026-09-01T18:00:00Z"` `"2026-09-01T18:00:00+08:00"`'],
320
+ ["\u65F6\u95F4\u6233\uFF08\u6BEB\u79D2\uFF09", "`1786949074954`"],
321
+ ["\u4ECE\u6570\u636E\u91CC\u53D6", '`"{{ user.trialEndAt }}"`']
322
+ ]
323
+ },
324
+ {
325
+ t: "note",
326
+ tone: "warn",
327
+ text: '\u5199\u6210 `"\u4E0B\u5468\u4E09"`\u300C\u6D3B\u52A8\u7ED3\u675F\u65F6\u300D\u8FD9\u7C7B\u8BC6\u522B\u4E0D\u4E86\u7684\u5185\u5BB9\uFF0C**\u4FDD\u5B58\u524D\u5C31\u4F1A\u62A5\u9519**\u3002\u8FD9\u662F\u523B\u610F\u7684\uFF1A\u8BC6\u522B\u4E0D\u4E86\u4F1A\u88AB\u5F53\u6210\u300C\u5DF2\u7ECF\u7ED3\u675F\u300D\uFF0C\u9875\u9762\u4E0A\u53EA\u6709\u4E00\u884C\u300C\u5DF2\u7ED3\u675F\u300D\uFF0C\u4E0D\u5F53\u573A\u62E6\u4E0B\u7684\u8BDD\u4F60\u6839\u672C\u770B\u4E0D\u51FA\u662F\u65F6\u95F4\u5199\u9519\u4E86\u3002'
328
+ },
329
+ {
330
+ t: "p",
331
+ text: "\u4E0D\u5199 `children` \u65F6\u9000\u5316\u6210\u4E00\u884C\u6587\u672C\uFF0C\u7528 `format` \u63A7\u5236\uFF0C\u5360\u4F4D\u7B26\u662F `{d}` `{h}` `{hAll}` `{m}` `{s}` `{cs}`\uFF0C\u7ED3\u675F\u540E\u663E\u793A `endText`\u3002"
332
+ },
333
+ {
334
+ t: "note",
335
+ tone: "info",
336
+ text: "\u5269\u4F59\u65F6\u95F4\u6309\u300C\u7ED3\u675F\u65F6\u95F4 \u2212 \u5F53\u524D\u65F6\u95F4\u300D\u5B9E\u65F6\u7B97\uFF0C\u4E0D\u662F\u9010\u5E27\u9012\u51CF\u3002\u6240\u4EE5\u6D4F\u89C8\u5668\u628A\u540E\u53F0\u6807\u7B7E\u9875\u6682\u505C\u540E\u518D\u5207\u56DE\u6765\uFF0C\u663E\u793A\u4F1A\u81EA\u52A8\u6821\u51C6\uFF0C\u4E0D\u4F1A\u8D70\u6162\u3002"
337
+ }
338
+ ]
339
+ }
340
+ ];
341
+ var countdown_default = sections2;
342
+
343
+ // src/docs/sections/data-state.ts
344
+ var sections3 = [
345
+ {
346
+ id: "data",
347
+ title: "8. \u6570\u636E\u4E0E\u72B6\u6001",
348
+ blocks: [
349
+ { t: "h3", text: "data\uFF1A\u5199\u6B7B\u7684\u6570\u636E" },
350
+ {
351
+ t: "code",
352
+ code: `"data": {
353
+ "plans": [
354
+ { "key": "basic", "name": "\u57FA\u7840\u7248", "price": "\xA5299", "url": "https://..." },
355
+ { "key": "pro", "name": "\u4E13\u4E1A\u7248", "price": "\xA5899", "url": "https://..." }
356
+ ]
357
+ }`
358
+ },
359
+ { t: "h3", text: "data\uFF1A\u4ECE\u540E\u7AEF\u53D6" },
360
+ {
361
+ t: "code",
362
+ code: `"data": {
363
+ "plans": { "$source": "listPlans", "params": { "scene": "renew" } }
364
+ }`
365
+ },
366
+ {
367
+ t: "note",
368
+ tone: "danger",
369
+ text: "`$source` \u53EA\u80FD\u586B\u540E\u7AEF\u6CE8\u518C\u8FC7\u7684\u6570\u636E\u6E90\u540D\u79F0\uFF0C\u5728\u7F16\u8F91\u5668\u91CC\u4ECE\u4E0B\u62C9\u6846\u9009\u3002\u8FD9\u91CC**\u4E0D\u63A5\u53D7\u63A5\u53E3\u5730\u5740**\u2014\u2014\u80FD\u586B\u4EFB\u610F URL \u5C31\u7B49\u4E8E\u5F00\u4E86\u8D8A\u6743\u62C9\u6570\u548C SSRF \u7684\u53E3\u5B50\u3002\u9700\u8981\u65B0\u6570\u636E\u6E90\u627E\u540E\u7AEF\u767B\u8BB0\uFF0C\u4E0D\u8981\u60F3\u529E\u6CD5\u7ED5\u3002"
370
+ },
371
+ {
372
+ t: "p",
373
+ text: "\u6570\u636E\u6CA1\u56DE\u6765\u3001\u6216\u8005\u62C9\u5931\u8D25\uFF0C\u5F39\u7A97\u90FD**\u4E0D\u4F1A\u6E32\u67D3**\uFF08\u4E0D\u5F39\u7A7A\u58F3\uFF09\u3002\u6240\u4EE5\u4E0D\u7528\u5728 DSL \u91CC\u5904\u7406\u52A0\u8F7D\u6001\u3002"
374
+ },
375
+ { t: "h3", text: "state\uFF1A\u5C40\u90E8\u72B6\u6001" },
376
+ {
377
+ t: "p",
378
+ text: "\u7528\u6765\u8BB0\u300C\u5F53\u524D\u9009\u4E2D\u7B2C\u51E0\u4E2A\u300D\u8FD9\u7C7B\u4FE1\u606F\u3002\u521D\u59CB\u503C\u5199\u5728 `state` \u91CC\uFF0C\u7528\u6237\u4EA4\u4E92\u65F6\u7531 `setState` \u52A8\u4F5C\u6539\u3002"
379
+ },
380
+ { t: "code", code: `"state": { "period": 1 }` },
381
+ { t: "h3", text: "derived\uFF1A\u63A8\u5BFC\u522B\u540D" },
382
+ {
383
+ t: "p",
384
+ text: "\u628A\u300C\u5F53\u524D\u9009\u4E2D\u7684\u90A3\u4E00\u6761\u300D\u8D77\u4E2A\u540D\u5B57\uFF0C\u5176\u4ED6\u8282\u70B9\u76F4\u63A5\u8BFB\u5B83\u3002\u6709\u4E86\u5B83\uFF0C\u5207\u6362\u65F6\u4EF7\u683C\u3001\u56FE\u7247\u3001\u8DF3\u8F6C\u94FE\u63A5\u3001\u57CB\u70B9\u53C2\u6570\u5168\u90E8\u81EA\u52A8\u8054\u52A8\uFF0C\u7248\u5F0F\u53EA\u6392\u4E00\u904D\u3002"
385
+ },
386
+ {
387
+ t: "code",
388
+ code: `"data": { "plans": [ ... ] },
389
+ "state": { "period": 1 },
390
+ "derived": { "current": { "list": "plans", "indexBy": "period" } }
391
+
392
+ // \u4E4B\u540E\u4EFB\u610F\u8282\u70B9\u91CC\u90FD\u80FD\u7528\uFF1A
393
+ // {{ current.name }} {{ current.price }} {{ current.url }}`
394
+ },
395
+ {
396
+ t: "table",
397
+ head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
398
+ rows: [
399
+ ["list", "`data` \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D"],
400
+ ["indexBy", "`state` \u91CC\u7684\u4E0B\u6807\u5B57\u6BB5\u540D"]
401
+ ]
402
+ }
403
+ ]
404
+ },
405
+ {
406
+ id: "expression",
407
+ title: "9. \u8868\u8FBE\u5F0F\u4E0E\u63D2\u503C",
408
+ blocks: [
409
+ { t: "h3", text: "\u80FD\u8BFB\u5230\u4EC0\u4E48" },
410
+ {
411
+ t: "table",
412
+ head: ["\u53D8\u91CF", "\u6765\u6E90"],
413
+ rows: [
414
+ ["`plans` \u7B49", "`data` \u7684\u5B57\u6BB5\u76F4\u63A5\u63D0\u5230\u9876\u5C42"],
415
+ ["`state.xxx`", "\u5F53\u524D\u5C40\u90E8\u72B6\u6001"],
416
+ ["`user.xxx`", "\u5BBF\u4E3B\u9875\u9762\u6CE8\u5165\u7684\u7528\u6237\u4FE1\u606F\uFF08\u7248\u672C\u3001\u5230\u671F\u5929\u6570\u3001\u5E97\u94FA\u540D\u2026\uFF09\uFF0C\u4E0D\u7528\u53D1\u8BF7\u6C42"],
417
+ ["`current` \u7B49", "`derived` \u63A8\u5BFC\u51FA\u6765\u7684\u522B\u540D"],
418
+ ["`item` / `index`", "\u4EC5\u5728 `repeat` \u7684 `template` \u5185\u53EF\u7528"],
419
+ ["`cd.xxx`", "\u4EC5\u5728 `countdown` \u7684 `children` \u5185\u53EF\u7528"]
420
+ ]
421
+ },
422
+ { t: "h3", text: "\u5728\u54EA\u4E9B\u5730\u65B9\u80FD\u5199 {{ }}" },
423
+ {
424
+ t: "p",
425
+ text: "`content`\u3001`src`\u3001`text`\u3001`to`\u3001**`style` \u7684\u6BCF\u4E2A\u503C**\uFF0C\u4EE5\u53CA\u52A8\u4F5C\u7684 `url` / `event` / `params`\u3002\u6574\u4E32\u6B63\u597D\u662F\u4E00\u4E2A `{{ }}` \u65F6\u8FD4\u56DE\u539F\u59CB\u7C7B\u578B\uFF08\u6570\u5B57\u4ECD\u662F\u6570\u5B57\uFF09\uFF0C\u5426\u5219\u6309\u5B57\u7B26\u4E32\u62FC\u63A5\u3002"
426
+ },
427
+ {
428
+ t: "note",
429
+ tone: "warn",
430
+ text: "`track` \u52A8\u4F5C\u7684 `event` \u867D\u7136\u652F\u6301\u63D2\u503C\uFF0C\u4F46**\u7B97\u51FA\u6765\u7684\u7ED3\u679C\u4ECD\u8981\u7B26\u5408\u4E8B\u4EF6\u540D\u683C\u5F0F**\uFF08\u5C0F\u5199\u5B57\u6BCD / \u6570\u5B57 / \u4E0B\u5212\u7EBF\uFF0C\u89C1\u7B2C 11 \u8282\uFF09\u3002\u7528 `{{ }}` \u62FC\u4E8B\u4EF6\u540D\u65F6\uFF0C\u63D2\u8FDB\u53BB\u7684\u503C\u4E0D\u80FD\u662F\u4E2D\u6587\u6216\u5927\u5199\u2014\u2014\u90A3\u79CD\u683C\u5F0F\u9519\u8BEF\u8981\u5230\u8FD0\u884C\u65F6\u624D\u66B4\u9732\uFF0C\u4FDD\u5B58\u65F6\u6821\u9A8C\u4E0D\u5230\u3002**\u63A8\u8350\u505A\u6CD5\u662F\u4E8B\u4EF6\u540D\u5199\u6B7B\uFF0C\u628A\u53D8\u91CF\u653E\u8FDB `params`**\uFF0C\u8FD9\u6837\u540E\u7AEF\u4E5F\u597D\u805A\u5408\u3002"
431
+ },
432
+ { t: "h3", text: "\u652F\u6301\u7684\u8FD0\u7B97" },
433
+ {
434
+ t: "list",
435
+ items: [
436
+ "\u53D6\u503C\uFF1A`a.b.c`\u3001`a[0]`",
437
+ "\u5B57\u9762\u91CF\uFF1A\u6570\u5B57\u3001\u5B57\u7B26\u4E32\u3001`true` / `false` / `null`",
438
+ "\u4E00\u5143\uFF1A`!` `-`",
439
+ "\u7B97\u672F\uFF1A`+` `-` `*` `/` `%`",
440
+ "\u6BD4\u8F83\uFF1A`==` `!=` `===` `!==` `<` `>` `<=` `>=`",
441
+ "\u903B\u8F91\uFF1A`&&` `||`",
442
+ "\u4E09\u5143\uFF1A`a ? b : c`"
443
+ ]
444
+ },
445
+ {
446
+ t: "note",
447
+ tone: "danger",
448
+ text: "**\u4E0D\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u8D4B\u503C**\uFF0C`constructor` / `__proto__` / `prototype` \u4E5F\u8BFB\u4E0D\u5230\u3002\u8FD9\u662F\u5B89\u5168\u8FB9\u754C\uFF0C\u4E0D\u4F1A\u56E0\u4E3A\u300C\u5C31\u5DEE\u4E00\u70B9\u70B9\u300D\u800C\u653E\u5F00\u3002\u8868\u8FBE\u5F0F\u5199\u9519\u4E0D\u4F1A\u8BA9\u5F39\u7A97\u5D29\u6E83\uFF0C\u53EA\u4F1A\u6C42\u503C\u4E3A\u7A7A\u3002"
449
+ },
450
+ { t: "h3", text: "visibleWhen\uFF1A\u6309\u6761\u4EF6\u663E\u793A" },
451
+ {
452
+ t: "code",
453
+ code: `// \u53EA\u6709\u8C6A\u534E\u7248\u624D\u663E\u793A\u8D60\u54C1\u884C
454
+ { "type": "text", "content": "\u{1F381} {{ current.gift }}",
455
+ "visibleWhen": "current.gift != ''" }
456
+
457
+ // \u53EA\u5BF9\u65B0\u7528\u6237\u663E\u793A
458
+ { "type": "text", "content": "\u65B0\u4EBA\u4E13\u4EAB", "visibleWhen": "user.isNew" }`
459
+ },
460
+ { t: "h3", text: "\u5207 tab \u65F6\u6574\u4F53\u6362\u80A4 / \u6362\u5E03\u5C40" },
461
+ {
462
+ t: "p",
463
+ text: "`style` \u91CC\u7684\u6BCF\u4E2A\u503C\u3001\u4EE5\u53CA `stage` \u7684 `width` / `height` / `style`\uFF0C\u90FD\u80FD\u5199 `{{ }}`\u3002\u628A\u914D\u8272\u3001\u80CC\u666F\u653E\u8FDB data \u7684\u6BCF\u4E00\u9879\u91CC\uFF0C\u5207 tab \u65F6\u6574\u4E2A\u5F39\u7A97\u7684\u80CC\u666F\u3001\u6309\u94AE\u8272\u4F1A\u4E00\u8D77\u53D8\u3002\u6392\u7248\u7ED3\u6784\u5B8C\u5168\u4E0D\u540C\u65F6\uFF0C\u5199\u4E24\u5957\u8282\u70B9\u5404\u914D\u4E00\u4E2A `visibleWhen`\uFF0C\u540C\u4E00\u65F6\u523B\u53EA\u663E\u793A\u4E00\u5957\u3002"
464
+ },
465
+ {
466
+ t: "code",
467
+ code: `"data": { "plans": [
468
+ { "label": "\u5305\u5E74", "theme": "#7B3FF2", "bg": "linear-gradient(160deg,#2b1055,#7597de)", "mode": "grid" },
469
+ { "label": "\u5305\u6708", "theme": "#FF6B35", "bg": "linear-gradient(160deg,#3a1c0c,#ff9a3c)", "mode": "list" }
470
+ ] },
471
+ "state": { "tab": 0 },
472
+ "derived": { "cur": { "list": "plans", "indexBy": "tab" } },
473
+
474
+ // \u5F39\u7A97\u81EA\u5DF1\u7684\u80CC\u666F\u8DDF\u7740\u5207
475
+ "stage": { "layout": "flow", "style": { "background": "{{ cur.bg }}", "radius": 16 } },
476
+
477
+ "nodes": [
478
+ { "type": "tabs", "bind": "plans", "stateKey": "tab" },
479
+ // \u4E24\u5957\u6392\u7248\uFF0C\u53EA\u663E\u793A\u5176\u4E2D\u4E00\u5957
480
+ { "type": "flex", "visibleWhen": "cur.mode == 'grid'", "style": { "direction": "row" }, "children": [] },
481
+ { "type": "flex", "visibleWhen": "cur.mode == 'list'", "style": { "direction": "column" }, "children": [] },
482
+ { "type": "button", "text": "\u5F00\u901A", "style": { "background": "{{ cur.theme }}" } }
483
+ ]`
484
+ }
485
+ ]
486
+ }
487
+ ];
488
+ var data_state_default = sections3;
489
+
490
+ // src/docs/sections/guide-basics.ts
491
+ var sections4 = [
492
+ {
493
+ id: "ai",
494
+ title: "0. \u4E0D\u4F1A\u5199 JSON\uFF1F\u7528 AI \u751F\u6210",
495
+ blocks: [
496
+ {
497
+ t: "p",
498
+ text: "\u8FD9\u4EFD\u6587\u6863\u662F\u7ED9\u300C\u8981\u7406\u89E3\u89C4\u5219\u7684\u4EBA\u300D\u770B\u7684\u3002\u5982\u679C\u4F60\u53EA\u662F\u60F3\u5FEB\u70B9\u505A\u51FA\u4E00\u4E2A\u5F39\u7A97\uFF0C\u4E0D\u7528\u4ECE\u5934\u8BFB\u2014\u2014\u5DE6\u8FB9\u6709\u300C\u590D\u5236 AI \u63D0\u793A\u8BCD\u300D\u6309\u94AE\uFF0C\u8D70\u4E0B\u9762\u56DB\u6B65\u5C31\u884C\u3002"
499
+ },
500
+ {
501
+ t: "list",
502
+ items: [
503
+ "\u70B9\u5DE6\u4FA7 **\u590D\u5236 AI \u63D0\u793A\u8BCD**",
504
+ "\u6253\u5F00\u4EFB\u610F AI\uFF08\u8C46\u5305 / DeepSeek / \u901A\u4E49 / ChatGPT / Claude \u90FD\u884C\uFF09\uFF0C\u7C98\u8D34\u8FDB\u53BB",
505
+ "\u5728\u63D0\u793A\u8BCD\u6700\u540E\u7684\u300C\u7528\u6237\u9700\u6C42\u300D\u90A3\u91CC\uFF0C\u7528\u4E2D\u6587\u5199\u6E05\u695A\u4F60\u8981\u4EC0\u4E48",
506
+ "AI \u4F1A\u56DE\u4E00\u6BB5 JSON\uFF0C\u590D\u5236\u5230\u300C\u8C03\u8BD5\u53F0\u300D\u5DE6\u8FB9\u7684\u7F16\u8F91\u6846\uFF0C\u70B9\u300C\u6E32\u67D3\u300D\u770B\u6548\u679C"
507
+ ]
508
+ },
509
+ { t: "h3", text: "\u9700\u6C42\u600E\u4E48\u63CF\u8FF0" },
510
+ { t: "p", text: "\u8D8A\u5177\u4F53\u8D8A\u7701\u4E8B\u3002\u5EFA\u8BAE\u81F3\u5C11\u8BF4\u6E05\u695A\u8FD9\u4E94\u4EF6\u4E8B\uFF1A" },
511
+ {
512
+ t: "code",
513
+ code: `\u573A\u666F\uFF1A\u8BD5\u7528\u8FD8\u5269 3 \u5929\uFF0C\u63D0\u9192\u7528\u6237\u7EED\u8D39
514
+ \u5F62\u6001\uFF1A\u5F39\u7A97\uFF0C\u5BBD 520\uFF0C\u9AD8\u5EA6\u81EA\u9002\u5E94
515
+ \u5185\u5BB9\uFF1A
516
+ - \u9876\u90E8\u6DF1\u7EA2\u6E10\u53D8\uFF0C\u5DE6\u4E0A\u89D2\u6807\u7B7E\u300C\u23F0 \u8BD5\u7528\u5269 3 \u5929\u300D
517
+ - \u4E0B\u9762 2\xD72 \u56DB\u4E2A\u6570\u636E\u683C\u5B50\uFF1A\u5DF2\u4E0A\u67B6 68 \u4E2A\u5546\u54C1\u3001AI \u4F18\u5316 15 \u6B21\u3001\u767D\u5E95\u56FE 42 \u5F20\u3001\u7ECF\u8425\u4EFB\u52A1 6 \u9879
518
+ - \u767D\u8272\u533A\u57DF\u6807\u9898\u300C3 \u5929\u540E\u8BD5\u7528\u5230\u671F\uFF0C\u4EE5\u4E0B\u80FD\u529B\u4F1A\u505C\u6B62\uFF1A\u300D
519
+ - \u4E09\u6761\u6D41\u5931\u6E05\u5355\uFF08\u6D45\u7EA2\u5E95\u3001\u7EA2\u70B9\u5F00\u5934\uFF09
520
+ - \u56DB\u4E2A\u4EF7\u683C\u6863\u4F4D\u53EF\u4EE5\u70B9\u9009\uFF1A\u6708\u4ED8 \xA515 / \u5B63\u4ED8 \xA532\uFF08\u9ED8\u8BA4\u9009\u4E2D\u3001\u6807"\u63A8\u8350"\uFF09/ \u534A\u5E74 \xA564 / \u5E74\u4ED8 \xA5128
521
+ - \u5E95\u90E8\u7EA2\u8272\u6E10\u53D8\u5927\u6309\u94AE\uFF0C\u6587\u6848\u8DDF\u7740\u9009\u4E2D\u7684\u6863\u4F4D\u53D8
522
+ \u6309\u94AE\u8DF3\u8F6C\uFF1Ahttps://xxx.com/order?p={\u6863\u4F4D}
523
+ \u57CB\u70B9\uFF1A\u70B9\u6863\u4F4D\u4E0A\u62A5 popup_period_select\uFF0C\u70B9\u6309\u94AE\u4E0A\u62A5 popup_renew_click`
524
+ },
525
+ {
526
+ t: "note",
527
+ tone: "warn",
528
+ text: "AI \u751F\u6210\u7684\u914D\u7F6E**\u4E00\u5B9A\u8981\u5728\u8C03\u8BD5\u53F0\u91CC\u6E32\u67D3\u786E\u8BA4**\u518D\u7528\u3002\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u628A\u7EA2\u8272\u9519\u8BEF\u4FE1\u606F\u6574\u6BB5\u8D34\u56DE\u7ED9 AI\uFF0C\u5B83\u4E00\u822C\u4E00\u6B21\u5C31\u80FD\u6539\u5BF9\u3002"
529
+ },
530
+ {
531
+ t: "note",
532
+ tone: "info",
533
+ text: "\u56FE\u7247\u548C\u8DF3\u8F6C\u94FE\u63A5 AI \u7F16\u4E0D\u51FA\u6765\uFF0C\u5B83\u4F1A\u7528\u5360\u4F4D\u5730\u5740\u3002\u8BB0\u5F97\u81EA\u5DF1\u6362\u6210\u771F\u5B9E\u7684\uFF0C\u7136\u540E\u5728\u300C\u771F\u5B9E\u6001\u300D\u6A21\u5F0F\u4E0B\u70B9\u4E00\u904D\u6309\u94AE\uFF0C\u786E\u8BA4\u8DF3\u8F6C\u6B63\u786E\u3002"
534
+ }
535
+ ]
536
+ },
537
+ {
538
+ id: "concept",
539
+ title: "1. \u5148\u7406\u89E3\u4E00\u4EF6\u4E8B",
540
+ blocks: [
541
+ {
542
+ t: "p",
543
+ text: "\u8FD9\u5957 DSL \u7528\u4E00\u6BB5 JSON \u63CF\u8FF0\u5F39\u7A97 / Banner / \u516C\u544A\u957F\u4EC0\u4E48\u6837\u3001\u70B9\u4E86\u4F1A\u600E\u6837\u3002\u5B83\u53D6\u4EE3\u7684\u662F\u300C\u8BA9\u8FD0\u8425\u5199\u4E00\u6BB5 JS \u585E\u8FDB\u9875\u9762\u300D\u7684\u505A\u6CD5\u3002"
544
+ },
545
+ {
546
+ t: "note",
547
+ tone: "danger",
548
+ text: "\u6838\u5FC3\u7EA6\u675F\uFF1A\u914D\u7F6E\u662F\u6570\u636E\uFF0C\u6C38\u8FDC\u4E0D\u80FD\u53D8\u6210\u53EF\u6267\u884C\u4EE3\u7801\u3002\u6240\u4EE5\u8FD9\u91CC\u6CA1\u6709\u51FD\u6570\u8C03\u7528\u3001\u6CA1\u6709\u8D4B\u503C\u3001\u6CA1\u6709 eval\u3002\u4F60\u5728 JSON \u91CC\u5199\u4E0D\u51FA\u300C\u903B\u8F91\u300D\uFF0C\u53EA\u80FD\u5199\u300C\u63CF\u8FF0\u300D\u3002\u9047\u5230\u8868\u8FBE\u4E0D\u4E86\u7684\u9700\u6C42\uFF0C\u5148\u627E\u5BF9\u5E94\u7684\u8282\u70B9\u6216\u5B57\u6BB5\uFF0C\u4E0D\u8981\u60F3\u529E\u6CD5\u7ED5\u8FC7\u53BB\u2014\u2014\u7ED5\u8FC7\u53BB\u7684\u53E3\u5B50\u5C31\u662F\u4E0B\u4E00\u4E2A\u7EBF\u4E0A\u5B89\u5168\u4E8B\u6545\u3002"
549
+ },
550
+ {
551
+ t: "p",
552
+ text: "\u6362\u4E2A\u89D2\u5EA6\u60F3\uFF1A\u6392\u7248\u662F\u6570\u636E\uFF0C\u4E0D\u662F\u903B\u8F91\u3002\u300C\u8FD9\u4E2A\u5F39\u7A97\u957F\u4EC0\u4E48\u6837\u300D\u518D\u590D\u6742\uFF0C\u672C\u8D28\u90FD\u662F\u300C\u54EA\u4E9B\u5143\u7D20\u3001\u653E\u5728\u54EA\u3001\u591A\u5927\u3001\u4EC0\u4E48\u6837\u5F0F\u3001\u70B9\u4E86\u5E72\u561B\u300D\uFF0C\u8FD9\u662F\u4E00\u68F5\u80FD\u88AB JSON \u63CF\u8FF0\u7684\u6811\u3002\u771F\u6B63\u9700\u8981\u4EE3\u7801\u7684\u53EA\u6709\u300C\u65F6\u95F4\u300D\u8FD9\u4E00\u7C7B\u8FD0\u884C\u65F6\u6570\u636E\uFF0C\u90A3\u90E8\u5206\u7531 countdown \u8282\u70B9\u63D0\u4F9B\u3002"
553
+ },
554
+ { t: "h3", text: "\u5199\u4E4B\u524D\u5148\u60F3\u6E05\u695A\u4E09\u4EF6\u4E8B" },
555
+ {
556
+ t: "list",
557
+ items: [
558
+ "\u8FD9\u4E2A\u4E1C\u897F\u662F\u5F39\u7A97\uFF08\u5C45\u4E2D\u6D6E\u5C42\uFF09\u3001Banner \u8FD8\u662F\u516C\u544A\u6761\uFF1F \u2192 \u51B3\u5B9A `type` \u548C `stage.layout`",
559
+ "\u91CC\u9762\u7684\u5185\u5BB9\u662F\u5199\u6B7B\u7684\uFF0C\u8FD8\u662F\u8981\u4ECE\u540E\u7AEF\u53D6\uFF1F \u2192 \u51B3\u5B9A `data` \u7528\u5B57\u9762\u91CF\u8FD8\u662F `$source`",
560
+ "\u7528\u6237\u70B9\u4E86\u4E4B\u540E\u6709\u6CA1\u6709\u300C\u5207\u6362\u300D\u8FD9\u79CD\u5C40\u90E8\u4EA4\u4E92\uFF1F \u2192 \u51B3\u5B9A\u8981\u4E0D\u8981 `state` \u548C `derived`"
561
+ ]
562
+ }
563
+ ]
564
+ },
565
+ {
566
+ id: "structure",
567
+ title: "2. \u9876\u5C42\u7ED3\u6784",
568
+ blocks: [
569
+ {
570
+ t: "code",
571
+ code: `{
572
+ "version": 1, // \u5FC5\u586B\uFF0C\u56FA\u5B9A\u5199 1
573
+ "type": "popup", // popup \u5F39\u7A97 | banner | notice \u516C\u544A\u6761
574
+ "meta": { "name": "\u7EED\u8D39\u5F39\u7A97" }, // \u7ED9\u4EBA\u770B\u7684\u5907\u6CE8\uFF0C\u4E0D\u5F71\u54CD\u6E32\u67D3
575
+
576
+ "stage": { ... }, // \u821E\u53F0\uFF1A\u6574\u4F53\u5C3A\u5BF8\u3001\u906E\u7F69\u3001\u5173\u95ED\u6309\u94AE
577
+ "data": { ... }, // \u6570\u636E\uFF1A\u5199\u6B7B\u7684\uFF0C\u6216\u4ECE\u540E\u7AEF\u6570\u636E\u6E90\u53D6
578
+ "state": { ... }, // \u5C40\u90E8\u72B6\u6001\uFF1A\u6BD4\u5982\u5F53\u524D\u9009\u4E2D\u7B2C\u51E0\u4E2A\u89C4\u683C
579
+ "derived": { ... }, // \u7531 data + state \u63A8\u5BFC\u7684\u522B\u540D
580
+ "nodes": [ ... ] // \u8282\u70B9\u6811\uFF1A\u771F\u6B63\u7684\u6392\u7248\u5185\u5BB9
581
+ }`
582
+ },
583
+ {
584
+ t: "table",
585
+ head: ["\u5B57\u6BB5", "\u5FC5\u586B", "\u8BF4\u660E"],
586
+ rows: [
587
+ [
588
+ "version",
589
+ "\u662F",
590
+ "\u56FA\u5B9A 1\u3002\u4EE5\u540E DSL \u7ED3\u6784\u5927\u6539\u4F1A\u5347\u7248\u672C\uFF0C\u6E32\u67D3\u5668\u6309\u7248\u672C\u8D70\u4E0D\u540C\u5206\u652F\uFF0C\u8001\u914D\u7F6E\u7EE7\u7EED\u80FD\u6E32\u67D3"
591
+ ],
592
+ ["type", "\u662F", "popup / banner / notice\u3002popup \u4F1A\u5E26\u906E\u7F69\u5E76\u5C45\u4E2D\uFF0C\u5176\u4F59\u662F\u666E\u901A\u5757"],
593
+ ["meta", "\u5426", "\u53EA\u653E\u5907\u6CE8\u4FE1\u606F\uFF0C\u6E32\u67D3\u5668\u4E0D\u8BFB"],
594
+ ["stage", "\u662F", "\u821E\u53F0\u914D\u7F6E\uFF0C\u89C1\u7B2C 3 \u8282"],
595
+ ["data", "\u5426", "\u6570\u636E\uFF0C\u89C1\u7B2C 8 \u8282"],
596
+ ["state", "\u5426", "\u5C40\u90E8\u72B6\u6001\uFF0C\u89C1\u7B2C 8 \u8282"],
597
+ ["derived", "\u5426", "\u63A8\u5BFC\u522B\u540D\uFF0C\u89C1\u7B2C 8 \u8282"],
598
+ ["nodes", "\u662F", "\u975E\u7A7A\u6570\u7EC4\uFF0C\u89C1\u7B2C 6 \u8282"]
599
+ ]
600
+ }
601
+ ]
602
+ }
603
+ ];
604
+ var guide_basics_default = sections4;
605
+
606
+ // src/docs/sections/guide-layout.ts
607
+ var sections5 = [
608
+ {
609
+ id: "layout",
610
+ title: "4. \u5E03\u5C40\u6A21\u578B\uFF08\u6700\u91CD\u8981\uFF09",
611
+ blocks: [
612
+ {
613
+ t: "p",
614
+ text: "\u53EA\u6709\u4E24\u79CD\u6392\u5E03\u65B9\u5F0F\u3002\u5199\u4E4B\u524D\u5FC5\u987B\u5148\u660E\u786E\u81EA\u5DF1\u5728\u54EA\u4E00\u79CD\u5BB9\u5668\u91CC\uFF0C\u8FD9\u662F\u9519\u5F97\u6700\u591A\u7684\u5730\u65B9\u3002"
615
+ },
616
+ {
617
+ t: "table",
618
+ head: ["\u6392\u5E03\u65B9\u5F0F", "\u51FA\u73B0\u5728\u54EA", "\u5B50\u8282\u70B9\u600E\u4E48\u5B9A\u4F4D"],
619
+ rows: [
620
+ [
621
+ "\u7EDD\u5BF9\u5B9A\u4F4D",
622
+ "`box` \u7684 children\uFF1B`stage.layout` \u4E3A `absolute` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9",
623
+ "**\u5FC5\u987B**\u5199 `rect: [x, y, w, h]`\uFF0C\u6309\u5750\u6807\u6446"
624
+ ],
625
+ [
626
+ "\u6D41\u5F0F",
627
+ "`flex` / `repeat` / `countdown` \u7684 children\uFF1B`stage.layout` \u4E3A `flow` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9",
628
+ "`rect` \u88AB\u5FFD\u7565\uFF0C\u7528 `style` \u7684 `width` / `height` / `flex` / `padding` / `gap` \u63A7\u5236"
629
+ ]
630
+ ]
631
+ },
632
+ { t: "h3", text: "\u600E\u4E48\u9009" },
633
+ {
634
+ t: "table",
635
+ head: ["\u573A\u666F", "\u914D\u7F6E"],
636
+ rows: [
637
+ [
638
+ "\u5F39\u7A97\uFF1A\u56FA\u5B9A\u753B\u5E03\uFF0C\u5143\u7D20\u6309\u5750\u6807\u6446",
639
+ '`layout: "absolute"`\uFF08\u9ED8\u8BA4\uFF09\uFF0C`height` \u7ED9\u5177\u4F53\u6570\u503C'
640
+ ],
641
+ [
642
+ "\u5F39\u7A97\uFF1A\u4E0A\u4E0B\u51E0\u4E2A\u533A\u5757\u4F9D\u6B21\u6392\uFF08\u591A\u6570\u771F\u5B9E\u5F39\u7A97\uFF09",
643
+ '`layout: "flow"`\uFF0C`height: "auto"`\uFF0C\u6BCF\u4E2A\u533A\u5757\u662F\u4E00\u4E2A `flex` \u8282\u70B9'
644
+ ],
645
+ [
646
+ "\u516C\u544A\u6761 / Banner\uFF1A\u5BBD\u5EA6\u94FA\u6EE1\u7236\u7EA7\uFF0C\u9AD8\u5EA6\u7531\u5185\u5BB9\u6491\u5F00",
647
+ '`layout: "flow"`\uFF0C`width: "100%"`\uFF0C`height: "auto"`'
648
+ ]
649
+ ]
650
+ },
651
+ {
652
+ t: "note",
653
+ tone: "warn",
654
+ text: '`height: "auto"` \u5FC5\u987B\u914D `layout: "flow"`\u3002\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u5B50\u8282\u70B9\u6491\u4E0D\u8D77\u7236\u7EA7\u9AD8\u5EA6\uFF0C\u4F1A\u584C\u6210 0\u3002\u6821\u9A8C\u5C42\u4F1A\u76F4\u63A5\u62E6\u4E0B\u8FD9\u4E2A\u7EC4\u5408\u5E76\u63D0\u793A\u3002'
655
+ },
656
+ { t: "h3", text: "\u4E24\u79CD\u65B9\u5F0F\u53EF\u4EE5\u5D4C\u5957" },
657
+ {
658
+ t: "p",
659
+ text: "\u5E38\u89C1\u5199\u6CD5\uFF1A\u6574\u4F53\u7528 `flow` \u4E00\u5C42\u5C42\u5F80\u4E0B\u6392\uFF0C\u67D0\u4E2A\u9700\u8981\u300C\u89D2\u6807\u538B\u5728\u8FB9\u6846\u5916\u300D\u4E4B\u7C7B\u7CBE\u7EC6\u5B9A\u4F4D\u7684\u5C0F\u5361\u7247\u5355\u72EC\u7528 `box` \u5207\u56DE\u7EDD\u5BF9\u5B9A\u4F4D\u3002"
660
+ },
661
+ {
662
+ t: "code",
663
+ code: `{
664
+ "stage": { "width": 520, "height": "auto", "layout": "flow" },
665
+ "nodes": [
666
+ { "type": "flex", "style": { "direction": "column", "padding": 20 },
667
+ "children": [
668
+ { "type": "text", "content": "\u6807\u9898" },
669
+ { "type": "box", "style": { "width": 120, "height": 100 },
670
+ "children": [
671
+ { "type": "text", "rect": [0, -9, "100%", 20], "content": "\u89D2\u6807" }
672
+ ]
673
+ }
674
+ ]
675
+ }
676
+ ]
677
+ }`
678
+ }
679
+ ]
680
+ },
681
+ {
682
+ id: "length",
683
+ title: "5. \u957F\u5EA6\u5355\u4F4D",
684
+ blocks: [
685
+ {
686
+ t: "p",
687
+ text: "`stage.width/height`\u3001`rect` \u7684\u56DB\u4E2A\u503C\u3001\u4EE5\u53CA `style` \u91CC\u7684\u5C3A\u5BF8\u7C7B\u5C5E\u6027\uFF0C\u63A5\u53D7\u4E0B\u9762\u51E0\u79CD\u5199\u6CD5\uFF1A"
688
+ },
689
+ {
690
+ t: "table",
691
+ head: ["\u5199\u6CD5", "\u4F8B\u5B50", "\u542B\u4E49"],
692
+ rows: [
693
+ ["\u6570\u5B57", "`460`", "\u6309 px \u5904\u7406"],
694
+ ["\u76F8\u5BF9\u5355\u4F4D\u5B57\u7B26\u4E32", '`"100%"` `"2rem"` `"50vw"`', "\u539F\u6837\u4EA4\u7ED9 CSS"],
695
+ ["auto", '`"auto"`', "\u7531\u5185\u5BB9\u6491\u5F00"],
696
+ ["calc", '`"calc(100% - 48px)"`', "\u539F\u6837\u4EA4\u7ED9 CSS"],
697
+ ["CSS \u7B80\u5199", '`"10px 14px"`', "\u7528\u4E8E `padding` / `margin` \u8FD9\u7C7B"],
698
+ ["\u63D2\u503C", '`"{{ quota.pct }}%"`', "\u8FD0\u884C\u65F6\u6C42\u503C\uFF0C\u6821\u9A8C\u65F6\u8DF3\u8FC7"]
699
+ ]
700
+ },
701
+ {
702
+ t: "p",
703
+ text: "\u53D7\u5355\u4F4D\u6821\u9A8C\u7684\u5C5E\u6027\uFF1A`width` `height` `minWidth` `minHeight` `maxWidth` `maxHeight` `radius` `padding` `margin` `marginTop/Bottom/Left/Right` `gap` `fontSize` `letterSpacing` `borderWidth`\u3002"
704
+ },
705
+ {
706
+ t: "note",
707
+ tone: "warn",
708
+ text: '\u5199\u9519\u5355\u4F4D\uFF08`"100pct"` / `"8px;"` / `"50%%"`\uFF09\u5728\u4FDD\u5B58\u524D\u5C31\u4F1A\u88AB\u62E6\u4E0B\u5E76\u6307\u51FA\u5177\u4F53\u4F4D\u7F6E\u3002'
709
+ },
710
+ {
711
+ t: "code",
712
+ code: `// \u5F39\u7A97\u7A84\u5C4F\u8DDF\u7740\u7236\u7EA7\u6536\uFF0C\u6700\u5BBD\u4E0D\u8D85\u8FC7 420
713
+ "stage": { "width": "calc(100% - 48px)", "style": { "maxWidth": 420 } }
714
+
715
+ // \u80CC\u666F\u56FE\u94FA\u6EE1\u821E\u53F0\uFF0C\u821E\u53F0\u5BBD\u5EA6\u53D8\u4E86\u4E0D\u7528\u6539\u914D\u7F6E
716
+ { "type": "image", "rect": [0, 0, "100%", "100%"], "src": "..." }
717
+
718
+ // \u516C\u544A\u6761\uFF1A\u6587\u5B57\u5403\u6389\u5269\u4F59\u5BBD\u5EA6\uFF0C\u6309\u94AE\u56FA\u5B9A\u5BBD
719
+ { "type": "text", "style": { "flex": "1" } }
720
+ { "type": "button", "style": { "width": 64 } }`
721
+ },
722
+ {
723
+ t: "note",
724
+ tone: "info",
725
+ text: '\u767E\u5206\u6BD4\u9AD8\u5EA6\u4F9D\u8D56\u7236\u7EA7\u6709\u786E\u5B9A\u9AD8\u5EA6\u3002`stage.height` \u662F `"auto"` \u65F6\uFF0C\u5B50\u8282\u70B9\u5199 `height: "100%"` \u4E0D\u751F\u6548\u2014\u2014\u8FD9\u662F CSS \u672C\u8EAB\u7684\u89C4\u5219\u3002'
726
+ },
727
+ { t: "h3", text: "aspectRatio\uFF1A\u5BBD\u5EA6\u81EA\u9002\u5E94\u7684\u6574\u56FE Banner \u5FC5\u987B\u7528\u5B83" },
728
+ {
729
+ t: "p",
730
+ text: "Banner \u901A\u5E38\u662F\u300C\u5BBD\u5EA6\u94FA\u6EE1\u3001\u9AD8\u5EA6\u6309\u56FE\u7247\u6BD4\u4F8B\u7B97\u300D\u3002\u4F46\u70ED\u533A\u5BB9\u5668 `box` \u7684\u5B50\u8282\u70B9\u662F\u7EDD\u5BF9\u5B9A\u4F4D\u7684\uFF0C\u6491\u4E0D\u8D77 `box` \u7684\u9AD8\u5EA6\uFF1B`box` \u9AD8\u5EA6\u662F 0\uFF0C\u70ED\u533A\u7684\u767E\u5206\u6BD4 `rect` \u5C31\u5168\u7B97\u6210 0\uFF0C\u6574\u7247\u70ED\u533A\u5931\u6548\u3002\u7ED9\u5BB9\u5668\u5199 `aspectRatio` \u58F0\u660E\u5BBD\u9AD8\u6BD4\uFF0C\u9AD8\u5EA6\u5C31\u7531\u6D4F\u89C8\u5668\u6309\u5F53\u524D\u5BBD\u5EA6\u7B97\u51FA\u6765\u3002"
731
+ },
732
+ {
733
+ t: "code",
734
+ code: `// \u8BBE\u8BA1\u7A3F 1200 \xD7 300\uFF0C\u70ED\u533A\u5750\u6807\u6309\u6BD4\u4F8B\u6362\u7B97\u6210\u767E\u5206\u6BD4
735
+ { "type": "box",
736
+ "style": { "width": "100%", "aspectRatio": "1200 / 300" },
737
+ "children": [
738
+ { "type": "image", "rect": [0, 0, "100%", "100%"], "src": "..." },
739
+ { "type": "box", "rect": ["70%", "58%", "22%", "24%"], "action": {...} }
740
+ ] }`
741
+ },
742
+ {
743
+ t: "note",
744
+ tone: "warn",
745
+ text: "\u5199\u6B7B `height` \u4E5F\u80FD\u8DD1\uFF0C\u4F46\u53EA\u5728\u67D0\u4E00\u4E2A\u5BBD\u5EA6\u4E0B\u70ED\u533A\u5BF9\u5F97\u4E0A\uFF0C\u6362\u4E2A\u5C4F\u5E55\u5BBD\u5EA6\u5C31\u6574\u4F53\u9519\u4F4D\u3002\u53EA\u8981\u5BB9\u5668\u5BBD\u5EA6\u662F\u767E\u5206\u6BD4\uFF0C\u5C31\u8BE5\u7528 `aspectRatio` \u800C\u4E0D\u662F\u56FA\u5B9A\u9AD8\u5EA6\u3002"
746
+ }
747
+ ]
748
+ }
749
+ ];
750
+ var guide_layout_default = sections5;
751
+
752
+ // src/docs/sections/guide-stage.ts
753
+ var sections6 = [
754
+ {
755
+ id: "stage",
756
+ title: "3. stage \u821E\u53F0",
757
+ blocks: [
758
+ {
759
+ t: "code",
760
+ code: `"stage": {
761
+ "width": 520,
762
+ "height": "auto",
763
+ "layout": "flow", // absolute\uFF08\u9ED8\u8BA4\uFF09| flow
764
+ "mask": true, // \u662F\u5426\u6709\u534A\u900F\u660E\u906E\u7F69\uFF0C\u4EC5 popup \u6709\u6548
765
+ "maskClosable": false, // \u70B9\u906E\u7F69\u80FD\u5426\u5173\u95ED
766
+ "closeButton": {
767
+ "show": true,
768
+ "position": "top-right", // top-right | top-left | bottom-center
769
+ "offset": [14, 14]
770
+ },
771
+ "style": { "radius": 18, "maxWidth": 420 }
772
+ }`
773
+ },
774
+ {
775
+ t: "table",
776
+ head: ["\u5B57\u6BB5", "\u9ED8\u8BA4", "\u8BF4\u660E"],
777
+ rows: [
778
+ ["width", "320", "\u6570\u5B57\u6309 px\uFF1B\u4E5F\u53EF\u5199 `100%` / `calc(100% - 48px)`"],
779
+ ["height", "400", '\u6570\u5B57\u6309 px\uFF1B\u5199 `auto` \u65F6\u5FC5\u987B\u540C\u65F6\u8BBE `layout: "flow"`'],
780
+ ["layout", "absolute", "\u5B50\u8282\u70B9\u6392\u5E03\u65B9\u5F0F\uFF0C\u89C1\u7B2C 4 \u8282\u3002\u9009\u9519\u662F\u6700\u5E38\u89C1\u7684\u9519\u8BEF"],
781
+ ["mask", "true", "\u4EC5 popup \u751F\u6548"],
782
+ ["maskClosable", "false", "\u70B9\u906E\u7F69\u5173\u95ED"],
783
+ ["closeButton", "\u65E0", "\u4E0D\u5199\u5C31\u6CA1\u6709\u5173\u95ED\u6309\u94AE"],
784
+ ["style", "\u65E0", "\u821E\u53F0\u81EA\u8EAB\u6837\u5F0F\uFF0C\u5E38\u7528 `radius` / `maxWidth` / `background`"]
785
+ ]
786
+ },
787
+ {
788
+ t: "note",
789
+ tone: "info",
790
+ text: "\u5F39\u7A97\u6BD4\u5C4F\u5E55\u9AD8\u65F6\u4F1A\u81EA\u52A8\u51FA\u73B0\u6EDA\u52A8\uFF0C\u4E0D\u4F1A\u88AB\u88C1\u6389\u3002\u6240\u4EE5\u505A\u957F\u5F39\u7A97\u4E0D\u7528\u62C5\u5FC3\u5C0F\u5C4F\u770B\u4E0D\u5168\uFF0C\u4F46\u4ECD\u5EFA\u8BAE\u63A7\u5236\u5728 700px \u4EE5\u5185\u3002"
791
+ },
792
+ { t: "h3", text: "closeButton \u5173\u95ED\u6309\u94AE" },
793
+ {
794
+ t: "code",
795
+ code: `"closeButton": {
796
+ "show": true,
797
+ "position": "top-right", // top-right | top-left | top-center
798
+ // bottom-right | bottom-left | bottom-center
799
+ "offset": [12, 12], // [x, y]\uFF0C\u76F8\u5BF9\u951A\u70B9\u90A3\u6761\u8FB9\u7684\u8DDD\u79BB
800
+ "size": 26,
801
+ // icon / image \u90FD\u4E0D\u5199\u65F6\uFF0C\u753B\u7684\u662F\u5185\u7F6E\u7684\u77E2\u91CF \xD7 \u56FE\u6807\uFF08\u63A8\u8350\uFF0C\u4E0D\u7528\u914D\uFF09
802
+ "icon": "\u2715", // \u53EF\u9009\uFF1A\u6539\u6210\u6587\u672C\u5B57\u7B26 / emoji
803
+ "image": "https://...", // \u53EF\u9009\uFF1A\u6539\u6210\u56FE\u7247\uFF0C\u5199\u4E86\u5C31\u76D6\u8FC7 icon
804
+ "style": { "background": "rgba(0,0,0,0.35)", "color": "#fff", "fontSize": 18 }
805
+ }`
806
+ },
807
+ {
808
+ t: "table",
809
+ head: ["\u5B57\u6BB5", "\u9ED8\u8BA4", "\u8BF4\u660E"],
810
+ rows: [
811
+ ["show", "true", "\u4E0D\u5199\u6574\u4E2A `closeButton` \u5C31\u6CA1\u6709\u5173\u95ED\u6309\u94AE"],
812
+ ["position", "top-right", "\u951A\u5728\u54EA\u4E2A\u89D2\u3002`*-center` \u4F1A\u6C34\u5E73\u5C45\u4E2D"],
813
+ ["offset", "[8, 8]", "\u76F8\u5BF9\u951A\u70B9\u8FB9\u7684\u8DDD\u79BB\u3002**\u5199\u8D1F\u503C\u5C31\u8DD1\u5230\u5F39\u7A97\u5916\u9762**"],
814
+ ["size", "26", "\u6309\u94AE\u5BBD\u9AD8"],
815
+ [
816
+ "icon",
817
+ "\u65E0\uFF08\u7528\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\uFF09",
818
+ "**\u53EF\u9009\u8986\u76D6\u9879**\u3002\u5199\u4E86\u5C31\u7528\u8FD9\u4E2A\u6587\u672C\u5B57\u7B26 / emoji \u4EE3\u66FF\u5185\u7F6E\u56FE\u6807"
819
+ ],
820
+ ["image", "\u65E0", "\u56FE\u7247\u56FE\u6807\uFF0C\u4F1A\u94FA\u6EE1\u6309\u94AE\uFF08`object-fit: contain`\uFF09"],
821
+ ["style", "\u65E0", "\u8D70 style \u767D\u540D\u5355\uFF0C\u53EF\u6539\u80CC\u666F\u3001\u989C\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\u3001\u9634\u5F71\u7B49"]
822
+ ]
823
+ },
824
+ { t: "h3", text: "\u56FE\u6807\u753B\u4EC0\u4E48\uFF1A\u4E09\u9009\u4E00\uFF0C\u4F18\u5148\u7EA7\u56FA\u5B9A" },
825
+ {
826
+ t: "table",
827
+ head: ["\u4F18\u5148\u7EA7", "\u5199\u6CD5", "\u753B\u51FA\u6765\u662F\u4EC0\u4E48"],
828
+ rows: [
829
+ ["1\uFF08\u6700\u9AD8\uFF09", "\u5199\u4E86 `image`", "\u8FD9\u5F20\u56FE\uFF0C\u94FA\u6EE1\u6309\u94AE"],
830
+ [
831
+ "2",
832
+ "\u6CA1\u5199 `image`\u3001\u5199\u4E86 `icon`",
833
+ "\u8FD9\u4E2A\u6587\u672C\u5B57\u7B26 / emoji\uFF0C\u8DDF\u7740 `style` \u7684 `color` `fontSize` \u8D70"
834
+ ],
835
+ [
836
+ "3\uFF08\u9ED8\u8BA4\uFF09",
837
+ "\u4E24\u4E2A\u90FD\u4E0D\u5199",
838
+ "**\u5185\u7F6E\u7684\u77E2\u91CF \xD7 \u56FE\u6807**\uFF1A\u4E00\u6BB5\u5185\u8054 SVG \u753B\u7684\u4E24\u6761\u4EA4\u53C9\u7EBF\uFF0C\u989C\u8272\u8DDF\u968F `style.color`"
839
+ ]
840
+ ]
841
+ },
842
+ {
843
+ t: "note",
844
+ tone: "info",
845
+ text: "\u9ED8\u8BA4\u56FE\u6807\u4EE5\u524D\u662F `\xD7` \u8FD9\u4E2A\u5B57\u7B26\uFF0C\u73B0\u5728\u6539\u6210\u4E86\u77E2\u91CF\u56FE\u3002\u539F\u56E0\u662F `\xD7`\uFF08U+00D7\uFF09\u7684\u5B57\u5F62\u58A8\u8FF9\u6574\u4F53\u504F\u4E0B\uFF0818px \u5B57\u53F7\u4E0B\u5B9E\u6D4B\u504F 1.85px\uFF09\uFF0C\u653E\u8FDB\u5706\u6309\u94AE\u91CC\u8089\u773C\u53EF\u89C1\u5730\u4E0D\u5C45\u4E2D\uFF0C\u800C\u8FD9\u662F\u5B57\u5F62\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u9760\u5BF9\u9F50\u5C5E\u6027\u8C03\u4E0D\u597D\u3002\u753B\u6210\u7EBF\u4E4B\u540E\u50CF\u7D20\u7EA7\u7CBE\u786E\uFF0C\u7C97\u7EC6\u968F\u6309\u94AE\u5927\u5C0F\u81EA\u52A8\u7F29\u653E\uFF0C\u4E5F\u4E0D\u53D7\u5B57\u4F53\u548C\u5E73\u53F0\u5DEE\u5F02\u5F71\u54CD\u3002"
846
+ },
847
+ {
848
+ t: "note",
849
+ tone: "warn",
850
+ text: '**\u6CA1\u6709\u7279\u6B8A\u8981\u6C42\u5C31\u522B\u5199 `icon`\u3002** \u9ED8\u8BA4\u56FE\u6807\u5DF2\u7ECF\u662F\u5BF9\u9F50\u597D\u7684\uFF0C\u5199\u6210 `"icon": "\xD7"` \u53CD\u800C\u4F1A\u9000\u56DE\u90A3\u4E2A\u504F\u4E0B\u7684\u5B57\u5F62\u3002\u786E\u5B9E\u60F3\u6362\u4E2A\u5F62\u72B6\uFF08\u6BD4\u5982\u6362\u6210 `\u2715`\u3001`\u2716`\u3001emoji\uFF09\u65F6\u624D\u5199\u5B83\u3002'
851
+ },
852
+ { t: "h3", text: "\u628A\u5173\u95ED\u6309\u94AE\u653E\u5230\u5F39\u7A97\u5916\u9762" },
853
+ {
854
+ t: "p",
855
+ text: "\u5706\u89D2\u88C1\u5207\u53EA\u4F5C\u7528\u4E8E\u5F39\u7A97\u5185\u5BB9\uFF0C\u5173\u95ED\u6309\u94AE\u5728\u88C1\u5207\u5C42\u4E4B\u5916\uFF0C\u6240\u4EE5 `offset` \u5199\u8D1F\u503C\u65F6\u4E0D\u4F1A\u88AB\u88C1\u6389\u3002\u4E24\u79CD\u5E38\u89C1\u505A\u6CD5\uFF1A"
856
+ },
857
+ {
858
+ t: "code",
859
+ code: `// \u53F3\u4E0A\u89D2\u5916\u4FA7
860
+ "closeButton": { "position": "top-right", "offset": [-13, -13], "size": 26 }
861
+
862
+ // \u5F39\u7A97\u6B63\u4E0B\u65B9\uFF08\u89C6\u89C9\u66F4\u8F7B\uFF0C\u5E38\u89C1\u4E8E\u56FE\u7247\u578B\u5F39\u7A97\uFF09
863
+ "closeButton": {
864
+ "position": "bottom-center",
865
+ "offset": [0, -46],
866
+ "size": 34,
867
+ "style": { "background": "rgba(0,0,0,0.4)", "borderWidth": 1,
868
+ "borderStyle": "solid", "borderColor": "rgba(255,255,255,0.5)",
869
+ "color": "#fff" }
870
+ }`
871
+ },
872
+ {
873
+ t: "note",
874
+ tone: "warn",
875
+ text: "\u653E\u5230\u5916\u9762\u65F6\u8BB0\u5F97\u7559\u51FA\u7A7A\u95F4\uFF1A\u5F39\u7A97\u56DB\u5468\u6709 20px \u5185\u8FB9\u8DDD\uFF0C\u8D85\u8FC7\u8FD9\u4E2A\u8DDD\u79BB\u5728\u5C0F\u5C4F\u4E0A\u53EF\u80FD\u8D34\u8FB9\u3002\u5728\u8C03\u8BD5\u53F0\u91CC\u628A\u9884\u89C8\u7F29\u653E\u5207\u5230 100% \u786E\u8BA4\u4E00\u4E0B\u3002"
876
+ }
877
+ ]
878
+ }
879
+ ];
880
+ var guide_stage_default = sections6;
881
+
882
+ // src/docs/sections/nodes.ts
883
+ var containerRows = [
884
+ ["box", "\u5BB9\u5668\uFF0Cchildren \u7528 rect \u7EDD\u5BF9\u5B9A\u4F4D", "`children`"],
885
+ [
886
+ "flex",
887
+ "\u5BB9\u5668\uFF0Cchildren \u6309\u6D41\u5F0F\u6392\u5217\u3002\u6700\u5E38\u7528",
888
+ "`children`\uFF1B\u6837\u5F0F\u7528 `direction` `gap` `wrap` `align` `justify`"
889
+ ],
890
+ [
891
+ "repeat",
892
+ "\u7ED1\u5B9A\u6570\u7EC4\u7684 flex \u5BB9\u5668\uFF0C\u6570\u636E\u51E0\u6761\u5C31\u6E32\u67D3\u51E0\u4EFD",
893
+ "`bind` `template` `itemName` `indexName`"
894
+ ]
895
+ ];
896
+ var contentRows = [
897
+ ["text", "\u6587\u672C\u3002\u4E5F\u7528\u6765\u505A\u7EAF\u8272\u5757\u3001\u5706\u70B9\u3001\u6807\u7B7E", "`content`"],
898
+ ["image", "\u56FE\u7247", "`src`"],
899
+ ["button", "\u6309\u94AE\uFF08\u5185\u5BB9\u5C45\u4E2D\u7684\u6587\u672C\u5757\uFF09", "`text`"],
900
+ [
901
+ "tabs",
902
+ "\u9009\u9879\u5361\uFF0C\u70B9\u51FB\u65F6\u5199\u5165 `state[stateKey]`",
903
+ "`bind` `stateKey` `labelField` `itemStyle` `activeItemStyle`"
904
+ ],
905
+ ["countdown", "\u5012\u8BA1\u65F6\uFF0C\u89C1\u7B2C 10 \u8282", "`to` `precision` `as` `children` `format`"]
906
+ ];
907
+ var styleRows = [
908
+ [
909
+ "\u6587\u5B57",
910
+ "`color` `fontSize` `fontWeight` `fontFamily` `lineHeight` `letterSpacing` `textAlign` `textDecoration` `whiteSpace` `fontVariantNumeric`"
911
+ ],
912
+ [
913
+ "\u80CC\u666F",
914
+ "`background` `backgroundImage` `backgroundSize` `backgroundPosition` `backgroundRepeat`"
915
+ ],
916
+ ["\u8FB9\u6846", "`border` `borderColor` `borderWidth` `borderStyle` `radius`"],
917
+ [
918
+ "\u76D2\u6A21\u578B",
919
+ "`padding` `margin` `marginTop` `marginBottom` `marginLeft` `marginRight` `overflow` `opacity` `shadow` `cursor`"
920
+ ],
921
+ ["flex \u5BB9\u5668", "`direction` `gap` `wrap` `align` `justify`"],
922
+ [
923
+ "flex \u5B50\u9879 / \u5C3A\u5BF8",
924
+ "`flex` `alignSelf` `width` `height` `minWidth` `minHeight` `maxWidth` `maxHeight`"
925
+ ],
926
+ ["\u56FE\u7247 / \u6BD4\u4F8B", "`objectFit` `aspectRatio`"]
927
+ ];
928
+ var sections7 = [
929
+ {
930
+ id: "nodes",
931
+ title: "6. \u8282\u70B9\u7C7B\u578B",
932
+ blocks: [
933
+ { t: "p", text: "\u6240\u6709\u8282\u70B9\u90FD\u6709\u8FD9\u51E0\u4E2A\u516C\u5171\u5B57\u6BB5\uFF1A" },
934
+ {
935
+ t: "table",
936
+ head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
937
+ rows: [
938
+ ["id", "\u53EF\u9009\uFF0C\u7ED9\u81EA\u5DF1\u770B\u7684\u6807\u8BC6"],
939
+ ["type", "\u5FC5\u586B\uFF0C\u89C1\u4E0B\u8868"],
940
+ ["rect", "`[x, y, w, h]`\uFF0C\u4EC5\u5728\u7EDD\u5BF9\u5B9A\u4F4D\u5BB9\u5668\u4E2D\u751F\u6548"],
941
+ ["style", "\u6837\u5F0F\uFF0C\u89C1\u7B2C 7 \u8282"],
942
+ ["visibleWhen", "\u8868\u8FBE\u5F0F\uFF0C\u4E3A\u5047\u65F6\u6574\u4E2A\u8282\u70B9\u4E0D\u6E32\u67D3"],
943
+ ["action", "\u70B9\u51FB\u52A8\u4F5C\uFF0C\u89C1\u7B2C 11 \u8282\u3002\u4EFB\u4F55\u8282\u70B9\u90FD\u80FD\u70B9"]
944
+ ]
945
+ },
946
+ { t: "h3", text: "\u5BB9\u5668\u7C7B" },
947
+ { t: "table", head: ["type", "\u8BF4\u660E", "\u5173\u952E\u5B57\u6BB5"], rows: containerRows },
948
+ { t: "h3", text: "\u5185\u5BB9\u7C7B" },
949
+ {
950
+ t: "table",
951
+ head: ["type", "\u8BF4\u660E", "\u5173\u952E\u5B57\u6BB5"],
952
+ // 容器类和内容类合起来才是完整的 NODE_TYPES,所以在这张表末尾对账
953
+ rows: contentRows.concat(
954
+ reconcileRows({
955
+ rows: containerRows.concat(contentRows),
956
+ actual: NODE_TYPES,
957
+ label: "\u65B0\u589E\u8282\u70B9\u7C7B\u578B"
958
+ })
959
+ )
960
+ },
961
+ {
962
+ t: "note",
963
+ tone: "info",
964
+ text: "\u6E32\u67D3\u5668\u9047\u5230\u4E0D\u8BA4\u8BC6\u7684 type \u4F1A\u8DF3\u8FC7\u800C\u4E0D\u662F\u5D29\u6E83\u2014\u2014\u56E0\u4E3A\u540E\u53F0\u914D\u7F6E\u548C\u4EA7\u54C1\u7AEF\u53D1\u7248\u662F\u5F02\u6B65\u7684\uFF0C\u7528\u6237\u6D4F\u89C8\u5668\u91CC\u53EF\u80FD\u8FD8\u662F\u65E7\u7248\u6E32\u67D3\u5668\u3002\u6240\u4EE5\u65B0\u8282\u70B9\u4E0A\u7EBF\u524D\u8981\u786E\u8BA4\u4EA7\u54C1\u7AEF\u7248\u672C\u5DF2\u94FA\u5F00\u3002"
965
+ },
966
+ { t: "h3", text: "repeat\uFF1A\u6570\u91CF\u4E0D\u5B9A\u7684\u5217\u8868" },
967
+ {
968
+ t: "code",
969
+ code: `{
970
+ "type": "repeat",
971
+ "bind": "plans", // data \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D
972
+ "itemName": "item", // \u6A21\u677F\u91CC\u7528 {{ item.xxx }}\uFF0C\u9ED8\u8BA4\u5C31\u662F item
973
+ "indexName": "index", // \u6A21\u677F\u91CC\u7528 {{ index }}
974
+ "style": { "gap": 8, "wrap": true },
975
+ "template": { // \u5355\u4E2A\u6761\u76EE\u957F\u4EC0\u4E48\u6837
976
+ "type": "flex",
977
+ "style": { "width": "calc(50% - 4px)" },
978
+ "children": [
979
+ { "type": "text", "content": "{{ item.name }}" }
980
+ ]
981
+ }
982
+ }`
983
+ },
984
+ {
985
+ t: "note",
986
+ tone: "warn",
987
+ text: "\u540E\u7AEF\u8FD4\u56DE\u7684\u5217\u8868\u5FC5\u987B\u7528 repeat\u3002\u914D\u7F6E\u7684\u65F6\u5019\u4F60\u4E0D\u77E5\u9053\u4F1A\u6709\u51E0\u6761\uFF0C\u5199\u6B7B\u51E0\u4E2A\u8282\u70B9\u4E0A\u7EBF\u5C31\u4F1A\u51FA\u9519\u3002"
988
+ },
989
+ { t: "h3", text: "\u6CA1\u6709\u5217\u8868 / \u5BCC\u6587\u672C\u8282\u70B9" },
990
+ {
991
+ t: "p",
992
+ text: '\u4E00\u884C\u91CC\u6DF7\u6392\u591A\u79CD\u5B57\u53F7\uFF08\u6BD4\u5982\u300C\u5DF2\u8865\u9F50 **42** \u5F20\u300D\u4E09\u79CD\u5B57\u53F7\uFF09\uFF0C\u7528 `flex` + `align: "baseline"` \u653E\u51E0\u4E2A `text` \u8282\u70B9\uFF0C\u4E0D\u9700\u8981\u5BCC\u6587\u672C\u3002\u52A0\u7C97\u540C\u7406\u2014\u2014\u62C6\u6210\u4E24\u4E2A `text`\uFF0C\u4E00\u4E2A `fontWeight: "700"`\u3002'
993
+ }
994
+ ]
995
+ },
996
+ {
997
+ id: "style",
998
+ title: "7. style \u767D\u540D\u5355",
999
+ blocks: [
1000
+ {
1001
+ t: "p",
1002
+ text: "\u53EA\u6709\u767B\u8BB0\u5728\u518C\u7684\u5C5E\u6027\u624D\u4F1A\u751F\u6548\uFF0C\u5199\u522B\u7684\u4F1A\u88AB\u4E22\u5F03\u5E76\u5728\u6821\u9A8C\u65F6\u7ED9\u51FA\u8B66\u544A\u3002\u8FD9\u6837\u80FD\u6321\u4F4F\u901A\u8FC7\u6837\u5F0F\u505A\u7684\u574F\u4E8B\uFF08\u5168\u5C4F\u8986\u76D6\u9493\u9C7C\u3001\u5C42\u7EA7\u8D8A\u6743\u7B49\uFF09\u3002"
1003
+ },
1004
+ {
1005
+ t: "table",
1006
+ head: ["\u5206\u7C7B", "\u5C5E\u6027"],
1007
+ rows: styleRows.concat(
1008
+ reconcileRows({
1009
+ rows: styleRows,
1010
+ actual: ALLOWED_STYLE_KEYS,
1011
+ column: 1,
1012
+ inline: true,
1013
+ label: "\u65B0\u589E\u6837\u5F0F\u5C5E\u6027"
1014
+ })
1015
+ )
1016
+ },
1017
+ { t: "h3", text: "\u51E0\u4E2A\u5BB9\u6613\u8E29\u7684\u70B9" },
1018
+ {
1019
+ t: "list",
1020
+ items: [
1021
+ "`radius` \u4E0D\u662F `borderRadius`\uFF1B`shadow` \u4E0D\u662F `boxShadow`\uFF1B`direction` \u4E0D\u662F `flexDirection`",
1022
+ 'flex \u5217\u5BB9\u5668\u7684\u5B50\u9879\u9ED8\u8BA4\u88AB\u62C9\u6EE1\u6574\u884C\uFF0C\u6807\u7B7E\u7C7B\u5143\u7D20\u8981\u5199 `alignSelf: "flex-start"`',
1023
+ "\u5927\u5B57\u53F7\u6587\u672C\u8981\u663E\u5F0F\u5199 `lineHeight`\uFF0C\u5426\u5219\u9ED8\u8BA4\u884C\u9AD8\u4F1A\u628A\u5BB9\u5668\u6491\u9AD8",
1024
+ '\u9010\u5E27\u53D8\u5316\u7684\u6570\u5B57\uFF08\u5012\u8BA1\u65F6\u5398\u79D2\uFF09\u8981\u5199 `fontVariantNumeric: "tabular-nums"`\uFF0C\u5426\u5219\u6570\u5B57\u4F1A\u6296',
1025
+ "`style` \u7684\u503C\u4E5F\u652F\u6301 `{{ }}` \u63D2\u503C\uFF0C\u9009\u4E2D\u6001\u5C31\u662F\u9760\u8FD9\u4E2A\u505A\u7684"
1026
+ ]
1027
+ },
1028
+ {
1029
+ t: "code",
1030
+ code: `// \u9009\u4E2D\u6001\uFF1A\u8FB9\u6846\u989C\u8272\u8DDF\u7740 state \u53D8
1031
+ "style": {
1032
+ "borderStyle": "solid",
1033
+ "borderWidth": "{{ item.key == current.key ? '2px' : '1px' }}",
1034
+ "borderColor": "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
1035
+ "background": "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}"
1036
+ }`
1037
+ }
1038
+ ]
1039
+ }
1040
+ ];
1041
+ var nodes_default = sections7;
1042
+
1043
+ // src/docs/sections/views.ts
1044
+ var sections8 = [
1045
+ {
1046
+ id: "views",
1047
+ title: "12. \u591A\u89C6\u56FE\uFF08\u4E00\u4EFD\u914D\u7F6E\u91CC\u653E\u51E0\u4E2A\u5F39\u7A97\uFF09",
1048
+ blocks: [
1049
+ {
1050
+ t: "p",
1051
+ text: "\u9ED8\u8BA4\u4E00\u4EFD\u914D\u7F6E\u5C31\u662F\u4E00\u4E2A\u5F39\u7A97\u3002\u8981\u505A\u300C\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u300D\u300C\u4E0D\u518D\u63D0\u9192\u518D\u5F39\u4E2A\u786E\u8BA4\u300D\u300C\u4E3B\u5F39\u7A97\u548C\u8BE6\u60C5\u5C4F\u6765\u56DE\u5207\u300D\u8FD9\u7C7B\uFF0C\u5C31\u7528\u591A\u89C6\u56FE\uFF1A\u628A\u9876\u5C42\u7684 `type` / `stage` / `nodes` \u632A\u8FDB `views`\uFF0C\u518D\u6307\u5B9A `entry`\u3002"
1052
+ },
1053
+ {
1054
+ t: "code",
1055
+ code: `{
1056
+ "version": 1,
1057
+ "entry": "bar", // \u9996\u4E2A\u5C55\u793A\u7684\u89C6\u56FE
1058
+ "data": { ... }, // \u2193 \u8FD9\u4E09\u4E2A\u662F\u5168\u5C40\u5171\u4EAB\u7684
1059
+ "state": { "plan": 0 },
1060
+ "derived": { ... },
1061
+ "views": {
1062
+ "bar": { "type": "notice", "stage": {...}, "nodes": [...] },
1063
+ "renew": { "type": "popup", "stage": {...}, "nodes": [...] },
1064
+ "confirm": { "type": "popup", "stage": {...}, "nodes": [...] }
1065
+ }
1066
+ }`
1067
+ },
1068
+ {
1069
+ t: "note",
1070
+ tone: "info",
1071
+ text: "**`state` \u662F\u5168\u5C40\u5171\u4EAB\u7684**\uFF0C\u8FD9\u662F\u591A\u89C6\u56FE\u6700\u597D\u7528\u7684\u5730\u65B9\uFF1A\u7528\u6237\u5728\u4E3B\u5C4F\u9009\u4E86\u300C\u5B63\u4ED8\u300D\uFF0C\u5F39\u51FA\u6765\u7684\u4E8C\u6B21\u786E\u8BA4\u6846\u76F4\u63A5\u5199 `{{ current.price }}` \u5C31\u80FD\u8BFB\u5230\uFF0C\u4E0D\u7528\u4F20\u53C2\u3002"
1072
+ },
1073
+ { t: "h3", text: "\u600E\u4E48\u5207" },
1074
+ {
1075
+ t: "table",
1076
+ head: ["\u5199\u6CD5", "\u6548\u679C", "\u5178\u578B\u573A\u666F"],
1077
+ rows: [
1078
+ [
1079
+ '`{ "type": "open", "view": "renew" }`',
1080
+ '\u53E0\u4E00\u5C42\uFF0C\u4E0B\u9762\u90A3\u5C42\u8FD8\u5728\uFF08\u9ED8\u8BA4 `mode: "stack"`\uFF09',
1081
+ "\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u3001\u4E8C\u6B21\u786E\u8BA4"
1082
+ ],
1083
+ [
1084
+ '`{ "type": "open", "view": "unlock", "mode": "replace" }`',
1085
+ "\u6362\u6389\u5F53\u524D\u5C42\uFF0C\u5C42\u6570\u4E0D\u53D8",
1086
+ "\u4E3B\u5F39\u7A97 \u2194 \u80FD\u529B\u6E05\u5355\u6765\u56DE\u5207"
1087
+ ],
1088
+ ['`{ "type": "close" }`', "\u5173\u6389\u5F53\u524D\u5C42\uFF0C\u56DE\u5230\u4E0A\u4E00\u5C42", "\u786E\u8BA4\u6846\u7684\u300C\u53D6\u6D88\u300D"],
1089
+ ['`{ "type": "closeAll" }`', "\u51E0\u5C42\u90FD\u5173\u6389", "\u786E\u8BA4\u6846\u7684\u300C\u786E\u5B9A\u300D"]
1090
+ ]
1091
+ },
1092
+ { t: "h3", text: "\u53E0\u52A0\u65F6\u7684\u8868\u73B0" },
1093
+ {
1094
+ t: "list",
1095
+ items: [
1096
+ "**\u53EA\u6709\u6700\u4E0A\u9762\u90A3\u5C42\u753B\u906E\u7F69**\uFF0C\u5426\u5219\u4E24\u5C42\u906E\u7F69\u53E0\u52A0\u4F1A\u660E\u663E\u53D8\u9ED1",
1097
+ "\u4E0B\u9762\u7684\u5C42\u8FD8\u770B\u5F97\u89C1\uFF0C\u4F46\u70B9\u4E0D\u52A8\uFF08\u907F\u514D\u8BEF\u89E6\u540E\u9762\u7684\u6309\u94AE\uFF09",
1098
+ "`notice` / `banner` \u7C7B\u578B\u7684\u89C6\u56FE\u5728\u6587\u6863\u6D41\u91CC\uFF0C\u5F39\u7A97\u53E0\u4E0A\u53BB\u65F6\u5B83\u81EA\u7136\u88AB\u538B\u4F4F\uFF0C\u548C\u771F\u5B9E\u9875\u9762\u4E00\u81F4"
1099
+ ]
1100
+ },
1101
+ {
1102
+ t: "note",
1103
+ tone: "warn",
1104
+ text: "\u7528\u4E86 `views` \u4E4B\u540E\uFF0C`stage` \u548C `nodes` **\u4E0D\u80FD\u518D\u7559\u5728\u9876\u5C42**\uFF0C\u6821\u9A8C\u4F1A\u76F4\u63A5\u62A5\u9519\u3002`open` \u7684 `view` \u540D\u5199\u9519\u4E5F\u4F1A\u5728\u4FDD\u5B58\u524D\u88AB\u62E6\u4E0B\u3002"
1105
+ },
1106
+ { t: "p", text: "\u8C03\u8BD5\u53F0\u7684\u793A\u4F8B \u2464 \u2465 \u5C31\u662F\u8FD9\u4E24\u79CD\u7528\u6CD5\uFF0C\u76F4\u63A5\u7167\u7740\u6539\u6700\u5FEB\u3002" }
1107
+ ]
1108
+ },
1109
+ {
1110
+ id: "validate",
1111
+ title: "13. \u6821\u9A8C",
1112
+ blocks: [
1113
+ { t: "p", text: "\u540C\u4E00\u5957\u6821\u9A8C\u89C4\u5219\u5728\u4E09\u4E2A\u5730\u65B9\u8DD1\uFF0C\u4EFB\u4F55\u4E00\u5904\u4E0D\u8FC7\u90FD\u4E0D\u4F1A\u4E0A\u7EBF\uFF1A" },
1114
+ {
1115
+ t: "list",
1116
+ items: [
1117
+ "\u7F16\u8F91\u5668\uFF1A\u8FB9\u5199\u8FB9\u63D0\u793A \u2014\u2014\u300C\u5DF2\u751F\u6548\u300D",
1118
+ "\u540E\u7AEF\u4FDD\u5B58\u65F6\uFF1A\u4E0D\u4FE1\u4EFB\u524D\u7AEF\uFF0C\u4E5F\u9632\u624B\u5199 JSON \u7ED5\u8FC7\u63A5\u53E3 \u2014\u2014\u300C**\u5F85\u63A5\u5165**\u300D",
1119
+ "\u6E32\u67D3\u5668\u8FD0\u884C\u65F6\uFF1A\u9047\u5230\u4E0D\u8BA4\u8BC6\u7684\u4E1C\u897F\u8DF3\u8FC7\u800C\u4E0D\u662F\u5D29\u6E83 \u2014\u2014\u300C\u5DF2\u751F\u6548\u300D"
1120
+ ]
1121
+ },
1122
+ {
1123
+ t: "note",
1124
+ tone: "warn",
1125
+ text: '\u540E\u7AEF\u90A3\u5C42\u8FD8\u6CA1\u63A5\u3002\u5728\u63A5\u4E0A\u4E4B\u524D\uFF0C**\u7ED5\u8FC7\u540E\u53F0\u9875\u9762\u76F4\u63A5\u8C03\u4FDD\u5B58\u63A5\u53E3\u7684 JSON \u662F\u6CA1\u6709\u6821\u9A8C\u7684**\u3002\u540E\u7AEF\u63A5\u5165\u65B9\u5F0F\uFF1A`import { validate } from "@yaoxiu/marketing-dsl"`\uFF0C\u8FD9\u4E2A\u5305\u662F\u7EAF TS \u65E0\u6846\u67B6\u4F9D\u8D56\uFF0CNode \u91CC\u53EF\u4EE5\u76F4\u63A5\u8DD1\u3002'
1126
+ },
1127
+ { t: "h3", text: "\u5E38\u89C1\u62A5\u9519" },
1128
+ {
1129
+ t: "table",
1130
+ head: ["\u62A5\u9519", "\u539F\u56E0"],
1131
+ rows: [
1132
+ [
1133
+ "\u5904\u4E8E\u7EDD\u5BF9\u5B9A\u4F4D\u5BB9\u5668\u4E2D\uFF0C\u5FC5\u987B\u63D0\u4F9B rect",
1134
+ "\u7236\u7EA7\u662F `box`\uFF0C\u6216 `stage.layout` \u662F `absolute`\u3002\u8865 `rect`\uFF0C\u6216\u628A\u7236\u7EA7\u6539\u6210 `flex`"
1135
+ ],
1136
+ [
1137
+ "height: 'auto' \u9700\u8981\u540C\u65F6\u8BBE\u7F6E stage.layout: 'flow'",
1138
+ "\u7EDD\u5BF9\u5B9A\u4F4D\u6491\u4E0D\u8D77\u9AD8\u5EA6\uFF0C\u89C1\u7B2C 4 \u8282"
1139
+ ],
1140
+ ['"xxx" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6', "\u5355\u4F4D\u5199\u9519\uFF0C\u89C1\u7B2C 5 \u8282"],
1141
+ [
1142
+ "\u6837\u5F0F\u5C5E\u6027\u4E0D\u5728\u767D\u540D\u5355\u5185\uFF08\u8B66\u544A\uFF09",
1143
+ "\u5C5E\u6027\u540D\u5199\u9519\uFF0C\u6216\u7528\u4E86\u672A\u5F00\u653E\u7684 CSS \u5C5E\u6027\uFF0C\u89C1\u7B2C 7 \u8282"
1144
+ ],
1145
+ ['data \u4E2D\u4E0D\u5B58\u5728 "xxx"', "`derived.list` \u6216 `repeat.bind` \u6307\u5411\u4E86\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5"],
1146
+ ["\u8868\u8FBE\u5F0F\u6709\u8BEF", "`visibleWhen` \u91CC\u5199\u4E86\u4E0D\u652F\u6301\u7684\u8BED\u6CD5\uFF0C\u6BD4\u5982\u51FD\u6570\u8C03\u7528"],
1147
+ [
1148
+ "\u57CB\u70B9\u4E8B\u4EF6\u540D\u683C\u5F0F\u4E0D\u5408\u6CD5",
1149
+ "`track` \u7684 `event` \u7528\u4E86\u4E2D\u6587 / \u9A7C\u5CF0 / \u4E2D\u5212\u7EBF\uFF0C\u6216\u957F\u5EA6\u4E0D\u591F\uFF0C\u89C1\u7B2C 11 \u8282"
1150
+ ]
1151
+ ]
1152
+ }
1153
+ ]
1154
+ },
1155
+ {
1156
+ id: "limits",
1157
+ title: "14. \u7EA2\u7EBF",
1158
+ blocks: [
1159
+ { t: "p", text: "\u4E0B\u9762\u8FD9\u4E9B\u662F\u6709\u610F\u4E0D\u505A\u7684\uFF0C\u4E0D\u662F\u8FD8\u6CA1\u505A\u3002\u63D0\u9700\u6C42\u524D\u5148\u770B\u8FD9\u91CC\uFF1A" },
1160
+ {
1161
+ t: "table",
1162
+ head: ["\u505A\u4E0D\u5230\u7684\u4E8B", "\u4E3A\u4EC0\u4E48", "\u8BE5\u600E\u4E48\u529E"],
1163
+ rows: [
1164
+ [
1165
+ "\u5199\u4EFB\u610F JS / \u8868\u8FBE\u5F0F\u91CC\u8C03\u51FD\u6570",
1166
+ "\u914D\u7F6E\u4E00\u65E6\u80FD\u6267\u884C\uFF0C\u8FD0\u8425\u540E\u53F0\u5C31\u6210\u4E86\u7EBF\u4E0A\u9875\u9762\u7684\u6CE8\u5165\u5165\u53E3",
1167
+ "\u627E\u5BF9\u5E94\u7684\u8282\u70B9\u6216\u52A8\u4F5C\uFF1B\u786E\u5B9E\u6CA1\u6709\u5C31\u63D0\u9700\u6C42\u52A0\u8282\u70B9"
1168
+ ],
1169
+ ["\u586B\u4EFB\u610F\u63A5\u53E3\u5730\u5740", "\u8D8A\u6743\u62C9\u6570\u548C SSRF", "\u8BA9\u540E\u7AEF\u6CE8\u518C\u6570\u636E\u6E90\uFF0C\u7F16\u8F91\u5668\u91CC\u9009"],
1170
+ ["\u5199 `javascript:` \u94FE\u63A5", "\u540C\u7B2C\u4E00\u6761", "\u7528 `call` \u52A8\u4F5C\u8C03\u5BBF\u4E3B\u6CE8\u518C\u7684\u65B9\u6CD5"],
1171
+ [
1172
+ "\u7528\u767D\u540D\u5355\u5916\u7684 CSS\uFF08\u5982 `position` / `zIndex`\uFF09",
1173
+ "\u5168\u5C4F\u8986\u76D6\u9493\u9C7C\u3001\u5C42\u7EA7\u8D8A\u6743",
1174
+ "\u7528 `box` + `rect` \u505A\u5B9A\u4F4D"
1175
+ ],
1176
+ [
1177
+ "\u5BCC\u6587\u672C / \u81EA\u5B9A\u4E49 CSS \u7247\u6BB5",
1178
+ "\u4E00\u5F00\u53E3\u5B50\uFF0CDSL \u5C31\u6C89\u6DC0\u4E0D\u4E0B\u6765\u4E86",
1179
+ "\u591A\u5B57\u53F7\u6DF7\u6392\u7528\u591A\u4E2A `text` \u8282\u70B9\uFF0C\u89C1\u7B2C 6 \u8282"
1180
+ ],
1181
+ [
1182
+ "\u81EA\u5DF1\u5B9A\u4E49\u57CB\u70B9\u4E8B\u4EF6\u540D\u7684\u683C\u5F0F",
1183
+ "\u540E\u7AEF\u6309\u524D\u7F00\u805A\u5408\uFF0C\u683C\u5F0F\u4E00\u4E71\u5C31\u6CA1\u6CD5\u5206\u7EC4",
1184
+ "\u6309\u7B2C 11 \u8282\u7684\u683C\u5F0F\u548C `\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C` \u6A21\u5F0F\u8D77\u540D"
1185
+ ]
1186
+ ]
1187
+ },
1188
+ {
1189
+ t: "note",
1190
+ tone: "info",
1191
+ text: "\u8FD9\u5957 DSL \u5DF2\u7ECF\u5B8C\u6574\u590D\u523B\u8FC7\u8FD0\u8425\u90A3\u4EFD\u300C\u7EED\u8D39\u5F39\u7A97 \xB7 \u94FA\u8D27\u9875\u5B9E\u666F demo\u300D\u91CC\u7684\u771F\u5B9E\u5F39\u7A97\uFF0C\u5305\u62EC\u5206\u683C\u5398\u79D2\u5012\u8BA1\u65F6\u3002\u78B0\u5230\u8868\u8FBE\u4E0D\u4E86\u7684\u6392\u7248\uFF0C\u5927\u6982\u7387\u662F\u8282\u70B9\u7528\u6CD5\u95EE\u9898\uFF0C\u5148\u5728\u8C03\u8BD5\u53F0\u91CC\u8BD5\u3002"
1192
+ }
1193
+ ]
1194
+ }
1195
+ ];
1196
+ var views_default = sections8;
1197
+
1198
+ // src/docs/sections/index.ts
1199
+ var sections9 = [].concat(
1200
+ guide_basics_default,
1201
+ // 0~2
1202
+ guide_stage_default,
1203
+ // 3
1204
+ guide_layout_default,
1205
+ // 4~5
1206
+ nodes_default,
1207
+ // 6~7
1208
+ data_state_default,
1209
+ // 8~9
1210
+ countdown_default,
1211
+ // 10
1212
+ action_default,
1213
+ // 11
1214
+ views_default
1215
+ // 12~14
1216
+ );
1217
+ var sections_default = sections9;
1218
+
1219
+ // src/docs/meta.ts
1220
+ var changelog = [
1221
+ {
1222
+ date: "2026-08-18",
1223
+ items: [
1224
+ "\u5F00\u53D1\u6587\u6863\u642C\u8FDB @yaoxiu/marketing-dsl \u5305\uFF0C\u8D70\u5B50\u8DEF\u5F84 @yaoxiu/marketing-dsl/docs \u5F15\u5165\uFF0C\u8DDF\u89E3\u91CA\u5668\u540C\u4ED3\u540C\u7248\u672C\u53D1\u5E03",
1225
+ "\u66F4\u6B63\u5173\u95ED\u6309\u94AE\u9ED8\u8BA4\u56FE\u6807\uFF1A\u9ED8\u8BA4\u662F\u5185\u8054 SVG \u753B\u7684\u4E24\u6761\u7EBF\uFF0C\u4E0D\u662F `\xD7` \u5B57\u7B26\uFF1Bicon \u53D8\u6210\u53EF\u9009\u8986\u76D6\u9879\uFF08\u7B2C 3 \u8282\uFF09",
1226
+ "\u8865\u5145\u57CB\u70B9\u4E8B\u4EF6\u540D\u7684\u547D\u540D\u89C4\u8303\uFF1A\u683C\u5F0F\u4E0D\u5408\u89C4\u4F1A\u5728\u4FDD\u5B58\u524D\u76F4\u63A5\u62A5\u9519\uFF0C\u4E0D\u662F\u8B66\u544A\uFF08\u7B2C 11 \u8282\uFF09",
1227
+ "AI \u63D0\u793A\u8BCD\u4E00\u5E76\u642C\u8FDB\u5305\u91CC\uFF0C\u540C\u6B65\u8865\u4E0A\u57CB\u70B9\u4E8B\u4EF6\u540D\u89C4\u8303\uFF08\u6B63\u6587 + \u81EA\u68C0\u6E05\u5355\uFF09\u2014\u2014AI \u751F\u6210\u4E2D\u6587 / \u9A7C\u5CF0\u4E8B\u4EF6\u540D\u4F1A\u88AB\u6821\u9A8C\u62E6\u4E0B",
1228
+ 'AI \u63D0\u793A\u8BCD\u66F4\u6B63\u5173\u95ED\u6309\u94AE\u5199\u6CD5\uFF1A\u9ED8\u8BA4\u7528\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\uFF0C\u4E0D\u518D\u793A\u8303 `"icon": "\xD7"`',
1229
+ "\u6587\u6863\u4E0D\u518D\u5355\u72EC\u7EF4\u62A4 docVersion\uFF0C\u7248\u672C\u53F7\u8DDF\u5305\u8D70\uFF0C\u53D8\u66F4\u8BB0\u5F55\u6309\u65E5\u671F"
1230
+ ]
1231
+ },
1232
+ {
1233
+ date: "2026-08-17",
1234
+ items: [
1235
+ "\u8BF4\u660E close \u7684\u771F\u5B9E\u8BED\u4E49\uFF1A\u901A\u77E5\u5BBF\u4E3B\u300C\u7528\u6237\u60F3\u5173\u4E86\u300D\uFF0C\u7531\u5BBF\u4E3B\u51B3\u5B9A\u5173\u4E0D\u5173\uFF08\u7B2C 11 \u8282\uFF09",
1236
+ "\u5217\u51FA\u54EA\u4E9B\u573A\u666F\u5BBF\u4E3B\u4F1A\u6536\u5230\u901A\u77E5\u3001\u54EA\u4E9B\u53EA\u662F\u5185\u90E8\u5F39\u6808",
1237
+ "\u63D0\u9192\u300C\u5173\u4E86\u522B\u518D\u51FA\u73B0\u300D\u8981\u914D call\uFF0C\u5149\u9760 close \u53EA\u7BA1\u8FD9\u4E00\u6B21",
1238
+ "\u8865\u5145 onEnd \u8BF4\u660E\uFF1A\u5012\u8BA1\u65F6\u5F52\u96F6\u53EF\u4EE5\u4E0A\u62A5\u57CB\u70B9\u3001\u81EA\u52A8\u5173\u5F39\u7A97\u6216\u6362\u5C4F\uFF08\u7B2C 10 \u8282\uFF09",
1239
+ "onEnd \u6539\u4E3A\u53EA\u5728\u300C\u7528\u6237\u773C\u770B\u7740\u5B83\u5F52\u96F6\u300D\u65F6\u89E6\u53D1\uFF0C\u6253\u5F00\u65F6\u5C31\u5DF2\u8FC7\u671F\u7684\u4E0D\u518D\u89E6\u53D1\uFF0C\u907F\u514D\u6C61\u67D3\u57CB\u70B9",
1240
+ "\u5012\u8BA1\u65F6\u7684 to \u660E\u786E\u652F\u6301\u666E\u901A\u65E5\u671F\u5199\u6CD5\uFF0C\u4E0D\u7528\u5199\u65F6\u95F4\u6233\uFF1A\u300C2026-09-01 18:00\u300D\u300C2026\u5E749\u67081\u65E5 18\u70B9\u300D\u90FD\u884C",
1241
+ "\u4FEE\u590D ISO \u683C\u5F0F\uFF08\u540E\u7AEF\u63A5\u53E3\u7684\u9ED8\u8BA4\u683C\u5F0F\uFF0C\u5982 2026-09-01T18:00:00+08:00\uFF09\u88AB\u89E3\u6790\u6210\u300C\u5DF2\u7ED3\u675F\u300D\u7684\u95EE\u9898",
1242
+ "to \u5199\u6210\u8BC6\u522B\u4E0D\u4E86\u7684\u5185\u5BB9\u4F1A\u5728\u4FDD\u5B58\u524D\u62A5\u9519\uFF0C\u4E0D\u518D\u9759\u9ED8\u663E\u793A\u300C\u5DF2\u7ED3\u675F\u300D",
1243
+ "\u89E3\u91CA\u5668\u62BD\u6210\u72EC\u7ACB\u5305\uFF1A@yaoxiu/marketing-dsl\uFF08\u6838\u5FC3\uFF0C\u7EAF TS \u65E0\u6846\u67B6\u4F9D\u8D56\uFF09+ @yaoxiu/marketing-dsl-vue2\uFF08Vue2 \u6E32\u67D3\u58F3\uFF09",
1244
+ "\u6587\u6863\u91CC\u7684\u8282\u70B9\u7C7B\u578B / \u52A8\u4F5C / \u6837\u5F0F\u767D\u540D\u5355\u4F1A\u8DDF\u89E3\u91CA\u5668\u81EA\u52A8\u5BF9\u8D26\uFF0C\u89E3\u91CA\u5668\u65B0\u589E\u4E86\u800C\u6587\u6863\u6CA1\u5199\u4F1A\u5F53\u573A\u6807\u51FA\u6765",
1245
+ "style \u767D\u540D\u5355\u65B0\u589E aspectRatio\u2014\u2014\u5BBD\u5EA6\u81EA\u9002\u5E94\u7684\u6574\u56FE Banner \u9760\u5B83\u624D\u80FD\u7528\u767E\u5206\u6BD4\u653E\u70ED\u533A\uFF08\u7B2C 5 \u8282\uFF09",
1246
+ "\u65B0\u589E\u793A\u4F8B \u2467 \u6574\u56FE Banner\uFF08\u5BBD\u5EA6\u81EA\u9002\u5E94 + \u70ED\u533A\uFF09",
1247
+ "\u8865\u5145\u516C\u544A\u6761 / Banner \u7684\u5173\u95ED\u5199\u6CD5\uFF1A\u884C\u672B\u653E\u4E00\u4E2A\u5E26 close \u52A8\u4F5C\u7684 text \u8282\u70B9\uFF08\u7B2C 11 \u8282\uFF09",
1248
+ "\u4FEE\u590D\u5185\u5C42\u8282\u70B9\u70B9\u51FB\u4F1A\u5192\u6CE1\u89E6\u53D1\u5916\u5C42\u52A8\u4F5C\u7684\u95EE\u9898\u2014\u2014\u6574\u6761\u516C\u544A\u6761\u53EF\u70B9\u65F6\uFF0C\u70B9 \xD7 \u4F1A\u8FDE\u5E26\u6253\u5F00\u5F39\u7A97",
1249
+ "\u65B0\u589E stage.onShow / stage.onClose \u751F\u547D\u5468\u671F\u52A8\u4F5C\uFF0C\u66DD\u5149\u548C\u5173\u95ED\u4E5F\u80FD\u57CB\u70B9\uFF08\u7B2C 11 \u8282\uFF09",
1250
+ "onClose \u901A\u8FC7 {{ closeReason }} \u533A\u5206\u662F\u70B9 X\u3001\u70B9\u906E\u7F69\u3001close \u52A8\u4F5C\u8FD8\u662F\u88AB replace \u9876\u6389"
1251
+ ]
1252
+ },
1253
+ {
1254
+ date: "2026-08-14",
1255
+ items: [
1256
+ "stage \u7684 width / height / style \u4E5F\u652F\u6301 {{ }}\uFF0C\u5207 tab \u65F6\u5F39\u7A97\u672C\u8EAB\u7684\u80CC\u666F\u3001\u5706\u89D2\u80FD\u8DDF\u7740\u53D8\uFF08\u7B2C 11 \u8282\uFF09",
1257
+ "\u8865\u5145\u300C\u5207 tab \u6362\u80A4 / \u6362\u5E03\u5C40\u300D\u5199\u6CD5\uFF1A\u914D\u8272\u653E\u8FDB data\uFF0C\u6392\u7248\u5DEE\u5F02\u7528\u4E24\u5957\u8282\u70B9 + visibleWhen",
1258
+ "\u65B0\u589E\u793A\u4F8B \u2466 \u5207 tab \u6362\u80A4\u6362\u5E03\u5C40\uFF1B\u793A\u4F8B \u2460 \u6269\u6210 5 \u4E2A\u70ED\u533A\uFF0C\u6F14\u793A\u591A\u70ED\u533A\u5404\u81EA\u7ED1\u4E0D\u540C\u52A8\u4F5C"
1259
+ ]
1260
+ },
1261
+ {
1262
+ date: "2026-08-13",
1263
+ items: [
1264
+ "\u65B0\u589E\u591A\u89C6\u56FE\uFF1A\u4E00\u4EFD\u914D\u7F6E\u53EF\u653E\u591A\u4E2A\u89C6\u56FE\uFF08views + entry\uFF09\uFF0C\u652F\u6301\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u3001\u4E8C\u6B21\u786E\u8BA4\u3001\u5C4F\u95F4\u5207\u6362\uFF08\u7B2C 12 \u8282\uFF09",
1265
+ "\u65B0\u589E\u52A8\u4F5C open\uFF08stack / replace\uFF09\u548C closeAll\uFF1Bclose \u6539\u4E3A\u300C\u5173\u6389\u5F53\u524D\u5C42\u300D",
1266
+ "\u53EA\u6709\u6808\u9876\u90A3\u5C42\u753B\u906E\u7F69\uFF0C\u4E0B\u5C42\u53EF\u89C1\u4F46\u4E0D\u53EF\u70B9\u51FB",
1267
+ "\u5355\u89C6\u56FE\u914D\u7F6E\u5B8C\u5168\u5411\u540E\u517C\u5BB9\uFF0C\u4E0D\u5199 views \u5C31\u548C\u4EE5\u524D\u4E00\u6837",
1268
+ "\u65B0\u589E\u300C\u7528 AI \u751F\u6210\u914D\u7F6E\u300D\u4E00\u8282\uFF0C\u5E76\u652F\u6301\u5BFC\u51FA / \u590D\u5236\u4E13\u95E8\u7ED9 AI \u7684\u63D0\u793A\u8BCD"
1269
+ ]
1270
+ },
1271
+ {
1272
+ date: "2026-08-12",
1273
+ items: [
1274
+ "\u9996\u7248\uFF1A\u8282\u70B9\u3001\u6837\u5F0F\u3001\u8868\u8FBE\u5F0F\u3001\u6570\u636E\u6E90\u3001\u52A8\u4F5C\u3001\u6821\u9A8C\u89C4\u5219",
1275
+ "closeButton \u652F\u6301 icon / image / size / style \u81EA\u5B9A\u4E49\uFF0Coffset \u5199\u8D1F\u503C\u53EF\u653E\u5230\u5F39\u7A97\u5916\u9762\uFF08\u7B2C 3 \u8282\uFF09",
1276
+ "countdown \u6539\u4E3A\u4F5C\u7528\u57DF\u5BB9\u5668\uFF0C\u5206\u683C\u6570\u5B57\u548C\u5398\u79D2\u52A8\u753B\u7531 children \u81EA\u884C\u6392\u7248\uFF08\u7B2C 10 \u8282\uFF09"
1277
+ ]
1278
+ }
1279
+ ];
1280
+ var meta = {
1281
+ updatedAt: changelog[0].date,
1282
+ dslVersion: DSL_VERSION,
1283
+ changelog
1284
+ };
1285
+ var meta_default = meta;
1286
+
1287
+ // src/docs/examples/renew-expire.ts
1288
+ var ORANGE = "linear-gradient(90deg,#ff7a00,#faad14)";
1289
+ var achieveCell = {
1290
+ type: "flex",
1291
+ style: {
1292
+ direction: "column",
1293
+ width: "calc(50% - 5px)",
1294
+ background: "rgba(255,255,255,0.16)",
1295
+ borderWidth: 1,
1296
+ borderStyle: "solid",
1297
+ borderColor: "rgba(255,255,255,0.2)",
1298
+ radius: 10,
1299
+ padding: "10px 13px",
1300
+ gap: 3
1301
+ },
1302
+ children: [
1303
+ {
1304
+ // 三种字号同排:靠 flex + baseline 对齐,不需要富文本
1305
+ // lineHeight 必须显式给,否则 20px 数字的默认行高会把格子撑高
1306
+ type: "flex",
1307
+ style: { align: "baseline", gap: 3, height: 22 },
1308
+ children: [
1309
+ {
1310
+ type: "text",
1311
+ content: "{{ item.v }}",
1312
+ style: {
1313
+ fontSize: 11.5,
1314
+ fontWeight: "600",
1315
+ lineHeight: 1.1,
1316
+ color: "rgba(255,255,255,0.92)"
1317
+ }
1318
+ },
1319
+ {
1320
+ type: "text",
1321
+ content: "{{ item.n }}",
1322
+ style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
1323
+ },
1324
+ {
1325
+ type: "text",
1326
+ content: "{{ item.u }}",
1327
+ style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
1328
+ }
1329
+ ]
1330
+ },
1331
+ {
1332
+ type: "text",
1333
+ content: "{{ item.l }}",
1334
+ style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
1335
+ }
1336
+ ]
1337
+ };
1338
+ var loseRow = {
1339
+ type: "flex",
1340
+ style: { align: "center", gap: 8, padding: "8px 0" },
1341
+ children: [
1342
+ {
1343
+ type: "text",
1344
+ content: "",
1345
+ style: { width: 6, height: 6, radius: "50%", background: "#f53f3f" }
1346
+ },
1347
+ {
1348
+ type: "flex",
1349
+ style: { align: "baseline", flex: "1" },
1350
+ children: [
1351
+ {
1352
+ type: "text",
1353
+ content: "{{ item.b }}",
1354
+ style: { fontSize: 12.5, fontWeight: "700", color: "#3f4656" }
1355
+ },
1356
+ {
1357
+ type: "text",
1358
+ content: " \u2014 {{ item.t }}",
1359
+ style: { fontSize: 12.5, color: "#4a4038" }
1360
+ }
1361
+ ]
1362
+ }
1363
+ ]
1364
+ };
1365
+ var tierCard = {
1366
+ type: "box",
1367
+ style: {
1368
+ flex: "1",
1369
+ height: 121,
1370
+ radius: 12,
1371
+ background: "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}",
1372
+ borderStyle: "solid",
1373
+ borderWidth: "{{ item.key == current.key ? '2px' : '1px' }}",
1374
+ borderColor: "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
1375
+ cursor: "pointer"
1376
+ },
1377
+ action: {
1378
+ type: "sequence",
1379
+ actions: [
1380
+ { type: "setState", key: "period", value: "{{ index }}" },
1381
+ {
1382
+ type: "track",
1383
+ event: "popup_period_select",
1384
+ params: { period: "{{ item.key }}" }
1385
+ }
1386
+ ]
1387
+ },
1388
+ children: [
1389
+ {
1390
+ type: "text",
1391
+ // 负 top 让角标压到卡片上边框外面;选中态 2px 边框,所以是 -9 不是 -7
1392
+ rect: ["calc(50% - 19px)", -9, 38, 22],
1393
+ content: "\u63A8\u8350",
1394
+ visibleWhen: "item.hot",
1395
+ style: {
1396
+ background: ORANGE,
1397
+ color: "#ffffff",
1398
+ fontSize: 11,
1399
+ fontWeight: "800",
1400
+ radius: 6,
1401
+ textAlign: "center",
1402
+ lineHeight: 22
1403
+ }
1404
+ },
1405
+ {
1406
+ type: "text",
1407
+ rect: [0, 12, "100%", 19],
1408
+ content: "{{ item.p }}",
1409
+ style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
1410
+ },
1411
+ {
1412
+ type: "flex",
1413
+ rect: [0, 34, "100%", 26],
1414
+ style: { justify: "center", align: "baseline" },
1415
+ children: [
1416
+ {
1417
+ type: "text",
1418
+ content: "\xA5",
1419
+ style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
1420
+ },
1421
+ {
1422
+ type: "text",
1423
+ content: "{{ item.price }}",
1424
+ style: { fontSize: 21, fontWeight: "800", color: "#1f2533" }
1425
+ }
1426
+ ]
1427
+ },
1428
+ {
1429
+ type: "text",
1430
+ rect: [4, 63, "calc(100% - 8px)", 32],
1431
+ content: "{{ item.per }}",
1432
+ style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
1433
+ },
1434
+ {
1435
+ type: "text",
1436
+ rect: [0, 98, "100%", 15],
1437
+ content: "{{ item.flag }}",
1438
+ visibleWhen: "item.flag != ''",
1439
+ style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
1440
+ }
1441
+ ]
1442
+ };
1443
+ var renewExpire = {
1444
+ version: 1,
1445
+ type: "popup",
1446
+ meta: { name: "\u8BD5\u7528\u5269 3 \u5929 \xB7 \u5230\u671F\u4E13\u4EAB\uFF08\u590D\u523B\u8FD0\u8425 demo\uFF09" },
1447
+ stage: {
1448
+ width: 520,
1449
+ height: "auto",
1450
+ layout: "flow",
1451
+ mask: true,
1452
+ maskClosable: false,
1453
+ closeButton: { show: true, position: "top-right", offset: [14, 14] },
1454
+ style: { radius: 18 }
1455
+ },
1456
+ data: {
1457
+ achieve: [
1458
+ { v: "\u5DF2\u8865\u9F50", n: "42", u: " \u5F20", l: "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8" },
1459
+ { v: "\u5DF2\u8865\u9F50", n: "34", u: " \u6761", l: "\u5BFC\u8D2D\u77ED\u6807\u9898 \xB7 \u63D0\u70B9\u51FB" },
1460
+ { v: "\u8FD0\u884C", n: "6", u: " \u9879", l: "\u7ECF\u8425\u4EFB\u52A1\uFF08\u5546\u54C1\u4F18\u5316/\u6D41\u91CF\u589E\u957F\uFF09" },
1461
+ { v: "\u5DF2\u4E0A\u67B6", n: "68", u: " \u4E2A", l: "\u7D2F\u8BA1\u4E0A\u67B6\u5546\u54C1" }
1462
+ ],
1463
+ lose: [
1464
+ { b: "\u6279\u91CF\u642C\u5BB6\u4E0A\u8D27", t: "\u5230\u671F\u540E\u65E0\u6CD5\u7EE7\u7EED\u4E0A\u8D27" },
1465
+ { b: "6 \u9879\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1", t: "\u767D\u5E95\u56FE / \u77ED\u6807\u9898\u8865\u9F50\u3001\u4F4E\u6548\u54C1\u8BCA\u65AD\u4F18\u5316" },
1466
+ { b: "\u65B0\u4EBA\u9996\u8D2D\u4EF7", t: "\u5230\u671F\u6062\u590D\u539F\u4EF7 \xA520/\u6708" }
1467
+ ],
1468
+ // 价格档位从后端数据源取:$source 是后端注册过的名字,不是接口地址。
1469
+ // 后端返回几档就渲染几档,配置时不用知道数量(见下面的 repeat)。
1470
+ tiers: { $source: "listRenewTiers", params: { scene: "trial_expire" } }
1471
+ },
1472
+ state: { period: 1 },
1473
+ derived: { current: { list: "tiers", indexBy: "period" } },
1474
+ nodes: [
1475
+ // ===== 深色渐变头部 =====
1476
+ {
1477
+ type: "flex",
1478
+ style: {
1479
+ direction: "column",
1480
+ background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
1481
+ padding: "20px 22px 16px",
1482
+ gap: 13
1483
+ },
1484
+ children: [
1485
+ {
1486
+ type: "text",
1487
+ content: "\u23F0 \u8BD5\u7528\u5269 {{ user.trialLeftDays }} \u5929",
1488
+ style: {
1489
+ // 不写 alignSelf 会被 flex 列拉满整行,标签必须按内容宽度
1490
+ alignSelf: "flex-start",
1491
+ background: "rgba(255,255,255,0.18)",
1492
+ color: "#ffffff",
1493
+ fontSize: 12,
1494
+ fontWeight: "700",
1495
+ radius: 6,
1496
+ padding: "5px 10px"
1497
+ }
1498
+ },
1499
+ {
1500
+ type: "repeat",
1501
+ bind: "achieve",
1502
+ style: { gap: 9, wrap: true },
1503
+ template: achieveCell
1504
+ }
1505
+ ]
1506
+ },
1507
+ // ===== 白色 body =====
1508
+ {
1509
+ type: "flex",
1510
+ style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
1511
+ children: [
1512
+ {
1513
+ type: "text",
1514
+ content: "{{ user.trialLeftDays }} \u5929\u540E\u8BD5\u7528\u5230\u671F\uFF0C\u4EE5\u4E0B\u80FD\u529B\u4F1A\u505C\u6B62\uFF1A",
1515
+ style: { fontSize: 15, fontWeight: "800", color: "#1f2533", marginBottom: 11 }
1516
+ },
1517
+ {
1518
+ type: "repeat",
1519
+ bind: "lose",
1520
+ template: loseRow,
1521
+ style: {
1522
+ direction: "column",
1523
+ background: "#ffe9e6",
1524
+ borderWidth: 1,
1525
+ borderStyle: "solid",
1526
+ borderColor: "#ffd0ca",
1527
+ radius: 12,
1528
+ padding: "7px 13px"
1529
+ }
1530
+ },
1531
+ {
1532
+ type: "flex",
1533
+ style: { align: "center", gap: 8, marginTop: 17, marginBottom: 9 },
1534
+ children: [
1535
+ {
1536
+ type: "text",
1537
+ content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
1538
+ style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
1539
+ },
1540
+ {
1541
+ type: "text",
1542
+ content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
1543
+ style: {
1544
+ alignSelf: "center",
1545
+ background: ORANGE,
1546
+ color: "#ffffff",
1547
+ fontSize: 11,
1548
+ fontWeight: "800",
1549
+ radius: 5,
1550
+ padding: "2px 8px"
1551
+ }
1552
+ }
1553
+ ]
1554
+ },
1555
+ { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard },
1556
+ {
1557
+ type: "flex",
1558
+ style: {
1559
+ justify: "center",
1560
+ align: "center",
1561
+ gap: 5,
1562
+ height: 52,
1563
+ radius: 11,
1564
+ background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
1565
+ marginTop: 15,
1566
+ cursor: "pointer"
1567
+ },
1568
+ action: {
1569
+ type: "sequence",
1570
+ actions: [
1571
+ {
1572
+ type: "track",
1573
+ event: "popup_renew_click",
1574
+ params: { period: "{{ current.key }}" }
1575
+ },
1576
+ { type: "navigate", url: "{{ current.url }}" }
1577
+ ]
1578
+ },
1579
+ children: [
1580
+ {
1581
+ type: "text",
1582
+ content: "\u4FDD\u4F4F\u5546\u54C1 \xB7",
1583
+ style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
1584
+ },
1585
+ {
1586
+ type: "text",
1587
+ content: "{{ current.p }} \xA5{{ current.price }}",
1588
+ style: { fontSize: 15, fontWeight: "800", color: "#ffffff" }
1589
+ }
1590
+ ]
1591
+ },
1592
+ {
1593
+ type: "text",
1594
+ content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
1595
+ style: {
1596
+ fontSize: 12.5,
1597
+ color: "#8a909c",
1598
+ textAlign: "center",
1599
+ marginTop: 11,
1600
+ cursor: "pointer"
1601
+ },
1602
+ action: { type: "track", event: "popup_more_plans" }
1603
+ }
1604
+ ]
1605
+ }
1606
+ ]
1607
+ };
1608
+ var renew_expire_default = renewExpire;
1609
+
1610
+ // src/docs/examples/last-day.ts
1611
+ var ORANGE2 = "linear-gradient(90deg,#ff7a00,#faad14)";
1612
+ var cdBlock = (content, extra) => ({
1613
+ type: "text",
1614
+ content,
1615
+ style: Object.assign(
1616
+ {
1617
+ width: 42,
1618
+ height: 29,
1619
+ background: "rgba(255,255,255,0.14)",
1620
+ borderWidth: 1,
1621
+ borderStyle: "solid",
1622
+ borderColor: "rgba(255,255,255,0.16)",
1623
+ radius: 7,
1624
+ color: "#ffffff",
1625
+ fontSize: 18,
1626
+ fontWeight: "800",
1627
+ lineHeight: 29,
1628
+ textAlign: "center",
1629
+ // 厘秒每帧都在变,不等宽会左右抖
1630
+ fontVariantNumeric: "tabular-nums"
1631
+ },
1632
+ extra
1633
+ )
1634
+ });
1635
+ var cdSeparator = (content) => ({
1636
+ type: "text",
1637
+ content,
1638
+ style: { fontSize: 13, fontWeight: "800", color: "rgba(255,255,255,0.7)" }
1639
+ });
1640
+ var achieveCell2 = {
1641
+ type: "flex",
1642
+ style: {
1643
+ direction: "column",
1644
+ width: "calc(50% - 5px)",
1645
+ background: "rgba(255,255,255,0.16)",
1646
+ borderWidth: 1,
1647
+ borderStyle: "solid",
1648
+ borderColor: "rgba(255,255,255,0.2)",
1649
+ radius: 10,
1650
+ padding: "10px 13px",
1651
+ gap: 3
1652
+ },
1653
+ children: [
1654
+ {
1655
+ type: "flex",
1656
+ style: { align: "baseline", gap: 3, height: 22 },
1657
+ children: [
1658
+ {
1659
+ type: "text",
1660
+ content: "{{ item.v }}",
1661
+ style: {
1662
+ fontSize: 11.5,
1663
+ fontWeight: "600",
1664
+ lineHeight: 1.1,
1665
+ color: "rgba(255,255,255,0.92)"
1666
+ }
1667
+ },
1668
+ {
1669
+ type: "text",
1670
+ content: "{{ item.n }}",
1671
+ style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
1672
+ },
1673
+ {
1674
+ type: "text",
1675
+ content: "{{ item.u }}",
1676
+ style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
1677
+ }
1678
+ ]
1679
+ },
1680
+ {
1681
+ type: "text",
1682
+ content: "{{ item.l }}",
1683
+ style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
1684
+ }
1685
+ ]
1686
+ };
1687
+ var loseRow2 = {
1688
+ type: "flex",
1689
+ style: { align: "flex-start", gap: 10, padding: "7px 0" },
1690
+ children: [
1691
+ {
1692
+ type: "text",
1693
+ content: "",
1694
+ style: { width: 6, height: 6, radius: "50%", background: "#f53f3f", marginTop: 7 }
1695
+ },
1696
+ {
1697
+ type: "flex",
1698
+ style: { align: "baseline", gap: 4, wrap: true, flex: "1" },
1699
+ children: [
1700
+ {
1701
+ type: "text",
1702
+ content: "{{ item.b }}",
1703
+ style: {
1704
+ fontSize: 12.5,
1705
+ fontWeight: "700",
1706
+ lineHeight: 1.55,
1707
+ color: "#1f2533"
1708
+ }
1709
+ },
1710
+ {
1711
+ type: "text",
1712
+ content: "{{ item.tag }}",
1713
+ visibleWhen: "item.tag != ''",
1714
+ style: {
1715
+ background: "{{ item.sev == 'lose' ? '#ffd5cf' : 'rgba(255,255,255,0.78)' }}",
1716
+ color: "{{ item.sev == 'lose' ? '#cf1322' : '#8a7f78' }}",
1717
+ fontSize: 10,
1718
+ fontWeight: "800",
1719
+ radius: 4,
1720
+ padding: "1px 6px",
1721
+ whiteSpace: "nowrap"
1722
+ }
1723
+ },
1724
+ {
1725
+ type: "text",
1726
+ content: "\u2014 {{ item.t }}",
1727
+ style: { fontSize: 12.5, lineHeight: 1.55, color: "#4a4038" }
1728
+ }
1729
+ ]
1730
+ }
1731
+ ]
1732
+ };
1733
+ var tierCard2 = {
1734
+ type: "box",
1735
+ style: {
1736
+ flex: "1",
1737
+ height: 121,
1738
+ radius: 12,
1739
+ background: "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}",
1740
+ borderStyle: "solid",
1741
+ borderWidth: "{{ item.key == current.key ? '2px' : '1px' }}",
1742
+ borderColor: "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
1743
+ cursor: "pointer"
1744
+ },
1745
+ action: {
1746
+ type: "sequence",
1747
+ actions: [
1748
+ { type: "setState", key: "period", value: "{{ index }}" },
1749
+ {
1750
+ type: "track",
1751
+ event: "popup_period_select",
1752
+ params: { period: "{{ item.key }}" }
1753
+ }
1754
+ ]
1755
+ },
1756
+ children: [
1757
+ {
1758
+ type: "text",
1759
+ rect: ["calc(50% - 19px)", -9, 38, 22],
1760
+ content: "\u63A8\u8350",
1761
+ visibleWhen: "item.hot",
1762
+ style: {
1763
+ background: ORANGE2,
1764
+ color: "#ffffff",
1765
+ fontSize: 11,
1766
+ fontWeight: "800",
1767
+ radius: 6,
1768
+ textAlign: "center",
1769
+ lineHeight: 22
1770
+ }
1771
+ },
1772
+ {
1773
+ type: "text",
1774
+ rect: [0, 12, "100%", 19],
1775
+ content: "{{ item.p }}",
1776
+ style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
1777
+ },
1778
+ {
1779
+ type: "flex",
1780
+ rect: [0, 34, "100%", 26],
1781
+ style: { justify: "center", align: "baseline" },
1782
+ children: [
1783
+ {
1784
+ type: "text",
1785
+ content: "\xA5",
1786
+ style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
1787
+ },
1788
+ {
1789
+ type: "text",
1790
+ content: "{{ item.price }}",
1791
+ style: { fontSize: 21, fontWeight: "800", color: "#1f2533" }
1792
+ }
1793
+ ]
1794
+ },
1795
+ {
1796
+ type: "text",
1797
+ rect: [4, 63, "calc(100% - 8px)", 32],
1798
+ content: "{{ item.per }}",
1799
+ style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
1800
+ },
1801
+ {
1802
+ type: "text",
1803
+ rect: [0, 98, "100%", 15],
1804
+ content: "{{ item.flag }}",
1805
+ visibleWhen: "item.flag != ''",
1806
+ style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
1807
+ }
1808
+ ]
1809
+ };
1810
+ var lastDay = {
1811
+ version: 1,
1812
+ type: "popup",
1813
+ meta: { name: "\u5269 1 \u5929 \xB7 \u6700\u540E\u4E00\u9053\uFF08\u542B\u5398\u79D2\u5012\u8BA1\u65F6\uFF09" },
1814
+ stage: {
1815
+ width: 520,
1816
+ height: "auto",
1817
+ layout: "flow",
1818
+ mask: true,
1819
+ maskClosable: false,
1820
+ closeButton: { show: true, position: "top-right", offset: [14, 14] },
1821
+ style: { radius: 18 }
1822
+ },
1823
+ data: {
1824
+ achieve: [
1825
+ { v: "\u5DF2\u4E0A\u67B6", n: "118", u: " \u4E2A", l: "\u7D2F\u8BA1\u4E0A\u67B6\u5546\u54C1" },
1826
+ { v: "\u8FD0\u884C", n: "6", u: " \u9879", l: "\u7ECF\u8425\u4EFB\u52A1\uFF08\u5546\u54C1\u4F18\u5316/\u6D41\u91CF\u589E\u957F\uFF09" },
1827
+ { v: "\u5DF2\u8865\u9F50", n: "42", u: " \u5F20", l: "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8" },
1828
+ { v: "\u5B8C\u6210", n: "31", u: " \u6B21", l: "\u6807\u9898\u4E3B\u56FE\u81EA\u52A8\u91CD\u505A" }
1829
+ ],
1830
+ lose: [
1831
+ {
1832
+ b: "118 \u4E2A\u5546\u54C1\u7684\u5168\u90E8\u4F18\u5316\u8BB0\u5F55",
1833
+ tag: "\u5C06\u51BB\u7ED3",
1834
+ sev: "lose",
1835
+ t: "\u5230\u671F\u51BB\u7ED3\uFF0C\u903E\u671F\u5F7B\u5E95\u6E05\u7A7A"
1836
+ },
1837
+ {
1838
+ b: "\u5E97\u94FA\u6388\u6743\u4E0E\u591A\u5E97\u5173\u8054",
1839
+ tag: "",
1840
+ sev: "lose",
1841
+ t: "\u7ED1\u5B9A\u5173\u7CFB\u6E05\u96F6\uFF0C\u6BCF\u4E2A\u5E97\u90FD\u8981\u91CD\u65B0\u6388\u6743\u4E00\u904D"
1842
+ },
1843
+ {
1844
+ b: "\u5546\u54C1\u8BCA\u65AD\u4E0E\u4F18\u5316\u8BB0\u5F55",
1845
+ tag: "\u5C06\u51BB\u7ED3",
1846
+ sev: "lose",
1847
+ t: "\u5546\u54C1\u5386\u53F2\u4F18\u5316\u8BB0\u5F55\u65E0\u6CD5\u67E5\u8BE2\uFF0C\u9700\u91CD\u65B0\u4F18\u5316"
1848
+ },
1849
+ {
1850
+ b: "7 \u9879\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1",
1851
+ tag: "\u5C06\u6682\u505C",
1852
+ sev: "pause",
1853
+ t: "\u8865\u7D20\u6750\u4E0E\u6CBB\u4F4E\u6548\u54C1\u5168\u90E8\u505C\u6446"
1854
+ }
1855
+ ],
1856
+ tiers: [
1857
+ {
1858
+ key: "month",
1859
+ p: "\u6708\u4ED8",
1860
+ price: "15",
1861
+ per: "\u63A5\u56DE\u4EF7 \xB7 \u6B21\u6708\xA520",
1862
+ flag: "",
1863
+ hot: false,
1864
+ url: "https://maibaole.example.com/order?p=month"
1865
+ },
1866
+ {
1867
+ key: "quarter",
1868
+ p: "\u5B63\u4ED8",
1869
+ price: "32",
1870
+ per: "\xA510.7/\u6708 \xB7 \u6700\u5212\u7B97",
1871
+ flag: "",
1872
+ hot: true,
1873
+ url: "https://maibaole.example.com/order?p=quarter"
1874
+ },
1875
+ {
1876
+ key: "half",
1877
+ p: "\u534A\u5E74",
1878
+ price: "64",
1879
+ per: "\xA510.7/\u6708",
1880
+ flag: "\u70ED\u95E8",
1881
+ hot: false,
1882
+ url: "https://maibaole.example.com/order?p=half"
1883
+ },
1884
+ {
1885
+ key: "year",
1886
+ p: "\u5E74\u4ED8",
1887
+ price: "128",
1888
+ per: "\xA510.7/\u6708",
1889
+ flag: "\u7701\u6700\u591A",
1890
+ hot: false,
1891
+ url: "https://maibaole.example.com/order?p=year"
1892
+ }
1893
+ ]
1894
+ },
1895
+ state: { period: 1 },
1896
+ derived: { current: { list: "tiers", indexBy: "period" } },
1897
+ nodes: [
1898
+ {
1899
+ type: "flex",
1900
+ style: {
1901
+ direction: "column",
1902
+ background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
1903
+ padding: "20px 22px 16px"
1904
+ },
1905
+ children: [
1906
+ {
1907
+ type: "text",
1908
+ content: "\u{1F525} \u8FD8\u5269\u6700\u540E {{ user.lastDayLeft }} \u5929",
1909
+ style: {
1910
+ alignSelf: "flex-start",
1911
+ background: "rgba(255,255,255,0.18)",
1912
+ color: "#ffffff",
1913
+ fontSize: 12,
1914
+ fontWeight: "700",
1915
+ radius: 6,
1916
+ padding: "3px 10px"
1917
+ }
1918
+ },
1919
+ {
1920
+ type: "repeat",
1921
+ bind: "achieve",
1922
+ style: { gap: 9, wrap: true, marginTop: 14 },
1923
+ template: achieveCell2
1924
+ },
1925
+ // ===== 分格倒计时 + 厘秒逐帧动画 =====
1926
+ {
1927
+ type: "countdown",
1928
+ to: "{{ user.trialEndAt }}",
1929
+ precision: "cs",
1930
+ as: "cd",
1931
+ style: { align: "center", gap: 6, marginTop: 10 },
1932
+ onEnd: { type: "track", event: "popup_countdown_end" },
1933
+ children: [
1934
+ cdBlock("{{ cd.h }}"),
1935
+ cdSeparator(":"),
1936
+ cdBlock("{{ cd.m }}"),
1937
+ cdSeparator(":"),
1938
+ cdBlock("{{ cd.s }}"),
1939
+ cdSeparator("."),
1940
+ cdBlock("{{ cd.cs }}", {
1941
+ width: 34,
1942
+ height: 24,
1943
+ fontSize: 13,
1944
+ lineHeight: 24,
1945
+ color: "#ffcabc"
1946
+ }),
1947
+ {
1948
+ type: "text",
1949
+ content: "\u540E\u505C\u6B62\u670D\u52A1",
1950
+ style: {
1951
+ fontSize: 11.5,
1952
+ fontWeight: "600",
1953
+ color: "rgba(255,255,255,0.85)",
1954
+ marginLeft: 4
1955
+ }
1956
+ }
1957
+ ]
1958
+ }
1959
+ ]
1960
+ },
1961
+ {
1962
+ type: "flex",
1963
+ style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
1964
+ children: [
1965
+ {
1966
+ type: "text",
1967
+ content: "\u5230\u671F\u540E\uFF0C\u4EE5\u4E0B\u6570\u636E\u5C06\u6E05\u7A7A\uFF1A",
1968
+ style: { fontSize: 15, fontWeight: "800", color: "#1f2533" }
1969
+ },
1970
+ {
1971
+ type: "repeat",
1972
+ bind: "lose",
1973
+ template: loseRow2,
1974
+ style: {
1975
+ direction: "column",
1976
+ marginTop: 14,
1977
+ background: "#ffe9e6",
1978
+ borderWidth: 1,
1979
+ borderStyle: "solid",
1980
+ borderColor: "#ffd0ca",
1981
+ radius: 12,
1982
+ padding: "7px 13px"
1983
+ }
1984
+ },
1985
+ {
1986
+ // perk 权益条
1987
+ type: "flex",
1988
+ style: {
1989
+ align: "flex-start",
1990
+ gap: 7,
1991
+ marginTop: 16,
1992
+ background: "#fff9ed",
1993
+ borderWidth: 1,
1994
+ borderStyle: "solid",
1995
+ borderColor: "#ffd08a",
1996
+ radius: 12,
1997
+ padding: "14px 13px"
1998
+ },
1999
+ children: [
2000
+ {
2001
+ type: "text",
2002
+ content: "\u2713",
2003
+ style: { fontSize: 12.5, fontWeight: "900", color: "#ff7a00" }
2004
+ },
2005
+ {
2006
+ type: "flex",
2007
+ style: { align: "baseline", flex: "1" },
2008
+ children: [
2009
+ {
2010
+ type: "text",
2011
+ content: "\u4ECA\u665A\u8FC7\u540E\uFF0C\u81EA\u52A8\u53D8\u56DE\u539F\u4EF7\uFF0C",
2012
+ style: { fontSize: 12.5, fontWeight: "600", color: "#a35200" }
2013
+ },
2014
+ {
2015
+ type: "text",
2016
+ content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
2017
+ style: { fontSize: 12.5, fontWeight: "800", color: "#a35200" }
2018
+ },
2019
+ {
2020
+ type: "text",
2021
+ content: "\u4EC5\u8BD5\u7528\u671F\u5185\u6709\u6548",
2022
+ style: { fontSize: 12.5, fontWeight: "600", color: "#a35200" }
2023
+ }
2024
+ ]
2025
+ }
2026
+ ]
2027
+ },
2028
+ {
2029
+ type: "flex",
2030
+ style: { align: "center", gap: 8, marginTop: 17, marginBottom: 9 },
2031
+ children: [
2032
+ {
2033
+ type: "text",
2034
+ content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
2035
+ style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
2036
+ },
2037
+ {
2038
+ type: "text",
2039
+ content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
2040
+ style: {
2041
+ alignSelf: "center",
2042
+ background: ORANGE2,
2043
+ color: "#ffffff",
2044
+ fontSize: 11,
2045
+ fontWeight: "800",
2046
+ radius: 5,
2047
+ padding: "2px 8px"
2048
+ }
2049
+ }
2050
+ ]
2051
+ },
2052
+ { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard2 },
2053
+ {
2054
+ type: "flex",
2055
+ style: {
2056
+ justify: "center",
2057
+ align: "center",
2058
+ gap: 5,
2059
+ height: 52,
2060
+ radius: 11,
2061
+ background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
2062
+ marginTop: 20,
2063
+ cursor: "pointer"
2064
+ },
2065
+ action: {
2066
+ type: "sequence",
2067
+ actions: [
2068
+ {
2069
+ type: "track",
2070
+ event: "popup_renew_click",
2071
+ params: { period: "{{ current.key }}", stage: "last_day" }
2072
+ },
2073
+ { type: "navigate", url: "{{ current.url }}" }
2074
+ ]
2075
+ },
2076
+ children: [
2077
+ {
2078
+ type: "text",
2079
+ content: "\u539F\u6837\u7559\u4F4F\u6210\u679C \xB7",
2080
+ style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
2081
+ },
2082
+ {
2083
+ type: "text",
2084
+ content: "{{ current.p }} \xA5{{ current.price }}",
2085
+ style: { fontSize: 16.5, fontWeight: "800", color: "#ffffff" }
2086
+ }
2087
+ ]
2088
+ },
2089
+ {
2090
+ type: "text",
2091
+ content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
2092
+ style: {
2093
+ fontSize: 12,
2094
+ color: "#8a909c",
2095
+ textAlign: "center",
2096
+ marginTop: 10,
2097
+ cursor: "pointer"
2098
+ },
2099
+ action: { type: "track", event: "popup_more_plans" }
2100
+ }
2101
+ ]
2102
+ }
2103
+ ]
2104
+ };
2105
+ var last_day_default = lastDay;
2106
+
2107
+ // src/docs/examples/multi-view.ts
2108
+ var ORANGE3 = "linear-gradient(90deg,#ff7a00,#faad14)";
2109
+ var textBtn = (text, action, extra) => ({
2110
+ type: "text",
2111
+ content: text,
2112
+ style: Object.assign({ fontSize: 12.5, color: "#8a909c", cursor: "pointer" }, extra),
2113
+ action
2114
+ });
2115
+ var noticeToPopup = {
2116
+ version: 1,
2117
+ meta: { name: "\u516C\u544A\u6761\u70B9\u51FB\u5F39\u51FA\u5F39\u7A97\uFF08\u591A\u89C6\u56FE \xB7 \u53E0\u52A0\uFF09" },
2118
+ entry: "bar",
2119
+ data: {
2120
+ plans: [
2121
+ {
2122
+ key: "pro",
2123
+ name: "\u4E13\u4E1A\u7248",
2124
+ price: "\xA5899/\u5E74",
2125
+ url: "https://maibaole.example.com/order?p=pro"
2126
+ },
2127
+ {
2128
+ key: "lux",
2129
+ name: "\u8C6A\u534E\u7248",
2130
+ price: "\xA51999/\u5E74",
2131
+ url: "https://maibaole.example.com/order?p=lux"
2132
+ }
2133
+ ]
2134
+ },
2135
+ state: { plan: 0 },
2136
+ derived: { current: { list: "plans", indexBy: "plan" } },
2137
+ views: {
2138
+ // 常驻在页面里的公告条,点它才弹弹窗
2139
+ bar: {
2140
+ type: "notice",
2141
+ stage: {
2142
+ width: "100%",
2143
+ height: "auto",
2144
+ layout: "flow",
2145
+ style: { radius: 6, background: "#fff8e6", maxWidth: 1200 },
2146
+ // 多视图下每层各埋各的,能分别统计「公告条曝光」和「弹窗曝光」
2147
+ onShow: { type: "track", event: "notice_show", params: { view: "bar" } },
2148
+ onClose: {
2149
+ type: "track",
2150
+ event: "notice_dismiss",
2151
+ params: { view: "bar", reason: "{{ closeReason }}" }
2152
+ }
2153
+ },
2154
+ nodes: [
2155
+ {
2156
+ type: "flex",
2157
+ // 整条都能点开弹窗
2158
+ style: { align: "center", gap: 10, padding: "10px 14px", cursor: "pointer" },
2159
+ action: {
2160
+ type: "sequence",
2161
+ actions: [
2162
+ { type: "track", event: "notice_click", params: { from: "bar" } },
2163
+ { type: "open", view: "renew" }
2164
+ ]
2165
+ },
2166
+ children: [
2167
+ { type: "text", content: "\u{1F4E2}", style: { fontSize: 16 } },
2168
+ {
2169
+ type: "text",
2170
+ content: "{{ user.shopName }}\uFF0C\u4F60\u7684{{ user.version }}\u8FD8\u6709 {{ user.expireDays }} \u5929\u5230\u671F",
2171
+ style: { flex: "1", fontSize: 14, color: "#8a6212", lineHeight: 1.5 }
2172
+ },
2173
+ {
2174
+ type: "button",
2175
+ text: "\u67E5\u770B\u7EED\u8D39\u65B9\u6848",
2176
+ style: {
2177
+ width: 104,
2178
+ height: 28,
2179
+ radius: 14,
2180
+ background: "#f5a623",
2181
+ color: "#fff",
2182
+ fontSize: 12
2183
+ },
2184
+ // 叠一层弹窗,公告条留在下面
2185
+ action: {
2186
+ type: "sequence",
2187
+ actions: [
2188
+ { type: "track", event: "notice_click", params: { from: "button" } },
2189
+ { type: "open", view: "renew" }
2190
+ ]
2191
+ }
2192
+ },
2193
+ {
2194
+ // × 有自己的动作,点它不会再冒泡去触发外层的「打开弹窗」
2195
+ type: "text",
2196
+ content: "\u2715",
2197
+ style: {
2198
+ alignSelf: "center",
2199
+ width: 22,
2200
+ height: 22,
2201
+ textAlign: "center",
2202
+ lineHeight: 22,
2203
+ color: "#b08a3e",
2204
+ fontSize: 13,
2205
+ cursor: "pointer"
2206
+ },
2207
+ action: {
2208
+ type: "sequence",
2209
+ actions: [
2210
+ { type: "call", name: "setNeverRemind" },
2211
+ { type: "close", reason: "user-dismiss" }
2212
+ ]
2213
+ }
2214
+ }
2215
+ ]
2216
+ }
2217
+ ]
2218
+ },
2219
+ renew: {
2220
+ type: "popup",
2221
+ stage: {
2222
+ width: 400,
2223
+ height: "auto",
2224
+ layout: "flow",
2225
+ mask: true,
2226
+ maskClosable: true,
2227
+ closeButton: { show: true, position: "top-right", offset: [12, 12] },
2228
+ style: { radius: 14 },
2229
+ onShow: { type: "track", event: "popup_show", params: { view: "renew" } },
2230
+ onClose: {
2231
+ type: "track",
2232
+ event: "popup_close",
2233
+ params: { view: "renew", reason: "{{ closeReason }}" }
2234
+ }
2235
+ },
2236
+ nodes: [
2237
+ {
2238
+ type: "flex",
2239
+ style: { direction: "column", padding: "26px 24px 22px", gap: 12 },
2240
+ children: [
2241
+ {
2242
+ type: "text",
2243
+ content: "\u7EED\u8D39\u65B9\u6848",
2244
+ style: {
2245
+ fontSize: 18,
2246
+ fontWeight: "800",
2247
+ color: "#1f2533",
2248
+ textAlign: "center"
2249
+ }
2250
+ },
2251
+ {
2252
+ type: "tabs",
2253
+ bind: "plans",
2254
+ labelField: "name",
2255
+ stateKey: "plan",
2256
+ style: { gap: 8 },
2257
+ itemStyle: {
2258
+ flex: "1",
2259
+ height: 36,
2260
+ radius: 18,
2261
+ background: "#f2f4f7",
2262
+ color: "#68727f",
2263
+ fontSize: 13
2264
+ },
2265
+ activeItemStyle: {
2266
+ background: "#ff4433",
2267
+ color: "#ffffff",
2268
+ fontWeight: "700"
2269
+ }
2270
+ },
2271
+ {
2272
+ type: "text",
2273
+ content: "{{ current.price }}",
2274
+ style: {
2275
+ fontSize: 30,
2276
+ fontWeight: "800",
2277
+ color: "#ff4433",
2278
+ textAlign: "center"
2279
+ }
2280
+ },
2281
+ {
2282
+ type: "flex",
2283
+ style: {
2284
+ justify: "center",
2285
+ align: "center",
2286
+ height: 46,
2287
+ radius: 23,
2288
+ background: "#ff4433",
2289
+ cursor: "pointer"
2290
+ },
2291
+ action: {
2292
+ type: "sequence",
2293
+ actions: [
2294
+ {
2295
+ type: "track",
2296
+ event: "notice_order_click",
2297
+ params: { plan: "{{ current.key }}" }
2298
+ },
2299
+ { type: "navigate", url: "{{ current.url }}" }
2300
+ ]
2301
+ },
2302
+ children: [
2303
+ {
2304
+ type: "text",
2305
+ content: "\u7ACB\u5373\u7EED\u8D39 {{ current.name }}",
2306
+ style: { fontSize: 15, fontWeight: "700", color: "#ffffff" }
2307
+ }
2308
+ ]
2309
+ },
2310
+ // 只关掉这一层,公告条还在
2311
+ textBtn("\u4EE5\u540E\u518D\u8BF4", { type: "close" }, { textAlign: "center" })
2312
+ ]
2313
+ }
2314
+ ]
2315
+ }
2316
+ }
2317
+ };
2318
+ var confirmAndSwitch = {
2319
+ version: 1,
2320
+ meta: { name: "\u4E0D\u518D\u63D0\u9192\u4E8C\u6B21\u786E\u8BA4 + \u80FD\u529B\u6E05\u5355\u6362\u5C4F\uFF08\u591A\u89C6\u56FE\uFF09" },
2321
+ entry: "main",
2322
+ data: {
2323
+ features: [
2324
+ { b: "\u591A\u94FE\u63A5\u6279\u91CF\u642C\u5BB6", t: "\u4E00\u6B21\u642C\u6574\u6279\uFF0C\u4E0D\u7528\u9010\u4E2A\u6765" },
2325
+ { b: "\u66F4\u591A\u642C\u5BB6\u989D\u5EA6", t: "\u653E\u5F00\u624B\u642C\uFF0C\u989D\u5EA6\u4E0D\u5361\u8116\u5B50" },
2326
+ { b: "AI \u7206\u6B3E\u88C2\u53D8", t: "\u4E00\u6B3E\u53D8\u591A\u6B3E\uFF0C\u6D4B\u7206\u54C1 \xB7 \u4E13\u4E1A\u7248\u8D77" }
2327
+ ]
2328
+ },
2329
+ state: {},
2330
+ views: {
2331
+ main: {
2332
+ type: "popup",
2333
+ stage: {
2334
+ width: 400,
2335
+ height: "auto",
2336
+ layout: "flow",
2337
+ mask: true,
2338
+ maskClosable: false,
2339
+ closeButton: { show: true, position: "top-right", offset: [12, 12] },
2340
+ style: { radius: 14 }
2341
+ },
2342
+ nodes: [
2343
+ {
2344
+ type: "flex",
2345
+ style: { direction: "column", padding: "26px 24px 20px", gap: 14 },
2346
+ children: [
2347
+ {
2348
+ type: "text",
2349
+ content: "\u8BD5\u7528\u8FD8\u5269 {{ user.trialLeftDays }} \u5929",
2350
+ style: {
2351
+ fontSize: 19,
2352
+ fontWeight: "800",
2353
+ color: "#1f2533",
2354
+ textAlign: "center"
2355
+ }
2356
+ },
2357
+ {
2358
+ type: "text",
2359
+ content: "\u5230\u671F\u540E\u6279\u91CF\u642C\u5BB6\u3001\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1\u90FD\u4F1A\u505C\u6B62",
2360
+ style: {
2361
+ fontSize: 13,
2362
+ color: "#68727f",
2363
+ textAlign: "center",
2364
+ lineHeight: 1.6
2365
+ }
2366
+ },
2367
+ {
2368
+ type: "flex",
2369
+ style: {
2370
+ justify: "center",
2371
+ align: "center",
2372
+ height: 46,
2373
+ radius: 23,
2374
+ background: "#ff4433",
2375
+ cursor: "pointer"
2376
+ },
2377
+ action: {
2378
+ type: "sequence",
2379
+ actions: [
2380
+ { type: "track", event: "popup_order_click" },
2381
+ { type: "navigate", url: "https://maibaole.example.com/order" }
2382
+ ]
2383
+ },
2384
+ children: [
2385
+ {
2386
+ type: "text",
2387
+ content: "\u7ACB\u5373\u5F00\u901A",
2388
+ style: { fontSize: 15, fontWeight: "700", color: "#ffffff" }
2389
+ }
2390
+ ]
2391
+ },
2392
+ {
2393
+ type: "flex",
2394
+ style: { justify: "space-between", align: "center", marginTop: 2 },
2395
+ children: [
2396
+ // 换屏:把当前层换成能力清单,栈深度不变
2397
+ textBtn(
2398
+ "\u770B\u770B\u80FD\u89E3\u9501\u4EC0\u4E48 \u2192",
2399
+ { type: "open", view: "unlock", mode: "replace" },
2400
+ { color: "#409eff" }
2401
+ ),
2402
+ // 叠加:主弹窗留在后面,上面弹二次确认
2403
+ textBtn("\u4E0D\u518D\u63D0\u9192", {
2404
+ type: "sequence",
2405
+ actions: [
2406
+ { type: "track", event: "popup_never_remind_click" },
2407
+ { type: "open", view: "confirm" }
2408
+ ]
2409
+ })
2410
+ ]
2411
+ }
2412
+ ]
2413
+ }
2414
+ ]
2415
+ },
2416
+ unlock: {
2417
+ type: "popup",
2418
+ stage: {
2419
+ width: 400,
2420
+ height: "auto",
2421
+ layout: "flow",
2422
+ mask: true,
2423
+ maskClosable: false,
2424
+ style: { radius: 14 },
2425
+ // replace 换屏时,被顶掉的那层也会收到 onClose,closeReason 是 'replace'
2426
+ onShow: { type: "track", event: "popup_show", params: { view: "unlock" } },
2427
+ onClose: {
2428
+ type: "track",
2429
+ event: "popup_close",
2430
+ params: { view: "unlock", reason: "{{ closeReason }}" }
2431
+ }
2432
+ },
2433
+ nodes: [
2434
+ {
2435
+ type: "flex",
2436
+ style: { direction: "column", padding: "26px 24px 20px", gap: 12 },
2437
+ children: [
2438
+ {
2439
+ type: "text",
2440
+ content: "\u{1F513} \u4ED8\u8D39\u7248\u80FD\u89E3\u9501",
2441
+ style: {
2442
+ fontSize: 18,
2443
+ fontWeight: "800",
2444
+ color: "#1f2533",
2445
+ textAlign: "center"
2446
+ }
2447
+ },
2448
+ {
2449
+ type: "repeat",
2450
+ bind: "features",
2451
+ style: {
2452
+ direction: "column",
2453
+ background: "#f1faf6",
2454
+ radius: 12,
2455
+ padding: "4px 13px"
2456
+ },
2457
+ template: {
2458
+ type: "flex",
2459
+ style: { align: "flex-start", gap: 10, padding: "9px 0" },
2460
+ children: [
2461
+ {
2462
+ type: "text",
2463
+ content: "\u2713",
2464
+ style: {
2465
+ width: 19,
2466
+ height: 19,
2467
+ radius: "50%",
2468
+ background: "#00a870",
2469
+ color: "#ffffff",
2470
+ fontSize: 12,
2471
+ fontWeight: "900",
2472
+ lineHeight: 19,
2473
+ textAlign: "center"
2474
+ }
2475
+ },
2476
+ {
2477
+ type: "flex",
2478
+ style: { align: "baseline", flex: "1" },
2479
+ children: [
2480
+ {
2481
+ type: "text",
2482
+ content: "{{ item.b }}",
2483
+ style: { fontSize: 12.5, fontWeight: "700", color: "#1f2533" }
2484
+ },
2485
+ {
2486
+ type: "text",
2487
+ content: " \xB7 {{ item.t }}",
2488
+ style: { fontSize: 12.5, color: "#3f4656" }
2489
+ }
2490
+ ]
2491
+ }
2492
+ ]
2493
+ }
2494
+ },
2495
+ // 换回主屏
2496
+ textBtn(
2497
+ "\u2190 \u8FD4\u56DE",
2498
+ { type: "open", view: "main", mode: "replace" },
2499
+ { textAlign: "center", marginTop: 4 }
2500
+ )
2501
+ ]
2502
+ }
2503
+ ]
2504
+ },
2505
+ confirm: {
2506
+ type: "popup",
2507
+ stage: {
2508
+ width: 320,
2509
+ height: "auto",
2510
+ layout: "flow",
2511
+ // 二次确认自己不画遮罩也行,但保留一层浅遮罩能把下面压暗,层次更清楚
2512
+ mask: true,
2513
+ maskClosable: false,
2514
+ style: { radius: 12 }
2515
+ },
2516
+ nodes: [
2517
+ {
2518
+ type: "flex",
2519
+ style: { direction: "column", padding: "24px 22px 18px", gap: 10 },
2520
+ children: [
2521
+ {
2522
+ type: "text",
2523
+ content: "\u786E\u5B9A\u4E0D\u518D\u63D0\u9192\uFF1F",
2524
+ style: {
2525
+ fontSize: 16,
2526
+ fontWeight: "800",
2527
+ color: "#1f2533",
2528
+ textAlign: "center"
2529
+ }
2530
+ },
2531
+ {
2532
+ type: "text",
2533
+ content: "\u5173\u6389\u4E4B\u540E\uFF0C\u5230\u671F\u524D\u4E0D\u4F1A\u518D\u6536\u5230\u7EED\u8D39\u63D0\u9192",
2534
+ style: {
2535
+ fontSize: 12.5,
2536
+ color: "#8a909c",
2537
+ textAlign: "center",
2538
+ lineHeight: 1.6
2539
+ }
2540
+ },
2541
+ {
2542
+ type: "flex",
2543
+ style: { gap: 10, marginTop: 6 },
2544
+ children: [
2545
+ {
2546
+ type: "flex",
2547
+ style: {
2548
+ flex: "1",
2549
+ justify: "center",
2550
+ align: "center",
2551
+ height: 40,
2552
+ radius: 20,
2553
+ borderWidth: 1,
2554
+ borderStyle: "solid",
2555
+ borderColor: "#dcdfe6",
2556
+ cursor: "pointer"
2557
+ },
2558
+ // 只关掉确认框,回到主弹窗
2559
+ action: { type: "close" },
2560
+ children: [
2561
+ {
2562
+ type: "text",
2563
+ content: "\u518D\u60F3\u60F3",
2564
+ style: { fontSize: 14, color: "#606266" }
2565
+ }
2566
+ ]
2567
+ },
2568
+ {
2569
+ type: "flex",
2570
+ style: {
2571
+ flex: "1",
2572
+ justify: "center",
2573
+ align: "center",
2574
+ height: 40,
2575
+ radius: 20,
2576
+ background: ORANGE3,
2577
+ cursor: "pointer"
2578
+ },
2579
+ // 确认后整个关掉,两层一起消失
2580
+ action: {
2581
+ type: "sequence",
2582
+ actions: [
2583
+ { type: "track", event: "popup_never_remind_confirm" },
2584
+ { type: "call", name: "setNeverRemind" },
2585
+ { type: "closeAll" }
2586
+ ]
2587
+ },
2588
+ children: [
2589
+ {
2590
+ type: "text",
2591
+ content: "\u786E\u5B9A",
2592
+ style: { fontSize: 14, fontWeight: "700", color: "#ffffff" }
2593
+ }
2594
+ ]
2595
+ }
2596
+ ]
2597
+ }
2598
+ ]
2599
+ }
2600
+ ]
2601
+ }
2602
+ }
2603
+ };
2604
+
2605
+ // src/docs/examples/tab-theme.ts
2606
+ var plans = [
2607
+ {
2608
+ key: "year",
2609
+ label: "\u5305\u5E74",
2610
+ theme: "#7B3FF2",
2611
+ stageBg: "linear-gradient(160deg, #2b1055 0%, #7597de 100%)",
2612
+ cardBg: "rgba(255,255,255,0.94)",
2613
+ price: "\xA5899",
2614
+ unit: "/\u5E74",
2615
+ tip: "\u6298\u5408\u6BCF\u5929 2.4 \u5143\uFF0C\u6BD4\u5305\u6708\u7701 289 \u5143",
2616
+ // 包年主推「权益格子」,两列铺开
2617
+ mode: "grid",
2618
+ cells: [
2619
+ { title: "\u65E0\u9650\u91C7\u96C6", desc: "\u4E0D\u9650\u6761\u6570" },
2620
+ { title: "\u667A\u80FD\u6539\u56FE", desc: "\u6BCF\u6708 5000 \u5F20" },
2621
+ { title: "\u4E00\u952E\u94FA\u8D27", desc: "\u5168\u5E73\u53F0" },
2622
+ { title: "\u4E13\u5C5E\u5BA2\u670D", desc: "7\xD712 \u5C0F\u65F6" }
2623
+ ]
2624
+ },
2625
+ {
2626
+ key: "month",
2627
+ label: "\u5305\u6708",
2628
+ theme: "#FF6B35",
2629
+ stageBg: "linear-gradient(160deg, #3a1c0c 0%, #ff9a3c 100%)",
2630
+ cardBg: "rgba(255,255,255,0.94)",
2631
+ price: "\xA599",
2632
+ unit: "/\u6708",
2633
+ tip: "\u968F\u65F6\u53EF\u505C\uFF0C\u9002\u5408\u5148\u8BD5\u4E00\u4E2A\u6708",
2634
+ // 包月条目少,改成竖排清单更清楚
2635
+ mode: "list",
2636
+ rows: [
2637
+ { title: "\u91C7\u96C6 3000 \u6761/\u6708", tag: "\u591F\u7528" },
2638
+ { title: "\u6539\u56FE 500 \u5F20/\u6708", tag: "" },
2639
+ { title: "\u4E00\u952E\u94FA\u8D27", tag: "" }
2640
+ ]
2641
+ }
2642
+ ];
2643
+ var tabTheme = {
2644
+ version: 1,
2645
+ type: "popup",
2646
+ meta: { name: "\u5207 tab \u6362\u80A4\u6362\u5E03\u5C40" },
2647
+ data: { plans },
2648
+ state: { tab: 0 },
2649
+ // cur 始终指向当前选中的那一档,下面所有 {{ cur.xxx }} 都随 tab 自动变
2650
+ derived: { cur: { list: "plans", indexBy: "tab" } },
2651
+ stage: {
2652
+ width: 420,
2653
+ height: "auto",
2654
+ layout: "flow",
2655
+ mask: true,
2656
+ maskClosable: true,
2657
+ closeButton: {
2658
+ show: true,
2659
+ position: "top-right",
2660
+ offset: [-12, 12],
2661
+ size: 28,
2662
+ icon: "\u2715",
2663
+ style: { color: "rgba(255,255,255,0.85)", fontSize: 16 }
2664
+ },
2665
+ // 弹窗本体的背景跟着 tab 换
2666
+ style: { radius: 16, background: "{{ cur.stageBg }}", padding: 22 },
2667
+ // 曝光时记下默认停在哪一档,关闭时记下用户最后看的是哪一档、怎么走的
2668
+ onShow: {
2669
+ type: "track",
2670
+ event: "popup_show",
2671
+ params: { popup: "tab_theme", plan: "{{ cur.key }}" }
2672
+ },
2673
+ onClose: {
2674
+ type: "track",
2675
+ event: "popup_close",
2676
+ params: { popup: "tab_theme", plan: "{{ cur.key }}", reason: "{{ closeReason }}" }
2677
+ }
2678
+ },
2679
+ nodes: [
2680
+ {
2681
+ type: "tabs",
2682
+ bind: "plans",
2683
+ labelField: "label",
2684
+ stateKey: "tab",
2685
+ style: { direction: "row", gap: 8 },
2686
+ itemStyle: {
2687
+ padding: "8px 20px",
2688
+ radius: 999,
2689
+ background: "rgba(255,255,255,0.16)",
2690
+ color: "rgba(255,255,255,0.85)",
2691
+ fontSize: 14,
2692
+ cursor: "pointer"
2693
+ },
2694
+ // 选中态的文字色也取当前主题色
2695
+ activeItemStyle: {
2696
+ background: "#ffffff",
2697
+ color: "{{ cur.theme }}",
2698
+ fontWeight: "bold"
2699
+ }
2700
+ },
2701
+ // 价格行:不同字号靠多个 text 节点 + baseline 对齐拼出来,不需要富文本
2702
+ {
2703
+ type: "flex",
2704
+ style: { direction: "row", align: "baseline", gap: 4, marginTop: 18 },
2705
+ children: [
2706
+ {
2707
+ type: "text",
2708
+ content: "{{ cur.price }}",
2709
+ style: { color: "#ffffff", fontSize: 34, fontWeight: "bold" }
2710
+ },
2711
+ {
2712
+ type: "text",
2713
+ content: "{{ cur.unit }}",
2714
+ style: { color: "rgba(255,255,255,0.8)", fontSize: 14 }
2715
+ }
2716
+ ]
2717
+ },
2718
+ {
2719
+ type: "text",
2720
+ content: "{{ cur.tip }}",
2721
+ style: { marginTop: 6, color: "rgba(255,255,255,0.75)", fontSize: 13 }
2722
+ },
2723
+ // ——— 排版分支 A:两列格子(包年) ———
2724
+ {
2725
+ type: "repeat",
2726
+ visibleWhen: "cur.mode == 'grid'",
2727
+ bind: "cur.cells",
2728
+ style: { direction: "row", wrap: true, gap: 10, marginTop: 16 },
2729
+ template: {
2730
+ type: "flex",
2731
+ style: {
2732
+ direction: "column",
2733
+ gap: 4,
2734
+ width: "calc(50% - 5px)",
2735
+ background: "{{ cur.cardBg }}",
2736
+ radius: 10,
2737
+ padding: 12
2738
+ },
2739
+ children: [
2740
+ {
2741
+ type: "text",
2742
+ content: "{{ item.title }}",
2743
+ style: { color: "{{ cur.theme }}", fontSize: 14, fontWeight: "bold" }
2744
+ },
2745
+ {
2746
+ type: "text",
2747
+ content: "{{ item.desc }}",
2748
+ style: { color: "#8a8f99", fontSize: 12 }
2749
+ }
2750
+ ]
2751
+ }
2752
+ },
2753
+ // ——— 排版分支 B:竖排清单(包月) ———
2754
+ {
2755
+ type: "repeat",
2756
+ visibleWhen: "cur.mode == 'list'",
2757
+ bind: "cur.rows",
2758
+ style: { direction: "column", gap: 8, marginTop: 16 },
2759
+ template: {
2760
+ type: "flex",
2761
+ style: {
2762
+ direction: "row",
2763
+ align: "center",
2764
+ gap: 8,
2765
+ background: "{{ cur.cardBg }}",
2766
+ radius: 8,
2767
+ padding: "10px 12px"
2768
+ },
2769
+ children: [
2770
+ {
2771
+ type: "text",
2772
+ content: "{{ item.title }}",
2773
+ style: { flex: "1", color: "#2c3038", fontSize: 14 }
2774
+ },
2775
+ {
2776
+ type: "text",
2777
+ content: "{{ item.tag }}",
2778
+ visibleWhen: "item.tag != ''",
2779
+ style: {
2780
+ alignSelf: "center",
2781
+ padding: "2px 8px",
2782
+ radius: 999,
2783
+ background: "{{ cur.theme }}",
2784
+ color: "#ffffff",
2785
+ fontSize: 11
2786
+ }
2787
+ }
2788
+ ]
2789
+ }
2790
+ },
2791
+ {
2792
+ type: "button",
2793
+ text: "\u7ACB\u5373\u5F00\u901A {{ cur.label }}",
2794
+ style: {
2795
+ marginTop: 18,
2796
+ width: "100%",
2797
+ height: 46,
2798
+ radius: 10,
2799
+ background: "{{ cur.theme }}",
2800
+ color: "#ffffff",
2801
+ fontSize: 16,
2802
+ fontWeight: "bold",
2803
+ cursor: "pointer"
2804
+ },
2805
+ action: {
2806
+ type: "sequence",
2807
+ actions: [
2808
+ { type: "track", event: "popup_click", params: { area: "cta" } },
2809
+ {
2810
+ type: "navigate",
2811
+ url: "https://maibaole.example.com/renew",
2812
+ target: "_blank"
2813
+ }
2814
+ ]
2815
+ }
2816
+ }
2817
+ ]
2818
+ };
2819
+ var tab_theme_default = tabTheme;
2820
+
2821
+ // src/docs/examples/image-banner.ts
2822
+ var RATIO = "1200 / 300";
2823
+ var imageBanner = {
2824
+ version: 1,
2825
+ type: "banner",
2826
+ meta: { name: "\u6574\u56FE Banner\uFF08\u5BBD\u5EA6\u81EA\u9002\u5E94 + \u70ED\u533A\uFF09" },
2827
+ stage: {
2828
+ width: "100%",
2829
+ height: "auto",
2830
+ layout: "flow",
2831
+ style: { radius: 8, maxWidth: 1200, overflow: "hidden" },
2832
+ onShow: { type: "track", event: "banner_show", params: { banner: "autumn" } },
2833
+ onClose: {
2834
+ type: "track",
2835
+ event: "banner_dismiss",
2836
+ params: { banner: "autumn", reason: "{{ closeReason }}" }
2837
+ }
2838
+ },
2839
+ nodes: [
2840
+ {
2841
+ // 热区的定位容器:宽度铺满,高度由 aspectRatio 算
2842
+ type: "box",
2843
+ style: { width: "100%", aspectRatio: RATIO },
2844
+ children: [
2845
+ {
2846
+ type: "image",
2847
+ rect: [0, 0, "100%", "100%"],
2848
+ src: "https://picsum.photos/id/1039/1200/300",
2849
+ style: { objectFit: "cover" }
2850
+ },
2851
+ {
2852
+ // 左半边:主标题区,点了看活动详情
2853
+ type: "box",
2854
+ rect: ["4%", "20%", "40%", "46%"],
2855
+ style: { radius: 8, background: "rgba(255,68,51,0.16)", cursor: "pointer" },
2856
+ action: {
2857
+ type: "sequence",
2858
+ actions: [
2859
+ { type: "track", event: "banner_click", params: { area: "title" } },
2860
+ {
2861
+ type: "navigate",
2862
+ url: "https://maibaole.example.com/autumn",
2863
+ target: "_blank"
2864
+ }
2865
+ ]
2866
+ }
2867
+ },
2868
+ {
2869
+ // 右侧按钮:直接去下单
2870
+ type: "box",
2871
+ rect: ["70%", "58%", "22%", "24%"],
2872
+ style: { radius: 999, background: "rgba(255,68,51,0.16)", cursor: "pointer" },
2873
+ action: {
2874
+ type: "sequence",
2875
+ actions: [
2876
+ { type: "track", event: "banner_click", params: { area: "cta" } },
2877
+ {
2878
+ type: "navigate",
2879
+ url: "https://maibaole.example.com/order",
2880
+ target: "_blank"
2881
+ }
2882
+ ]
2883
+ }
2884
+ },
2885
+ {
2886
+ // 关闭放在图上角落,同样用百分比,缩放时不会跑位
2887
+ type: "text",
2888
+ content: "\u2715",
2889
+ rect: ["95%", "6%", 22, 22],
2890
+ style: {
2891
+ textAlign: "center",
2892
+ lineHeight: 22,
2893
+ radius: 11,
2894
+ background: "rgba(0,0,0,0.35)",
2895
+ color: "#fff",
2896
+ fontSize: 13,
2897
+ cursor: "pointer"
2898
+ },
2899
+ action: {
2900
+ type: "sequence",
2901
+ actions: [
2902
+ { type: "call", name: "setNeverRemind" },
2903
+ { type: "close", reason: "user-dismiss" }
2904
+ ]
2905
+ }
2906
+ }
2907
+ ]
2908
+ }
2909
+ ]
2910
+ };
2911
+ var image_banner_default = imageBanner;
2912
+
2913
+ // src/docs/examples/index.ts
2914
+ var HOTSPOT_BG = "rgba(255,68,51,0.16)";
2915
+ var imageHotspot = {
2916
+ version: 1,
2917
+ type: "popup",
2918
+ meta: { name: "\u6574\u56FE\u70ED\u533A\u5F39\u7A97" },
2919
+ stage: {
2920
+ // 窄屏时跟着父级收,最宽不超过 420
2921
+ width: "calc(100% - 48px)",
2922
+ height: 520,
2923
+ mask: true,
2924
+ maskClosable: true,
2925
+ // 关闭按钮放到弹窗正下方外侧:offset 的 y 写负值即可,不会被圆角裁掉
2926
+ closeButton: {
2927
+ show: true,
2928
+ position: "bottom-center",
2929
+ offset: [0, -46],
2930
+ size: 34,
2931
+ // 不写 icon / image,用内置的矢量 × 图标(跟着 style.color 走)
2932
+ style: {
2933
+ background: "rgba(0,0,0,0.4)",
2934
+ color: "#ffffff",
2935
+ fontSize: 18,
2936
+ borderWidth: 1,
2937
+ borderStyle: "solid",
2938
+ borderColor: "rgba(255,255,255,0.55)"
2939
+ }
2940
+ },
2941
+ style: { radius: 12, maxWidth: 420 },
2942
+ // 曝光埋点:数据就绪、弹窗真正展示时触发一次
2943
+ onShow: { type: "track", event: "popup_show", params: { popup: "image_hotspot" } },
2944
+ // 关闭埋点:点 X、点遮罩、点「不再提醒」都会触发,用 closeReason 区分
2945
+ onClose: {
2946
+ type: "track",
2947
+ event: "popup_close",
2948
+ params: { popup: "image_hotspot", reason: "{{ closeReason }}" }
2949
+ }
2950
+ },
2951
+ nodes: [
2952
+ {
2953
+ // 背景图用百分比铺满舞台,舞台宽度变了也不用改配置
2954
+ id: "bg",
2955
+ type: "image",
2956
+ rect: [0, 0, "100%", "100%"],
2957
+ src: "https://picsum.photos/id/1015/420/520"
2958
+ },
2959
+ // 热区想放几个放几个,位置各自由 rect 决定,互不影响。
2960
+ // 热区 = 一个透明的 box + action,调试时把 background 的透明度调高就能看见框。
2961
+ {
2962
+ id: "hotspot-rule",
2963
+ type: "box",
2964
+ // 右上角「活动规则」
2965
+ rect: ["62%", 24, "30%", 30],
2966
+ style: { radius: 15, background: HOTSPOT_BG, cursor: "pointer" },
2967
+ action: {
2968
+ type: "sequence",
2969
+ actions: [
2970
+ { type: "track", event: "popup_click", params: { area: "rule" } },
2971
+ {
2972
+ type: "navigate",
2973
+ url: "https://maibaole.example.com/rule",
2974
+ target: "_blank"
2975
+ }
2976
+ ]
2977
+ }
2978
+ },
2979
+ {
2980
+ id: "hotspot-plan-a",
2981
+ type: "box",
2982
+ // 中部左半:套餐 A
2983
+ rect: ["8%", 300, "40%", 96],
2984
+ style: { radius: 10, background: HOTSPOT_BG, cursor: "pointer" },
2985
+ action: {
2986
+ type: "sequence",
2987
+ actions: [
2988
+ { type: "track", event: "popup_click", params: { area: "plan_a" } },
2989
+ {
2990
+ type: "navigate",
2991
+ url: "https://maibaole.example.com/renew?plan=a",
2992
+ target: "_blank"
2993
+ }
2994
+ ]
2995
+ }
2996
+ },
2997
+ {
2998
+ id: "hotspot-plan-b",
2999
+ type: "box",
3000
+ // 中部右半:套餐 B,和 A 并排但各自独立
3001
+ rect: ["52%", 300, "40%", 96],
3002
+ style: { radius: 10, background: HOTSPOT_BG, cursor: "pointer" },
3003
+ action: {
3004
+ type: "sequence",
3005
+ actions: [
3006
+ { type: "track", event: "popup_click", params: { area: "plan_b" } },
3007
+ {
3008
+ type: "navigate",
3009
+ url: "https://maibaole.example.com/renew?plan=b",
3010
+ target: "_blank"
3011
+ }
3012
+ ]
3013
+ }
3014
+ },
3015
+ {
3016
+ id: "hotspot-cta",
3017
+ type: "box",
3018
+ // 底部主按钮
3019
+ rect: ["12%", 420, "76%", 48],
3020
+ style: { radius: 24, background: HOTSPOT_BG, cursor: "pointer" },
3021
+ action: {
3022
+ type: "sequence",
3023
+ actions: [
3024
+ { type: "track", event: "popup_click", params: { area: "cta" } },
3025
+ {
3026
+ type: "navigate",
3027
+ url: "https://maibaole.example.com/renew",
3028
+ target: "_blank"
3029
+ }
3030
+ ]
3031
+ }
3032
+ },
3033
+ {
3034
+ id: "hotspot-never",
3035
+ type: "box",
3036
+ // 最底部「不再提醒」,动作是关弹窗而不是跳转
3037
+ rect: ["30%", 478, "40%", 26],
3038
+ style: { radius: 13, background: HOTSPOT_BG, cursor: "pointer" },
3039
+ action: {
3040
+ type: "sequence",
3041
+ actions: [
3042
+ { type: "call", name: "setNeverRemind" },
3043
+ { type: "close", reason: "never-remind" }
3044
+ ]
3045
+ }
3046
+ }
3047
+ ]
3048
+ };
3049
+ var noticeBar = {
3050
+ version: 1,
3051
+ type: "notice",
3052
+ meta: { name: "\u6587\u5B57\u516C\u544A\u6761\uFF08\u94FA\u6EE1\u7236\u5BBD\uFF09" },
3053
+ stage: {
3054
+ width: "100%",
3055
+ height: "auto",
3056
+ layout: "flow",
3057
+ style: { radius: 6, background: "#fff8e6", maxWidth: 1200 },
3058
+ onShow: { type: "track", event: "notice_show", params: { notice: "guide" } },
3059
+ onClose: {
3060
+ type: "track",
3061
+ event: "notice_dismiss",
3062
+ params: { notice: "guide", reason: "{{ closeReason }}" }
3063
+ }
3064
+ },
3065
+ nodes: [
3066
+ {
3067
+ type: "flex",
3068
+ style: { align: "center", gap: 10, padding: "10px 14px" },
3069
+ children: [
3070
+ {
3071
+ // 公告条里的图片就是一个普通 image 节点,不用 rect,靠 style 定尺寸。
3072
+ // 换成 emoji、图标、活动小图都行。
3073
+ type: "image",
3074
+ src: "https://picsum.photos/id/1062/64/64",
3075
+ style: {
3076
+ alignSelf: "center",
3077
+ width: 22,
3078
+ height: 22,
3079
+ radius: 4,
3080
+ objectFit: "cover"
3081
+ }
3082
+ },
3083
+ {
3084
+ // flex: 1 吃掉剩余宽度,文字多了自动换行、公告条跟着变高
3085
+ type: "text",
3086
+ content: "{{ user.shopName }}\uFF0C\u5546\u54C1\u6279\u91CF\u7BA1\u7406\u529F\u80FD\u5DF2\u5347\u7EA7\uFF0C\u70B9\u51FB\u67E5\u770B\u4F7F\u7528\u6307\u5357",
3087
+ style: { flex: "1", fontSize: 14, color: "#8a6212", lineHeight: 1.5 }
3088
+ },
3089
+ {
3090
+ type: "button",
3091
+ text: "\u67E5\u770B",
3092
+ style: {
3093
+ width: 64,
3094
+ height: 26,
3095
+ radius: 13,
3096
+ background: "#f5a623",
3097
+ color: "#fff",
3098
+ fontSize: 12
3099
+ },
3100
+ action: { type: "navigate", url: "https://maibaole.example.com/guide" }
3101
+ },
3102
+ {
3103
+ // 公告条的关闭:排在行内当一个普通节点,比用 stage.closeButton 更自然。
3104
+ // close 只是通知宿主「用户关掉了」,关掉之后要不要再出、隔多久再出,
3105
+ // 由宿主决定(一般配合 call 记一条「今日不再显示」)。
3106
+ type: "text",
3107
+ content: "\u2715",
3108
+ style: {
3109
+ alignSelf: "center",
3110
+ width: 22,
3111
+ height: 22,
3112
+ textAlign: "center",
3113
+ lineHeight: 22,
3114
+ radius: 11,
3115
+ color: "#b08a3e",
3116
+ fontSize: 13,
3117
+ cursor: "pointer"
3118
+ },
3119
+ action: {
3120
+ type: "sequence",
3121
+ actions: [
3122
+ { type: "track", event: "notice_close", params: { notice: "guide" } },
3123
+ { type: "call", name: "setNeverRemind" },
3124
+ { type: "close", reason: "user-dismiss" }
3125
+ ]
3126
+ }
3127
+ }
3128
+ ]
3129
+ }
3130
+ ]
3131
+ };
3132
+ var examples = [
3133
+ { label: "\u2460 \u6574\u56FE\u70ED\u533A\u5F39\u7A97", value: "imageHotspot", dsl: imageHotspot },
3134
+ { label: "\u2461 \u6587\u5B57\u516C\u544A\u6761", value: "noticeBar", dsl: noticeBar },
3135
+ {
3136
+ label: "\u2462 \u590D\u523B\u8FD0\u8425 demo \xB7 \u5230\u671F\u4E13\u4EAB\uFF08\u540E\u7AEF\u6570\u636E\u6E90\uFF09",
3137
+ value: "renewExpire",
3138
+ dsl: renew_expire_default
3139
+ },
3140
+ { label: "\u2463 \u590D\u523B\u8FD0\u8425 demo \xB7 \u5269 1 \u5929\uFF08\u5398\u79D2\u5012\u8BA1\u65F6\uFF09", value: "lastDay", dsl: last_day_default },
3141
+ { label: "\u2464 \u591A\u89C6\u56FE \xB7 \u516C\u544A\u6761\u70B9\u51FB\u5F39\u51FA\u5F39\u7A97", value: "noticeToPopup", dsl: noticeToPopup },
3142
+ {
3143
+ label: "\u2465 \u591A\u89C6\u56FE \xB7 \u4E8C\u6B21\u786E\u8BA4 + \u80FD\u529B\u6E05\u5355\u6362\u5C4F",
3144
+ value: "confirmAndSwitch",
3145
+ dsl: confirmAndSwitch
3146
+ },
3147
+ { label: "\u2466 \u5207 tab \u6362\u80A4\u6362\u5E03\u5C40", value: "tabTheme", dsl: tab_theme_default },
3148
+ { label: "\u2467 \u6574\u56FE Banner\uFF08\u5BBD\u5EA6\u81EA\u9002\u5E94 + \u70ED\u533A\uFF09", value: "imageBanner", dsl: image_banner_default }
3149
+ ];
3150
+ var examples_default = examples;
3151
+
3152
+ // src/docs/to-markdown.ts
3153
+ var cell = (text) => String(text).replace(/\|/g, "\\|").replace(/\n/g, " ");
3154
+ var NOTE_LABEL = {
3155
+ danger: "\u6CE8\u610F",
3156
+ warn: "\u63D0\u9192",
3157
+ info: "\u8BF4\u660E"
3158
+ };
3159
+ function blockToMarkdown(block) {
3160
+ switch (block.t) {
3161
+ case "h3":
3162
+ return `### ${block.text}`;
3163
+ case "p":
3164
+ return block.text;
3165
+ case "list":
3166
+ return block.items.map((item) => `- ${item}`).join("\n");
3167
+ case "code":
3168
+ return "```jsonc\n" + block.code + "\n```";
3169
+ case "note":
3170
+ return `> **${NOTE_LABEL[block.tone || "info"]}**\uFF1A${block.text}`;
3171
+ case "table": {
3172
+ const head = `| ${block.head.map(cell).join(" | ")} |`;
3173
+ const split = `| ${block.head.map(() => "---").join(" | ")} |`;
3174
+ const rows = block.rows.map((row) => `| ${row.map(cell).join(" | ")} |`);
3175
+ return [head, split].concat(rows).join("\n");
3176
+ }
3177
+ default:
3178
+ return "";
3179
+ }
3180
+ }
3181
+ function toMarkdown(sections10, meta2) {
3182
+ const lines = [
3183
+ "# \u8425\u9500\u5185\u5BB9 DSL \xB7 \u5F00\u53D1\u6587\u6863",
3184
+ "",
3185
+ `- \u66F4\u65B0\u65E5\u671F\uFF1A**${meta2.updatedAt}**`,
3186
+ `- \u5BF9\u5E94 DSL \`version\`\uFF1A**${meta2.dslVersion}**`,
3187
+ "",
3188
+ "> \u672C\u6587\u4EF6\u7531\u300C\u8425\u9500DSL\u8C03\u8BD5\u53F0 \u2192 \u5F00\u53D1\u6587\u6863\u300D\u5BFC\u51FA\u3002DSL \u6709\u6539\u52A8\u65F6\u8BF7\u91CD\u65B0\u5BFC\u51FA\uFF0C\u4E0D\u8981\u624B\u5DE5\u4FEE\u6539\u672C\u6587\u4EF6\u3002",
3189
+ ""
3190
+ ];
3191
+ sections10.forEach((section) => {
3192
+ lines.push(`## ${section.title}`, "");
3193
+ section.blocks.forEach((block) => {
3194
+ const text = blockToMarkdown(block);
3195
+ if (text) lines.push(text, "");
3196
+ });
3197
+ });
3198
+ lines.push("## \u9644\u5F55\uFF1A\u6587\u6863\u53D8\u66F4\u8BB0\u5F55", "");
3199
+ meta2.changelog.forEach((entry) => {
3200
+ lines.push(`### ${entry.date}`, "");
3201
+ entry.items.forEach((item) => lines.push(`- ${item}`));
3202
+ lines.push("");
3203
+ });
3204
+ return lines.join("\n");
3205
+ }
3206
+
3207
+ // src/docs/ai-prompt/basics.ts
3208
+ function roleSection() {
3209
+ return `# \u89D2\u8272
3210
+
3211
+ \u4F60\u662F\u300C\u9EA6\u7206\u4E86\u300D\u8425\u9500\u5F39\u7A97\u914D\u7F6E\u52A9\u624B\u3002\u7528\u6237\u7528\u4E2D\u6587\u63CF\u8FF0\u60F3\u8981\u7684\u5F39\u7A97 / Banner / \u516C\u544A\u6761\uFF0C
3212
+ \u4F60\u8F93\u51FA\u4E00\u6BB5\u7B26\u5408\u4E0B\u9762\u89C4\u8303\u7684 JSON \u914D\u7F6E\u3002
3213
+
3214
+ \u63D0\u793A\u8BCD\u66F4\u65B0\u65E5\u671F\uFF1A${meta_default.updatedAt} \xB7 DSL version\uFF1A${DSL_VERSION}
3215
+
3216
+ # \u8F93\u51FA\u8981\u6C42\uFF08\u5FC5\u987B\u9075\u5B88\uFF09
3217
+
3218
+ 1. \u53EA\u8F93\u51FA**\u4E00\u4E2A** JSON \u4EE3\u7801\u5757\uFF0C\u524D\u540E\u4E0D\u8981\u4EFB\u4F55\u89E3\u91CA\u3001\u5BD2\u6684\u3001\u603B\u7ED3\u3002
3219
+ 2. \u7528\u6237\u9700\u6C42\u4E0D\u6E05\u695A\u65F6\uFF0C\u5148\u63D0\u95EE\uFF0C\u4E0D\u8981\u778E\u731C\u5C3A\u5BF8\u548C\u6587\u6848\u3002
3220
+ 3. \`version\` \u56FA\u5B9A\u4E3A ${DSL_VERSION}\u3002
3221
+ 4. **\u7EDD\u5BF9\u7981\u6B62**\u8F93\u51FA\u4EFB\u4F55 JavaScript \u4EE3\u7801\u3001\u51FD\u6570\u8C03\u7528\u3001\`javascript:\` \u94FE\u63A5\u3001\`<script>\`\u3001\u4E8B\u4EF6\u5904\u7406\u5668\u3002
3222
+ \u8FD9\u5957\u914D\u7F6E\u662F\u7EAF\u6570\u636E\uFF0C\u5199\u8FDB\u53BB\u4E5F\u4E0D\u4F1A\u6267\u884C\uFF0C\u53EA\u4F1A\u88AB\u62E6\u4E0B\u3002
3223
+ 5. \`style\` \u53EA\u80FD\u7528\u767D\u540D\u5355\u91CC\u7684\u5C5E\u6027\uFF0C\u5199\u522B\u7684\u4F1A\u88AB\u4E22\u5F03\u3002
3224
+ 6. \u57CB\u70B9\u4E8B\u4EF6\u540D\u5FC5\u987B\u7B26\u5408\u547D\u540D\u89C4\u8303\uFF08\u89C1\u300C\u52A8\u4F5C\u300D\u4E00\u8282\uFF09\uFF0C\u5199\u9519\u4F1A\u5728\u4FDD\u5B58\u65F6\u76F4\u63A5\u62A5\u9519\u3002
3225
+ 7. \u56FE\u7247\u548C\u8DF3\u8F6C\u94FE\u63A5\u5982\u679C\u7528\u6237\u6CA1\u7ED9\uFF0C\u7528 \`https://\` \u5F00\u5934\u7684\u5360\u4F4D\u5730\u5740\uFF0C\u5E76\u5728\u4EE3\u7801\u5757\u4E4B\u540E\u5355\u72EC\u63D0\u9192\u7528\u6237\u66FF\u6362\u3002`;
3226
+ }
3227
+ function structureSection() {
3228
+ return `# \u9876\u5C42\u7ED3\u6784
3229
+
3230
+ \`\`\`jsonc
3231
+ {
3232
+ "version": ${DSL_VERSION},
3233
+ "type": "popup", // popup \u5F39\u7A97 | banner | notice \u516C\u544A\u6761
3234
+ "meta": { "name": "\u5907\u6CE8" },
3235
+ "stage": { ... }, // \u821E\u53F0\uFF1A\u5C3A\u5BF8\u3001\u906E\u7F69\u3001\u5173\u95ED\u6309\u94AE
3236
+ "data": { ... }, // \u6570\u636E\uFF08\u53EF\u9009\uFF09
3237
+ "state": { ... }, // \u5C40\u90E8\u72B6\u6001\uFF0C\u5982\u5F53\u524D\u9009\u4E2D\u7B2C\u51E0\u4E2A\uFF08\u53EF\u9009\uFF09
3238
+ "derived": { ... }, // \u7531 data + state \u63A8\u5BFC\u7684\u522B\u540D\uFF08\u53EF\u9009\uFF09
3239
+ "nodes": [ ... ] // \u8282\u70B9\u6811
3240
+ }
3241
+ \`\`\`
3242
+
3243
+ # stage
3244
+
3245
+ \`\`\`jsonc
3246
+ "stage": {
3247
+ "width": 520, // \u6570\u5B57=px\uFF0C\u4E5F\u53EF "100%" / "calc(100% - 48px)"
3248
+ "height": "auto", // \u6570\u5B57=px\uFF0C\u6216 "auto"
3249
+ "layout": "flow", // "absolute" \u6216 "flow"\uFF0C\u89C1\u4E0B\u9762\u300C\u5E03\u5C40\u300D
3250
+ "mask": true,
3251
+ "maskClosable": false,
3252
+ "closeButton": {
3253
+ "position": "top-right", // ${CLOSE_POSITIONS.join(" | ")}
3254
+ "offset": [12, 12], // [x, y]\uFF1B\u5199\u8D1F\u503C = \u6309\u94AE\u8DD1\u5230\u5F39\u7A97\u5916\u9762
3255
+ "size": 26,
3256
+ // icon / image \u90FD\u4E0D\u5199\u65F6\uFF0C\u753B\u7684\u662F\u5185\u7F6E\u7684\u77E2\u91CF \xD7 \u56FE\u6807 \u2014\u2014 \u9ED8\u8BA4\u5C31\u662F\u5BF9\u7684\uFF0C\u4E0D\u7528\u914D
3257
+ "style": { "background": "rgba(0,0,0,0.35)", "color": "#fff" }
3258
+ },
3259
+ "style": { "radius": 18, "maxWidth": 420 }
3260
+ }
3261
+ \`\`\`
3262
+
3263
+ **\u5173\u95ED\u6309\u94AE\u7684\u56FE\u6807\u4E0D\u8981\u778E\u914D\u3002** \u9ED8\u8BA4\u662F\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\uFF08\u4E24\u6761\u4EA4\u53C9\u7EBF\uFF0C\u5C45\u4E2D\u5BF9\u9F50\u5DF2\u7ECF\u8C03\u597D\uFF09\uFF0C
3264
+ \u7528\u6237\u6CA1\u63D0\u300C\u6362\u56FE\u6807\u300D\u5C31**\u4E0D\u8981\u5199 \`icon\`**\u2014\u2014\u5199\u6210 \`"icon": "\xD7"\` \u4F1A\u9000\u56DE\u6587\u672C\u5B57\u7B26\u6E32\u67D3\uFF0C
3265
+ \u90A3\u4E2A\u5B57\u5F62\u672C\u8EAB\u504F\u4E0A\u504F\u5C0F\uFF0C\u770B\u7740\u5C31\u662F\u6CA1\u5BF9\u9F50\u3002\u786E\u5B9E\u8981\u6362\u65F6\uFF1A
3266
+ \`"icon": "\u2715"\` \u6362\u6210\u522B\u7684\u6587\u672C\u5B57\u7B26 / emoji\uFF0C\`"image": "https://..."\` \u6362\u6210\u56FE\u7247\u3002
3267
+ \u4E09\u8005\u4F18\u5148\u7EA7\uFF1A\`image\` > \`icon\` > \u5185\u7F6E\u77E2\u91CF\u56FE\u6807\u3002`;
3268
+ }
3269
+ function layoutSection() {
3270
+ return `# \u5E03\u5C40\uFF08\u6700\u5BB9\u6613\u9519\uFF0C\u52A1\u5FC5\u770B\u61C2\uFF09
3271
+
3272
+ \u53EA\u6709\u4E24\u79CD\u6392\u5E03\u65B9\u5F0F\uFF1A
3273
+
3274
+ | \u65B9\u5F0F | \u51FA\u73B0\u5728\u54EA | \u5B50\u8282\u70B9\u600E\u4E48\u5B9A\u4F4D |
3275
+ | --- | --- | --- |
3276
+ | \u7EDD\u5BF9\u5B9A\u4F4D | \`box\` \u7684 children\uFF1B\`stage.layout: "absolute"\` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9 | **\u5FC5\u987B**\u5199 \`rect: [x, y, w, h]\` |
3277
+ | \u6D41\u5F0F | \`flex\` / \`repeat\` / \`countdown\` \u7684 children\uFF1B\`stage.layout: "flow"\` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9 | \`rect\` \u65E0\u6548\uFF0C\u7528 \`style\` \u7684 width/height/flex/padding/gap |
3278
+
3279
+ \u9009\u62E9\u89C4\u5219\uFF1A
3280
+
3281
+ - \u4E0A\u4E0B\u51E0\u4E2A\u533A\u5757\u4F9D\u6B21\u6392\uFF08**\u7EDD\u5927\u591A\u6570\u771F\u5B9E\u5F39\u7A97**\uFF09\u2192 \`layout: "flow"\` + \`height: "auto"\`\uFF0C\u6BCF\u4E2A\u533A\u5757\u662F\u4E00\u4E2A \`flex\` \u8282\u70B9
3282
+ - \u6574\u5F20\u8BBE\u8BA1\u56FE + \u51E0\u4E2A\u70ED\u533A \u2192 \`layout: "absolute"\` + \`height\` \u7ED9\u5177\u4F53\u6570\u503C
3283
+ - \u516C\u544A\u6761 / Banner \u2192 \`layout: "flow"\` + \`width: "100%"\` + \`height: "auto"\`
3284
+
3285
+ **\`height: "auto"\` \u5FC5\u987B\u914D \`layout: "flow"\`**\uFF0C\u5426\u5219\u9AD8\u5EA6\u4F1A\u584C\u6210 0\u3002
3286
+
3287
+ ## \u6574\u56FE Banner + \u70ED\u533A\uFF1A\u5BB9\u5668\u5FC5\u987B\u5199 aspectRatio
3288
+
3289
+ Banner \u5BBD\u5EA6\u662F\u767E\u5206\u6BD4\u3001\u9AD8\u5EA6\u5F97\u6309\u56FE\u7247\u6BD4\u4F8B\u7B97\u3002\u70ED\u533A\u5BB9\u5668 \`box\` \u7684\u5B50\u8282\u70B9\u662F\u7EDD\u5BF9\u5B9A\u4F4D\u7684\uFF0C\u6491\u4E0D\u8D77 \`box\` \u7684\u9AD8\u5EA6\u2014\u2014\`box\` \u9AD8\u5EA6\u662F 0\uFF0C\u70ED\u533A\u7684\u767E\u5206\u6BD4 \`rect\` \u5168\u7B97\u6210 0\uFF0C\u6574\u7247\u70ED\u533A\u5931\u6548\u3002**\u4E0D\u8981\u5199\u6B7B height**\uFF0C\u90A3\u6837\u53EA\u5728\u67D0\u4E00\u4E2A\u5C4F\u5E55\u5BBD\u5EA6\u4E0B\u5BF9\u5F97\u4E0A\uFF1A
3290
+
3291
+ \`\`\`jsonc
3292
+ // \u8BBE\u8BA1\u7A3F 1200 \xD7 300
3293
+ { "type": "box",
3294
+ "style": { "width": "100%", "aspectRatio": "1200 / 300" },
3295
+ "children": [
3296
+ { "type": "image", "rect": [0, 0, "100%", "100%"], "src": "..." },
3297
+ { "type": "box", "rect": ["70%", "58%", "22%", "24%"], "action": {...} }
3298
+ ] }
3299
+ \`\`\`
3300
+
3301
+ \u56FE\u7247\u4E0D\u662F\u5F39\u7A97\u4E13\u5C5E\uFF1A\u516C\u544A\u6761\u91CC\u653E\u5C0F\u56FE\u6807\uFF08\`image\` \u8282\u70B9 + \`style\` \u5B9A\u5BBD\u9AD8\uFF0C\u4E0D\u7528 \`rect\`\uFF09\u3001Banner \u6574\u56FE\u6253\u5E95\uFF0C\u5199\u6CD5\u90FD\u4E00\u6837\u3002`;
3302
+ }
3303
+
3304
+ // src/docs/ai-prompt/checklist.ts
3305
+ function checklistSection() {
3306
+ return `# \u8F93\u51FA\u524D\u81EA\u68C0
3307
+
3308
+ - [ ] \`version\` \u662F ${DSL_VERSION}
3309
+ - [ ] \`stage.height\` \u662F \`"auto"\` \u7684\u8BDD\uFF0C\`stage.layout\` \u5FC5\u987B\u662F \`"flow"\`
3310
+ - [ ] \u7EDD\u5BF9\u5B9A\u4F4D\u5BB9\u5668\uFF08\`box\`\u3001\u6216 \`layout: "absolute"\` \u7684 stage\uFF09\u91CC\u6BCF\u4E2A\u5B50\u8282\u70B9\u90FD\u6709 \`rect\`
3311
+ - [ ] \u6D41\u5F0F\u5BB9\u5668\u91CC\u7684\u5B50\u8282\u70B9\u6CA1\u6709\u591A\u4F59\u7684 \`rect\`
3312
+ - [ ] \u6240\u6709 \`style\` \u7684\u5C5E\u6027\u540D\u90FD\u5728\u767D\u540D\u5355\u91CC
3313
+ - [ ] \u6CA1\u6709\u4EFB\u4F55 JS \u4EE3\u7801\u3001\`javascript:\` \u94FE\u63A5\u3001\u51FD\u6570\u8C03\u7528
3314
+ - [ ] \`derived.list\` \u6307\u5411\u7684\u5B57\u6BB5\u5728 \`data\` \u91CC\u771F\u5B9E\u5B58\u5728\uFF0C\`derived.indexBy\` \u5728 \`state\` \u91CC\u5B58\u5728
3315
+ - [ ] \u7528\u4E86 \`views\` \u7684\u8BDD\uFF1A\`entry\` \u5B58\u5728\u4E8E \`views\`\uFF0C\u9876\u5C42\u6CA1\u6709\u6B8B\u7559 \`stage\`/\`nodes\`\uFF0C\u6240\u6709 \`open\` \u7684 \`view\` \u90FD\u80FD\u5BF9\u4E0A
3316
+ - [ ] \`repeat.bind\` \u6307\u5411\u7684\u662F\u6570\u7EC4
3317
+ - [ ] \u6BCF\u4E2A\u53EF\u70B9\u51FB\u5143\u7D20\u90FD\u6709 \`action\`\uFF0C\u4E14\u5E26 \`track\` \u57CB\u70B9
3318
+ - [ ] **\u9010\u4E2A\u6838\u5BF9\u6BCF\u4E00\u4E2A \`track\` \u7684 \`event\`**\uFF1A\u5339\u914D \`${String(TRACK_EVENT_PATTERN.source)}\`\uFF0C
3319
+ \u5373\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934 + \u53EA\u542B\u5C0F\u5199\u5B57\u6BCD/\u6570\u5B57/\u4E0B\u5212\u7EBF + \u957F\u5EA6 3~64\uFF0C\u63A8\u8350 \`\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C\`\uFF08\u5982 \`banner_renew_click\`\uFF09\u3002
3320
+ \u6709\u4E00\u4E2A\u4E0D\u5408\u89C4\uFF0C\u6574\u4EFD\u914D\u7F6E\u5C31\u5B58\u4E0D\u4E0A
3321
+ - [ ] \u6BCF\u4E2A\u89C6\u56FE\u7684 \`stage\` \u90FD\u6709 \`onShow\` \u66DD\u5149\u57CB\u70B9\u548C \`onClose\` \u5173\u95ED\u57CB\u70B9\uFF0C\`onClose\` \u7684 params \u91CC\u5E26\u4E0A \`"reason": "{{ closeReason }}"\`
3322
+ - [ ] \u5173\u95ED\u6309\u94AE\u6CA1\u6709\u591A\u4F59\u7684 \`icon\`\uFF08\u9ED8\u8BA4\u7684\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\u5C31\u662F\u5BF9\u7684\uFF09
3323
+ - [ ] \u8F93\u51FA\u7684\u662F\u5408\u6CD5 JSON\uFF08\u6CA1\u6709\u591A\u4F59\u9017\u53F7\u3001\u6CA1\u6709\u6CE8\u91CA\uFF09`;
3324
+ }
3325
+ function requirementSection() {
3326
+ return `# \u7528\u6237\u9700\u6C42
3327
+
3328
+ \u628A\u4F60\u7684\u9700\u6C42\u5199\u5728\u4E0B\u9762\uFF0C\u8D8A\u5177\u4F53\u8D8A\u597D\u3002\u5EFA\u8BAE\u8BF4\u6E05\u695A\uFF1A
3329
+
3330
+ - \u4EC0\u4E48\u573A\u666F\uFF08\u7EED\u8D39\u63D0\u9192 / \u6D3B\u52A8\u63A8\u5E7F / \u529F\u80FD\u516C\u544A\u2026\uFF09
3331
+ - \u5F39\u7A97\u8FD8\u662F\u516C\u544A\u6761\uFF0C\u5927\u6982\u591A\u5927
3332
+ - \u8981\u5C55\u793A\u54EA\u4E9B\u5185\u5BB9\uFF08\u6807\u9898\u3001\u56FE\u3001\u4EF7\u683C\u6863\u4F4D\u3001\u5012\u8BA1\u65F6\u2026\uFF09
3333
+ - \u70B9\u4E86\u6309\u94AE\u53BB\u54EA\u4E2A\u94FE\u63A5
3334
+ - \u6709\u6CA1\u6709\u9700\u8981\u5207\u6362\u7684\u9009\u9879\uFF08\u6BD4\u5982\u9009\u4E0D\u540C\u5957\u9910\uFF09
3335
+
3336
+ ---
3337
+
3338
+ \uFF08\u5728\u8FD9\u91CC\u5199\u4F60\u7684\u9700\u6C42\uFF09`;
3339
+ }
3340
+
3341
+ // src/docs/ai-prompt/actions.ts
3342
+ function actionSection() {
3343
+ return `# \u52A8\u4F5C
3344
+
3345
+ \u53EF\u7528 type\uFF1A${ACTION_TYPES.join(" / ")}
3346
+
3347
+ \`\`\`jsonc
3348
+ "action": {
3349
+ "type": "sequence",
3350
+ "actions": [
3351
+ { "type": "track", "event": "popup_renew_click", "params": { "plan": "{{ current.key }}" } },
3352
+ { "type": "navigate", "url": "{{ current.url }}", "target": "_blank" }
3353
+ ]
3354
+ }
3355
+ \`\`\`
3356
+
3357
+ - \`setState\`\uFF1A\`{ "type": "setState", "key": "period", "value": "{{ index }}" }\` \u505A\u9009\u4E2D\u5207\u6362
3358
+ - \`close\`\uFF1A\u5173\u6389\u5F53\u524D\u8FD9\u4E00\u5C42\uFF08\u53EA\u6709\u4E00\u5C42\u65F6\u5C31\u662F\u6574\u4F53\u5173\u95ED\uFF09\u3002\u6CE8\u610F\u5B83\u53EA\u662F**\u901A\u77E5\u5BBF\u4E3B\u9875\u9762**\u300C\u7528\u6237\u60F3\u5173\u4E86\u300D\uFF0C\u7531\u5BBF\u4E3B\u51B3\u5B9A\u5173\u4E0D\u5173\uFF1B\u591A\u89C6\u56FE\u65F6\u5173\u5185\u5C42\u4E0D\u4F1A\u901A\u77E5\u5BBF\u4E3B\uFF0C\u53EA\u662F\u56DE\u5230\u4E0B\u9762\u90A3\u5C42
3359
+ - \`closeAll\`\uFF1A\u51E0\u5C42\u90FD\u5173\u6389\uFF0C\u4E00\u5B9A\u4F1A\u901A\u77E5\u5BBF\u4E3B
3360
+ - \u60F3\u300C\u5173\u4E86\u5C31\u522B\u518D\u51FA\u73B0\u300D\uFF0C\u5149 \`close\` \u4E0D\u591F\uFF0C\u8981\u518D\u914D\u4E00\u6761 \`{ "type": "call", "name": "setNeverRemind" }\` \u8BA9\u5BBF\u4E3B\u8BB0\u4E0B\u6765
3361
+ - \`open\`\uFF1A\u6253\u5F00\u53E6\u4E00\u4E2A\u89C6\u56FE\uFF0C\u89C1\u4E0B\u4E00\u8282
3362
+ - \u4EFB\u4F55\u8282\u70B9\u52A0 \`action\` \u90FD\u80FD\u70B9\u51FB
3363
+ - **\u6BCF\u4E2A\u53EF\u70B9\u51FB\u5143\u7D20\u90FD\u5E94\u8BE5\u914D \`track\`**\uFF0C\u5426\u5219\u6CA1\u6709\u6570\u636E\u53EF\u770B
3364
+
3365
+ ## track \u7684\u4E8B\u4EF6\u540D\u6709\u786C\u6027\u683C\u5F0F\uFF08\u5199\u9519\u6574\u4EFD\u914D\u7F6E\u5B58\u4E0D\u4E0A\uFF09
3366
+
3367
+ \`event\` \u5FC5\u987B\u5339\u914D \`${String(TRACK_EVENT_PATTERN.source)}\`\uFF1A**\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934**\uFF0C
3368
+ \u4E4B\u540E\u53EA\u80FD\u662F**\u5C0F\u5199\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF**\uFF0C\u603B\u957F **3~64** \u4E2A\u5B57\u7B26\u3002
3369
+
3370
+ \u8FD9\u662F **error \u7EA7\u6821\u9A8C\uFF0C\u4F1A\u76F4\u63A5\u963B\u65AD\u4FDD\u5B58**\uFF0C\u4E0D\u662F\u8B66\u544A\u3002\u4E2D\u6587\u3001\u9A7C\u5CF0\u3001\u4E2D\u5212\u7EBF\u3001\u7A7A\u683C\u5168\u90FD\u8FC7\u4E0D\u4E86\u3002
3371
+ \u8FD9\u6761\u662F AI \u751F\u6210\u7684\u914D\u7F6E\u6700\u5E38\u8E29\u7684\u5751\u2014\u2014\u6392\u7248\u5168\u5BF9\uFF0C\u5C31\u56E0\u4E3A\u4E8B\u4EF6\u540D\u5199\u6210 \`\u7EED\u8D39\u70B9\u51FB\` \u800C\u767D\u5E72\u4E00\u904D\u3002
3372
+
3373
+ | \u2705 \u6B63\u786E | \u274C \u9519\u8BEF | \u4E3A\u4EC0\u4E48 |
3374
+ | --- | --- | --- |
3375
+ | \`banner_renew_click\` | \`\u7EED\u8D39\u70B9\u51FB\` | \u4E0D\u80FD\u7528\u4E2D\u6587 |
3376
+ | \`popup_show\` | \`bannerRenewClick\` | \u4E0D\u80FD\u7528\u9A7C\u5CF0 / \u5927\u5199\u5B57\u6BCD |
3377
+ | \`countdown_end\` | \`banner-renew-click\` | \u4E0D\u80FD\u7528\u4E2D\u5212\u7EBF\uFF0C\u5206\u8BCD\u4E00\u5F8B\u7528\u4E0B\u5212\u7EBF |
3378
+ | \`cta_click_v2\` | \`cta\` | \u4E0D\u8DB3 3 \u4E2A\u5B57\u7B26 |
3379
+ | \`notice_close\` | \`1_click\` | \u5FC5\u987B\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934 |
3380
+ | \`vip_renew_click\` | \`vip renew click\` | \u4E0D\u80FD\u6709\u7A7A\u683C |
3381
+
3382
+ **\u5EFA\u8BAE\u6309\u300C\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C\u300D\u4E09\u6BB5\u547D\u540D**\uFF08\u540E\u7AEF\u6309\u524D\u7F00\u805A\u5408\uFF0C\u540C\u4E00\u573A\u6D3B\u52A8\u5171\u7528\u4E00\u4E2A\u524D\u7F00\u624D\u80FD\u5206\u7EC4\u7EDF\u8BA1\uFF09\uFF1A
3383
+
3384
+ \`\`\`
3385
+ banner_renew_click // \u7EED\u8D39 Banner \u88AB\u70B9\u51FB
3386
+ popup_vip_show // \u4F1A\u5458\u5F39\u7A97\u66DD\u5149
3387
+ popup_vip_close // \u4F1A\u5458\u5F39\u7A97\u5173\u95ED
3388
+ notice_autumn_close // \u79CB\u5B63\u6D3B\u52A8\u516C\u544A\u6761\u88AB\u5173\u6389
3389
+ countdown_end // \u5012\u8BA1\u65F6\u5F52\u96F6
3390
+ \`\`\`
3391
+
3392
+ \u8981\u533A\u5206\u5177\u4F53\u6863\u4F4D\u3001\u5177\u4F53\u6309\u94AE\uFF0C\u653E \`params\` \u91CC\uFF0C\u4E0D\u8981\u5F80\u4E8B\u4EF6\u540D\u4E0A\u5806\u3002
3393
+
3394
+ ## \u66DD\u5149\u57CB\u70B9\u548C\u5173\u95ED\u57CB\u70B9
3395
+
3396
+ \u53EA\u7ED9\u6309\u94AE\u57CB\u70B9\u662F\u4E0D\u591F\u7684\u3002**\u6BCF\u4E2A\u89C6\u56FE\u7684 \`stage\` \u90FD\u8981\u5199 \`onShow\` \u548C \`onClose\`**\uFF0C\u5426\u5219\u7B97\u4E0D\u51FA\u5F39\u7A97\u7684\u8F6C\u5316\u7387\uFF1A
3397
+
3398
+ \`\`\`jsonc
3399
+ "stage": {
3400
+ "width": 420, "height": "auto", "layout": "flow",
3401
+ "onShow": { "type": "track", "event": "popup_renew_show",
3402
+ "params": { "popup": "renew" } },
3403
+ "onClose": { "type": "track", "event": "popup_renew_close",
3404
+ "params": { "popup": "renew", "reason": "{{ closeReason }}" } }
3405
+ }
3406
+ \`\`\`
3407
+
3408
+ - \`onShow\` \u5728\u6570\u636E\u5C31\u7EEA\u3001\u5F39\u7A97\u771F\u6B63\u6E32\u67D3\u51FA\u6765\u65F6\u89E6\u53D1\u4E00\u6B21
3409
+ - \`onClose\` \u5728\u70B9 X\u3001\u70B9\u906E\u7F69\u3001\u8D70 \`close\` \u52A8\u4F5C\u3001\u88AB \`replace\` \u9876\u6389\u65F6\u90FD\u4F1A\u89E6\u53D1
3410
+ - \`{{ closeReason }}\` \u53D6\u503C\uFF1A\`close-button\` / \`mask\` / \`replace\` / \`close\` \u52A8\u4F5C\u81EA\u5E26\u7684 \`reason\`\uFF08\u5982 \`"never-remind"\`\uFF09/ \u9ED8\u8BA4 \`action\`
3411
+ - \u591A\u89C6\u56FE\u65F6\u6BCF\u5C42\u5404\u5199\u5404\u7684\uFF0C\u624D\u80FD\u5206\u5F00\u7EDF\u8BA1
3412
+
3413
+ ## \u516C\u544A\u6761 / Banner \u7684\u5173\u95ED
3414
+
3415
+ \u516C\u544A\u6761**\u4E0D\u8981\u7528 \`stage.closeButton\`**\uFF08\u90A3\u662F\u538B\u5728\u89D2\u4E0A\u7684\u5706\u5F62\u6309\u94AE\uFF0C\u4E3A\u6574\u56FE\u5F39\u7A97\u8BBE\u8BA1\u7684\uFF09\u3002\u5728\u884C\u672B\u653E\u4E00\u4E2A\u5E26 \`close\` \u52A8\u4F5C\u7684 \`text\` \u8282\u70B9\uFF1A
3416
+
3417
+ \`\`\`jsonc
3418
+ { "type": "text", "content": "\u2715",
3419
+ "style": { "alignSelf": "center", "width": 22, "height": 22,
3420
+ "textAlign": "center", "lineHeight": 22, "cursor": "pointer" },
3421
+ "action": { "type": "sequence", "actions": [
3422
+ { "type": "track", "event": "notice_guide_close" },
3423
+ { "type": "call", "name": "setNeverRemind" },
3424
+ { "type": "close", "reason": "user-dismiss" }
3425
+ ] } }
3426
+ \`\`\`
3427
+
3428
+ \`close\` \u53EA\u901A\u77E5\u5BBF\u4E3B\u300C\u7528\u6237\u5173\u6389\u4E86\u300D\uFF0C\u8981\u8BA9\u5B83\u522B\u518D\u51FA\u73B0\u5F97\u914D\u4E00\u6761 \`call\`\u3002
3429
+ \u6574\u6761\u53EF\u70B9 + \u884C\u672B \xD7 \u4E0D\u4F1A\u51B2\u7A81\uFF1A\u5185\u5C42\u6709\u81EA\u5DF1\u7684 \`action\` \u5C31\u4E0D\u518D\u5192\u6CE1\u7ED9\u5916\u5C42\u3002`;
3430
+ }
3431
+ function viewsSection() {
3432
+ return `# \u591A\u89C6\u56FE\uFF08\u4E00\u4EFD\u914D\u7F6E\u91CC\u653E\u51E0\u4E2A\u5F39\u7A97\uFF09
3433
+
3434
+ \u9ED8\u8BA4\u4E00\u4EFD\u914D\u7F6E\u5C31\u662F\u4E00\u4E2A\u5F39\u7A97\u3002\u7528\u6237\u8981\u300C\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u300D\u300C\u4E0D\u518D\u63D0\u9192\u518D\u5F39\u4E2A\u786E\u8BA4\u300D
3435
+ \u300C\u4E3B\u5F39\u7A97\u548C\u8BE6\u60C5\u5C4F\u6765\u56DE\u5207\u300D\u65F6\uFF0C\u628A \`type\`/\`stage\`/\`nodes\` \u632A\u8FDB \`views\`\uFF0C\u52A0 \`entry\`\uFF1A
3436
+
3437
+ \`\`\`jsonc
3438
+ {
3439
+ "version": ${DSL_VERSION},
3440
+ "entry": "bar",
3441
+ "data": {...}, "state": {...}, "derived": {...}, // \u5168\u5C40\u5171\u4EAB\uFF0C\u8DE8\u89C6\u56FE
3442
+ "views": {
3443
+ "bar": { "type": "notice", "stage": {...}, "nodes": [...] },
3444
+ "renew": { "type": "popup", "stage": {...}, "nodes": [...] },
3445
+ "confirm": { "type": "popup", "stage": {...}, "nodes": [...] }
3446
+ }
3447
+ }
3448
+ \`\`\`
3449
+
3450
+ \u5207\u6362\u5199\u6CD5\uFF1A
3451
+
3452
+ | \u5199\u6CD5 | \u6548\u679C |
3453
+ | --- | --- |
3454
+ | \`{ "type": "open", "view": "renew" }\` | \u53E0\u4E00\u5C42\uFF0C\u4E0B\u9762\u90A3\u5C42\u8FD8\u5728\uFF08\u9ED8\u8BA4 stack\uFF09 |
3455
+ | \`{ "type": "open", "view": "unlock", "mode": "replace" }\` | \u6362\u6389\u5F53\u524D\u5C42\uFF0C\u5C42\u6570\u4E0D\u53D8 |
3456
+ | \`{ "type": "close" }\` | \u5173\u6389\u5F53\u524D\u5C42\uFF0C\u56DE\u5230\u4E0A\u4E00\u5C42 |
3457
+ | \`{ "type": "closeAll" }\` | \u51E0\u5C42\u90FD\u5173\u6389 |
3458
+
3459
+ \u89C4\u5219\uFF1A
3460
+
3461
+ - \u7528\u4E86 \`views\` \u4E4B\u540E\uFF0C\`stage\` / \`nodes\` **\u4E0D\u80FD\u518D\u7559\u5728\u9876\u5C42**
3462
+ - \`entry\` \u5FC5\u586B\uFF0C\u4E14\u5FC5\u987B\u662F \`views\` \u91CC\u5B58\u5728\u7684 key
3463
+ - \`open\` \u7684 \`view\` \u5FC5\u987B\u662F \`views\` \u91CC\u5B58\u5728\u7684 key
3464
+ - \u53EA\u6709\u6700\u4E0A\u9762\u90A3\u5C42\u4F1A\u753B\u906E\u7F69\uFF0C\u4E0B\u9762\u7684\u5C42\u8FD8\u770B\u5F97\u89C1\u4F46\u70B9\u4E0D\u52A8
3465
+ - \`state\` \u5168\u5C40\u5171\u4EAB\uFF1A\u4E3B\u5C4F\u9009\u4E2D\u7684\u4E1C\u897F\uFF0C\u5F39\u51FA\u6765\u7684\u786E\u8BA4\u6846\u76F4\u63A5\u8BFB\u5F97\u5230`;
3466
+ }
3467
+ function countdownSection() {
3468
+ return `# \u5012\u8BA1\u65F6
3469
+
3470
+ \`to\` \u662F\u7ED3\u675F\u65F6\u95F4\u3002**\u7528\u6237\u8BF4\u300C9\u67081\u53F7\u622A\u6B62\u300D\u5C31\u76F4\u63A5\u5199 \`"2026-09-01"\`\uFF0C\u4E0D\u8981\u81EA\u4F5C\u4E3B\u5F20\u6362\u7B97\u6210\u65F6\u95F4\u6233** \u2014\u2014 \u8FD0\u8425\u770B\u4E0D\u61C2\u65F6\u95F4\u6233\uFF0C\u4E5F\u6CA1\u6CD5\u6838\u5BF9\u3002
3471
+
3472
+ \u80FD\u8BC6\u522B\u7684\u5199\u6CD5\uFF1A\`"2026-09-01 18:00:00"\`\u3001\`"2026-09-01"\`\u3001\`"2026\u5E749\u67081\u65E5 18\u70B9"\`\u3001ISO\uFF08\`"2026-09-01T18:00:00+08:00"\`\uFF09\u3001\u6BEB\u79D2\u65F6\u95F4\u6233\u3001\`"{{ user.trialEndAt }}"\`\u3002
3473
+
3474
+ \u5199\u6210 \`"\u4E0B\u5468\u4E09"\` \u8FD9\u79CD\u8BC6\u522B\u4E0D\u4E86\u7684\u4F1A\u5728\u4FDD\u5B58\u524D\u62A5\u9519\u3002
3475
+
3476
+ \u5F52\u96F6\u65F6\u53EF\u4EE5\u505A\u70B9\u4EC0\u4E48\uFF0C\u7528 \`onEnd\`\uFF08\u4EFB\u610F\u52A8\u4F5C\uFF09\uFF1A\`{ "type": "track", "event": "countdown_end" }\` \u4E0A\u62A5\u3001\`{ "type": "close" }\` \u81EA\u52A8\u5173\u5F39\u7A97\u3001\`{ "type": "open", "view": "expired", "mode": "replace" }\` \u6362\u5C4F\u3002**\u53EA\u5728\u7528\u6237\u773C\u770B\u7740\u5B83\u5F52\u96F6\u65F6\u89E6\u53D1**\uFF0C\u6253\u5F00\u65F6\u5C31\u5DF2\u7ECF\u8FC7\u671F\u7684\u4E0D\u89E6\u53D1\u3002
3477
+
3478
+ \u60F3\u8BA9\u300C\u5DF2\u7ED3\u675F\u300D\u663E\u793A\u6210\u53E6\u4E00\u5957\u6392\u7248\uFF0C\u7528 \`cd.ended\` \u914D \`visibleWhen\`\uFF0C\u4E0D\u8981\u7528 \`onEnd\`\u3002
3479
+
3480
+ \`\`\`jsonc
3481
+ {
3482
+ "type": "countdown",
3483
+ "to": "2026-09-01 18:00:00", // \u4E5F\u53EF\u4EE5\u5199 "{{ user.trialEndAt }}" \u4ECE\u6570\u636E\u53D6
3484
+ "precision": "s", // "s" \u6BCF\u79D2 | "cs" \u5398\u79D2\u9010\u5E27\uFF08\u7D27\u8FEB\u611F\u66F4\u5F3A\uFF09
3485
+ "as": "cd",
3486
+ "style": { "align": "center", "gap": 6 },
3487
+ "children": [
3488
+ { "type": "text", "content": "{{ cd.h }}", "style": { "width": 42, "textAlign": "center", "fontVariantNumeric": "tabular-nums" } },
3489
+ { "type": "text", "content": ":" },
3490
+ { "type": "text", "content": "{{ cd.m }}", "style": { "width": 42, "textAlign": "center", "fontVariantNumeric": "tabular-nums" } },
3491
+ { "type": "text", "content": ":" },
3492
+ { "type": "text", "content": "{{ cd.s }}", "style": { "width": 42, "textAlign": "center", "fontVariantNumeric": "tabular-nums" } }
3493
+ ]
3494
+ }
3495
+ \`\`\`
3496
+
3497
+ \u53EF\u7528\u7247\u6BB5\uFF1A\`cd.d\`(\u5929) \`cd.h\`(\u65F60-23) \`cd.hAll\`(\u603B\u5C0F\u65F6) \`cd.m\` \`cd.s\` \`cd.cs\`(\u5398\u79D2) \`cd.ended\`\u3002
3498
+ \u9010\u5E27\u53D8\u5316\u7684\u6570\u5B57\u4E00\u5B9A\u8981\u52A0 \`"fontVariantNumeric": "tabular-nums"\`\uFF0C\u5426\u5219\u6570\u5B57\u4F1A\u5DE6\u53F3\u6296\u3002`;
3499
+ }
3500
+
3501
+ // src/docs/ai-prompt/nodes.ts
3502
+ function nodesSection() {
3503
+ return `# \u8282\u70B9\u7C7B\u578B
3504
+
3505
+ \u53EF\u7528 type\uFF1A${NODE_TYPES.join(" / ")}
3506
+
3507
+ \u516C\u5171\u5B57\u6BB5\uFF1A\`id\` \`type\` \`rect\` \`style\` \`visibleWhen\` \`action\`
3508
+
3509
+ | type | \u7528\u9014 | \u5FC5\u586B\u5B57\u6BB5 |
3510
+ | --- | --- | --- |
3511
+ | flex | \u5BB9\u5668\uFF0Cchildren \u6D41\u5F0F\u6392\u5217\uFF08\u6700\u5E38\u7528\uFF09 | children |
3512
+ | box | \u5BB9\u5668\uFF0Cchildren \u7EDD\u5BF9\u5B9A\u4F4D\uFF08\u7528\u4E8E\u89D2\u6807\u538B\u8FB9\u6846\u7B49\u7CBE\u7EC6\u6392\u7248\uFF09 | children |
3513
+ | repeat | \u7ED1\u5B9A\u6570\u7EC4\u5FAA\u73AF\uFF0C\u6570\u636E\u51E0\u6761\u6E32\u67D3\u51E0\u6761 | bind, template |
3514
+ | text | \u6587\u672C\uFF1B\u4E5F\u7528\u6765\u505A\u8272\u5757\u3001\u5706\u70B9\u3001\u6807\u7B7E | content |
3515
+ | image | \u56FE\u7247 | src |
3516
+ | button | \u6309\u94AE | text |
3517
+ | tabs | \u9009\u9879\u5361\uFF0C\u70B9\u51FB\u5199\u5165 state[stateKey] | bind, stateKey |
3518
+ | countdown | \u5012\u8BA1\u65F6\u5BB9\u5668\uFF0C\u89C1\u4E0B | to |
3519
+
3520
+ **\u6CA1\u6709\u5BCC\u6587\u672C\u8282\u70B9\u3002** \u4E00\u884C\u91CC\u6DF7\u6392\u591A\u79CD\u5B57\u53F7\uFF08\u5982\u300C\u5DF2\u8865\u9F50 **42** \u5F20\u300D\uFF09\uFF0C
3521
+ \u7528 \`flex\` + \`"align": "baseline"\` \u653E\u51E0\u4E2A \`text\` \u8282\u70B9\uFF0C\u5404\u81EA\u8BBE\u4E0D\u540C \`fontSize\`\u3002
3522
+ \u52A0\u7C97\u540C\u7406\uFF0C\u62C6\u6210\u4E24\u4E2A \`text\`\uFF0C\u4E00\u4E2A\u8BBE \`"fontWeight": "700"\`\u3002`;
3523
+ }
3524
+ function styleSection() {
3525
+ return `# style \u767D\u540D\u5355
3526
+
3527
+ \u53EA\u80FD\u7528\u8FD9\u4E9B\uFF08\u7528\u522B\u7684\u4F1A\u88AB\u4E22\u5F03\uFF09\uFF1A
3528
+
3529
+ ${ALLOWED_STYLE_KEYS.map((key) => "`" + key + "`").join(" ")}
3530
+
3531
+ \u6CE8\u610F\u547D\u540D\u548C CSS \u4E0D\u5B8C\u5168\u4E00\u6837\uFF1A\`radius\` \u4E0D\u662F borderRadius\uFF0C\`shadow\` \u4E0D\u662F boxShadow\uFF0C
3532
+ \`direction\` \u4E0D\u662F flexDirection\u3002
3533
+
3534
+ \u5E38\u89C1\u5751\uFF1A
3535
+
3536
+ - flex \u5217\u5BB9\u5668\u7684\u5B50\u9879\u9ED8\u8BA4\u88AB\u62C9\u6EE1\u6574\u884C\uFF0C\u6807\u7B7E\u7C7B\u5143\u7D20\u8981\u5199 \`"alignSelf": "flex-start"\`
3537
+ - \u5927\u5B57\u53F7\u6587\u672C\u8981\u663E\u5F0F\u5199 \`lineHeight\`\uFF0C\u5426\u5219\u9ED8\u8BA4\u884C\u9AD8\u4F1A\u628A\u5BB9\u5668\u6491\u9AD8
3538
+ - \u957F\u5EA6\u503C\uFF1A\u6570\u5B57=px\uFF0C\u5B57\u7B26\u4E32\u53EF\u7528 \`"100%"\` \`"auto"\` \`"2rem"\` \`"calc(100% - 48px)"\` \`"10px 14px"\``;
3539
+ }
3540
+ function dataSection() {
3541
+ return `# \u6570\u636E\u3001\u72B6\u6001\u3001\u8054\u52A8
3542
+
3543
+ \`\`\`jsonc
3544
+ "data": { "tiers": [ { "key": "month", "p": "\u6708\u4ED8", "price": "15", "url": "https://..." } ] },
3545
+ "state": { "period": 1 },
3546
+ "derived": { "current": { "list": "tiers", "indexBy": "period" } }
3547
+ \`\`\`
3548
+
3549
+ \u4E4B\u540E\u4EFB\u610F\u8282\u70B9\u91CC\u7528 \`{{ current.price }}\` \`{{ current.url }}\`\uFF0C
3550
+ \u5207\u6362\u65F6\u4EF7\u683C\u3001\u94FE\u63A5\u3001\u57CB\u70B9\u53C2\u6570\u5168\u90E8\u81EA\u52A8\u8054\u52A8\uFF0C\u7248\u5F0F\u53EA\u9700\u8981\u6392\u4E00\u904D\u3002
3551
+
3552
+ \u6570\u636E\u8981\u4ECE\u540E\u7AEF\u53D6\u65F6\u5199 \`"tiers": { "$source": "\u6570\u636E\u6E90\u540D", "params": {} }\`\uFF0C
3553
+ \u6570\u636E\u6E90\u540D\u5FC5\u987B\u662F\u540E\u7AEF\u5DF2\u6CE8\u518C\u7684\uFF0C**\u4E0D\u80FD\u5199\u63A5\u53E3\u5730\u5740**\u3002\u7528\u6237\u6CA1\u8BF4\u5C31\u7528\u5199\u6B7B\u7684\u6570\u636E\u3002
3554
+
3555
+ # \u8868\u8FBE\u5F0F
3556
+
3557
+ \u80FD\u8BFB\u5230\uFF1A\`data\` \u7684\u5B57\u6BB5\uFF08\u76F4\u63A5\u5728\u9876\u5C42\uFF09\u3001\`state.xxx\`\u3001\`user.xxx\`\uFF08\u5F53\u524D\u7528\u6237\u4FE1\u606F\uFF09\u3001
3558
+ \`derived\` \u7684\u522B\u540D\u3001\`item\`/\`index\`\uFF08repeat \u5185\uFF09\u3001\`cd.xxx\`\uFF08countdown \u5185\uFF09\u3002
3559
+
3560
+ \`{{ }}\` \u53EF\u7528\u4E8E \`content\` \`src\` \`text\` \`to\`\u3001**\`style\` \u7684\u6BCF\u4E2A\u503C**\u3001\u4EE5\u53CA\u52A8\u4F5C\u7684 \`url\`/\`event\`/\`params\`\u3002
3561
+
3562
+ \u652F\u6301\uFF1A\u53D6\u503C\u3001\u5B57\u9762\u91CF\u3001\`!\` \`-\`\u3001\`+ - * / %\`\u3001\u6BD4\u8F83\u3001\`&& ||\`\u3001\u4E09\u5143 \`a ? b : c\`\u3002
3563
+ **\u4E0D\u652F\u6301\u51FD\u6570\u8C03\u7528**\u3002
3564
+
3565
+ \u9009\u4E2D\u6001\u5C31\u9760\u4E09\u5143\u5B9E\u73B0\uFF1A
3566
+
3567
+ \`\`\`jsonc
3568
+ "style": {
3569
+ "borderWidth": "{{ item.key == current.key ? '2px' : '1px' }}",
3570
+ "borderColor": "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}"
3571
+ }
3572
+ \`\`\`
3573
+
3574
+ \u6761\u4EF6\u663E\u793A\u7528 \`"visibleWhen": "current.gift != ''"\`\u3002
3575
+
3576
+ \u5207 tab \u8981\u6574\u4F53\u6362\u80A4\u65F6\uFF0C\u628A\u914D\u8272\u5199\u8FDB data \u7684\u6BCF\u4E00\u9879\uFF0C\`stage.style\` \u540C\u6837\u652F\u6301 \`{{ }}\`\uFF1A
3577
+
3578
+ \`\`\`jsonc
3579
+ "stage": { "layout": "flow", "style": { "background": "{{ current.bg }}", "radius": 16 } }
3580
+ \`\`\`
3581
+
3582
+ \u5207 tab \u8981\u6362\u6210\u5B8C\u5168\u4E0D\u540C\u7684\u6392\u7248\u65F6\uFF0C\u5199\u4E24\u5957\u8282\u70B9\u5404\u914D\u4E00\u4E2A \`visibleWhen\`\uFF08\u5982 \`current.mode == 'grid'\` / \`current.mode == 'list'\`\uFF09\uFF0C\u540C\u4E00\u65F6\u523B\u53EA\u663E\u793A\u4E00\u5957\u3002\u4E0D\u8981\u8BD5\u56FE\u7528\u4E00\u5957\u8282\u70B9\u786C\u51D1\u3002`;
3583
+ }
3584
+
3585
+ // src/docs/ai-prompt/index.ts
3586
+ function findExample(value) {
3587
+ const found = examples_default.filter((item) => item.value === value)[0];
3588
+ return found ? found.dsl : null;
3589
+ }
3590
+ function buildAiPrompt() {
3591
+ const simple = findExample("imageHotspot");
3592
+ const full = findExample("renewExpire");
3593
+ const exampleSection = `# \u5B8C\u6574\u793A\u4F8B 1 \xB7 \u6574\u56FE + \u70ED\u533A\uFF08\u6700\u7B80\u5355\uFF0C\u89C6\u89C9\u5168\u5728\u56FE\u91CC\uFF09
3594
+
3595
+ \u70ED\u533A\u5C31\u662F\u300C\u5E26 \`rect\` \u548C \`action\` \u7684\u900F\u660E \`box\`\u300D\uFF0C\u6570\u91CF\u4E0D\u9650\u3001\u4F4D\u7F6E\u5404\u81EA\u72EC\u7ACB\uFF0C\u53EF\u4EE5\u540C\u65F6\u6709\u8DF3\u8F6C\u3001\u5173\u95ED\u3001\u57CB\u70B9\u7B49\u4E0D\u540C\u52A8\u4F5C\u3002\u56FE\u4E0A\u6709\u51E0\u4E2A\u53EF\u70B9\u533A\u57DF\u5C31\u653E\u51E0\u4E2A\u3002
3596
+
3597
+ \`\`\`json
3598
+ ${JSON.stringify(simple, null, 2)}
3599
+ \`\`\`
3600
+
3601
+ # \u5B8C\u6574\u793A\u4F8B 2 \xB7 \u591A\u6863\u4F4D\u8BA2\u8D2D\u5F39\u7A97\uFF08\u542B\u540E\u7AEF\u6570\u636E\u3001\u9009\u4E2D\u8054\u52A8\u3001\u6761\u4EF6\u663E\u793A\uFF09
3602
+
3603
+ \u8FD9\u4E2A\u4F8B\u5B50\u57FA\u672C\u6DB5\u76D6\u4E86\u6240\u6709\u5E38\u89C1\u9700\u6C42\uFF0C\u6539\u5B83\u6BD4\u4ECE\u96F6\u5199\u66F4\u5FEB\u3002
3604
+
3605
+ \`\`\`json
3606
+ ${JSON.stringify(full, null, 2)}
3607
+ \`\`\``;
3608
+ return [
3609
+ roleSection(),
3610
+ structureSection(),
3611
+ layoutSection(),
3612
+ nodesSection(),
3613
+ styleSection(),
3614
+ dataSection(),
3615
+ actionSection(),
3616
+ viewsSection(),
3617
+ countdownSection(),
3618
+ exampleSection,
3619
+ checklistSection(),
3620
+ requirementSection()
3621
+ ].join("\n\n");
3622
+ }
3623
+
3624
+ export { buildAiPrompt, examples_default as examples, meta_default as meta, reconcileRows, sections_default as sections, toMarkdown };