@yaoxiu/marketing-dsl 2.5.0 → 2.6.1

package/dist/docs/index.cjs

@@ -1835,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"
     ]
   },
   {
@@ -4754,6 +4755,538 @@ 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",
+    // grid 不在白名单，用 flex wrap + 半宽复刻 grid-template-columns: 1fr 1fr（gap 9）
+    width: "calc(50% - 5px)",
+    background: "rgba(255,255,255,0.16)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "rgba(255,255,255,0.2)",
+    radius: 10,
+    // .period-price-modal .ac 把基础规则的 9px 11px 覆盖成 10px 13px
+    padding: "10px 13px"
+  },
+  children: [
+    {
+      // .ac .n：line-height 1.1 × 20px = 22px，显式给死，
+      // 否则 20px 数字的默认行高（≈1.5）会把格子撑高 8px 左右
+      type: "flex",
+      style: { align: "baseline", height: 22, whiteSpace: "nowrap" },
+      children: [
+        {
+          type: "text",
+          content: verb,
+          style: {
+            fontSize: 11.5,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            letterSpacing: 0.2,
+            marginRight: 3,
+            // demo 是 opacity .7 叠在 .m-top 的白字上，等价于这个色值
+            color: "rgba(255,255,255,0.7)"
+          }
+        },
+        {
+          type: "text",
+          content: value,
+          style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
+        },
+        {
+          type: "text",
+          content: ` ${unit}`,
+          style: {
+            fontSize: 12,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            // demo 是 opacity .85
+            color: "rgba(255,255,255,0.85)"
+          }
+        }
+      ]
+    },
+    {
+      type: "text",
+      content: label,
+      style: {
+        fontSize: 11,
+        lineHeight: 1.4,
+        marginTop: 2,
+        color: "rgba(255,255,255,0.85)"
+      }
+    }
+  ]
+});
+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,
+        // demo 的 flex: none —— 文案换行时圆点不许被压扁
+        flexShrink: "0"
+      }
+    },
+    {
+      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: "\u2014 {{ item.t }}",
+          style: { fontSize: 12.5, lineHeight: 1.55, color: "#4a4038" }
+        }
+      ]
+    }
+  ]
+};
+var tierCard3 = {
+  type: "box",
+  style: {
+    flex: "1",
+    height: 119,
+    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' }}",
+    shadow: "{{ item.key == current.key ? '0 7px 18px rgba(240,160,0,0.1)' : 'none' }}",
+    cursor: "pointer",
+    transition: "border-color 0.15s, background 0.15s, box-shadow 0.15s"
+  },
+  // .tcol:hover { border-color: var(--gold) }
+  hoverStyle: { borderColor: "#faad14" },
+  action: {
+    type: "sequence",
+    actions: [
+      { type: "setState", key: "period", value: "{{ index }}" },
+      {
+        type: "track",
+        event: "popup_period_select",
+        params: { period: "{{ item.key }}" }
+      }
+    ]
+  },
+  children: [
+    {
+      // .thot：top -9、字号 11、padding 2px 8px、radius 6。
+      // 宽 38 = 2 字 × 11px + 左右 8px；居中靠 left: calc(50% - 19px)
+      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,
+        whiteSpace: "nowrap"
+      }
+    },
+    {
+      type: "text",
+      rect: [0, 12, "100%", 19],
+      content: "{{ item.p }}",
+      style: { fontSize: 13, lineHeight: 1.45, color: "#8a909c", textAlign: "center" }
+    },
+    {
+      type: "flex",
+      rect: [0, 36, "100%", 26],
+      style: { justify: "center", align: "baseline" },
+      children: [
+        {
+          // .tpr i：符号比数字小一号、字重 600
+          type: "text",
+          content: "\xA5",
+          style: {
+            fontSize: 14,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            color: "{{ item.key == current.key ? '#d46b08' : '#1f2533' }}"
+          }
+        },
+        {
+          type: "text",
+          content: "{{ item.price }}",
+          style: {
+            fontSize: 21,
+            fontWeight: "800",
+            lineHeight: 1.2,
+            color: "{{ item.key == current.key ? '#d46b08' : '#1f2533' }}"
+          }
+        }
+      ]
+    },
+    {
+      type: "text",
+      rect: [4, 63, "calc(100% - 8px)", 32],
+      content: "{{ item.per }}",
+      style: {
+        fontSize: 11,
+        lineHeight: 1.5,
+        textAlign: "center",
+        color: "{{ item.key == current.key ? '#d46b08' : '#8a909c' }}",
+        fontWeight: "{{ item.key == current.key ? '600' : '400' }}"
+      }
+    },
+    {
+      // .tflag 的 margin-top: auto（贴底）在绝对定位里直接写死 y = 119 - 9 - 15
+      type: "text",
+      rect: [0, 95, "100%", 15],
+      content: "{{ item.flag }}",
+      visibleWhen: "item.flag != ''",
+      style: { fontSize: 11, lineHeight: 1.35, 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: {
+    // .modal.period-price-modal { width: min(520px, calc(100vw - 24px)) }
+    width: 520,
+    height: "auto",
+    layout: "flow",
+    mask: true,
+    maskClosable: false,
+    closeButton: {
+      // .m-close：24×24 的半透明白圆点，字符 ×、15px
+      show: true,
+      position: "top-right",
+      offset: [14, 14],
+      size: 24,
+      icon: "\xD7",
+      style: { background: "rgba(255,255,255,0.3)", fontSize: 15, color: "#ffffff" }
+    },
+    // .modal 的圆角与投影（--shadow-lg）
+    style: { radius: 18, shadow: "0 28px 72px rgba(16,27,51,0.24)" },
+    // demo 的 animation: pop .38s cubic-bezier(.16,1,.3,1) both
+    // 注意 easing 的小数必须写成 0.16 —— 校验的正则不认 CSS 允许的 .16 简写
+    animate: {
+      name: "pop",
+      duration: 380,
+      easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      fill: "both"
+    }
+  },
+  keyframes: {
+    pop: {
+      from: { opacity: 0, transform: "translateY(14px) scale(0.96)" },
+      to: { opacity: 1, transform: "none" }
+    }
+  },
+  data: {
+    // 实时统计走后端数据源。$source 填的是宿主注册过的数据源名（不是接口地址），
+    // userStatistics 返回扁平对象，字段名就是后端的 snake_case
+    stat: { $source: "userStatistics" },
+    // 总额度：运营按当前套餐手填。为什么不走接口、以后怎么换，见文件头注释
+    total: 30,
+    // 三条都没有状态标签 —— demo 这一屏的 lose 配置里就没有 tag 字段
+    lose: [
+      { b: "\u6279\u91CF\u642C\u5BB6", t: "\u989D\u5EA6\u5F52\u96F6\u540E\u65E0\u6CD5\u7EE7\u7EED\u4E0A\u8D27" },
+      { b: "1688 \u4E00\u4EF6\u4EE3\u53D1", 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", 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: [
+    // ===== .m-top 深色渐变头部：（标签 + 额度条）同排 + 2×2 成果格 =====
+    {
+      type: "flex",
+      style: {
+        direction: "column",
+        background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
+        padding: "20px 22px 16px"
+      },
+      children: [
+        {
+          // .m-top-head：右侧留 30px 给关闭按钮让位
+          type: "flex",
+          style: {
+            align: "center",
+            justify: "space-between",
+            gap: 14,
+            padding: "0 30px 0 0"
+          },
+          children: [
+            {
+              // .tag：flex: none，按内容宽度，不许被额度条挤扁
+              type: "text",
+              content: "\u26A1 \u642C\u5BB6\u6B21\u6570\u5373\u5C06\u7528\u5B8C",
+              style: {
+                background: "rgba(255,255,255,0.18)",
+                color: "#ffffff",
+                fontSize: 12,
+                fontWeight: "700",
+                radius: 6,
+                padding: "3px 10px",
+                flexShrink: "0",
+                whiteSpace: "nowrap"
+              }
+            },
+            {
+              // ===== 额度进度条（本示例的重点）。.m-top .quota 反白配色版 =====
+              type: "flex",
+              style: {
+                direction: "column",
+                flex: "1",
+                maxWidth: 280,
+                background: "rgba(255,255,255,0.12)",
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: "rgba(255,255,255,0.16)",
+                radius: 7,
+                padding: "3px 10px 4px"
+              },
+              children: [
+                {
+                  // .qh：左「搬家次数剩余」，右加粗的剩余次数
+                  type: "flex",
+                  style: { align: "baseline", justify: "space-between" },
+                  children: [
+                    {
+                      type: "text",
+                      content: "\u642C\u5BB6\u6B21\u6570\u5269\u4F59",
+                      style: {
+                        fontSize: 10.5,
+                        lineHeight: 1.25,
+                        color: "rgba(255,255,255,0.85)"
+                      }
+                    },
+                    {
+                      type: "text",
+                      content: "{{ user.collectCount }} \u6B21",
+                      style: {
+                        fontSize: 12.5,
+                        fontWeight: "800",
+                        lineHeight: 1.15,
+                        color: "#ffb066"
+                      }
+                    }
+                  ]
+                },
+                {
+                  // .qbar 轨道。用 flex 而不是 box —— box 的子节点走绝对定位、必须给 rect，
+                  // 填充条要的是「跟着父级流」；overflow: hidden 必须写，
+                  // 否则填充条的直角会戳出轨道的圆角外面
+                  type: "flex",
+                  style: {
+                    height: 3,
+                    radius: 4,
+                    background: "rgba(255,255,255,0.2)",
+                    margin: "2px 0 1px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    {
+                      // 填充条。宽度是算出来的：已用 ÷ 总额度 × 100，节点 style 里的
+                      // 字符串同样走插值，所以百分比不需要后端多下发一个字段
+                      type: "box",
+                      style: {
+                        width: "{{ (total - user.collectCount) / total * 100 }}%",
+                        height: "100%",
+                        background: "linear-gradient(90deg,#f53f3f,#ff7a45)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  // .qn
+                  type: "text",
+                  content: `\u5DF2\u7528 ${USED} / {{ total }} \u6B21`,
+                  style: {
+                    fontSize: 9,
+                    lineHeight: 1.25,
+                    color: "rgba(255,255,255,0.6)"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          // .achieve：四格并列写死（扁平对象没法 bind 遍历），flex + wrap 复刻 2×2 grid。
+          // 第一格的数字不是统计字段，而是「总额度 − 剩余次数」现算出来的
+          type: "flex",
+          style: { gap: 9, wrap: true, marginTop: 14 },
+          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"
+            )
+          ]
+        }
+      ]
+    },
+    // ===== .m-body 白底 =====
+    {
+      type: "flex",
+      style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
+      children: [
+        {
+          // .m-copy-panel
+          type: "text",
+          content: "\u642C\u5BB6\u6B21\u6570\u7528\u5B8C\uFF0C\u4EA7\u54C1\u80FD\u529B\u5C06\u53D7\u9650\uFF1A",
+          style: {
+            fontSize: 15,
+            fontWeight: "800",
+            lineHeight: 1.55,
+            letterSpacing: -0.15,
+            color: "#1f2533"
+          }
+        },
+        {
+          // .lose
+          type: "repeat",
+          bind: "lose",
+          template: loseRow3,
+          style: {
+            direction: "column",
+            marginTop: 14,
+            background: "#ffe9e6",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#ffd0ca",
+            radius: 12,
+            padding: "7px 13px"
+          }
+        },
+        {
+          // .tiers 的 border-top：白名单没有 borderTop，用 1px 实心分隔条代替
+          type: "box",
+          style: { height: 1, background: "#eceef3", marginTop: 18 }
+        },
+        {
+          // .tv：lead 被 normalizeTrialPricing 置空，所以整行都在 <b> 里
+          //（字重 800、墨色），后面跟价格口径标记 .tv-tag
+          type: "flex",
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 11 },
+          children: [
+            {
+              type: "text",
+              content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
+              style: { fontSize: 13.5, fontWeight: "800", color: "#1f2533" }
+            },
+            {
+              type: "text",
+              content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
+              style: {
+                alignSelf: "center",
+                background: ORANGE4,
+                color: "#ffffff",
+                fontSize: 11,
+                fontWeight: "800",
+                radius: 5,
+                padding: "2px 8px"
+              }
+            }
+          ]
+        },
+        // .tcols：wide 版 gap 8
+        { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard3 },
+        {
+          // .m-cta（th-loss 主题的红橙渐变）
+          type: "flex",
+          style: {
+            justify: "center",
+            align: "baseline",
+            gap: 5,
+            padding: "13px",
+            radius: 11,
+            background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
+            marginTop: 20,
+            shadow: "0 8px 18px rgba(245,63,63,0.14)",
+            transition: "transform 0.18s, box-shadow 0.18s",
+            cursor: "pointer"
+          },
+          hoverStyle: {
+            transform: "translateY(-1px)",
+            shadow: "0 10px 22px rgba(245,63,63,0.2)"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "popup_renew_click",
+                params: { period: "{{ current.key }}", stage: "quota_low" }
+              },
+              { type: "navigate", url: "{{ current.url }}" }
+            ]
+          },
+          children: [
+            {
+              // .m-cta .ct
+              type: "text",
+              content: "\u7EED\u6EE1\u989D\u5EA6 \xB7",
+              style: {
+                fontSize: 14,
+                fontWeight: "800",
+                letterSpacing: -0.2,
+                color: "#ffffff"
+              }
+            },
+            {
+              // .m-cta .cp —— demo 的 syncCTAPrice() 把它同步成「选中档位名 + 价格」
+              type: "text",
+              content: "{{ current.p }} \xA5{{ current.price }}",
+              style: { fontSize: 16.5, fontWeight: "800", color: "#ffffff" }
+            }
+          ]
+        },
+        {
+          // .m-ghost
+          type: "text",
+          content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
+          style: {
+            fontSize: 12,
+            color: "#8a909c",
+            textAlign: "center",
+            marginTop: 10,
+            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 = {
@@ -5005,6 +5538,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）用法见 ③。
  */
 

package/dist/docs/index.js

@@ -1674,7 +1674,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"
     ]
   },
   {
@@ -4593,6 +4594,538 @@ 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",
+    // grid 不在白名单，用 flex wrap + 半宽复刻 grid-template-columns: 1fr 1fr（gap 9）
+    width: "calc(50% - 5px)",
+    background: "rgba(255,255,255,0.16)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "rgba(255,255,255,0.2)",
+    radius: 10,
+    // .period-price-modal .ac 把基础规则的 9px 11px 覆盖成 10px 13px
+    padding: "10px 13px"
+  },
+  children: [
+    {
+      // .ac .n：line-height 1.1 × 20px = 22px，显式给死，
+      // 否则 20px 数字的默认行高（≈1.5）会把格子撑高 8px 左右
+      type: "flex",
+      style: { align: "baseline", height: 22, whiteSpace: "nowrap" },
+      children: [
+        {
+          type: "text",
+          content: verb,
+          style: {
+            fontSize: 11.5,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            letterSpacing: 0.2,
+            marginRight: 3,
+            // demo 是 opacity .7 叠在 .m-top 的白字上，等价于这个色值
+            color: "rgba(255,255,255,0.7)"
+          }
+        },
+        {
+          type: "text",
+          content: value,
+          style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
+        },
+        {
+          type: "text",
+          content: ` ${unit}`,
+          style: {
+            fontSize: 12,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            // demo 是 opacity .85
+            color: "rgba(255,255,255,0.85)"
+          }
+        }
+      ]
+    },
+    {
+      type: "text",
+      content: label,
+      style: {
+        fontSize: 11,
+        lineHeight: 1.4,
+        marginTop: 2,
+        color: "rgba(255,255,255,0.85)"
+      }
+    }
+  ]
+});
+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,
+        // demo 的 flex: none —— 文案换行时圆点不许被压扁
+        flexShrink: "0"
+      }
+    },
+    {
+      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: "\u2014 {{ item.t }}",
+          style: { fontSize: 12.5, lineHeight: 1.55, color: "#4a4038" }
+        }
+      ]
+    }
+  ]
+};
+var tierCard3 = {
+  type: "box",
+  style: {
+    flex: "1",
+    height: 119,
+    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' }}",
+    shadow: "{{ item.key == current.key ? '0 7px 18px rgba(240,160,0,0.1)' : 'none' }}",
+    cursor: "pointer",
+    transition: "border-color 0.15s, background 0.15s, box-shadow 0.15s"
+  },
+  // .tcol:hover { border-color: var(--gold) }
+  hoverStyle: { borderColor: "#faad14" },
+  action: {
+    type: "sequence",
+    actions: [
+      { type: "setState", key: "period", value: "{{ index }}" },
+      {
+        type: "track",
+        event: "popup_period_select",
+        params: { period: "{{ item.key }}" }
+      }
+    ]
+  },
+  children: [
+    {
+      // .thot：top -9、字号 11、padding 2px 8px、radius 6。
+      // 宽 38 = 2 字 × 11px + 左右 8px；居中靠 left: calc(50% - 19px)
+      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,
+        whiteSpace: "nowrap"
+      }
+    },
+    {
+      type: "text",
+      rect: [0, 12, "100%", 19],
+      content: "{{ item.p }}",
+      style: { fontSize: 13, lineHeight: 1.45, color: "#8a909c", textAlign: "center" }
+    },
+    {
+      type: "flex",
+      rect: [0, 36, "100%", 26],
+      style: { justify: "center", align: "baseline" },
+      children: [
+        {
+          // .tpr i：符号比数字小一号、字重 600
+          type: "text",
+          content: "\xA5",
+          style: {
+            fontSize: 14,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            color: "{{ item.key == current.key ? '#d46b08' : '#1f2533' }}"
+          }
+        },
+        {
+          type: "text",
+          content: "{{ item.price }}",
+          style: {
+            fontSize: 21,
+            fontWeight: "800",
+            lineHeight: 1.2,
+            color: "{{ item.key == current.key ? '#d46b08' : '#1f2533' }}"
+          }
+        }
+      ]
+    },
+    {
+      type: "text",
+      rect: [4, 63, "calc(100% - 8px)", 32],
+      content: "{{ item.per }}",
+      style: {
+        fontSize: 11,
+        lineHeight: 1.5,
+        textAlign: "center",
+        color: "{{ item.key == current.key ? '#d46b08' : '#8a909c' }}",
+        fontWeight: "{{ item.key == current.key ? '600' : '400' }}"
+      }
+    },
+    {
+      // .tflag 的 margin-top: auto（贴底）在绝对定位里直接写死 y = 119 - 9 - 15
+      type: "text",
+      rect: [0, 95, "100%", 15],
+      content: "{{ item.flag }}",
+      visibleWhen: "item.flag != ''",
+      style: { fontSize: 11, lineHeight: 1.35, 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: {
+    // .modal.period-price-modal { width: min(520px, calc(100vw - 24px)) }
+    width: 520,
+    height: "auto",
+    layout: "flow",
+    mask: true,
+    maskClosable: false,
+    closeButton: {
+      // .m-close：24×24 的半透明白圆点，字符 ×、15px
+      show: true,
+      position: "top-right",
+      offset: [14, 14],
+      size: 24,
+      icon: "\xD7",
+      style: { background: "rgba(255,255,255,0.3)", fontSize: 15, color: "#ffffff" }
+    },
+    // .modal 的圆角与投影（--shadow-lg）
+    style: { radius: 18, shadow: "0 28px 72px rgba(16,27,51,0.24)" },
+    // demo 的 animation: pop .38s cubic-bezier(.16,1,.3,1) both
+    // 注意 easing 的小数必须写成 0.16 —— 校验的正则不认 CSS 允许的 .16 简写
+    animate: {
+      name: "pop",
+      duration: 380,
+      easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      fill: "both"
+    }
+  },
+  keyframes: {
+    pop: {
+      from: { opacity: 0, transform: "translateY(14px) scale(0.96)" },
+      to: { opacity: 1, transform: "none" }
+    }
+  },
+  data: {
+    // 实时统计走后端数据源。$source 填的是宿主注册过的数据源名（不是接口地址），
+    // userStatistics 返回扁平对象，字段名就是后端的 snake_case
+    stat: { $source: "userStatistics" },
+    // 总额度：运营按当前套餐手填。为什么不走接口、以后怎么换，见文件头注释
+    total: 30,
+    // 三条都没有状态标签 —— demo 这一屏的 lose 配置里就没有 tag 字段
+    lose: [
+      { b: "\u6279\u91CF\u642C\u5BB6", t: "\u989D\u5EA6\u5F52\u96F6\u540E\u65E0\u6CD5\u7EE7\u7EED\u4E0A\u8D27" },
+      { b: "1688 \u4E00\u4EF6\u4EE3\u53D1", 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", 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: [
+    // ===== .m-top 深色渐变头部：（标签 + 额度条）同排 + 2×2 成果格 =====
+    {
+      type: "flex",
+      style: {
+        direction: "column",
+        background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
+        padding: "20px 22px 16px"
+      },
+      children: [
+        {
+          // .m-top-head：右侧留 30px 给关闭按钮让位
+          type: "flex",
+          style: {
+            align: "center",
+            justify: "space-between",
+            gap: 14,
+            padding: "0 30px 0 0"
+          },
+          children: [
+            {
+              // .tag：flex: none，按内容宽度，不许被额度条挤扁
+              type: "text",
+              content: "\u26A1 \u642C\u5BB6\u6B21\u6570\u5373\u5C06\u7528\u5B8C",
+              style: {
+                background: "rgba(255,255,255,0.18)",
+                color: "#ffffff",
+                fontSize: 12,
+                fontWeight: "700",
+                radius: 6,
+                padding: "3px 10px",
+                flexShrink: "0",
+                whiteSpace: "nowrap"
+              }
+            },
+            {
+              // ===== 额度进度条（本示例的重点）。.m-top .quota 反白配色版 =====
+              type: "flex",
+              style: {
+                direction: "column",
+                flex: "1",
+                maxWidth: 280,
+                background: "rgba(255,255,255,0.12)",
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: "rgba(255,255,255,0.16)",
+                radius: 7,
+                padding: "3px 10px 4px"
+              },
+              children: [
+                {
+                  // .qh：左「搬家次数剩余」，右加粗的剩余次数
+                  type: "flex",
+                  style: { align: "baseline", justify: "space-between" },
+                  children: [
+                    {
+                      type: "text",
+                      content: "\u642C\u5BB6\u6B21\u6570\u5269\u4F59",
+                      style: {
+                        fontSize: 10.5,
+                        lineHeight: 1.25,
+                        color: "rgba(255,255,255,0.85)"
+                      }
+                    },
+                    {
+                      type: "text",
+                      content: "{{ user.collectCount }} \u6B21",
+                      style: {
+                        fontSize: 12.5,
+                        fontWeight: "800",
+                        lineHeight: 1.15,
+                        color: "#ffb066"
+                      }
+                    }
+                  ]
+                },
+                {
+                  // .qbar 轨道。用 flex 而不是 box —— box 的子节点走绝对定位、必须给 rect，
+                  // 填充条要的是「跟着父级流」；overflow: hidden 必须写，
+                  // 否则填充条的直角会戳出轨道的圆角外面
+                  type: "flex",
+                  style: {
+                    height: 3,
+                    radius: 4,
+                    background: "rgba(255,255,255,0.2)",
+                    margin: "2px 0 1px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    {
+                      // 填充条。宽度是算出来的：已用 ÷ 总额度 × 100，节点 style 里的
+                      // 字符串同样走插值，所以百分比不需要后端多下发一个字段
+                      type: "box",
+                      style: {
+                        width: "{{ (total - user.collectCount) / total * 100 }}%",
+                        height: "100%",
+                        background: "linear-gradient(90deg,#f53f3f,#ff7a45)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  // .qn
+                  type: "text",
+                  content: `\u5DF2\u7528 ${USED} / {{ total }} \u6B21`,
+                  style: {
+                    fontSize: 9,
+                    lineHeight: 1.25,
+                    color: "rgba(255,255,255,0.6)"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          // .achieve：四格并列写死（扁平对象没法 bind 遍历），flex + wrap 复刻 2×2 grid。
+          // 第一格的数字不是统计字段，而是「总额度 − 剩余次数」现算出来的
+          type: "flex",
+          style: { gap: 9, wrap: true, marginTop: 14 },
+          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"
+            )
+          ]
+        }
+      ]
+    },
+    // ===== .m-body 白底 =====
+    {
+      type: "flex",
+      style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
+      children: [
+        {
+          // .m-copy-panel
+          type: "text",
+          content: "\u642C\u5BB6\u6B21\u6570\u7528\u5B8C\uFF0C\u4EA7\u54C1\u80FD\u529B\u5C06\u53D7\u9650\uFF1A",
+          style: {
+            fontSize: 15,
+            fontWeight: "800",
+            lineHeight: 1.55,
+            letterSpacing: -0.15,
+            color: "#1f2533"
+          }
+        },
+        {
+          // .lose
+          type: "repeat",
+          bind: "lose",
+          template: loseRow3,
+          style: {
+            direction: "column",
+            marginTop: 14,
+            background: "#ffe9e6",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#ffd0ca",
+            radius: 12,
+            padding: "7px 13px"
+          }
+        },
+        {
+          // .tiers 的 border-top：白名单没有 borderTop，用 1px 实心分隔条代替
+          type: "box",
+          style: { height: 1, background: "#eceef3", marginTop: 18 }
+        },
+        {
+          // .tv：lead 被 normalizeTrialPricing 置空，所以整行都在 <b> 里
+          //（字重 800、墨色），后面跟价格口径标记 .tv-tag
+          type: "flex",
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 11 },
+          children: [
+            {
+              type: "text",
+              content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
+              style: { fontSize: 13.5, fontWeight: "800", color: "#1f2533" }
+            },
+            {
+              type: "text",
+              content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
+              style: {
+                alignSelf: "center",
+                background: ORANGE4,
+                color: "#ffffff",
+                fontSize: 11,
+                fontWeight: "800",
+                radius: 5,
+                padding: "2px 8px"
+              }
+            }
+          ]
+        },
+        // .tcols：wide 版 gap 8
+        { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard3 },
+        {
+          // .m-cta（th-loss 主题的红橙渐变）
+          type: "flex",
+          style: {
+            justify: "center",
+            align: "baseline",
+            gap: 5,
+            padding: "13px",
+            radius: 11,
+            background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
+            marginTop: 20,
+            shadow: "0 8px 18px rgba(245,63,63,0.14)",
+            transition: "transform 0.18s, box-shadow 0.18s",
+            cursor: "pointer"
+          },
+          hoverStyle: {
+            transform: "translateY(-1px)",
+            shadow: "0 10px 22px rgba(245,63,63,0.2)"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "popup_renew_click",
+                params: { period: "{{ current.key }}", stage: "quota_low" }
+              },
+              { type: "navigate", url: "{{ current.url }}" }
+            ]
+          },
+          children: [
+            {
+              // .m-cta .ct
+              type: "text",
+              content: "\u7EED\u6EE1\u989D\u5EA6 \xB7",
+              style: {
+                fontSize: 14,
+                fontWeight: "800",
+                letterSpacing: -0.2,
+                color: "#ffffff"
+              }
+            },
+            {
+              // .m-cta .cp —— demo 的 syncCTAPrice() 把它同步成「选中档位名 + 价格」
+              type: "text",
+              content: "{{ current.p }} \xA5{{ current.price }}",
+              style: { fontSize: 16.5, fontWeight: "800", color: "#ffffff" }
+            }
+          ]
+        },
+        {
+          // .m-ghost
+          type: "text",
+          content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
+          style: {
+            fontSize: 12,
+            color: "#8a909c",
+            textAlign: "center",
+            marginTop: 10,
+            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 = {
@@ -4844,6 +5377,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaoxiu/marketing-dsl",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "type": "module",
   "description": "营销弹窗 DSL 解释器核心，纯逻辑无框架依赖",
   "license": "MIT",