@open-feishu-card/renderer 0.2.27 → 0.2.29

package/dist/index.cjs

@@ -392,16 +392,36 @@ var TABLE_HEAD_BG = {
   default: "transparent"
 };
 var CHART_PALETTE = [
-  "#1664FF",
-  "#1AC6FF",
-  "#FF8A00",
-  "#3CC780",
-  "#7442D4",
-  "#FFC400",
-  "#304D77",
-  "#B48DEB",
-  "#009488",
-  "#FF7DDA"
+  "#4e83fd",
+  "#50cefb",
+  "#935af6",
+  "#fad355",
+  "#f76964",
+  "#ffa53d",
+  "#82a7fc",
+  "#7edafb",
+  "#ad82f7",
+  "#f7dc82",
+  "#f98e8b",
+  "#ffba6b",
+  "#3370ff",
+  "#14c0ff",
+  "#7f3bf5",
+  "#ffc60a",
+  "#f54a45",
+  "#ff8800",
+  "#bacefd",
+  "#b1e8fc",
+  "#cdb2fa",
+  "#f8e6ab",
+  "#fbbfbc",
+  "#fed4a4",
+  "#245bdb",
+  "#049fd7",
+  "#6425d0",
+  "#dc9b04",
+  "#d83931",
+  "#de7802"
 ];
 var CHART_DEFAULT_ASPECT_RATIO = "16:9";
 var CHART_MIN_HEIGHT = 150;
@@ -686,6 +706,25 @@ function personAvatarSrc(person, ctx) {
   const suffix = ctx.options.avatarURLSuffix ?? PERSON_AVATAR_SUFFIX;
   return base + person.avatar_key + suffix;
 }
+var HORIZONTAL_SPACING_PX = { small: 4, default: 8, large: 12 };
+var VERTICAL_SPACING_PX = { default: 8, medium: 12, large: 16 };
+function namedSpacingToPx(v, map) {
+  const named = map[v];
+  if (named != null) return named;
+  const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
+  if (m) return Number(m[1]);
+  return map.default ?? 8;
+}
+function horizontalSpacingToPx(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") return namedSpacingToPx(v, HORIZONTAL_SPACING_PX);
+  return HORIZONTAL_SPACING_PX.default;
+}
+function verticalSpacingToPx(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") return namedSpacingToPx(v, VERTICAL_SPACING_PX);
+  return VERTICAL_SPACING_PX.default;
+}
 function spacingToPx(v) {
   if (typeof v === "number") return v;
   if (typeof v === "string") {
@@ -4895,7 +4934,7 @@ function parseInline(text) {
         if (attrs.show_name != null) property.showName = attrs.show_name !== "false";
         if (attrs.show_avatar != null) property.showAvatar = attrs.show_avatar !== "false";
         if (attrs.size) property.size = attrs.size;
-        if (attrs.style === "capsule") property.pillShaped = true;
+        if (attrs.style) property.style = attrs.style;
         out.push({ tag: "person_v1", property });
         i += m[0].length;
         continue;
@@ -5496,8 +5535,9 @@ function registerBuiltins() {
     const style = {};
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
+    if (!pad && ctx.bodyPaddingTop != null) style.paddingTop = ctx.bodyPaddingTop + "px";
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
-    if (vGap != null) style.rowGap = spacingToPx(vGap) + "px";
+    if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
     const props = { className: `${CLS}-body` };
     if (Object.keys(style).length) props.style = style;
     return h("div", props, renderElements(getChildElements(el), ctx));
@@ -5507,7 +5547,8 @@ function registerBuiltins() {
     const tplKey = p.template || "default";
     const tpl = HEADER_TEMPLATE[tplKey] || HEADER_TEMPLATE.default;
     const tags = p.text_tag_list || p.textTagList;
-    const tagVNodes = Array.isArray(tags) && tags.length ? renderElements(tags, ctx) : [];
+    const tagCtx = { ...ctx, textMetrics: { fontSize: 16, lineHeight: 24 } };
+    const tagVNodes = Array.isArray(tags) && tags.length ? renderElements(tags.slice(0, 3), tagCtx) : [];
     const iconRaw = p.udIcon || p.icon;
     let iconVNode = null;
     if (iconRaw && iconRaw.tag) {
@@ -5517,6 +5558,21 @@ function registerBuiltins() {
       const inner = renderIcon(iconEl, ctx);
       if (inner) iconVNode = h("div", { className: `${CLS}-header__icon` }, inner);
     }
+    if (!iconVNode) {
+      const avatarEl = p.avatar;
+      const avatarSrc = avatarEl && avatarEl.property ? resolveImageSrc(avatarEl.property, ctx) : null;
+      if (avatarSrc) {
+        iconVNode = h(
+          "div",
+          { className: `${CLS}-header__icon` },
+          h("img", {
+            src: avatarSrc,
+            alt: "",
+            style: { width: "16px", height: "16px", borderRadius: "4px", objectFit: "cover" }
+          })
+        );
+      }
+    }
     const titleVNode = renderHeaderTextLeaf(p.title, ctx, `${CLS}-header__text-title`) ?? h("div", { className: `${CLS}-header__text-title` });
     const subtitleVNode = renderHeaderTextLeaf(p.subtitle, ctx, `${CLS}-header__text-subtitle`);
     const textChildren = [
@@ -5555,7 +5611,7 @@ function registerBuiltins() {
       )
     );
   });
-  registerComponent("markdown", (el, ctx) => {
+  function MarkdownComponent(el, ctx) {
     const p = el.property || {};
     const style = { ...alignToStyle(p.textAlign), ...textStyleToStyle(p.textStyle) };
     applyOuterMargin(style, p.margin);
@@ -5569,12 +5625,28 @@ function registerBuiltins() {
       style.lineHeight = lineHeight + "px";
     }
     const childCtx = { ...ctx, textMetrics: { fontSize, lineHeight } };
+    const linesStyle = lineClampStyle(p.lines ?? p.textLines);
     return h(
       "div",
       { className: `${CLS}-markdown`, style },
-      h("div", { className: `${CLS}-markdown__children` }, renderElements(p.elements, childCtx))
+      h("div", {
+        className: `${CLS}-markdown__children`,
+        style: Object.keys(linesStyle).length ? linesStyle : void 0
+      }, renderElements(p.elements, childCtx))
     );
-  });
+  }
+  registerComponent("markdown", MarkdownComponent);
+  registerComponent("markdown_v1", MarkdownComponent);
+  function lineClampStyle(lines) {
+    const n = Number(lines);
+    if (!Number.isFinite(n) || n <= 0) return {};
+    return {
+      display: "-webkit-box",
+      WebkitLineClamp: String(Math.floor(n)),
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    };
+  }
   registerComponent("plain_text", (el) => {
     const p = el.property || {};
     const mods = textStyleToModifiers(p.textStyle);
@@ -5583,6 +5655,7 @@ function registerBuiltins() {
     delete style.fontWeight;
     delete style.fontStyle;
     delete style.textDecoration;
+    Object.assign(style, lineClampStyle(p.lines));
     return h("span", { className, style }, p.content != null ? String(p.content) : "");
   });
   registerComponent("br", () => h("br", {}));
@@ -5607,15 +5680,15 @@ function registerBuiltins() {
   registerComponent("column_set", (el, ctx) => {
     const p = el.property || {};
     const gapRaw = p.horizontalSpacingValue?.value ?? p.horizontal_spacing;
-    const gap = gapRaw != null ? spacingToPx(gapRaw) : 8;
+    const gap = gapRaw != null ? horizontalSpacingToPx(gapRaw) : horizontalSpacingToPx("default");
     const flexMode = p.flexMode || p.flex_mode;
     const hAlign = p.horizontalAlign || p.horizontal_align;
     const style = {
       display: "flex",
       flexWrap: flexMode === "flow" || flexMode === "wrap" ? "wrap" : "nowrap",
-      columnGap: gap + "px",
       rowGap: "8px",
-      alignItems: "stretch"
+      alignItems: "stretch",
+      columnGap: gap + "px"
     };
     if (hAlign) {
       style.justifyContent = { left: "flex-start", center: "center", right: "flex-end" }[hAlign] || "flex-start";
@@ -5634,7 +5707,8 @@ function registerBuiltins() {
       style.margin = "0";
       style.padding = "0";
     }
-    return h("div", { className: cls, style }, renderElements(p.columns, ctx));
+    const childCtx = { ...ctx, columnSet: { flexMode, gap } };
+    return h("div", { className: cls, style }, renderElements(p.columns, childCtx));
   });
   function isStateHost(el) {
     if (el.id === "card_state") return true;
@@ -5669,12 +5743,30 @@ function registerBuiltins() {
     } else {
       style.flexGrow = String(p.weight || 1);
     }
+    const cs = ctx.columnSet;
+    if (cs && cs.flexMode) {
+      const fm = String(cs.flexMode).toLowerCase();
+      const g = cs.gap || 0;
+      if (fm === "stretch") {
+        style.width = "100%";
+        style.flexGrow = "0";
+        style.flexBasis = "auto";
+      } else if (fm === "bisect") {
+        style.width = `calc(50% - ${g / 2}px)`;
+        style.flexGrow = "0";
+        style.flexBasis = "auto";
+      } else if (fm === "trisect") {
+        style.width = `calc(33.33% - ${2 * g / 3}px)`;
+        style.flexGrow = "0";
+        style.flexBasis = "auto";
+      }
+    }
     const vAlign = p.verticalAlign || p.vertical_align;
     if (vAlign) {
       style.justifyContent = { top: "flex-start", center: "center", bottom: "flex-end" }[vAlign] || "flex-start";
     }
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
-    style.rowGap = (vGap != null ? spacingToPx(vGap) : 8) + "px";
+    style.rowGap = (vGap != null ? verticalSpacingToPx(vGap) : 8) + "px";
     const bg = propertyBackgroundColor(p);
     if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
@@ -5882,7 +5974,7 @@ function registerBuiltins() {
     const radius = resolveCornerRadius(p);
     if (radius != null) style.borderRadius = radius;
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
-    if (vGap != null) style.rowGap = spacingToPx(vGap) + "px";
+    if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
     const icWv = p.widthValue;
     const icHv = p.heightValue;
     const w = resolveDimensionPx(p.width, icWv);
@@ -6195,6 +6287,93 @@ function registerBuiltins() {
     const style = textTagStyle(p.backgroundColor || c.bg, c.text);
     return h("span", { className: `${CLS}-text-tag ${CLS}-text-tag--${colorName}`, style }, extractText(p.text));
   });
+  registerComponent("local_datetime", (el) => {
+    const p = el.property || {};
+    let ms = Number(p.milliseconds ?? p.millisecond ?? p.value ?? 0);
+    if (!Number.isFinite(ms) || ms === 0) return null;
+    if (ms < 1e12) ms = ms * 1e3;
+    const d = new Date(ms);
+    if (Number.isNaN(d.getTime())) return null;
+    const ft = String(p.formatType || p.format_type || "").toLowerCase();
+    const opts = ft.includes("time") && !ft.includes("date") ? { hour: "2-digit", minute: "2-digit", hour12: false } : ft.includes("date") && !ft.includes("time") ? { year: "numeric", month: "2-digit", day: "2-digit" } : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false };
+    let text;
+    try {
+      text = new Intl.DateTimeFormat("zh-CN", opts).format(d);
+    } catch {
+      text = d.toLocaleString();
+    }
+    return h("span", { className: `${CLS}-local-datetime` }, text);
+  });
+  registerComponent("number_tag", (el, ctx) => {
+    const p = el.property || {};
+    const raw = extractText(p.text);
+    const text = raw != null && raw !== "" ? raw : p.content != null ? String(p.content) : "";
+    if (text === "") return null;
+    const parentFs = ctx.textMetrics?.fontSize ?? BASE_FONT_SIZE;
+    const fs = Math.max(11, Math.round(parentFs * 0.85));
+    const c = TAG_COLOR.blue;
+    const style = {
+      backgroundColor: c.bg,
+      color: c.text,
+      fontSize: fs + "px",
+      lineHeight: "1.4",
+      padding: "0 4px",
+      borderRadius: "4px",
+      display: "inline-flex",
+      alignItems: "center",
+      whiteSpace: "nowrap",
+      margin: "0 2px",
+      verticalAlign: "baseline"
+    };
+    return h("span", { className: `${CLS}-number-tag`, style }, text);
+  });
+  registerComponent("vote-card-select", (el) => {
+    const p = el.property || {};
+    const text = extractText(p.text) || (p.content != null ? String(p.content) : "");
+    if (!text) return null;
+    const voted = p.voted === true || p.isVoted === true || p.selected === true;
+    const count = Number(p.count ?? p.voteCount ?? 0) || 0;
+    const total = Number(p.total ?? p.totalCount ?? 0) || 0;
+    let percent = Number(p.percent ?? p.ratio ?? NaN);
+    if (!Number.isFinite(percent)) {
+      percent = total > 0 ? Math.round(count / total * 1e3) / 10 : 0;
+    }
+    const rootCls = `${CLS}-vote-card-select` + (voted ? ` ${CLS}-vote-card-select--voted` : "");
+    const kids = [
+      h("div", { className: `${CLS}-vote-card-select-content` }, text)
+    ];
+    if (voted) {
+      kids.push(
+        h("div", {
+          className: `${CLS}-vote-card-select-result`,
+          style: { fontSize: "12px", color: "#646a73", marginTop: "2px" }
+        }, `${count} \u7968 ${percent}%`),
+        h(
+          "div",
+          {
+            className: `${CLS}-vote-card-select-progress`,
+            style: {
+              height: "4px",
+              borderRadius: "2px",
+              background: "#f2f3f5",
+              marginTop: "4px",
+              overflow: "hidden"
+            }
+          },
+          h("div", {
+            className: `${CLS}-vote-card-select-progress-bar`,
+            style: {
+              width: Math.min(100, Math.max(0, percent)) + "%",
+              height: "100%",
+              background: "#4e83fd",
+              borderRadius: "2px"
+            }
+          })
+        )
+      );
+    }
+    return h("div", { className: rootCls, style: { padding: "8px 0" } }, kids);
+  });
   const EMOJI_FONT_SIZE = Number((BASE_FONT_SIZE * BASE_LINE_HEIGHT).toFixed(2));
   registerComponent("emoji", (el, ctx) => {
     const p = el.property || {};
@@ -6844,7 +7023,12 @@ function buildCardVNode(card, options) {
   const parts = [];
   if (jc.header) parts.push(renderElement(jc.header, ctx));
   const bodyEl = jc.body || jc.newBody;
-  if (bodyEl) parts.push(renderElement(bodyEl.tag ? bodyEl : { ...bodyEl, tag: "body" }, ctx));
+  if (bodyEl) {
+    const headerTpl = jc.header?.property?.template;
+    const compactHeader = !!jc.header && (!headerTpl || headerTpl === "default" || headerTpl === "disabled");
+    const bodyCtx = compactHeader ? { ...ctx, bodyPaddingTop: 8 } : ctx;
+    parts.push(renderElement(bodyEl.tag ? bodyEl : { ...bodyEl, tag: "body" }, bodyCtx));
+  }
   return h("div", {
     className: `${CLS}-root ${CLS}`,
     style: { fontSize: BASE_FONT_SIZE + "px", lineHeight: String(BASE_LINE_HEIGHT) }

package/dist/index.d.cts

@@ -149,13 +149,14 @@ interface ElementProperty {
     emoji_type?: string;
     /** 图标名，形如 "warning_outlined"，拼成 class="ud-icon_<token>" */
     token?: string;
-    style?: {
+    style?: string | {
         color?: string;
         size?: string;
         [key: string]: unknown;
     };
     icon?: CardElement;
     udIcon?: CardElement;
+    avatar?: CardElement;
     /** VChart 规格对象（原样透传给 VChart 构造） */
     chart_spec?: Record<string, unknown>;
     chartSpec?: Record<string, unknown>;
@@ -309,6 +310,15 @@ interface RenderOptions {
      * 交互预览。默认关闭：回调按钮是不可点的 span，输入框是静态占位。
      * 打开后，回调按钮变成带 data-feishu-action 的 button，输入框/下拉框变成真实表单控件。
      * 宿主监听这些控件，自己把点击发回卡片服务。
+     *
+     * #23/D13 —— 宿主上报契约（静态渲染器不替宿主发请求）：
+     * 飞书客户端点击后组装 event_type="card.action.client_msg" 事件，并经
+     * im.v2.PutActionRequest（PUT_ACTION_V2，service id 2199）上报，信封必须自带：
+     *   - messageId / actionId / traceId（宿主从消息上下文取）
+     *   - form_value（表单控件当前值，key=字段 name）
+     *   - client_channel / value（来自 data-feishu-action 上的 action 原文）
+     * 若宿主直接复用 data-feishu-action 里的 action 原文上报，会缺上述信封字段，
+     * 须自行补齐 PUT_ACTION_V2 信封后再发。
      */
     interactive?: boolean;
 }
@@ -425,6 +435,19 @@ interface RenderContext {
         fontSize: number;
         lineHeight: number;
     };
+    /**
+     * column_set 注入给子 column 的分栏模式（#17/D7）：flexMode 为 stretch/bisect/trisect 时，
+     * 子列无视自身 weight，按客户端同款 calc 宽度（用实际 columnGap）。
+     */
+    columnSet?: {
+        flexMode?: string;
+        gap: number;
+    };
+    /**
+     * body 顶部 padding（#18/D8）：header 存在且模板为 default/disabled/空时，
+     * 客户端把 body paddingTop 从 12 改为 8。由 index.ts 在渲染 body 前注入。
+     */
+    bodyPaddingTop?: number;
 }
 /** 组件渲染函数 */
 type ComponentFn = (el: CardElement, ctx: RenderContext) => VNode | null;
@@ -577,8 +600,9 @@ declare function feishuAudioHydrateJs(): string;
  */
 
 /**
- * 图表（chart）默认序列色板。取自 VChart 官方默认主题的分类色序列，
- * 与网页版飞书卡片图表观感一致。hydrate 时若 spec 未显式给 color，注入此序列。
+ * 图表（chart）默认序列色板。#21/D11：对齐飞书卡片图表 VChart light 主题
+ * brand.light.normal 的 30 色序列（首色 #4e83fd），而非 VChart 通用默认。
+ * hydrate 时若 spec 未显式给 color，注入此序列。
  */
 declare const CHART_PALETTE: string[];
 

package/dist/index.d.ts

@@ -149,13 +149,14 @@ interface ElementProperty {
     emoji_type?: string;
     /** 图标名，形如 "warning_outlined"，拼成 class="ud-icon_<token>" */
     token?: string;
-    style?: {
+    style?: string | {
         color?: string;
         size?: string;
         [key: string]: unknown;
     };
     icon?: CardElement;
     udIcon?: CardElement;
+    avatar?: CardElement;
     /** VChart 规格对象（原样透传给 VChart 构造） */
     chart_spec?: Record<string, unknown>;
     chartSpec?: Record<string, unknown>;
@@ -309,6 +310,15 @@ interface RenderOptions {
      * 交互预览。默认关闭：回调按钮是不可点的 span，输入框是静态占位。
      * 打开后，回调按钮变成带 data-feishu-action 的 button，输入框/下拉框变成真实表单控件。
      * 宿主监听这些控件，自己把点击发回卡片服务。
+     *
+     * #23/D13 —— 宿主上报契约（静态渲染器不替宿主发请求）：
+     * 飞书客户端点击后组装 event_type="card.action.client_msg" 事件，并经
+     * im.v2.PutActionRequest（PUT_ACTION_V2，service id 2199）上报，信封必须自带：
+     *   - messageId / actionId / traceId（宿主从消息上下文取）
+     *   - form_value（表单控件当前值，key=字段 name）
+     *   - client_channel / value（来自 data-feishu-action 上的 action 原文）
+     * 若宿主直接复用 data-feishu-action 里的 action 原文上报，会缺上述信封字段，
+     * 须自行补齐 PUT_ACTION_V2 信封后再发。
      */
     interactive?: boolean;
 }
@@ -425,6 +435,19 @@ interface RenderContext {
         fontSize: number;
         lineHeight: number;
     };
+    /**
+     * column_set 注入给子 column 的分栏模式（#17/D7）：flexMode 为 stretch/bisect/trisect 时，
+     * 子列无视自身 weight，按客户端同款 calc 宽度（用实际 columnGap）。
+     */
+    columnSet?: {
+        flexMode?: string;
+        gap: number;
+    };
+    /**
+     * body 顶部 padding（#18/D8）：header 存在且模板为 default/disabled/空时，
+     * 客户端把 body paddingTop 从 12 改为 8。由 index.ts 在渲染 body 前注入。
+     */
+    bodyPaddingTop?: number;
 }
 /** 组件渲染函数 */
 type ComponentFn = (el: CardElement, ctx: RenderContext) => VNode | null;
@@ -577,8 +600,9 @@ declare function feishuAudioHydrateJs(): string;
  */
 
 /**
- * 图表（chart）默认序列色板。取自 VChart 官方默认主题的分类色序列，
- * 与网页版飞书卡片图表观感一致。hydrate 时若 spec 未显式给 color，注入此序列。
+ * 图表（chart）默认序列色板。#21/D11：对齐飞书卡片图表 VChart light 主题
+ * brand.light.normal 的 30 色序列（首色 #4e83fd），而非 VChart 通用默认。
+ * hydrate 时若 spec 未显式给 color，注入此序列。
  */
 declare const CHART_PALETTE: string[];
 

package/dist/index.js

@@ -391,16 +391,36 @@ var TABLE_HEAD_BG = {
   default: "transparent"
 };
 var CHART_PALETTE = [
-  "#1664FF",
-  "#1AC6FF",
-  "#FF8A00",
-  "#3CC780",
-  "#7442D4",
-  "#FFC400",
-  "#304D77",
-  "#B48DEB",
-  "#009488",
-  "#FF7DDA"
+  "#4e83fd",
+  "#50cefb",
+  "#935af6",
+  "#fad355",
+  "#f76964",
+  "#ffa53d",
+  "#82a7fc",
+  "#7edafb",
+  "#ad82f7",
+  "#f7dc82",
+  "#f98e8b",
+  "#ffba6b",
+  "#3370ff",
+  "#14c0ff",
+  "#7f3bf5",
+  "#ffc60a",
+  "#f54a45",
+  "#ff8800",
+  "#bacefd",
+  "#b1e8fc",
+  "#cdb2fa",
+  "#f8e6ab",
+  "#fbbfbc",
+  "#fed4a4",
+  "#245bdb",
+  "#049fd7",
+  "#6425d0",
+  "#dc9b04",
+  "#d83931",
+  "#de7802"
 ];
 var CHART_DEFAULT_ASPECT_RATIO = "16:9";
 var CHART_MIN_HEIGHT = 150;
@@ -685,6 +705,25 @@ function personAvatarSrc(person, ctx) {
   const suffix = ctx.options.avatarURLSuffix ?? PERSON_AVATAR_SUFFIX;
   return base + person.avatar_key + suffix;
 }
+var HORIZONTAL_SPACING_PX = { small: 4, default: 8, large: 12 };
+var VERTICAL_SPACING_PX = { default: 8, medium: 12, large: 16 };
+function namedSpacingToPx(v, map) {
+  const named = map[v];
+  if (named != null) return named;
+  const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
+  if (m) return Number(m[1]);
+  return map.default ?? 8;
+}
+function horizontalSpacingToPx(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") return namedSpacingToPx(v, HORIZONTAL_SPACING_PX);
+  return HORIZONTAL_SPACING_PX.default;
+}
+function verticalSpacingToPx(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") return namedSpacingToPx(v, VERTICAL_SPACING_PX);
+  return VERTICAL_SPACING_PX.default;
+}
 function spacingToPx(v) {
   if (typeof v === "number") return v;
   if (typeof v === "string") {
@@ -4894,7 +4933,7 @@ function parseInline(text) {
         if (attrs.show_name != null) property.showName = attrs.show_name !== "false";
         if (attrs.show_avatar != null) property.showAvatar = attrs.show_avatar !== "false";
         if (attrs.size) property.size = attrs.size;
-        if (attrs.style === "capsule") property.pillShaped = true;
+        if (attrs.style) property.style = attrs.style;
         out.push({ tag: "person_v1", property });
         i += m[0].length;
         continue;
@@ -5495,8 +5534,9 @@ function registerBuiltins() {
     const style = {};
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
+    if (!pad && ctx.bodyPaddingTop != null) style.paddingTop = ctx.bodyPaddingTop + "px";
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
-    if (vGap != null) style.rowGap = spacingToPx(vGap) + "px";
+    if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
     const props = { className: `${CLS}-body` };
     if (Object.keys(style).length) props.style = style;
     return h("div", props, renderElements(getChildElements(el), ctx));
@@ -5506,7 +5546,8 @@ function registerBuiltins() {
     const tplKey = p.template || "default";
     const tpl = HEADER_TEMPLATE[tplKey] || HEADER_TEMPLATE.default;
     const tags = p.text_tag_list || p.textTagList;
-    const tagVNodes = Array.isArray(tags) && tags.length ? renderElements(tags, ctx) : [];
+    const tagCtx = { ...ctx, textMetrics: { fontSize: 16, lineHeight: 24 } };
+    const tagVNodes = Array.isArray(tags) && tags.length ? renderElements(tags.slice(0, 3), tagCtx) : [];
     const iconRaw = p.udIcon || p.icon;
     let iconVNode = null;
     if (iconRaw && iconRaw.tag) {
@@ -5516,6 +5557,21 @@ function registerBuiltins() {
       const inner = renderIcon(iconEl, ctx);
       if (inner) iconVNode = h("div", { className: `${CLS}-header__icon` }, inner);
     }
+    if (!iconVNode) {
+      const avatarEl = p.avatar;
+      const avatarSrc = avatarEl && avatarEl.property ? resolveImageSrc(avatarEl.property, ctx) : null;
+      if (avatarSrc) {
+        iconVNode = h(
+          "div",
+          { className: `${CLS}-header__icon` },
+          h("img", {
+            src: avatarSrc,
+            alt: "",
+            style: { width: "16px", height: "16px", borderRadius: "4px", objectFit: "cover" }
+          })
+        );
+      }
+    }
     const titleVNode = renderHeaderTextLeaf(p.title, ctx, `${CLS}-header__text-title`) ?? h("div", { className: `${CLS}-header__text-title` });
     const subtitleVNode = renderHeaderTextLeaf(p.subtitle, ctx, `${CLS}-header__text-subtitle`);
     const textChildren = [
@@ -5554,7 +5610,7 @@ function registerBuiltins() {
       )
     );
   });
-  registerComponent("markdown", (el, ctx) => {
+  function MarkdownComponent(el, ctx) {
     const p = el.property || {};
     const style = { ...alignToStyle(p.textAlign), ...textStyleToStyle(p.textStyle) };
     applyOuterMargin(style, p.margin);
@@ -5568,12 +5624,28 @@ function registerBuiltins() {
       style.lineHeight = lineHeight + "px";
     }
     const childCtx = { ...ctx, textMetrics: { fontSize, lineHeight } };
+    const linesStyle = lineClampStyle(p.lines ?? p.textLines);
     return h(
       "div",
       { className: `${CLS}-markdown`, style },
-      h("div", { className: `${CLS}-markdown__children` }, renderElements(p.elements, childCtx))
+      h("div", {
+        className: `${CLS}-markdown__children`,
+        style: Object.keys(linesStyle).length ? linesStyle : void 0
+      }, renderElements(p.elements, childCtx))
     );
-  });
+  }
+  registerComponent("markdown", MarkdownComponent);
+  registerComponent("markdown_v1", MarkdownComponent);
+  function lineClampStyle(lines) {
+    const n = Number(lines);
+    if (!Number.isFinite(n) || n <= 0) return {};
+    return {
+      display: "-webkit-box",
+      WebkitLineClamp: String(Math.floor(n)),
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    };
+  }
   registerComponent("plain_text", (el) => {
     const p = el.property || {};
     const mods = textStyleToModifiers(p.textStyle);
@@ -5582,6 +5654,7 @@ function registerBuiltins() {
     delete style.fontWeight;
     delete style.fontStyle;
     delete style.textDecoration;
+    Object.assign(style, lineClampStyle(p.lines));
     return h("span", { className, style }, p.content != null ? String(p.content) : "");
   });
   registerComponent("br", () => h("br", {}));
@@ -5606,15 +5679,15 @@ function registerBuiltins() {
   registerComponent("column_set", (el, ctx) => {
     const p = el.property || {};
     const gapRaw = p.horizontalSpacingValue?.value ?? p.horizontal_spacing;
-    const gap = gapRaw != null ? spacingToPx(gapRaw) : 8;
+    const gap = gapRaw != null ? horizontalSpacingToPx(gapRaw) : horizontalSpacingToPx("default");
     const flexMode = p.flexMode || p.flex_mode;
     const hAlign = p.horizontalAlign || p.horizontal_align;
     const style = {
       display: "flex",
       flexWrap: flexMode === "flow" || flexMode === "wrap" ? "wrap" : "nowrap",
-      columnGap: gap + "px",
       rowGap: "8px",
-      alignItems: "stretch"
+      alignItems: "stretch",
+      columnGap: gap + "px"
     };
     if (hAlign) {
       style.justifyContent = { left: "flex-start", center: "center", right: "flex-end" }[hAlign] || "flex-start";
@@ -5633,7 +5706,8 @@ function registerBuiltins() {
       style.margin = "0";
       style.padding = "0";
     }
-    return h("div", { className: cls, style }, renderElements(p.columns, ctx));
+    const childCtx = { ...ctx, columnSet: { flexMode, gap } };
+    return h("div", { className: cls, style }, renderElements(p.columns, childCtx));
   });
   function isStateHost(el) {
     if (el.id === "card_state") return true;
@@ -5668,12 +5742,30 @@ function registerBuiltins() {
     } else {
       style.flexGrow = String(p.weight || 1);
     }
+    const cs = ctx.columnSet;
+    if (cs && cs.flexMode) {
+      const fm = String(cs.flexMode).toLowerCase();
+      const g = cs.gap || 0;
+      if (fm === "stretch") {
+        style.width = "100%";
+        style.flexGrow = "0";
+        style.flexBasis = "auto";
+      } else if (fm === "bisect") {
+        style.width = `calc(50% - ${g / 2}px)`;
+        style.flexGrow = "0";
+        style.flexBasis = "auto";
+      } else if (fm === "trisect") {
+        style.width = `calc(33.33% - ${2 * g / 3}px)`;
+        style.flexGrow = "0";
+        style.flexBasis = "auto";
+      }
+    }
     const vAlign = p.verticalAlign || p.vertical_align;
     if (vAlign) {
       style.justifyContent = { top: "flex-start", center: "center", bottom: "flex-end" }[vAlign] || "flex-start";
     }
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
-    style.rowGap = (vGap != null ? spacingToPx(vGap) : 8) + "px";
+    style.rowGap = (vGap != null ? verticalSpacingToPx(vGap) : 8) + "px";
     const bg = propertyBackgroundColor(p);
     if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
@@ -5881,7 +5973,7 @@ function registerBuiltins() {
     const radius = resolveCornerRadius(p);
     if (radius != null) style.borderRadius = radius;
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
-    if (vGap != null) style.rowGap = spacingToPx(vGap) + "px";
+    if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
     const icWv = p.widthValue;
     const icHv = p.heightValue;
     const w = resolveDimensionPx(p.width, icWv);
@@ -6194,6 +6286,93 @@ function registerBuiltins() {
     const style = textTagStyle(p.backgroundColor || c.bg, c.text);
     return h("span", { className: `${CLS}-text-tag ${CLS}-text-tag--${colorName}`, style }, extractText(p.text));
   });
+  registerComponent("local_datetime", (el) => {
+    const p = el.property || {};
+    let ms = Number(p.milliseconds ?? p.millisecond ?? p.value ?? 0);
+    if (!Number.isFinite(ms) || ms === 0) return null;
+    if (ms < 1e12) ms = ms * 1e3;
+    const d = new Date(ms);
+    if (Number.isNaN(d.getTime())) return null;
+    const ft = String(p.formatType || p.format_type || "").toLowerCase();
+    const opts = ft.includes("time") && !ft.includes("date") ? { hour: "2-digit", minute: "2-digit", hour12: false } : ft.includes("date") && !ft.includes("time") ? { year: "numeric", month: "2-digit", day: "2-digit" } : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false };
+    let text;
+    try {
+      text = new Intl.DateTimeFormat("zh-CN", opts).format(d);
+    } catch {
+      text = d.toLocaleString();
+    }
+    return h("span", { className: `${CLS}-local-datetime` }, text);
+  });
+  registerComponent("number_tag", (el, ctx) => {
+    const p = el.property || {};
+    const raw = extractText(p.text);
+    const text = raw != null && raw !== "" ? raw : p.content != null ? String(p.content) : "";
+    if (text === "") return null;
+    const parentFs = ctx.textMetrics?.fontSize ?? BASE_FONT_SIZE;
+    const fs = Math.max(11, Math.round(parentFs * 0.85));
+    const c = TAG_COLOR.blue;
+    const style = {
+      backgroundColor: c.bg,
+      color: c.text,
+      fontSize: fs + "px",
+      lineHeight: "1.4",
+      padding: "0 4px",
+      borderRadius: "4px",
+      display: "inline-flex",
+      alignItems: "center",
+      whiteSpace: "nowrap",
+      margin: "0 2px",
+      verticalAlign: "baseline"
+    };
+    return h("span", { className: `${CLS}-number-tag`, style }, text);
+  });
+  registerComponent("vote-card-select", (el) => {
+    const p = el.property || {};
+    const text = extractText(p.text) || (p.content != null ? String(p.content) : "");
+    if (!text) return null;
+    const voted = p.voted === true || p.isVoted === true || p.selected === true;
+    const count = Number(p.count ?? p.voteCount ?? 0) || 0;
+    const total = Number(p.total ?? p.totalCount ?? 0) || 0;
+    let percent = Number(p.percent ?? p.ratio ?? NaN);
+    if (!Number.isFinite(percent)) {
+      percent = total > 0 ? Math.round(count / total * 1e3) / 10 : 0;
+    }
+    const rootCls = `${CLS}-vote-card-select` + (voted ? ` ${CLS}-vote-card-select--voted` : "");
+    const kids = [
+      h("div", { className: `${CLS}-vote-card-select-content` }, text)
+    ];
+    if (voted) {
+      kids.push(
+        h("div", {
+          className: `${CLS}-vote-card-select-result`,
+          style: { fontSize: "12px", color: "#646a73", marginTop: "2px" }
+        }, `${count} \u7968 ${percent}%`),
+        h(
+          "div",
+          {
+            className: `${CLS}-vote-card-select-progress`,
+            style: {
+              height: "4px",
+              borderRadius: "2px",
+              background: "#f2f3f5",
+              marginTop: "4px",
+              overflow: "hidden"
+            }
+          },
+          h("div", {
+            className: `${CLS}-vote-card-select-progress-bar`,
+            style: {
+              width: Math.min(100, Math.max(0, percent)) + "%",
+              height: "100%",
+              background: "#4e83fd",
+              borderRadius: "2px"
+            }
+          })
+        )
+      );
+    }
+    return h("div", { className: rootCls, style: { padding: "8px 0" } }, kids);
+  });
   const EMOJI_FONT_SIZE = Number((BASE_FONT_SIZE * BASE_LINE_HEIGHT).toFixed(2));
   registerComponent("emoji", (el, ctx) => {
     const p = el.property || {};
@@ -6843,7 +7022,12 @@ function buildCardVNode(card, options) {
   const parts = [];
   if (jc.header) parts.push(renderElement(jc.header, ctx));
   const bodyEl = jc.body || jc.newBody;
-  if (bodyEl) parts.push(renderElement(bodyEl.tag ? bodyEl : { ...bodyEl, tag: "body" }, ctx));
+  if (bodyEl) {
+    const headerTpl = jc.header?.property?.template;
+    const compactHeader = !!jc.header && (!headerTpl || headerTpl === "default" || headerTpl === "disabled");
+    const bodyCtx = compactHeader ? { ...ctx, bodyPaddingTop: 8 } : ctx;
+    parts.push(renderElement(bodyEl.tag ? bodyEl : { ...bodyEl, tag: "body" }, bodyCtx));
+  }
   return h("div", {
     className: `${CLS}-root ${CLS}`,
     style: { fontSize: BASE_FONT_SIZE + "px", lineHeight: String(BASE_LINE_HEIGHT) }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "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.17"
+    "@open-feishu-card/adapter": "0.3.18"
   },
   "devDependencies": {
     "tsup": "^8.3.5",