@open-feishu-card/renderer 0.2.4 → 0.2.6

package/dist/all.css

@@ -324,6 +324,9 @@
 /* ---- 布局：column_set / column ---- */
 .universal-card-column-set { display: flex; }
 .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
+/* 真机：有背景才挂 --bg。column_set 额外 4px 内边距；column 只圆角、不加默认 padding。 */
+.universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
+.universal-card-column--bg { border-radius: 6px; }
 /* 列内纵向间距唯一来源是 column 组件输出的 flex row-gap（默认 8px，可被 vertical_spacing 覆盖）。
    这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
 

package/dist/index.cjs

@@ -1140,6 +1140,9 @@ var BASE_STYLES_CSS = `/**
 /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
 .universal-card-column-set { display: flex; }
 .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
+/* \u771F\u673A\uFF1A\u6709\u80CC\u666F\u624D\u6302 --bg\u3002column_set \u989D\u5916 4px \u5185\u8FB9\u8DDD\uFF1Bcolumn \u53EA\u5706\u89D2\u3001\u4E0D\u52A0\u9ED8\u8BA4 padding\u3002 */
+.universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
+.universal-card-column--bg { border-radius: 6px; }
 /* \u5217\u5185\u7EB5\u5411\u95F4\u8DDD\u552F\u4E00\u6765\u6E90\u662F column \u7EC4\u4EF6\u8F93\u51FA\u7684 flex row-gap\uFF08\u9ED8\u8BA4 8px\uFF0C\u53EF\u88AB vertical_spacing \u8986\u76D6\uFF09\u3002
    \u8FD9\u91CC\u4E0D\u518D\u7ED9\u76F8\u90BB\u5B50\u5143\u7D20\u8BBE margin-top\u2014\u2014\u5426\u5219\u4E0E row-gap \u53E0\u52A0\uFF0C\u95F4\u8DDD\u7FFB\u500D\u3002 */
 
@@ -5319,6 +5322,23 @@ function resolveChartBoxStyle(p, spec) {
   else style.aspectRatio = "16 / 9";
   return style;
 }
+function renderHeaderTextLeaf(node, ctx, className) {
+  if (!node) return null;
+  const tag = node.tag;
+  const p = node.property || {};
+  const isMd = tag === "markdown" || tag === "lark_md";
+  if (isMd) {
+    let elements = Array.isArray(p.elements) ? p.elements : [];
+    if (elements.length === 0 && typeof p.content === "string" && p.content) {
+      elements = parseMarkdown(p.content);
+    }
+    if (elements.length === 0) return null;
+    return h("div", { className }, renderElements(elements, ctx));
+  }
+  const content = typeof p.content === "string" ? p.content : "";
+  if (!content) return null;
+  return h("div", { className }, content);
+}
 function registerBuiltins() {
   if (registered) return;
   registered = true;
@@ -5337,8 +5357,6 @@ function registerBuiltins() {
     const p = el.property || {};
     const tplKey = p.template || "default";
     const tpl = HEADER_TEMPLATE[tplKey] || HEADER_TEMPLATE.default;
-    const title = p.title?.property?.content ?? "";
-    const subtitle = p.subtitle?.property?.content ?? "";
     const tags = p.text_tag_list || p.textTagList;
     const tagVNodes = Array.isArray(tags) && tags.length ? renderElements(tags, ctx) : [];
     const iconRaw = p.udIcon || p.icon;
@@ -5350,14 +5368,16 @@ function registerBuiltins() {
       const inner = renderIcon(iconEl, ctx);
       if (inner) iconVNode = h("div", { className: `${CLS}-header__icon` }, inner);
     }
+    const titleVNode = renderHeaderTextLeaf(p.title, ctx, `${CLS}-header__text-title`) ?? h("div", { className: `${CLS}-header__text-title` });
+    const subtitleVNode = renderHeaderTextLeaf(p.subtitle, ctx, `${CLS}-header__text-subtitle`);
     const textChildren = [
       h(
         "div",
         { className: `${CLS}-header__text-title-wrapper` },
-        h("div", { className: `${CLS}-header__text-title` }, String(title)),
+        titleVNode,
         tagVNodes.length ? h("div", { className: `${CLS}-header__tags` }, tagVNodes) : null
       ),
-      subtitle ? h("div", { className: `${CLS}-header__text-subtitle` }, String(subtitle)) : null
+      subtitleVNode
     ];
     return h(
       "div",
@@ -5493,15 +5513,13 @@ function registerBuiltins() {
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
     style.rowGap = (vGap != null ? spacingToPx(vGap) : 8) + "px";
     const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
-    if (bg) {
-      style.background = bg;
-      style.borderRadius = "6px";
-    }
+    if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     const mg = boxToStyle(p.margin);
     if (mg) style.margin = mg;
-    return h("div", { className: `${CLS}-column`, style }, renderElements(p.elements, ctx));
+    const cls = `${CLS}-column` + (bg ? ` ${CLS}-column--bg` : "");
+    return h("div", { className: cls, style }, renderElements(p.elements, ctx));
   });
   registerComponent("img", (el, ctx) => {
     const p = el.property || {};

package/dist/index.js

@@ -1139,6 +1139,9 @@ var BASE_STYLES_CSS = `/**
 /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
 .universal-card-column-set { display: flex; }
 .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
+/* \u771F\u673A\uFF1A\u6709\u80CC\u666F\u624D\u6302 --bg\u3002column_set \u989D\u5916 4px \u5185\u8FB9\u8DDD\uFF1Bcolumn \u53EA\u5706\u89D2\u3001\u4E0D\u52A0\u9ED8\u8BA4 padding\u3002 */
+.universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
+.universal-card-column--bg { border-radius: 6px; }
 /* \u5217\u5185\u7EB5\u5411\u95F4\u8DDD\u552F\u4E00\u6765\u6E90\u662F column \u7EC4\u4EF6\u8F93\u51FA\u7684 flex row-gap\uFF08\u9ED8\u8BA4 8px\uFF0C\u53EF\u88AB vertical_spacing \u8986\u76D6\uFF09\u3002
    \u8FD9\u91CC\u4E0D\u518D\u7ED9\u76F8\u90BB\u5B50\u5143\u7D20\u8BBE margin-top\u2014\u2014\u5426\u5219\u4E0E row-gap \u53E0\u52A0\uFF0C\u95F4\u8DDD\u7FFB\u500D\u3002 */
 
@@ -5318,6 +5321,23 @@ function resolveChartBoxStyle(p, spec) {
   else style.aspectRatio = "16 / 9";
   return style;
 }
+function renderHeaderTextLeaf(node, ctx, className) {
+  if (!node) return null;
+  const tag = node.tag;
+  const p = node.property || {};
+  const isMd = tag === "markdown" || tag === "lark_md";
+  if (isMd) {
+    let elements = Array.isArray(p.elements) ? p.elements : [];
+    if (elements.length === 0 && typeof p.content === "string" && p.content) {
+      elements = parseMarkdown(p.content);
+    }
+    if (elements.length === 0) return null;
+    return h("div", { className }, renderElements(elements, ctx));
+  }
+  const content = typeof p.content === "string" ? p.content : "";
+  if (!content) return null;
+  return h("div", { className }, content);
+}
 function registerBuiltins() {
   if (registered) return;
   registered = true;
@@ -5336,8 +5356,6 @@ function registerBuiltins() {
     const p = el.property || {};
     const tplKey = p.template || "default";
     const tpl = HEADER_TEMPLATE[tplKey] || HEADER_TEMPLATE.default;
-    const title = p.title?.property?.content ?? "";
-    const subtitle = p.subtitle?.property?.content ?? "";
     const tags = p.text_tag_list || p.textTagList;
     const tagVNodes = Array.isArray(tags) && tags.length ? renderElements(tags, ctx) : [];
     const iconRaw = p.udIcon || p.icon;
@@ -5349,14 +5367,16 @@ function registerBuiltins() {
       const inner = renderIcon(iconEl, ctx);
       if (inner) iconVNode = h("div", { className: `${CLS}-header__icon` }, inner);
     }
+    const titleVNode = renderHeaderTextLeaf(p.title, ctx, `${CLS}-header__text-title`) ?? h("div", { className: `${CLS}-header__text-title` });
+    const subtitleVNode = renderHeaderTextLeaf(p.subtitle, ctx, `${CLS}-header__text-subtitle`);
     const textChildren = [
       h(
         "div",
         { className: `${CLS}-header__text-title-wrapper` },
-        h("div", { className: `${CLS}-header__text-title` }, String(title)),
+        titleVNode,
         tagVNodes.length ? h("div", { className: `${CLS}-header__tags` }, tagVNodes) : null
       ),
-      subtitle ? h("div", { className: `${CLS}-header__text-subtitle` }, String(subtitle)) : null
+      subtitleVNode
     ];
     return h(
       "div",
@@ -5492,15 +5512,13 @@ function registerBuiltins() {
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
     style.rowGap = (vGap != null ? spacingToPx(vGap) : 8) + "px";
     const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
-    if (bg) {
-      style.background = bg;
-      style.borderRadius = "6px";
-    }
+    if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     const mg = boxToStyle(p.margin);
     if (mg) style.margin = mg;
-    return h("div", { className: `${CLS}-column`, style }, renderElements(p.elements, ctx));
+    const cls = `${CLS}-column` + (bg ? ` ${CLS}-column--bg` : "");
+    return h("div", { className: cls, style }, renderElements(p.elements, ctx));
   });
   registerComponent("img", (el, ctx) => {
     const p = el.property || {};

package/dist/styles.css

@@ -324,6 +324,9 @@
 /* ---- 布局：column_set / column ---- */
 .universal-card-column-set { display: flex; }
 .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
+/* 真机：有背景才挂 --bg。column_set 额外 4px 内边距；column 只圆角、不加默认 padding。 */
+.universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
+.universal-card-column--bg { border-radius: 6px; }
 /* 列内纵向间距唯一来源是 column 组件输出的 flex row-gap（默认 8px，可被 vertical_spacing 覆盖）。
    这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
 

package/package.json

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