@open-feishu-card/renderer 0.3.1 → 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;

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;
@@ -5725,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) {

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;
@@ -5724,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) {

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;

package/package.json

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