@yaoxiu/marketing-dsl 2.4.0 → 2.6.0

package/dist/docs/index.cjs

@@ -860,7 +860,12 @@ var sections4 = [
       {
         t: "note",
         tone: "info",
-        text: "**\u76EE\u524D\u5DF2\u6CE8\u518C\u7684\u6570\u636E\u6E90**\uFF1A`shopAchievements`\uFF08\u5E97\u94FA\u6210\u679C\u7EDF\u8BA1\uFF0C\u8FD4\u56DE\u9879\u5B57\u6BB5 `v` \u52A8\u8BCD / `n` \u6570\u5B57 / `u` \u5355\u4F4D / `l` \u8BF4\u660E\uFF0C\u793A\u4F8B \u2462\u2463 \u7684\u6210\u679C\u683C\u5B50\u7528\u7684\u5C31\u662F\u5B83\uFF09\u3001`listRenewTiers`\uFF08\u7EED\u8D39\u4EF7\u683C\u6863\u4F4D\uFF0C\u5B57\u6BB5 `key` / `p` / `price` / `per` / `flag` / `hot` / `url`\uFF0C\u89C1\u793A\u4F8B \u2462\uFF09\u3002\u8981\u65B0\u7684\u627E\u524D\u7AEF\u767B\u8BB0\u3002"
+        text: "**\u76EE\u524D\u5DF2\u6CE8\u518C\u7684\u6570\u636E\u6E90**\uFF1A`userStatistics`\uFF08\u7528\u6237\u6570\u636E\u7EDF\u8BA1\uFF0C\u8FD4\u56DE\u4E00\u4E2A**\u6241\u5E73\u5BF9\u8C61**\u800C\u4E0D\u662F\u6570\u7EC4\uFF0C\u5B57\u6BB5\u540D\u5C31\u662F\u540E\u7AEF\u7684 snake_case\uFF0C\u5982 `move_success_count` \u7D2F\u8BA1\u642C\u5BB6\u6210\u529F\u6570 / `balance` \u642C\u5BB6\u6B21\u6570\u4F59\u989D / `ai_optimize_count` AI \u81EA\u52A8\u4F18\u5316\u6B21\u6570 / `white_image_fill_count` \u8865\u767D\u5E95\u56FE\u6B21\u6570\uFF0C\u793A\u4F8B \u2462\u2463 \u7684\u6210\u679C\u683C\u5B50\u7528\u7684\u5C31\u662F\u5B83\uFF09\u3001`listRenewTiers`\uFF08\u7EED\u8D39\u4EF7\u683C\u6863\u4F4D**\u6570\u7EC4**\uFF0C\u9879\u5B57\u6BB5 `key` / `p` / `price` / `per` / `flag` / `hot` / `url`\uFF0C\u89C1\u793A\u4F8B \u2462\uFF09\u3002\u8981\u65B0\u7684\u627E\u524D\u7AEF\u767B\u8BB0\u3002"
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '**\u8FD4\u56DE\u6241\u5E73\u5BF9\u8C61\u7684\u6570\u636E\u6E90\uFF08\u5982 `userStatistics`\uFF09\u4E0D\u80FD\u7528 `repeat` \u7684 `bind` \u904D\u5386**\uFF0C\u683C\u5B50\u53EA\u80FD\u4E00\u4E2A\u4E2A\u5199\uFF0C\u6BCF\u683C\u76F4\u63A5\u63D2\u503C `{{ stat.move_success_count }}`\u3002\u4E5F\u4E0D\u8981\u8BD5\u56FE\u5728 `data` \u7684\u5199\u6B7B\u6570\u7EC4\u91CC\u585E `{{ }}` \u518D\u9760 `bind` \u5C55\u5F00 \u2014\u2014 `data` \u91CC\u7684\u9759\u6001\u503C\u539F\u6837\u5B58\uFF0C`{{ }}` \u53EA\u5728\u6E32\u67D3\u8282\u70B9\u65F6\u6C42\u503C\u4E00\u6B21\uFF0C`{{ item.n }}` \u6C42\u51FA\u6765\u662F\u5B57\u7B26\u4E32 `"{{ stat.xxx }}"`\uFF0C**\u4E0D\u4F1A\u4E8C\u6B21\u6C42\u503C**\uFF0C\u9875\u9762\u4E0A\u4F1A\u539F\u6837\u663E\u793A\u8FD9\u4E00\u4E32\u82B1\u62EC\u53F7\u3002'
       },
       {
         t: "p",
@@ -1830,7 +1835,8 @@ var changelog = [
       "`zIndex` \u73B0\u5728\u4F1A\u81EA\u52A8\u5E26\u4E0A\u5B9A\u4F4D\u65B9\u5F0F\uFF1A`z-index` \u5BF9\u9759\u6001\u5143\u7D20\u662F\u6B7B\u58F0\u660E\uFF0C\u5199\u4E86\u4E0D\u751F\u6548\u3002\u6D41\u5F0F\u6392\u7248\u91CC\u9760\u8D1F `marginTop` \u5F80\u4E0A\u76D6\u7684\u5757\uFF08\u5982\u538B\u4F4F\u7EA2\u5934\u4E0B\u6CBF\u7684\u767D\u8272\u4E3B\u4F53\uFF09\u5FC5\u987B\u6709\u5C42\u7EA7\u624D\u76D6\u5F97\u4F4F\uFF0C\u914D\u4E86 `zIndex` \u5373\u53EF\uFF0C\u4E0D\u7528\uFF08\u4E5F\u6CA1\u6CD5\uFF09\u53E6\u914D `position`",
       "\u3010\u4FEE\u590D\u3011\u5F39\u51FA\u7B2C\u4E8C\u5C42\u5F39\u7A97\uFF08\u5982\u4E8C\u6B21\u633D\u7559\uFF09\u518D\u5173\u6389\u65F6\uFF0C\u4E0B\u5C42\u5F39\u7A97\u7684\u906E\u7F69\u5165\u573A\u52A8\u753B\u4F1A\u91CD\u64AD\u4E00\u904D\uFF0C\u80CC\u666F\u300C\u95EA\u300D\u4E00\u4E0B\u91CD\u65B0\u6DE1\u5165\u3002\u73B0\u5DF2\u4FEE\u6B63\uFF0C\u914D\u7F6E\u5199\u6CD5\u4E0D\u7528\u6539",
       "\u3010\u4FEE\u590D\u3011\u5207\u89C6\u56FE / \u5207 tab / `visibleWhen` \u7FFB\u8F6C\u65F6\uFF0C\u9875\u9762\u4E0A\u6B63\u5728\u8DD1\u7684\u5FAA\u73AF\u52A8\u753B\u4F1A\u5168\u90E8\u91CD\u5934\u64AD\u4E00\u904D\u3002\u73B0\u5DF2\u4FEE\u6B63",
-      "`hoverStyle` \u91CC\u7684 `{{ }}` \u53EA\u5728\u9996\u5C4F\u6C42\u503C\u4E00\u6B21\uFF0C\u4E4B\u540E\u4E0D\u968F state \u53D8\u5316\u2014\u2014\u8981\u8DDF\u7740\u72B6\u6001\u53D8\u7684\u6837\u5F0F\u5199\u5728 `style` \u91CC\uFF08\u90A3\u6761\u8DEF\u5F84\u6BCF\u5E27\u90FD\u4F1A\u91CD\u7B97\uFF09"
+      "`hoverStyle` \u91CC\u7684 `{{ }}` \u53EA\u5728\u9996\u5C4F\u6C42\u503C\u4E00\u6B21\uFF0C\u4E4B\u540E\u4E0D\u968F state \u53D8\u5316\u2014\u2014\u8981\u8DDF\u7740\u72B6\u6001\u53D8\u7684\u6837\u5F0F\u5199\u5728 `style` \u91CC\uFF08\u90A3\u6761\u8DEF\u5F84\u6BCF\u5E27\u90FD\u4F1A\u91CD\u7B97\uFF09",
+      "\u65B0\u589E\u793A\u4F8B \u246C \u642C\u5BB6\u6B21\u6570\u5C06\u5C3D\uFF1A\u989D\u5EA6\u8FDB\u5EA6\u6761\u7684\u6807\u51C6\u5199\u6CD5\uFF08\u5916\u5C42 flex \u5F53\u8F68\u9053 + \u5185\u5C42 box \u5F53\u586B\u5145\u6761 + `width` \u5199\u6210\u63D2\u503C\u8868\u8FBE\u5F0F\u73B0\u7B97\u767E\u5206\u6BD4\uFF09\uFF0C\u8981\u753B\u4EFB\u4F55\u6BD4\u4F8B\u6761\u90FD\u6284\u8FD9\u4EFD\u3002\u6CE8\u610F\u5B83\u7684\u603B\u989D\u5EA6\u662F\u8FD0\u8425\u624B\u586B\u7684\u2014\u2014\u7EDF\u8BA1\u63A5\u53E3\u76EE\u524D\u53EA\u6709\u4F59\u989D\u3001\u6CA1\u6709\u603B\u989D\u5EA6\uFF0C\u5957\u9910\u989D\u5EA6\u53D8\u4E86\u5FC5\u987B\u624B\u52A8\u6539\u7269\u6599"
     ]
   },
   {
@@ -1944,7 +1950,7 @@ var meta_default = meta;
 
 // src/docs/examples/renew-expire.ts
 var ORANGE = "linear-gradient(90deg,#ff7a00,#faad14)";
-var achieveCell = {
+var achieveCell = (verb, field, unit, label) => ({
   type: "flex",
   style: {
     direction: "column",
@@ -1966,7 +1972,7 @@ var achieveCell = {
       children: [
         {
           type: "text",
-          content: "{{ item.v }}",
+          content: verb,
           style: {
             fontSize: 11.5,
             fontWeight: "600",
@@ -1976,23 +1982,23 @@ var achieveCell = {
         },
         {
           type: "text",
-          content: "{{ item.n }}",
+          content: `{{ stat.${field} }}`,
           style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
         },
         {
           type: "text",
-          content: "{{ item.u }}",
+          content: ` ${unit}`,
           style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
         }
       ]
     },
     {
       type: "text",
-      content: "{{ item.l }}",
+      content: label,
       style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
     }
   ]
-};
+});
 var loseRow = {
   type: "flex",
   style: { align: "center", gap: 8, padding: "8px 0" },
@@ -2112,9 +2118,9 @@ var renewExpire = {
     style: { radius: 18 }
   },
   data: {
-    // 成果格子同样走数据源（字段 v / n / u / l 与 achieveCell 模板对应），
-    // 后端返回几格就渲染几格
-    achieve: { $source: "shopAchievements" },
+    // 成果格子同样走数据源。userStatistics 返回扁平对象，字段名是后端的 snake_case，
+    // 下面四格各自直接插值 {{ stat.xxx }}（扁平对象没法 bind 遍历，见文件头注释）
+    stat: { $source: "userStatistics" },
     lose: [
       { b: "\u6279\u91CF\u642C\u5BB6\u4E0A\u8D27", t: "\u5230\u671F\u540E\u65E0\u6CD5\u7EE7\u7EED\u4E0A\u8D27" },
       { 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" },
@@ -2152,10 +2158,20 @@ var renewExpire = {
           }
         },
         {
-          type: "repeat",
-          bind: "achieve",
+          // 四格并列写死（扁平对象没法 bind 遍历），flex + wrap 排成 2×2
+          type: "flex",
           style: { gap: 9, wrap: true },
-          template: achieveCell
+          children: [
+            achieveCell("\u5DF2\u4E0A\u67B6", "move_success_count", "\u4E2A", "\u7D2F\u8BA1\u642C\u5BB6\u6210\u529F"),
+            achieveCell("\u8FD0\u884C", "operate_task_count", "\u9879", "\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1"),
+            achieveCell(
+              "\u5DF2\u8865\u9F50",
+              "white_image_fill_count",
+              "\u5F20",
+              "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8"
+            ),
+            achieveCell("\u5B8C\u6210", "ai_optimize_count", "\u6B21", "AI \u81EA\u52A8\u4F18\u5316")
+          ]
         }
       ]
     },
@@ -2292,7 +2308,7 @@ var cdSeparator = (content) => ({
   content,
   style: { fontSize: 13, fontWeight: "800", color: "rgba(255,255,255,0.7)" }
 });
-var achieveCell2 = {
+var achieveCell2 = (verb, field, unit, label) => ({
   type: "flex",
   style: {
     direction: "column",
@@ -2312,7 +2328,7 @@ var achieveCell2 = {
       children: [
         {
           type: "text",
-          content: "{{ item.v }}",
+          content: verb,
           style: {
             fontSize: 11.5,
             fontWeight: "600",
@@ -2322,23 +2338,23 @@ var achieveCell2 = {
         },
         {
           type: "text",
-          content: "{{ item.n }}",
+          content: `{{ stat.${field} }}`,
           style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
         },
         {
           type: "text",
-          content: "{{ item.u }}",
+          content: ` ${unit}`,
           style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
         }
       ]
     },
     {
       type: "text",
-      content: "{{ item.l }}",
+      content: label,
       style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
     }
   ]
-};
+});
 var loseRow2 = {
   type: "flex",
   style: { align: "flex-start", gap: 10, padding: "7px 0" },
@@ -2477,9 +2493,10 @@ var lastDay = {
   },
   data: {
     // 成果格子的数字是**实时统计**，写死就会跟店铺实际情况对不上 —— 走后端数据源。
-    // $source 填的是宿主注册过的数据源名（不是接口地址），返回项的字段
-    // v / n / u / l 与下面 achieveCell 模板里的 {{ item.x }} 一一对应。
-    achieve: { $source: "shopAchievements" },
+    // $source 填的是宿主注册过的数据源名（不是接口地址）。
+    // userStatistics 返回一个扁平对象，字段名就是后端的 snake_case，
+    // 下面四格各自直接插值 {{ stat.xxx }}（见文件头注释：扁平对象没法 bind 遍历）。
+    stat: { $source: "userStatistics" },
     lose: [
       {
         b: "118 \u4E2A\u5546\u54C1\u7684\u5168\u90E8\u4F18\u5316\u8BB0\u5F55",
@@ -2570,10 +2587,25 @@ var lastDay = {
           }
         },
         {
-          type: "repeat",
-          bind: "achieve",
+          // 四格并列写死（扁平对象没法 bind 遍历），flex + wrap 排成 2×2
+          type: "flex",
           style: { gap: 9, wrap: true, marginTop: 14 },
-          template: achieveCell2
+          children: [
+            achieveCell2("\u5DF2\u4E0A\u67B6", "move_success_count", "\u4E2A", "\u7D2F\u8BA1\u642C\u5BB6\u6210\u529F"),
+            achieveCell2(
+              "\u8FD0\u884C",
+              "operate_task_count",
+              "\u9879",
+              "\u7ECF\u8425\u4EFB\u52A1\uFF08\u5546\u54C1\u4F18\u5316/\u6D41\u91CF\u589E\u957F\uFF09"
+            ),
+            achieveCell2(
+              "\u5DF2\u8865\u9F50",
+              "white_image_fill_count",
+              "\u5F20",
+              "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8"
+            ),
+            achieveCell2("\u5B8C\u6210", "ai_optimize_count", "\u6B21", "AI \u81EA\u52A8\u4F18\u5316")
+          ]
         },
         // ===== 分格倒计时 + 厘秒逐帧动画 =====
         {
@@ -4723,6 +4755,437 @@ var giftRedPacket = {
 };
 var gift_red_packet_default = giftRedPacket;
 
+// src/docs/examples/quota-low.ts
+var ORANGE4 = "linear-gradient(90deg,#ff7a00,#faad14)";
+var USED = "{{ total - user.collectCount }}";
+var achieveCell3 = (verb, value, unit, label) => ({
+  type: "flex",
+  style: {
+    direction: "column",
+    width: "calc(50% - 5px)",
+    background: "rgba(255,255,255,0.16)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "rgba(255,255,255,0.2)",
+    radius: 10,
+    padding: "10px 13px",
+    gap: 3
+  },
+  children: [
+    {
+      // lineHeight 必须显式给，否则 20px 数字的默认行高会把格子撑高
+      type: "flex",
+      style: { align: "baseline", gap: 3, height: 22 },
+      children: [
+        {
+          type: "text",
+          content: verb,
+          style: {
+            fontSize: 11.5,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            color: "rgba(255,255,255,0.92)"
+          }
+        },
+        {
+          type: "text",
+          content: value,
+          style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
+        },
+        {
+          type: "text",
+          content: ` ${unit}`,
+          style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
+        }
+      ]
+    },
+    {
+      type: "text",
+      content: label,
+      style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
+    }
+  ]
+});
+var loseRow3 = {
+  type: "flex",
+  style: { align: "flex-start", gap: 10, padding: "7px 0" },
+  children: [
+    {
+      type: "text",
+      content: "",
+      style: { width: 6, height: 6, radius: "50%", background: "#f53f3f", marginTop: 7 }
+    },
+    {
+      type: "flex",
+      style: { align: "baseline", gap: 4, wrap: true, flex: "1" },
+      children: [
+        {
+          type: "text",
+          content: "{{ item.b }}",
+          style: {
+            fontSize: 12.5,
+            fontWeight: "700",
+            lineHeight: 1.55,
+            color: "#1f2533"
+          }
+        },
+        {
+          type: "text",
+          content: "{{ item.tag }}",
+          visibleWhen: "item.tag != ''",
+          style: {
+            background: "{{ item.sev == 'lose' ? '#ffd5cf' : 'rgba(255,255,255,0.78)' }}",
+            color: "{{ item.sev == 'lose' ? '#cf1322' : '#8a7f78' }}",
+            fontSize: 10,
+            fontWeight: "800",
+            radius: 4,
+            padding: "1px 6px",
+            whiteSpace: "nowrap"
+          }
+        },
+        {
+          type: "text",
+          content: "\u2014 {{ item.t }}",
+          style: { fontSize: 12.5, lineHeight: 1.55, color: "#4a4038" }
+        }
+      ]
+    }
+  ]
+};
+var tierCard3 = {
+  type: "box",
+  style: {
+    flex: "1",
+    height: 121,
+    radius: 12,
+    background: "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}",
+    borderStyle: "solid",
+    borderWidth: "{{ item.key == current.key ? '2px' : '1px' }}",
+    borderColor: "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
+    cursor: "pointer"
+  },
+  action: {
+    type: "sequence",
+    actions: [
+      { type: "setState", key: "period", value: "{{ index }}" },
+      {
+        type: "track",
+        event: "popup_period_select",
+        params: { period: "{{ item.key }}" }
+      }
+    ]
+  },
+  children: [
+    {
+      type: "text",
+      rect: ["calc(50% - 19px)", -9, 38, 22],
+      content: "\u63A8\u8350",
+      visibleWhen: "item.hot",
+      style: {
+        background: ORANGE4,
+        color: "#ffffff",
+        fontSize: 11,
+        fontWeight: "800",
+        radius: 6,
+        textAlign: "center",
+        lineHeight: 22
+      }
+    },
+    {
+      type: "text",
+      rect: [0, 12, "100%", 19],
+      content: "{{ item.p }}",
+      style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
+    },
+    {
+      type: "flex",
+      rect: [0, 34, "100%", 26],
+      style: { justify: "center", align: "baseline" },
+      children: [
+        {
+          type: "text",
+          content: "\xA5",
+          style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
+        },
+        {
+          type: "text",
+          content: "{{ item.price }}",
+          style: { fontSize: 21, fontWeight: "800", color: "#1f2533" }
+        }
+      ]
+    },
+    {
+      type: "text",
+      rect: [4, 63, "calc(100% - 8px)", 32],
+      content: "{{ item.per }}",
+      style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
+    },
+    {
+      type: "text",
+      rect: [0, 98, "100%", 15],
+      content: "{{ item.flag }}",
+      visibleWhen: "item.flag != ''",
+      style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
+    }
+  ]
+};
+var quotaLow = {
+  version: 1,
+  type: "popup",
+  meta: { name: "\u642C\u5BB6\u6B21\u6570\u5C06\u5C3D \xB7 \u989D\u5EA6\u8FDB\u5EA6\u6761\uFF08\u590D\u523B\u8FD0\u8425 demo\uFF09" },
+  stage: {
+    width: 520,
+    height: "auto",
+    layout: "flow",
+    mask: true,
+    maskClosable: false,
+    closeButton: { show: true, position: "top-right", offset: [14, 14] },
+    style: { radius: 18 }
+  },
+  data: {
+    // 实时统计走后端数据源。$source 填的是宿主注册过的数据源名（不是接口地址），
+    // userStatistics 返回扁平对象，字段名就是后端的 snake_case
+    stat: { $source: "userStatistics" },
+    // 总额度：运营按当前套餐手填。为什么不走接口、以后怎么换，见文件头注释
+    total: 30,
+    lose: [
+      { b: "\u6279\u91CF\u642C\u5BB6", tag: "\u5C06\u505C\u7528", sev: "lose", t: "\u989D\u5EA6\u5F52\u96F6\u540E\u65E0\u6CD5\u7EE7\u7EED\u4E0A\u8D27" },
+      {
+        b: "1688 \u4E00\u4EF6\u4EE3\u53D1",
+        tag: "\u5C06\u505C\u7528",
+        sev: "lose",
+        t: "\u6E90\u5934\u8D27\u6E90\u65AD\u4F9B\uFF0C\u9009\u54C1\u3001\u94FA\u8D27\u3001\u4EE3\u53D1\u90FD\u8981\u624B\u52A8\u505A"
+      },
+      {
+        b: "AI \u81EA\u52A8\u4F18\u5316",
+        tag: "\u5C06\u6682\u505C",
+        sev: "pause",
+        t: "\u65B0\u5546\u54C1\u4E0D\u518D\u8865\u4E3B\u6807\u9898 / \u77ED\u6807\u9898 / \u767D\u5E95\u56FE"
+      }
+    ],
+    // 价格档位从后端数据源取，后端返回几档就渲染几档，配置时不用知道数量
+    tiers: { $source: "listRenewTiers", params: { scene: "quota_low" } }
+  },
+  state: { period: 1 },
+  derived: { current: { list: "tiers", indexBy: "period" } },
+  nodes: [
+    // ===== 深色渐变头部：标签 + 2×2 成果格 =====
+    {
+      type: "flex",
+      style: {
+        direction: "column",
+        background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
+        padding: "20px 22px 16px",
+        gap: 13
+      },
+      children: [
+        {
+          type: "text",
+          content: "\u26A1 \u642C\u5BB6\u6B21\u6570\u5373\u5C06\u7528\u5B8C",
+          style: {
+            // 不写 alignSelf 会被 flex 列拉满整行，标签必须按内容宽度
+            alignSelf: "flex-start",
+            background: "rgba(255,255,255,0.18)",
+            color: "#ffffff",
+            fontSize: 12,
+            fontWeight: "700",
+            radius: 6,
+            padding: "5px 10px"
+          }
+        },
+        {
+          // 四格并列写死（扁平对象没法 bind 遍历），flex + wrap 排成 2×2。
+          // 第一格的数字不是统计字段，而是「总额度 − 剩余次数」现算出来的
+          type: "flex",
+          style: { gap: 9, wrap: true },
+          children: [
+            achieveCell3("\u5DF2\u7528", USED, "\u6B21", "\u642C\u5BB6\u6B21\u6570"),
+            achieveCell3("\u5DF2\u4E0A\u67B6", "{{ stat.move_success_count }}", "\u4E2A", "\u7D2F\u8BA1\u4E0A\u67B6\u5546\u54C1"),
+            achieveCell3("\u65E5\u5747", "{{ stat.avg_daily_move_count }}", "\u4E2A", "\u5E73\u5747\u6BCF\u5929\u4E0A\u67B6"),
+            achieveCell3(
+              "\u5DF2\u8865\u9F50",
+              "{{ stat.white_image_fill_count }}",
+              "\u5F20",
+              "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8"
+            )
+          ]
+        }
+      ]
+    },
+    // ===== 白色 body =====
+    {
+      type: "flex",
+      style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
+      children: [
+        // ===== 额度进度条：轨道 + 填充条 + 百分比表达式（本示例的重点）=====
+        {
+          type: "flex",
+          style: {
+            direction: "column",
+            background: "#fff8f3",
+            radius: 10,
+            padding: "8px 13px 9px",
+            gap: 4
+          },
+          children: [
+            {
+              // 标题行：左边「剩余 N 次」，右边「已用 X / 总额度 次」
+              type: "flex",
+              style: { align: "baseline", justify: "space-between" },
+              children: [
+                {
+                  type: "flex",
+                  style: { align: "baseline", gap: 3 },
+                  children: [
+                    {
+                      type: "text",
+                      content: "\u642C\u5BB6\u6B21\u6570\u5269\u4F59",
+                      style: { fontSize: 12, lineHeight: 1.35, color: "#3f4656" }
+                    },
+                    {
+                      type: "text",
+                      content: "{{ user.collectCount }} \u6B21",
+                      style: {
+                        fontSize: 15,
+                        fontWeight: "800",
+                        lineHeight: 1.25,
+                        color: "#cf1322"
+                      }
+                    }
+                  ]
+                },
+                {
+                  type: "text",
+                  content: `\u5DF2\u7528 ${USED} / {{ total }} \u6B21`,
+                  style: { fontSize: 10.5, lineHeight: 1.35, color: "#8a909c" }
+                }
+              ]
+            },
+            {
+              // 轨道。用 flex 而不是 box —— box 的子节点走绝对定位、必须给 rect，
+              // 填充条要的是「跟着父级流」；overflow: hidden 必须写，否则填充条的
+              // 直角会戳出轨道的圆角外面
+              type: "flex",
+              style: {
+                height: 5,
+                radius: 4,
+                background: "#ffe0cc",
+                overflow: "hidden"
+              },
+              children: [
+                {
+                  // 填充条。宽度是算出来的：已用 ÷ 总额度 × 100，节点 style 里的
+                  // 字符串同样走插值，所以百分比不需要后端多下发一个字段
+                  type: "box",
+                  style: {
+                    width: "{{ (total - user.collectCount) / total * 100 }}%",
+                    height: "100%",
+                    background: "linear-gradient(90deg,#f53f3f,#ff7a45)"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "text",
+          content: "\u642C\u5BB6\u6B21\u6570\u7528\u5B8C\uFF0C\u4EA7\u54C1\u80FD\u529B\u5C06\u53D7\u9650\uFF1A",
+          style: { fontSize: 15, fontWeight: "800", color: "#1f2533", marginTop: 17 }
+        },
+        {
+          type: "repeat",
+          bind: "lose",
+          template: loseRow3,
+          style: {
+            direction: "column",
+            marginTop: 12,
+            background: "#ffe9e6",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#ffd0ca",
+            radius: 12,
+            padding: "7px 13px"
+          }
+        },
+        {
+          type: "flex",
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 9 },
+          children: [
+            {
+              type: "text",
+              content: "\u7EED\u6EE1\u989D\u5EA6 \xB7 \u9009\u62E9\u5468\u671F",
+              style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
+            },
+            {
+              type: "text",
+              content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
+              style: {
+                alignSelf: "center",
+                background: ORANGE4,
+                color: "#ffffff",
+                fontSize: 11,
+                fontWeight: "800",
+                radius: 5,
+                padding: "2px 8px"
+              }
+            }
+          ]
+        },
+        { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard3 },
+        {
+          type: "flex",
+          style: {
+            justify: "center",
+            align: "center",
+            gap: 5,
+            height: 52,
+            radius: 11,
+            background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
+            marginTop: 15,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "popup_renew_click",
+                params: { period: "{{ current.key }}", stage: "quota_low" }
+              },
+              { type: "navigate", url: "{{ current.url }}" }
+            ]
+          },
+          children: [
+            {
+              type: "text",
+              content: "\u7EED\u6EE1\u989D\u5EA6 \xB7",
+              style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
+            },
+            {
+              type: "text",
+              content: "{{ current.p }} \xA5{{ current.price }}",
+              style: { fontSize: 16.5, fontWeight: "800", color: "#ffffff" }
+            }
+          ]
+        },
+        {
+          type: "text",
+          content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
+          style: {
+            fontSize: 12.5,
+            color: "#8a909c",
+            textAlign: "center",
+            marginTop: 11,
+            cursor: "pointer"
+          },
+          action: { type: "track", event: "popup_more_plans" }
+        }
+      ]
+    }
+  ]
+};
+var quota_low_default = quotaLow;
+
 // src/docs/examples/index.ts
 var HOTSPOT_BG = "rgba(255,68,51,0.16)";
 var imageHotspot = {
@@ -4974,6 +5437,11 @@ var examples = [
     label: "\u246B \u590D\u523B\u7EBF\u4E0A\u5F39\u7A97 \xB7 1 \u5206\u94B1\u534A\u5E74\u5361\uFF08\u52A8\u753B\u6700\u5BC6\u7684\u4E00\u4EFD\uFF09",
     value: "giftRedPacket",
     dsl: gift_red_packet_default
+  },
+  {
+    label: "\u246C \u590D\u523B\u8FD0\u8425 demo \xB7 \u642C\u5BB6\u6B21\u6570\u5C06\u5C3D\uFF08\u989D\u5EA6\u8FDB\u5EA6\u6761\uFF09",
+    value: "quotaLow",
+    dsl: quota_low_default
   }
 ];
 var examples_default = examples;

package/dist/docs/index.d.cts

@@ -96,7 +96,8 @@ declare const meta: DocMeta;
  *
  * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局，
  * ⑧ 是通栏 banner（宽度由页面决定、只能声明比例），⑨⑩ 是商品编辑抽屉里两个**固定尺寸**坑位，
- * ⑪⑫ 是搬家成功页两个线上弹窗的一比一复刻（动画、hover、相对时长倒计时的完整用法）。
+ * ⑪⑫ 是搬家成功页两个线上弹窗的一比一复刻（动画、hover、相对时长倒计时的完整用法），
+ * ⑬ 是额度进度条（用表达式算填充宽度，要画任何比例条都抄这份）。
  * 后端数据源（$source）用法见 ③。
  */
 

package/dist/docs/index.d.ts

@@ -96,7 +96,8 @@ declare const meta: DocMeta;
  *
  * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局，
  * ⑧ 是通栏 banner（宽度由页面决定、只能声明比例），⑨⑩ 是商品编辑抽屉里两个**固定尺寸**坑位，
- * ⑪⑫ 是搬家成功页两个线上弹窗的一比一复刻（动画、hover、相对时长倒计时的完整用法）。
+ * ⑪⑫ 是搬家成功页两个线上弹窗的一比一复刻（动画、hover、相对时长倒计时的完整用法），
+ * ⑬ 是额度进度条（用表达式算填充宽度，要画任何比例条都抄这份）。
  * 后端数据源（$source）用法见 ③。
  */