@open-feishu-card/renderer 0.2.25 → 0.2.26

package/dist/index.cjs

@@ -1127,8 +1127,6 @@ var BASE_STYLES_CSS = `/**
 .universal-card-header {
   width: 100%;
   overflow: hidden;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 .universal-card-header__bg {
   box-sizing: border-box;
@@ -1262,7 +1260,7 @@ var BASE_STYLES_CSS = `/**
   line-height: 22px;
 }
 
-/* ---- div / note ---- */
+/* ---- div ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div \u5E26\u524D\u7F6E\u56FE\u6807\uFF1Aicon \u5728\u5DE6\u3001\u6587\u672C\u5728\u53F3\u6392\u6210\u4E00\u884C\uFF08\u590D\u523B\u7F51\u9875\u7248 .universal-card-div \u5E03\u5C40\uFF09 */
 .universal-card-div--with-icon {
@@ -1274,10 +1272,6 @@ var BASE_STYLES_CSS = `/**
   display: flex; align-items: center; overflow: hidden;
 }
 .universal-card-div__content { flex: 1; min-width: 0; }
-.universal-card-note {
-  font-size: 12px;
-  color: #8f959e;
-}
 
 /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
 .universal-card-column-set { display: flex; }
@@ -1306,6 +1300,7 @@ var BASE_STYLES_CSS = `/**
   display: inline-flex; align-items: center; justify-content: center;
   gap: 4px;
   min-height: 28px; padding: 4px 12px;
+  font-family: inherit;
   font-size: 14px; line-height: 22px; border-radius: 6px;
   border: 1px solid transparent; background: transparent; color: #1f2329;
   cursor: pointer; text-decoration: none; box-sizing: border-box;
@@ -1384,17 +1379,19 @@ var BASE_STYLES_CSS = `/**
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
-/* input / select \u7B49\u8F93\u5165\u63A7\u4EF6\uFF1A\u9884\u89C8\u91CC\u6E32\u67D3\u6210\u53EA\u8BFB\u9759\u6001\u6846\uFF0C\u5C55\u793A placeholder */
+/* input / select\uFF1A\u9759\u6001\u9884\u89C8\u662F\u53EA\u8BFB\u6846\uFF1Binteractive \u53BB\u6389 --static\uFF0C\u6210\u4E3A\u53EF\u8F93\u5165\u63A7\u4EF6 */
+.universal-card-input,
 .universal-card-input--static {
   min-height: 32px; padding: 6px 12px; box-sizing: border-box;
-  font-size: 14px; line-height: 20px; color: #8f959e;
-  background: #f5f6f7; border: 1px solid #dee0e3; border-radius: 6px;
+  font-family: inherit; font-size: 14px; line-height: 20px;
+  background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
+  color: #1f2329; width: 100%;
+}
+.universal-card-input--static {
+  color: #8f959e; background: #f5f6f7;
   cursor: default; pointer-events: none;
 }
 
-/* ---- action \u5BB9\u5668 ---- */
-.universal-card-action { display: flex; flex-wrap: wrap; gap: 12px; }
-
 /* ---- checker \u52FE\u9009\u5668\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 universal-card-checker\uFF09 ---- */
 .universal-card-checker {
   display: flex; box-sizing: border-box; overflow: hidden; align-items: flex-start;
@@ -1985,7 +1982,6 @@ var BASE_STYLES_CSS = `/**
 }
 .universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
 .universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }
-.universal-card-root.theme-dark .universal-card-note { color: #8a8a8a; }
 `;
 
 // src/icon-font.ts
@@ -5612,10 +5608,6 @@ function registerBuiltins() {
     }
     return h("div", { className: `${CLS}-div` }, content);
   });
-  registerComponent(
-    "note",
-    (el, ctx) => h("div", { className: `${CLS}-note` }, renderElements(el.property?.elements, ctx))
-  );
   registerComponent("column_set", (el, ctx) => {
     const p = el.property || {};
     const gapRaw = p.horizontalSpacingValue?.value ?? p.horizontal_spacing;
@@ -5638,8 +5630,26 @@ function registerBuiltins() {
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     const cls = `${CLS}-column-set` + (bg ? ` ${CLS}-column-set--bg` : "");
+    if (isStateHost(el)) {
+      style.position = "absolute";
+      style.width = "0";
+      style.height = "0";
+      style.overflow = "hidden";
+      style.margin = "0";
+      style.padding = "0";
+    }
     return h("div", { className: cls, style }, renderElements(p.columns, ctx));
   });
+  function isStateHost(el) {
+    if (el.id === "card_state") return true;
+    const actions = el.property?.actions;
+    if (!Array.isArray(actions)) return false;
+    return actions.some((item) => {
+      if (!item || typeof item !== "object") return false;
+      const action = item.action;
+      return typeof action?.url === "string" && action.url.includes("msgcard/unsupported_action#s1.");
+    });
+  }
   registerComponent("column", (el, ctx) => {
     const p = el.property || {};
     const style = {
@@ -5989,29 +5999,105 @@ function registerBuiltins() {
       applyOuterMargin(style, p.margin);
     }
     const styleProp = Object.keys(style).length ? { style } : {};
+    const extra = p;
+    const callback = readCallbackValue(extra);
+    const formAction = String(extra.form_action_type ?? extra.formActionType ?? "");
+    if (ctx.options.interactive && callback && !p.disabled && !url) {
+      return h("button", {
+        type: formAction === "reset" ? "reset" : formAction === "submit" ? "submit" : "button",
+        className: base,
+        "data-feishu-action": JSON.stringify(callback),
+        "data-feishu-tag": "button",
+        ...styleProp
+      }, children);
+    }
     if (url && !p.disabled) {
       return h("a", { className: base, href: url, target: "_blank", rel: "noopener", ...styleProp }, children);
     }
     const cls = `${base} ${CLS}-button--static` + (p.disabled ? ` ${CLS}-button--disabled` : "");
     return h("span", { className: cls, ...styleProp }, children);
   });
-  registerComponent(
-    "form",
-    (el, ctx) => h("div", { className: `${CLS}-form` }, renderElements(el.property?.elements, ctx))
-  );
+  function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function readCallbackValue(p) {
+    const fromList = (list) => {
+      if (!Array.isArray(list)) return null;
+      for (const item of list) {
+        if (!isRecord(item) || item.type !== "callback") continue;
+        const inner = isRecord(item.action) ? item.action : item;
+        if (isRecord(inner.value)) return inner.value;
+      }
+      return null;
+    };
+    return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
+  }
+  registerComponent("form", (el, ctx) => {
+    const children = renderElements(el.property?.elements, ctx);
+    const className = `${CLS}-form`;
+    if (!ctx.options.interactive) return h("div", { className }, children);
+    const name = typeof el.property?.name === "string" ? el.property.name : "";
+    return h("form", { className, "data-feishu-form": name }, children);
+  });
   function renderStaticField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
     return h("div", { className: `${CLS}-input ${CLS}-input--static` }, ph);
   }
-  registerComponent("input", (el) => renderStaticField(el));
-  registerComponent("multi_select_static", (el) => renderStaticField(el));
-  registerComponent("select_static", (el) => renderStaticField(el));
-  registerComponent("date_picker", (el) => renderStaticField(el));
-  registerComponent("picker_time", (el) => renderStaticField(el));
-  registerComponent("picker_datetime", (el) => renderStaticField(el));
-  registerComponent("select_person", (el) => renderStaticField(el));
-  registerComponent("multi_select_person", (el) => renderStaticField(el));
+  function fieldText(value) {
+    if (typeof value === "string") return value;
+    return extractPlainText(value);
+  }
+  function renderInteractiveField(el) {
+    const p = el.property || {};
+    const ph = extractPlainText(p.placeholder) || "";
+    const name = typeof p.name === "string" ? p.name : void 0;
+    const nameProp = name ? { name } : {};
+    const callback = readCallbackValue(p);
+    const actionProp = callback ? { "data-feishu-action": JSON.stringify(callback), "data-feishu-tag": el.tag } : {};
+    if (el.tag === "select_static" || el.tag === "multi_select_static") {
+      const initial = p.initial_option ?? p.initialOption;
+      const options = Array.isArray(p.options) ? p.options : [];
+      return h("select", {
+        className: `${CLS}-input`,
+        ...nameProp,
+        ...el.tag === "multi_select_static" ? { multiple: true } : {},
+        ...actionProp
+      }, [
+        h("option", { value: "" }, ph),
+        ...options.map((option) => {
+          const item = isRecord(option) ? option : {};
+          const value = typeof item.value === "string" ? item.value : fieldText(item.text ?? item);
+          const label = fieldText(item.text ?? item.label) || value;
+          return h("option", {
+            value,
+            ...value !== "" && value === initial ? { selected: true } : {}
+          }, label);
+        })
+      ]);
+    }
+    const def = p.default_value ?? p.defaultValue;
+    const inputType = el.tag === "date_picker" ? "date" : el.tag === "picker_time" ? "time" : "text";
+    return h("input", {
+      className: `${CLS}-input`,
+      type: inputType,
+      placeholder: ph,
+      value: typeof def === "string" ? def : "",
+      ...nameProp,
+      ...actionProp
+    });
+  }
+  function renderField(el, ctx) {
+    return ctx.options.interactive ? renderInteractiveField(el) : renderStaticField(el);
+  }
+  registerComponent("input", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("date_picker", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_time", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_datetime", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_person", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_person", (el, ctx) => renderField(el, ctx));
   registerComponent("checker", (el, ctx) => {
     const p = el.property || {};
     const checked = p.checked === true;
@@ -6083,12 +6169,6 @@ function registerBuiltins() {
     const Tag = overall && !disabled ? "label" : "div";
     return h(Tag, props, checkbox, content, buttonsVNode);
   });
-  registerComponent("action", (el, ctx) => {
-    const p = el.property || {};
-    const layout = p.layout || "flow";
-    const style = { display: "flex", flexWrap: "wrap", gap: "12px" };
-    return h("div", { className: `${CLS}-action ${CLS}-action--${layout}`, style }, renderElements(p.actions, ctx));
-  });
   registerComponent("at", (el, ctx) => {
     const p = el.property || {};
     if (p.userID === "all") {

package/dist/index.d.cts

@@ -305,6 +305,12 @@ interface RenderOptions {
     avatarURLSuffix?: string;
     /** 自定义头像地址解析：入参为命中的 PersonInfo，返回最终 src（优先级最高） */
     resolvePersonAvatar?: (person: PersonInfo) => string | null | undefined;
+    /**
+     * 交互预览。默认关闭：回调按钮是不可点的 span，输入框是静态占位。
+     * 打开后，回调按钮变成带 data-feishu-action 的 button，输入框/下拉框变成真实表单控件。
+     * 宿主监听这些控件，自己把点击发回卡片服务。
+     */
+    interactive?: boolean;
 }
 /**
  * 人员信息：person_v1 / person_list / at 元素只带 ID，姓名与头像 key 在这里。

package/dist/index.d.ts

@@ -305,6 +305,12 @@ interface RenderOptions {
     avatarURLSuffix?: string;
     /** 自定义头像地址解析：入参为命中的 PersonInfo，返回最终 src（优先级最高） */
     resolvePersonAvatar?: (person: PersonInfo) => string | null | undefined;
+    /**
+     * 交互预览。默认关闭：回调按钮是不可点的 span，输入框是静态占位。
+     * 打开后，回调按钮变成带 data-feishu-action 的 button，输入框/下拉框变成真实表单控件。
+     * 宿主监听这些控件，自己把点击发回卡片服务。
+     */
+    interactive?: boolean;
 }
 /**
  * 人员信息：person_v1 / person_list / at 元素只带 ID，姓名与头像 key 在这里。

package/dist/index.js

@@ -1126,8 +1126,6 @@ var BASE_STYLES_CSS = `/**
 .universal-card-header {
   width: 100%;
   overflow: hidden;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 .universal-card-header__bg {
   box-sizing: border-box;
@@ -1261,7 +1259,7 @@ var BASE_STYLES_CSS = `/**
   line-height: 22px;
 }
 
-/* ---- div / note ---- */
+/* ---- div ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div \u5E26\u524D\u7F6E\u56FE\u6807\uFF1Aicon \u5728\u5DE6\u3001\u6587\u672C\u5728\u53F3\u6392\u6210\u4E00\u884C\uFF08\u590D\u523B\u7F51\u9875\u7248 .universal-card-div \u5E03\u5C40\uFF09 */
 .universal-card-div--with-icon {
@@ -1273,10 +1271,6 @@ var BASE_STYLES_CSS = `/**
   display: flex; align-items: center; overflow: hidden;
 }
 .universal-card-div__content { flex: 1; min-width: 0; }
-.universal-card-note {
-  font-size: 12px;
-  color: #8f959e;
-}
 
 /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
 .universal-card-column-set { display: flex; }
@@ -1305,6 +1299,7 @@ var BASE_STYLES_CSS = `/**
   display: inline-flex; align-items: center; justify-content: center;
   gap: 4px;
   min-height: 28px; padding: 4px 12px;
+  font-family: inherit;
   font-size: 14px; line-height: 22px; border-radius: 6px;
   border: 1px solid transparent; background: transparent; color: #1f2329;
   cursor: pointer; text-decoration: none; box-sizing: border-box;
@@ -1383,17 +1378,19 @@ var BASE_STYLES_CSS = `/**
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
-/* input / select \u7B49\u8F93\u5165\u63A7\u4EF6\uFF1A\u9884\u89C8\u91CC\u6E32\u67D3\u6210\u53EA\u8BFB\u9759\u6001\u6846\uFF0C\u5C55\u793A placeholder */
+/* input / select\uFF1A\u9759\u6001\u9884\u89C8\u662F\u53EA\u8BFB\u6846\uFF1Binteractive \u53BB\u6389 --static\uFF0C\u6210\u4E3A\u53EF\u8F93\u5165\u63A7\u4EF6 */
+.universal-card-input,
 .universal-card-input--static {
   min-height: 32px; padding: 6px 12px; box-sizing: border-box;
-  font-size: 14px; line-height: 20px; color: #8f959e;
-  background: #f5f6f7; border: 1px solid #dee0e3; border-radius: 6px;
+  font-family: inherit; font-size: 14px; line-height: 20px;
+  background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
+  color: #1f2329; width: 100%;
+}
+.universal-card-input--static {
+  color: #8f959e; background: #f5f6f7;
   cursor: default; pointer-events: none;
 }
 
-/* ---- action \u5BB9\u5668 ---- */
-.universal-card-action { display: flex; flex-wrap: wrap; gap: 12px; }
-
 /* ---- checker \u52FE\u9009\u5668\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 universal-card-checker\uFF09 ---- */
 .universal-card-checker {
   display: flex; box-sizing: border-box; overflow: hidden; align-items: flex-start;
@@ -1984,7 +1981,6 @@ var BASE_STYLES_CSS = `/**
 }
 .universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
 .universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }
-.universal-card-root.theme-dark .universal-card-note { color: #8a8a8a; }
 `;
 
 // src/icon-font.ts
@@ -5611,10 +5607,6 @@ function registerBuiltins() {
     }
     return h("div", { className: `${CLS}-div` }, content);
   });
-  registerComponent(
-    "note",
-    (el, ctx) => h("div", { className: `${CLS}-note` }, renderElements(el.property?.elements, ctx))
-  );
   registerComponent("column_set", (el, ctx) => {
     const p = el.property || {};
     const gapRaw = p.horizontalSpacingValue?.value ?? p.horizontal_spacing;
@@ -5637,8 +5629,26 @@ function registerBuiltins() {
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     const cls = `${CLS}-column-set` + (bg ? ` ${CLS}-column-set--bg` : "");
+    if (isStateHost(el)) {
+      style.position = "absolute";
+      style.width = "0";
+      style.height = "0";
+      style.overflow = "hidden";
+      style.margin = "0";
+      style.padding = "0";
+    }
     return h("div", { className: cls, style }, renderElements(p.columns, ctx));
   });
+  function isStateHost(el) {
+    if (el.id === "card_state") return true;
+    const actions = el.property?.actions;
+    if (!Array.isArray(actions)) return false;
+    return actions.some((item) => {
+      if (!item || typeof item !== "object") return false;
+      const action = item.action;
+      return typeof action?.url === "string" && action.url.includes("msgcard/unsupported_action#s1.");
+    });
+  }
   registerComponent("column", (el, ctx) => {
     const p = el.property || {};
     const style = {
@@ -5988,29 +5998,105 @@ function registerBuiltins() {
       applyOuterMargin(style, p.margin);
     }
     const styleProp = Object.keys(style).length ? { style } : {};
+    const extra = p;
+    const callback = readCallbackValue(extra);
+    const formAction = String(extra.form_action_type ?? extra.formActionType ?? "");
+    if (ctx.options.interactive && callback && !p.disabled && !url) {
+      return h("button", {
+        type: formAction === "reset" ? "reset" : formAction === "submit" ? "submit" : "button",
+        className: base,
+        "data-feishu-action": JSON.stringify(callback),
+        "data-feishu-tag": "button",
+        ...styleProp
+      }, children);
+    }
     if (url && !p.disabled) {
       return h("a", { className: base, href: url, target: "_blank", rel: "noopener", ...styleProp }, children);
     }
     const cls = `${base} ${CLS}-button--static` + (p.disabled ? ` ${CLS}-button--disabled` : "");
     return h("span", { className: cls, ...styleProp }, children);
   });
-  registerComponent(
-    "form",
-    (el, ctx) => h("div", { className: `${CLS}-form` }, renderElements(el.property?.elements, ctx))
-  );
+  function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function readCallbackValue(p) {
+    const fromList = (list) => {
+      if (!Array.isArray(list)) return null;
+      for (const item of list) {
+        if (!isRecord(item) || item.type !== "callback") continue;
+        const inner = isRecord(item.action) ? item.action : item;
+        if (isRecord(inner.value)) return inner.value;
+      }
+      return null;
+    };
+    return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
+  }
+  registerComponent("form", (el, ctx) => {
+    const children = renderElements(el.property?.elements, ctx);
+    const className = `${CLS}-form`;
+    if (!ctx.options.interactive) return h("div", { className }, children);
+    const name = typeof el.property?.name === "string" ? el.property.name : "";
+    return h("form", { className, "data-feishu-form": name }, children);
+  });
   function renderStaticField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
     return h("div", { className: `${CLS}-input ${CLS}-input--static` }, ph);
   }
-  registerComponent("input", (el) => renderStaticField(el));
-  registerComponent("multi_select_static", (el) => renderStaticField(el));
-  registerComponent("select_static", (el) => renderStaticField(el));
-  registerComponent("date_picker", (el) => renderStaticField(el));
-  registerComponent("picker_time", (el) => renderStaticField(el));
-  registerComponent("picker_datetime", (el) => renderStaticField(el));
-  registerComponent("select_person", (el) => renderStaticField(el));
-  registerComponent("multi_select_person", (el) => renderStaticField(el));
+  function fieldText(value) {
+    if (typeof value === "string") return value;
+    return extractPlainText(value);
+  }
+  function renderInteractiveField(el) {
+    const p = el.property || {};
+    const ph = extractPlainText(p.placeholder) || "";
+    const name = typeof p.name === "string" ? p.name : void 0;
+    const nameProp = name ? { name } : {};
+    const callback = readCallbackValue(p);
+    const actionProp = callback ? { "data-feishu-action": JSON.stringify(callback), "data-feishu-tag": el.tag } : {};
+    if (el.tag === "select_static" || el.tag === "multi_select_static") {
+      const initial = p.initial_option ?? p.initialOption;
+      const options = Array.isArray(p.options) ? p.options : [];
+      return h("select", {
+        className: `${CLS}-input`,
+        ...nameProp,
+        ...el.tag === "multi_select_static" ? { multiple: true } : {},
+        ...actionProp
+      }, [
+        h("option", { value: "" }, ph),
+        ...options.map((option) => {
+          const item = isRecord(option) ? option : {};
+          const value = typeof item.value === "string" ? item.value : fieldText(item.text ?? item);
+          const label = fieldText(item.text ?? item.label) || value;
+          return h("option", {
+            value,
+            ...value !== "" && value === initial ? { selected: true } : {}
+          }, label);
+        })
+      ]);
+    }
+    const def = p.default_value ?? p.defaultValue;
+    const inputType = el.tag === "date_picker" ? "date" : el.tag === "picker_time" ? "time" : "text";
+    return h("input", {
+      className: `${CLS}-input`,
+      type: inputType,
+      placeholder: ph,
+      value: typeof def === "string" ? def : "",
+      ...nameProp,
+      ...actionProp
+    });
+  }
+  function renderField(el, ctx) {
+    return ctx.options.interactive ? renderInteractiveField(el) : renderStaticField(el);
+  }
+  registerComponent("input", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("date_picker", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_time", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_datetime", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_person", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_person", (el, ctx) => renderField(el, ctx));
   registerComponent("checker", (el, ctx) => {
     const p = el.property || {};
     const checked = p.checked === true;
@@ -6082,12 +6168,6 @@ function registerBuiltins() {
     const Tag = overall && !disabled ? "label" : "div";
     return h(Tag, props, checkbox, content, buttonsVNode);
   });
-  registerComponent("action", (el, ctx) => {
-    const p = el.property || {};
-    const layout = p.layout || "flow";
-    const style = { display: "flex", flexWrap: "wrap", gap: "12px" };
-    return h("div", { className: `${CLS}-action ${CLS}-action--${layout}`, style }, renderElements(p.actions, ctx));
-  });
   registerComponent("at", (el, ctx) => {
     const p = el.property || {};
     if (p.userID === "all") {

package/dist/styles.css

@@ -198,8 +198,6 @@
 .universal-card-header {
   width: 100%;
   overflow: hidden;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 .universal-card-header__bg {
   box-sizing: border-box;
@@ -333,7 +331,7 @@
   line-height: 22px;
 }
 
-/* ---- div / note ---- */
+/* ---- div ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div 带前置图标：icon 在左、文本在右排成一行（复刻网页版 .universal-card-div 布局） */
 .universal-card-div--with-icon {
@@ -345,10 +343,6 @@
   display: flex; align-items: center; overflow: hidden;
 }
 .universal-card-div__content { flex: 1; min-width: 0; }
-.universal-card-note {
-  font-size: 12px;
-  color: #8f959e;
-}
 
 /* ---- 布局：column_set / column ---- */
 .universal-card-column-set { display: flex; }
@@ -377,6 +371,7 @@
   display: inline-flex; align-items: center; justify-content: center;
   gap: 4px;
   min-height: 28px; padding: 4px 12px;
+  font-family: inherit;
   font-size: 14px; line-height: 22px; border-radius: 6px;
   border: 1px solid transparent; background: transparent; color: #1f2329;
   cursor: pointer; text-decoration: none; box-sizing: border-box;
@@ -455,17 +450,19 @@
 /* ---- 表单（预览：仅透传，无表单语义） ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
-/* input / select 等输入控件：预览里渲染成只读静态框，展示 placeholder */
+/* input / select：静态预览是只读框；interactive 去掉 --static，成为可输入控件 */
+.universal-card-input,
 .universal-card-input--static {
   min-height: 32px; padding: 6px 12px; box-sizing: border-box;
-  font-size: 14px; line-height: 20px; color: #8f959e;
-  background: #f5f6f7; border: 1px solid #dee0e3; border-radius: 6px;
+  font-family: inherit; font-size: 14px; line-height: 20px;
+  background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
+  color: #1f2329; width: 100%;
+}
+.universal-card-input--static {
+  color: #8f959e; background: #f5f6f7;
   cursor: default; pointer-events: none;
 }
 
-/* ---- action 容器 ---- */
-.universal-card-action { display: flex; flex-wrap: wrap; gap: 12px; }
-
 /* ---- checker 勾选器（对齐网页版 universal-card-checker） ---- */
 .universal-card-checker {
   display: flex; box-sizing: border-box; overflow: hidden; align-items: flex-start;
@@ -1056,4 +1053,3 @@
 }
 .universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
 .universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }
-.universal-card-root.theme-dark .universal-card-note { color: #8a8a8a; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.2.25",
+  "version": "0.2.26",
   "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,7 +28,7 @@
     "./dist/*.cjs"
   ],
   "dependencies": {
-    "@open-feishu-card/adapter": "0.3.16"
+    "@open-feishu-card/adapter": "0.3.17"
   },
   "devDependencies": {
     "tsup": "^8.3.5",