@open-feishu-card/renderer 0.2.30 → 0.2.32

package/dist/all.css

@@ -1067,16 +1067,38 @@
   align-items: center;
   gap: 8px;
   max-width: 600px; /* 客户端 .ud__toast max-width:600px */
-  padding: 10px 16px;
-  border-radius: 8px;
+  padding: 9px 16px; /* 客户端 .ud__notice--filled padding:9px 0 9px 16px */
+  border-radius: 6px; /* 客户端 .ud__notice border-radius:6px */
   background: rgba(31, 35, 41, 0.92); /* N900 深色半透明，白字 */
   color: #fff;
   font-size: 14px;
   line-height: 1.5;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
   margin-bottom: 16px; /* 客户端 .ud__toast margin-bottom:16px */
   animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
 }
+/* outlined 浅色变体：对齐客户端 .ud__notice--outlined.ud__notice-{type}
+   浅底 + 同色描边 + 深色文字（真机第二张：浅橙底橙边 warning） */
+.universal-card-toast--outlined {
+  background: #fff;
+  color: #1f2329;
+}
+.universal-card-toast--outlined.universal-card-toast--warning {
+  background: #fff7e6;
+  border: 1px solid #ff9d4c;
+}
+.universal-card-toast--outlined.universal-card-toast--error {
+  background: #fef1f1;
+  border: 1px solid #f54a45;
+}
+.universal-card-toast--outlined.universal-card-toast--info {
+  background: #e8f0ff;
+  border: 1px solid #3370ff;
+}
+.universal-card-toast--outlined.universal-card-toast--success {
+  background: #f0fbef;
+  border: 1px solid #34c724;
+}
 .universal-card-toast--leave {
   animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
 }

package/dist/index.cjs

@@ -671,7 +671,8 @@ function resolveImageSrc(p, ctx) {
   if (p.src) return p.src;
   if (p.url) return resolveURL(p.url) || null;
   if (p.img_url) return p.img_url;
-  if (p.imageID && ctx.options.imageBaseURL) return ctx.options.imageBaseURL + p.imageID;
+  const imageId = p.imageID || p.img_key;
+  if (imageId && ctx.options.imageBaseURL) return ctx.options.imageBaseURL + imageId;
   return null;
 }
 function resolveMediaSrc(p, kind, ctx) {
@@ -701,6 +702,7 @@ function personAvatarSrc(person, ctx) {
     const r = ctx.options.resolvePersonAvatar(person);
     if (r) return r;
   }
+  if (person.avatar_url) return person.avatar_url;
   if (!person.avatar_key) return null;
   const base = ctx.options.avatarBaseURL || PERSON_AVATAR_BASE;
   const suffix = ctx.options.avatarURLSuffix ?? PERSON_AVATAR_SUFFIX;
@@ -2035,16 +2037,38 @@ var BASE_STYLES_CSS = `/**
   align-items: center;
   gap: 8px;
   max-width: 600px; /* \u5BA2\u6237\u7AEF .ud__toast max-width:600px */
-  padding: 10px 16px;
-  border-radius: 8px;
+  padding: 9px 16px; /* \u5BA2\u6237\u7AEF .ud__notice--filled padding:9px 0 9px 16px */
+  border-radius: 6px; /* \u5BA2\u6237\u7AEF .ud__notice border-radius:6px */
   background: rgba(31, 35, 41, 0.92); /* N900 \u6DF1\u8272\u534A\u900F\u660E\uFF0C\u767D\u5B57 */
   color: #fff;
   font-size: 14px;
   line-height: 1.5;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
   margin-bottom: 16px; /* \u5BA2\u6237\u7AEF .ud__toast margin-bottom:16px */
   animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
 }
+/* outlined \u6D45\u8272\u53D8\u4F53\uFF1A\u5BF9\u9F50\u5BA2\u6237\u7AEF .ud__notice--outlined.ud__notice-{type}
+   \u6D45\u5E95 + \u540C\u8272\u63CF\u8FB9 + \u6DF1\u8272\u6587\u5B57\uFF08\u771F\u673A\u7B2C\u4E8C\u5F20\uFF1A\u6D45\u6A59\u5E95\u6A59\u8FB9 warning\uFF09 */
+.universal-card-toast--outlined {
+  background: #fff;
+  color: #1f2329;
+}
+.universal-card-toast--outlined.universal-card-toast--warning {
+  background: #fff7e6;
+  border: 1px solid #ff9d4c;
+}
+.universal-card-toast--outlined.universal-card-toast--error {
+  background: #fef1f1;
+  border: 1px solid #f54a45;
+}
+.universal-card-toast--outlined.universal-card-toast--info {
+  background: #e8f0ff;
+  border: 1px solid #3370ff;
+}
+.universal-card-toast--outlined.universal-card-toast--success {
+  background: #f0fbef;
+  border: 1px solid #34c724;
+}
 .universal-card-toast--leave {
   animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
 }
@@ -6870,7 +6894,7 @@ var DEFAULT_SHOW_TIME = 2e3;
 var TYPE_ICON = {
   success: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#34c724"/><path d="M4.5 8.2l2.2 2.2 4.8-4.8" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
   info: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#3370ff"/><circle cx="8" cy="4.6" r="1" fill="#fff"/><rect x="7.2" y="7" width="1.6" height="4.2" rx="0.8" fill="#fff"/></svg>',
-  warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#1f2329"/><circle cx="8" cy="11.8" r="1" fill="#1f2329"/></svg>',
+  warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#fff"/><circle cx="8" cy="11.8" r="1" fill="#fff"/></svg>',
   error: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#f54a45"/><path d="M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>'
 };
 function escapeHTML(s) {
@@ -6879,7 +6903,8 @@ function escapeHTML(s) {
 function renderToastHTML(type, opts) {
   const maxLines = opts.maxLines ?? 1;
   const styleAttr = maxLines > 1 ? ` style="-webkit-line-clamp:${maxLines};"` : "";
-  return `<div class="universal-card-toast universal-card-toast--${type}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
+  const variantClass = opts.variant === "outlined" ? " universal-card-toast--outlined" : "";
+  return `<div class="universal-card-toast universal-card-toast--${type}${variantClass}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
 }
 function createToastHost(container) {
   const hostEl = typeof document === "undefined" ? null : container ?? document.body;

package/dist/index.d.cts

@@ -81,6 +81,8 @@ interface ElementProperty {
     hoverTips?: CardElement;
     hasBorder?: boolean;
     imageID?: string;
+    /** DSL 公开字段；dslToRaw 常原样留在 property（未改名为 imageID） */
+    img_key?: string;
     origin_key?: string;
     src?: string;
     url?: string | LinkURL;
@@ -291,7 +293,7 @@ interface RenderOptions {
     /** 音视频地址前缀：最终 src = mediaBaseURL + fileID */
     mediaBaseURL?: string;
     /**
-     * 人员表（open_id -> { content 姓名, avatar_key 头像 }）。
+     * 人员表（open_id -> { content 姓名, avatar_key / avatar_url 头像 }）。
      * person_v1 / person_list 元素只带 ID，姓名/头像在此反查。
      * 异步渲染（renderCardToStringAsync）会自动从 json_attachment.persons 填入；
      * 同步渲染若想出名字/头像，需手动传入。缺省时人员降级为固定头像 +「赵天雄」。
@@ -326,7 +328,8 @@ interface RenderOptions {
  * 人员信息：person_v1 / person_list / at 元素只带 ID，姓名与头像 key 在这里。
  * 取自飞书消息 content 的 json_attachment.persons（按 open_id「ou_...」索引）；
  * fetchCardMessage 还会把信封 mentions 与 at_users 合并进来（含 @_user_N 别名键）。
- * avatar_key 是公开可访问的头像图 key（无需鉴权，见 PERSON_AVATAR_BASE）。
+ * avatar_key 是公开可访问的头像图 key（无需鉴权，见 PERSON_AVATAR_BASE）；
+ * 本地预览也可用 avatar_url（含 data URI）直接给头像地址。
  */
 interface PersonInfo {
     person_id?: string;
@@ -335,6 +338,11 @@ interface PersonInfo {
     type?: number;
     /** 头像图 key（形如 v3_00te_...），拼 avatarBaseURL 取图 */
     avatar_key?: string;
+    /**
+     * 直接可用的头像 URL（含 data URI）。
+     * 本地预览虚拟用户没有飞书 avatar_key 时用这个；优先级低于 resolvePersonAvatar，高于 avatar_key。
+     */
+    avatar_url?: string;
 }
 /**
  * 消息信封上的 @ 提及（data.items[0].mentions），不在 body.content 内。
@@ -627,6 +635,8 @@ interface ToastOptions {
     showTime?: number;
     /** 最大行数，超出截断省略，默认 1（客户端 maxLines:1） */
     maxLines?: number;
+    /** 视觉形态：'dark' 深色悬浮胶囊（默认）；'outlined' 浅底彩边（对齐客户端 .ud__notice--outlined） */
+    variant?: 'dark' | 'outlined';
 }
 interface ToastAPI {
     success: (opts: ToastOptions) => void;

package/dist/index.d.ts

@@ -81,6 +81,8 @@ interface ElementProperty {
     hoverTips?: CardElement;
     hasBorder?: boolean;
     imageID?: string;
+    /** DSL 公开字段；dslToRaw 常原样留在 property（未改名为 imageID） */
+    img_key?: string;
     origin_key?: string;
     src?: string;
     url?: string | LinkURL;
@@ -291,7 +293,7 @@ interface RenderOptions {
     /** 音视频地址前缀：最终 src = mediaBaseURL + fileID */
     mediaBaseURL?: string;
     /**
-     * 人员表（open_id -> { content 姓名, avatar_key 头像 }）。
+     * 人员表（open_id -> { content 姓名, avatar_key / avatar_url 头像 }）。
      * person_v1 / person_list 元素只带 ID，姓名/头像在此反查。
      * 异步渲染（renderCardToStringAsync）会自动从 json_attachment.persons 填入；
      * 同步渲染若想出名字/头像，需手动传入。缺省时人员降级为固定头像 +「赵天雄」。
@@ -326,7 +328,8 @@ interface RenderOptions {
  * 人员信息：person_v1 / person_list / at 元素只带 ID，姓名与头像 key 在这里。
  * 取自飞书消息 content 的 json_attachment.persons（按 open_id「ou_...」索引）；
  * fetchCardMessage 还会把信封 mentions 与 at_users 合并进来（含 @_user_N 别名键）。
- * avatar_key 是公开可访问的头像图 key（无需鉴权，见 PERSON_AVATAR_BASE）。
+ * avatar_key 是公开可访问的头像图 key（无需鉴权，见 PERSON_AVATAR_BASE）；
+ * 本地预览也可用 avatar_url（含 data URI）直接给头像地址。
  */
 interface PersonInfo {
     person_id?: string;
@@ -335,6 +338,11 @@ interface PersonInfo {
     type?: number;
     /** 头像图 key（形如 v3_00te_...），拼 avatarBaseURL 取图 */
     avatar_key?: string;
+    /**
+     * 直接可用的头像 URL（含 data URI）。
+     * 本地预览虚拟用户没有飞书 avatar_key 时用这个；优先级低于 resolvePersonAvatar，高于 avatar_key。
+     */
+    avatar_url?: string;
 }
 /**
  * 消息信封上的 @ 提及（data.items[0].mentions），不在 body.content 内。
@@ -627,6 +635,8 @@ interface ToastOptions {
     showTime?: number;
     /** 最大行数，超出截断省略，默认 1（客户端 maxLines:1） */
     maxLines?: number;
+    /** 视觉形态：'dark' 深色悬浮胶囊（默认）；'outlined' 浅底彩边（对齐客户端 .ud__notice--outlined） */
+    variant?: 'dark' | 'outlined';
 }
 interface ToastAPI {
     success: (opts: ToastOptions) => void;

package/dist/index.js

@@ -670,7 +670,8 @@ function resolveImageSrc(p, ctx) {
   if (p.src) return p.src;
   if (p.url) return resolveURL(p.url) || null;
   if (p.img_url) return p.img_url;
-  if (p.imageID && ctx.options.imageBaseURL) return ctx.options.imageBaseURL + p.imageID;
+  const imageId = p.imageID || p.img_key;
+  if (imageId && ctx.options.imageBaseURL) return ctx.options.imageBaseURL + imageId;
   return null;
 }
 function resolveMediaSrc(p, kind, ctx) {
@@ -700,6 +701,7 @@ function personAvatarSrc(person, ctx) {
     const r = ctx.options.resolvePersonAvatar(person);
     if (r) return r;
   }
+  if (person.avatar_url) return person.avatar_url;
   if (!person.avatar_key) return null;
   const base = ctx.options.avatarBaseURL || PERSON_AVATAR_BASE;
   const suffix = ctx.options.avatarURLSuffix ?? PERSON_AVATAR_SUFFIX;
@@ -2034,16 +2036,38 @@ var BASE_STYLES_CSS = `/**
   align-items: center;
   gap: 8px;
   max-width: 600px; /* \u5BA2\u6237\u7AEF .ud__toast max-width:600px */
-  padding: 10px 16px;
-  border-radius: 8px;
+  padding: 9px 16px; /* \u5BA2\u6237\u7AEF .ud__notice--filled padding:9px 0 9px 16px */
+  border-radius: 6px; /* \u5BA2\u6237\u7AEF .ud__notice border-radius:6px */
   background: rgba(31, 35, 41, 0.92); /* N900 \u6DF1\u8272\u534A\u900F\u660E\uFF0C\u767D\u5B57 */
   color: #fff;
   font-size: 14px;
   line-height: 1.5;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
   margin-bottom: 16px; /* \u5BA2\u6237\u7AEF .ud__toast margin-bottom:16px */
   animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
 }
+/* outlined \u6D45\u8272\u53D8\u4F53\uFF1A\u5BF9\u9F50\u5BA2\u6237\u7AEF .ud__notice--outlined.ud__notice-{type}
+   \u6D45\u5E95 + \u540C\u8272\u63CF\u8FB9 + \u6DF1\u8272\u6587\u5B57\uFF08\u771F\u673A\u7B2C\u4E8C\u5F20\uFF1A\u6D45\u6A59\u5E95\u6A59\u8FB9 warning\uFF09 */
+.universal-card-toast--outlined {
+  background: #fff;
+  color: #1f2329;
+}
+.universal-card-toast--outlined.universal-card-toast--warning {
+  background: #fff7e6;
+  border: 1px solid #ff9d4c;
+}
+.universal-card-toast--outlined.universal-card-toast--error {
+  background: #fef1f1;
+  border: 1px solid #f54a45;
+}
+.universal-card-toast--outlined.universal-card-toast--info {
+  background: #e8f0ff;
+  border: 1px solid #3370ff;
+}
+.universal-card-toast--outlined.universal-card-toast--success {
+  background: #f0fbef;
+  border: 1px solid #34c724;
+}
 .universal-card-toast--leave {
   animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
 }
@@ -6869,7 +6893,7 @@ var DEFAULT_SHOW_TIME = 2e3;
 var TYPE_ICON = {
   success: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#34c724"/><path d="M4.5 8.2l2.2 2.2 4.8-4.8" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
   info: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#3370ff"/><circle cx="8" cy="4.6" r="1" fill="#fff"/><rect x="7.2" y="7" width="1.6" height="4.2" rx="0.8" fill="#fff"/></svg>',
-  warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#1f2329"/><circle cx="8" cy="11.8" r="1" fill="#1f2329"/></svg>',
+  warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#fff"/><circle cx="8" cy="11.8" r="1" fill="#fff"/></svg>',
   error: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#f54a45"/><path d="M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>'
 };
 function escapeHTML(s) {
@@ -6878,7 +6902,8 @@ function escapeHTML(s) {
 function renderToastHTML(type, opts) {
   const maxLines = opts.maxLines ?? 1;
   const styleAttr = maxLines > 1 ? ` style="-webkit-line-clamp:${maxLines};"` : "";
-  return `<div class="universal-card-toast universal-card-toast--${type}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
+  const variantClass = opts.variant === "outlined" ? " universal-card-toast--outlined" : "";
+  return `<div class="universal-card-toast universal-card-toast--${type}${variantClass}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
 }
 function createToastHost(container) {
   const hostEl = typeof document === "undefined" ? null : container ?? document.body;

package/dist/styles.css

@@ -1067,16 +1067,38 @@
   align-items: center;
   gap: 8px;
   max-width: 600px; /* 客户端 .ud__toast max-width:600px */
-  padding: 10px 16px;
-  border-radius: 8px;
+  padding: 9px 16px; /* 客户端 .ud__notice--filled padding:9px 0 9px 16px */
+  border-radius: 6px; /* 客户端 .ud__notice border-radius:6px */
   background: rgba(31, 35, 41, 0.92); /* N900 深色半透明，白字 */
   color: #fff;
   font-size: 14px;
   line-height: 1.5;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
   margin-bottom: 16px; /* 客户端 .ud__toast margin-bottom:16px */
   animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
 }
+/* outlined 浅色变体：对齐客户端 .ud__notice--outlined.ud__notice-{type}
+   浅底 + 同色描边 + 深色文字（真机第二张：浅橙底橙边 warning） */
+.universal-card-toast--outlined {
+  background: #fff;
+  color: #1f2329;
+}
+.universal-card-toast--outlined.universal-card-toast--warning {
+  background: #fff7e6;
+  border: 1px solid #ff9d4c;
+}
+.universal-card-toast--outlined.universal-card-toast--error {
+  background: #fef1f1;
+  border: 1px solid #f54a45;
+}
+.universal-card-toast--outlined.universal-card-toast--info {
+  background: #e8f0ff;
+  border: 1px solid #3370ff;
+}
+.universal-card-toast--outlined.universal-card-toast--success {
+  background: #f0fbef;
+  border: 1px solid #34c724;
+}
 .universal-card-toast--leave {
   animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
 }

package/package.json

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