@open-feishu-card/renderer 0.2.15 → 0.2.17

package/dist/all.css

@@ -306,6 +306,33 @@
   margin: 8px 0;
 }
 
+.universal-card-collapse-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #dee0e3;
+  border: none;
+  margin: 8px 0;
+}
+
+.universal-card-avatar {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.universal-card-avatar__img {
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  background: #eff0f1;
+}
+
+.universal-card-fallback-text {
+  color: #646a73;
+  font-size: 14px;
+  line-height: 22px;
+}
+
 /* ---- div / note ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div 带前置图标：icon 在左、文本在右排成一行（复刻网页版 .universal-card-div 布局） */
@@ -531,6 +558,7 @@
   box-sizing: border-box; overflow: hidden;
 }
 /* header（<summary>）：可点击整行；去掉浏览器默认三角标记。
+   真机 color:var(--text-caption) → N600；标题/箭头继承此色。
    默认 title flex:1 把箭头推到右侧（icon_position=right）；
    icon_position=left 时靠 DOM 顺序在左。 */
 .universal-card-collapsible-panel__header {
@@ -538,11 +566,12 @@
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
 /* follow_text：箭头紧贴文字（真机 __header-content--icon-follow），不拉满整行 */
@@ -554,10 +583,10 @@
   width: auto;
 }
 /* 箭头图标包裹：收起态角度 0；展开态（details[open]）旋转到 --panel-icon-angle（内联给出，默认 -180deg）。
-   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。 */
+   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。颜色继承 header caption。 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));

package/dist/index.cjs

@@ -1228,6 +1228,33 @@ var BASE_STYLES_CSS = `/**
   margin: 8px 0;
 }
 
+.universal-card-collapse-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #dee0e3;
+  border: none;
+  margin: 8px 0;
+}
+
+.universal-card-avatar {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.universal-card-avatar__img {
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  background: #eff0f1;
+}
+
+.universal-card-fallback-text {
+  color: #646a73;
+  font-size: 14px;
+  line-height: 22px;
+}
+
 /* ---- div / note ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div \u5E26\u524D\u7F6E\u56FE\u6807\uFF1Aicon \u5728\u5DE6\u3001\u6587\u672C\u5728\u53F3\u6392\u6210\u4E00\u884C\uFF08\u590D\u523B\u7F51\u9875\u7248 .universal-card-div \u5E03\u5C40\uFF09 */
@@ -1453,6 +1480,7 @@ var BASE_STYLES_CSS = `/**
   box-sizing: border-box; overflow: hidden;
 }
 /* header\uFF08<summary>\uFF09\uFF1A\u53EF\u70B9\u51FB\u6574\u884C\uFF1B\u53BB\u6389\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0\u3002
+   \u771F\u673A color:var(--text-caption) \u2192 N600\uFF1B\u6807\u9898/\u7BAD\u5934\u7EE7\u627F\u6B64\u8272\u3002
    \u9ED8\u8BA4 title flex:1 \u628A\u7BAD\u5934\u63A8\u5230\u53F3\u4FA7\uFF08icon_position=right\uFF09\uFF1B
    icon_position=left \u65F6\u9760 DOM \u987A\u5E8F\u5728\u5DE6\u3002 */
 .universal-card-collapsible-panel__header {
@@ -1460,11 +1488,12 @@ var BASE_STYLES_CSS = `/**
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
 /* follow_text\uFF1A\u7BAD\u5934\u7D27\u8D34\u6587\u5B57\uFF08\u771F\u673A __header-content--icon-follow\uFF09\uFF0C\u4E0D\u62C9\u6EE1\u6574\u884C */
@@ -1476,10 +1505,10 @@ var BASE_STYLES_CSS = `/**
   width: auto;
 }
 /* \u7BAD\u5934\u56FE\u6807\u5305\u88F9\uFF1A\u6536\u8D77\u6001\u89D2\u5EA6 0\uFF1B\u5C55\u5F00\u6001\uFF08details[open]\uFF09\u65CB\u8F6C\u5230 --panel-icon-angle\uFF08\u5185\u8054\u7ED9\u51FA\uFF0C\u9ED8\u8BA4 -180deg\uFF09\u3002
-   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002 */
+   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002\u989C\u8272\u7EE7\u627F header caption\u3002 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));
@@ -5956,6 +5985,11 @@ function registerBuiltins() {
   registerComponent("input", (el) => renderStaticField(el));
   registerComponent("multi_select_static", (el) => renderStaticField(el));
   registerComponent("select_static", (el) => renderStaticField(el));
+  registerComponent("date_picker", (el) => renderStaticField(el));
+  registerComponent("picker_time", (el) => renderStaticField(el));
+  registerComponent("picker_datetime", (el) => renderStaticField(el));
+  registerComponent("select_person", (el) => renderStaticField(el));
+  registerComponent("multi_select_person", (el) => renderStaticField(el));
   registerComponent("checker", (el, ctx) => {
     const p = el.property || {};
     const checked = p.checked === true;
@@ -6103,6 +6137,40 @@ function registerBuiltins() {
     const p = el.property || {};
     return renderPersonChip(p.userID, p, ctx);
   });
+  const AVATAR_SIZE_PX = {
+    tiny: 16,
+    small: 24,
+    medium: 32,
+    large: 40,
+    huge: 48
+  };
+  registerComponent("avatar", (el, ctx) => {
+    const p = el.property || {};
+    const userID = p.userID || p.user_id;
+    const sizeKey = String(p.size ?? "medium");
+    const custom = typeof p.customSize === "number" ? p.customSize : typeof p.custom_size === "number" ? p.custom_size : void 0;
+    const px = sizeKey === "custom" && typeof custom === "number" && custom > 0 ? custom : AVATAR_SIZE_PX[sizeKey] || AVATAR_SIZE_PX.medium;
+    const { name, src } = resolvePersonDisplay(userID, ctx);
+    return h(
+      "div",
+      { className: `${CLS}-avatar`, title: name },
+      renderAvatarNode(`${CLS}-avatar__img`, px, src, name)
+    );
+  });
+  registerComponent(
+    "collapse_divider",
+    () => h("div", { className: `${CLS}-collapse-divider` })
+  );
+  registerComponent("fallback_text", (el, ctx) => {
+    const p = el.property || {};
+    const textEl = p.text;
+    if (textEl && typeof textEl === "object" && textEl.tag) {
+      return h("div", { className: `${CLS}-fallback-text` }, renderElement(textEl, ctx));
+    }
+    const content = extractPlainText(p.text);
+    if (!content) return null;
+    return h("div", { className: `${CLS}-fallback-text` }, content);
+  });
   registerComponent("person_list", (el, ctx) => {
     const p = el.property || {};
     const list = Array.isArray(p.persons) ? p.persons : [];

package/dist/index.js

@@ -1227,6 +1227,33 @@ var BASE_STYLES_CSS = `/**
   margin: 8px 0;
 }
 
+.universal-card-collapse-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #dee0e3;
+  border: none;
+  margin: 8px 0;
+}
+
+.universal-card-avatar {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.universal-card-avatar__img {
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  background: #eff0f1;
+}
+
+.universal-card-fallback-text {
+  color: #646a73;
+  font-size: 14px;
+  line-height: 22px;
+}
+
 /* ---- div / note ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div \u5E26\u524D\u7F6E\u56FE\u6807\uFF1Aicon \u5728\u5DE6\u3001\u6587\u672C\u5728\u53F3\u6392\u6210\u4E00\u884C\uFF08\u590D\u523B\u7F51\u9875\u7248 .universal-card-div \u5E03\u5C40\uFF09 */
@@ -1452,6 +1479,7 @@ var BASE_STYLES_CSS = `/**
   box-sizing: border-box; overflow: hidden;
 }
 /* header\uFF08<summary>\uFF09\uFF1A\u53EF\u70B9\u51FB\u6574\u884C\uFF1B\u53BB\u6389\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0\u3002
+   \u771F\u673A color:var(--text-caption) \u2192 N600\uFF1B\u6807\u9898/\u7BAD\u5934\u7EE7\u627F\u6B64\u8272\u3002
    \u9ED8\u8BA4 title flex:1 \u628A\u7BAD\u5934\u63A8\u5230\u53F3\u4FA7\uFF08icon_position=right\uFF09\uFF1B
    icon_position=left \u65F6\u9760 DOM \u987A\u5E8F\u5728\u5DE6\u3002 */
 .universal-card-collapsible-panel__header {
@@ -1459,11 +1487,12 @@ var BASE_STYLES_CSS = `/**
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
 /* follow_text\uFF1A\u7BAD\u5934\u7D27\u8D34\u6587\u5B57\uFF08\u771F\u673A __header-content--icon-follow\uFF09\uFF0C\u4E0D\u62C9\u6EE1\u6574\u884C */
@@ -1475,10 +1504,10 @@ var BASE_STYLES_CSS = `/**
   width: auto;
 }
 /* \u7BAD\u5934\u56FE\u6807\u5305\u88F9\uFF1A\u6536\u8D77\u6001\u89D2\u5EA6 0\uFF1B\u5C55\u5F00\u6001\uFF08details[open]\uFF09\u65CB\u8F6C\u5230 --panel-icon-angle\uFF08\u5185\u8054\u7ED9\u51FA\uFF0C\u9ED8\u8BA4 -180deg\uFF09\u3002
-   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002 */
+   \u7531\u7528\u6237\u70B9\u51FB <summary> \u5207\u6362 [open]\uFF0C\u7BAD\u5934\u65B9\u5411\u968F\u4E4B\u81EA\u52A8\u66F4\u65B0\uFF0C\u65E0\u9700 JS\u3002\u989C\u8272\u7EE7\u627F header caption\u3002 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));
@@ -5955,6 +5984,11 @@ function registerBuiltins() {
   registerComponent("input", (el) => renderStaticField(el));
   registerComponent("multi_select_static", (el) => renderStaticField(el));
   registerComponent("select_static", (el) => renderStaticField(el));
+  registerComponent("date_picker", (el) => renderStaticField(el));
+  registerComponent("picker_time", (el) => renderStaticField(el));
+  registerComponent("picker_datetime", (el) => renderStaticField(el));
+  registerComponent("select_person", (el) => renderStaticField(el));
+  registerComponent("multi_select_person", (el) => renderStaticField(el));
   registerComponent("checker", (el, ctx) => {
     const p = el.property || {};
     const checked = p.checked === true;
@@ -6102,6 +6136,40 @@ function registerBuiltins() {
     const p = el.property || {};
     return renderPersonChip(p.userID, p, ctx);
   });
+  const AVATAR_SIZE_PX = {
+    tiny: 16,
+    small: 24,
+    medium: 32,
+    large: 40,
+    huge: 48
+  };
+  registerComponent("avatar", (el, ctx) => {
+    const p = el.property || {};
+    const userID = p.userID || p.user_id;
+    const sizeKey = String(p.size ?? "medium");
+    const custom = typeof p.customSize === "number" ? p.customSize : typeof p.custom_size === "number" ? p.custom_size : void 0;
+    const px = sizeKey === "custom" && typeof custom === "number" && custom > 0 ? custom : AVATAR_SIZE_PX[sizeKey] || AVATAR_SIZE_PX.medium;
+    const { name, src } = resolvePersonDisplay(userID, ctx);
+    return h(
+      "div",
+      { className: `${CLS}-avatar`, title: name },
+      renderAvatarNode(`${CLS}-avatar__img`, px, src, name)
+    );
+  });
+  registerComponent(
+    "collapse_divider",
+    () => h("div", { className: `${CLS}-collapse-divider` })
+  );
+  registerComponent("fallback_text", (el, ctx) => {
+    const p = el.property || {};
+    const textEl = p.text;
+    if (textEl && typeof textEl === "object" && textEl.tag) {
+      return h("div", { className: `${CLS}-fallback-text` }, renderElement(textEl, ctx));
+    }
+    const content = extractPlainText(p.text);
+    if (!content) return null;
+    return h("div", { className: `${CLS}-fallback-text` }, content);
+  });
   registerComponent("person_list", (el, ctx) => {
     const p = el.property || {};
     const list = Array.isArray(p.persons) ? p.persons : [];

package/dist/styles.css

@@ -306,6 +306,33 @@
   margin: 8px 0;
 }
 
+.universal-card-collapse-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #dee0e3;
+  border: none;
+  margin: 8px 0;
+}
+
+.universal-card-avatar {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.universal-card-avatar__img {
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  background: #eff0f1;
+}
+
+.universal-card-fallback-text {
+  color: #646a73;
+  font-size: 14px;
+  line-height: 22px;
+}
+
 /* ---- div / note ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div 带前置图标：icon 在左、文本在右排成一行（复刻网页版 .universal-card-div 布局） */
@@ -531,6 +558,7 @@
   box-sizing: border-box; overflow: hidden;
 }
 /* header（<summary>）：可点击整行；去掉浏览器默认三角标记。
+   真机 color:var(--text-caption) → N600；标题/箭头继承此色。
    默认 title flex:1 把箭头推到右侧（icon_position=right）；
    icon_position=left 时靠 DOM 顺序在左。 */
 .universal-card-collapsible-panel__header {
@@ -538,11 +566,12 @@
   padding: 8px 12px;
   cursor: pointer; box-sizing: border-box;
   list-style: none; user-select: none;
+  color: var(--N600);
 }
 .universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
 .universal-card-collapsible-panel__header::marker { content: ''; }
 .universal-card-collapsible-panel__title {
-  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px;
   word-break: break-word;
 }
 /* follow_text：箭头紧贴文字（真机 __header-content--icon-follow），不拉满整行 */
@@ -554,10 +583,10 @@
   width: auto;
 }
 /* 箭头图标包裹：收起态角度 0；展开态（details[open]）旋转到 --panel-icon-angle（内联给出，默认 -180deg）。
-   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。 */
+   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。颜色继承 header caption。 */
 .universal-card-collapsible-panel__icon {
   flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
-  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+  transition: transform .2s; transform: rotate(0deg);
 }
 .universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
   transform: rotate(var(--panel-icon-angle, -180deg));

package/package.json

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