@yaoxiu/marketing-dsl 2.8.0 → 2.9.0

package/README.md

@@ -111,7 +111,7 @@ const unsubscribe = runtime.subscribe(() => {
 // 还会把用户已经切到的 tab 打回默认值。
 runtime.update({ user: { shopName: '麦爆了旗舰店' } });
 
-// 卸载时必须调，否则倒计时定时器不会停
+// 卸载时必须调，否则倒计时 / 自动轮播的定时器不会停
 runtime.destroy();
 unsubscribe();
 ```
@@ -143,6 +143,8 @@ unsubscribe();
   countdownPrecision: 's',
   css: '',              // 要注入的 CSS 文本（keyframes + hover 规则），没有动画时是空串
   rootClassName: 'dsl-renderer dsl-r3', // 根容器类名，后半截是这份物料的作用域前缀
+  onRootEnter: fn,     // 可选：只有配了 pauseOnHover 的自动轮播才有，见下
+  onRootLeave: fn,
 }
 ```
 
@@ -167,6 +169,28 @@ unsubscribe();
 
 父子都可点是常见排版——公告条整条点开弹窗、行末 × 关闭公告条——不阻止的话点 × 会连带触发外层，关掉的瞬间又弹出来。没有 `onClick` 的节点不要绑任何事件，让它正常冒泡到有 `onClick` 的祖先。
 
+### 自动轮播（`derived.xxx.autoplay`）
+
+```jsonc
+"state":   { "slide": 0 },
+"derived": { "cur": { "list": "slides", "indexBy": "slide",
+  "autoplay": { "interval": 4000, "pauseOnHover": true } } }
+```
+
+配了就开启、始终循环（没有 `enabled` / `loop`）：每 `interval` 毫秒把 `state[indexBy]` 推到
+`(当前 + 1) % 列表长度`。定时逻辑在 `src/autoplay.ts`，`runtime.ts` 只接线。
+
+- **与点击同一条路径**：到点调的就是运行时的 `setState`，`state-change` 照常派发，文案 / 图片 /
+  tabs 指示器 / 链接 / 运营配的 `transition` 与手动点击效果完全一致，不引入额外切换动画
+- 任何 `setState` 改了同一个 key（用户点 tab）都会**重新计时**
+- 列表长度 ≤1、数据源未就绪或失败时不播；数据源回来后开始；`editMode` 下照样播
+- `destroy()` 清掉全部轮播定时器，之后不会再 `setState`
+- `pauseOnHover` 需要壳配合：渲染树此时带 `onRootEnter` / `onRootLeave`，
+  壳在根容器上绑 `mouseenter` / `mouseleave` 原样调用即可（**有才绑、不拦冒泡、不加判断**）
+
+校验：`autoplay` 须是对象；`interval` 须是 ≥300 的数字（单位毫秒，否则 error）；
+`pauseOnHover` 须是布尔；其余字段只告警（运行时忽略）。字段表导出为 `AUTOPLAY_FIELDS`。
+
 ## 运行时事件（`emit`）
 
 | 事件           | 何时抛                                       | 宿主拿它干嘛                            |

package/dist/{chunk-DT3ZINDI.js → chunk-B6BKOMWL.js}

@@ -399,6 +399,109 @@ function createTicker(options) {
   return { sync, stop };
 }
 
+// src/autoplay.ts
+var DERIVED_FIELDS = ["list", "indexBy", "autoplay"];
+var AUTOPLAY_FIELDS = ["interval", "pauseOnHover"];
+var AUTOPLAY_MIN_INTERVAL = 300;
+function collectEntries(derived) {
+  const entries = [];
+  Object.keys(derived || {}).forEach((name) => {
+    const config = (derived || {})[name];
+    const autoplay = config && config.autoplay;
+    if (!autoplay || typeof autoplay !== "object") return;
+    const interval = Number(autoplay.interval);
+    if (!isFinite(interval) || interval < AUTOPLAY_MIN_INTERVAL) return;
+    entries.push({
+      list: config.list,
+      indexBy: config.indexBy,
+      interval,
+      pauseOnHover: autoplay.pauseOnHover === true,
+      timer: null
+    });
+  });
+  return entries;
+}
+function createAutoplay(options) {
+  const entries = collectEntries(options.derived);
+  let started = false;
+  let hovering = false;
+  let stopped = false;
+  function clear(entry) {
+    if (entry.timer) {
+      clearTimeout(entry.timer);
+      entry.timer = null;
+    }
+  }
+  function advance(entry) {
+    entry.timer = null;
+    const length = options.getLength(entry.list);
+    if (length <= 1) return;
+    const index = options.getIndex(entry.indexBy);
+    options.setState(entry.indexBy, (index + 1) % length);
+  }
+  function schedule(entry) {
+    clear(entry);
+    if (stopped || !started) return;
+    if (hovering && entry.pauseOnHover) return;
+    if (options.getLength(entry.list) <= 1) return;
+    entry.timer = setTimeout(() => advance(entry), entry.interval);
+  }
+  return {
+    pausable: entries.some((entry) => entry.pauseOnHover),
+    start() {
+      started = true;
+      entries.forEach(schedule);
+    },
+    reset(key) {
+      entries.forEach((entry) => {
+        if (entry.indexBy === key) schedule(entry);
+      });
+    },
+    pause() {
+      hovering = true;
+      entries.forEach((entry) => {
+        if (entry.pauseOnHover) clear(entry);
+      });
+    },
+    resume() {
+      hovering = false;
+      entries.forEach((entry) => {
+        if (entry.pauseOnHover) schedule(entry);
+      });
+    },
+    stop() {
+      stopped = true;
+      entries.forEach(clear);
+    }
+  };
+}
+function validateAutoplay(autoplay, path, add, warn) {
+  if (autoplay === void 0) return;
+  if (!autoplay || typeof autoplay !== "object" || Array.isArray(autoplay)) {
+    add(path, 'autoplay \u5FC5\u987B\u662F\u5BF9\u8C61\uFF0C\u5F62\u5982 { "interval": 4000, "pauseOnHover": true }');
+    return;
+  }
+  const config = autoplay;
+  const interval = config.interval;
+  if (typeof interval !== "number" || !isFinite(interval) || interval < AUTOPLAY_MIN_INTERVAL) {
+    add(
+      `${path}.interval`,
+      `interval \u5FC5\u987B\u662F\u4E0D\u5C0F\u4E8E ${AUTOPLAY_MIN_INTERVAL} \u7684\u6570\u5B57\uFF0C\u5355\u4F4D\u6BEB\u79D2\uFF08\u5982 4000 \u8868\u793A 4 \u79D2\uFF09\uFF0C\u5F53\u524D\u4E3A ${JSON.stringify(interval)}`
+    );
+  }
+  if (config.pauseOnHover !== void 0 && typeof config.pauseOnHover !== "boolean") {
+    add(`${path}.pauseOnHover`, "pauseOnHover \u5FC5\u987B\u662F true \u6216 false");
+  }
+  Object.keys(config).forEach((key) => {
+    if (AUTOPLAY_FIELDS.indexOf(key) === -1) {
+      warn(
+        `${path}.${key}`,
+        `autoplay \u4E0D\u8BA4\u8BC6 "${key}"\uFF0C\u4F1A\u88AB\u5FFD\u7565\u3002\u53EF\u7528\uFF1A${AUTOPLAY_FIELDS.join(" / ")}\uFF08\u914D\u4E86 autoplay \u5C31\u5F00\u542F\u4E14\u59CB\u7EC8\u5FAA\u73AF\uFF0C\u4E0D\u9700\u8981 enabled / loop\uFF09`
+      );
+    }
+  });
+}
+
 // src/views.ts
 var SINGLE_VIEW_NAME = "main";
 function normalizeViews(dsl) {
@@ -962,7 +1065,7 @@ function validate(dsl, options) {
   }
   const dataKeys = validateData(doc.data, add);
   const stateKeys = validateState(doc.state, add);
-  validateDerived(doc.derived, dataKeys, stateKeys, add);
+  validateDerived(doc.derived, dataKeys, stateKeys, add, warn);
   const keyframeNames = validateKeyframes(doc.keyframes, add, warn);
   const isMulti = doc.views !== void 0;
   if (isMulti) validateMultiView(doc, add);
@@ -1211,7 +1314,7 @@ function validateState(state, add) {
   }
   return Object.keys(state);
 }
-function validateDerived(derived, dataKeys, stateKeys, add) {
+function validateDerived(derived, dataKeys, stateKeys, add, warn) {
   if (derived === void 0) return;
   if (typeof derived !== "object" || derived === null || Array.isArray(derived)) {
     add("derived", "derived \u5FC5\u987B\u662F\u5BF9\u8C61");
@@ -1229,6 +1332,7 @@ function validateDerived(derived, dataKeys, stateKeys, add) {
     } else if (stateKeys.indexOf(item.indexBy) === -1) {
       add(`derived.${key}.indexBy`, `state \u4E2D\u4E0D\u5B58\u5728 "${item.indexBy}"`);
     }
+    validateAutoplay(item.autoplay, `derived.${key}.autoplay`, add, warn);
   });
 }
 function validateNodeStyle(style, path, ctx) {
@@ -1443,4 +1547,4 @@ function formatIssues(issues) {
   return issues.map((item) => item.path ? `${item.path}: ${item.message}` : item.message).join("\n");
 }
 
-export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, DEFAULT_USER_FIELDS, DSL_VERSION, NODE_TYPES, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, check, computeParts, createCssBuilder, createTicker, declarations, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isValidEasing, isValidEndTime, nextScopeUid, normalizeViews, parseEndTime, resolveNodeStyle, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields };
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, AUTOPLAY_FIELDS, AUTOPLAY_MIN_INTERVAL, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, DEFAULT_USER_FIELDS, DERIVED_FIELDS, DSL_VERSION, NODE_TYPES, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, check, computeParts, createAutoplay, createCssBuilder, createTicker, declarations, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isValidEasing, isValidEndTime, nextScopeUid, normalizeViews, parseEndTime, resolveNodeStyle, sanitizeCssValue, toCssStyle, toLength, validate, validateAutoplay, validateUserFields };

package/dist/docs/index.cjs

@@ -129,6 +129,11 @@ var ALLOWED_EASINGS = [
   "step-end"
 ];
 
+// src/autoplay.ts
+var DERIVED_FIELDS = ["list", "indexBy", "autoplay"];
+var AUTOPLAY_FIELDS = ["interval", "pauseOnHover"];
+var AUTOPLAY_MIN_INTERVAL = 300;
+
 // src/validate.ts
 var DSL_VERSION = 1;
 var NODE_TYPES = [
@@ -862,6 +867,18 @@ var userFieldRows = DEFAULT_USER_FIELDS.map((field) => [
   `\`user.${field}\``,
   USER_FIELD_LABELS[field] || ""
 ]);
+var derivedRows = [
+  ["list", "`data` \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D"],
+  ["indexBy", "`state` \u91CC\u7684\u4E0B\u6807\u5B57\u6BB5\u540D"],
+  ["autoplay", "\u53EF\u9009\u3002\u81EA\u52A8\u8F6E\u64AD\uFF0C\u89C1\u4E0B"]
+];
+var autoplayRows = [
+  [
+    "interval",
+    `\u5FC5\u586B\u3002\u5207\u6362\u95F4\u9694\uFF0C**\u5355\u4F4D\u6BEB\u79D2**\uFF0C\u4E0D\u5C0F\u4E8E ${AUTOPLAY_MIN_INTERVAL}\uFF08\u5982 \`4000\` = 4 \u79D2\uFF09`
+  ],
+  ["pauseOnHover", "\u53EF\u9009\uFF0C\u9ED8\u8BA4 `false`\u3002\u9F20\u6807\u60AC\u505C\u5728\u6574\u4E2A\u7269\u6599\u4E0A\u65F6\u6682\u505C\uFF0C\u79FB\u5F00\u540E\u91CD\u65B0\u8BA1\u65F6"]
+];
 var sections4 = [
   {
     id: "data",
@@ -931,9 +948,42 @@ var sections4 = [
       {
         t: "table",
         head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
-        rows: [
-          ["list", "`data` \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D"],
-          ["indexBy", "`state` \u91CC\u7684\u4E0B\u6807\u5B57\u6BB5\u540D"]
+        rows: derivedRows.concat(
+          reconcileRows({ rows: derivedRows, actual: DERIVED_FIELDS, label: "\u65B0\u589E\u5B57\u6BB5" })
+        )
+      },
+      { t: "h3", text: "derived.autoplay\uFF1A\u81EA\u52A8\u8F6E\u64AD" },
+      {
+        t: "p",
+        text: "\u516C\u544A\u6761\u8F6E\u64AD\u6587\u6848\u3001\u8F6E\u64AD\u56FE\u8FD9\u7C7B\u300C\u9694\u51E0\u79D2\u81EA\u52A8\u6362\u4E0B\u4E00\u6761\u300D\u7684\u9700\u6C42\uFF0C\u5728 derived \u4E0A\u52A0 `autoplay` \u5373\u53EF\u3002\u914D\u4E86\u5C31\u5F00\u542F\u3001\u59CB\u7EC8\u5FAA\u73AF\uFF1A\u6BCF\u9694 `interval` \u6BEB\u79D2\u628A `state[indexBy]` \u52A0 1\uFF0C\u5230\u672B\u5C3E\u56DE\u5230 0\u3002\u5B83\u6539\u72B6\u6001\u8D70\u7684\u5C31\u662F\u70B9 tab \u90A3\u4E00\u6761\u8DEF\uFF0C\u6240\u4EE5\u6587\u6848\u3001\u56FE\u7247\u3001tabs \u5706\u70B9\u6307\u793A\u5668\u3001\u8DF3\u8F6C\u94FE\u63A5\u4F1A\u4E00\u8D77\u5207\uFF0C\u6548\u679C\u548C\u7528\u6237\u624B\u52A8\u70B9\u5B8C\u5168\u4E00\u6837\u2014\u2014\u4E0D\u4F1A\u51ED\u7A7A\u591A\u51FA\u5207\u6362\u52A8\u753B\uFF0C\u60F3\u8981\u8FC7\u6E21\u6548\u679C\u81EA\u5DF1\u5728 `style` \u91CC\u914D `transition`\u3002"
+      },
+      {
+        t: "code",
+        code: `"data":    { "slides": [ { "text": "\u2026", "url": "\u2026" }, { \u2026 }, { \u2026 } ] },
+"state":   { "slide": 0 },
+"derived": { "cur": { "list": "slides", "indexBy": "slide",
+  "autoplay": { "interval": 4000, "pauseOnHover": true } } }
+
+// \u6587\u6848 {{ cur.text }}\u3001\u94FE\u63A5 {{ cur.url }} \u81EA\u52A8\u8DDF\u7740\u5F53\u524D\u9879\u8D70\uFF1B
+// \u5706\u70B9\u6307\u793A\u5668\u5C31\u662F\u4E00\u4E2A tabs\uFF1A{ "type": "tabs", "bind": "slides", "stateKey": "slide" }`
+      },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
+        rows: autoplayRows.concat(
+          reconcileRows({
+            rows: autoplayRows,
+            actual: AUTOPLAY_FIELDS,
+            label: "\u65B0\u589E\u5B57\u6BB5"
+          })
+        )
+      },
+      {
+        t: "list",
+        items: [
+          "\u7528\u6237\u70B9\u4E86 tab\uFF08\u6216\u4EFB\u4F55 `setState` \u6539\u4E86\u540C\u4E00\u4E2A key\uFF09\u4F1A**\u91CD\u65B0\u8BA1\u65F6**\uFF0C\u4E0D\u4F1A\u521A\u70B9\u5B8C\u5C31\u88AB\u5207\u8D70",
+          "\u5217\u8868\u53EA\u6709 0~1 \u6761\u3001\u6216\u6570\u636E\u6E90\u8FD8\u6CA1\u56DE\u6765\u65F6\u4E0D\u64AD\uFF1B\u6570\u636E\u56DE\u6765\u540E\u81EA\u52A8\u5F00\u59CB",
+          "\u6CA1\u6709 `enabled` / `loop` \u5F00\u5173\uFF1A\u4E0D\u60F3\u8F6E\u64AD\u5C31\u522B\u5199 `autoplay`\uFF0C\u5199\u4E86\u5C31\u4E00\u76F4\u5FAA\u73AF"
         ]
       }
     ]
@@ -1861,6 +1911,15 @@ var sections_default = sections10;
 
 // src/docs/meta.ts
 var changelog = [
+  {
+    date: "2026-09-22",
+    items: [
+      '\u65B0\u589E derived.autoplay \u81EA\u52A8\u8F6E\u64AD\uFF08\u7B2C 8 \u8282\uFF09\uFF1A`{ "interval": 4000, "pauseOnHover": true }` \u6302\u5728 derived \u4E0A\u5373\u53EF\u8BA9\u516C\u544A\u6761\u6587\u6848 / \u8F6E\u64AD\u56FE\u6BCF\u9694\u51E0\u79D2\u81EA\u52A8\u6362\u4E0B\u4E00\u6761\u3001\u5230\u672B\u5C3E\u56DE\u5230\u7B2C\u4E00\u6761\u3002\u5207\u6362\u8D70\u7684\u662F\u548C\u70B9 tab \u540C\u4E00\u6761\u8DEF\uFF0C\u6587\u6848\u3001\u56FE\u7247\u3001\u5706\u70B9\u6307\u793A\u5668\u3001\u8DF3\u8F6C\u94FE\u63A5\u4E00\u8D77\u5207\uFF1B\u7528\u6237\u624B\u52A8\u70B9\u8FC7\u4F1A\u91CD\u65B0\u8BA1\u65F6\uFF0C\u5217\u8868\u4E0D\u8DB3 2 \u6761\u6216\u6570\u636E\u6CA1\u56DE\u6765\u65F6\u4E0D\u64AD',
+      "autoplay \u4FDD\u5B58\u65F6\u4F1A\u6821\u9A8C\uFF1Ainterval \u5FC5\u987B\u662F\u4E0D\u5C0F\u4E8E 300 \u7684\u6BEB\u79D2\u6570\uFF08\u5199\u6210 4 \u8868\u793A 4 \u6BEB\u79D2\uFF0C\u4F1A\u88AB\u62E6\u4E0B\uFF09\uFF0CpauseOnHover \u5FC5\u987B\u662F\u5E03\u5C14\uFF1B\u6CA1\u6709 enabled / loop \u5B57\u6BB5\uFF0C\u5199\u4E86\u53EA\u544A\u8B66\u5E76\u88AB\u5FFD\u7565",
+      "\u65B0\u589E\u793A\u4F8B \u246D \u516C\u544A\u6761\u8F6E\u64AD\u6218\u62A5\uFF1A3 \u6761\u6587\u6848 + tabs \u5706\u70B9\u6307\u793A\u5668 + \u8DF3\u8F6C\u94FE\u63A5\u8DDF\u968F\u5F53\u524D\u9879\uFF0C\u8981\u505A\u8F6E\u64AD\u6284\u8FD9\u4EFD",
+      "\u6846\u67B6\u58F3\u65B0\u589E\u4E00\u6761\u4E49\u52A1\uFF1A\u6E32\u67D3\u6811\u5E26 onRootEnter / onRootLeave \u65F6\u5728\u6839\u5BB9\u5668\u4E0A\u7ED1 mouseenter / mouseleave\uFF08Vue 2 \u58F3\u5DF2\u8DDF\u4E0A\uFF09"
+    ]
+  },
   {
     date: "2026-09-01",
     items: [
@@ -5336,6 +5395,142 @@ var quotaLow = {
 };
 var quota_low_default = quotaLow;
 
+// src/docs/examples/notice-carousel.ts
+var slides = [
+  {
+    key: "move",
+    text: "\u{1F389} \u4ECA\u65E5\u5DF2\u6709 12,806 \u5BB6\u5E97\u94FA\u7528\u9EA6\u7206\u4E86\u5B8C\u6210\u5546\u54C1\u642C\u5BB6",
+    url: "https://maibaole.example.com/move",
+    // tabs 的标签字段，圆点不显示文字，留空串
+    dot: ""
+  },
+  {
+    key: "ai",
+    text: "\u{1F525} AI \u667A\u80FD\u4F18\u5316\u672C\u5468\u7D2F\u8BA1\u6539\u5199\u6807\u9898 38 \u4E07\u6761\uFF0C\u70B9\u51FB\u7387\u5E73\u5747\u63D0\u5347 17%",
+    url: "https://maibaole.example.com/ai-optimize",
+    dot: ""
+  },
+  {
+    key: "renew",
+    text: "\u{1F4B0} \u4E13\u4E1A\u7248\u9650\u65F6 8 \u6298\uFF0C\u7EED\u8D39\u7ACB\u7701 180 \u5143",
+    url: "https://maibaole.example.com/renew",
+    dot: ""
+  }
+];
+var noticeCarousel = {
+  version: 1,
+  type: "notice",
+  meta: { name: "\u516C\u544A\u6761\u8F6E\u64AD\u6218\u62A5\uFF08\u81EA\u52A8\u8F6E\u64AD\uFF09" },
+  data: { slides },
+  state: { slide: 0 },
+  derived: {
+    cur: {
+      list: "slides",
+      indexBy: "slide",
+      // 4 秒一条，悬停暂停；单位是毫秒
+      autoplay: { interval: 4e3, pauseOnHover: true }
+    }
+  },
+  stage: {
+    width: "100%",
+    height: "auto",
+    layout: "flow",
+    // 通栏类型不写 maxWidth，宽度交给宿主坑位
+    style: { radius: 6, background: "#fff8e6" },
+    onShow: { type: "track", event: "notice_show", params: { notice: "carousel" } },
+    onClose: {
+      type: "track",
+      event: "notice_dismiss",
+      params: { notice: "carousel", reason: "{{ closeReason }}" }
+    }
+  },
+  nodes: [
+    {
+      type: "flex",
+      style: { align: "center", gap: 10, padding: "10px 14px" },
+      children: [
+        {
+          // 文案跟着当前项走；定高单行，换条时公告条高度不跳
+          type: "text",
+          content: "{{ cur.text }}",
+          style: {
+            flex: "1",
+            fontSize: 14,
+            color: "#8a6212",
+            lineHeight: 22,
+            height: 22,
+            overflow: "hidden",
+            whiteSpace: "nowrap"
+          }
+        },
+        {
+          // 圆点指示器：当前项拉长成胶囊，宽度变化用 transition 过渡
+          type: "tabs",
+          bind: "slides",
+          stateKey: "slide",
+          labelField: "dot",
+          style: { direction: "row", align: "center", gap: 6 },
+          itemStyle: {
+            width: 6,
+            height: 6,
+            radius: 3,
+            background: "rgba(176,138,62,0.35)",
+            cursor: "pointer",
+            transition: "width 0.3s ease"
+          },
+          activeItemStyle: { width: 16, background: "#f5a623" },
+          action: {
+            type: "track",
+            event: "notice_dot_click",
+            params: { notice: "carousel" }
+          }
+        },
+        {
+          // 链接跟着当前项走：看到哪条、点的就是哪条
+          type: "button",
+          text: "\u53BB\u770B\u770B",
+          style: {
+            width: 64,
+            height: 26,
+            radius: 13,
+            background: "#f5a623",
+            color: "#fff",
+            fontSize: 12,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "notice_click",
+                params: { notice: "carousel", slide: "{{ cur.key }}" }
+              },
+              { type: "navigate", url: "{{ cur.url }}", target: "_blank" }
+            ]
+          }
+        },
+        {
+          type: "text",
+          content: "\u2715",
+          style: {
+            alignSelf: "center",
+            width: 22,
+            height: 22,
+            textAlign: "center",
+            lineHeight: 22,
+            color: "#b08a3e",
+            fontSize: 13,
+            cursor: "pointer"
+          },
+          action: { type: "close", reason: "user-close" }
+        }
+      ]
+    }
+  ]
+};
+var notice_carousel_default = noticeCarousel;
+
 // src/docs/examples/index.ts
 var HOTSPOT_BG = "rgba(255,68,51,0.16)";
 var imageHotspot = {
@@ -5601,6 +5796,11 @@ var examples = [
     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
+  },
+  {
+    label: "\u246D \u516C\u544A\u6761\u8F6E\u64AD\u6218\u62A5\uFF08\u81EA\u52A8\u8F6E\u64AD + \u5706\u70B9\u6307\u793A\u5668\uFF09",
+    value: "noticeCarousel",
+    dsl: notice_carousel_default
   }
 ];
 var examples_default = examples;
@@ -5779,6 +5979,7 @@ function checklistSection() {
 - [ ] \u6240\u6709 \`style\` \u7684\u5C5E\u6027\u540D\u90FD\u5728\u767D\u540D\u5355\u91CC
 - [ ] \u6CA1\u6709\u4EFB\u4F55 JS \u4EE3\u7801\u3001\`javascript:\` \u94FE\u63A5\u3001\u51FD\u6570\u8C03\u7528
 - [ ] \`derived.list\` \u6307\u5411\u7684\u5B57\u6BB5\u5728 \`data\` \u91CC\u771F\u5B9E\u5B58\u5728\uFF0C\`derived.indexBy\` \u5728 \`state\` \u91CC\u5B58\u5728
+- [ ] \u7528\u4E86 \`derived.autoplay\` \u7684\u8BDD\uFF1A\`interval\` \u662F \u2265${AUTOPLAY_MIN_INTERVAL} \u7684\u6BEB\u79D2\u6570\u5B57\uFF08\u4E0D\u662F\u79D2\uFF09\uFF0C\u6CA1\u6709\u5199 \`enabled\` / \`loop\` \u8FD9\u7C7B\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5
 - [ ] \u7528\u4E86 \`views\` \u7684\u8BDD\uFF1A\`entry\` \u5B58\u5728\u4E8E \`views\`\uFF0C\u9876\u5C42\u6CA1\u6709\u6B8B\u7559 \`stage\`/\`nodes\`\uFF0C\u6240\u6709 \`open\` \u7684 \`view\` \u90FD\u80FD\u5BF9\u4E0A
 - [ ] \`repeat.bind\` \u6307\u5411\u7684\u662F\u6570\u7EC4
 - [ ] \u6BCF\u4E2A\u53EF\u70B9\u51FB\u5143\u7D20\u90FD\u6709 \`action\`\uFF0C\u4E14\u5E26 \`track\` \u57CB\u70B9
@@ -6028,6 +6229,18 @@ function dataSection() {
 \u4E4B\u540E\u4EFB\u610F\u8282\u70B9\u91CC\u7528 \`{{ current.price }}\` \`{{ current.url }}\`\uFF0C
 \u5207\u6362\u65F6\u4EF7\u683C\u3001\u94FE\u63A5\u3001\u57CB\u70B9\u53C2\u6570\u5168\u90E8\u81EA\u52A8\u8054\u52A8\uFF0C\u7248\u5F0F\u53EA\u9700\u8981\u6392\u4E00\u904D\u3002
 
+**\u81EA\u52A8\u8F6E\u64AD**\uFF08\u516C\u544A\u6761\u8F6E\u64AD\u6587\u6848 / \u6218\u62A5\u6EDA\u52A8\u3001\u8F6E\u64AD\u56FE\uFF09\u7528 \`derived.xxx.autoplay\`\uFF0C\u4E0D\u8981\u81EA\u5DF1\u62FC\u5B9A\u65F6\u903B\u8F91\uFF1A
+
+\`\`\`jsonc
+"state":   { "slide": 0 },
+"derived": { "cur": { "list": "slides", "indexBy": "slide",
+  "autoplay": { "interval": 4000, "pauseOnHover": true } } }
+\`\`\`
+
+- \`interval\` \u5FC5\u586B\uFF0C**\u5355\u4F4D\u6BEB\u79D2**\uFF0C\u4E0D\u5C0F\u4E8E ${AUTOPLAY_MIN_INTERVAL}\uFF1B\`pauseOnHover\` \u53EF\u9009\u5E03\u5C14\uFF08\u60AC\u505C\u6682\u505C\uFF09
+- \u53EA\u6709\u8FD9\u4E24\u4E2A\u5B57\u6BB5\uFF0C**\u6CA1\u6709** \`enabled\` / \`loop\`\uFF1A\u914D\u4E86\u5C31\u5F00\u542F\u3001\u59CB\u7EC8\u5FAA\u73AF
+- \u5207\u6362\u6548\u679C\u4E0E\u70B9 tab \u5B8C\u5168\u4E00\u6837\uFF0C\u6587\u6848 / \u56FE\u7247 / \u94FE\u63A5\u90FD\u4ECE \`{{ cur.xxx }}\` \u53D6\uFF1B\u8981\u5706\u70B9\u6307\u793A\u5668\u5C31\u653E\u4E00\u4E2A \`tabs\`\uFF08\`bind\` \u540C\u4E00\u4E2A\u5217\u8868\u3001\`stateKey\` \u540C\u4E00\u4E2A state\uFF09
+
 \u6570\u636E\u8981\u4ECE\u540E\u7AEF\u53D6\u65F6\u5199 \`"tiers": { "$source": "\u6570\u636E\u6E90\u540D", "params": {} }\`\uFF0C
 \u6570\u636E\u6E90\u540D\u5FC5\u987B\u662F\u540E\u7AEF\u5DF2\u6CE8\u518C\u7684\uFF0C**\u4E0D\u80FD\u5199\u63A5\u53E3\u5730\u5740**\u3002\u7528\u6237\u6CA1\u8BF4\u5C31\u7528\u5199\u6B7B\u7684\u6570\u636E\u3002
 

package/dist/docs/index.d.cts

@@ -1,4 +1,4 @@
-import { D as Dsl } from '../types-DDOAHxQt.cjs';
+import { D as Dsl } from '../types-BapBTTio.cjs';
 
 /**
  * 开发文档的数据结构。
@@ -97,7 +97,8 @@ declare const meta: DocMeta;
  * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局，
  * ⑧ 是通栏 banner（宽度由页面决定、只能声明比例），⑨⑩ 是商品编辑抽屉里两个**固定尺寸**坑位，
  * ⑪⑫ 是搬家成功页两个线上弹窗的一比一复刻（动画、hover、相对时长倒计时的完整用法），
- * ⑬ 是额度进度条（用表达式算填充宽度，要画任何比例条都抄这份）。
+ * ⑬ 是额度进度条（用表达式算填充宽度，要画任何比例条都抄这份），
+ * ⑭ 是公告条自动轮播（derived.autoplay + tabs 圆点指示器）。
  * 后端数据源（$source）用法见 ③。
  */
 

package/dist/docs/index.d.ts

@@ -1,4 +1,4 @@
-import { D as Dsl } from '../types-DDOAHxQt.js';
+import { D as Dsl } from '../types-BapBTTio.js';
 
 /**
  * 开发文档的数据结构。
@@ -97,7 +97,8 @@ declare const meta: DocMeta;
  * ①② 是最小骨架，③④ 是运营 demo 真实弹窗的完整复刻，⑤⑥ 是多视图，⑦ 是换肤换布局，
  * ⑧ 是通栏 banner（宽度由页面决定、只能声明比例），⑨⑩ 是商品编辑抽屉里两个**固定尺寸**坑位，
  * ⑪⑫ 是搬家成功页两个线上弹窗的一比一复刻（动画、hover、相对时长倒计时的完整用法），
- * ⑬ 是额度进度条（用表达式算填充宽度，要画任何比例条都抄这份）。
+ * ⑬ 是额度进度条（用表达式算填充宽度，要画任何比例条都抄这份），
+ * ⑭ 是公告条自动轮播（derived.autoplay + tabs 圆点指示器）。
  * 后端数据源（$source）用法见 ③。
  */
 

package/dist/docs/index.js

@@ -1,4 +1,4 @@
-import { TRACK_EVENT_PATTERN, ALLOWED_EASINGS, DEFAULT_USER_FIELDS, USER_FIELD_LABELS, DSL_VERSION, ACTION_TYPES, NODE_TYPES, ALLOWED_STYLE_KEYS, CLOSE_POSITIONS } from '../chunk-DT3ZINDI.js';
+import { TRACK_EVENT_PATTERN, ALLOWED_EASINGS, DEFAULT_USER_FIELDS, USER_FIELD_LABELS, AUTOPLAY_MIN_INTERVAL, DSL_VERSION, ACTION_TYPES, DERIVED_FIELDS, AUTOPLAY_FIELDS, NODE_TYPES, ALLOWED_STYLE_KEYS, CLOSE_POSITIONS } from '../chunk-B6BKOMWL.js';
 
 // src/docs/reconcile.ts
 function pickTokens(rows, columnIndex) {
@@ -701,6 +701,18 @@ var userFieldRows = DEFAULT_USER_FIELDS.map((field) => [
   `\`user.${field}\``,
   USER_FIELD_LABELS[field] || ""
 ]);
+var derivedRows = [
+  ["list", "`data` \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D"],
+  ["indexBy", "`state` \u91CC\u7684\u4E0B\u6807\u5B57\u6BB5\u540D"],
+  ["autoplay", "\u53EF\u9009\u3002\u81EA\u52A8\u8F6E\u64AD\uFF0C\u89C1\u4E0B"]
+];
+var autoplayRows = [
+  [
+    "interval",
+    `\u5FC5\u586B\u3002\u5207\u6362\u95F4\u9694\uFF0C**\u5355\u4F4D\u6BEB\u79D2**\uFF0C\u4E0D\u5C0F\u4E8E ${AUTOPLAY_MIN_INTERVAL}\uFF08\u5982 \`4000\` = 4 \u79D2\uFF09`
+  ],
+  ["pauseOnHover", "\u53EF\u9009\uFF0C\u9ED8\u8BA4 `false`\u3002\u9F20\u6807\u60AC\u505C\u5728\u6574\u4E2A\u7269\u6599\u4E0A\u65F6\u6682\u505C\uFF0C\u79FB\u5F00\u540E\u91CD\u65B0\u8BA1\u65F6"]
+];
 var sections4 = [
   {
     id: "data",
@@ -770,9 +782,42 @@ var sections4 = [
       {
         t: "table",
         head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
-        rows: [
-          ["list", "`data` \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D"],
-          ["indexBy", "`state` \u91CC\u7684\u4E0B\u6807\u5B57\u6BB5\u540D"]
+        rows: derivedRows.concat(
+          reconcileRows({ rows: derivedRows, actual: DERIVED_FIELDS, label: "\u65B0\u589E\u5B57\u6BB5" })
+        )
+      },
+      { t: "h3", text: "derived.autoplay\uFF1A\u81EA\u52A8\u8F6E\u64AD" },
+      {
+        t: "p",
+        text: "\u516C\u544A\u6761\u8F6E\u64AD\u6587\u6848\u3001\u8F6E\u64AD\u56FE\u8FD9\u7C7B\u300C\u9694\u51E0\u79D2\u81EA\u52A8\u6362\u4E0B\u4E00\u6761\u300D\u7684\u9700\u6C42\uFF0C\u5728 derived \u4E0A\u52A0 `autoplay` \u5373\u53EF\u3002\u914D\u4E86\u5C31\u5F00\u542F\u3001\u59CB\u7EC8\u5FAA\u73AF\uFF1A\u6BCF\u9694 `interval` \u6BEB\u79D2\u628A `state[indexBy]` \u52A0 1\uFF0C\u5230\u672B\u5C3E\u56DE\u5230 0\u3002\u5B83\u6539\u72B6\u6001\u8D70\u7684\u5C31\u662F\u70B9 tab \u90A3\u4E00\u6761\u8DEF\uFF0C\u6240\u4EE5\u6587\u6848\u3001\u56FE\u7247\u3001tabs \u5706\u70B9\u6307\u793A\u5668\u3001\u8DF3\u8F6C\u94FE\u63A5\u4F1A\u4E00\u8D77\u5207\uFF0C\u6548\u679C\u548C\u7528\u6237\u624B\u52A8\u70B9\u5B8C\u5168\u4E00\u6837\u2014\u2014\u4E0D\u4F1A\u51ED\u7A7A\u591A\u51FA\u5207\u6362\u52A8\u753B\uFF0C\u60F3\u8981\u8FC7\u6E21\u6548\u679C\u81EA\u5DF1\u5728 `style` \u91CC\u914D `transition`\u3002"
+      },
+      {
+        t: "code",
+        code: `"data":    { "slides": [ { "text": "\u2026", "url": "\u2026" }, { \u2026 }, { \u2026 } ] },
+"state":   { "slide": 0 },
+"derived": { "cur": { "list": "slides", "indexBy": "slide",
+  "autoplay": { "interval": 4000, "pauseOnHover": true } } }
+
+// \u6587\u6848 {{ cur.text }}\u3001\u94FE\u63A5 {{ cur.url }} \u81EA\u52A8\u8DDF\u7740\u5F53\u524D\u9879\u8D70\uFF1B
+// \u5706\u70B9\u6307\u793A\u5668\u5C31\u662F\u4E00\u4E2A tabs\uFF1A{ "type": "tabs", "bind": "slides", "stateKey": "slide" }`
+      },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
+        rows: autoplayRows.concat(
+          reconcileRows({
+            rows: autoplayRows,
+            actual: AUTOPLAY_FIELDS,
+            label: "\u65B0\u589E\u5B57\u6BB5"
+          })
+        )
+      },
+      {
+        t: "list",
+        items: [
+          "\u7528\u6237\u70B9\u4E86 tab\uFF08\u6216\u4EFB\u4F55 `setState` \u6539\u4E86\u540C\u4E00\u4E2A key\uFF09\u4F1A**\u91CD\u65B0\u8BA1\u65F6**\uFF0C\u4E0D\u4F1A\u521A\u70B9\u5B8C\u5C31\u88AB\u5207\u8D70",
+          "\u5217\u8868\u53EA\u6709 0~1 \u6761\u3001\u6216\u6570\u636E\u6E90\u8FD8\u6CA1\u56DE\u6765\u65F6\u4E0D\u64AD\uFF1B\u6570\u636E\u56DE\u6765\u540E\u81EA\u52A8\u5F00\u59CB",
+          "\u6CA1\u6709 `enabled` / `loop` \u5F00\u5173\uFF1A\u4E0D\u60F3\u8F6E\u64AD\u5C31\u522B\u5199 `autoplay`\uFF0C\u5199\u4E86\u5C31\u4E00\u76F4\u5FAA\u73AF"
         ]
       }
     ]
@@ -1700,6 +1745,15 @@ var sections_default = sections10;
 
 // src/docs/meta.ts
 var changelog = [
+  {
+    date: "2026-09-22",
+    items: [
+      '\u65B0\u589E derived.autoplay \u81EA\u52A8\u8F6E\u64AD\uFF08\u7B2C 8 \u8282\uFF09\uFF1A`{ "interval": 4000, "pauseOnHover": true }` \u6302\u5728 derived \u4E0A\u5373\u53EF\u8BA9\u516C\u544A\u6761\u6587\u6848 / \u8F6E\u64AD\u56FE\u6BCF\u9694\u51E0\u79D2\u81EA\u52A8\u6362\u4E0B\u4E00\u6761\u3001\u5230\u672B\u5C3E\u56DE\u5230\u7B2C\u4E00\u6761\u3002\u5207\u6362\u8D70\u7684\u662F\u548C\u70B9 tab \u540C\u4E00\u6761\u8DEF\uFF0C\u6587\u6848\u3001\u56FE\u7247\u3001\u5706\u70B9\u6307\u793A\u5668\u3001\u8DF3\u8F6C\u94FE\u63A5\u4E00\u8D77\u5207\uFF1B\u7528\u6237\u624B\u52A8\u70B9\u8FC7\u4F1A\u91CD\u65B0\u8BA1\u65F6\uFF0C\u5217\u8868\u4E0D\u8DB3 2 \u6761\u6216\u6570\u636E\u6CA1\u56DE\u6765\u65F6\u4E0D\u64AD',
+      "autoplay \u4FDD\u5B58\u65F6\u4F1A\u6821\u9A8C\uFF1Ainterval \u5FC5\u987B\u662F\u4E0D\u5C0F\u4E8E 300 \u7684\u6BEB\u79D2\u6570\uFF08\u5199\u6210 4 \u8868\u793A 4 \u6BEB\u79D2\uFF0C\u4F1A\u88AB\u62E6\u4E0B\uFF09\uFF0CpauseOnHover \u5FC5\u987B\u662F\u5E03\u5C14\uFF1B\u6CA1\u6709 enabled / loop \u5B57\u6BB5\uFF0C\u5199\u4E86\u53EA\u544A\u8B66\u5E76\u88AB\u5FFD\u7565",
+      "\u65B0\u589E\u793A\u4F8B \u246D \u516C\u544A\u6761\u8F6E\u64AD\u6218\u62A5\uFF1A3 \u6761\u6587\u6848 + tabs \u5706\u70B9\u6307\u793A\u5668 + \u8DF3\u8F6C\u94FE\u63A5\u8DDF\u968F\u5F53\u524D\u9879\uFF0C\u8981\u505A\u8F6E\u64AD\u6284\u8FD9\u4EFD",
+      "\u6846\u67B6\u58F3\u65B0\u589E\u4E00\u6761\u4E49\u52A1\uFF1A\u6E32\u67D3\u6811\u5E26 onRootEnter / onRootLeave \u65F6\u5728\u6839\u5BB9\u5668\u4E0A\u7ED1 mouseenter / mouseleave\uFF08Vue 2 \u58F3\u5DF2\u8DDF\u4E0A\uFF09"
+    ]
+  },
   {
     date: "2026-09-01",
     items: [
@@ -5175,6 +5229,142 @@ var quotaLow = {
 };
 var quota_low_default = quotaLow;
 
+// src/docs/examples/notice-carousel.ts
+var slides = [
+  {
+    key: "move",
+    text: "\u{1F389} \u4ECA\u65E5\u5DF2\u6709 12,806 \u5BB6\u5E97\u94FA\u7528\u9EA6\u7206\u4E86\u5B8C\u6210\u5546\u54C1\u642C\u5BB6",
+    url: "https://maibaole.example.com/move",
+    // tabs 的标签字段，圆点不显示文字，留空串
+    dot: ""
+  },
+  {
+    key: "ai",
+    text: "\u{1F525} AI \u667A\u80FD\u4F18\u5316\u672C\u5468\u7D2F\u8BA1\u6539\u5199\u6807\u9898 38 \u4E07\u6761\uFF0C\u70B9\u51FB\u7387\u5E73\u5747\u63D0\u5347 17%",
+    url: "https://maibaole.example.com/ai-optimize",
+    dot: ""
+  },
+  {
+    key: "renew",
+    text: "\u{1F4B0} \u4E13\u4E1A\u7248\u9650\u65F6 8 \u6298\uFF0C\u7EED\u8D39\u7ACB\u7701 180 \u5143",
+    url: "https://maibaole.example.com/renew",
+    dot: ""
+  }
+];
+var noticeCarousel = {
+  version: 1,
+  type: "notice",
+  meta: { name: "\u516C\u544A\u6761\u8F6E\u64AD\u6218\u62A5\uFF08\u81EA\u52A8\u8F6E\u64AD\uFF09" },
+  data: { slides },
+  state: { slide: 0 },
+  derived: {
+    cur: {
+      list: "slides",
+      indexBy: "slide",
+      // 4 秒一条，悬停暂停；单位是毫秒
+      autoplay: { interval: 4e3, pauseOnHover: true }
+    }
+  },
+  stage: {
+    width: "100%",
+    height: "auto",
+    layout: "flow",
+    // 通栏类型不写 maxWidth，宽度交给宿主坑位
+    style: { radius: 6, background: "#fff8e6" },
+    onShow: { type: "track", event: "notice_show", params: { notice: "carousel" } },
+    onClose: {
+      type: "track",
+      event: "notice_dismiss",
+      params: { notice: "carousel", reason: "{{ closeReason }}" }
+    }
+  },
+  nodes: [
+    {
+      type: "flex",
+      style: { align: "center", gap: 10, padding: "10px 14px" },
+      children: [
+        {
+          // 文案跟着当前项走；定高单行，换条时公告条高度不跳
+          type: "text",
+          content: "{{ cur.text }}",
+          style: {
+            flex: "1",
+            fontSize: 14,
+            color: "#8a6212",
+            lineHeight: 22,
+            height: 22,
+            overflow: "hidden",
+            whiteSpace: "nowrap"
+          }
+        },
+        {
+          // 圆点指示器：当前项拉长成胶囊，宽度变化用 transition 过渡
+          type: "tabs",
+          bind: "slides",
+          stateKey: "slide",
+          labelField: "dot",
+          style: { direction: "row", align: "center", gap: 6 },
+          itemStyle: {
+            width: 6,
+            height: 6,
+            radius: 3,
+            background: "rgba(176,138,62,0.35)",
+            cursor: "pointer",
+            transition: "width 0.3s ease"
+          },
+          activeItemStyle: { width: 16, background: "#f5a623" },
+          action: {
+            type: "track",
+            event: "notice_dot_click",
+            params: { notice: "carousel" }
+          }
+        },
+        {
+          // 链接跟着当前项走：看到哪条、点的就是哪条
+          type: "button",
+          text: "\u53BB\u770B\u770B",
+          style: {
+            width: 64,
+            height: 26,
+            radius: 13,
+            background: "#f5a623",
+            color: "#fff",
+            fontSize: 12,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "notice_click",
+                params: { notice: "carousel", slide: "{{ cur.key }}" }
+              },
+              { type: "navigate", url: "{{ cur.url }}", target: "_blank" }
+            ]
+          }
+        },
+        {
+          type: "text",
+          content: "\u2715",
+          style: {
+            alignSelf: "center",
+            width: 22,
+            height: 22,
+            textAlign: "center",
+            lineHeight: 22,
+            color: "#b08a3e",
+            fontSize: 13,
+            cursor: "pointer"
+          },
+          action: { type: "close", reason: "user-close" }
+        }
+      ]
+    }
+  ]
+};
+var notice_carousel_default = noticeCarousel;
+
 // src/docs/examples/index.ts
 var HOTSPOT_BG = "rgba(255,68,51,0.16)";
 var imageHotspot = {
@@ -5440,6 +5630,11 @@ var examples = [
     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
+  },
+  {
+    label: "\u246D \u516C\u544A\u6761\u8F6E\u64AD\u6218\u62A5\uFF08\u81EA\u52A8\u8F6E\u64AD + \u5706\u70B9\u6307\u793A\u5668\uFF09",
+    value: "noticeCarousel",
+    dsl: notice_carousel_default
   }
 ];
 var examples_default = examples;
@@ -5618,6 +5813,7 @@ function checklistSection() {
 - [ ] \u6240\u6709 \`style\` \u7684\u5C5E\u6027\u540D\u90FD\u5728\u767D\u540D\u5355\u91CC
 - [ ] \u6CA1\u6709\u4EFB\u4F55 JS \u4EE3\u7801\u3001\`javascript:\` \u94FE\u63A5\u3001\u51FD\u6570\u8C03\u7528
 - [ ] \`derived.list\` \u6307\u5411\u7684\u5B57\u6BB5\u5728 \`data\` \u91CC\u771F\u5B9E\u5B58\u5728\uFF0C\`derived.indexBy\` \u5728 \`state\` \u91CC\u5B58\u5728
+- [ ] \u7528\u4E86 \`derived.autoplay\` \u7684\u8BDD\uFF1A\`interval\` \u662F \u2265${AUTOPLAY_MIN_INTERVAL} \u7684\u6BEB\u79D2\u6570\u5B57\uFF08\u4E0D\u662F\u79D2\uFF09\uFF0C\u6CA1\u6709\u5199 \`enabled\` / \`loop\` \u8FD9\u7C7B\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5
 - [ ] \u7528\u4E86 \`views\` \u7684\u8BDD\uFF1A\`entry\` \u5B58\u5728\u4E8E \`views\`\uFF0C\u9876\u5C42\u6CA1\u6709\u6B8B\u7559 \`stage\`/\`nodes\`\uFF0C\u6240\u6709 \`open\` \u7684 \`view\` \u90FD\u80FD\u5BF9\u4E0A
 - [ ] \`repeat.bind\` \u6307\u5411\u7684\u662F\u6570\u7EC4
 - [ ] \u6BCF\u4E2A\u53EF\u70B9\u51FB\u5143\u7D20\u90FD\u6709 \`action\`\uFF0C\u4E14\u5E26 \`track\` \u57CB\u70B9
@@ -5867,6 +6063,18 @@ function dataSection() {
 \u4E4B\u540E\u4EFB\u610F\u8282\u70B9\u91CC\u7528 \`{{ current.price }}\` \`{{ current.url }}\`\uFF0C
 \u5207\u6362\u65F6\u4EF7\u683C\u3001\u94FE\u63A5\u3001\u57CB\u70B9\u53C2\u6570\u5168\u90E8\u81EA\u52A8\u8054\u52A8\uFF0C\u7248\u5F0F\u53EA\u9700\u8981\u6392\u4E00\u904D\u3002
 
+**\u81EA\u52A8\u8F6E\u64AD**\uFF08\u516C\u544A\u6761\u8F6E\u64AD\u6587\u6848 / \u6218\u62A5\u6EDA\u52A8\u3001\u8F6E\u64AD\u56FE\uFF09\u7528 \`derived.xxx.autoplay\`\uFF0C\u4E0D\u8981\u81EA\u5DF1\u62FC\u5B9A\u65F6\u903B\u8F91\uFF1A
+
+\`\`\`jsonc
+"state":   { "slide": 0 },
+"derived": { "cur": { "list": "slides", "indexBy": "slide",
+  "autoplay": { "interval": 4000, "pauseOnHover": true } } }
+\`\`\`
+
+- \`interval\` \u5FC5\u586B\uFF0C**\u5355\u4F4D\u6BEB\u79D2**\uFF0C\u4E0D\u5C0F\u4E8E ${AUTOPLAY_MIN_INTERVAL}\uFF1B\`pauseOnHover\` \u53EF\u9009\u5E03\u5C14\uFF08\u60AC\u505C\u6682\u505C\uFF09
+- \u53EA\u6709\u8FD9\u4E24\u4E2A\u5B57\u6BB5\uFF0C**\u6CA1\u6709** \`enabled\` / \`loop\`\uFF1A\u914D\u4E86\u5C31\u5F00\u542F\u3001\u59CB\u7EC8\u5FAA\u73AF
+- \u5207\u6362\u6548\u679C\u4E0E\u70B9 tab \u5B8C\u5168\u4E00\u6837\uFF0C\u6587\u6848 / \u56FE\u7247 / \u94FE\u63A5\u90FD\u4ECE \`{{ cur.xxx }}\` \u53D6\uFF1B\u8981\u5706\u70B9\u6307\u793A\u5668\u5C31\u653E\u4E00\u4E2A \`tabs\`\uFF08\`bind\` \u540C\u4E00\u4E2A\u5217\u8868\u3001\`stateKey\` \u540C\u4E00\u4E2A state\uFF09
+
 \u6570\u636E\u8981\u4ECE\u540E\u7AEF\u53D6\u65F6\u5199 \`"tiers": { "$source": "\u6570\u636E\u6E90\u540D", "params": {} }\`\uFF0C
 \u6570\u636E\u6E90\u540D\u5FC5\u987B\u662F\u540E\u7AEF\u5DF2\u6CE8\u518C\u7684\uFF0C**\u4E0D\u80FD\u5199\u63A5\u53E3\u5730\u5740**\u3002\u7528\u6237\u6CA1\u8BF4\u5C31\u7528\u5199\u6B7B\u7684\u6570\u636E\u3002
 

package/dist/index.cjs

@@ -500,6 +500,109 @@ function createTicker(options) {
   return { sync, stop };
 }
 
+// src/autoplay.ts
+var DERIVED_FIELDS = ["list", "indexBy", "autoplay"];
+var AUTOPLAY_FIELDS = ["interval", "pauseOnHover"];
+var AUTOPLAY_MIN_INTERVAL = 300;
+function collectEntries(derived) {
+  const entries = [];
+  Object.keys(derived || {}).forEach((name) => {
+    const config = (derived || {})[name];
+    const autoplay = config && config.autoplay;
+    if (!autoplay || typeof autoplay !== "object") return;
+    const interval = Number(autoplay.interval);
+    if (!isFinite(interval) || interval < AUTOPLAY_MIN_INTERVAL) return;
+    entries.push({
+      list: config.list,
+      indexBy: config.indexBy,
+      interval,
+      pauseOnHover: autoplay.pauseOnHover === true,
+      timer: null
+    });
+  });
+  return entries;
+}
+function createAutoplay(options) {
+  const entries = collectEntries(options.derived);
+  let started = false;
+  let hovering = false;
+  let stopped = false;
+  function clear(entry) {
+    if (entry.timer) {
+      clearTimeout(entry.timer);
+      entry.timer = null;
+    }
+  }
+  function advance(entry) {
+    entry.timer = null;
+    const length = options.getLength(entry.list);
+    if (length <= 1) return;
+    const index = options.getIndex(entry.indexBy);
+    options.setState(entry.indexBy, (index + 1) % length);
+  }
+  function schedule(entry) {
+    clear(entry);
+    if (stopped || !started) return;
+    if (hovering && entry.pauseOnHover) return;
+    if (options.getLength(entry.list) <= 1) return;
+    entry.timer = setTimeout(() => advance(entry), entry.interval);
+  }
+  return {
+    pausable: entries.some((entry) => entry.pauseOnHover),
+    start() {
+      started = true;
+      entries.forEach(schedule);
+    },
+    reset(key) {
+      entries.forEach((entry) => {
+        if (entry.indexBy === key) schedule(entry);
+      });
+    },
+    pause() {
+      hovering = true;
+      entries.forEach((entry) => {
+        if (entry.pauseOnHover) clear(entry);
+      });
+    },
+    resume() {
+      hovering = false;
+      entries.forEach((entry) => {
+        if (entry.pauseOnHover) schedule(entry);
+      });
+    },
+    stop() {
+      stopped = true;
+      entries.forEach(clear);
+    }
+  };
+}
+function validateAutoplay(autoplay, path, add, warn) {
+  if (autoplay === void 0) return;
+  if (!autoplay || typeof autoplay !== "object" || Array.isArray(autoplay)) {
+    add(path, 'autoplay \u5FC5\u987B\u662F\u5BF9\u8C61\uFF0C\u5F62\u5982 { "interval": 4000, "pauseOnHover": true }');
+    return;
+  }
+  const config = autoplay;
+  const interval = config.interval;
+  if (typeof interval !== "number" || !isFinite(interval) || interval < AUTOPLAY_MIN_INTERVAL) {
+    add(
+      `${path}.interval`,
+      `interval \u5FC5\u987B\u662F\u4E0D\u5C0F\u4E8E ${AUTOPLAY_MIN_INTERVAL} \u7684\u6570\u5B57\uFF0C\u5355\u4F4D\u6BEB\u79D2\uFF08\u5982 4000 \u8868\u793A 4 \u79D2\uFF09\uFF0C\u5F53\u524D\u4E3A ${JSON.stringify(interval)}`
+    );
+  }
+  if (config.pauseOnHover !== void 0 && typeof config.pauseOnHover !== "boolean") {
+    add(`${path}.pauseOnHover`, "pauseOnHover \u5FC5\u987B\u662F true \u6216 false");
+  }
+  Object.keys(config).forEach((key) => {
+    if (AUTOPLAY_FIELDS.indexOf(key) === -1) {
+      warn(
+        `${path}.${key}`,
+        `autoplay \u4E0D\u8BA4\u8BC6 "${key}"\uFF0C\u4F1A\u88AB\u5FFD\u7565\u3002\u53EF\u7528\uFF1A${AUTOPLAY_FIELDS.join(" / ")}\uFF08\u914D\u4E86 autoplay \u5C31\u5F00\u542F\u4E14\u59CB\u7EC8\u5FAA\u73AF\uFF0C\u4E0D\u9700\u8981 enabled / loop\uFF09`
+      );
+    }
+  });
+}
+
 // src/views.ts
 var SINGLE_VIEW_NAME = "main";
 function normalizeViews(dsl) {
@@ -1381,7 +1484,19 @@ function createRuntime(dsl, options = {}) {
     state = Object.assign({}, state, { [key]: value });
     emit("state-change", Object.assign({}, state));
     notify();
+    autoplay.reset(key);
   }
+  const autoplay = createAutoplay({
+    derived: dsl.derived,
+    getLength: (name) => {
+      const list = resolvedData[name];
+      return Array.isArray(list) ? list.length : 0;
+    },
+    getIndex: (key) => Number(state[key]) || 0,
+    setState: (key, value) => {
+      if (!destroyed) setState(key, value);
+    }
+  });
   function openView(name, mode) {
     if (!normalized.views[name]) {
       emit("error", { type: "unknown-view", name });
@@ -1482,6 +1597,7 @@ function createRuntime(dsl, options = {}) {
       notify();
       fireLifecycle(normalized.entry, "onShow");
       emit("ready", { keys: Object.keys(resolved) });
+      autoplay.start();
     }).catch((error) => {
       if (destroyed) return;
       loading = false;
@@ -1510,6 +1626,10 @@ function createRuntime(dsl, options = {}) {
       hover
     });
     ticker.sync(tree.countdownEndTimes, tree.countdownPrecision);
+    if (autoplay.pausable) {
+      tree.onRootEnter = autoplay.pause;
+      tree.onRootLeave = autoplay.resume;
+    }
     return tree;
   }
   return {
@@ -1529,6 +1649,7 @@ function createRuntime(dsl, options = {}) {
     destroy() {
       destroyed = true;
       ticker.stop();
+      autoplay.stop();
       listeners.clear();
     }
   };
@@ -1832,7 +1953,7 @@ function validate(dsl, options) {
   }
   const dataKeys = validateData(doc.data, add);
   const stateKeys = validateState(doc.state, add);
-  validateDerived(doc.derived, dataKeys, stateKeys, add);
+  validateDerived(doc.derived, dataKeys, stateKeys, add, warn);
   const keyframeNames = validateKeyframes(doc.keyframes, add, warn);
   const isMulti = doc.views !== void 0;
   if (isMulti) validateMultiView(doc, add);
@@ -2081,7 +2202,7 @@ function validateState(state, add) {
   }
   return Object.keys(state);
 }
-function validateDerived(derived, dataKeys, stateKeys, add) {
+function validateDerived(derived, dataKeys, stateKeys, add, warn) {
   if (derived === void 0) return;
   if (typeof derived !== "object" || derived === null || Array.isArray(derived)) {
     add("derived", "derived \u5FC5\u987B\u662F\u5BF9\u8C61");
@@ -2099,6 +2220,7 @@ function validateDerived(derived, dataKeys, stateKeys, add) {
     } else if (stateKeys.indexOf(item.indexBy) === -1) {
       add(`derived.${key}.indexBy`, `state \u4E2D\u4E0D\u5B58\u5728 "${item.indexBy}"`);
     }
+    validateAutoplay(item.autoplay, `derived.${key}.autoplay`, add, warn);
   });
 }
 function validateNodeStyle(style, path, ctx) {
@@ -2334,10 +2456,13 @@ function isRegisteredHostHandler(name) {
 exports.ACTION_TYPES = ACTION_TYPES;
 exports.ALLOWED_EASINGS = ALLOWED_EASINGS;
 exports.ALLOWED_STYLE_KEYS = ALLOWED_STYLE_KEYS;
+exports.AUTOPLAY_FIELDS = AUTOPLAY_FIELDS;
+exports.AUTOPLAY_MIN_INTERVAL = AUTOPLAY_MIN_INTERVAL;
 exports.BANNER_MIN_ASPECT_RATIO = BANNER_MIN_ASPECT_RATIO;
 exports.CLOSE_POSITIONS = CLOSE_POSITIONS;
 exports.CSS_NAME_PATTERN = CSS_NAME_PATTERN;
 exports.DEFAULT_USER_FIELDS = DEFAULT_USER_FIELDS;
+exports.DERIVED_FIELDS = DERIVED_FIELDS;
 exports.DSL_VERSION = DSL_VERSION;
 exports.HOST_HANDLER_LABELS = HOST_HANDLER_LABELS;
 exports.HOST_HANDLER_NAMES = HOST_HANDLER_NAMES;
@@ -2369,4 +2494,5 @@ exports.sanitizeCssValue = sanitizeCssValue;
 exports.toCssStyle = toCssStyle;
 exports.toLength = toLength;
 exports.validate = validate;
+exports.validateAutoplay = validateAutoplay;
 exports.validateUserFields = validateUserFields;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-DDOAHxQt.cjs';
-export { s as DslAction, j as DslActionBase, h as DslAnimate, q as DslCallAction, l as DslCloseAction, m as DslCloseAllAction, v as DslCloseButton, u as DslClosePosition, y as DslDerived, E as DslHandler, G as DslInteractionEvent, F as DslInteractionTrigger, i as DslKeyframe, f as DslLength, k as DslNavigateAction, t as DslNode, e as DslNodeType, n as DslOpenAction, g as DslRect, r as DslSequenceAction, o as DslSetStateAction, B as DslSource, x as DslSourceRef, w as DslStage, p as DslTrackAction, d as DslViewType, z as RenderElement, A as RenderLayer, J as RuntimeEmit, I as RuntimeEventName, H as RuntimeEvents } from './types-DDOAHxQt.cjs';
+import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-BapBTTio.cjs';
+export { s as DslAction, j as DslActionBase, h as DslAnimate, y as DslAutoplay, q as DslCallAction, l as DslCloseAction, m as DslCloseAllAction, v as DslCloseButton, u as DslClosePosition, z as DslDerived, F as DslHandler, H as DslInteractionEvent, G as DslInteractionTrigger, i as DslKeyframe, f as DslLength, k as DslNavigateAction, t as DslNode, e as DslNodeType, n as DslOpenAction, g as DslRect, r as DslSequenceAction, o as DslSetStateAction, E as DslSource, x as DslSourceRef, w as DslStage, p as DslTrackAction, d as DslViewType, A as RenderElement, B as RenderLayer, K as RuntimeEmit, J as RuntimeEventName, I as RuntimeEvents } from './types-BapBTTio.cjs';
 
 /**
  * 运行时。
@@ -28,7 +28,7 @@ interface DslRuntime {
     /** 供调试台等外部读取，正常渲染不需要 */
     getState: () => Record<string, unknown>;
     getViewStack: () => string[];
-    /** 卸载时必须调用，否则倒计时定时器不会停 */
+    /** 卸载时必须调用，否则倒计时与自动轮播的定时器不会停 */
     destroy: () => void;
 }
 declare function createRuntime(dsl: Dsl, options?: RuntimeOptions): DslRuntime;
@@ -372,4 +372,41 @@ declare function computeParts(endTime: number, now?: number): CountdownParts;
 /** 不给 children 时退化成一行文本，占位符 {d} {h} {hAll} {m} {s} {cs} */
 declare function formatParts(parts: CountdownParts, format?: string): string;
 
-export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields };
+/**
+ * derived 自动轮播（`derived.xxx.autoplay`）。
+ *
+ * 只管「什么时候该往下切一格」，**不管切了之后长什么样**：
+ * 到点后调的是运行时的同一个 `setState`，和用户点 tab 完全同一条路径——
+ * 文案 / 图片 / tabs 指示器 / 跳转链接 / 运营自己配的 transition 全部自然联动，
+ * 这里不引入任何额外的切换动画，也不另写一套状态改动。
+ *
+ * 时机规则：
+ *   - 数据就绪（`start`）之后才开始计时；列表长度 ≤1 不播
+ *   - 用户手动改了同一个 state key（`reset`）→ 重新计时，避免刚点完就被切走
+ *   - 悬停（`pause`）清掉定时器，离开（`resume`）重新计一整个 interval
+ *   - `stop` 之后永久失效，任何入口都不会再起定时器
+ *
+ * 不依赖 DOM，定时器用 setTimeout，Node 里也能跑。
+ */
+
+/** `derived.xxx` 允许出现的字段，校验与文档对账共用这一份 */
+declare const DERIVED_FIELDS: string[];
+/** `derived.xxx.autoplay` 允许出现的字段，校验与文档对账共用这一份 */
+declare const AUTOPLAY_FIELDS: string[];
+/** 轮播间隔下限（毫秒）。主要防单位写错（把 4 秒写成 4），300 仍允许快速闪动类效果 */
+declare const AUTOPLAY_MIN_INTERVAL = 300;
+type Add = (path: string, message: string) => void;
+/**
+ * 校验一处 `derived.xxx.autoplay`。
+ *
+ * 和运行时共用同一套常量（字段表、间隔下限），规则不会两边漂移。
+ * interval 写错的表现是「不轮播」，运营只会以为没生效、反复重配，所以要在保存时拦下。
+ *
+ * @param autoplay 待校验的值
+ * @param path 报错路径，如 `derived.cur.autoplay`
+ * @param add 报 error
+ * @param warn 报 warning（未知字段只告警：运行时会忽略，但多半是写错了，如 loop / enabled）
+ */
+declare function validateAutoplay(autoplay: unknown, path: string, add: Add, warn: Add): void;
+
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, AUTOPLAY_FIELDS, AUTOPLAY_MIN_INTERVAL, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DERIVED_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, sanitizeCssValue, toCssStyle, toLength, validate, validateAutoplay, validateUserFields };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-DDOAHxQt.js';
-export { s as DslAction, j as DslActionBase, h as DslAnimate, q as DslCallAction, l as DslCloseAction, m as DslCloseAllAction, v as DslCloseButton, u as DslClosePosition, y as DslDerived, E as DslHandler, G as DslInteractionEvent, F as DslInteractionTrigger, i as DslKeyframe, f as DslLength, k as DslNavigateAction, t as DslNode, e as DslNodeType, n as DslOpenAction, g as DslRect, r as DslSequenceAction, o as DslSetStateAction, B as DslSource, x as DslSourceRef, w as DslStage, p as DslTrackAction, d as DslViewType, z as RenderElement, A as RenderLayer, J as RuntimeEmit, I as RuntimeEventName, H as RuntimeEvents } from './types-DDOAHxQt.js';
+import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-BapBTTio.js';
+export { s as DslAction, j as DslActionBase, h as DslAnimate, y as DslAutoplay, q as DslCallAction, l as DslCloseAction, m as DslCloseAllAction, v as DslCloseButton, u as DslClosePosition, z as DslDerived, F as DslHandler, H as DslInteractionEvent, G as DslInteractionTrigger, i as DslKeyframe, f as DslLength, k as DslNavigateAction, t as DslNode, e as DslNodeType, n as DslOpenAction, g as DslRect, r as DslSequenceAction, o as DslSetStateAction, E as DslSource, x as DslSourceRef, w as DslStage, p as DslTrackAction, d as DslViewType, A as RenderElement, B as RenderLayer, K as RuntimeEmit, J as RuntimeEventName, I as RuntimeEvents } from './types-BapBTTio.js';
 
 /**
  * 运行时。
@@ -28,7 +28,7 @@ interface DslRuntime {
     /** 供调试台等外部读取，正常渲染不需要 */
     getState: () => Record<string, unknown>;
     getViewStack: () => string[];
-    /** 卸载时必须调用，否则倒计时定时器不会停 */
+    /** 卸载时必须调用，否则倒计时与自动轮播的定时器不会停 */
     destroy: () => void;
 }
 declare function createRuntime(dsl: Dsl, options?: RuntimeOptions): DslRuntime;
@@ -372,4 +372,41 @@ declare function computeParts(endTime: number, now?: number): CountdownParts;
 /** 不给 children 时退化成一行文本，占位符 {d} {h} {hAll} {m} {s} {cs} */
 declare function formatParts(parts: CountdownParts, format?: string): string;
 
-export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields };
+/**
+ * derived 自动轮播（`derived.xxx.autoplay`）。
+ *
+ * 只管「什么时候该往下切一格」，**不管切了之后长什么样**：
+ * 到点后调的是运行时的同一个 `setState`，和用户点 tab 完全同一条路径——
+ * 文案 / 图片 / tabs 指示器 / 跳转链接 / 运营自己配的 transition 全部自然联动，
+ * 这里不引入任何额外的切换动画，也不另写一套状态改动。
+ *
+ * 时机规则：
+ *   - 数据就绪（`start`）之后才开始计时；列表长度 ≤1 不播
+ *   - 用户手动改了同一个 state key（`reset`）→ 重新计时，避免刚点完就被切走
+ *   - 悬停（`pause`）清掉定时器，离开（`resume`）重新计一整个 interval
+ *   - `stop` 之后永久失效，任何入口都不会再起定时器
+ *
+ * 不依赖 DOM，定时器用 setTimeout，Node 里也能跑。
+ */
+
+/** `derived.xxx` 允许出现的字段，校验与文档对账共用这一份 */
+declare const DERIVED_FIELDS: string[];
+/** `derived.xxx.autoplay` 允许出现的字段，校验与文档对账共用这一份 */
+declare const AUTOPLAY_FIELDS: string[];
+/** 轮播间隔下限（毫秒）。主要防单位写错（把 4 秒写成 4），300 仍允许快速闪动类效果 */
+declare const AUTOPLAY_MIN_INTERVAL = 300;
+type Add = (path: string, message: string) => void;
+/**
+ * 校验一处 `derived.xxx.autoplay`。
+ *
+ * 和运行时共用同一套常量（字段表、间隔下限），规则不会两边漂移。
+ * interval 写错的表现是「不轮播」，运营只会以为没生效、反复重配，所以要在保存时拦下。
+ *
+ * @param autoplay 待校验的值
+ * @param path 报错路径，如 `derived.cur.autoplay`
+ * @param add 报 error
+ * @param warn 报 warning（未知字段只告警：运行时会忽略，但多半是写错了，如 loop / enabled）
+ */
+declare function validateAutoplay(autoplay: unknown, path: string, add: Add, warn: Add): void;
+
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, AUTOPLAY_FIELDS, AUTOPLAY_MIN_INTERVAL, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DERIVED_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, sanitizeCssValue, toCssStyle, toLength, validate, validateAutoplay, validateUserFields };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { normalizeViews, nextScopeUid, createTicker, createCssBuilder, declarations, toCssStyle, interpolateDeep, evaluate, resolveNodeStyle, interpolate, toLength, computeParts, formatParts, parseEndTime } from './chunk-DT3ZINDI.js';
-export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, DEFAULT_USER_FIELDS, DSL_VERSION, NODE_TYPES, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, check, computeParts, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields } from './chunk-DT3ZINDI.js';
+import { normalizeViews, nextScopeUid, createTicker, createAutoplay, createCssBuilder, declarations, toCssStyle, interpolateDeep, evaluate, resolveNodeStyle, interpolate, toLength, computeParts, formatParts, parseEndTime } from './chunk-B6BKOMWL.js';
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, AUTOPLAY_FIELDS, AUTOPLAY_MIN_INTERVAL, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, DEFAULT_USER_FIELDS, DERIVED_FIELDS, DSL_VERSION, NODE_TYPES, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, check, computeParts, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, sanitizeCssValue, toCssStyle, toLength, validate, validateAutoplay, validateUserFields } from './chunk-B6BKOMWL.js';
 
 // src/url.ts
 var SAFE_PROTOCOLS = ["http:", "https:", "mailto:", "tel:"];
@@ -716,7 +716,19 @@ function createRuntime(dsl, options = {}) {
     state = Object.assign({}, state, { [key]: value });
     emit("state-change", Object.assign({}, state));
     notify();
+    autoplay.reset(key);
   }
+  const autoplay = createAutoplay({
+    derived: dsl.derived,
+    getLength: (name) => {
+      const list = resolvedData[name];
+      return Array.isArray(list) ? list.length : 0;
+    },
+    getIndex: (key) => Number(state[key]) || 0,
+    setState: (key, value) => {
+      if (!destroyed) setState(key, value);
+    }
+  });
   function openView(name, mode) {
     if (!normalized.views[name]) {
       emit("error", { type: "unknown-view", name });
@@ -817,6 +829,7 @@ function createRuntime(dsl, options = {}) {
       notify();
       fireLifecycle(normalized.entry, "onShow");
       emit("ready", { keys: Object.keys(resolved) });
+      autoplay.start();
     }).catch((error) => {
       if (destroyed) return;
       loading = false;
@@ -845,6 +858,10 @@ function createRuntime(dsl, options = {}) {
       hover
     });
     ticker.sync(tree.countdownEndTimes, tree.countdownPrecision);
+    if (autoplay.pausable) {
+      tree.onRootEnter = autoplay.pause;
+      tree.onRootLeave = autoplay.resume;
+    }
     return tree;
   }
   return {
@@ -864,6 +881,7 @@ function createRuntime(dsl, options = {}) {
     destroy() {
       destroyed = true;
       ticker.stop();
+      autoplay.stop();
       listeners.clear();
     }
   };

package/dist/report/index.d.cts

@@ -1,4 +1,4 @@
-import { I as RuntimeEventName, G as DslInteractionEvent } from '../types-DDOAHxQt.cjs';
+import { J as RuntimeEventName, H as DslInteractionEvent } from '../types-BapBTTio.cjs';
 
 /**
  * 营销物料上报载荷类型（上报契约的唯一数据源）。

package/dist/report/index.d.ts

@@ -1,4 +1,4 @@
-import { I as RuntimeEventName, G as DslInteractionEvent } from '../types-DDOAHxQt.js';
+import { J as RuntimeEventName, H as DslInteractionEvent } from '../types-BapBTTio.js';
 
 /**
  * 营销物料上报载荷类型（上报契约的唯一数据源）。

package/dist/{types-DDOAHxQt.d.cts → types-BapBTTio.d.cts}

@@ -213,11 +213,25 @@ interface DslSourceRef {
     $source: string;
     params?: Record<string, unknown>;
 }
+/**
+ * 自动轮播配置，挂在 `derived.xxx.autoplay` 上。
+ *
+ * 配了就开启、始终循环：每隔 `interval` 毫秒把 `state[indexBy]` 往下推一格
+ * （到末尾回到 0）。走的是和用户点 tab 同一个 setState，效果与手动切换完全一致。
+ */
+interface DslAutoplay {
+    /** 切换间隔，毫秒，不小于 1000 */
+    interval: number;
+    /** 鼠标悬停在整个物料上时暂停，离开后重新计时。默认 false */
+    pauseOnHover?: boolean;
+}
 interface DslDerived {
     /** data 里的数组字段名 */
     list: string;
     /** state 里的下标字段名 */
     indexBy: string;
+    /** 自动轮播；不写就不轮播 */
+    autoplay?: DslAutoplay;
 }
 /** 一份完整配置。单视图直接写 type/stage/nodes，多视图写 views + entry */
 interface Dsl extends Partial<DslView> {
@@ -341,6 +355,15 @@ interface RenderTree {
      * 同一个页面上出现多份物料时，各自的 hover 规则不会串台。
      */
     rootClassName: string;
+    /**
+     * 鼠标进入根容器时调用。只有配置里存在 `pauseOnHover: true` 的自动轮播时才有值。
+     *
+     * 框架壳的义务：有值时在根容器上绑 `mouseenter` 调它，**不阻止冒泡、不加任何判断**；
+     * 没值时什么都不绑。暂停哪些轮播、何时恢复，全由 core 决定。
+     */
+    onRootEnter?: () => void;
+    /** 鼠标离开根容器时调用，与 `onRootEnter` 成对出现，壳绑 `mouseleave` */
+    onRootLeave?: () => void;
 }
 type DslSource = (params: Record<string, unknown>, user: Record<string, unknown>) => unknown | Promise<unknown>;
 type DslHandler = (params: Record<string, unknown>) => void;
@@ -461,4 +484,4 @@ interface RuntimeOptions {
     emit?: RuntimeEmit;
 }
 
-export type { RenderLayer as A, DslSource as B, CssStyle as C, Dsl as D, DslHandler as E, DslInteractionTrigger as F, DslInteractionEvent as G, RuntimeEvents as H, RuntimeEventName as I, RuntimeEmit as J, RuntimeOptions as R, RenderTree as a, DslView as b, DslStyle as c, DslViewType as d, DslNodeType as e, DslLength as f, DslRect as g, DslAnimate as h, DslKeyframe as i, DslActionBase as j, DslNavigateAction as k, DslCloseAction as l, DslCloseAllAction as m, DslOpenAction as n, DslSetStateAction as o, DslTrackAction as p, DslCallAction as q, DslSequenceAction as r, DslAction as s, DslNode as t, DslClosePosition as u, DslCloseButton as v, DslStage as w, DslSourceRef as x, DslDerived as y, RenderElement as z };
+export type { RenderElement as A, RenderLayer as B, CssStyle as C, Dsl as D, DslSource as E, DslHandler as F, DslInteractionTrigger as G, DslInteractionEvent as H, RuntimeEvents as I, RuntimeEventName as J, RuntimeEmit as K, RuntimeOptions as R, RenderTree as a, DslView as b, DslStyle as c, DslViewType as d, DslNodeType as e, DslLength as f, DslRect as g, DslAnimate as h, DslKeyframe as i, DslActionBase as j, DslNavigateAction as k, DslCloseAction as l, DslCloseAllAction as m, DslOpenAction as n, DslSetStateAction as o, DslTrackAction as p, DslCallAction as q, DslSequenceAction as r, DslAction as s, DslNode as t, DslClosePosition as u, DslCloseButton as v, DslStage as w, DslSourceRef as x, DslAutoplay as y, DslDerived as z };

package/dist/{types-DDOAHxQt.d.ts → types-BapBTTio.d.ts}

@@ -213,11 +213,25 @@ interface DslSourceRef {
     $source: string;
     params?: Record<string, unknown>;
 }
+/**
+ * 自动轮播配置，挂在 `derived.xxx.autoplay` 上。
+ *
+ * 配了就开启、始终循环：每隔 `interval` 毫秒把 `state[indexBy]` 往下推一格
+ * （到末尾回到 0）。走的是和用户点 tab 同一个 setState，效果与手动切换完全一致。
+ */
+interface DslAutoplay {
+    /** 切换间隔，毫秒，不小于 1000 */
+    interval: number;
+    /** 鼠标悬停在整个物料上时暂停，离开后重新计时。默认 false */
+    pauseOnHover?: boolean;
+}
 interface DslDerived {
     /** data 里的数组字段名 */
     list: string;
     /** state 里的下标字段名 */
     indexBy: string;
+    /** 自动轮播；不写就不轮播 */
+    autoplay?: DslAutoplay;
 }
 /** 一份完整配置。单视图直接写 type/stage/nodes，多视图写 views + entry */
 interface Dsl extends Partial<DslView> {
@@ -341,6 +355,15 @@ interface RenderTree {
      * 同一个页面上出现多份物料时，各自的 hover 规则不会串台。
      */
     rootClassName: string;
+    /**
+     * 鼠标进入根容器时调用。只有配置里存在 `pauseOnHover: true` 的自动轮播时才有值。
+     *
+     * 框架壳的义务：有值时在根容器上绑 `mouseenter` 调它，**不阻止冒泡、不加任何判断**；
+     * 没值时什么都不绑。暂停哪些轮播、何时恢复，全由 core 决定。
+     */
+    onRootEnter?: () => void;
+    /** 鼠标离开根容器时调用，与 `onRootEnter` 成对出现，壳绑 `mouseleave` */
+    onRootLeave?: () => void;
 }
 type DslSource = (params: Record<string, unknown>, user: Record<string, unknown>) => unknown | Promise<unknown>;
 type DslHandler = (params: Record<string, unknown>) => void;
@@ -461,4 +484,4 @@ interface RuntimeOptions {
     emit?: RuntimeEmit;
 }
 
-export type { RenderLayer as A, DslSource as B, CssStyle as C, Dsl as D, DslHandler as E, DslInteractionTrigger as F, DslInteractionEvent as G, RuntimeEvents as H, RuntimeEventName as I, RuntimeEmit as J, RuntimeOptions as R, RenderTree as a, DslView as b, DslStyle as c, DslViewType as d, DslNodeType as e, DslLength as f, DslRect as g, DslAnimate as h, DslKeyframe as i, DslActionBase as j, DslNavigateAction as k, DslCloseAction as l, DslCloseAllAction as m, DslOpenAction as n, DslSetStateAction as o, DslTrackAction as p, DslCallAction as q, DslSequenceAction as r, DslAction as s, DslNode as t, DslClosePosition as u, DslCloseButton as v, DslStage as w, DslSourceRef as x, DslDerived as y, RenderElement as z };
+export type { RenderElement as A, RenderLayer as B, CssStyle as C, Dsl as D, DslSource as E, DslHandler as F, DslInteractionTrigger as G, DslInteractionEvent as H, RuntimeEvents as I, RuntimeEventName as J, RuntimeEmit as K, RuntimeOptions as R, RenderTree as a, DslView as b, DslStyle as c, DslViewType as d, DslNodeType as e, DslLength as f, DslRect as g, DslAnimate as h, DslKeyframe as i, DslActionBase as j, DslNavigateAction as k, DslCloseAction as l, DslCloseAllAction as m, DslOpenAction as n, DslSetStateAction as o, DslTrackAction as p, DslCallAction as q, DslSequenceAction as r, DslAction as s, DslNode as t, DslClosePosition as u, DslCloseButton as v, DslStage as w, DslSourceRef as x, DslAutoplay as y, DslDerived as z };

package/package.json

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