one-design-next 0.0.40 → 0.0.42

package/dist/_genui-types.d.ts

@@ -35,6 +35,14 @@ export interface Attachment {
     status?: 'uploading' | 'error' | 'expired' | 'done';
     /** status='error' 时展示的失败原因文案。 */
     errorMessage?: string;
+    /**
+     * 图片自然像素宽 / 高（image/* 附件可选携带）。
+     * 主要用途：图片过期后 url 已失效、无法再测量，用存下来的原始尺寸
+     * 让「已过期」占位复刻原图 footprint（单图场景），消息流不因过期而跳版。
+     * 拿不到时占位退化成 88×88（同多图）。
+     */
+    width?: number;
+    height?: number;
     /**
      * 特殊变体：
      * - 'report'：AI 生成报告的大卡片（含创建时间 + 右侧预览缩略图）。

package/dist/attachments/index.js

@@ -1,13 +1,20 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
+import Image from "../image";
+import Tooltip from "../tooltip";
 import "./style";
 var categoryMap = {
-  image: {
-    icon: 'image',
+  sheet: {
+    icon: 'table',
     color: 'var(--odn-color-green-6)',
     bg: 'var(--odn-color-green-2)'
   },
+  slides: {
+    icon: 'presentation',
+    color: 'var(--odn-color-orange-6)',
+    bg: 'var(--odn-color-orange-2)'
+  },
   code: {
     icon: 'file-code',
     color: 'var(--odn-color-blue-8)',
@@ -40,17 +47,17 @@ var defaultMeta = {
   bg: 'var(--odn-color-solid-black-3)'
 };
 var mimeCategory = {
-  'application/pdf': 'doc',
+  'application/pdf': 'text',
   'application/msword': 'doc',
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'doc',
-  'application/vnd.ms-excel': 'doc',
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'doc',
-  'application/vnd.ms-powerpoint': 'doc',
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'doc',
+  'application/vnd.ms-excel': 'sheet',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'sheet',
+  'application/vnd.ms-powerpoint': 'slides',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'slides',
   'application/json': 'data',
   'application/xml': 'data',
   'text/xml': 'data',
-  'text/csv': 'data',
+  'text/csv': 'sheet',
   'text/html': 'code',
   'text/css': 'code',
   'text/javascript': 'code',
@@ -71,7 +78,6 @@ var mimeCategory = {
 function getFileMeta(mime) {
   if (mimeCategory[mime]) return categoryMap[mimeCategory[mime]];
   var prefix = mime.split('/')[0];
-  if (prefix === 'image') return categoryMap.image;
   if (prefix === 'text') return categoryMap.text;
   return defaultMeta;
 }
@@ -123,18 +129,24 @@ function formatSize(bytes) {
   if (bytes < 1024 * 1024) return "".concat((bytes / 1024).toFixed(1), " KB");
   return "".concat((bytes / (1024 * 1024)).toFixed(1), " MB");
 }
-function truncateMessage(text, maxChars) {
-  if (text.length <= maxChars) return text;
-  return "".concat(text.slice(0, maxChars), "...");
+
+/** image/* 附件缩略：统一走 Image leaf，不再内联裸 `<img>`。 */
+function AttachmentImage(_ref) {
+  var attachment = _ref.attachment;
+  if (!attachment.url) return null;
+  return /*#__PURE__*/React.createElement(Image, {
+    url: attachment.url,
+    alt: attachment.name
+  });
 }
-export function Attachments(_ref) {
-  var attachments = _ref.attachments,
-    onRemove = _ref.onRemove,
-    onFileClick = _ref.onFileClick,
-    onRetry = _ref.onRetry,
-    onDownload = _ref.onDownload,
-    _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact;
+export function Attachments(_ref2) {
+  var attachments = _ref2.attachments,
+    onRemove = _ref2.onRemove,
+    onFileClick = _ref2.onFileClick,
+    onRetry = _ref2.onRetry,
+    onDownload = _ref2.onDownload,
+    _ref2$compact = _ref2.compact,
+    compact = _ref2$compact === void 0 ? false : _ref2$compact;
   if (attachments.length === 0) return null;
 
   /**
@@ -153,8 +165,7 @@ export function Attachments(_ref) {
     var isUploading = status === 'uploading';
     var isError = status === 'error';
     var isExpired = status === 'expired';
-    var clickable = !!onFileClick && !isUploading && !isExpired;
-    var retryable = !!onRetry && isError;
+    var clickable = !!onFileClick && !isUploading && !isExpired && !isError;
     var thumbCardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-thumb-card-thumb": true,
       style: isImage && !isUploading && !isError ? undefined : isUploading || isError ? undefined : {
@@ -173,9 +184,8 @@ export function Attachments(_ref) {
       style: {
         color: 'var(--odn-color-error)'
       }
-    }) : isImage ? /*#__PURE__*/React.createElement("img", {
-      src: a.url,
-      alt: ""
+    }) : isImage ? /*#__PURE__*/React.createElement(AttachmentImage, {
+      attachment: a
     }) : /*#__PURE__*/React.createElement(Icon, {
       name: meta.icon,
       size: 16,
@@ -188,8 +198,8 @@ export function Attachments(_ref) {
       "data-odn-attachments-thumb-card-name": true
     }, a.name), /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-thumb-card-type": true
-    }, isError ? truncateMessage(a.errorMessage || '上传失败，请重试', 18) : isExpired ? '已过期' : formatType(a.type, a.name))));
-    return /*#__PURE__*/React.createElement("div", {
+    }, isExpired ? '已过期' : formatType(a.type, a.name))));
+    var cardEl = /*#__PURE__*/React.createElement("div", {
       key: i,
       "data-odn-attachments-item": true,
       "data-odn-attachments-state": status,
@@ -202,17 +212,10 @@ export function Attachments(_ref) {
       "data-odn-attachments-thumb-card": true,
       "data-odn-attachments-thumb-card-image": isImage || undefined,
       "data-odn-attachments-clickable": ""
-    }, thumbCardInner) : retryable ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: function onClick() {
-        return onRetry(i);
-      },
-      "data-odn-attachments-thumb-card": true,
-      "data-odn-attachments-thumb-card-image": isImage || undefined,
-      "data-odn-attachments-retryable": ""
     }, thumbCardInner) : /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-thumb-card": true,
-      "data-odn-attachments-thumb-card-image": isImage || undefined
+      "data-odn-attachments-thumb-card-image": isImage || undefined,
+      "data-odn-attachments-error": isError || undefined
     }, thumbCardInner), onRemove && /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
         return onRemove(i);
@@ -222,10 +225,18 @@ export function Attachments(_ref) {
       name: "x",
       size: 10
     })));
+    if (isError) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        key: i,
+        placement: "top",
+        popup: a.errorMessage || '上传失败'
+      }, cardEl);
+    }
+    return cardEl;
   }
 
   /**
-   * image-thumb 渲染：纯图大缩略方块（56×56 cover、无边框）。
+   * image-thumb 渲染：纯图缩略方块（48×48 cover，与 file-card 等高）。
    *
    * 与文件信息卡（data-odn-attachments-card）严格同源——共享
    * data-odn-attachments-state 三态机、remove 角标。composer 待发送区把 image/*
@@ -238,10 +249,9 @@ export function Attachments(_ref) {
     var isError = status === 'error';
     var isExpired = status === 'expired';
     var clickable = !!onFileClick && !isUploading && !isError && !isExpired;
-    var thumb = /*#__PURE__*/React.createElement("img", {
-      src: a.url,
-      alt: a.name
-    });
+    var thumb = a.url ? /*#__PURE__*/React.createElement(AttachmentImage, {
+      attachment: a
+    }) : null;
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       "data-odn-attachments-item": true,
@@ -262,25 +272,21 @@ export function Attachments(_ref) {
       name: "loading",
       size: 16,
       spin: true
-    })), isError && (onRetry ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      "data-odn-attachments-image-overlay": true,
-      "data-odn-attachments-image-overlay-error": "",
-      onClick: function onClick() {
-        return onRetry(i);
-      },
-      title: a.errorMessage || '上传失败，点击重试'
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "alert-triangle",
-      size: 16
-    }), /*#__PURE__*/React.createElement("span", null, "\u91CD\u8BD5")) : /*#__PURE__*/React.createElement("div", {
+    })), isError &&
+    /*#__PURE__*/
+    // 图片缩略方块太小塞不下错误文案：错误态只留居中的告警图标，
+    // 具体原因（errorMessage，来自业务层回写）走 hover 向上的 Tooltip。
+    // 图片上传不支持重试——overlay 不承载点击。
+    React.createElement(Tooltip, {
+      placement: "top",
+      popup: a.errorMessage || '上传失败'
+    }, /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-image-overlay": true,
-      "data-odn-attachments-image-overlay-error": "",
-      title: a.errorMessage || '上传失败'
+      "data-odn-attachments-image-overlay-error": ""
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "alert-triangle",
       size: 16
-    }), /*#__PURE__*/React.createElement("span", null, "\u5931\u8D25"))), onRemove && /*#__PURE__*/React.createElement("button", {
+    }))), onRemove && /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
         return onRemove(i);
       },
@@ -423,8 +429,7 @@ export function Attachments(_ref) {
     var isUploading = status === 'uploading';
     var isError = status === 'error';
     var isExpired = status === 'expired';
-    var clickable = !!onFileClick && !isUploading && !isExpired;
-    var retryable = !!onRetry && isError;
+    var clickable = !!onFileClick && !isUploading && !isExpired && !isError;
     var fileCardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-file-icon": true,
       style: isUploading || isError ? undefined : {
@@ -455,8 +460,8 @@ export function Attachments(_ref) {
       "data-odn-attachments-name": true
     }, a.name), /*#__PURE__*/React.createElement("div", {
       "data-odn-attachments-meta": true
-    }, isError ? truncateMessage(a.errorMessage || '上传失败，请重试', 18) : isExpired ? '已过期' : "".concat(formatType(a.type, a.name)).concat(a.size ? " \xB7 ".concat(formatSize(a.size)) : ''))));
-    return /*#__PURE__*/React.createElement("div", _extends({
+    }, isExpired ? '已过期' : "".concat(formatType(a.type, a.name)).concat(a.size ? " \xB7 ".concat(formatSize(a.size)) : ''))));
+    var cardEl = /*#__PURE__*/React.createElement("div", _extends({
       key: i,
       "data-odn-attachments-item": true,
       "data-odn-attachments-state": status
@@ -469,15 +474,9 @@ export function Attachments(_ref) {
       },
       "data-odn-attachments-card": true,
       "data-odn-attachments-clickable": ""
-    }, fileCardInner) : retryable ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: function onClick() {
-        return onRetry(i);
-      },
-      "data-odn-attachments-card": true,
-      "data-odn-attachments-retryable": ""
     }, fileCardInner) : /*#__PURE__*/React.createElement("div", {
-      "data-odn-attachments-card": true
+      "data-odn-attachments-card": true,
+      "data-odn-attachments-error": isError || undefined
     }, fileCardInner), onRemove && /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
         return onRemove(i);
@@ -487,6 +486,14 @@ export function Attachments(_ref) {
       name: "x",
       size: 10
     })));
+    if (isError) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        key: i,
+        placement: "top",
+        popup: a.errorMessage || '上传失败'
+      }, cardEl);
+    }
+    return cardEl;
   }));
 }
 Attachments.displayName = 'Attachments';

package/dist/attachments/style/index.css

@@ -83,15 +83,8 @@
 [data-odn-attachments-card][data-odn-attachments-clickable]:hover {
   border-color: color-mix(in srgb, var(--odn-color-primary) 50%, transparent);
 }
-[data-odn-attachments-card][data-odn-attachments-retryable] {
-  cursor: pointer;
-  border: 1px solid color-mix(in srgb, var(--odn-color-error) 35%, var(--odn-color-black-6));
-  font: inherit;
-  text-align: left;
-  appearance: none;
-}
-[data-odn-attachments-card][data-odn-attachments-retryable]:hover {
-  border-color: color-mix(in srgb, var(--odn-color-error) 55%, transparent);
+[data-odn-attachments-card][data-odn-attachments-error] {
+  border-color: color-mix(in srgb, var(--odn-color-error) 35%, var(--odn-color-black-6));
 }
 
 [data-odn-attachments-file-icon] {
@@ -133,10 +126,6 @@
   color: var(--odn-color-black-8);
 }
 
-[data-odn-attachments-item][data-odn-attachments-state=error] [data-odn-attachments-meta] {
-  color: var(--odn-color-error);
-}
-
 [data-odn-attachments-item][data-odn-attachments-state=expired] {
   opacity: 0.55;
 }
@@ -190,7 +179,7 @@
   grid-template-columns: auto 1fr;
   gap: 8px;
   padding: 6px 10px 6px 6px;
-  min-height: 42px;
+  min-height: 48px;
   border-radius: 6px;
   border: 1px solid var(--odn-color-black-6);
   background: var(--odn-color-solid-black-1);
@@ -207,12 +196,8 @@
 [data-odn-attachments-thumb-card][data-odn-attachments-clickable]:hover {
   border-color: color-mix(in srgb, var(--odn-color-primary) 50%, transparent);
 }
-[data-odn-attachments-thumb-card][data-odn-attachments-retryable] {
-  cursor: pointer;
-  border: 1px solid color-mix(in srgb, var(--odn-color-error) 35%, var(--odn-color-black-6));
-}
-[data-odn-attachments-thumb-card][data-odn-attachments-retryable]:hover {
-  border-color: color-mix(in srgb, var(--odn-color-error) 55%, transparent);
+[data-odn-attachments-thumb-card][data-odn-attachments-error] {
+  border-color: color-mix(in srgb, var(--odn-color-error) 35%, var(--odn-color-black-6));
 }
 
 /* 图片保持原先「无边框」视觉，仅与文件卡片对齐高度。 */
@@ -220,7 +205,7 @@
   border: none;
   background: transparent;
 }
-[data-odn-attachments-thumb-card][data-odn-attachments-thumb-card-image][data-odn-attachments-clickable]:hover, [data-odn-attachments-thumb-card][data-odn-attachments-thumb-card-image][data-odn-attachments-retryable]:hover {
+[data-odn-attachments-thumb-card][data-odn-attachments-thumb-card-image][data-odn-attachments-clickable]:hover {
   border: none;
 }
 
@@ -234,6 +219,11 @@
   border-radius: 3px;
   overflow: hidden;
 }
+[data-odn-attachments-thumb-card-thumb] [data-odn-image] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 [data-odn-attachments-thumb-card-thumb] img {
   width: 100%;
   height: 100%;
@@ -275,12 +265,12 @@
 [data-odn-attachments-card]:not([data-odn-attachments-image-card]),
 [data-odn-attachments-thumb-card] {
   width: 192px;
-  min-height: 42px;
+  min-height: 48px;
 }
 
 /* ==========================================================================
- * image-thumb 变体（纯图大缩略方块）
- * 56×56 cover、无边框，承载 image/* + url。与文件信息卡（data-odn-attachments-card）
+ * image-thumb 变体（纯图缩略方块）
+ * 48×48 cover（与 file-card 等高），承载 image/* + url。缩略走 Image leaf（不再裸 `<img>`）。
  * 同源：共享 data-odn-attachments-state 三态机、remove 角标、fresh-done。
  * composer 待发送区即以此变体让"图片大预览 + 文件信息卡"并列同行、等高同源。
  * ========================================================================== */
@@ -290,8 +280,8 @@
 
 [data-odn-attachments-image-thumb] {
   position: relative;
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   border-radius: 6px;
   overflow: hidden;
   padding: 0;
@@ -299,6 +289,11 @@
   background: var(--odn-color-black-2);
   box-sizing: border-box;
 }
+[data-odn-attachments-image-thumb] [data-odn-image] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 [data-odn-attachments-image-thumb] img {
   width: 100%;
   height: 100%;
@@ -342,20 +337,10 @@
 }
 [data-odn-attachments-image-overlay][data-odn-attachments-image-overlay-error] {
   background: var(--odn-color-solid-black-1);
-  flex-direction: column;
   border: 1px solid color-mix(in srgb, var(--odn-color-error) 35%, var(--odn-color-black-6));
   color: var(--odn-color-error);
-}
-[data-odn-attachments-image-overlay][data-odn-attachments-image-overlay-error]:is(button) {
-  cursor: pointer;
-  appearance: none;
-  font: inherit;
-  font-size: 10px;
   pointer-events: auto;
 }
-[data-odn-attachments-image-overlay][data-odn-attachments-image-overlay-error]:is(button):hover {
-  border-color: color-mix(in srgb, var(--odn-color-error) 55%, transparent);
-}
 
 /* ==========================================================================
  * Report 变体（AI 生成报告入口卡片）

package/dist/composer/index.js

@@ -490,7 +490,6 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   var composerBoxFileDragAttrs = fileDragOver ? {
     'data-odn-composer-file-drag': ''
   } : {};
-  var showFileDragOverlay = fileDragOver && !disabled && !attachmentsDisabled;
   var handleComposerDragEnter = function handleComposerDragEnter(e) {
     e.preventDefault();
     if (disabled || attachmentsDisabled) return;
@@ -889,7 +888,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     ref: editorRef,
     autoSize: {
       minRows: 1,
-      maxRows: 5
+      maxRows: 10
     },
     placeholder: placeholder,
     value: text,
@@ -997,13 +996,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     "data-odn-composer-lite-tools": true
   }, toolNodes), isLite && /*#__PURE__*/React.createElement("div", {
     "data-odn-composer-lite-send": true
-  }, sendOrStopButton), showFileDragOverlay && /*#__PURE__*/React.createElement("div", {
-    "data-odn-composer-file-drag-overlay": true,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
-    name: "paperclip",
-    size: 14
-  }), "\u62D6\u653E\u6587\u4EF6\u5230\u6B64\u5904\u4E0A\u4F20"))), hint && /*#__PURE__*/React.createElement("p", {
+  }, sendOrStopButton)), hint && /*#__PURE__*/React.createElement("p", {
     "data-odn-composer-hint": true
   }, submitType === 'enter' ? 'Enter 发送 · Shift+Enter 换行 · 可拖入或粘贴文件' : 'Shift+Enter 发送 · Enter 换行 · 可拖入或粘贴文件')));
 });

package/dist/composer/style/index.css

@@ -26,6 +26,8 @@
   border: 1px solid var(--odn-color-black-6);
   background: var(--odn-color-bg-elevated);
   transition: border-color 0.15s;
+  max-height: 50vh;
+  min-height: 120px;
 }
 [data-odn-composer-box]:focus-within {
   border-color: color-mix(in srgb, var(--odn-color-brand-6) 50%, transparent);
@@ -35,42 +37,6 @@
   background: color-mix(in srgb, var(--odn-color-brand-6) 6%, var(--odn-color-bg-elevated));
 }
 
-[data-odn-composer-file-drag-overlay] {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: color-mix(in srgb, var(--odn-color-brand-6) 8%, transparent);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  z-index: 4;
-}
-[data-odn-composer-file-drag-overlay] span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--odn-color-brand-6);
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: 600;
-}
-
-/* 拖放蒙层出现时，冻结内部交互样式事件；保留 box 自身 drop 能力。 */
-[data-odn-composer-box][data-odn-composer-file-drag] [data-odn-composer-editor],
-[data-odn-composer-box][data-odn-composer-file-drag] [data-odn-composer-toolbar],
-[data-odn-composer-box][data-odn-composer-file-drag] [data-odn-composer-lite-tools],
-[data-odn-composer-box][data-odn-composer-file-drag] [data-odn-composer-lite-send],
-[data-odn-composer-box][data-odn-composer-file-drag] [data-odn-composer-attachments] {
-  pointer-events: none !important;
-}
-[data-odn-composer-box][data-odn-composer-file-drag] [data-odn-composer-editor] {
-  caret-color: transparent;
-  user-select: none;
-}
-
 /* ------------------------------------------------------------------
  * lite variant：
  *   tools 和 send 按钮 absolute 在 box 的左下/右下；
@@ -211,6 +177,12 @@
  * ScrollArea root 的 height transition 按"目标态"分别定义在 lite 单行 /
  * lite 升格 selector 上，做出「先上再左 / 先右再下」的对称两段动效。
  * ----------------------------------------------------------------- */
+[data-odn-composer] .odn-composer-editor-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
 [data-odn-composer] [data-odn-composer-editor] {
   position: relative;
   width: 100%;
@@ -471,7 +443,7 @@ p[data-odn-composer-hint] {
  *   三态机 / remove 角标 / fresh-done 全部下沉到 Attachments 组件。
  * ----------------------------------------------------------------- */
 [data-odn-composer-attachments] {
-  --odn-composer-attachment-h: 42px;
+  --odn-composer-attachment-h: 48px;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;

package/dist/image/index.d.ts

@@ -8,7 +8,7 @@ export interface ImageProps {
     alt?: string;
     /**
      * 整图点击回调。传此 prop 即把图片包一层 button，业务方按需对接
-     * `PreviewPanel` 等 lightbox 组件。
+     * `PreviewPanel` 等 lightbox 组件。失败态（unavailable / 加载出错）下自动屏蔽。
      */
     onPreview?: () => void;
     /**
@@ -16,6 +16,20 @@ export interface ImageProps {
      * trash icon，用于 Composer 待发送态等需要删除的场景。
      */
     onRemove?: () => void;
+    /**
+     * 主动标记图片不可用（如上层已知 url 失效）。为 true 时**不加载 url**、
+     * 直接渲染 `fallback`，并屏蔽 onPreview。
+     *
+     * 这是渲染层的中性概念——leaf 不认识「过期 / 已删除」等业务原因，只知道
+     * 「这张图画不出来」。业务原因与文案由上层（如 `MessageImage`）翻译后
+     * 通过 `unavailable` + `fallback` 传入。
+     */
+    unavailable?: boolean;
+    /**
+     * 画不出图时（`unavailable` 或 `<img>` 运行时 onError）渲染的兜底内容。
+     * 不传则用内置中性占位（image-off 图标）。
+     */
+    fallback?: React.ReactNode;
     /** 透传到容器（非 img 本体）的 className，用于上层套尺寸约束。 */
     className?: string;
     /** 透传到容器（非 img 本体）的 style，用于上层套尺寸约束。 */
@@ -32,12 +46,13 @@ export interface ImageProps {
  * 不职责：
  *  - 不带尺寸 opinion（max-width / max-height / object-fit 全由上层套）
  *  - 不带消息态 / 输入态等业务语义
+ *  - 不认识「过期 / 已删除」等业务原因，只认「画得出 / 画不出」（unavailable / fallback）
  *
  * 业务态包装在更上层的组件里实现：
  *  - 消息态：`<MessageImage>` 套一层 max 280×360 contain（单图）或 88×88 cover（多图）容器
  *  - Composer 待发送态：composer 内部直接套一层 72×72 cover 容器
  */
-export declare function Image({ url, alt, onPreview, onRemove, className, style }: ImageProps): import("react").JSX.Element;
+export declare function Image({ url, alt, onPreview, onRemove, unavailable, fallback, className, style, }: ImageProps): import("react").JSX.Element;
 export declare namespace Image {
     var displayName: string;
 }

package/dist/image/index.js

@@ -1,3 +1,10 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
 import Icon from "../icon";
 import "./style";
 /**
@@ -11,6 +18,7 @@ import "./style";
  * 不职责：
  *  - 不带尺寸 opinion（max-width / max-height / object-fit 全由上层套）
  *  - 不带消息态 / 输入态等业务语义
+ *  - 不认识「过期 / 已删除」等业务原因，只认「画得出 / 画不出」（unavailable / fallback）
  *
  * 业务态包装在更上层的组件里实现：
  *  - 消息态：`<MessageImage>` 套一层 max 280×360 contain（单图）或 88×88 cover（多图）容器
@@ -21,18 +29,41 @@ export function Image(_ref) {
     alt = _ref.alt,
     onPreview = _ref.onPreview,
     onRemove = _ref.onRemove,
+    unavailable = _ref.unavailable,
+    fallback = _ref.fallback,
     className = _ref.className,
     style = _ref.style;
-  var imgEl = /*#__PURE__*/React.createElement("img", {
+  // 运行时加载失败：url 存活性不由上层保证（签名过期 / 404 / 断网都可能），
+  // onError 兜住让「画不出」自动降级，不出碎图。
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadError = _useState2[0],
+    setLoadError = _useState2[1];
+  var showFallback = !!unavailable || loadError;
+
+  // 默认占位只有图标、无文案——leaf 不知道「为什么画不出」，任何原因文字
+  // 都是业务语义，由上层通过 fallback 传入（如 MessageImage 传「已过期」）。
+  var fallbackEl = /*#__PURE__*/React.createElement("div", {
+    "data-odn-image-fallback": true
+  }, fallback !== null && fallback !== void 0 ? fallback : /*#__PURE__*/React.createElement(Icon, {
+    name: "image-off",
+    size: 20
+  }));
+  var imgEl = showFallback ? fallbackEl : /*#__PURE__*/React.createElement("img", {
     src: url,
     alt: alt !== null && alt !== void 0 ? alt : '',
-    loading: "lazy"
+    loading: "lazy",
+    onError: function onError() {
+      return setLoadError(true);
+    }
   });
+  var canPreview = !!onPreview && !showFallback;
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-image": true,
+    "data-odn-image-unavailable": showFallback || undefined,
     className: className,
     style: style
-  }, onPreview ? /*#__PURE__*/React.createElement("button", {
+  }, canPreview ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onPreview,
     "data-odn-image-trigger": true,

package/dist/image/style/index.css

@@ -7,6 +7,30 @@
   display: block;
 }
 
+/* 不可用态（unavailable 或运行时加载失败）：渲染中性占位。
+ * 弱化感由占位块自身的纯色灰底 + 纯色图标承担，不用容器 opacity——
+ * 整体降透明会让图标 / 文字变成半透明合成，视觉上「层叠」发虚。 */
+/* 占位块：和 <img> 一样填满上层套的尺寸盒（width/height 100%），leaf 不带
+ * 尺寸 opinion；上层没套尺寸时退化成按内容（图标 / 文字）撑开——不硬编码 min。
+ * 纯色 solid-black：底 solid-black-2、图标 / 文字 solid-black-8，
+ * 全程不透明，避免 alpha token 叠底产生的透视感。 */
+[data-odn-image-fallback] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  background: var(--odn-color-solid-black-2);
+  color: var(--odn-color-solid-black-8);
+  font-size: 12px;
+  line-height: 1.25;
+  text-align: center;
+}
+
 /** 整图作为 onPreview 触发区时的 button 包装；样式上完全融入容器（无边框、无 padding）。 */
 [data-odn-image-trigger] {
   display: block;

package/dist/message-image/image-viewer.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+/**
+ * 大图查看器的最小数据形态。刻意不复用 `MessageImageItem`——查看器只认
+ * url / alt，与「消息态」无关，保持解耦（MessageImageItem 结构上可直接传入）。
+ */
+export interface ImageViewerItem {
+    url: string;
+    alt?: string;
+}
+interface ImageViewerProps {
+    images: ImageViewerItem[];
+    initialIndex: number;
+    onClose: () => void;
+}
+/**
+ * MessageImage 的**私有内置**大图查看器——不写进 `components/index.ts`，
+ * 外部 import 不到。多个图片组件（未来含 Attachments）可共用这一份实现。
+ *
+ * 交互：ESC / 点遮罩 关闭；←/→ 切换；点图本身不关。
+ * 用 portal 挂到 body，规避祖先 `transform` / `overflow` 对 `position: fixed`
+ * 的截断（聊天流容器常带这些）。mounted guard 兜 SSR。
+ */
+export declare function ImageViewer({ images, initialIndex, onClose }: ImageViewerProps): import("react").ReactPortal | null;
+export default ImageViewer;

package/dist/message-image/image-viewer.js

@@ -0,0 +1,119 @@
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Icon from "../icon";
+
+/**
+ * 大图查看器的最小数据形态。刻意不复用 `MessageImageItem`——查看器只认
+ * url / alt，与「消息态」无关，保持解耦（MessageImageItem 结构上可直接传入）。
+ */
+
+/**
+ * MessageImage 的**私有内置**大图查看器——不写进 `components/index.ts`，
+ * 外部 import 不到。多个图片组件（未来含 Attachments）可共用这一份实现。
+ *
+ * 交互：ESC / 点遮罩 关闭；←/→ 切换；点图本身不关。
+ * 用 portal 挂到 body，规避祖先 `transform` / `overflow` 对 `position: fixed`
+ * 的截断（聊天流容器常带这些）。mounted guard 兜 SSR。
+ */
+export function ImageViewer(_ref) {
+  var _it$alt;
+  var images = _ref.images,
+    initialIndex = _ref.initialIndex,
+    onClose = _ref.onClose;
+  var _useState = useState(initialIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mounted = _useState4[0],
+    setMounted = _useState4[1];
+  var total = images.length;
+  var prev = useCallback(function () {
+    return setIndex(function (i) {
+      return (i - 1 + total) % total;
+    });
+  }, [total]);
+  var next = useCallback(function () {
+    return setIndex(function (i) {
+      return (i + 1) % total;
+    });
+  }, [total]);
+  useEffect(function () {
+    return setMounted(true);
+  }, []);
+  useEffect(function () {
+    var onKey = function onKey(e) {
+      if (e.key === 'Escape') onClose();
+      if (e.key === 'ArrowLeft') prev();
+      if (e.key === 'ArrowRight') next();
+    };
+    document.addEventListener('keydown', onKey);
+    return function () {
+      return document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose, prev, next]);
+  var it = images[index];
+  if (!mounted || !it) return null;
+  var overlay = /*#__PURE__*/React.createElement("div", {
+    "data-odn-image-viewer": true,
+    role: "dialog",
+    "aria-modal": "true",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement("img", {
+    src: it.url,
+    alt: (_it$alt = it.alt) !== null && _it$alt !== void 0 ? _it$alt : '',
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    "data-odn-image-viewer-img": true
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClose();
+    },
+    "data-odn-image-viewer-btn": "close",
+    "aria-label": "\u5173\u95ED\uFF08ESC\uFF09",
+    title: "\u5173\u95ED\uFF08ESC\uFF09"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "x",
+    size: 20
+  })), total > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      prev();
+    },
+    "data-odn-image-viewer-btn": "prev",
+    "aria-label": "\u4E0A\u4E00\u5F20\uFF08\u2190\uFF09",
+    title: "\u4E0A\u4E00\u5F20\uFF08\u2190\uFF09"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-left",
+    size: 24
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      next();
+    },
+    "data-odn-image-viewer-btn": "next",
+    "aria-label": "\u4E0B\u4E00\u5F20\uFF08\u2192\uFF09",
+    title: "\u4E0B\u4E00\u5F20\uFF08\u2192\uFF09"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 24
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-image-viewer-counter": true
+  }, index + 1, " / ", total)));
+  return /*#__PURE__*/createPortal(overlay, document.body);
+}
+export default ImageViewer;

package/dist/message-image/index.d.ts

@@ -8,15 +8,35 @@ import './style';
 export interface MessageImageItem {
     url: string;
     alt?: string;
+    /**
+     * 图片已过期（消息流只读态）——历史消息里的图 url 随时间失效。
+     * 这是「消息态」的业务语义，由 MessageImage 翻译成 `Image` leaf 的
+     * `unavailable` + 「已过期」占位（leaf 本身不认识「过期」这个词）。
+     */
+    expired?: boolean;
+    /**
+     * 图片自然像素宽 / 高（可选）。仅用于单图过期时让占位复刻原图尺寸；
+     * 拿不到则占位退化成 88×88。
+     */
+    width?: number;
+    height?: number;
 }
 export interface MessageImageProps {
     /** 待渲染的图片列表。 */
     images: MessageImageItem[];
     /**
-     * 点击图片回调，传入图片 index。组件不内置大图查看器，业务方按需对接
-     * `PreviewPanel` / 自己实现的 lightbox。
+     * 是否可点开看大图（**内置**查看器，opt-out）。默认 `true`——「点开看大图」是
+     * 消息图片的标配语义。纯展示 / 由业务自己接预览的场景传 `false` 关掉。
+     *
+     * 过期 / 不可用的图始终不可点开，与此开关无关（`Image` leaf 自动屏蔽）。
+     */
+    preview?: boolean;
+    /**
+     * 图片点击**通知**（埋点 / 统计用），传入被点图片 index。这**不是**「自定义
+     * 查看器」的挂载点——大图预览由内置查看器（`preview`）负责，此回调只是知会
+     * 上层「第 i 张被点了」，不阻止内置行为。过期图不触发。
      */
-    onPreview?: (index: number) => void;
+    onImageClick?: (index: number) => void;
     /**
      * 删除按钮点击回调，传入图片 index。本期 MessageImage 主要承载消息态展示，
      * 该回调主要为未来扩展（如撤回未发送消息中的图）保留。
@@ -35,7 +55,7 @@ export interface MessageImageProps {
  * Composer 待发送态等其他场景**不应消费此组件**——那是输入态语义，
  * 应直接用 `Image` leaf + 自己的尺寸 wrap。
  */
-export declare function MessageImage({ images, onPreview, onRemove }: MessageImageProps): import("react").JSX.Element | null;
+export declare function MessageImage({ images, preview, onImageClick, onRemove, }: MessageImageProps): import("react").JSX.Element | null;
 export declare namespace MessageImage {
     var displayName: string;
 }

package/dist/message-image/index.js

@@ -1,6 +1,55 @@
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useMemo, useState } from 'react';
 import Image from "../image";
+import Icon from "../icon";
+import ImageViewer from "./image-viewer";
 import "./style";
 
+/**
+ * 单图过期占位的尺寸边界，镜像 style/index.scss 的尺寸 token：
+ *  - SINGLE_MAX_* 对齐 --odn-message-image-max-width / -max-height
+ *  - THUMB 对齐 --odn-message-image-thumb-size（多图缩略边长）
+ * 放在 wrapper（MessageImage）而非 leaf——尺寸始终归 wrapper。
+ */
+var SINGLE_MAX_W = 280;
+var SINGLE_MAX_H = 360;
+var THUMB = 88;
+
+/** 过期图片占位：文案由 MessageImage（消息态）传入 leaf——leaf 不认识「过期」。 */
+function ExpiredFallback() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    name: "image-off",
+    size: 20
+  }), /*#__PURE__*/React.createElement("span", null, "\u56FE\u7247\u5DF2\u8FC7\u671F"));
+}
+
+/**
+ * 单图过期时占位盒的尺寸：
+ *  - 有原图尺寸 → 按 contain 缩放到 max 280×360 内，复刻原图 footprint，不跳版
+ *  - 没有原图尺寸 → 退化成 88×88（同多图缩略）
+ * 多图不走这里——多图恒为 88×88，由 scss 的 multi 选择器兜住。
+ */
+function expiredSingleSize(item) {
+  if (item.width && item.height) {
+    var scale = Math.min(SINGLE_MAX_W / item.width, SINGLE_MAX_H / item.height, 1);
+    return {
+      width: Math.round(item.width * scale),
+      height: Math.round(item.height * scale)
+    };
+  }
+  return {
+    width: THUMB,
+    height: THUMB
+  };
+}
+
 /**
  * MessageImage 渲染的图片项。
  * 与 `Attachment` 不同：图片消息的「主体」就是图本身，不需要 name / type / size 等
@@ -21,25 +70,61 @@ import "./style";
  */
 export function MessageImage(_ref) {
   var images = _ref.images,
-    onPreview = _ref.onPreview,
+    _ref$preview = _ref.preview,
+    preview = _ref$preview === void 0 ? true : _ref$preview,
+    onImageClick = _ref.onImageClick,
     onRemove = _ref.onRemove;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewerIndex = _useState2[0],
+    setViewerIndex = _useState2[1];
+
+  // 查看器只收「画得出」的图——过期 / 不可用的排除，避免上下张切到碎图。
+  var viewable = useMemo(function () {
+    return images.filter(function (img) {
+      return !img.expired;
+    });
+  }, [images]);
+
+  // 点第 i 张（原始 index）：先知会上层，再按需打开内置查看器。
+  var handleClick = useCallback(function (i) {
+    onImageClick === null || onImageClick === void 0 || onImageClick(i);
+    if (!preview) return;
+    var pos = viewable.indexOf(images[i]);
+    if (pos >= 0) setViewerIndex(pos);
+  }, [onImageClick, preview, images, viewable]);
   if (images.length === 0) return null;
   var isMulti = images.length > 1;
-  return /*#__PURE__*/React.createElement("div", {
+  // 只要「可预览」或「要通知」，就把图包成可点区（过期图由 leaf 内部再屏蔽）。
+  var clickable = preview || !!onImageClick;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-odn-message-image": true,
     "data-odn-message-image-multi": isMulti || undefined
   }, images.map(function (img, i) {
     return /*#__PURE__*/React.createElement(Image, {
       key: i,
       url: img.url,
-      alt: img.alt,
-      onPreview: onPreview ? function () {
-        return onPreview(i);
+      alt: img.alt
+      // 「过期」是消息态业务语义，翻译成 leaf 的渲染态：不加载失效 url + 已过期占位。
+      ,
+      unavailable: img.expired || undefined,
+      fallback: img.expired ? /*#__PURE__*/React.createElement(ExpiredFallback, null) : undefined
+      // 单图过期时用原图尺寸复刻 footprint；多图恒 88×88 由 scss 兜。
+      ,
+      style: !isMulti && img.expired ? expiredSingleSize(img) : undefined,
+      onPreview: clickable ? function () {
+        return handleClick(i);
       } : undefined,
       onRemove: onRemove ? function () {
         return onRemove(i);
       } : undefined
     });
+  })), viewerIndex !== null && viewable.length > 0 && /*#__PURE__*/React.createElement(ImageViewer, {
+    images: viewable,
+    initialIndex: viewerIndex,
+    onClose: function onClose() {
+      return setViewerIndex(null);
+    }
   }));
 }
 MessageImage.displayName = 'MessageImage';

package/dist/message-image/style/index.css

@@ -57,4 +57,102 @@ html {
   height: 100%;
   max-height: none;
   object-fit: cover;
+}
+
+/* 内置大图查看器（私有 image-viewer.tsx 渲染，portal 到 body）：
+ * ESC / 点遮罩 关闭；←/→ 切换；点图不关。样式从 message-image-verify 的
+ * SimpleLightbox 收编而来——不再散落在 demo 里各写一份。 */
+[data-odn-image-viewer] {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 64px;
+  background: rgba(0, 0, 0, 0.78);
+  cursor: zoom-out;
+  animation: odn-image-viewer-fade 0.15s ease-out;
+}
+
+@keyframes odn-image-viewer-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+[data-odn-image-viewer-img] {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  cursor: default;
+}
+
+[data-odn-image-viewer-btn] {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.95);
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background 0.15s, transform 0.1s;
+}
+[data-odn-image-viewer-btn]:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+[data-odn-image-viewer-btn]:active {
+  transform: scale(0.94);
+}
+[data-odn-image-viewer-btn]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--odn-color-primary) 60%, transparent);
+  outline-offset: 2px;
+}
+
+[data-odn-image-viewer-btn=close] {
+  top: 20px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+}
+
+[data-odn-image-viewer-btn=prev],
+[data-odn-image-viewer-btn=next] {
+  top: 50%;
+  width: 48px;
+  height: 48px;
+  transform: translateY(-50%);
+}
+[data-odn-image-viewer-btn=prev]:active,
+[data-odn-image-viewer-btn=next]:active {
+  transform: translateY(-50%) scale(0.94);
+}
+
+[data-odn-image-viewer-btn=prev] {
+  left: 24px;
+}
+
+[data-odn-image-viewer-btn=next] {
+  right: 24px;
+}
+
+[data-odn-image-viewer-counter] {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  padding: 6px 14px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.4);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  backdrop-filter: blur(8px);
+  transform: translateX(-50%);
 }

package/dist/user-bubble/index.d.ts

@@ -6,16 +6,15 @@ export interface UserBubbleProps {
     message: ChatMessage;
     onFileClick?: (attachment: Attachment) => void;
     /**
-     * 点击图片附件回调，业务方按此对接自己的 lightbox / 大图查看器。
+     * 图片点击**通知**（埋点 / 统计用）。大图预览由 `MessageImage` 内置查看器
+     * 负责——用户点图默认即可看大图，**业务方无需对接任何 lightbox**。此回调只
+     * 知会「第 i 张被点了」，不影响内置预览；过期图不触发。
      * @param index 被点击的图片在「当前消息内已分流的图片子集」中的位置（0-based）
-     * @param images 当前消息内所有 image attachments（已转成 `MessageImageItem`
-     *               的形态，包含 `url` 与 `alt`），方便直接 push 到 lightbox
-     *               实现上下张切换
-     * 不传 → 图片不可点击预览。
+     * @param images 当前消息内所有 image attachments（已转成 `MessageImageItem` 形态）
      */
-    onImagePreview?: (index: number, images: MessageImageItem[]) => void;
+    onImageClick?: (index: number, images: MessageImageItem[]) => void;
 }
-export declare function UserBubble({ message, onFileClick, onImagePreview }: UserBubbleProps): import("react").JSX.Element;
+export declare function UserBubble({ message, onFileClick, onImageClick }: UserBubbleProps): import("react").JSX.Element;
 export declare namespace UserBubble {
     var displayName: string;
 }

package/dist/user-bubble/index.js

@@ -6,7 +6,7 @@ export function UserBubble(_ref) {
   var _message$content, _message$attachments;
   var message = _ref.message,
     onFileClick = _ref.onFileClick,
-    onImagePreview = _ref.onImagePreview;
+    onImageClick = _ref.onImageClick;
   var segments = message.segments;
   var hasText = segments !== null && segments !== void 0 && segments.length ? segmentsHaveVisibleContent(segments) : !!((_message$content = message.content) !== null && _message$content !== void 0 && _message$content.trim());
   var textBody = segments !== null && segments !== void 0 && segments.length ? renderSegmentsContent(segments) : message.content;
@@ -20,7 +20,10 @@ export function UserBubble(_ref) {
   }).map(function (a) {
     return {
       url: a.url,
-      alt: a.name
+      alt: a.name,
+      expired: a.status === 'expired',
+      width: a.width,
+      height: a.height
     };
   });
   var files = all.filter(function (a) {
@@ -34,8 +37,8 @@ export function UserBubble(_ref) {
     "data-odn-user-bubble-images": true
   }, /*#__PURE__*/React.createElement(MessageImage, {
     images: images,
-    onPreview: onImagePreview ? function (i) {
-      return onImagePreview(i, images);
+    onImageClick: onImageClick ? function (i) {
+      return onImageClick(i, images);
     } : undefined
   })), hasText && textBody != null && /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-text": true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@11.8.0",
   "module": "dist/index.js",