@open-feishu-card/renderer 0.3.5 → 0.4.0

package/dist/all.css

@@ -380,6 +380,90 @@
   font-size: 12px;
 }
 
+/* ---- img_combination 多图混排（比例逆向自网页版 .universal-card-img-combination） ---- */
+.universal-card-img-combination { display: flex; width: 100%; justify-content: space-between; }
+.universal-card-img-combination__item { min-width: 0; overflow: hidden; }
+.universal-card-img-combination__item > .universal-card-image__host { display: block; width: 100%; height: 100%; object-fit: cover; }
+.universal-card-img-combination__item > .universal-card-image__placeholder { width: 100%; height: 100%; }
+/* double：左窄(32.4%, 24:33) + 右宽(67.6%, 49.33:33) */
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(odd) {
+  width: 32.4%; aspect-ratio: 24 / 33;
+}
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(2n) {
+  width: calc(67.6% - 4px); aspect-ratio: 49.33 / 33;
+}
+/* triple：左大图(66.5%, 1:1) + 右列两张小图 */
+.universal-card-img-combination--triple .universal-card-img-combination__left {
+  width: 66.5%; aspect-ratio: 1; margin-right: 1%;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right {
+  width: 33%; display: flex; flex-direction: column; justify-content: space-between;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item {
+  width: 100%; aspect-ratio: 1;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item:first-child {
+  margin-bottom: 1.5%;
+}
+/* bisect / trisect：等宽方格换行 */
+.universal-card-img-combination--bisect { flex-wrap: wrap; gap: 4px; }
+.universal-card-img-combination--bisect .universal-card-img-combination__item {
+  width: calc(50% - 2px); aspect-ratio: 1;
+}
+.universal-card-img-combination--trisect { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
+.universal-card-img-combination--trisect .universal-card-img-combination__item {
+  width: calc(33.33% - 2.67px); aspect-ratio: 1;
+}
+
+/* ---- select_img 多图选择（对齐网页版 .universal-card-select-img） ---- */
+.universal-card-select-img {
+  width: 100%; max-width: 100%; display: grid; grid-gap: 4px; box-sizing: border-box;
+}
+.universal-card-select-img--stretch { grid-template-columns: 1fr; }
+.universal-card-select-img--bisect { grid-template-columns: 1fr 1fr; }
+.universal-card-select-img--trisect { grid-template-columns: 1fr 1fr 1fr; }
+.universal-card-select-img__item-wrapper { position: relative; border-radius: 6px; }
+.universal-card-select-img__item-wrapper::after {
+  content: " "; position: absolute; inset: 0; box-sizing: border-box;
+  border: 1px solid var(--N300); border-radius: 6px; pointer-events: none; z-index: 1;
+}
+.universal-card-select-img__item-wrapper--selected::after { border: 2px solid var(--B500); }
+.universal-card-select-img__item {
+  position: relative; overflow: hidden; box-sizing: border-box; border-radius: 6px;
+  cursor: pointer; width: 100%;
+}
+.universal-card-select-img__item--disabled { cursor: not-allowed; }
+.universal-card-select-img__item--disabled::after {
+  content: " "; position: absolute; inset: 0; z-index: 1;
+  background-color: rgba(255, 255, 255, .5);
+}
+.universal-card-select-img__item > .universal-card-image__host {
+  display: block; width: 100%; height: 100%; object-fit: cover;
+}
+.universal-card-select-img__item > .universal-card-image__placeholder {
+  width: 100%; height: 100%;
+}
+/* 表单内复选/单选标记（真机仅 in-form 显示；表单外用选中描边表达状态） */
+.universal-card-select-img__checkbox {
+  position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 8px; cursor: pointer;
+}
+.universal-card-select-img__checkbox--disabled { cursor: not-allowed; }
+.universal-card-select-img__checkbox-box {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
+  background-color: rgba(0, 0, 0, .15); border: 1px solid #eff0f1;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
+}
+.universal-card-select-img__checkbox-box--square { border-radius: 4px; }
+.universal-card-select-img__checkbox-box--checked {
+  background-color: var(--B500); border-color: var(--B500);
+}
+.universal-card-select-img__checkbox-box--checked::after {
+  content: ""; width: 3.5px; height: 7px;
+  border: solid #fff; border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translateY(-1px);
+}
+
 /* ---- 按钮 ---- */
 /* 飞书按钮文本是纯文本、单行：min-height 容纳偶发换行，文字超长省略号收尾。
    样式全集逆向自网页版 ud__button：三大族——outlined（描边）/ text（纯文字）/ filled（实心），

package/dist/index.cjs

@@ -687,7 +687,8 @@ function resolveMediaSrc(p, kind, ctx) {
   return null;
 }
 function resolveVideoCoverSrc(p, ctx) {
-  const coverId = p.coverImageID ?? p.image_key ?? p.cover_image_key;
+  const cover = p.cover;
+  const coverId = p.coverImageID ?? p.image_key ?? p.cover_image_key ?? (typeof cover === "string" ? cover : cover?.img_key ?? cover?.imageID ?? cover?.image_id ?? cover?.cover_image_id ?? cover?.coverImageId);
   if (!coverId) return null;
   return resolveImageSrc({ imageID: coverId }, ctx);
 }
@@ -849,8 +850,13 @@ function resolveCornerRadius(property) {
   }
   if (direct != null) return sizeToPx(direct);
   const echo = property.cornerRadiusValue;
-  if (echo && typeof echo.value === "number") return echo.value + "px";
-  if (echo && typeof echo.value === "string" && echo.value.trim()) return sizeToPx(echo.value);
+  if (typeof echo === "number") return echo + "px";
+  if (typeof echo === "string" && echo.trim()) return sizeToPx(echo);
+  if (echo && typeof echo === "object") {
+    const value = echo.value;
+    if (typeof value === "number") return value + "px";
+    if (typeof value === "string" && value.trim()) return sizeToPx(value);
+  }
   return void 0;
 }
 function boxToStyle(box) {
@@ -1351,6 +1357,90 @@ var BASE_STYLES_CSS = `/**
   font-size: 12px;
 }
 
+/* ---- img_combination \u591A\u56FE\u6DF7\u6392\uFF08\u6BD4\u4F8B\u9006\u5411\u81EA\u7F51\u9875\u7248 .universal-card-img-combination\uFF09 ---- */
+.universal-card-img-combination { display: flex; width: 100%; justify-content: space-between; }
+.universal-card-img-combination__item { min-width: 0; overflow: hidden; }
+.universal-card-img-combination__item > .universal-card-image__host { display: block; width: 100%; height: 100%; object-fit: cover; }
+.universal-card-img-combination__item > .universal-card-image__placeholder { width: 100%; height: 100%; }
+/* double\uFF1A\u5DE6\u7A84(32.4%, 24:33) + \u53F3\u5BBD(67.6%, 49.33:33) */
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(odd) {
+  width: 32.4%; aspect-ratio: 24 / 33;
+}
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(2n) {
+  width: calc(67.6% - 4px); aspect-ratio: 49.33 / 33;
+}
+/* triple\uFF1A\u5DE6\u5927\u56FE(66.5%, 1:1) + \u53F3\u5217\u4E24\u5F20\u5C0F\u56FE */
+.universal-card-img-combination--triple .universal-card-img-combination__left {
+  width: 66.5%; aspect-ratio: 1; margin-right: 1%;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right {
+  width: 33%; display: flex; flex-direction: column; justify-content: space-between;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item {
+  width: 100%; aspect-ratio: 1;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item:first-child {
+  margin-bottom: 1.5%;
+}
+/* bisect / trisect\uFF1A\u7B49\u5BBD\u65B9\u683C\u6362\u884C */
+.universal-card-img-combination--bisect { flex-wrap: wrap; gap: 4px; }
+.universal-card-img-combination--bisect .universal-card-img-combination__item {
+  width: calc(50% - 2px); aspect-ratio: 1;
+}
+.universal-card-img-combination--trisect { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
+.universal-card-img-combination--trisect .universal-card-img-combination__item {
+  width: calc(33.33% - 2.67px); aspect-ratio: 1;
+}
+
+/* ---- select_img \u591A\u56FE\u9009\u62E9\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 .universal-card-select-img\uFF09 ---- */
+.universal-card-select-img {
+  width: 100%; max-width: 100%; display: grid; grid-gap: 4px; box-sizing: border-box;
+}
+.universal-card-select-img--stretch { grid-template-columns: 1fr; }
+.universal-card-select-img--bisect { grid-template-columns: 1fr 1fr; }
+.universal-card-select-img--trisect { grid-template-columns: 1fr 1fr 1fr; }
+.universal-card-select-img__item-wrapper { position: relative; border-radius: 6px; }
+.universal-card-select-img__item-wrapper::after {
+  content: " "; position: absolute; inset: 0; box-sizing: border-box;
+  border: 1px solid var(--N300); border-radius: 6px; pointer-events: none; z-index: 1;
+}
+.universal-card-select-img__item-wrapper--selected::after { border: 2px solid var(--B500); }
+.universal-card-select-img__item {
+  position: relative; overflow: hidden; box-sizing: border-box; border-radius: 6px;
+  cursor: pointer; width: 100%;
+}
+.universal-card-select-img__item--disabled { cursor: not-allowed; }
+.universal-card-select-img__item--disabled::after {
+  content: " "; position: absolute; inset: 0; z-index: 1;
+  background-color: rgba(255, 255, 255, .5);
+}
+.universal-card-select-img__item > .universal-card-image__host {
+  display: block; width: 100%; height: 100%; object-fit: cover;
+}
+.universal-card-select-img__item > .universal-card-image__placeholder {
+  width: 100%; height: 100%;
+}
+/* \u8868\u5355\u5185\u590D\u9009/\u5355\u9009\u6807\u8BB0\uFF08\u771F\u673A\u4EC5 in-form \u663E\u793A\uFF1B\u8868\u5355\u5916\u7528\u9009\u4E2D\u63CF\u8FB9\u8868\u8FBE\u72B6\u6001\uFF09 */
+.universal-card-select-img__checkbox {
+  position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 8px; cursor: pointer;
+}
+.universal-card-select-img__checkbox--disabled { cursor: not-allowed; }
+.universal-card-select-img__checkbox-box {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
+  background-color: rgba(0, 0, 0, .15); border: 1px solid #eff0f1;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
+}
+.universal-card-select-img__checkbox-box--square { border-radius: 4px; }
+.universal-card-select-img__checkbox-box--checked {
+  background-color: var(--B500); border-color: var(--B500);
+}
+.universal-card-select-img__checkbox-box--checked::after {
+  content: ""; width: 3.5px; height: 7px;
+  border: solid #fff; border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translateY(-1px);
+}
+
 /* ---- \u6309\u94AE ---- */
 /* \u98DE\u4E66\u6309\u94AE\u6587\u672C\u662F\u7EAF\u6587\u672C\u3001\u5355\u884C\uFF1Amin-height \u5BB9\u7EB3\u5076\u53D1\u6362\u884C\uFF0C\u6587\u5B57\u8D85\u957F\u7701\u7565\u53F7\u6536\u5C3E\u3002
    \u6837\u5F0F\u5168\u96C6\u9006\u5411\u81EA\u7F51\u9875\u7248 ud__button\uFF1A\u4E09\u5927\u65CF\u2014\u2014outlined\uFF08\u63CF\u8FB9\uFF09/ text\uFF08\u7EAF\u6587\u5B57\uFF09/ filled\uFF08\u5B9E\u5FC3\uFF09\uFF0C
@@ -5987,6 +6077,123 @@ function registerBuiltins() {
       src ? h("img", { className: `${CLS}-image__host`, src, alt: altText, style: imgStyle }) : h("div", { className: `${CLS}-image__placeholder`, style: imgStyle }, altText || "[\u56FE\u7247]")
     );
   });
+  const IMG_COMBINATION_LIMIT = {
+    double: 2,
+    triple: 3
+  };
+  function renderCombinationImage(item, cornerRadius, ctx) {
+    const src = resolveImageSrc(item, ctx);
+    const style = {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      display: "block"
+    };
+    if (cornerRadius) style.borderRadius = cornerRadius;
+    return src ? h("img", { className: `${CLS}-image__host`, src, alt: "", style }) : h("div", { className: `${CLS}-image__placeholder`, style }, "[\u56FE\u7247]");
+  }
+  registerComponent("img_combination", (el, ctx) => {
+    const p = el.property || {};
+    const rawList = Array.isArray(p.imgList) ? p.imgList : Array.isArray(p.img_list) ? p.img_list : [];
+    if (rawList.length === 0) return null;
+    const mode = String(p.combinationMode ?? p.combination_mode ?? "double");
+    const limit = IMG_COMBINATION_LIMIT[mode];
+    const list = (limit ? rawList.slice(0, limit) : rawList).map((item) => typeof item === "string" ? { img_key: item } : item).filter(isRecord);
+    if (list.length === 0) return null;
+    const cornerRadius = resolveCornerRadius(p);
+    const containerStyle = {};
+    applyOuterMargin(containerStyle, p.margin);
+    const cls = `${CLS}-img-combination ${CLS}-img-combination--${mode}`;
+    const itemNode = (item) => h(
+      "div",
+      { className: `${CLS}-img-combination__item` },
+      renderCombinationImage(item, cornerRadius, ctx)
+    );
+    if (mode === "triple") {
+      const [first, ...rest] = list;
+      return h(
+        "div",
+        { className: cls, style: containerStyle },
+        h(
+          "div",
+          { className: `${CLS}-img-combination__item ${CLS}-img-combination__left` },
+          renderCombinationImage(first, cornerRadius, ctx)
+        ),
+        h("div", { className: `${CLS}-img-combination__right` }, rest.map(itemNode))
+      );
+    }
+    return h("div", { className: cls, style: containerStyle }, list.map(itemNode));
+  });
+  function readSelectImgValues(p) {
+    const raw = p.selectedValues ?? p.selected_values ?? p.value;
+    let value = raw;
+    if (typeof value === "string") {
+      try {
+        value = JSON.parse(value);
+      } catch {
+        return typeof value === "string" && value ? [value] : [];
+      }
+    }
+    if (isRecord(value) && Array.isArray(value.value)) value = value.value;
+    if (!Array.isArray(value)) return [];
+    return value.filter((item) => typeof item === "string");
+  }
+  function renderSelectImgCheckbox(checked, disabled, multiple) {
+    const boxClass = `${CLS}-select-img__checkbox-box` + (multiple ? ` ${CLS}-select-img__checkbox-box--square` : "") + (checked ? ` ${CLS}-select-img__checkbox-box--checked` : "");
+    return h(
+      "div",
+      {
+        className: `${CLS}-select-img__checkbox` + (disabled ? ` ${CLS}-select-img__checkbox--disabled` : "")
+      },
+      h("span", { className: boxClass })
+    );
+  }
+  registerComponent("select_img", (el, ctx) => {
+    const p = el.property || {};
+    const options = Array.isArray(p.options) ? p.options : [];
+    if (options.length === 0) return null;
+    const layout = String(p.layout ?? "bisect");
+    const aspectRatio = String(p.aspectRatio ?? p.aspect_ratio ?? "16:9").replace(":", "/");
+    const multiple = p.multiSelect === true || p.multi_select === true;
+    const disabledAll = p.disabled === true;
+    const selected = readSelectImgValues(p);
+    const containerStyle = {};
+    applyOuterMargin(containerStyle, p.margin);
+    const items = options.map((rawOption) => {
+      const option = isRecord(rawOption) ? rawOption : { img_key: rawOption };
+      const value = typeof option.value === "string" ? option.value : void 0;
+      const isSelected = value !== void 0 && selected.includes(value);
+      const disabled = disabledAll || option.disabled === true;
+      const tip = disabled ? extractText(option.disabled_tips ?? option.disabledTips) : extractText(option.hover_tips ?? option.hoverTips);
+      const src = resolveImageSrc(option, ctx);
+      const wrapperClass = `${CLS}-select-img__item-wrapper` + (isSelected ? ` ${CLS}-select-img__item-wrapper--selected` : "") + (disabled ? ` ${CLS}-select-img__item-wrapper--disabled` : "");
+      const itemClass = `${CLS}-select-img__item` + (disabled ? ` ${CLS}-select-img__item--disabled` : "");
+      return h(
+        "div",
+        { className: wrapperClass },
+        h(
+          "div",
+          { className: itemClass, style: { aspectRatio }, title: tip || void 0 },
+          ctx.inForm ? renderSelectImgCheckbox(isSelected, disabled, multiple) : null,
+          src ? h("img", {
+            className: `${CLS}-image__host`,
+            src,
+            alt: "",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }) : h(
+            "div",
+            { className: `${CLS}-image__placeholder`, style: { width: "100%", height: "100%" } },
+            "[\u56FE\u7247]"
+          )
+        )
+      );
+    });
+    return h(
+      "div",
+      { className: `${CLS}-select-img ${CLS}-select-img--${layout}`, style: containerStyle },
+      items
+    );
+  });
   registerComponent("video", (el, ctx) => {
     const p = el.property || {};
     const src = resolveMediaSrc(p, "video", ctx);
@@ -6362,7 +6569,7 @@ function registerBuiltins() {
     );
   });
   registerComponent("form", (el, ctx) => {
-    const children = renderElements(el.property?.elements, ctx);
+    const children = renderElements(el.property?.elements, { ...ctx, inForm: true });
     const className = `${CLS}-form`;
     if (!ctx.options.interactive) return h("div", { className }, children);
     const name = typeof el.property?.name === "string" ? el.property.name : "";

package/dist/index.d.cts

@@ -100,6 +100,14 @@ interface ElementProperty {
     coverImageID?: string;
     image_key?: string;
     cover_image_key?: string;
+    /** 公开 DSL 官方封面形态 cover: { img_key }；部分 RAW 嵌套 imageID / image_id 等 */
+    cover?: string | {
+        img_key?: string;
+        imageID?: string;
+        image_id?: string;
+        cover_image_id?: string;
+        coverImageId?: string;
+    };
     /** 是否显示时长（视频角标 / 音频时间） */
     showTime?: boolean;
     show_time?: boolean;
@@ -456,6 +464,11 @@ interface RenderContext {
      * 客户端把 body paddingTop 从 12 改为 8。由 index.ts 在渲染 body 前注入。
      */
     bodyPaddingTop?: number;
+    /**
+     * 是否处于 form 容器内。真机 select_img 仅在表单内显示选中态 checkbox/radio，
+     * 表单外只是可点击的图片选项。form 渲染子元素时注入，不改变外部 ctx。
+     */
+    inForm?: boolean;
 }
 /** 组件渲染函数 */
 type ComponentFn = (el: CardElement, ctx: RenderContext) => VNode | null;

package/dist/index.d.ts

@@ -100,6 +100,14 @@ interface ElementProperty {
     coverImageID?: string;
     image_key?: string;
     cover_image_key?: string;
+    /** 公开 DSL 官方封面形态 cover: { img_key }；部分 RAW 嵌套 imageID / image_id 等 */
+    cover?: string | {
+        img_key?: string;
+        imageID?: string;
+        image_id?: string;
+        cover_image_id?: string;
+        coverImageId?: string;
+    };
     /** 是否显示时长（视频角标 / 音频时间） */
     showTime?: boolean;
     show_time?: boolean;
@@ -456,6 +464,11 @@ interface RenderContext {
      * 客户端把 body paddingTop 从 12 改为 8。由 index.ts 在渲染 body 前注入。
      */
     bodyPaddingTop?: number;
+    /**
+     * 是否处于 form 容器内。真机 select_img 仅在表单内显示选中态 checkbox/radio，
+     * 表单外只是可点击的图片选项。form 渲染子元素时注入，不改变外部 ctx。
+     */
+    inForm?: boolean;
 }
 /** 组件渲染函数 */
 type ComponentFn = (el: CardElement, ctx: RenderContext) => VNode | null;

package/dist/index.js

@@ -686,7 +686,8 @@ function resolveMediaSrc(p, kind, ctx) {
   return null;
 }
 function resolveVideoCoverSrc(p, ctx) {
-  const coverId = p.coverImageID ?? p.image_key ?? p.cover_image_key;
+  const cover = p.cover;
+  const coverId = p.coverImageID ?? p.image_key ?? p.cover_image_key ?? (typeof cover === "string" ? cover : cover?.img_key ?? cover?.imageID ?? cover?.image_id ?? cover?.cover_image_id ?? cover?.coverImageId);
   if (!coverId) return null;
   return resolveImageSrc({ imageID: coverId }, ctx);
 }
@@ -848,8 +849,13 @@ function resolveCornerRadius(property) {
   }
   if (direct != null) return sizeToPx(direct);
   const echo = property.cornerRadiusValue;
-  if (echo && typeof echo.value === "number") return echo.value + "px";
-  if (echo && typeof echo.value === "string" && echo.value.trim()) return sizeToPx(echo.value);
+  if (typeof echo === "number") return echo + "px";
+  if (typeof echo === "string" && echo.trim()) return sizeToPx(echo);
+  if (echo && typeof echo === "object") {
+    const value = echo.value;
+    if (typeof value === "number") return value + "px";
+    if (typeof value === "string" && value.trim()) return sizeToPx(value);
+  }
   return void 0;
 }
 function boxToStyle(box) {
@@ -1350,6 +1356,90 @@ var BASE_STYLES_CSS = `/**
   font-size: 12px;
 }
 
+/* ---- img_combination \u591A\u56FE\u6DF7\u6392\uFF08\u6BD4\u4F8B\u9006\u5411\u81EA\u7F51\u9875\u7248 .universal-card-img-combination\uFF09 ---- */
+.universal-card-img-combination { display: flex; width: 100%; justify-content: space-between; }
+.universal-card-img-combination__item { min-width: 0; overflow: hidden; }
+.universal-card-img-combination__item > .universal-card-image__host { display: block; width: 100%; height: 100%; object-fit: cover; }
+.universal-card-img-combination__item > .universal-card-image__placeholder { width: 100%; height: 100%; }
+/* double\uFF1A\u5DE6\u7A84(32.4%, 24:33) + \u53F3\u5BBD(67.6%, 49.33:33) */
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(odd) {
+  width: 32.4%; aspect-ratio: 24 / 33;
+}
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(2n) {
+  width: calc(67.6% - 4px); aspect-ratio: 49.33 / 33;
+}
+/* triple\uFF1A\u5DE6\u5927\u56FE(66.5%, 1:1) + \u53F3\u5217\u4E24\u5F20\u5C0F\u56FE */
+.universal-card-img-combination--triple .universal-card-img-combination__left {
+  width: 66.5%; aspect-ratio: 1; margin-right: 1%;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right {
+  width: 33%; display: flex; flex-direction: column; justify-content: space-between;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item {
+  width: 100%; aspect-ratio: 1;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item:first-child {
+  margin-bottom: 1.5%;
+}
+/* bisect / trisect\uFF1A\u7B49\u5BBD\u65B9\u683C\u6362\u884C */
+.universal-card-img-combination--bisect { flex-wrap: wrap; gap: 4px; }
+.universal-card-img-combination--bisect .universal-card-img-combination__item {
+  width: calc(50% - 2px); aspect-ratio: 1;
+}
+.universal-card-img-combination--trisect { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
+.universal-card-img-combination--trisect .universal-card-img-combination__item {
+  width: calc(33.33% - 2.67px); aspect-ratio: 1;
+}
+
+/* ---- select_img \u591A\u56FE\u9009\u62E9\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 .universal-card-select-img\uFF09 ---- */
+.universal-card-select-img {
+  width: 100%; max-width: 100%; display: grid; grid-gap: 4px; box-sizing: border-box;
+}
+.universal-card-select-img--stretch { grid-template-columns: 1fr; }
+.universal-card-select-img--bisect { grid-template-columns: 1fr 1fr; }
+.universal-card-select-img--trisect { grid-template-columns: 1fr 1fr 1fr; }
+.universal-card-select-img__item-wrapper { position: relative; border-radius: 6px; }
+.universal-card-select-img__item-wrapper::after {
+  content: " "; position: absolute; inset: 0; box-sizing: border-box;
+  border: 1px solid var(--N300); border-radius: 6px; pointer-events: none; z-index: 1;
+}
+.universal-card-select-img__item-wrapper--selected::after { border: 2px solid var(--B500); }
+.universal-card-select-img__item {
+  position: relative; overflow: hidden; box-sizing: border-box; border-radius: 6px;
+  cursor: pointer; width: 100%;
+}
+.universal-card-select-img__item--disabled { cursor: not-allowed; }
+.universal-card-select-img__item--disabled::after {
+  content: " "; position: absolute; inset: 0; z-index: 1;
+  background-color: rgba(255, 255, 255, .5);
+}
+.universal-card-select-img__item > .universal-card-image__host {
+  display: block; width: 100%; height: 100%; object-fit: cover;
+}
+.universal-card-select-img__item > .universal-card-image__placeholder {
+  width: 100%; height: 100%;
+}
+/* \u8868\u5355\u5185\u590D\u9009/\u5355\u9009\u6807\u8BB0\uFF08\u771F\u673A\u4EC5 in-form \u663E\u793A\uFF1B\u8868\u5355\u5916\u7528\u9009\u4E2D\u63CF\u8FB9\u8868\u8FBE\u72B6\u6001\uFF09 */
+.universal-card-select-img__checkbox {
+  position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 8px; cursor: pointer;
+}
+.universal-card-select-img__checkbox--disabled { cursor: not-allowed; }
+.universal-card-select-img__checkbox-box {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
+  background-color: rgba(0, 0, 0, .15); border: 1px solid #eff0f1;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
+}
+.universal-card-select-img__checkbox-box--square { border-radius: 4px; }
+.universal-card-select-img__checkbox-box--checked {
+  background-color: var(--B500); border-color: var(--B500);
+}
+.universal-card-select-img__checkbox-box--checked::after {
+  content: ""; width: 3.5px; height: 7px;
+  border: solid #fff; border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translateY(-1px);
+}
+
 /* ---- \u6309\u94AE ---- */
 /* \u98DE\u4E66\u6309\u94AE\u6587\u672C\u662F\u7EAF\u6587\u672C\u3001\u5355\u884C\uFF1Amin-height \u5BB9\u7EB3\u5076\u53D1\u6362\u884C\uFF0C\u6587\u5B57\u8D85\u957F\u7701\u7565\u53F7\u6536\u5C3E\u3002
    \u6837\u5F0F\u5168\u96C6\u9006\u5411\u81EA\u7F51\u9875\u7248 ud__button\uFF1A\u4E09\u5927\u65CF\u2014\u2014outlined\uFF08\u63CF\u8FB9\uFF09/ text\uFF08\u7EAF\u6587\u5B57\uFF09/ filled\uFF08\u5B9E\u5FC3\uFF09\uFF0C
@@ -5986,6 +6076,123 @@ function registerBuiltins() {
       src ? h("img", { className: `${CLS}-image__host`, src, alt: altText, style: imgStyle }) : h("div", { className: `${CLS}-image__placeholder`, style: imgStyle }, altText || "[\u56FE\u7247]")
     );
   });
+  const IMG_COMBINATION_LIMIT = {
+    double: 2,
+    triple: 3
+  };
+  function renderCombinationImage(item, cornerRadius, ctx) {
+    const src = resolveImageSrc(item, ctx);
+    const style = {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      display: "block"
+    };
+    if (cornerRadius) style.borderRadius = cornerRadius;
+    return src ? h("img", { className: `${CLS}-image__host`, src, alt: "", style }) : h("div", { className: `${CLS}-image__placeholder`, style }, "[\u56FE\u7247]");
+  }
+  registerComponent("img_combination", (el, ctx) => {
+    const p = el.property || {};
+    const rawList = Array.isArray(p.imgList) ? p.imgList : Array.isArray(p.img_list) ? p.img_list : [];
+    if (rawList.length === 0) return null;
+    const mode = String(p.combinationMode ?? p.combination_mode ?? "double");
+    const limit = IMG_COMBINATION_LIMIT[mode];
+    const list = (limit ? rawList.slice(0, limit) : rawList).map((item) => typeof item === "string" ? { img_key: item } : item).filter(isRecord);
+    if (list.length === 0) return null;
+    const cornerRadius = resolveCornerRadius(p);
+    const containerStyle = {};
+    applyOuterMargin(containerStyle, p.margin);
+    const cls = `${CLS}-img-combination ${CLS}-img-combination--${mode}`;
+    const itemNode = (item) => h(
+      "div",
+      { className: `${CLS}-img-combination__item` },
+      renderCombinationImage(item, cornerRadius, ctx)
+    );
+    if (mode === "triple") {
+      const [first, ...rest] = list;
+      return h(
+        "div",
+        { className: cls, style: containerStyle },
+        h(
+          "div",
+          { className: `${CLS}-img-combination__item ${CLS}-img-combination__left` },
+          renderCombinationImage(first, cornerRadius, ctx)
+        ),
+        h("div", { className: `${CLS}-img-combination__right` }, rest.map(itemNode))
+      );
+    }
+    return h("div", { className: cls, style: containerStyle }, list.map(itemNode));
+  });
+  function readSelectImgValues(p) {
+    const raw = p.selectedValues ?? p.selected_values ?? p.value;
+    let value = raw;
+    if (typeof value === "string") {
+      try {
+        value = JSON.parse(value);
+      } catch {
+        return typeof value === "string" && value ? [value] : [];
+      }
+    }
+    if (isRecord(value) && Array.isArray(value.value)) value = value.value;
+    if (!Array.isArray(value)) return [];
+    return value.filter((item) => typeof item === "string");
+  }
+  function renderSelectImgCheckbox(checked, disabled, multiple) {
+    const boxClass = `${CLS}-select-img__checkbox-box` + (multiple ? ` ${CLS}-select-img__checkbox-box--square` : "") + (checked ? ` ${CLS}-select-img__checkbox-box--checked` : "");
+    return h(
+      "div",
+      {
+        className: `${CLS}-select-img__checkbox` + (disabled ? ` ${CLS}-select-img__checkbox--disabled` : "")
+      },
+      h("span", { className: boxClass })
+    );
+  }
+  registerComponent("select_img", (el, ctx) => {
+    const p = el.property || {};
+    const options = Array.isArray(p.options) ? p.options : [];
+    if (options.length === 0) return null;
+    const layout = String(p.layout ?? "bisect");
+    const aspectRatio = String(p.aspectRatio ?? p.aspect_ratio ?? "16:9").replace(":", "/");
+    const multiple = p.multiSelect === true || p.multi_select === true;
+    const disabledAll = p.disabled === true;
+    const selected = readSelectImgValues(p);
+    const containerStyle = {};
+    applyOuterMargin(containerStyle, p.margin);
+    const items = options.map((rawOption) => {
+      const option = isRecord(rawOption) ? rawOption : { img_key: rawOption };
+      const value = typeof option.value === "string" ? option.value : void 0;
+      const isSelected = value !== void 0 && selected.includes(value);
+      const disabled = disabledAll || option.disabled === true;
+      const tip = disabled ? extractText(option.disabled_tips ?? option.disabledTips) : extractText(option.hover_tips ?? option.hoverTips);
+      const src = resolveImageSrc(option, ctx);
+      const wrapperClass = `${CLS}-select-img__item-wrapper` + (isSelected ? ` ${CLS}-select-img__item-wrapper--selected` : "") + (disabled ? ` ${CLS}-select-img__item-wrapper--disabled` : "");
+      const itemClass = `${CLS}-select-img__item` + (disabled ? ` ${CLS}-select-img__item--disabled` : "");
+      return h(
+        "div",
+        { className: wrapperClass },
+        h(
+          "div",
+          { className: itemClass, style: { aspectRatio }, title: tip || void 0 },
+          ctx.inForm ? renderSelectImgCheckbox(isSelected, disabled, multiple) : null,
+          src ? h("img", {
+            className: `${CLS}-image__host`,
+            src,
+            alt: "",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }) : h(
+            "div",
+            { className: `${CLS}-image__placeholder`, style: { width: "100%", height: "100%" } },
+            "[\u56FE\u7247]"
+          )
+        )
+      );
+    });
+    return h(
+      "div",
+      { className: `${CLS}-select-img ${CLS}-select-img--${layout}`, style: containerStyle },
+      items
+    );
+  });
   registerComponent("video", (el, ctx) => {
     const p = el.property || {};
     const src = resolveMediaSrc(p, "video", ctx);
@@ -6361,7 +6568,7 @@ function registerBuiltins() {
     );
   });
   registerComponent("form", (el, ctx) => {
-    const children = renderElements(el.property?.elements, ctx);
+    const children = renderElements(el.property?.elements, { ...ctx, inForm: true });
     const className = `${CLS}-form`;
     if (!ctx.options.interactive) return h("div", { className }, children);
     const name = typeof el.property?.name === "string" ? el.property.name : "";

package/dist/styles.css

@@ -380,6 +380,90 @@
   font-size: 12px;
 }
 
+/* ---- img_combination 多图混排（比例逆向自网页版 .universal-card-img-combination） ---- */
+.universal-card-img-combination { display: flex; width: 100%; justify-content: space-between; }
+.universal-card-img-combination__item { min-width: 0; overflow: hidden; }
+.universal-card-img-combination__item > .universal-card-image__host { display: block; width: 100%; height: 100%; object-fit: cover; }
+.universal-card-img-combination__item > .universal-card-image__placeholder { width: 100%; height: 100%; }
+/* double：左窄(32.4%, 24:33) + 右宽(67.6%, 49.33:33) */
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(odd) {
+  width: 32.4%; aspect-ratio: 24 / 33;
+}
+.universal-card-img-combination--double .universal-card-img-combination__item:nth-child(2n) {
+  width: calc(67.6% - 4px); aspect-ratio: 49.33 / 33;
+}
+/* triple：左大图(66.5%, 1:1) + 右列两张小图 */
+.universal-card-img-combination--triple .universal-card-img-combination__left {
+  width: 66.5%; aspect-ratio: 1; margin-right: 1%;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right {
+  width: 33%; display: flex; flex-direction: column; justify-content: space-between;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item {
+  width: 100%; aspect-ratio: 1;
+}
+.universal-card-img-combination--triple .universal-card-img-combination__right .universal-card-img-combination__item:first-child {
+  margin-bottom: 1.5%;
+}
+/* bisect / trisect：等宽方格换行 */
+.universal-card-img-combination--bisect { flex-wrap: wrap; gap: 4px; }
+.universal-card-img-combination--bisect .universal-card-img-combination__item {
+  width: calc(50% - 2px); aspect-ratio: 1;
+}
+.universal-card-img-combination--trisect { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
+.universal-card-img-combination--trisect .universal-card-img-combination__item {
+  width: calc(33.33% - 2.67px); aspect-ratio: 1;
+}
+
+/* ---- select_img 多图选择（对齐网页版 .universal-card-select-img） ---- */
+.universal-card-select-img {
+  width: 100%; max-width: 100%; display: grid; grid-gap: 4px; box-sizing: border-box;
+}
+.universal-card-select-img--stretch { grid-template-columns: 1fr; }
+.universal-card-select-img--bisect { grid-template-columns: 1fr 1fr; }
+.universal-card-select-img--trisect { grid-template-columns: 1fr 1fr 1fr; }
+.universal-card-select-img__item-wrapper { position: relative; border-radius: 6px; }
+.universal-card-select-img__item-wrapper::after {
+  content: " "; position: absolute; inset: 0; box-sizing: border-box;
+  border: 1px solid var(--N300); border-radius: 6px; pointer-events: none; z-index: 1;
+}
+.universal-card-select-img__item-wrapper--selected::after { border: 2px solid var(--B500); }
+.universal-card-select-img__item {
+  position: relative; overflow: hidden; box-sizing: border-box; border-radius: 6px;
+  cursor: pointer; width: 100%;
+}
+.universal-card-select-img__item--disabled { cursor: not-allowed; }
+.universal-card-select-img__item--disabled::after {
+  content: " "; position: absolute; inset: 0; z-index: 1;
+  background-color: rgba(255, 255, 255, .5);
+}
+.universal-card-select-img__item > .universal-card-image__host {
+  display: block; width: 100%; height: 100%; object-fit: cover;
+}
+.universal-card-select-img__item > .universal-card-image__placeholder {
+  width: 100%; height: 100%;
+}
+/* 表单内复选/单选标记（真机仅 in-form 显示；表单外用选中描边表达状态） */
+.universal-card-select-img__checkbox {
+  position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 8px; cursor: pointer;
+}
+.universal-card-select-img__checkbox--disabled { cursor: not-allowed; }
+.universal-card-select-img__checkbox-box {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
+  background-color: rgba(0, 0, 0, .15); border: 1px solid #eff0f1;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
+}
+.universal-card-select-img__checkbox-box--square { border-radius: 4px; }
+.universal-card-select-img__checkbox-box--checked {
+  background-color: var(--B500); border-color: var(--B500);
+}
+.universal-card-select-img__checkbox-box--checked::after {
+  content: ""; width: 3.5px; height: 7px;
+  border: solid #fff; border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translateY(-1px);
+}
+
 /* ---- 按钮 ---- */
 /* 飞书按钮文本是纯文本、单行：min-height 容纳偶发换行，文字超长省略号收尾。
    样式全集逆向自网页版 ud__button：三大族——outlined（描边）/ text（纯文字）/ filled（实心），

package/package.json

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