@open-feishu-card/renderer 0.3.0 → 0.3.2

package/dist/all.css

@@ -288,6 +288,13 @@
   word-break: break-word;
   vertical-align: middle;
 }
+/* 前缀图标（markdown.icon）：与首行文字垂直居中，右侧留 4px。
+   容器是 flex row，图标作为首个 flex 子项参与排布。 */
+.universal-card-markdown__icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; margin-right: 4px;
+  height: 1.6em;
+}
 .universal-card-markdown__children {
   flex: 1;
   min-width: 0;
@@ -443,6 +450,32 @@
 /* 非跳转按钮：保留外观，但不可点（默认光标、无 hover、不响应点击） */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow 折叠按钮组 ---- */
+/* 真机是一个「…」图标按钮，点击弹出选项菜单。静态预览只画触发器（--static 不可点）。 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* 去掉 <summary> 的浏览器默认三角标记 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* 菜单：默认隐藏，<details open> 时浮在触发器下方 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- 表单（预览：仅透传，无表单语义） ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }

package/dist/index.cjs

@@ -1258,6 +1258,13 @@ var BASE_STYLES_CSS = `/**
   word-break: break-word;
   vertical-align: middle;
 }
+/* \u524D\u7F00\u56FE\u6807\uFF08markdown.icon\uFF09\uFF1A\u4E0E\u9996\u884C\u6587\u5B57\u5782\u76F4\u5C45\u4E2D\uFF0C\u53F3\u4FA7\u7559 4px\u3002
+   \u5BB9\u5668\u662F flex row\uFF0C\u56FE\u6807\u4F5C\u4E3A\u9996\u4E2A flex \u5B50\u9879\u53C2\u4E0E\u6392\u5E03\u3002 */
+.universal-card-markdown__icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; margin-right: 4px;
+  height: 1.6em;
+}
 .universal-card-markdown__children {
   flex: 1;
   min-width: 0;
@@ -1413,6 +1420,32 @@ var BASE_STYLES_CSS = `/**
 /* \u975E\u8DF3\u8F6C\u6309\u94AE\uFF1A\u4FDD\u7559\u5916\u89C2\uFF0C\u4F46\u4E0D\u53EF\u70B9\uFF08\u9ED8\u8BA4\u5149\u6807\u3001\u65E0 hover\u3001\u4E0D\u54CD\u5E94\u70B9\u51FB\uFF09 */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow \u6298\u53E0\u6309\u94AE\u7EC4 ---- */
+/* \u771F\u673A\u662F\u4E00\u4E2A\u300C\u2026\u300D\u56FE\u6807\u6309\u94AE\uFF0C\u70B9\u51FB\u5F39\u51FA\u9009\u9879\u83DC\u5355\u3002\u9759\u6001\u9884\u89C8\u53EA\u753B\u89E6\u53D1\u5668\uFF08--static \u4E0D\u53EF\u70B9\uFF09\u3002 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* \u53BB\u6389 <summary> \u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* \u83DC\u5355\uFF1A\u9ED8\u8BA4\u9690\u85CF\uFF0C<details open> \u65F6\u6D6E\u5728\u89E6\u53D1\u5668\u4E0B\u65B9 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
@@ -5699,15 +5732,50 @@ function registerBuiltins() {
     }
     const childCtx = { ...ctx, textMetrics: { fontSize, lineHeight } };
     const linesStyle = lineClampStyle(p.lines ?? p.textLines);
+    const iconVNode = renderPrefixIcon(p.icon, ctx, fontSize);
     return h(
       "div",
       { className: `${CLS}-markdown`, style },
+      iconVNode,
       h("div", {
         className: `${CLS}-markdown__children`,
         style: Object.keys(linesStyle).length ? linesStyle : void 0
       }, renderElements(p.elements, childCtx))
     );
   }
+  function renderPrefixIcon(raw, ctx, fontSize) {
+    if (!isRecord(raw)) return null;
+    const inner = isRecord(raw.property) ? raw.property : raw;
+    const tag = typeof raw.tag === "string" ? raw.tag : "standard_icon";
+    const sizeProp = typeof inner.size === "string" ? inner.size : typeof raw.size === "string" ? raw.size : void 0;
+    if (tag === "custom_icon") {
+      const imgKey = typeof inner.img_key === "string" ? inner.img_key : typeof raw.img_key === "string" ? raw.img_key : void 0;
+      if (!imgKey) return null;
+      const src = resolveImageSrc({ img_key: imgKey }, ctx) ?? imgKey;
+      const sizePx = sizeProp && /^\d/.test(sizeProp) ? Number(/^(\d+(?:\.\d+)?)/.exec(sizeProp)[1]) : fontSize;
+      return h(
+        "span",
+        { className: `${CLS}-markdown__icon` },
+        h("img", {
+          src,
+          alt: "",
+          style: { width: sizePx + "px", height: sizePx + "px", objectFit: "contain" }
+        })
+      );
+    }
+    const token = typeof inner.token === "string" ? inner.token : "";
+    if (!token) return null;
+    const iconNode = renderIcon({
+      property: {
+        token,
+        color: typeof inner.color === "string" ? inner.color : void 0,
+        // 未显式给 size 时跟随文本字号，避免回落到固定 16px 与文字不搭
+        size: sizeProp ?? fontSize + "px"
+      }
+    }, ctx);
+    if (!iconNode) return null;
+    return h("span", { className: `${CLS}-markdown__icon` }, iconNode);
+  }
   registerComponent("markdown", MarkdownComponent);
   registerComponent("markdown_v1", MarkdownComponent);
   function lineClampStyle(lines) {
@@ -6035,8 +6103,9 @@ function registerBuiltins() {
     const tip = extractText(p.hoverTips);
     const borderNamed = p.border_color ?? p.borderColor;
     const borderCustom = adapter.resolveCustomBorderLight(p);
-    const borderColor = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
-    const hasBorder = borderColor != null || p.hasBorder === true || p.has_border === true;
+    const borderColorResolved = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
+    const hasBorder = p.hasBorder === true || p.has_border === true;
+    const borderColor = hasBorder ? borderColorResolved : void 0;
     const cls = `${CLS}-interactive-container` + (clickable ? ` ${CLS}-interactive-container--action` : "") + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
     const style = {};
     const bg = propertyBackgroundColor(p);
@@ -6204,6 +6273,43 @@ function registerBuiltins() {
     };
     return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
   }
+  registerComponent("overflow", (el, ctx) => {
+    const p = el.property || {};
+    const disabled = p.disabled === true;
+    const options = Array.isArray(p.options) ? p.options : [];
+    const widthTok = p.width ?? p.widthValue?.value;
+    const block = widthTok === "fill";
+    const triggerIcon = renderIcon(
+      { property: { token: "more_outlined", size: "14px" } },
+      ctx
+    );
+    const triggerCls = `${CLS}-button ${CLS}-button--default ${CLS}-button--static ${CLS}-overflow__trigger` + (disabled ? ` ${CLS}-button--disabled` : "") + (block ? ` ${CLS}-button--block` : "");
+    const trigger = triggerIcon ? h("span", { className: triggerCls }, h("span", { className: `${CLS}-button__icon` }, triggerIcon)) : h("span", { className: triggerCls }, "\xB7\xB7\xB7");
+    const items = options.map((raw) => {
+      const opt = isRecord(raw) ? raw : {};
+      const textObj = opt.text;
+      const label = (isRecord(textObj) && typeof textObj.content === "string" ? textObj.content : extractPlainText(textObj)) || extractPlainText(opt);
+      const multi = isRecord(opt.multi_url) ? opt.multi_url : void 0;
+      const href = resolveURL(multi?.url ?? opt.url);
+      const itemCls = `${CLS}-overflow__item`;
+      if (href && !disabled) {
+        return h("a", { className: itemCls, href, target: "_blank", rel: "noopener" }, label);
+      }
+      return h("span", { className: itemCls }, label);
+    });
+    const style = {};
+    if (p.margin) applyOuterMargin(style, p.margin);
+    const styleProp = Object.keys(style).length ? { style } : {};
+    if (!ctx.options.interactive) {
+      return h("span", { className: `${CLS}-overflow ${CLS}-overflow--static`, ...styleProp }, trigger);
+    }
+    return h(
+      "details",
+      { className: `${CLS}-overflow`, ...styleProp },
+      h("summary", { className: `${CLS}-overflow__summary` }, trigger),
+      h("div", { className: `${CLS}-overflow__menu` }, items)
+    );
+  });
   registerComponent("form", (el, ctx) => {
     const children = renderElements(el.property?.elements, ctx);
     const className = `${CLS}-form`;

package/dist/index.js

@@ -1257,6 +1257,13 @@ var BASE_STYLES_CSS = `/**
   word-break: break-word;
   vertical-align: middle;
 }
+/* \u524D\u7F00\u56FE\u6807\uFF08markdown.icon\uFF09\uFF1A\u4E0E\u9996\u884C\u6587\u5B57\u5782\u76F4\u5C45\u4E2D\uFF0C\u53F3\u4FA7\u7559 4px\u3002
+   \u5BB9\u5668\u662F flex row\uFF0C\u56FE\u6807\u4F5C\u4E3A\u9996\u4E2A flex \u5B50\u9879\u53C2\u4E0E\u6392\u5E03\u3002 */
+.universal-card-markdown__icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; margin-right: 4px;
+  height: 1.6em;
+}
 .universal-card-markdown__children {
   flex: 1;
   min-width: 0;
@@ -1412,6 +1419,32 @@ var BASE_STYLES_CSS = `/**
 /* \u975E\u8DF3\u8F6C\u6309\u94AE\uFF1A\u4FDD\u7559\u5916\u89C2\uFF0C\u4F46\u4E0D\u53EF\u70B9\uFF08\u9ED8\u8BA4\u5149\u6807\u3001\u65E0 hover\u3001\u4E0D\u54CD\u5E94\u70B9\u51FB\uFF09 */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow \u6298\u53E0\u6309\u94AE\u7EC4 ---- */
+/* \u771F\u673A\u662F\u4E00\u4E2A\u300C\u2026\u300D\u56FE\u6807\u6309\u94AE\uFF0C\u70B9\u51FB\u5F39\u51FA\u9009\u9879\u83DC\u5355\u3002\u9759\u6001\u9884\u89C8\u53EA\u753B\u89E6\u53D1\u5668\uFF08--static \u4E0D\u53EF\u70B9\uFF09\u3002 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* \u53BB\u6389 <summary> \u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* \u83DC\u5355\uFF1A\u9ED8\u8BA4\u9690\u85CF\uFF0C<details open> \u65F6\u6D6E\u5728\u89E6\u53D1\u5668\u4E0B\u65B9 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
@@ -5698,15 +5731,50 @@ function registerBuiltins() {
     }
     const childCtx = { ...ctx, textMetrics: { fontSize, lineHeight } };
     const linesStyle = lineClampStyle(p.lines ?? p.textLines);
+    const iconVNode = renderPrefixIcon(p.icon, ctx, fontSize);
     return h(
       "div",
       { className: `${CLS}-markdown`, style },
+      iconVNode,
       h("div", {
         className: `${CLS}-markdown__children`,
         style: Object.keys(linesStyle).length ? linesStyle : void 0
       }, renderElements(p.elements, childCtx))
     );
   }
+  function renderPrefixIcon(raw, ctx, fontSize) {
+    if (!isRecord(raw)) return null;
+    const inner = isRecord(raw.property) ? raw.property : raw;
+    const tag = typeof raw.tag === "string" ? raw.tag : "standard_icon";
+    const sizeProp = typeof inner.size === "string" ? inner.size : typeof raw.size === "string" ? raw.size : void 0;
+    if (tag === "custom_icon") {
+      const imgKey = typeof inner.img_key === "string" ? inner.img_key : typeof raw.img_key === "string" ? raw.img_key : void 0;
+      if (!imgKey) return null;
+      const src = resolveImageSrc({ img_key: imgKey }, ctx) ?? imgKey;
+      const sizePx = sizeProp && /^\d/.test(sizeProp) ? Number(/^(\d+(?:\.\d+)?)/.exec(sizeProp)[1]) : fontSize;
+      return h(
+        "span",
+        { className: `${CLS}-markdown__icon` },
+        h("img", {
+          src,
+          alt: "",
+          style: { width: sizePx + "px", height: sizePx + "px", objectFit: "contain" }
+        })
+      );
+    }
+    const token = typeof inner.token === "string" ? inner.token : "";
+    if (!token) return null;
+    const iconNode = renderIcon({
+      property: {
+        token,
+        color: typeof inner.color === "string" ? inner.color : void 0,
+        // 未显式给 size 时跟随文本字号，避免回落到固定 16px 与文字不搭
+        size: sizeProp ?? fontSize + "px"
+      }
+    }, ctx);
+    if (!iconNode) return null;
+    return h("span", { className: `${CLS}-markdown__icon` }, iconNode);
+  }
   registerComponent("markdown", MarkdownComponent);
   registerComponent("markdown_v1", MarkdownComponent);
   function lineClampStyle(lines) {
@@ -6034,8 +6102,9 @@ function registerBuiltins() {
     const tip = extractText(p.hoverTips);
     const borderNamed = p.border_color ?? p.borderColor;
     const borderCustom = resolveCustomBorderLight(p);
-    const borderColor = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
-    const hasBorder = borderColor != null || p.hasBorder === true || p.has_border === true;
+    const borderColorResolved = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
+    const hasBorder = p.hasBorder === true || p.has_border === true;
+    const borderColor = hasBorder ? borderColorResolved : void 0;
     const cls = `${CLS}-interactive-container` + (clickable ? ` ${CLS}-interactive-container--action` : "") + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
     const style = {};
     const bg = propertyBackgroundColor(p);
@@ -6203,6 +6272,43 @@ function registerBuiltins() {
     };
     return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
   }
+  registerComponent("overflow", (el, ctx) => {
+    const p = el.property || {};
+    const disabled = p.disabled === true;
+    const options = Array.isArray(p.options) ? p.options : [];
+    const widthTok = p.width ?? p.widthValue?.value;
+    const block = widthTok === "fill";
+    const triggerIcon = renderIcon(
+      { property: { token: "more_outlined", size: "14px" } },
+      ctx
+    );
+    const triggerCls = `${CLS}-button ${CLS}-button--default ${CLS}-button--static ${CLS}-overflow__trigger` + (disabled ? ` ${CLS}-button--disabled` : "") + (block ? ` ${CLS}-button--block` : "");
+    const trigger = triggerIcon ? h("span", { className: triggerCls }, h("span", { className: `${CLS}-button__icon` }, triggerIcon)) : h("span", { className: triggerCls }, "\xB7\xB7\xB7");
+    const items = options.map((raw) => {
+      const opt = isRecord(raw) ? raw : {};
+      const textObj = opt.text;
+      const label = (isRecord(textObj) && typeof textObj.content === "string" ? textObj.content : extractPlainText(textObj)) || extractPlainText(opt);
+      const multi = isRecord(opt.multi_url) ? opt.multi_url : void 0;
+      const href = resolveURL(multi?.url ?? opt.url);
+      const itemCls = `${CLS}-overflow__item`;
+      if (href && !disabled) {
+        return h("a", { className: itemCls, href, target: "_blank", rel: "noopener" }, label);
+      }
+      return h("span", { className: itemCls }, label);
+    });
+    const style = {};
+    if (p.margin) applyOuterMargin(style, p.margin);
+    const styleProp = Object.keys(style).length ? { style } : {};
+    if (!ctx.options.interactive) {
+      return h("span", { className: `${CLS}-overflow ${CLS}-overflow--static`, ...styleProp }, trigger);
+    }
+    return h(
+      "details",
+      { className: `${CLS}-overflow`, ...styleProp },
+      h("summary", { className: `${CLS}-overflow__summary` }, trigger),
+      h("div", { className: `${CLS}-overflow__menu` }, items)
+    );
+  });
   registerComponent("form", (el, ctx) => {
     const children = renderElements(el.property?.elements, ctx);
     const className = `${CLS}-form`;

package/dist/styles.css

@@ -288,6 +288,13 @@
   word-break: break-word;
   vertical-align: middle;
 }
+/* 前缀图标（markdown.icon）：与首行文字垂直居中，右侧留 4px。
+   容器是 flex row，图标作为首个 flex 子项参与排布。 */
+.universal-card-markdown__icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; margin-right: 4px;
+  height: 1.6em;
+}
 .universal-card-markdown__children {
   flex: 1;
   min-width: 0;
@@ -443,6 +450,32 @@
 /* 非跳转按钮：保留外观，但不可点（默认光标、无 hover、不响应点击） */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow 折叠按钮组 ---- */
+/* 真机是一个「…」图标按钮，点击弹出选项菜单。静态预览只画触发器（--static 不可点）。 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* 去掉 <summary> 的浏览器默认三角标记 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* 菜单：默认隐藏，<details open> 时浮在触发器下方 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- 表单（预览：仅透传，无表单语义） ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }

package/package.json

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