one-design-next 0.0.11 → 0.0.13

package/dist/mention/index.js

@@ -0,0 +1,90 @@
+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 Popover from "../popover";
+import "./style";
+function formatParamsSummary(params) {
+  if (!params) return null;
+  var entries = Object.entries(params).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      v = _ref2[1];
+    return v != null && v !== '';
+  });
+  if (entries.length === 0) return null;
+  return entries.map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      k = _ref4[0],
+      v = _ref4[1];
+    return "".concat(k, ": ").concat(String(v));
+  }).join(' · ');
+}
+export function Mention(_ref5) {
+  var data = _ref5.data,
+    _ref5$interactive = _ref5.interactive,
+    interactive = _ref5$interactive === void 0 ? false : _ref5$interactive,
+    _ref5$active = _ref5.active,
+    active = _ref5$active === void 0 ? false : _ref5$active,
+    onClick = _ref5.onClick;
+  var clickable = interactive && !!onClick;
+  var state = active ? 'active' : 'complete';
+  var handleClick = clickable ? function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick(e.currentTarget);
+  } : undefined;
+  var handleMouseDown = clickable ? function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  } : undefined;
+  var core = /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention": true,
+    "data-state": state,
+    "data-clickable": clickable || undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-at": true,
+    "aria-hidden": true
+  }, "@"), /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-label": true
+  }, data.label));
+  if (interactive) return core;
+  var summary = formatParamsSummary(data.params);
+  if (!summary) return core;
+  return /*#__PURE__*/React.createElement(Popover, {
+    trigger: "hover",
+    placement: "top",
+    arrowed: false,
+    offset: 6,
+    mouseEnterDelay: 0.15,
+    mouseLeaveDelay: 0.1,
+    popup: /*#__PURE__*/React.createElement(MentionHoverPopup, {
+      label: data.label,
+      summary: summary
+    })
+  }, core);
+}
+function MentionHoverPopup(_ref6) {
+  var label = _ref6.label,
+    summary = _ref6.summary;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-inner": true
+  }, /*#__PURE__*/React.createElement(MentionPopoverTitle, {
+    label: label
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-summary": true
+  }, summary));
+}
+function MentionPopoverTitle(_ref7) {
+  var label = _ref7.label;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-title": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-popover-at": true,
+    "aria-hidden": true
+  }, "@"), label);
+}
+export default Mention;

package/dist/mention/style/index.css

@@ -0,0 +1,58 @@
+[data-odn-mention] {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+  font-weight: 500;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: background-color 0.15s;
+}
+[data-odn-mention][data-state=active], [data-odn-mention]:hover {
+  background: color-mix(in srgb, var(--odn-color-cyan-5) 12%, transparent);
+}
+[data-odn-mention][data-clickable] {
+  cursor: pointer;
+}
+
+[data-odn-mention-at] {
+  opacity: 0.7;
+}
+
+[data-odn-mention-popover-inner] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+[data-odn-mention-popover-title] {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-weight: 500;
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+}
+
+[data-odn-mention-popover-at] {
+  opacity: 0.7;
+}
+
+[data-odn-mention-popover-summary] {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--odn-color-cyan-5) 10%, transparent);
+  color: var(--odn-color-cyan-6, var(--odn-color-cyan-5));
+  font-size: 12px;
+  line-height: 1.4;
+}

package/dist/mention/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/mention/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

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

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import './style';
+/**
+ * MessageImage 渲染的图片项。
+ * 与 `Attachment` 不同：图片消息的「主体」就是图本身，不需要 name / type / size 等
+ * 文件元信息——展示文件名只会变成 `/qidian/im/image/3c87...` 这种对用户无意义的服务端路径。
+ */
+export interface MessageImageItem {
+    url: string;
+    alt?: string;
+}
+export interface MessageImageProps {
+    /** 待渲染的图片列表。 */
+    images: MessageImageItem[];
+    /**
+     * 点击图片回调，传入图片 index。组件不内置大图查看器，业务方按需对接
+     * `PreviewPanel` / 自己实现的 lightbox。
+     */
+    onPreview?: (index: number) => void;
+    /**
+     * 删除按钮点击回调，传入图片 index。本期 MessageImage 主要承载消息态展示，
+     * 该回调主要为未来扩展（如撤回未发送消息中的图）保留。
+     */
+    onRemove?: (index: number) => void;
+}
+/**
+ * 用户消息中的图片附件渲染组件——`Image` leaf 之上的「消息态」语义包装。
+ *
+ * 两态：
+ *  - 单图：数据驱动尺寸，max 280×360 contain，保留原图长宽比
+ *  - 多图：模板驱动尺寸，每张 88×88 cover，横向 flex + wrap
+ *    与单图差异化是为了多图场景下「整齐成组」比「逐张完整」更重要——
+ *    业界共识（微信 / iMessage / Telegram 多图均为统一缩略 + 点开看大图）
+ *
+ * Composer 待发送态等其他场景**不应消费此组件**——那是输入态语义，
+ * 应直接用 `Image` leaf + 自己的尺寸 wrap。
+ */
+export declare function MessageImage({ images, onPreview, onRemove }: MessageImageProps): import("react").JSX.Element | null;
+export declare namespace MessageImage {
+    var displayName: string;
+}
+export default MessageImage;

package/dist/message-image/index.js

@@ -0,0 +1,46 @@
+import Image from "../image";
+import "./style";
+
+/**
+ * MessageImage 渲染的图片项。
+ * 与 `Attachment` 不同：图片消息的「主体」就是图本身，不需要 name / type / size 等
+ * 文件元信息——展示文件名只会变成 `/qidian/im/image/3c87...` 这种对用户无意义的服务端路径。
+ */
+
+/**
+ * 用户消息中的图片附件渲染组件——`Image` leaf 之上的「消息态」语义包装。
+ *
+ * 两态：
+ *  - 单图：数据驱动尺寸，max 280×360 contain，保留原图长宽比
+ *  - 多图：模板驱动尺寸，每张 88×88 cover，横向 flex + wrap
+ *    与单图差异化是为了多图场景下「整齐成组」比「逐张完整」更重要——
+ *    业界共识（微信 / iMessage / Telegram 多图均为统一缩略 + 点开看大图）
+ *
+ * Composer 待发送态等其他场景**不应消费此组件**——那是输入态语义，
+ * 应直接用 `Image` leaf + 自己的尺寸 wrap。
+ */
+export function MessageImage(_ref) {
+  var images = _ref.images,
+    onPreview = _ref.onPreview,
+    onRemove = _ref.onRemove;
+  if (images.length === 0) return null;
+  var isMulti = images.length > 1;
+  return /*#__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);
+      } : undefined,
+      onRemove: onRemove ? function () {
+        return onRemove(i);
+      } : undefined
+    });
+  }));
+}
+MessageImage.displayName = 'MessageImage';
+export default MessageImage;

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

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+/* MessageImage 尺寸 token（业务方按需 cascade 覆盖）：
+ *
+ *  单图态（数据驱动尺寸）：
+ *    --odn-message-image-max-width 280：drawer 模式下 UserBubble inner 可用
+ *      宽 384px（chat area 560 - px-6×2），280 留 104px 余量；fullscreen
+ *      模式 UserBubble inner 576px 完全富余
+ *    --odn-message-image-max-height 360：长边 × 1.286（≈ 黄金比 1.272），
+ *      竖图 9:16 → 203×360、3:4 → 270×360、2:3 → 240×360 都保留竖向张力；
+ *      与 iMessage(260×360) / Claude(300×400) 中段对齐
+ *
+ *  多图态（模板驱动尺寸）：
+ *    --odn-message-image-thumb-size 88：3 张时正好填满 280 包围盒（88×3 +
+ *      gap 4×2 = 272，留 8 余量），4+ 张自然换行；与 iMessage / Telegram
+ *      多图缩略 80–100 区间一致
+ *    --odn-message-image-thumb-gap 4：图与图之间最小可识别留白
+ *
+ *  以上都是 8 的整数倍，不破坏栅格。 */
+html {
+  --odn-message-image-max-width: 280px;
+  --odn-message-image-max-height: 360px;
+  --odn-message-image-thumb-size: 88px;
+  --odn-message-image-thumb-gap: 4px;
+}
+
+/* MessageImage = Image leaf 之上的「消息态」语义包装。
+ *  - 单图：数据驱动尺寸（max 280×360 contain），保留原图比例
+ *  - 多图：模板驱动尺寸（88×88 cover，flex wrap），整齐成组
+ *  - 圆角 scoped 到 MessageImage 内的 Image leaf 容器，不影响其他场景下的
+ *    Image leaf（Composer 缩略由 Composer 自己加圆角） */
+[data-odn-message-image] {
+  display: inline-block;
+  max-width: min(100%, var(--odn-message-image-max-width));
+}
+[data-odn-message-image] [data-odn-image] {
+  display: block;
+  border-radius: 8px;
+  overflow: hidden;
+}
+[data-odn-message-image] img {
+  max-width: 100%;
+  max-height: var(--odn-message-image-max-height);
+  object-fit: contain;
+}
+
+[data-odn-message-image][data-odn-message-image-multi] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--odn-message-image-thumb-gap);
+}
+[data-odn-message-image][data-odn-message-image-multi] [data-odn-image] {
+  width: var(--odn-message-image-thumb-size);
+  height: var(--odn-message-image-thumb-size);
+}
+[data-odn-message-image][data-odn-message-image-multi] img {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  object-fit: cover;
+}

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

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

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

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/preview-panel/index.d.ts

@@ -12,6 +12,10 @@ export interface PreviewPanelProps {
      * 未传则不渲染下载按钮（向后兼容）。
      */
     onDownload?: (tab: PreviewTab) => void;
+    /**
+     * 在浏览器中打开当前激活标签。未传时使用默认实现（Blob URL + window.open）。
+     */
+    onOpenInBrowser?: (tab: PreviewTab) => void;
     /**
      * 是否展开面板。不传时默认按 `tabs.length > 0` 自动推断；
      * 显式传 `true` 且 tabs 为空时渲染空态（"暂无附件"），便于由外部按钮主动打开。
@@ -27,7 +31,7 @@ export interface PreviewPanelProps {
      */
     widthMode?: 'half' | 'fill';
 }
-export declare function PreviewPanel({ tabs, activeTabId, onTabChange, onTabClose, onCloseAll, onDownload, open, emptyTitle, emptyDescription, widthMode, }: PreviewPanelProps): import("react").JSX.Element;
+export declare function PreviewPanel({ tabs, activeTabId, onTabChange, onTabClose, onCloseAll, onDownload, onOpenInBrowser, open, emptyTitle, emptyDescription, widthMode, }: PreviewPanelProps): import("react").JSX.Element;
 export declare namespace PreviewPanel {
     var displayName: string;
 }

package/dist/preview-panel/index.js

@@ -11,6 +11,7 @@ export function PreviewPanel(_ref) {
     onTabClose = _ref.onTabClose,
     onCloseAll = _ref.onCloseAll,
     onDownload = _ref.onDownload,
+    onOpenInBrowser = _ref.onOpenInBrowser,
     open = _ref.open,
     _ref$emptyTitle = _ref.emptyTitle,
     emptyTitle = _ref$emptyTitle === void 0 ? '暂无附件' : _ref$emptyTitle,
@@ -27,6 +28,21 @@ export function PreviewPanel(_ref) {
   var _useOverlayScrollbarR = useOverlayScrollbarReveal(),
     previewScrollbarReveal = _useOverlayScrollbarR.reveal,
     handlePreviewScroll = _useOverlayScrollbarR.onScroll;
+  var handleOpenInBrowser = function handleOpenInBrowser() {
+    if (!activeTab) return;
+    if (onOpenInBrowser) {
+      onOpenInBrowser(activeTab);
+      return;
+    }
+    var blob = new Blob([activeTab.content], {
+      type: activeTab.type || 'text/plain'
+    });
+    var url = URL.createObjectURL(blob);
+    window.open(url, '_blank', 'noopener,noreferrer');
+    window.setTimeout(function () {
+      return URL.revokeObjectURL(url);
+    }, 60000);
+  };
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel": true,
     "data-odn-preview-panel-open": isOpen || undefined,
@@ -79,10 +95,19 @@ export function PreviewPanel(_ref) {
     })));
   })), /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel-actions": true
-  }, onDownload && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     light: true,
     size: "medium",
-    icon: "bottom",
+    icon: "arrow-up-right",
+    onClick: handleOpenInBrowser,
+    disabled: !activeTab,
+    "data-odn-preview-panel-open-browser": true,
+    title: "\u5728\u6D4F\u89C8\u5668\u6253\u5F00",
+    "aria-label": "\u5728\u6D4F\u89C8\u5668\u6253\u5F00"
+  }), onDownload && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "medium",
+    icon: "download-2",
     onClick: function onClick() {
       return activeTab && onDownload(activeTab);
     },

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

@@ -1,11 +1,21 @@
 /// <reference types="react" />
+import { type MessageImageItem } from '../message-image';
 import type { Attachment, ChatMessage } from '../_genui-types';
 import './style';
 export interface UserBubbleProps {
     message: ChatMessage;
     onFileClick?: (attachment: Attachment) => void;
+    /**
+     * 点击图片附件回调，业务方按此对接自己的 lightbox / 大图查看器。
+     * @param index 被点击的图片在「当前消息内已分流的图片子集」中的位置（0-based）
+     * @param images 当前消息内所有 image attachments（已转成 `MessageImageItem`
+     *               的形态，包含 `url` 与 `alt`），方便直接 push 到 lightbox
+     *               实现上下张切换
+     * 不传 → 图片不可点击预览。
+     */
+    onImagePreview?: (index: number, images: MessageImageItem[]) => void;
 }
-export declare function UserBubble({ message, onFileClick }: UserBubbleProps): import("react").JSX.Element;
+export declare function UserBubble({ message, onFileClick, onImagePreview }: UserBubbleProps): import("react").JSX.Element;
 export declare namespace UserBubble {
     var displayName: string;
 }

package/dist/user-bubble/index.js

@@ -1,20 +1,45 @@
 import { Attachments } from "../attachments";
+import MessageImage from "../message-image";
 import "./style";
 export function UserBubble(_ref) {
+  var _message$attachments;
   var message = _ref.message,
-    onFileClick = _ref.onFileClick;
+    onFileClick = _ref.onFileClick,
+    onImagePreview = _ref.onImagePreview;
   var hasText = !!message.content;
-  var hasFiles = message.attachments && message.attachments.length > 0;
+  var all = (_message$attachments = message.attachments) !== null && _message$attachments !== void 0 ? _message$attachments : [];
+
+  /* 图片附件分流到 MessageImage，保持其数据驱动尺寸的渲染语义；
+   * 其他附件（文件 / 报告 / chip）继续走 Attachments 的模板槽位渲染。
+   * 分流是 UserBubble 内部行为，业务方传入的 message.attachments 形状不变。 */
+  var images = all.filter(function (a) {
+    return a.type.startsWith('image/') && a.url;
+  }).map(function (a) {
+    return {
+      url: a.url,
+      alt: a.name
+    };
+  });
+  var files = all.filter(function (a) {
+    return !(a.type.startsWith('image/') && a.url);
+  });
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble": true
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-inner": true
-  }, hasText && /*#__PURE__*/React.createElement("div", {
+  }, images.length > 0 && /*#__PURE__*/React.createElement("div", {
+    "data-odn-user-bubble-images": true
+  }, /*#__PURE__*/React.createElement(MessageImage, {
+    images: images,
+    onPreview: onImagePreview ? function (i) {
+      return onImagePreview(i, images);
+    } : undefined
+  })), hasText && /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-text": true
-  }, /*#__PURE__*/React.createElement("p", null, message.content)), hasFiles && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", null, message.content)), files.length > 0 && /*#__PURE__*/React.createElement("div", {
     "data-odn-user-bubble-files": true
   }, /*#__PURE__*/React.createElement(Attachments, {
-    attachments: message.attachments,
+    attachments: files,
     onFileClick: onFileClick,
     compact: hasText
   }))));

package/dist/user-bubble/style/index.css

@@ -7,6 +7,7 @@
   max-width: 75%;
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   gap: 6px;
 }
 
@@ -25,6 +26,11 @@
   margin: 0;
 }
 
+[data-odn-user-bubble-images] {
+  display: flex;
+  justify-content: flex-end;
+}
+
 [data-odn-user-bubble-files] {
   display: flex;
   justify-content: flex-end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "One Design Next from TAD@tencent.com",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -76,7 +76,6 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@tailwindcss/postcss": "^4",
-    "@tencent/tad-universal-od": "^1.141.3",
     "@tweakpane/core": "^2.0.5",
     "@types/d3": "^7.4.3",
     "@types/d3-cloud": "^1.2.9",
@@ -113,7 +112,7 @@
     "stylelint": "^16.23.1",
     "stylelint-config-standard-scss": "^15.0.1",
     "svgo": "latest",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4",
     "tweakpane": "latest"
   },