@yaoxiu/marketing-dsl 2.6.0 → 2.6.1

package/dist/docs/index.cjs

@@ -4762,20 +4762,22 @@ 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,
-    padding: "10px 13px",
-    gap: 3
+    // .period-price-modal .ac 把基础规则的 9px 11px 覆盖成 10px 13px
+    padding: "10px 13px"
   },
   children: [
     {
-      // lineHeight 必须显式给，否则 20px 数字的默认行高会把格子撑高
+      // .ac .n：line-height 1.1 × 20px = 22px，显式给死，
+      // 否则 20px 数字的默认行高（≈1.5）会把格子撑高 8px 左右
       type: "flex",
-      style: { align: "baseline", gap: 3, height: 22 },
+      style: { align: "baseline", height: 22, whiteSpace: "nowrap" },
       children: [
         {
           type: "text",
@@ -4784,7 +4786,10 @@ var achieveCell3 = (verb, value, unit, label) => ({
             fontSize: 11.5,
             fontWeight: "600",
             lineHeight: 1.1,
-            color: "rgba(255,255,255,0.92)"
+            letterSpacing: 0.2,
+            marginRight: 3,
+            // demo 是 opacity .7 叠在 .m-top 的白字上，等价于这个色值
+            color: "rgba(255,255,255,0.7)"
           }
         },
         {
@@ -4795,14 +4800,25 @@ var achieveCell3 = (verb, value, unit, label) => ({
         {
           type: "text",
           content: ` ${unit}`,
-          style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
+          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.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
+      style: {
+        fontSize: 11,
+        lineHeight: 1.4,
+        marginTop: 2,
+        color: "rgba(255,255,255,0.85)"
+      }
     }
   ]
 });
@@ -4813,7 +4829,15 @@ var loseRow3 = {
     {
       type: "text",
       content: "",
-      style: { width: 6, height: 6, radius: "50%", background: "#f53f3f", marginTop: 7 }
+      style: {
+        width: 6,
+        height: 6,
+        radius: "50%",
+        background: "#f53f3f",
+        marginTop: 7,
+        // demo 的 flex: none —— 文案换行时圆点不许被压扁
+        flexShrink: "0"
+      }
     },
     {
       type: "flex",
@@ -4829,20 +4853,6 @@ var loseRow3 = {
             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 }}",
@@ -4856,14 +4866,18 @@ var tierCard3 = {
   type: "box",
   style: {
     flex: "1",
-    height: 121,
+    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' }}",
-    cursor: "pointer"
+    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: [
@@ -4877,6 +4891,8 @@ var tierCard3 = {
   },
   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",
@@ -4888,29 +4904,41 @@ var tierCard3 = {
         fontWeight: "800",
         radius: 6,
         textAlign: "center",
-        lineHeight: 22
+        lineHeight: 22,
+        whiteSpace: "nowrap"
       }
     },
     {
       type: "text",
       rect: [0, 12, "100%", 19],
       content: "{{ item.p }}",
-      style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
+      style: { fontSize: 13, lineHeight: 1.45, color: "#8a909c", textAlign: "center" }
     },
     {
       type: "flex",
-      rect: [0, 34, "100%", 26],
+      rect: [0, 36, "100%", 26],
       style: { justify: "center", align: "baseline" },
       children: [
         {
+          // .tpr i：符号比数字小一号、字重 600
           type: "text",
           content: "\xA5",
-          style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
+          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", color: "#1f2533" }
+          style: {
+            fontSize: 21,
+            fontWeight: "800",
+            lineHeight: 1.2,
+            color: "{{ item.key == current.key ? '#d46b08' : '#1f2533' }}"
+          }
         }
       ]
     },
@@ -4918,14 +4946,21 @@ var tierCard3 = {
       type: "text",
       rect: [4, 63, "calc(100% - 8px)", 32],
       content: "{{ item.per }}",
-      style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
+      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, 98, "100%", 15],
+      rect: [0, 95, "100%", 15],
       content: "{{ item.flag }}",
       visibleWhen: "item.flag != ''",
-      style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
+      style: { fontSize: 11, lineHeight: 1.35, color: "#8a909c", textAlign: "center" }
     }
   ]
 };
@@ -4934,13 +4969,37 @@ var quotaLow = {
   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: { show: true, position: "top-right", offset: [14, 14] },
-    style: { radius: 18 }
+    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 填的是宿主注册过的数据源名（不是接口地址），
@@ -4948,20 +5007,11 @@ var quotaLow = {
     stat: { $source: "userStatistics" },
     // 总额度：运营按当前套餐手填。为什么不走接口、以后怎么换，见文件头注释
     total: 30,
+    // 三条都没有状态标签 —— demo 这一屏的 lose 配置里就没有 tag 字段
     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"
-      }
+      { 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" } }
@@ -4969,118 +5019,114 @@ var quotaLow = {
   state: { period: 1 },
   derived: { current: { list: "tiers", indexBy: "period" } },
   nodes: [
-    // ===== 深色渐变头部：标签 + 2×2 成果格 =====
+    // ===== .m-top 深色渐变头部：（标签 + 额度条）同排 + 2×2 成果格 =====
     {
       type: "flex",
       style: {
         direction: "column",
         background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
-        padding: "20px 22px 16px",
-        gap: 13
+        padding: "20px 22px 16px"
       },
       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: [
-        // ===== 额度进度条：轨道 + 填充条 + 百分比表达式（本示例的重点）=====
-        {
+          // .m-top-head：右侧留 30px 给关闭按钮让位
           type: "flex",
           style: {
-            direction: "column",
-            background: "#fff8f3",
-            radius: 10,
-            padding: "8px 13px 9px",
-            gap: 4
+            align: "center",
+            justify: "space-between",
+            gap: 14,
+            padding: "0 30px 0 0"
           },
           children: [
             {
-              // 标题行：左边「剩余 N 次」，右边「已用 X / 总额度 次」
+              // .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: { align: "baseline", justify: "space-between" },
+              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", gap: 3 },
+                  style: { align: "baseline", justify: "space-between" },
                   children: [
                     {
                       type: "text",
                       content: "\u642C\u5BB6\u6B21\u6570\u5269\u4F59",
-                      style: { fontSize: 12, lineHeight: 1.35, color: "#3f4656" }
+                      style: {
+                        fontSize: 10.5,
+                        lineHeight: 1.25,
+                        color: "rgba(255,255,255,0.85)"
+                      }
                     },
                     {
                       type: "text",
                       content: "{{ user.collectCount }} \u6B21",
                       style: {
-                        fontSize: 15,
+                        fontSize: 12.5,
                         fontWeight: "800",
-                        lineHeight: 1.25,
-                        color: "#cf1322"
+                        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: 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)"
+                    fontSize: 9,
+                    lineHeight: 1.25,
+                    color: "rgba(255,255,255,0.6)"
                   }
                 }
               ]
@@ -5088,17 +5134,49 @@ var quotaLow = {
           ]
         },
         {
+          // .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", color: "#1f2533", marginTop: 17 }
+          style: {
+            fontSize: 15,
+            fontWeight: "800",
+            lineHeight: 1.55,
+            letterSpacing: -0.15,
+            color: "#1f2533"
+          }
         },
         {
+          // .lose
           type: "repeat",
           bind: "lose",
           template: loseRow3,
           style: {
             direction: "column",
-            marginTop: 12,
+            marginTop: 14,
             background: "#ffe9e6",
             borderWidth: 1,
             borderStyle: "solid",
@@ -5108,13 +5186,20 @@ var quotaLow = {
           }
         },
         {
+          // .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: 9 },
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 11 },
           children: [
             {
               type: "text",
-              content: "\u7EED\u6EE1\u989D\u5EA6 \xB7 \u9009\u62E9\u5468\u671F",
-              style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
+              content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
+              style: { fontSize: 13.5, fontWeight: "800", color: "#1f2533" }
             },
             {
               type: "text",
@@ -5131,19 +5216,27 @@ var quotaLow = {
             }
           ]
         },
+        // .tcols：wide 版 gap 8
         { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard3 },
         {
+          // .m-cta（th-loss 主题的红橙渐变）
           type: "flex",
           style: {
             justify: "center",
-            align: "center",
+            align: "baseline",
             gap: 5,
-            height: 52,
+            padding: "13px",
             radius: 11,
             background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
-            marginTop: 15,
+            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: [
@@ -5157,11 +5250,18 @@ var quotaLow = {
           },
           children: [
             {
+              // .m-cta .ct
               type: "text",
               content: "\u7EED\u6EE1\u989D\u5EA6 \xB7",
-              style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
+              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" }
@@ -5169,13 +5269,14 @@ var quotaLow = {
           ]
         },
         {
+          // .m-ghost
           type: "text",
           content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
           style: {
-            fontSize: 12.5,
+            fontSize: 12,
             color: "#8a909c",
             textAlign: "center",
-            marginTop: 11,
+            marginTop: 10,
             cursor: "pointer"
           },
           action: { type: "track", event: "popup_more_plans" }

package/dist/docs/index.js

@@ -4601,20 +4601,22 @@ 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,
-    padding: "10px 13px",
-    gap: 3
+    // .period-price-modal .ac 把基础规则的 9px 11px 覆盖成 10px 13px
+    padding: "10px 13px"
   },
   children: [
     {
-      // lineHeight 必须显式给，否则 20px 数字的默认行高会把格子撑高
+      // .ac .n：line-height 1.1 × 20px = 22px，显式给死，
+      // 否则 20px 数字的默认行高（≈1.5）会把格子撑高 8px 左右
       type: "flex",
-      style: { align: "baseline", gap: 3, height: 22 },
+      style: { align: "baseline", height: 22, whiteSpace: "nowrap" },
       children: [
         {
           type: "text",
@@ -4623,7 +4625,10 @@ var achieveCell3 = (verb, value, unit, label) => ({
             fontSize: 11.5,
             fontWeight: "600",
             lineHeight: 1.1,
-            color: "rgba(255,255,255,0.92)"
+            letterSpacing: 0.2,
+            marginRight: 3,
+            // demo 是 opacity .7 叠在 .m-top 的白字上，等价于这个色值
+            color: "rgba(255,255,255,0.7)"
           }
         },
         {
@@ -4634,14 +4639,25 @@ var achieveCell3 = (verb, value, unit, label) => ({
         {
           type: "text",
           content: ` ${unit}`,
-          style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
+          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.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
+      style: {
+        fontSize: 11,
+        lineHeight: 1.4,
+        marginTop: 2,
+        color: "rgba(255,255,255,0.85)"
+      }
     }
   ]
 });
@@ -4652,7 +4668,15 @@ var loseRow3 = {
     {
       type: "text",
       content: "",
-      style: { width: 6, height: 6, radius: "50%", background: "#f53f3f", marginTop: 7 }
+      style: {
+        width: 6,
+        height: 6,
+        radius: "50%",
+        background: "#f53f3f",
+        marginTop: 7,
+        // demo 的 flex: none —— 文案换行时圆点不许被压扁
+        flexShrink: "0"
+      }
     },
     {
       type: "flex",
@@ -4668,20 +4692,6 @@ var loseRow3 = {
             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 }}",
@@ -4695,14 +4705,18 @@ var tierCard3 = {
   type: "box",
   style: {
     flex: "1",
-    height: 121,
+    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' }}",
-    cursor: "pointer"
+    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: [
@@ -4716,6 +4730,8 @@ var tierCard3 = {
   },
   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",
@@ -4727,29 +4743,41 @@ var tierCard3 = {
         fontWeight: "800",
         radius: 6,
         textAlign: "center",
-        lineHeight: 22
+        lineHeight: 22,
+        whiteSpace: "nowrap"
       }
     },
     {
       type: "text",
       rect: [0, 12, "100%", 19],
       content: "{{ item.p }}",
-      style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
+      style: { fontSize: 13, lineHeight: 1.45, color: "#8a909c", textAlign: "center" }
     },
     {
       type: "flex",
-      rect: [0, 34, "100%", 26],
+      rect: [0, 36, "100%", 26],
       style: { justify: "center", align: "baseline" },
       children: [
         {
+          // .tpr i：符号比数字小一号、字重 600
           type: "text",
           content: "\xA5",
-          style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
+          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", color: "#1f2533" }
+          style: {
+            fontSize: 21,
+            fontWeight: "800",
+            lineHeight: 1.2,
+            color: "{{ item.key == current.key ? '#d46b08' : '#1f2533' }}"
+          }
         }
       ]
     },
@@ -4757,14 +4785,21 @@ var tierCard3 = {
       type: "text",
       rect: [4, 63, "calc(100% - 8px)", 32],
       content: "{{ item.per }}",
-      style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
+      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, 98, "100%", 15],
+      rect: [0, 95, "100%", 15],
       content: "{{ item.flag }}",
       visibleWhen: "item.flag != ''",
-      style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
+      style: { fontSize: 11, lineHeight: 1.35, color: "#8a909c", textAlign: "center" }
     }
   ]
 };
@@ -4773,13 +4808,37 @@ var quotaLow = {
   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: { show: true, position: "top-right", offset: [14, 14] },
-    style: { radius: 18 }
+    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 填的是宿主注册过的数据源名（不是接口地址），
@@ -4787,20 +4846,11 @@ var quotaLow = {
     stat: { $source: "userStatistics" },
     // 总额度：运营按当前套餐手填。为什么不走接口、以后怎么换，见文件头注释
     total: 30,
+    // 三条都没有状态标签 —— demo 这一屏的 lose 配置里就没有 tag 字段
     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"
-      }
+      { 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" } }
@@ -4808,118 +4858,114 @@ var quotaLow = {
   state: { period: 1 },
   derived: { current: { list: "tiers", indexBy: "period" } },
   nodes: [
-    // ===== 深色渐变头部：标签 + 2×2 成果格 =====
+    // ===== .m-top 深色渐变头部：（标签 + 额度条）同排 + 2×2 成果格 =====
     {
       type: "flex",
       style: {
         direction: "column",
         background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
-        padding: "20px 22px 16px",
-        gap: 13
+        padding: "20px 22px 16px"
       },
       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: [
-        // ===== 额度进度条：轨道 + 填充条 + 百分比表达式（本示例的重点）=====
-        {
+          // .m-top-head：右侧留 30px 给关闭按钮让位
           type: "flex",
           style: {
-            direction: "column",
-            background: "#fff8f3",
-            radius: 10,
-            padding: "8px 13px 9px",
-            gap: 4
+            align: "center",
+            justify: "space-between",
+            gap: 14,
+            padding: "0 30px 0 0"
           },
           children: [
             {
-              // 标题行：左边「剩余 N 次」，右边「已用 X / 总额度 次」
+              // .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: { align: "baseline", justify: "space-between" },
+              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", gap: 3 },
+                  style: { align: "baseline", justify: "space-between" },
                   children: [
                     {
                       type: "text",
                       content: "\u642C\u5BB6\u6B21\u6570\u5269\u4F59",
-                      style: { fontSize: 12, lineHeight: 1.35, color: "#3f4656" }
+                      style: {
+                        fontSize: 10.5,
+                        lineHeight: 1.25,
+                        color: "rgba(255,255,255,0.85)"
+                      }
                     },
                     {
                       type: "text",
                       content: "{{ user.collectCount }} \u6B21",
                       style: {
-                        fontSize: 15,
+                        fontSize: 12.5,
                         fontWeight: "800",
-                        lineHeight: 1.25,
-                        color: "#cf1322"
+                        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: 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)"
+                    fontSize: 9,
+                    lineHeight: 1.25,
+                    color: "rgba(255,255,255,0.6)"
                   }
                 }
               ]
@@ -4927,17 +4973,49 @@ var quotaLow = {
           ]
         },
         {
+          // .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", color: "#1f2533", marginTop: 17 }
+          style: {
+            fontSize: 15,
+            fontWeight: "800",
+            lineHeight: 1.55,
+            letterSpacing: -0.15,
+            color: "#1f2533"
+          }
         },
         {
+          // .lose
           type: "repeat",
           bind: "lose",
           template: loseRow3,
           style: {
             direction: "column",
-            marginTop: 12,
+            marginTop: 14,
             background: "#ffe9e6",
             borderWidth: 1,
             borderStyle: "solid",
@@ -4947,13 +5025,20 @@ var quotaLow = {
           }
         },
         {
+          // .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: 9 },
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 11 },
           children: [
             {
               type: "text",
-              content: "\u7EED\u6EE1\u989D\u5EA6 \xB7 \u9009\u62E9\u5468\u671F",
-              style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
+              content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
+              style: { fontSize: 13.5, fontWeight: "800", color: "#1f2533" }
             },
             {
               type: "text",
@@ -4970,19 +5055,27 @@ var quotaLow = {
             }
           ]
         },
+        // .tcols：wide 版 gap 8
         { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard3 },
         {
+          // .m-cta（th-loss 主题的红橙渐变）
           type: "flex",
           style: {
             justify: "center",
-            align: "center",
+            align: "baseline",
             gap: 5,
-            height: 52,
+            padding: "13px",
             radius: 11,
             background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
-            marginTop: 15,
+            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: [
@@ -4996,11 +5089,18 @@ var quotaLow = {
           },
           children: [
             {
+              // .m-cta .ct
               type: "text",
               content: "\u7EED\u6EE1\u989D\u5EA6 \xB7",
-              style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
+              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" }
@@ -5008,13 +5108,14 @@ var quotaLow = {
           ]
         },
         {
+          // .m-ghost
           type: "text",
           content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
           style: {
-            fontSize: 12.5,
+            fontSize: 12,
             color: "#8a909c",
             textAlign: "center",
-            marginTop: 11,
+            marginTop: 10,
             cursor: "pointer"
           },
           action: { type: "track", event: "popup_more_plans" }

package/package.json

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