@open-feishu-card/renderer 0.2.16 → 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 布局） */

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 */
@@ -5958,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;
@@ -6105,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 */
@@ -5957,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;
@@ -6104,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 布局） */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.2.16",
+  "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",