@open-feishu-card/renderer 0.2.11 → 0.2.12

package/dist/all.css

@@ -18,13 +18,13 @@
   line-height: 1.6;
   color: #1f2329;
   background-color: #fff;
+  position: relative;
   border-radius: 8px;
-  border: 1px solid #dee0e3;
+  /* 真机 root 默认无边框；showCardBorder 时才 outline（见 --has-border） */
   overflow: hidden;
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
-  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.08);
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* 正文 color:var(--O400) 等依赖这些变量；与飞书 :root light 色阶对齐 */
   --B50: #f0f4ff;
@@ -189,6 +189,7 @@
   /* 真机 light：--bg-float-overlay: var(--N50)。column_set background_style=grey 走此 token */
   --bg-float-overlay: var(--N50);
 }
+.universal-card-root--has-border { outline: 1px solid #dee0e3; }
 .universal-card-root *,
 .universal-card-root *::before,
 .universal-card-root *::after { box-sizing: border-box; }
@@ -271,7 +272,8 @@
   padding: 12px;
   display: flex;
   flex-direction: column;
-  row-gap: 8px;
+  row-gap: 12px;
+  column-gap: 12px;
   align-items: flex-start;
 }
 .universal-card-body > * { width: 100%; box-sizing: border-box; }
@@ -509,9 +511,12 @@
 .universal-card-interactive-container {
   display: flex; flex-direction: column; box-sizing: border-box;
   border-radius: 6px; padding: 0; text-decoration: none; color: inherit;
-  cursor: pointer; transition: background-color .1s;
+  row-gap: 4px;
+  transition: background-color .1s;
 }
-.universal-card-interactive-container:not(.universal-card-interactive-container--disabled):hover {
+/* 真机：cursor:pointer 与 hover 底只在 __action 层；纯展示容器（无 actions/url）保持默认箭头 */
+.universal-card-interactive-container--action { cursor: pointer; }
+.universal-card-interactive-container--action:not(.universal-card-interactive-container--disabled):hover {
   background-color: rgba(31, 35, 41, 0.05);
 }
 .universal-card-interactive-container--bordered { border: 1px solid #dee0e3; }

package/dist/index.cjs

@@ -706,13 +706,25 @@ function resolveURL(url) {
 function sizeToPx(v) {
   return typeof v === "number" ? v + "px" : String(v);
 }
+function marginToStyle(margin) {
+  if (typeof margin === "string" && margin.trim()) return margin.trim();
+  return boxToStyle(margin);
+}
+function resolveCornerRadius(property) {
+  if (!property) return void 0;
+  const direct = property.corner_radius ?? property.cornerRadius;
+  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);
+  return void 0;
+}
 function boxToStyle(box) {
   if (!box || typeof box !== "object") return null;
   const t = box.top?.value ?? 0;
   const r = box.right?.value ?? 0;
   const b = box.bottom?.value ?? 0;
   const l = box.left?.value ?? 0;
-  if (!t && !r && !b && !l) return null;
   return `${t}px ${r}px ${b}px ${l}px`;
 }
 function bgStyleToColor(style) {
@@ -843,13 +855,13 @@ var BASE_STYLES_CSS = `/**
   line-height: 1.6;
   color: #1f2329;
   background-color: #fff;
+  position: relative;
   border-radius: 8px;
-  border: 1px solid #dee0e3;
+  /* \u771F\u673A root \u9ED8\u8BA4\u65E0\u8FB9\u6846\uFF1BshowCardBorder \u65F6\u624D outline\uFF08\u89C1 --has-border\uFF09 */
   overflow: hidden;
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
-  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.08);
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* \u6B63\u6587 color:var(--O400) \u7B49\u4F9D\u8D56\u8FD9\u4E9B\u53D8\u91CF\uFF1B\u4E0E\u98DE\u4E66 :root light \u8272\u9636\u5BF9\u9F50 */
   --B50: #f0f4ff;
@@ -1014,6 +1026,7 @@ var BASE_STYLES_CSS = `/**
   /* \u771F\u673A light\uFF1A--bg-float-overlay: var(--N50)\u3002column_set background_style=grey \u8D70\u6B64 token */
   --bg-float-overlay: var(--N50);
 }
+.universal-card-root--has-border { outline: 1px solid #dee0e3; }
 .universal-card-root *,
 .universal-card-root *::before,
 .universal-card-root *::after { box-sizing: border-box; }
@@ -1096,7 +1109,8 @@ var BASE_STYLES_CSS = `/**
   padding: 12px;
   display: flex;
   flex-direction: column;
-  row-gap: 8px;
+  row-gap: 12px;
+  column-gap: 12px;
   align-items: flex-start;
 }
 .universal-card-body > * { width: 100%; box-sizing: border-box; }
@@ -1334,9 +1348,12 @@ var BASE_STYLES_CSS = `/**
 .universal-card-interactive-container {
   display: flex; flex-direction: column; box-sizing: border-box;
   border-radius: 6px; padding: 0; text-decoration: none; color: inherit;
-  cursor: pointer; transition: background-color .1s;
+  row-gap: 4px;
+  transition: background-color .1s;
 }
-.universal-card-interactive-container:not(.universal-card-interactive-container--disabled):hover {
+/* \u771F\u673A\uFF1Acursor:pointer \u4E0E hover \u5E95\u53EA\u5728 __action \u5C42\uFF1B\u7EAF\u5C55\u793A\u5BB9\u5668\uFF08\u65E0 actions/url\uFF09\u4FDD\u6301\u9ED8\u8BA4\u7BAD\u5934 */
+.universal-card-interactive-container--action { cursor: pointer; }
+.universal-card-interactive-container--action:not(.universal-card-interactive-container--disabled):hover {
   background-color: rgba(31, 35, 41, 0.05);
 }
 .universal-card-interactive-container--bordered { border: 1px solid #dee0e3; }
@@ -5418,6 +5435,8 @@ 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;
     const sizeKey = resolveTextSizeKey(p);
     let fontSize = BASE_FONT_SIZE;
     let lineHeight = BASE_FONT_SIZE + 8;
@@ -5689,17 +5708,24 @@ function registerBuiltins() {
     const disabled = p.disabled === true;
     const act = Array.isArray(p.actions) ? p.actions[0] : void 0;
     const url = resolveURL(act?.action?.url);
+    const hasActions = Array.isArray(p.actions) && p.actions.length > 0;
+    const clickable = !disabled && (Boolean(url) || hasActions);
     const tip = extractText(p.hoverTips);
-    const borderColor = resolveColor(p.border_color ?? p.borderColor);
-    const hasBorder = borderColor != null || p.hasBorder === true;
-    const cls = `${CLS}-interactive-container` + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
+    const borderNamed = p.border_color ?? p.borderColor;
+    const borderCustom = adapter.resolveCustomBorderLight(p);
+    const borderColor = resolveColor(borderNamed) ?? (borderCustom ? resolveColor(borderCustom) : void 0);
+    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 = {};
     const bg = propertyBackgroundColor(p);
     if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     if (borderColor) style.border = `1px solid ${borderColor}`;
-    if (p.corner_radius != null) style.borderRadius = sizeToPx(p.corner_radius);
+    const radius = resolveCornerRadius(p);
+    if (radius != null) style.borderRadius = radius;
+    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 props = { className: cls };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { dslToRaw, resolveTextStyleColor, resolveCustomBackgroundLight } from '@open-feishu-card/adapter';
+import { resolveCustomBorderLight, dslToRaw, resolveTextStyleColor, resolveCustomBackgroundLight } from '@open-feishu-card/adapter';
 export { dslToRaw } from '@open-feishu-card/adapter';
 
 // src/constants.ts
@@ -705,13 +705,25 @@ function resolveURL(url) {
 function sizeToPx(v) {
   return typeof v === "number" ? v + "px" : String(v);
 }
+function marginToStyle(margin) {
+  if (typeof margin === "string" && margin.trim()) return margin.trim();
+  return boxToStyle(margin);
+}
+function resolveCornerRadius(property) {
+  if (!property) return void 0;
+  const direct = property.corner_radius ?? property.cornerRadius;
+  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);
+  return void 0;
+}
 function boxToStyle(box) {
   if (!box || typeof box !== "object") return null;
   const t = box.top?.value ?? 0;
   const r = box.right?.value ?? 0;
   const b = box.bottom?.value ?? 0;
   const l = box.left?.value ?? 0;
-  if (!t && !r && !b && !l) return null;
   return `${t}px ${r}px ${b}px ${l}px`;
 }
 function bgStyleToColor(style) {
@@ -842,13 +854,13 @@ var BASE_STYLES_CSS = `/**
   line-height: 1.6;
   color: #1f2329;
   background-color: #fff;
+  position: relative;
   border-radius: 8px;
-  border: 1px solid #dee0e3;
+  /* \u771F\u673A root \u9ED8\u8BA4\u65E0\u8FB9\u6846\uFF1BshowCardBorder \u65F6\u624D outline\uFF08\u89C1 --has-border\uFF09 */
   overflow: hidden;
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
-  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.08);
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* \u6B63\u6587 color:var(--O400) \u7B49\u4F9D\u8D56\u8FD9\u4E9B\u53D8\u91CF\uFF1B\u4E0E\u98DE\u4E66 :root light \u8272\u9636\u5BF9\u9F50 */
   --B50: #f0f4ff;
@@ -1013,6 +1025,7 @@ var BASE_STYLES_CSS = `/**
   /* \u771F\u673A light\uFF1A--bg-float-overlay: var(--N50)\u3002column_set background_style=grey \u8D70\u6B64 token */
   --bg-float-overlay: var(--N50);
 }
+.universal-card-root--has-border { outline: 1px solid #dee0e3; }
 .universal-card-root *,
 .universal-card-root *::before,
 .universal-card-root *::after { box-sizing: border-box; }
@@ -1095,7 +1108,8 @@ var BASE_STYLES_CSS = `/**
   padding: 12px;
   display: flex;
   flex-direction: column;
-  row-gap: 8px;
+  row-gap: 12px;
+  column-gap: 12px;
   align-items: flex-start;
 }
 .universal-card-body > * { width: 100%; box-sizing: border-box; }
@@ -1333,9 +1347,12 @@ var BASE_STYLES_CSS = `/**
 .universal-card-interactive-container {
   display: flex; flex-direction: column; box-sizing: border-box;
   border-radius: 6px; padding: 0; text-decoration: none; color: inherit;
-  cursor: pointer; transition: background-color .1s;
+  row-gap: 4px;
+  transition: background-color .1s;
 }
-.universal-card-interactive-container:not(.universal-card-interactive-container--disabled):hover {
+/* \u771F\u673A\uFF1Acursor:pointer \u4E0E hover \u5E95\u53EA\u5728 __action \u5C42\uFF1B\u7EAF\u5C55\u793A\u5BB9\u5668\uFF08\u65E0 actions/url\uFF09\u4FDD\u6301\u9ED8\u8BA4\u7BAD\u5934 */
+.universal-card-interactive-container--action { cursor: pointer; }
+.universal-card-interactive-container--action:not(.universal-card-interactive-container--disabled):hover {
   background-color: rgba(31, 35, 41, 0.05);
 }
 .universal-card-interactive-container--bordered { border: 1px solid #dee0e3; }
@@ -5417,6 +5434,8 @@ 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;
     const sizeKey = resolveTextSizeKey(p);
     let fontSize = BASE_FONT_SIZE;
     let lineHeight = BASE_FONT_SIZE + 8;
@@ -5688,17 +5707,24 @@ function registerBuiltins() {
     const disabled = p.disabled === true;
     const act = Array.isArray(p.actions) ? p.actions[0] : void 0;
     const url = resolveURL(act?.action?.url);
+    const hasActions = Array.isArray(p.actions) && p.actions.length > 0;
+    const clickable = !disabled && (Boolean(url) || hasActions);
     const tip = extractText(p.hoverTips);
-    const borderColor = resolveColor(p.border_color ?? p.borderColor);
-    const hasBorder = borderColor != null || p.hasBorder === true;
-    const cls = `${CLS}-interactive-container` + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
+    const borderNamed = p.border_color ?? p.borderColor;
+    const borderCustom = resolveCustomBorderLight(p);
+    const borderColor = resolveColor(borderNamed) ?? (borderCustom ? resolveColor(borderCustom) : void 0);
+    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 = {};
     const bg = propertyBackgroundColor(p);
     if (bg) style.background = bg;
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     if (borderColor) style.border = `1px solid ${borderColor}`;
-    if (p.corner_radius != null) style.borderRadius = sizeToPx(p.corner_radius);
+    const radius = resolveCornerRadius(p);
+    if (radius != null) style.borderRadius = radius;
+    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 props = { className: cls };

package/dist/styles.css

@@ -18,13 +18,13 @@
   line-height: 1.6;
   color: #1f2329;
   background-color: #fff;
+  position: relative;
   border-radius: 8px;
-  border: 1px solid #dee0e3;
+  /* 真机 root 默认无边框；showCardBorder 时才 outline（见 --has-border） */
   overflow: hidden;
   width: 100%;
   max-width: 605px;
   box-sizing: border-box;
-  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.08);
   /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
   /* 正文 color:var(--O400) 等依赖这些变量；与飞书 :root light 色阶对齐 */
   --B50: #f0f4ff;
@@ -189,6 +189,7 @@
   /* 真机 light：--bg-float-overlay: var(--N50)。column_set background_style=grey 走此 token */
   --bg-float-overlay: var(--N50);
 }
+.universal-card-root--has-border { outline: 1px solid #dee0e3; }
 .universal-card-root *,
 .universal-card-root *::before,
 .universal-card-root *::after { box-sizing: border-box; }
@@ -271,7 +272,8 @@
   padding: 12px;
   display: flex;
   flex-direction: column;
-  row-gap: 8px;
+  row-gap: 12px;
+  column-gap: 12px;
   align-items: flex-start;
 }
 .universal-card-body > * { width: 100%; box-sizing: border-box; }
@@ -509,9 +511,12 @@
 .universal-card-interactive-container {
   display: flex; flex-direction: column; box-sizing: border-box;
   border-radius: 6px; padding: 0; text-decoration: none; color: inherit;
-  cursor: pointer; transition: background-color .1s;
+  row-gap: 4px;
+  transition: background-color .1s;
 }
-.universal-card-interactive-container:not(.universal-card-interactive-container--disabled):hover {
+/* 真机：cursor:pointer 与 hover 底只在 __action 层；纯展示容器（无 actions/url）保持默认箭头 */
+.universal-card-interactive-container--action { cursor: pointer; }
+.universal-card-interactive-container--action:not(.universal-card-interactive-container--disabled):hover {
   background-color: rgba(31, 35, 41, 0.05);
 }
 .universal-card-interactive-container--bordered { border: 1px solid #dee0e3; }

package/package.json

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