@open-feishu-card/renderer 0.3.4 → 0.3.5

package/dist/index.cjs

@@ -256,7 +256,7 @@ var HEADER_TEMPLATE = (() => {
       text: PALETTE[textException[n] || letter + "600"]
     };
   }
-  out.default = { bg: "#f5f6f7", text: "#1f2329" };
+  out.default = { bg: "#ffffff", text: "#1f2329" };
   return out;
 })();
 var TEXT_FONT_COLOR_TOKEN = {
@@ -997,6 +997,9 @@ var BASE_STYLES_CSS = `/**
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
+  /* \u771F\u673A\u6309\u300C\u5361\u7247\u5BB9\u5668\u5BBD\u5EA6 > 320px\u300D\u533A\u5206\u5BBD/\u7A84\u5C4F\u6309\u94AE\u6863\u4F4D\uFF0C\u8FD9\u91CC\u7528\u5BB9\u5668\u67E5\u8BE2\u590D\u523B */
+  container-type: inline-size;
+  container-name: universal-card;
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* \u6B63\u6587 color:var(--O400) \u7B49\u4F9D\u8D56\u8FD9\u4E9B\u53D8\u91CF\uFF1B\u4E0E\u98DE\u4E66 :root light \u8272\u9636\u5BF9\u9F50 */
   --B50: #f0f4ff;
@@ -1179,6 +1182,8 @@ var BASE_STYLES_CSS = `/**
   /* \u5BF9\u9F50\u98DE\u4E66\uFF1Amax(100%, 605px) 140px\uFF0C\u7A84\u5361\u4E0D\u628A\u9AD8\u5149\u62C9\u7A00 */
   background-size: max(100%, 605px) 140px;
 }
+/* default/disabled \u6A21\u677F\u771F\u673A\u4E0D\u8BBE\u80CC\u666F\u8272\uFF08bg_color \u4E3A\u7A7A\u4E32\uFF09\uFF0C\u6B64\u65F6 header \u4E0D\u7559\u5E95\u90E8\u5185\u8FB9\u8DDD */
+.universal-card-header__bg--no-template { padding-bottom: 0; }
 /* \u5185\u5BB9\u884C\uFF1A\u5DE6\u4FA7\u56FE\u6807 + \u53F3\u4FA7\u6807\u9898\u533A\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 header__content = row\uFF09 */
 .universal-card-header__content {
   width: 100%;
@@ -1245,7 +1250,9 @@ var BASE_STYLES_CSS = `/**
   column-gap: 12px;
   align-items: flex-start;
 }
-.universal-card-body > * { width: 100%; box-sizing: border-box; }
+/* \u4EA4\u4E92\u63A7\u4EF6\u4E0D\u53C2\u4E0E\u300C\u5B50\u5143\u7D20\u6491\u6EE1\u300D\uFF1A\u6309\u94AE\u7684\u5BBD\u5EA6\u7531\u771F\u673A\u89C4\u5219\u51B3\u5B9A\uFF08\u89C1 .universal-card-button--auto\uFF09\uFF0C
+   \u82E5\u88AB\u8FD9\u6761 blanket \u89C4\u5219\u62C9\u5230 100%\uFF0C\u7A84\u5C4F/\u5BBD\u5C4F\u5206\u6863\u5C31\u5931\u6548\u4E86\u3002 */
+.universal-card-body > *:not(.universal-card-button) { width: 100%; box-sizing: border-box; }
 
 /* ---- markdown \u6BB5\u843D ---- */
 /* \u5BF9\u9F50\u7F51\u9875\u7248\uFF1Aline-height \u9ED8\u8BA4 1.6\uFF1B\u5177\u4F53\u5B57\u53F7/\u884C\u9AD8\u7531\u7EC4\u4EF6\u5185\u8054 style \u6309 text_size \u7ED9\u51FA */
@@ -1365,10 +1372,14 @@ var BASE_STYLES_CSS = `/**
   flex-shrink: 0; height: 1.2em; color: inherit;
 }
 .universal-card-button__icon .universal-card-icon { color: inherit; }
-/* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A\u2014\u2014body > * { width:100% }\u3001\u5217 flex stretch \u4F1A\u628A\u6309\u94AE\u6491\u6EE1\u6240\u5728\u884C/\u5217\u3002
-   \u4E0D\u518D\u5F3A\u5236 width:auto\uFF08\u90A3\u662F\u7F51\u9875\u7248\u89C2\u611F\uFF1B\u771F\u673A\u72EC\u7ACB\u6210\u884C\u7684\u6309\u94AE\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C\uFF09\u3002
-   width:"fill" \u663E\u5F0F\u6302 --block\uFF0C\u4E0E\u7F3A\u7701\u6491\u6EE1\u540C\u5BBD\uFF0C\u5E76\u4F9B margin calc \u8BC6\u522B\u3002 */
-.universal-card-button--block { width: 100%; }
+/* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A ud__button \u7684 isWide \u5206\u6863\uFF08\u771F\u673A\u6309\u300C\u5361\u7247\u5BB9\u5668\u5BBD\u5EA6 > 320px\u300D\u5224\u5B9A\uFF09\uFF1A
+   \u5BBD\u5C4F \u2192 \u81EA\u9002\u5E94\u5185\u5BB9\u5BBD\uFF08--auto\uFF09\uFF1B\u7A84\u5C4F\uFF08\u2264320px\uFF09\u2192 \u6491\u6EE1\u6574\u884C\uFF08\u4E0B\u65B9 @container \u89C4\u5219\u8986\u76D6\uFF09\u3002
+   text \u65CF\u4E0E width:"fill" \u6052\u5B9A\u6491\u6EE1\uFF08--block\uFF09\u3002
+   align-self:flex-start \u2014\u2014 \u7236\u7EA7\uFF08body/form/column\uFF09\u9ED8\u8BA4 align-items:stretch\uFF0C
+   \u53EA\u5199 width:auto \u4ECD\u4F1A\u88AB\u62C9\u4F38\uFF0C\u5FC5\u987B\u540C\u65F6\u963B\u6B62\u62C9\u4F38\u3002 */
+.universal-card-button { min-width: 58px; align-self: flex-start; }
+.universal-card-button--block { width: 100%; min-width: unset; }
+.universal-card-button--auto { width: auto; }
 
 /* \u2014\u2014 outlined \u63CF\u8FB9\u65CF \u2014\u2014 */
 /* default\uFF1A\u7070\u63CF\u8FB9 + \u767D\u5E95 + \u6DF1\u5B57\uFF08\u672A\u52A0\u53D8\u4F53\u7C7B\u7684\u88F8 .universal-card-button \u5DF2\u662F\u767D\u5E95\u6DF1\u5B57\uFF0C
@@ -1395,6 +1406,8 @@ var BASE_STYLES_CSS = `/**
 .universal-card-button--danger_text {
   border-color: transparent; background: transparent; padding: 4px 8px;
   justify-content: flex-start;
+  /* \u771F\u673A text \u65CF\u6309\u94AE\u4E0D\u8BBE\u6700\u5C0F\u5BBD\u5EA6 */
+  min-width: unset;
 }
 .universal-card-button--text { color: #1f2329; }
 .universal-card-button--primary_text { color: #1456f0; }
@@ -1430,6 +1443,8 @@ var BASE_STYLES_CSS = `/**
 .universal-card-overflow--static { display: inline-flex; }
 .universal-card-overflow__summary {
   list-style: none; cursor: pointer; display: inline-flex;
+  /* \u771F\u673A\u6298\u53E0\u6309\u94AE\u7684\u6700\u5C0F\u5BBD\u5EA6\u662F 32px\uFF08\u666E\u901A\u6309\u94AE\u662F 58px\uFF09 */
+  min-width: 32px;
 }
 /* \u53BB\u6389 <summary> \u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0 */
 .universal-card-overflow__summary::-webkit-details-marker { display: none; }
@@ -1451,8 +1466,9 @@ var BASE_STYLES_CSS = `/**
 .universal-card-overflow__item:hover { background: #f5f6f7; }
 
 /* ---- \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%; }
+/* row-gap 12px\uFF1A\u5BF9\u9F50\u771F\u673A schema 2.0 \u8868\u5355\u5BB9\u5668 */
+.universal-card-form { display: flex; flex-direction: column; row-gap: 12px; }
+.universal-card-form > *:not(.universal-card-button) { width: 100%; }
 /* 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 {
@@ -1460,6 +1476,13 @@ var BASE_STYLES_CSS = `/**
   font-family: inherit; font-size: 14px; line-height: 20px;
   background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
   color: #1f2329; width: 100%;
+  /* \u771F\u673A input \u9ED8\u8BA4 max-width:282px\uFF08width:"fill" \u65F6\u7531\u5185\u8054\u6837\u5F0F\u653E\u5F00\uFF09 */
+  max-width: 282px;
+}
+/* select type:"text"\uFF1A\u771F\u673A\u662F\u65E0\u8FB9\u6846\u3001\u5185\u5BB9\u81EA\u9002\u5E94\u5BBD\u7684\u4E0B\u62C9 */
+.universal-card-input--text {
+  border-color: transparent; background: transparent;
+  min-height: 26px; padding: 1px 7px; width: auto;
 }
 .universal-card-input--static {
   color: #8f959e; background: #f5f6f7;
@@ -2127,6 +2150,13 @@ var BASE_STYLES_CSS = `/**
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-100%); margin-bottom: 0; }
 }
+
+/* ---- \u7A84\u5C4F\u5206\u6863\uFF08\u771F\u673A isWide\uFF1A\u5361\u7247\u5BB9\u5668\u5BBD\u5EA6 > 320px \u4E3A\u5BBD\u5C4F\uFF09 ----
+   \u771F\u673A\u89C4\u5219\uFF1Adefault/primary/primary_filled/danger/danger_filled/laser \u6309\u94AE\u5728\u7A84\u5C4F\u6491\u6EE1\u6574\u884C\uFF0C
+   \u5BBD\u5C4F\u5219\u81EA\u9002\u5E94\u5185\u5BB9\u5BBD\u3002@container \u4E0D\u589E\u52A0\u9009\u62E9\u5668\u6743\u91CD\uFF0C\u9760\u6E90\u7801\u987A\u5E8F\u5728 --auto \u89C4\u5219\u4E4B\u540E\u8986\u76D6\u3002 */
+@container universal-card (max-width: 320px) {
+  .universal-card-button--auto { width: 100%; }
+}
 `;
 
 // src/icon-font.ts
@@ -5694,6 +5724,8 @@ function registerBuiltins() {
       ),
       subtitleVNode
     ];
+    const tplKey2 = p.template || "default";
+    const noTemplate = tplKey2 === "default" || tplKey2 === "disabled";
     return h(
       "div",
       {
@@ -5703,7 +5735,7 @@ function registerBuiltins() {
       h(
         "div",
         {
-          className: `${CLS}-header__bg`,
+          className: `${CLS}-header__bg${noTemplate ? ` ${CLS}-header__bg--no-template` : ""}`,
           // 内联 base64 高光纹理；图宽=header 宽使亮带居中；padding 透传 DSL（默认 12px）
           style: (() => {
             const s = { backgroundImage: `url(${HEADER_BG_LIGHT})` };
@@ -6236,12 +6268,26 @@ function registerBuiltins() {
     const url = actionUrl || resolveURL(p.url) || p.behaviors?.[0]?.default_url?.url;
     const wv = p.widthValue;
     const widthTok = p.width ?? wv?.value;
-    const block = widthTok === "fill";
-    const base = `${CLS}-button ${CLS}-button--${type}${block ? ` ${CLS}-button--block` : ""}`;
+    const isFill = widthTok === "fill";
+    const pxWidth = /^\d+(\.\d+)?px$/i.test(String(widthTok ?? "")) ? String(widthTok) : "";
+    const textFamily = type === "text" || type === "primary_text" || type === "danger_text";
+    const block = isFill || textFamily;
+    const auto = !block && !pxWidth;
+    const base = `${CLS}-button ${CLS}-button--${type}` + (block ? ` ${CLS}-button--block` : "") + (auto ? ` ${CLS}-button--auto` : "");
     const style = {};
-    if (p.margin) {
-      style.width = "100%";
-      applyOuterMargin(style, p.margin);
+    if (pxWidth) {
+      style.width = pxWidth;
+      if (p.margin) applyOuterMargin(style, p.margin);
+    } else if (p.margin) {
+      if (block) {
+        style.width = "100%";
+        applyOuterMargin(style, p.margin);
+      } else {
+        applyOuterMargin(style, p.margin);
+        const { left, right } = horizontalMarginPx(p.margin);
+        const inset = left + right;
+        if (inset > 0) style.maxWidth = `calc(100% - ${inset}px)`;
+      }
     }
     const styleProp = Object.keys(style).length ? { style } : {};
     const extra = p;
@@ -6322,15 +6368,53 @@ function registerBuiltins() {
     const name = typeof el.property?.name === "string" ? el.property.name : "";
     return h("form", { className, "data-feishu-form": name }, children);
   });
+  function fieldWidthStyle(p, kind) {
+    const wv = p.widthValue;
+    const raw = String(p.width ?? wv?.value ?? "");
+    const style = {};
+    if (/^\d+(\.\d+)?px$/i.test(raw)) {
+      style.width = raw;
+      style.maxWidth = "100%";
+      return style;
+    }
+    if (raw === "fill") {
+      style.width = "100%";
+      style.maxWidth = "none";
+      return style;
+    }
+    if (kind === "select") {
+      if (raw === "auto") {
+        style.width = "100%";
+        style.maxWidth = "100%";
+        return style;
+      }
+      if (p.type === "text") {
+        style.width = "auto";
+        style.maxWidth = "100%";
+        return style;
+      }
+      style.width = "282px";
+      style.maxWidth = "100%";
+      return style;
+    }
+    style.width = "100%";
+    style.maxWidth = "282px";
+    return style;
+  }
   function renderStaticField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
-    return h("div", { className: `${CLS}-input ${CLS}-input--static` }, ph);
+    const kind = isSelectTag(el.tag) ? "select" : "input";
+    const cls = `${CLS}-input ${CLS}-input--static` + (kind === "select" && p.type === "text" ? ` ${CLS}-input--text` : "");
+    return h("div", { className: cls, style: fieldWidthStyle(p, kind) }, ph);
   }
   function fieldText(value) {
     if (typeof value === "string") return value;
     return extractPlainText(value);
   }
+  function isSelectTag(tag) {
+    return tag === "select_static" || tag === "multi_select_static" || tag === "select_person" || tag === "multi_select_person";
+  }
   function renderInteractiveField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
@@ -6338,13 +6422,15 @@ function registerBuiltins() {
     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") {
+    if (isSelectTag(el.tag)) {
       const initial = p.initial_option ?? p.initialOption;
       const options = Array.isArray(p.options) ? p.options : [];
+      const cls = `${CLS}-input` + (p.type === "text" ? ` ${CLS}-input--text` : "");
       return h("select", {
-        className: `${CLS}-input`,
+        className: cls,
+        style: fieldWidthStyle(p, "select"),
         ...nameProp,
-        ...el.tag === "multi_select_static" ? { multiple: true } : {},
+        ...el.tag === "multi_select_static" || el.tag === "multi_select_person" ? { multiple: true } : {},
         ...actionProp
       }, [
         h("option", { value: "" }, ph),
@@ -6363,6 +6449,7 @@ function registerBuiltins() {
     const inputType = el.tag === "date_picker" ? "date" : el.tag === "picker_time" ? "time" : "text";
     return h("input", {
       className: `${CLS}-input`,
+      style: fieldWidthStyle(p, "input"),
       type: inputType,
       placeholder: ph,
       value: typeof def === "string" ? def : "",

package/dist/index.js

@@ -255,7 +255,7 @@ var HEADER_TEMPLATE = (() => {
       text: PALETTE[textException[n] || letter + "600"]
     };
   }
-  out.default = { bg: "#f5f6f7", text: "#1f2329" };
+  out.default = { bg: "#ffffff", text: "#1f2329" };
   return out;
 })();
 var TEXT_FONT_COLOR_TOKEN = {
@@ -996,6 +996,9 @@ var BASE_STYLES_CSS = `/**
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
+  /* \u771F\u673A\u6309\u300C\u5361\u7247\u5BB9\u5668\u5BBD\u5EA6 > 320px\u300D\u533A\u5206\u5BBD/\u7A84\u5C4F\u6309\u94AE\u6863\u4F4D\uFF0C\u8FD9\u91CC\u7528\u5BB9\u5668\u67E5\u8BE2\u590D\u523B */
+  container-type: inline-size;
+  container-name: universal-card;
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* \u6B63\u6587 color:var(--O400) \u7B49\u4F9D\u8D56\u8FD9\u4E9B\u53D8\u91CF\uFF1B\u4E0E\u98DE\u4E66 :root light \u8272\u9636\u5BF9\u9F50 */
   --B50: #f0f4ff;
@@ -1178,6 +1181,8 @@ var BASE_STYLES_CSS = `/**
   /* \u5BF9\u9F50\u98DE\u4E66\uFF1Amax(100%, 605px) 140px\uFF0C\u7A84\u5361\u4E0D\u628A\u9AD8\u5149\u62C9\u7A00 */
   background-size: max(100%, 605px) 140px;
 }
+/* default/disabled \u6A21\u677F\u771F\u673A\u4E0D\u8BBE\u80CC\u666F\u8272\uFF08bg_color \u4E3A\u7A7A\u4E32\uFF09\uFF0C\u6B64\u65F6 header \u4E0D\u7559\u5E95\u90E8\u5185\u8FB9\u8DDD */
+.universal-card-header__bg--no-template { padding-bottom: 0; }
 /* \u5185\u5BB9\u884C\uFF1A\u5DE6\u4FA7\u56FE\u6807 + \u53F3\u4FA7\u6807\u9898\u533A\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 header__content = row\uFF09 */
 .universal-card-header__content {
   width: 100%;
@@ -1244,7 +1249,9 @@ var BASE_STYLES_CSS = `/**
   column-gap: 12px;
   align-items: flex-start;
 }
-.universal-card-body > * { width: 100%; box-sizing: border-box; }
+/* \u4EA4\u4E92\u63A7\u4EF6\u4E0D\u53C2\u4E0E\u300C\u5B50\u5143\u7D20\u6491\u6EE1\u300D\uFF1A\u6309\u94AE\u7684\u5BBD\u5EA6\u7531\u771F\u673A\u89C4\u5219\u51B3\u5B9A\uFF08\u89C1 .universal-card-button--auto\uFF09\uFF0C
+   \u82E5\u88AB\u8FD9\u6761 blanket \u89C4\u5219\u62C9\u5230 100%\uFF0C\u7A84\u5C4F/\u5BBD\u5C4F\u5206\u6863\u5C31\u5931\u6548\u4E86\u3002 */
+.universal-card-body > *:not(.universal-card-button) { width: 100%; box-sizing: border-box; }
 
 /* ---- markdown \u6BB5\u843D ---- */
 /* \u5BF9\u9F50\u7F51\u9875\u7248\uFF1Aline-height \u9ED8\u8BA4 1.6\uFF1B\u5177\u4F53\u5B57\u53F7/\u884C\u9AD8\u7531\u7EC4\u4EF6\u5185\u8054 style \u6309 text_size \u7ED9\u51FA */
@@ -1364,10 +1371,14 @@ var BASE_STYLES_CSS = `/**
   flex-shrink: 0; height: 1.2em; color: inherit;
 }
 .universal-card-button__icon .universal-card-icon { color: inherit; }
-/* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A\u2014\u2014body > * { width:100% }\u3001\u5217 flex stretch \u4F1A\u628A\u6309\u94AE\u6491\u6EE1\u6240\u5728\u884C/\u5217\u3002
-   \u4E0D\u518D\u5F3A\u5236 width:auto\uFF08\u90A3\u662F\u7F51\u9875\u7248\u89C2\u611F\uFF1B\u771F\u673A\u72EC\u7ACB\u6210\u884C\u7684\u6309\u94AE\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C\uFF09\u3002
-   width:"fill" \u663E\u5F0F\u6302 --block\uFF0C\u4E0E\u7F3A\u7701\u6491\u6EE1\u540C\u5BBD\uFF0C\u5E76\u4F9B margin calc \u8BC6\u522B\u3002 */
-.universal-card-button--block { width: 100%; }
+/* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A ud__button \u7684 isWide \u5206\u6863\uFF08\u771F\u673A\u6309\u300C\u5361\u7247\u5BB9\u5668\u5BBD\u5EA6 > 320px\u300D\u5224\u5B9A\uFF09\uFF1A
+   \u5BBD\u5C4F \u2192 \u81EA\u9002\u5E94\u5185\u5BB9\u5BBD\uFF08--auto\uFF09\uFF1B\u7A84\u5C4F\uFF08\u2264320px\uFF09\u2192 \u6491\u6EE1\u6574\u884C\uFF08\u4E0B\u65B9 @container \u89C4\u5219\u8986\u76D6\uFF09\u3002
+   text \u65CF\u4E0E width:"fill" \u6052\u5B9A\u6491\u6EE1\uFF08--block\uFF09\u3002
+   align-self:flex-start \u2014\u2014 \u7236\u7EA7\uFF08body/form/column\uFF09\u9ED8\u8BA4 align-items:stretch\uFF0C
+   \u53EA\u5199 width:auto \u4ECD\u4F1A\u88AB\u62C9\u4F38\uFF0C\u5FC5\u987B\u540C\u65F6\u963B\u6B62\u62C9\u4F38\u3002 */
+.universal-card-button { min-width: 58px; align-self: flex-start; }
+.universal-card-button--block { width: 100%; min-width: unset; }
+.universal-card-button--auto { width: auto; }
 
 /* \u2014\u2014 outlined \u63CF\u8FB9\u65CF \u2014\u2014 */
 /* default\uFF1A\u7070\u63CF\u8FB9 + \u767D\u5E95 + \u6DF1\u5B57\uFF08\u672A\u52A0\u53D8\u4F53\u7C7B\u7684\u88F8 .universal-card-button \u5DF2\u662F\u767D\u5E95\u6DF1\u5B57\uFF0C
@@ -1394,6 +1405,8 @@ var BASE_STYLES_CSS = `/**
 .universal-card-button--danger_text {
   border-color: transparent; background: transparent; padding: 4px 8px;
   justify-content: flex-start;
+  /* \u771F\u673A text \u65CF\u6309\u94AE\u4E0D\u8BBE\u6700\u5C0F\u5BBD\u5EA6 */
+  min-width: unset;
 }
 .universal-card-button--text { color: #1f2329; }
 .universal-card-button--primary_text { color: #1456f0; }
@@ -1429,6 +1442,8 @@ var BASE_STYLES_CSS = `/**
 .universal-card-overflow--static { display: inline-flex; }
 .universal-card-overflow__summary {
   list-style: none; cursor: pointer; display: inline-flex;
+  /* \u771F\u673A\u6298\u53E0\u6309\u94AE\u7684\u6700\u5C0F\u5BBD\u5EA6\u662F 32px\uFF08\u666E\u901A\u6309\u94AE\u662F 58px\uFF09 */
+  min-width: 32px;
 }
 /* \u53BB\u6389 <summary> \u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0 */
 .universal-card-overflow__summary::-webkit-details-marker { display: none; }
@@ -1450,8 +1465,9 @@ var BASE_STYLES_CSS = `/**
 .universal-card-overflow__item:hover { background: #f5f6f7; }
 
 /* ---- \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%; }
+/* row-gap 12px\uFF1A\u5BF9\u9F50\u771F\u673A schema 2.0 \u8868\u5355\u5BB9\u5668 */
+.universal-card-form { display: flex; flex-direction: column; row-gap: 12px; }
+.universal-card-form > *:not(.universal-card-button) { width: 100%; }
 /* 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 {
@@ -1459,6 +1475,13 @@ var BASE_STYLES_CSS = `/**
   font-family: inherit; font-size: 14px; line-height: 20px;
   background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
   color: #1f2329; width: 100%;
+  /* \u771F\u673A input \u9ED8\u8BA4 max-width:282px\uFF08width:"fill" \u65F6\u7531\u5185\u8054\u6837\u5F0F\u653E\u5F00\uFF09 */
+  max-width: 282px;
+}
+/* select type:"text"\uFF1A\u771F\u673A\u662F\u65E0\u8FB9\u6846\u3001\u5185\u5BB9\u81EA\u9002\u5E94\u5BBD\u7684\u4E0B\u62C9 */
+.universal-card-input--text {
+  border-color: transparent; background: transparent;
+  min-height: 26px; padding: 1px 7px; width: auto;
 }
 .universal-card-input--static {
   color: #8f959e; background: #f5f6f7;
@@ -2126,6 +2149,13 @@ var BASE_STYLES_CSS = `/**
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-100%); margin-bottom: 0; }
 }
+
+/* ---- \u7A84\u5C4F\u5206\u6863\uFF08\u771F\u673A isWide\uFF1A\u5361\u7247\u5BB9\u5668\u5BBD\u5EA6 > 320px \u4E3A\u5BBD\u5C4F\uFF09 ----
+   \u771F\u673A\u89C4\u5219\uFF1Adefault/primary/primary_filled/danger/danger_filled/laser \u6309\u94AE\u5728\u7A84\u5C4F\u6491\u6EE1\u6574\u884C\uFF0C
+   \u5BBD\u5C4F\u5219\u81EA\u9002\u5E94\u5185\u5BB9\u5BBD\u3002@container \u4E0D\u589E\u52A0\u9009\u62E9\u5668\u6743\u91CD\uFF0C\u9760\u6E90\u7801\u987A\u5E8F\u5728 --auto \u89C4\u5219\u4E4B\u540E\u8986\u76D6\u3002 */
+@container universal-card (max-width: 320px) {
+  .universal-card-button--auto { width: 100%; }
+}
 `;
 
 // src/icon-font.ts
@@ -5693,6 +5723,8 @@ function registerBuiltins() {
       ),
       subtitleVNode
     ];
+    const tplKey2 = p.template || "default";
+    const noTemplate = tplKey2 === "default" || tplKey2 === "disabled";
     return h(
       "div",
       {
@@ -5702,7 +5734,7 @@ function registerBuiltins() {
       h(
         "div",
         {
-          className: `${CLS}-header__bg`,
+          className: `${CLS}-header__bg${noTemplate ? ` ${CLS}-header__bg--no-template` : ""}`,
           // 内联 base64 高光纹理；图宽=header 宽使亮带居中；padding 透传 DSL（默认 12px）
           style: (() => {
             const s = { backgroundImage: `url(${HEADER_BG_LIGHT})` };
@@ -6235,12 +6267,26 @@ function registerBuiltins() {
     const url = actionUrl || resolveURL(p.url) || p.behaviors?.[0]?.default_url?.url;
     const wv = p.widthValue;
     const widthTok = p.width ?? wv?.value;
-    const block = widthTok === "fill";
-    const base = `${CLS}-button ${CLS}-button--${type}${block ? ` ${CLS}-button--block` : ""}`;
+    const isFill = widthTok === "fill";
+    const pxWidth = /^\d+(\.\d+)?px$/i.test(String(widthTok ?? "")) ? String(widthTok) : "";
+    const textFamily = type === "text" || type === "primary_text" || type === "danger_text";
+    const block = isFill || textFamily;
+    const auto = !block && !pxWidth;
+    const base = `${CLS}-button ${CLS}-button--${type}` + (block ? ` ${CLS}-button--block` : "") + (auto ? ` ${CLS}-button--auto` : "");
     const style = {};
-    if (p.margin) {
-      style.width = "100%";
-      applyOuterMargin(style, p.margin);
+    if (pxWidth) {
+      style.width = pxWidth;
+      if (p.margin) applyOuterMargin(style, p.margin);
+    } else if (p.margin) {
+      if (block) {
+        style.width = "100%";
+        applyOuterMargin(style, p.margin);
+      } else {
+        applyOuterMargin(style, p.margin);
+        const { left, right } = horizontalMarginPx(p.margin);
+        const inset = left + right;
+        if (inset > 0) style.maxWidth = `calc(100% - ${inset}px)`;
+      }
     }
     const styleProp = Object.keys(style).length ? { style } : {};
     const extra = p;
@@ -6321,15 +6367,53 @@ function registerBuiltins() {
     const name = typeof el.property?.name === "string" ? el.property.name : "";
     return h("form", { className, "data-feishu-form": name }, children);
   });
+  function fieldWidthStyle(p, kind) {
+    const wv = p.widthValue;
+    const raw = String(p.width ?? wv?.value ?? "");
+    const style = {};
+    if (/^\d+(\.\d+)?px$/i.test(raw)) {
+      style.width = raw;
+      style.maxWidth = "100%";
+      return style;
+    }
+    if (raw === "fill") {
+      style.width = "100%";
+      style.maxWidth = "none";
+      return style;
+    }
+    if (kind === "select") {
+      if (raw === "auto") {
+        style.width = "100%";
+        style.maxWidth = "100%";
+        return style;
+      }
+      if (p.type === "text") {
+        style.width = "auto";
+        style.maxWidth = "100%";
+        return style;
+      }
+      style.width = "282px";
+      style.maxWidth = "100%";
+      return style;
+    }
+    style.width = "100%";
+    style.maxWidth = "282px";
+    return style;
+  }
   function renderStaticField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
-    return h("div", { className: `${CLS}-input ${CLS}-input--static` }, ph);
+    const kind = isSelectTag(el.tag) ? "select" : "input";
+    const cls = `${CLS}-input ${CLS}-input--static` + (kind === "select" && p.type === "text" ? ` ${CLS}-input--text` : "");
+    return h("div", { className: cls, style: fieldWidthStyle(p, kind) }, ph);
   }
   function fieldText(value) {
     if (typeof value === "string") return value;
     return extractPlainText(value);
   }
+  function isSelectTag(tag) {
+    return tag === "select_static" || tag === "multi_select_static" || tag === "select_person" || tag === "multi_select_person";
+  }
   function renderInteractiveField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
@@ -6337,13 +6421,15 @@ function registerBuiltins() {
     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") {
+    if (isSelectTag(el.tag)) {
       const initial = p.initial_option ?? p.initialOption;
       const options = Array.isArray(p.options) ? p.options : [];
+      const cls = `${CLS}-input` + (p.type === "text" ? ` ${CLS}-input--text` : "");
       return h("select", {
-        className: `${CLS}-input`,
+        className: cls,
+        style: fieldWidthStyle(p, "select"),
         ...nameProp,
-        ...el.tag === "multi_select_static" ? { multiple: true } : {},
+        ...el.tag === "multi_select_static" || el.tag === "multi_select_person" ? { multiple: true } : {},
         ...actionProp
       }, [
         h("option", { value: "" }, ph),
@@ -6362,6 +6448,7 @@ function registerBuiltins() {
     const inputType = el.tag === "date_picker" ? "date" : el.tag === "picker_time" ? "time" : "text";
     return h("input", {
       className: `${CLS}-input`,
+      style: fieldWidthStyle(p, "input"),
       type: inputType,
       placeholder: ph,
       value: typeof def === "string" ? def : "",

package/dist/styles.css

@@ -26,6 +26,9 @@
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
+  /* 真机按「卡片容器宽度 > 320px」区分宽/窄屏按钮档位，这里用容器查询复刻 */
+  container-type: inline-size;
+  container-name: universal-card;
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* 正文 color:var(--O400) 等依赖这些变量；与飞书 :root light 色阶对齐 */
   --B50: #f0f4ff;
@@ -208,6 +211,8 @@
   /* 对齐飞书：max(100%, 605px) 140px，窄卡不把高光拉稀 */
   background-size: max(100%, 605px) 140px;
 }
+/* default/disabled 模板真机不设背景色（bg_color 为空串），此时 header 不留底部内边距 */
+.universal-card-header__bg--no-template { padding-bottom: 0; }
 /* 内容行：左侧图标 + 右侧标题区（对齐网页版 header__content = row） */
 .universal-card-header__content {
   width: 100%;
@@ -274,7 +279,9 @@
   column-gap: 12px;
   align-items: flex-start;
 }
-.universal-card-body > * { width: 100%; box-sizing: border-box; }
+/* 交互控件不参与「子元素撑满」：按钮的宽度由真机规则决定（见 .universal-card-button--auto），
+   若被这条 blanket 规则拉到 100%，窄屏/宽屏分档就失效了。 */
+.universal-card-body > *:not(.universal-card-button) { width: 100%; box-sizing: border-box; }
 
 /* ---- markdown 段落 ---- */
 /* 对齐网页版：line-height 默认 1.6；具体字号/行高由组件内联 style 按 text_size 给出 */
@@ -394,10 +401,14 @@
   flex-shrink: 0; height: 1.2em; color: inherit;
 }
 .universal-card-button__icon .universal-card-icon { color: inherit; }
-/* 宽度：对齐真机——body > * { width:100% }、列 flex stretch 会把按钮撑满所在行/列。
-   不再强制 width:auto（那是网页版观感；真机独立成行的按钮默认占满整行）。
-   width:"fill" 显式挂 --block，与缺省撑满同宽，并供 margin calc 识别。 */
-.universal-card-button--block { width: 100%; }
+/* 宽度：对齐真机 ud__button 的 isWide 分档（真机按「卡片容器宽度 > 320px」判定）：
+   宽屏 → 自适应内容宽（--auto）；窄屏（≤320px）→ 撑满整行（下方 @container 规则覆盖）。
+   text 族与 width:"fill" 恒定撑满（--block）。
+   align-self:flex-start —— 父级（body/form/column）默认 align-items:stretch，
+   只写 width:auto 仍会被拉伸，必须同时阻止拉伸。 */
+.universal-card-button { min-width: 58px; align-self: flex-start; }
+.universal-card-button--block { width: 100%; min-width: unset; }
+.universal-card-button--auto { width: auto; }
 
 /* —— outlined 描边族 —— */
 /* default：灰描边 + 白底 + 深字（未加变体类的裸 .universal-card-button 已是白底深字，
@@ -424,6 +435,8 @@
 .universal-card-button--danger_text {
   border-color: transparent; background: transparent; padding: 4px 8px;
   justify-content: flex-start;
+  /* 真机 text 族按钮不设最小宽度 */
+  min-width: unset;
 }
 .universal-card-button--text { color: #1f2329; }
 .universal-card-button--primary_text { color: #1456f0; }
@@ -459,6 +472,8 @@
 .universal-card-overflow--static { display: inline-flex; }
 .universal-card-overflow__summary {
   list-style: none; cursor: pointer; display: inline-flex;
+  /* 真机折叠按钮的最小宽度是 32px（普通按钮是 58px） */
+  min-width: 32px;
 }
 /* 去掉 <summary> 的浏览器默认三角标记 */
 .universal-card-overflow__summary::-webkit-details-marker { display: none; }
@@ -480,8 +495,9 @@
 .universal-card-overflow__item:hover { background: #f5f6f7; }
 
 /* ---- 表单（预览：仅透传，无表单语义） ---- */
-.universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
-.universal-card-form > * { width: 100%; }
+/* row-gap 12px：对齐真机 schema 2.0 表单容器 */
+.universal-card-form { display: flex; flex-direction: column; row-gap: 12px; }
+.universal-card-form > *:not(.universal-card-button) { width: 100%; }
 /* input / select：静态预览是只读框；interactive 去掉 --static，成为可输入控件 */
 .universal-card-input,
 .universal-card-input--static {
@@ -489,6 +505,13 @@
   font-family: inherit; font-size: 14px; line-height: 20px;
   background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
   color: #1f2329; width: 100%;
+  /* 真机 input 默认 max-width:282px（width:"fill" 时由内联样式放开） */
+  max-width: 282px;
+}
+/* select type:"text"：真机是无边框、内容自适应宽的下拉 */
+.universal-card-input--text {
+  border-color: transparent; background: transparent;
+  min-height: 26px; padding: 1px 7px; width: auto;
 }
 .universal-card-input--static {
   color: #8f959e; background: #f5f6f7;
@@ -1156,3 +1179,10 @@
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-100%); margin-bottom: 0; }
 }
+
+/* ---- 窄屏分档（真机 isWide：卡片容器宽度 > 320px 为宽屏） ----
+   真机规则：default/primary/primary_filled/danger/danger_filled/laser 按钮在窄屏撑满整行，
+   宽屏则自适应内容宽。@container 不增加选择器权重，靠源码顺序在 --auto 规则之后覆盖。 */
+@container universal-card (max-width: 320px) {
+  .universal-card-button--auto { width: 100%; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
   "type": "module",
   "main": "./dist/index.cjs",