@open-feishu-card/renderer 0.2.14 → 0.2.16

package/dist/all.css

@@ -530,25 +530,36 @@
 .universal-card-collapsible-panel {
   box-sizing: border-box; overflow: hidden;
 }
-/* header（<summary>）：可点击整行；去掉浏览器默认三角标记，标题占满、箭头贴右
-   （icon_position=left 时靠 DOM 顺序在左）。 */
+/* header（<summary>）：可点击整行；去掉浏览器默认三角标记。
+   真机 color:var(--text-caption) → N600；标题/箭头继承此色。
+   默认 title flex:1 把箭头推到右侧（icon_position=right）；
+   icon_position=left 时靠 DOM 顺序在左。 */
 .universal-card-collapsible-panel__header {
   display: flex; align-items: center; gap: 8px;
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
+/* follow_text：箭头紧贴文字（真机 __header-content--icon-follow），不拉满整行 */
+.universal-card-collapsible-panel__header--icon-follow {
+  gap: 4px;
+}
+.universal-card-collapsible-panel__header--icon-follow .universal-card-collapsible-panel__title {
+  flex: 0 1 auto;
+  width: auto;
+}
 /* 箭头图标包裹：收起态角度 0；展开态（details[open]）旋转到 --panel-icon-angle（内联给出，默认 -180deg）。
-   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。 */
+   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。颜色继承 header caption。 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));

package/dist/index.cjs

@@ -710,6 +710,91 @@ function marginToStyle(margin) {
   if (typeof margin === "string" && margin.trim()) return margin.trim();
   return boxToStyle(margin);
 }
+function horizontalMarginPx(margin) {
+  if (typeof margin === "string" && margin.trim()) {
+    const parts = margin.trim().split(/\s+/).map((t) => spacingToPx(t));
+    if (parts.length === 1) return { left: parts[0], right: parts[0] };
+    if (parts.length === 2 || parts.length === 3) return { left: parts[1], right: parts[1] };
+    if (parts.length >= 4) return { left: parts[3], right: parts[1] };
+  }
+  if (margin && typeof margin === "object") {
+    const m = margin;
+    return { left: Number(m.left?.value ?? 0), right: Number(m.right?.value ?? 0) };
+  }
+  return { left: 0, right: 0 };
+}
+function applyOuterMargin(style, margin) {
+  const mg = marginToStyle(margin);
+  if (!mg) return;
+  style.margin = mg;
+  const { left, right } = horizontalMarginPx(margin);
+  const inset = left + right;
+  if (inset <= 0) return;
+  const w = style.width;
+  if (w && /px$/i.test(w) && !w.includes("%")) return;
+  if (!w || w === "100%" || w === "fill") {
+    style.width = `calc(100% - ${inset}px)`;
+  }
+}
+function resolveDimensionPx(direct, valueObj) {
+  const fromObj = () => {
+    if (!valueObj) return void 0;
+    const t = String(valueObj.type || "").toLowerCase();
+    if (t === "pixels" || t === "pixel") {
+      const n = Number(valueObj.value);
+      return Number.isFinite(n) ? n + "px" : void 0;
+    }
+    const v = valueObj.value;
+    if (v === "fill") return "100%";
+    if (v === "auto" || v === "default") return void 0;
+    if (typeof v === "number" && Number.isFinite(v)) return v + "px";
+    if (typeof v === "string") {
+      const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/i.exec(v.trim());
+      if (m) return m[1] + "px";
+    }
+    return void 0;
+  };
+  if (typeof direct === "number" && Number.isFinite(direct)) return direct + "px";
+  if (typeof direct === "string") {
+    const s = direct.trim();
+    if (s === "fill") return "100%";
+    if (s === "auto" || s === "default" || !s) return void 0;
+    const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/i.exec(s);
+    if (m) return m[1] + "px";
+  }
+  return fromObj();
+}
+function resolveImageSize(property) {
+  if (!property) return {};
+  const size = property.size ?? property.size_value;
+  if (typeof size === "string") {
+    const s = size.trim();
+    const pxPair = /^(\d+(?:\.\d+)?)px\s+(\d+(?:\.\d+)?)px$/i.exec(s);
+    if (pxPair) return { width: pxPair[1] + "px", height: pxPair[2] + "px" };
+    const ratio = /^(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)$/.exec(s);
+    if (ratio) return { aspectRatio: `${ratio[1]} / ${ratio[2]}` };
+  }
+  const echo = property.sizeValue ?? property.size_value;
+  if (echo && typeof echo === "object") {
+    const t = String(echo.type || "").toLowerCase();
+    const v = echo.value;
+    if (t === "width_height_pixels" && v && typeof v === "object") {
+      const w = Number(v.width);
+      const h2 = Number(v.height);
+      if (Number.isFinite(w) && Number.isFinite(h2)) {
+        return { width: w + "px", height: h2 + "px" };
+      }
+    }
+    if (t === "aspect_ratio" && v && typeof v === "object") {
+      const w = Number(v.width);
+      const h2 = Number(v.height);
+      if (Number.isFinite(w) && Number.isFinite(h2) && h2 !== 0) {
+        return { aspectRatio: `${w} / ${h2}` };
+      }
+    }
+  }
+  return {};
+}
 function resolveCornerRadius(property) {
   if (!property) return void 0;
   const direct = property.corner_radius ?? property.cornerRadius;
@@ -1367,25 +1452,36 @@ var BASE_STYLES_CSS = `/**
 .universal-card-collapsible-panel {
   box-sizing: border-box; overflow: hidden;
 }
-/* header\uFF08<summary>\uFF09\uFF1A\u53EF\u70B9\u51FB\u6574\u884C\uFF1B\u53BB\u6389\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0\uFF0C\u6807\u9898\u5360\u6EE1\u3001\u7BAD\u5934\u8D34\u53F3
-   \uFF08icon_position=left \u65F6\u9760 DOM \u987A\u5E8F\u5728\u5DE6\uFF09\u3002 */
+/* header\uFF08<summary>\uFF09\uFF1A\u53EF\u70B9\u51FB\u6574\u884C\uFF1B\u53BB\u6389\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0\u3002
+   \u771F\u673A color:var(--text-caption) \u2192 N600\uFF1B\u6807\u9898/\u7BAD\u5934\u7EE7\u627F\u6B64\u8272\u3002
+   \u9ED8\u8BA4 title flex:1 \u628A\u7BAD\u5934\u63A8\u5230\u53F3\u4FA7\uFF08icon_position=right\uFF09\uFF1B
+   icon_position=left \u65F6\u9760 DOM \u987A\u5E8F\u5728\u5DE6\u3002 */
 .universal-card-collapsible-panel__header {
   display: flex; align-items: center; gap: 8px;
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
+/* follow_text\uFF1A\u7BAD\u5934\u7D27\u8D34\u6587\u5B57\uFF08\u771F\u673A __header-content--icon-follow\uFF09\uFF0C\u4E0D\u62C9\u6EE1\u6574\u884C */
+.universal-card-collapsible-panel__header--icon-follow {
+  gap: 4px;
+}
+.universal-card-collapsible-panel__header--icon-follow .universal-card-collapsible-panel__title {
+  flex: 0 1 auto;
+  width: auto;
+}
 /* \u7BAD\u5934\u56FE\u6807\u5305\u88F9\uFF1A\u6536\u8D77\u6001\u89D2\u5EA6 0\uFF1B\u5C55\u5F00\u6001\uFF08details[open]\uFF09\u65CB\u8F6C\u5230 --panel-icon-angle\uFF08\u5185\u8054\u7ED9\u51FA\uFF0C\u9ED8\u8BA4 -180deg\uFF09\u3002
-   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002 */
+   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002\u989C\u8272\u7EE7\u627F header caption\u3002 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));
@@ -5435,8 +5531,7 @@ function registerBuiltins() {
   registerComponent("markdown", (el, ctx) => {
     const p = el.property || {};
     const style = { ...alignToStyle(p.textAlign), ...textStyleToStyle(p.textStyle) };
-    const mg = marginToStyle(p.margin);
-    if (mg) style.margin = mg;
+    applyOuterMargin(style, p.margin);
     const sizeKey = resolveTextSizeKey(p);
     let fontSize = BASE_FONT_SIZE;
     let lineHeight = BASE_FONT_SIZE + 8;
@@ -5502,8 +5597,7 @@ function registerBuiltins() {
     if (hAlign) {
       style.justifyContent = { left: "flex-start", center: "center", right: "flex-end" }[hAlign] || "flex-start";
     }
-    const mg = boxToStyle(p.margin);
-    if (mg) style.margin = mg;
+    applyOuterMargin(style, p.margin);
     const bg = propertyBackgroundColor(p);
     if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
@@ -5557,7 +5651,21 @@ function registerBuiltins() {
     const wrapStyle = {};
     const imgStyle = {};
     if (p.corner_radius != null) imgStyle.borderRadius = sizeToPx(p.corner_radius);
-    if (scale === "fit_horizontal" || scale === "stretch") {
+    const sized = resolveImageSize(p);
+    if (sized.width && sized.height) {
+      wrapStyle.width = sized.width;
+      wrapStyle.height = sized.height;
+      wrapStyle.flexShrink = "0";
+      imgStyle.width = "100%";
+      imgStyle.height = "100%";
+      imgStyle.objectFit = scale === "fit_horizontal" || scale === "stretch" ? "fill" : "cover";
+    } else if (sized.aspectRatio) {
+      wrapStyle.width = "100%";
+      imgStyle.width = "100%";
+      imgStyle.aspectRatio = sized.aspectRatio;
+      imgStyle.height = "auto";
+      imgStyle.objectFit = "cover";
+    } else if (scale === "fit_horizontal" || scale === "stretch") {
       wrapStyle.width = "100%";
       imgStyle.width = "100%";
       imgStyle.height = "auto";
@@ -5565,7 +5673,7 @@ function registerBuiltins() {
     return h(
       "div",
       { className: `${CLS}-image__wrapper`, style: wrapStyle },
-      src ? h("img", { className: `${CLS}-image__host`, src, alt: altText, style: imgStyle }) : h("div", { className: `${CLS}-image__placeholder` }, altText || "[\u56FE\u7247]")
+      src ? h("img", { className: `${CLS}-image__host`, src, alt: altText, style: imgStyle }) : h("div", { className: `${CLS}-image__placeholder`, style: imgStyle }, altText || "[\u56FE\u7247]")
     );
   });
   registerComponent("video", (el, ctx) => {
@@ -5713,7 +5821,7 @@ function registerBuiltins() {
     const tip = extractText(p.hoverTips);
     const borderNamed = p.border_color ?? p.borderColor;
     const borderCustom = adapter.resolveCustomBorderLight(p);
-    const borderColor = resolveColor(borderNamed) ?? (borderCustom ? resolveColor(borderCustom) : void 0);
+    const borderColor = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
     const hasBorder = borderColor != null || p.hasBorder === true || p.has_border === true;
     const cls = `${CLS}-interactive-container` + (clickable ? ` ${CLS}-interactive-container--action` : "") + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
     const style = {};
@@ -5727,7 +5835,16 @@ function registerBuiltins() {
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
     if (vGap != null) style.rowGap = spacingToPx(vGap) + "px";
     const icWv = p.widthValue;
-    if ((p.width ?? icWv?.value) === "fill") style.width = "100%";
+    const icHv = p.heightValue;
+    const w = resolveDimensionPx(p.width, icWv);
+    const hPx = resolveDimensionPx(p.height, icHv);
+    if (w) style.width = w;
+    if (hPx) {
+      style.height = hPx;
+      style.flexShrink = "0";
+      style.boxSizing = "border-box";
+    }
+    applyOuterMargin(style, p.margin);
     const props = { className: cls };
     if (Object.keys(style).length) props.style = style;
     if (url && !disabled) props["data-url"] = url;
@@ -5747,10 +5864,16 @@ function registerBuiltins() {
       const bg = bgStyleToColor(bgRaw);
       if (bg) style.background = bg;
     }
-    const border = p.border && typeof p.border === "object" ? p.border : {};
-    const borderColor = resolveColor(border.color) || "#dee0e3";
-    style.border = `1px solid ${borderColor}`;
-    style.borderRadius = border.corner_radius != null ? sizeToPx(border.corner_radius) : "8px";
+    const borderRaw = p.border;
+    if (borderRaw && typeof borderRaw === "object") {
+      const border = borderRaw;
+      const borderColor = resolveColor(border.color) || "#dee0e3";
+      style.border = `1px solid ${borderColor}`;
+      style.borderRadius = border.corner_radius != null ? sizeToPx(border.corner_radius) : "8px";
+    } else {
+      style.borderRadius = "8px";
+    }
+    applyOuterMargin(style, p.margin);
     const headerStyle = {};
     const hpad = typeof hdr.padding === "string" ? hdr.padding : boxToStyle(hdr.padding);
     if (hpad) headerStyle.padding = hpad;
@@ -5758,7 +5881,7 @@ function registerBuiltins() {
     const titleVNode = h("div", { className: `${CLS}-collapsible-panel__title` }, title);
     let iconVNode = null;
     const iconRaw = hdr.icon;
-    const openAngle = Number(hdr.icon_expanded_angle ?? -180);
+    const openAngle = Number(hdr.icon_expanded_angle ?? hdr.iconExpandedAngle ?? -180);
     if (iconRaw && iconRaw.tag) {
       const iconEl = iconRaw.property ? iconRaw : { tag: iconRaw.tag, property: iconRaw };
       const inner = renderIcon(iconEl, ctx);
@@ -5766,10 +5889,13 @@ function registerBuiltins() {
         iconVNode = h("div", { className: `${CLS}-collapsible-panel__icon` }, inner);
       }
     }
-    const iconLeft = hdr.icon_position === "left";
+    const iconPos = String(hdr.icon_position ?? hdr.iconPosition ?? "right");
+    const iconLeft = iconPos === "left";
+    const iconFollow = iconPos === "follow_text" || iconPos === "followText";
     const headerChildren = iconLeft ? [iconVNode, titleVNode] : [titleVNode, iconVNode];
     const summaryStyle = { ...headerStyle, "--panel-icon-angle": `${openAngle}deg` };
-    const summary = h("summary", { className: `${CLS}-collapsible-panel__header`, style: summaryStyle }, headerChildren);
+    const headerCls = `${CLS}-collapsible-panel__header` + (iconFollow ? ` ${CLS}-collapsible-panel__header--icon-follow` : "");
+    const summary = h("summary", { className: headerCls, style: summaryStyle }, headerChildren);
     const contentStyle = {};
     const cpad = typeof p.padding === "string" ? p.padding : boxToStyle(p.padding);
     if (cpad) contentStyle.padding = cpad;

package/dist/index.js

@@ -709,6 +709,91 @@ function marginToStyle(margin) {
   if (typeof margin === "string" && margin.trim()) return margin.trim();
   return boxToStyle(margin);
 }
+function horizontalMarginPx(margin) {
+  if (typeof margin === "string" && margin.trim()) {
+    const parts = margin.trim().split(/\s+/).map((t) => spacingToPx(t));
+    if (parts.length === 1) return { left: parts[0], right: parts[0] };
+    if (parts.length === 2 || parts.length === 3) return { left: parts[1], right: parts[1] };
+    if (parts.length >= 4) return { left: parts[3], right: parts[1] };
+  }
+  if (margin && typeof margin === "object") {
+    const m = margin;
+    return { left: Number(m.left?.value ?? 0), right: Number(m.right?.value ?? 0) };
+  }
+  return { left: 0, right: 0 };
+}
+function applyOuterMargin(style, margin) {
+  const mg = marginToStyle(margin);
+  if (!mg) return;
+  style.margin = mg;
+  const { left, right } = horizontalMarginPx(margin);
+  const inset = left + right;
+  if (inset <= 0) return;
+  const w = style.width;
+  if (w && /px$/i.test(w) && !w.includes("%")) return;
+  if (!w || w === "100%" || w === "fill") {
+    style.width = `calc(100% - ${inset}px)`;
+  }
+}
+function resolveDimensionPx(direct, valueObj) {
+  const fromObj = () => {
+    if (!valueObj) return void 0;
+    const t = String(valueObj.type || "").toLowerCase();
+    if (t === "pixels" || t === "pixel") {
+      const n = Number(valueObj.value);
+      return Number.isFinite(n) ? n + "px" : void 0;
+    }
+    const v = valueObj.value;
+    if (v === "fill") return "100%";
+    if (v === "auto" || v === "default") return void 0;
+    if (typeof v === "number" && Number.isFinite(v)) return v + "px";
+    if (typeof v === "string") {
+      const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/i.exec(v.trim());
+      if (m) return m[1] + "px";
+    }
+    return void 0;
+  };
+  if (typeof direct === "number" && Number.isFinite(direct)) return direct + "px";
+  if (typeof direct === "string") {
+    const s = direct.trim();
+    if (s === "fill") return "100%";
+    if (s === "auto" || s === "default" || !s) return void 0;
+    const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/i.exec(s);
+    if (m) return m[1] + "px";
+  }
+  return fromObj();
+}
+function resolveImageSize(property) {
+  if (!property) return {};
+  const size = property.size ?? property.size_value;
+  if (typeof size === "string") {
+    const s = size.trim();
+    const pxPair = /^(\d+(?:\.\d+)?)px\s+(\d+(?:\.\d+)?)px$/i.exec(s);
+    if (pxPair) return { width: pxPair[1] + "px", height: pxPair[2] + "px" };
+    const ratio = /^(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)$/.exec(s);
+    if (ratio) return { aspectRatio: `${ratio[1]} / ${ratio[2]}` };
+  }
+  const echo = property.sizeValue ?? property.size_value;
+  if (echo && typeof echo === "object") {
+    const t = String(echo.type || "").toLowerCase();
+    const v = echo.value;
+    if (t === "width_height_pixels" && v && typeof v === "object") {
+      const w = Number(v.width);
+      const h2 = Number(v.height);
+      if (Number.isFinite(w) && Number.isFinite(h2)) {
+        return { width: w + "px", height: h2 + "px" };
+      }
+    }
+    if (t === "aspect_ratio" && v && typeof v === "object") {
+      const w = Number(v.width);
+      const h2 = Number(v.height);
+      if (Number.isFinite(w) && Number.isFinite(h2) && h2 !== 0) {
+        return { aspectRatio: `${w} / ${h2}` };
+      }
+    }
+  }
+  return {};
+}
 function resolveCornerRadius(property) {
   if (!property) return void 0;
   const direct = property.corner_radius ?? property.cornerRadius;
@@ -1366,25 +1451,36 @@ var BASE_STYLES_CSS = `/**
 .universal-card-collapsible-panel {
   box-sizing: border-box; overflow: hidden;
 }
-/* header\uFF08<summary>\uFF09\uFF1A\u53EF\u70B9\u51FB\u6574\u884C\uFF1B\u53BB\u6389\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0\uFF0C\u6807\u9898\u5360\u6EE1\u3001\u7BAD\u5934\u8D34\u53F3
-   \uFF08icon_position=left \u65F6\u9760 DOM \u987A\u5E8F\u5728\u5DE6\uFF09\u3002 */
+/* header\uFF08<summary>\uFF09\uFF1A\u53EF\u70B9\u51FB\u6574\u884C\uFF1B\u53BB\u6389\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0\u3002
+   \u771F\u673A color:var(--text-caption) \u2192 N600\uFF1B\u6807\u9898/\u7BAD\u5934\u7EE7\u627F\u6B64\u8272\u3002
+   \u9ED8\u8BA4 title flex:1 \u628A\u7BAD\u5934\u63A8\u5230\u53F3\u4FA7\uFF08icon_position=right\uFF09\uFF1B
+   icon_position=left \u65F6\u9760 DOM \u987A\u5E8F\u5728\u5DE6\u3002 */
 .universal-card-collapsible-panel__header {
   display: flex; align-items: center; gap: 8px;
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
+/* follow_text\uFF1A\u7BAD\u5934\u7D27\u8D34\u6587\u5B57\uFF08\u771F\u673A __header-content--icon-follow\uFF09\uFF0C\u4E0D\u62C9\u6EE1\u6574\u884C */
+.universal-card-collapsible-panel__header--icon-follow {
+  gap: 4px;
+}
+.universal-card-collapsible-panel__header--icon-follow .universal-card-collapsible-panel__title {
+  flex: 0 1 auto;
+  width: auto;
+}
 /* \u7BAD\u5934\u56FE\u6807\u5305\u88F9\uFF1A\u6536\u8D77\u6001\u89D2\u5EA6 0\uFF1B\u5C55\u5F00\u6001\uFF08details[open]\uFF09\u65CB\u8F6C\u5230 --panel-icon-angle\uFF08\u5185\u8054\u7ED9\u51FA\uFF0C\u9ED8\u8BA4 -180deg\uFF09\u3002
-   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002 */
+   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002\u989C\u8272\u7EE7\u627F header caption\u3002 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));
@@ -5434,8 +5530,7 @@ function registerBuiltins() {
   registerComponent("markdown", (el, ctx) => {
     const p = el.property || {};
     const style = { ...alignToStyle(p.textAlign), ...textStyleToStyle(p.textStyle) };
-    const mg = marginToStyle(p.margin);
-    if (mg) style.margin = mg;
+    applyOuterMargin(style, p.margin);
     const sizeKey = resolveTextSizeKey(p);
     let fontSize = BASE_FONT_SIZE;
     let lineHeight = BASE_FONT_SIZE + 8;
@@ -5501,8 +5596,7 @@ function registerBuiltins() {
     if (hAlign) {
       style.justifyContent = { left: "flex-start", center: "center", right: "flex-end" }[hAlign] || "flex-start";
     }
-    const mg = boxToStyle(p.margin);
-    if (mg) style.margin = mg;
+    applyOuterMargin(style, p.margin);
     const bg = propertyBackgroundColor(p);
     if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
@@ -5556,7 +5650,21 @@ function registerBuiltins() {
     const wrapStyle = {};
     const imgStyle = {};
     if (p.corner_radius != null) imgStyle.borderRadius = sizeToPx(p.corner_radius);
-    if (scale === "fit_horizontal" || scale === "stretch") {
+    const sized = resolveImageSize(p);
+    if (sized.width && sized.height) {
+      wrapStyle.width = sized.width;
+      wrapStyle.height = sized.height;
+      wrapStyle.flexShrink = "0";
+      imgStyle.width = "100%";
+      imgStyle.height = "100%";
+      imgStyle.objectFit = scale === "fit_horizontal" || scale === "stretch" ? "fill" : "cover";
+    } else if (sized.aspectRatio) {
+      wrapStyle.width = "100%";
+      imgStyle.width = "100%";
+      imgStyle.aspectRatio = sized.aspectRatio;
+      imgStyle.height = "auto";
+      imgStyle.objectFit = "cover";
+    } else if (scale === "fit_horizontal" || scale === "stretch") {
       wrapStyle.width = "100%";
       imgStyle.width = "100%";
       imgStyle.height = "auto";
@@ -5564,7 +5672,7 @@ function registerBuiltins() {
     return h(
       "div",
       { className: `${CLS}-image__wrapper`, style: wrapStyle },
-      src ? h("img", { className: `${CLS}-image__host`, src, alt: altText, style: imgStyle }) : h("div", { className: `${CLS}-image__placeholder` }, altText || "[\u56FE\u7247]")
+      src ? h("img", { className: `${CLS}-image__host`, src, alt: altText, style: imgStyle }) : h("div", { className: `${CLS}-image__placeholder`, style: imgStyle }, altText || "[\u56FE\u7247]")
     );
   });
   registerComponent("video", (el, ctx) => {
@@ -5712,7 +5820,7 @@ function registerBuiltins() {
     const tip = extractText(p.hoverTips);
     const borderNamed = p.border_color ?? p.borderColor;
     const borderCustom = resolveCustomBorderLight(p);
-    const borderColor = resolveColor(borderNamed) ?? (borderCustom ? resolveColor(borderCustom) : void 0);
+    const borderColor = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
     const hasBorder = borderColor != null || p.hasBorder === true || p.has_border === true;
     const cls = `${CLS}-interactive-container` + (clickable ? ` ${CLS}-interactive-container--action` : "") + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
     const style = {};
@@ -5726,7 +5834,16 @@ function registerBuiltins() {
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
     if (vGap != null) style.rowGap = spacingToPx(vGap) + "px";
     const icWv = p.widthValue;
-    if ((p.width ?? icWv?.value) === "fill") style.width = "100%";
+    const icHv = p.heightValue;
+    const w = resolveDimensionPx(p.width, icWv);
+    const hPx = resolveDimensionPx(p.height, icHv);
+    if (w) style.width = w;
+    if (hPx) {
+      style.height = hPx;
+      style.flexShrink = "0";
+      style.boxSizing = "border-box";
+    }
+    applyOuterMargin(style, p.margin);
     const props = { className: cls };
     if (Object.keys(style).length) props.style = style;
     if (url && !disabled) props["data-url"] = url;
@@ -5746,10 +5863,16 @@ function registerBuiltins() {
       const bg = bgStyleToColor(bgRaw);
       if (bg) style.background = bg;
     }
-    const border = p.border && typeof p.border === "object" ? p.border : {};
-    const borderColor = resolveColor(border.color) || "#dee0e3";
-    style.border = `1px solid ${borderColor}`;
-    style.borderRadius = border.corner_radius != null ? sizeToPx(border.corner_radius) : "8px";
+    const borderRaw = p.border;
+    if (borderRaw && typeof borderRaw === "object") {
+      const border = borderRaw;
+      const borderColor = resolveColor(border.color) || "#dee0e3";
+      style.border = `1px solid ${borderColor}`;
+      style.borderRadius = border.corner_radius != null ? sizeToPx(border.corner_radius) : "8px";
+    } else {
+      style.borderRadius = "8px";
+    }
+    applyOuterMargin(style, p.margin);
     const headerStyle = {};
     const hpad = typeof hdr.padding === "string" ? hdr.padding : boxToStyle(hdr.padding);
     if (hpad) headerStyle.padding = hpad;
@@ -5757,7 +5880,7 @@ function registerBuiltins() {
     const titleVNode = h("div", { className: `${CLS}-collapsible-panel__title` }, title);
     let iconVNode = null;
     const iconRaw = hdr.icon;
-    const openAngle = Number(hdr.icon_expanded_angle ?? -180);
+    const openAngle = Number(hdr.icon_expanded_angle ?? hdr.iconExpandedAngle ?? -180);
     if (iconRaw && iconRaw.tag) {
       const iconEl = iconRaw.property ? iconRaw : { tag: iconRaw.tag, property: iconRaw };
       const inner = renderIcon(iconEl, ctx);
@@ -5765,10 +5888,13 @@ function registerBuiltins() {
         iconVNode = h("div", { className: `${CLS}-collapsible-panel__icon` }, inner);
       }
     }
-    const iconLeft = hdr.icon_position === "left";
+    const iconPos = String(hdr.icon_position ?? hdr.iconPosition ?? "right");
+    const iconLeft = iconPos === "left";
+    const iconFollow = iconPos === "follow_text" || iconPos === "followText";
     const headerChildren = iconLeft ? [iconVNode, titleVNode] : [titleVNode, iconVNode];
     const summaryStyle = { ...headerStyle, "--panel-icon-angle": `${openAngle}deg` };
-    const summary = h("summary", { className: `${CLS}-collapsible-panel__header`, style: summaryStyle }, headerChildren);
+    const headerCls = `${CLS}-collapsible-panel__header` + (iconFollow ? ` ${CLS}-collapsible-panel__header--icon-follow` : "");
+    const summary = h("summary", { className: headerCls, style: summaryStyle }, headerChildren);
     const contentStyle = {};
     const cpad = typeof p.padding === "string" ? p.padding : boxToStyle(p.padding);
     if (cpad) contentStyle.padding = cpad;

package/dist/styles.css

@@ -530,25 +530,36 @@
 .universal-card-collapsible-panel {
   box-sizing: border-box; overflow: hidden;
 }
-/* header（<summary>）：可点击整行；去掉浏览器默认三角标记，标题占满、箭头贴右
-   （icon_position=left 时靠 DOM 顺序在左）。 */
+/* header（<summary>）：可点击整行；去掉浏览器默认三角标记。
+   真机 color:var(--text-caption) → N600；标题/箭头继承此色。
+   默认 title flex:1 把箭头推到右侧（icon_position=right）；
+   icon_position=left 时靠 DOM 顺序在左。 */
 .universal-card-collapsible-panel__header {
   display: flex; align-items: center; gap: 8px;
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
+/* follow_text：箭头紧贴文字（真机 __header-content--icon-follow），不拉满整行 */
+.universal-card-collapsible-panel__header--icon-follow {
+  gap: 4px;
+}
+.universal-card-collapsible-panel__header--icon-follow .universal-card-collapsible-panel__title {
+  flex: 0 1 auto;
+  width: auto;
+}
 /* 箭头图标包裹：收起态角度 0；展开态（details[open]）旋转到 --panel-icon-angle（内联给出，默认 -180deg）。
-   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。 */
+   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。颜色继承 header caption。 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "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.10"
+    "@open-feishu-card/adapter": "0.3.11"
   },
   "devDependencies": {
     "tsup": "^8.3.5",