one-design-next 0.0.76 → 0.0.78

package/dist/mention/index.js

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { resolveMentionCategoryIcon } from "../_genui-inline-ref";
+import Icon from "../icon";
 import Popover from "../popover";
 import "./style";
 function formatPayloadSummary(payload) {
@@ -6,7 +8,7 @@ function formatPayloadSummary(payload) {
   var entries = Object.entries(payload).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       v = _ref2[1];
-    return v != null && v !== '';
+    return v !== null && v !== undefined && v !== '';
   });
   if (entries.length === 0) return null;
   return entries.map(function (_ref3) {
@@ -16,16 +18,50 @@ function formatPayloadSummary(payload) {
     return "".concat(k, ": ").concat(String(v));
   }).join(' · ');
 }
-export function Mention(_ref5) {
+function MentionPopoverTitle(_ref5) {
+  var label = _ref5.label,
+    icon = _ref5.icon;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-title": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-popover-at": true,
+    "aria-hidden": true
+  }, "@"), icon ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-icon": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 12
+  })) : null, label);
+}
+function MentionHoverPopup(_ref6) {
+  var label = _ref6.label,
+    icon = _ref6.icon,
+    summary = _ref6.summary;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-inner": true
+  }, /*#__PURE__*/React.createElement(MentionPopoverTitle, {
+    label: label,
+    icon: icon
+  }), summary ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-summary": true
+  }, summary) : /*#__PURE__*/React.createElement("div", {
+    "data-odn-mention-popover-empty": true
+  }, "\u672A\u586B\u53C2\u6570"));
+}
+export function Mention(_ref7) {
   var _data$state;
-  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 data = _ref7.data,
+    _ref7$interactive = _ref7.interactive,
+    interactive = _ref7$interactive === void 0 ? false : _ref7$interactive,
+    _ref7$active = _ref7.active,
+    active = _ref7$active === void 0 ? false : _ref7$active,
+    onClick = _ref7.onClick;
   var clickable = interactive && !!onClick;
   var state = active ? 'active' : (_data$state = data.state) !== null && _data$state !== void 0 ? _data$state : 'complete';
+  var categoryIcon = resolveMentionCategoryIcon(data.kind, data.icon);
+  var summary = formatPayloadSummary(data.payload);
+  var hasHoverPopup = !interactive && (!!summary || data.state === 'pending');
+  var hoverable = clickable || hasHoverPopup;
   var handleClick = clickable ? function (e) {
     e.preventDefault();
     e.stopPropagation();
@@ -39,17 +75,21 @@ export function Mention(_ref5) {
     "data-odn-mention": true,
     "data-state": state,
     "data-clickable": clickable || undefined,
+    "data-hoverable": hoverable || undefined,
     onClick: handleClick,
     onMouseDown: handleMouseDown
   }, /*#__PURE__*/React.createElement("span", {
     "data-odn-mention-at": true,
     "aria-hidden": true
-  }, "@"), /*#__PURE__*/React.createElement("span", {
+  }, "@"), categoryIcon ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-mention-icon": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: categoryIcon,
+    size: 14
+  })) : null, /*#__PURE__*/React.createElement("span", {
     "data-odn-mention-label": true
   }, data.label));
-  if (interactive) return core;
-  var summary = formatPayloadSummary(data.payload);
-  if (!summary && data.state !== 'pending') return core;
+  if (!hasHoverPopup) return core;
   return /*#__PURE__*/React.createElement(Popover, {
     trigger: "hover",
     placement: "top",
@@ -59,30 +99,9 @@ export function Mention(_ref5) {
     mouseLeaveDelay: 0.1,
     popup: /*#__PURE__*/React.createElement(MentionHoverPopup, {
       label: data.label,
+      icon: categoryIcon,
       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
-  }), summary ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-mention-popover-summary": true
-  }, summary) : /*#__PURE__*/React.createElement("div", {
-    "data-odn-mention-popover-empty": true
-  }, "\u672A\u586B\u53C2\u6570"));
-}
-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

@@ -1,15 +1,33 @@
+@charset "UTF-8";
+/* Invocation / Mention 完成后 chip 共用皮：默认无底 + 品牌色字 + 品类 icon
+ *
+ * 必须是 inline，不能是 inline-flex / inline-block。
+ * 蓝字要和旁边正文走同一条基线、同一套行高；做成独立盒子后，
+ * 内部文字基线永远对不齐（1em 盒子贴基线时，字在盒子里还会再上浮一截）。
+ */
 [data-odn-mention] {
-  display: inline-flex;
-  align-items: center;
+  display: inline;
+  vertical-align: baseline;
   white-space: nowrap;
   word-break: keep-all;
   overflow-wrap: normal;
   margin: 0;
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
+  padding: 0 4px;
+  border-radius: 4px;
+  --odn-inline-ref-bg: transparent;
+  --odn-inline-ref-bg-hover: color-mix(
+    in srgb,
+    var(--odn-color-brand-6) 12%,
+    transparent
+  );
+  --odn-inline-ref-bg-active: color-mix(
+    in srgb,
+    var(--odn-color-brand-6) 16%,
+    transparent
+  );
+  background: var(--odn-inline-ref-bg);
   color: var(--odn-color-brand-7, var(--odn-color-brand-6));
-  font-weight: 500;
+  font-weight: 400;
   font-size: 14px;
   line-height: 24px;
   cursor: default;
@@ -20,10 +38,11 @@
 [data-odn-mention][data-state=pending] {
   color: color-mix(in srgb, var(--odn-color-brand-7, var(--odn-color-brand-6)) 60%, transparent);
 }
-[data-odn-mention][data-state=active], [data-odn-mention]:hover {
-  background: color-mix(in srgb, var(--odn-color-brand-6) 12%, transparent);
+[data-odn-mention][data-hoverable]:hover {
+  background: var(--odn-inline-ref-bg-hover);
 }
 [data-odn-mention][data-state=active] {
+  background: var(--odn-inline-ref-bg-active);
   border-bottom: none;
 }
 [data-odn-mention][data-clickable] {
@@ -32,12 +51,29 @@
 
 [data-odn-mention-at] {
   opacity: 0.7;
+  margin-inline-end: 2px;
 }
 
 [data-odn-mention][data-state=pending] [data-odn-mention-at] {
   opacity: 1;
 }
 
+[data-odn-mention-icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-inline-end: 2px;
+  /* 1em SVG 贴基线会整块落在字的上方，下移与汉字视觉中心对齐 */
+  vertical-align: -0.15em;
+  line-height: 0;
+  color: inherit;
+}
+[data-odn-mention-icon] :where(svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 [data-odn-mention-popover-inner] {
   display: flex;
   flex-direction: column;
@@ -47,8 +83,8 @@
 [data-odn-mention-popover-title] {
   display: inline-flex;
   align-items: center;
-  gap: 1px;
-  font-weight: 500;
+  gap: 2px;
+  font-weight: 400;
   color: var(--odn-color-brand-7, var(--odn-color-brand-6));
 }
 
@@ -62,8 +98,8 @@
   align-self: flex-start;
   padding: 2px 6px;
   border-radius: 4px;
-  background: color-mix(in srgb, var(--odn-color-brand-6) 10%, transparent);
-  color: var(--odn-color-brand-7, var(--odn-color-brand-6));
+  background: var(--odn-color-black-4);
+  color: var(--odn-color-solid-black-10);
   font-size: 12px;
   line-height: 1.4;
 }

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import type { PreviewTab } from '../_genui-types';
+import { type ArtifactFileIconType } from '../artifact';
 import './style';
 export interface PreviewPanelActionTooltips {
+    /** "分享"按钮的 tooltip 文案 */
+    share?: React.ReactNode;
     /** "在浏览器打开"按钮的 tooltip 文案 */
     openInBrowser?: React.ReactNode;
     /** "下载"按钮的 tooltip 文案 */
@@ -13,12 +16,29 @@ export interface PreviewPanelActionTooltips {
     /** "收起预览"按钮的 tooltip 文案 */
     closeAll?: React.ReactNode;
 }
+/** Header menuIcon 展开列表中的产物项（通常来自当前对话）。 */
+export interface PreviewPanelArtifact {
+    id: string;
+    title: string;
+    fileType?: ArtifactFileIconType;
+    status?: 'Generating' | 'Done' | (string & NonNullable<unknown>);
+}
 export interface PreviewPanelProps {
     tabs: PreviewTab[];
     activeTabId?: string | null;
     onTabChange?: (id: string) => void;
     onTabClose?: (id: string) => void;
     onCloseAll?: () => void;
+    /**
+     * 当前对话的全部产物。传入后 menuIcon 列表以 Artifact Small 呈现；
+     * 未传时回退为当前已打开的 `tabs`（向后兼容）。
+     */
+    artifacts?: PreviewPanelArtifact[];
+    /**
+     * 点击产物列表项。调用方按 `getArtifactAction(fileType)`：
+     * 可预览 → 打开 / 切换预览；不可预览 → 下载。
+     */
+    onArtifactOpen?: (artifact: PreviewPanelArtifact) => void;
     /**
      * 下载当前激活标签。传入时在 header 右侧渲染下载按钮，点击时回调会收到当前激活 tab；
      * 未传则不渲染下载按钮（向后兼容）。
@@ -28,6 +48,11 @@ export interface PreviewPanelProps {
      * 在浏览器中打开当前激活标签。未传时使用默认实现（Blob URL + window.open）。
      */
     onOpenInBrowser?: (tab: PreviewTab) => void;
+    /**
+     * 分享当前激活标签（产物）。未传时默认复制带 `preview` 查询参数的当前页链接，
+     * 并 toast「已复制产物链接」。
+     */
+    onShare?: (tab: PreviewTab) => void;
     /**
      * 是否全屏。配合 `onFullscreenChange` 使用；传入回调时 header 渲染全屏/取消全屏按钮。
      */
@@ -54,7 +79,7 @@ export interface PreviewPanelProps {
      */
     actionTooltips?: PreviewPanelActionTooltips;
 }
-export declare function PreviewPanel({ tabs, activeTabId, onTabChange, onTabClose, onCloseAll, onDownload, onOpenInBrowser, fullscreen, onFullscreenChange, open, emptyTitle, emptyDescription, widthMode, actionTooltips, }: PreviewPanelProps): import("react").JSX.Element;
+export declare function PreviewPanel({ tabs, activeTabId, onTabChange, onTabClose, onCloseAll, artifacts, onArtifactOpen, onDownload, onOpenInBrowser, onShare, fullscreen, onFullscreenChange, open, emptyTitle, emptyDescription, widthMode, actionTooltips, }: PreviewPanelProps): import("react").JSX.Element;
 export declare namespace PreviewPanel {
     var displayName: string;
 }

package/dist/preview-panel/index.js

@@ -3,8 +3,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["tooltip"];
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import Artifact, { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ArtifactFileIcon, getArtifactAction } from "../artifact";
 import Button from "../button";
 import Icon from "../icon";
+import { Message } from "../message";
 import { OdnOverlayVerticalScrollbar, useOverlayScrollbarReveal } from "../overlay-vertical-scrollbar";
 import Popover from "../popover";
 import StreamText from "../stream-text";
@@ -12,6 +14,45 @@ import Tooltip from "../tooltip";
 import { CsvPreviewTable } from "./CsvPreviewTable";
 import { isCsvTab, parseCsv } from "./parseCsv";
 import "./style";
+
+/** Header menuIcon 展开列表中的产物项（通常来自当前对话）。 */
+
+function inferArtifactFileType(title) {
+  var _title$split$pop;
+  var ext = title.includes('.') ? (_title$split$pop = title.split('.').pop()) === null || _title$split$pop === void 0 ? void 0 : _title$split$pop.toLowerCase() : undefined;
+  if (ext && ARTIFACT_DEDICATED_FILE_ICON_TYPES.includes(ext)) {
+    return ext;
+  }
+  return 'file';
+}
+
+/** 与 Artifact Small 相同的主名中间省略（保留后四位 + 扩展名）。 */
+var TAB_TITLE_NAME_TAIL_KEEP = 4;
+function splitTabTitleParts(title) {
+  var lastDot = title.lastIndexOf('.');
+  var name = title;
+  var extension = null;
+  if (lastDot > 0 && lastDot < title.length - 1) {
+    var ext = title.slice(lastDot);
+    if (ext.length <= 6) {
+      name = title.slice(0, lastDot);
+      extension = ext;
+    }
+  }
+  if (name.length <= TAB_TITLE_NAME_TAIL_KEEP) {
+    return {
+      head: name,
+      tail: null,
+      extension: extension
+    };
+  }
+  return {
+    head: name.slice(0, -TAB_TITLE_NAME_TAIL_KEEP),
+    tail: name.slice(-TAB_TITLE_NAME_TAIL_KEEP),
+    extension: extension
+  };
+}
+
 /** 内部辅助：有 tooltip 文案时包裹 Tooltip，否则仅渲染按钮 */
 function ActionButton(_ref) {
   var tooltip = _ref.tooltip,
@@ -35,8 +76,11 @@ export function PreviewPanel(_ref2) {
     onTabChange = _ref2.onTabChange,
     onTabClose = _ref2.onTabClose,
     onCloseAll = _ref2.onCloseAll,
+    artifacts = _ref2.artifacts,
+    onArtifactOpen = _ref2.onArtifactOpen,
     onDownload = _ref2.onDownload,
     onOpenInBrowser = _ref2.onOpenInBrowser,
+    onShare = _ref2.onShare,
     _ref2$fullscreen = _ref2.fullscreen,
     fullscreen = _ref2$fullscreen === void 0 ? false : _ref2$fullscreen,
     onFullscreenChange = _ref2.onFullscreenChange,
@@ -53,6 +97,17 @@ export function PreviewPanel(_ref2) {
   })) !== null && _tabs$find !== void 0 ? _tabs$find : tabs[0]) !== null && _ref3 !== void 0 ? _ref3 : null;
   var isOpen = open !== null && open !== void 0 ? open : tabs.length > 0;
   var isEmpty = tabs.length === 0;
+  var menuArtifacts = useMemo(function () {
+    if (artifacts && artifacts.length > 0) return artifacts;
+    return tabs.map(function (tab) {
+      return {
+        id: tab.id,
+        title: tab.name,
+        fileType: inferArtifactFileType(tab.name)
+      };
+    });
+  }, [artifacts, tabs]);
+  var showArtifactsMenu = menuArtifacts.length > 0;
   var previewScrollRef = useRef(null);
   var tabsScrollRef = useRef(null);
   var _useState = useState({
@@ -147,6 +202,34 @@ export function PreviewPanel(_ref2) {
       return URL.revokeObjectURL(url);
     }, 60000);
   };
+  var handleShare = function handleShare() {
+    var _navigator$clipboard;
+    if (!activeTab) return;
+    if (onShare) {
+      onShare(activeTab);
+      return;
+    }
+    var shareUrl = new URL(window.location.href);
+    shareUrl.searchParams.set('preview', activeTab.id);
+    var text = shareUrl.toString();
+    var onOk = function onOk() {
+      return Message.success({
+        content: '已复制产物链接',
+        duration: 1.5
+      });
+    };
+    var onFail = function onFail() {
+      return Message.info({
+        content: '复制失败，请手动分享产物链接',
+        duration: 2
+      });
+    };
+    if ((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(onOk).catch(onFail);
+    } else {
+      onFail();
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel": true,
     "data-odn-preview-panel-open": isOpen || undefined,
@@ -157,7 +240,7 @@ export function PreviewPanel(_ref2) {
     "data-odn-preview-panel-header": true
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel-tabs-rail": true
-  }, !isEmpty && /*#__PURE__*/React.createElement(Popover, {
+  }, showArtifactsMenu && /*#__PURE__*/React.createElement(Popover, {
     trigger: "hover",
     placement: "bottomLeft",
     arrowed: false,
@@ -165,33 +248,37 @@ export function PreviewPanel(_ref2) {
     mouseLeaveDelay: 0.15,
     zIndex: 1100,
     popupStyle: {
-      padding: 4,
-      minWidth: 200,
+      padding: 8,
+      minWidth: 220,
       maxWidth: 320
     },
     popup: /*#__PURE__*/React.createElement("div", {
       "data-odn-preview-panel-tabs-menu": true,
       role: "listbox",
       "aria-label": "\u5168\u90E8\u4EA7\u7269"
-    }, tabs.map(function (tab) {
-      var isActive = tab.id === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id);
-      return /*#__PURE__*/React.createElement("button", {
-        key: tab.id,
-        type: "button",
+    }, menuArtifacts.map(function (item) {
+      var _item$fileType;
+      var isActive = item.id === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id);
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.id,
         role: "option",
         "aria-selected": isActive,
         "data-odn-preview-panel-tabs-menu-item": true,
-        "data-odn-preview-panel-tabs-menu-item-active": isActive || undefined,
-        onClick: function onClick() {
-          return onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(tab.id);
-        }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "file-text",
-        size: 14,
-        "data-odn-preview-panel-tabs-menu-item-icon": true
-      }), /*#__PURE__*/React.createElement("span", {
-        "data-odn-preview-panel-tabs-menu-item-name": true
-      }, tab.name));
+        "data-odn-preview-panel-tabs-menu-item-active": isActive || undefined
+      }, /*#__PURE__*/React.createElement(Artifact, {
+        size: "small",
+        title: item.title,
+        actionKind: getArtifactAction((_item$fileType = item.fileType) !== null && _item$fileType !== void 0 ? _item$fileType : 'file').kind,
+        fileType: item.fileType,
+        status: item.status,
+        onOpen: onArtifactOpen || onTabChange ? function () {
+          if (onArtifactOpen) {
+            onArtifactOpen(item);
+            return;
+          }
+          onTabChange === null || onTabChange === void 0 || onTabChange(item.id);
+        } : undefined
+      }));
     }))
   }, /*#__PURE__*/React.createElement(Button, {
     light: true,
@@ -216,12 +303,21 @@ export function PreviewPanel(_ref2) {
     role: "tablist",
     "aria-label": "\u9884\u89C8\u6807\u7B7E"
   }, tabs.map(function (tab) {
+    var _artifacts$find$fileT, _artifacts$find;
     var isActive = tab.id === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id);
+    var fileType = (_artifacts$find$fileT = artifacts === null || artifacts === void 0 || (_artifacts$find = artifacts.find(function (item) {
+      return item.id === tab.id;
+    })) === null || _artifacts$find === void 0 ? void 0 : _artifacts$find.fileType) !== null && _artifacts$find$fileT !== void 0 ? _artifacts$find$fileT : inferArtifactFileType(tab.name);
+    var _splitTabTitleParts = splitTabTitleParts(tab.name),
+      titleHead = _splitTabTitleParts.head,
+      titleTail = _splitTabTitleParts.tail,
+      titleExtension = _splitTabTitleParts.extension;
     return /*#__PURE__*/React.createElement("div", {
       key: tab.id,
       role: "tab",
       tabIndex: isActive ? 0 : -1,
       "aria-selected": isActive,
+      title: tab.name,
       onClick: function onClick() {
         return onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(tab.id);
       },
@@ -233,13 +329,21 @@ export function PreviewPanel(_ref2) {
       },
       "data-odn-preview-panel-tab": true,
       "data-odn-preview-panel-tab-active": isActive || undefined
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "file-text",
-      size: 14,
-      "data-odn-preview-panel-tab-icon": true
-    }), /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-odn-preview-panel-tab-icon": true,
+      "aria-hidden": true
+    }, /*#__PURE__*/React.createElement(ArtifactFileIcon, {
+      type: fileType,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
       "data-odn-preview-panel-tab-name": true
-    }, tab.name), /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-odn-preview-panel-tab-name-head": true
+    }, titleHead), titleTail ? /*#__PURE__*/React.createElement("span", {
+      "data-odn-preview-panel-tab-name-tail": true
+    }, titleTail) : null, titleExtension ? /*#__PURE__*/React.createElement("span", {
+      "data-odn-preview-panel-tab-name-ext": true
+    }, titleExtension) : null), /*#__PURE__*/React.createElement("button", {
       type: "button",
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -252,7 +356,7 @@ export function PreviewPanel(_ref2) {
       "aria-label": "\u5173\u95ED\u6807\u7B7E"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "x",
-      size: 12
+      size: 16
     })));
   })), showTabScrollButtons && /*#__PURE__*/React.createElement(Button, {
     light: true,
@@ -267,17 +371,35 @@ export function PreviewPanel(_ref2) {
     "aria-label": "\u5411\u53F3\u67E5\u770B\u6807\u7B7E"
   })), /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel-actions": true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Tooltip.Group, {
+    as: "div",
+    placement: "bottom",
     "data-odn-preview-panel-action-group": true
-  }, /*#__PURE__*/React.createElement(ActionButton, {
-    tooltip: actionTooltips === null || actionTooltips === void 0 ? void 0 : actionTooltips.openInBrowser,
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    popup: actionTooltips === null || actionTooltips === void 0 ? void 0 : actionTooltips.share
+  }, /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "medium",
+    icon: "share-2",
+    onClick: handleShare,
+    disabled: !activeTab,
+    "data-odn-preview-panel-share": true,
+    "aria-label": "\u5206\u4EAB\u4EA7\u7269"
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    popup: actionTooltips === null || actionTooltips === void 0 ? void 0 : actionTooltips.openInBrowser
+  }, /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "medium",
     icon: "arrow-up-right",
     onClick: handleOpenInBrowser,
     disabled: !activeTab,
     "data-odn-preview-panel-open-browser": true,
     "aria-label": "\u5728\u6D4F\u89C8\u5668\u6253\u5F00"
-  }), onDownload ? /*#__PURE__*/React.createElement(ActionButton, {
-    tooltip: actionTooltips === null || actionTooltips === void 0 ? void 0 : actionTooltips.download,
+  })), onDownload ? /*#__PURE__*/React.createElement(Tooltip, {
+    popup: actionTooltips === null || actionTooltips === void 0 ? void 0 : actionTooltips.download
+  }, /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "medium",
     icon: "download-2",
     onClick: function onClick() {
       return activeTab && onDownload(activeTab);
@@ -285,7 +407,7 @@ export function PreviewPanel(_ref2) {
     disabled: !activeTab,
     "data-odn-preview-panel-download": true,
     "aria-label": "\u4E0B\u8F7D"
-  }) : null), onFullscreenChange || onCloseAll ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+  })) : null), onFullscreenChange || onCloseAll ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     "data-odn-preview-panel-action-divider": true,
     "aria-hidden": true
   }), /*#__PURE__*/React.createElement("div", {