@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.
- package/README.md +43 -1
- package/dist/chunk-FKZKLCVV.js +968 -0
- package/dist/docs/index.cjs +3726 -0
- package/dist/docs/index.d.cts +170 -0
- package/dist/docs/index.d.ts +170 -0
- package/dist/docs/index.js +3624 -0
- package/dist/index.cjs +118 -15
- package/dist/index.d.cts +17 -283
- package/dist/index.d.ts +17 -283
- package/dist/index.js +86 -949
- package/dist/types-BgUaJUAu.d.cts +293 -0
- package/dist/types-BgUaJUAu.d.ts +293 -0
- package/package.json +6 -1
|
@@ -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 };
|