@yaoxiu/marketing-dsl 2.1.2 → 2.2.0

package/dist/docs/index.cjs

@@ -3211,6 +3211,133 @@ var imageBanner = {
 };
 var image_banner_default = imageBanner;
 
+// src/docs/examples/drawer-banner.ts
+function buildBannerImage(options) {
+  const [from, to] = options.colors;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="72" viewBox="0 0 640 72">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="${from}"/>
+      <stop offset="1" stop-color="${to}"/>
+    </linearGradient>
+  </defs>
+  <rect width="640" height="72" fill="url(#g)"/>
+  <text x="20" y="44" font-family="sans-serif" font-size="22" fill="#ffffff">${options.title}</text>
+  <rect x="400" y="18" width="150" height="36" rx="18" fill="#ffffff" fill-opacity="0.92"/>
+  <text x="475" y="43" font-family="sans-serif" font-size="20" fill="${options.ctaColor}" text-anchor="middle">${options.cta}</text>
+</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function createDrawerBanner(options) {
+  return {
+    version: 1,
+    type: "banner",
+    meta: { name: options.name },
+    stage: {
+      width: "100%",
+      // 高度写死：坑位宽度是宿主固定的，不需要靠 aspectRatio 维持等比（见文件头注释）
+      height: options.height,
+      style: { radius: 6, overflow: "hidden" },
+      onShow: {
+        type: "track",
+        event: "drawer_banner_show",
+        params: { scene: options.scene }
+      },
+      onClose: {
+        type: "track",
+        event: "drawer_banner_dismiss",
+        params: { scene: options.scene, reason: "{{ closeReason }}" }
+      }
+    },
+    // 高度已确定，节点直接铺在 stage 上按 rect 绝对定位，不需要额外套一层定位容器
+    nodes: [
+      {
+        type: "image",
+        rect: [0, 0, "100%", "100%"],
+        src: buildBannerImage(options),
+        // 画布比例与坑位一致，cover 既不裁也不拉，图里元素与百分比热区天然对齐
+        style: { objectFit: "cover" }
+      },
+      {
+        // 左半边文案区：图里文字从 20/640 起，热区框大一圈
+        type: "box",
+        rect: ["2%", "15%", "56%", "70%"],
+        style: { radius: 4, background: "rgba(255,255,255,0.14)", cursor: "pointer" },
+        action: {
+          type: "sequence",
+          actions: [
+            {
+              type: "track",
+              event: "drawer_banner_click",
+              params: { scene: options.scene, area: "title" }
+            },
+            { type: "navigate", url: options.url, target: "_blank" }
+          ]
+        }
+      },
+      {
+        // 右侧按钮：图里按钮是 400~550（62.5%~85.9%），热区照着框
+        type: "box",
+        rect: ["62%", "20%", "25%", "60%"],
+        style: {
+          radius: 999,
+          background: "rgba(255,255,255,0.16)",
+          cursor: "pointer"
+        },
+        action: {
+          type: "sequence",
+          actions: [
+            {
+              type: "track",
+              event: "drawer_banner_click",
+              params: { scene: options.scene, area: "cta" }
+            },
+            { type: "navigate", url: options.url, target: "_blank" }
+          ]
+        }
+      },
+      {
+        // 关闭按钮贴右：x / y 用 calc 而不是百分比 —— 百分比按容器尺寸算，
+        // 坑位宽度一调它就飘；calc 让它永远距右边缘 8px、垂直居中
+        type: "text",
+        content: "\u2715",
+        rect: ["calc(100% - 20px)", "calc(50% - 6px)", 12, 12],
+        style: {
+          textAlign: "center",
+          lineHeight: 12,
+          radius: 6,
+          background: "rgba(0,0,0,0.32)",
+          color: "#fff",
+          fontSize: 9,
+          cursor: "pointer"
+        },
+        // 「不再提醒」写在 close 的 reason 上，上报给后端即可，不配 call 写本地存储
+        action: { type: "close", reason: "user-dismiss" }
+      }
+    ]
+  };
+}
+var drawerTopBanner = createDrawerBanner({
+  name: "\u62BD\u5C49\u9876\u90E8 Banner\uFF08320\xD736\uFF09",
+  height: 36,
+  title: "AI \u4E00\u952E\u586B\u5199\u5C5E\u6027 \xB7 \u9650\u65F6\u514D\u8D39",
+  cta: "\u53BB\u8BD5\u8BD5",
+  colors: ["#2b6cf6", "#5aa0ff"],
+  ctaColor: "#1a4fd0",
+  scene: "product_edit_top",
+  url: "https://maibaole.example.com/ai-attr"
+});
+var drawerBottomBanner = createDrawerBanner({
+  name: "\u62BD\u5C49\u5E95\u90E8 Banner\uFF08400\xD745\uFF09",
+  height: 45,
+  title: "\u642C\u5BB6\u9047\u5230\u95EE\u9898\uFF1F\u4E13\u5C5E\u987E\u95EE 1v1",
+  cta: "\u7ACB\u5373\u54A8\u8BE2",
+  colors: ["#ff6a3d", "#ffa15c"],
+  ctaColor: "#d43a1f",
+  scene: "product_edit_bottom",
+  url: "https://maibaole.example.com/support"
+});
+
 // src/docs/examples/index.ts
 var HOTSPOT_BG = "rgba(255,68,51,0.16)";
 var imageHotspot = {
@@ -3442,7 +3569,17 @@ var examples = [
     dsl: confirmAndSwitch
   },
   { label: "\u2466 \u5207 tab \u6362\u80A4\u6362\u5E03\u5C40", value: "tabTheme", dsl: tab_theme_default },
-  { label: "\u2467 \u6574\u56FE Banner\uFF08\u7A84\u901A\u680F + \u70ED\u533A\uFF09", value: "imageBanner", dsl: image_banner_default }
+  { label: "\u2467 \u6574\u56FE Banner\uFF08\u7A84\u901A\u680F + \u70ED\u533A\uFF09", value: "imageBanner", dsl: image_banner_default },
+  {
+    label: "\u2468 \u62BD\u5C49\u9876\u90E8 Banner\uFF08\u56FA\u5B9A 320\xD736\uFF09",
+    value: "drawerTopBanner",
+    dsl: drawerTopBanner
+  },
+  {
+    label: "\u2469 \u62BD\u5C49\u5E95\u90E8 Banner\uFF08\u56FA\u5B9A 400\xD745\uFF09",
+    value: "drawerBottomBanner",
+    dsl: drawerBottomBanner
+  }
 ];
 var examples_default = examples;
 

package/dist/docs/index.d.cts

@@ -94,7 +94,8 @@ declare const meta: DocMeta;
 /**
  * 调试用示例 DSL。
  *
- * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局。
+ * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局，
+ * ⑧ 是通栏 banner（宽度由页面决定、只能声明比例），⑨⑩ 是商品编辑抽屉里两个**固定尺寸**坑位。
  * 后端数据源（$source）用法见 ③。
  */
 

package/dist/docs/index.d.ts

@@ -94,7 +94,8 @@ declare const meta: DocMeta;
 /**
  * 调试用示例 DSL。
  *
- * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局。
+ * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局，
+ * ⑧ 是通栏 banner（宽度由页面决定、只能声明比例），⑨⑩ 是商品编辑抽屉里两个**固定尺寸**坑位。
  * 后端数据源（$source）用法见 ③。
  */
 

package/dist/docs/index.js

@@ -3086,6 +3086,133 @@ var imageBanner = {
 };
 var image_banner_default = imageBanner;
 
+// src/docs/examples/drawer-banner.ts
+function buildBannerImage(options) {
+  const [from, to] = options.colors;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="72" viewBox="0 0 640 72">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="${from}"/>
+      <stop offset="1" stop-color="${to}"/>
+    </linearGradient>
+  </defs>
+  <rect width="640" height="72" fill="url(#g)"/>
+  <text x="20" y="44" font-family="sans-serif" font-size="22" fill="#ffffff">${options.title}</text>
+  <rect x="400" y="18" width="150" height="36" rx="18" fill="#ffffff" fill-opacity="0.92"/>
+  <text x="475" y="43" font-family="sans-serif" font-size="20" fill="${options.ctaColor}" text-anchor="middle">${options.cta}</text>
+</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function createDrawerBanner(options) {
+  return {
+    version: 1,
+    type: "banner",
+    meta: { name: options.name },
+    stage: {
+      width: "100%",
+      // 高度写死：坑位宽度是宿主固定的，不需要靠 aspectRatio 维持等比（见文件头注释）
+      height: options.height,
+      style: { radius: 6, overflow: "hidden" },
+      onShow: {
+        type: "track",
+        event: "drawer_banner_show",
+        params: { scene: options.scene }
+      },
+      onClose: {
+        type: "track",
+        event: "drawer_banner_dismiss",
+        params: { scene: options.scene, reason: "{{ closeReason }}" }
+      }
+    },
+    // 高度已确定，节点直接铺在 stage 上按 rect 绝对定位，不需要额外套一层定位容器
+    nodes: [
+      {
+        type: "image",
+        rect: [0, 0, "100%", "100%"],
+        src: buildBannerImage(options),
+        // 画布比例与坑位一致，cover 既不裁也不拉，图里元素与百分比热区天然对齐
+        style: { objectFit: "cover" }
+      },
+      {
+        // 左半边文案区：图里文字从 20/640 起，热区框大一圈
+        type: "box",
+        rect: ["2%", "15%", "56%", "70%"],
+        style: { radius: 4, background: "rgba(255,255,255,0.14)", cursor: "pointer" },
+        action: {
+          type: "sequence",
+          actions: [
+            {
+              type: "track",
+              event: "drawer_banner_click",
+              params: { scene: options.scene, area: "title" }
+            },
+            { type: "navigate", url: options.url, target: "_blank" }
+          ]
+        }
+      },
+      {
+        // 右侧按钮：图里按钮是 400~550（62.5%~85.9%），热区照着框
+        type: "box",
+        rect: ["62%", "20%", "25%", "60%"],
+        style: {
+          radius: 999,
+          background: "rgba(255,255,255,0.16)",
+          cursor: "pointer"
+        },
+        action: {
+          type: "sequence",
+          actions: [
+            {
+              type: "track",
+              event: "drawer_banner_click",
+              params: { scene: options.scene, area: "cta" }
+            },
+            { type: "navigate", url: options.url, target: "_blank" }
+          ]
+        }
+      },
+      {
+        // 关闭按钮贴右：x / y 用 calc 而不是百分比 —— 百分比按容器尺寸算，
+        // 坑位宽度一调它就飘；calc 让它永远距右边缘 8px、垂直居中
+        type: "text",
+        content: "\u2715",
+        rect: ["calc(100% - 20px)", "calc(50% - 6px)", 12, 12],
+        style: {
+          textAlign: "center",
+          lineHeight: 12,
+          radius: 6,
+          background: "rgba(0,0,0,0.32)",
+          color: "#fff",
+          fontSize: 9,
+          cursor: "pointer"
+        },
+        // 「不再提醒」写在 close 的 reason 上，上报给后端即可，不配 call 写本地存储
+        action: { type: "close", reason: "user-dismiss" }
+      }
+    ]
+  };
+}
+var drawerTopBanner = createDrawerBanner({
+  name: "\u62BD\u5C49\u9876\u90E8 Banner\uFF08320\xD736\uFF09",
+  height: 36,
+  title: "AI \u4E00\u952E\u586B\u5199\u5C5E\u6027 \xB7 \u9650\u65F6\u514D\u8D39",
+  cta: "\u53BB\u8BD5\u8BD5",
+  colors: ["#2b6cf6", "#5aa0ff"],
+  ctaColor: "#1a4fd0",
+  scene: "product_edit_top",
+  url: "https://maibaole.example.com/ai-attr"
+});
+var drawerBottomBanner = createDrawerBanner({
+  name: "\u62BD\u5C49\u5E95\u90E8 Banner\uFF08400\xD745\uFF09",
+  height: 45,
+  title: "\u642C\u5BB6\u9047\u5230\u95EE\u9898\uFF1F\u4E13\u5C5E\u987E\u95EE 1v1",
+  cta: "\u7ACB\u5373\u54A8\u8BE2",
+  colors: ["#ff6a3d", "#ffa15c"],
+  ctaColor: "#d43a1f",
+  scene: "product_edit_bottom",
+  url: "https://maibaole.example.com/support"
+});
+
 // src/docs/examples/index.ts
 var HOTSPOT_BG = "rgba(255,68,51,0.16)";
 var imageHotspot = {
@@ -3317,7 +3444,17 @@ var examples = [
     dsl: confirmAndSwitch
   },
   { label: "\u2466 \u5207 tab \u6362\u80A4\u6362\u5E03\u5C40", value: "tabTheme", dsl: tab_theme_default },
-  { label: "\u2467 \u6574\u56FE Banner\uFF08\u7A84\u901A\u680F + \u70ED\u533A\uFF09", value: "imageBanner", dsl: image_banner_default }
+  { label: "\u2467 \u6574\u56FE Banner\uFF08\u7A84\u901A\u680F + \u70ED\u533A\uFF09", value: "imageBanner", dsl: image_banner_default },
+  {
+    label: "\u2468 \u62BD\u5C49\u9876\u90E8 Banner\uFF08\u56FA\u5B9A 320\xD736\uFF09",
+    value: "drawerTopBanner",
+    dsl: drawerTopBanner
+  },
+  {
+    label: "\u2469 \u62BD\u5C49\u5E95\u90E8 Banner\uFF08\u56FA\u5B9A 400\xD745\uFF09",
+    value: "drawerBottomBanner",
+    dsl: drawerBottomBanner
+  }
 ];
 var examples_default = examples;
 

package/package.json

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