one-design-next 0.0.70 → 0.0.71

package/dist/artifact/index.js

@@ -1,201 +1,208 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { motion } from 'motion/react';
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import HoverFill from "../hover-fill";
 import Icon from "../icon";
+import Tooltip from "../tooltip";
+import { getArtifactAction } from "./actions";
+import { getArtifactGlowColor } from "./glow";
+import { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ArtifactFileIcon } from "./icons";
 import "./style";
-var PEN_VARIANTS = {
-  normal: {
-    rotate: 0,
-    x: 0,
-    y: 0
-  },
-  animate: {
-    rotate: [-0.3, 0.2, -0.4],
-    x: [0, -0.5, 1, 0],
-    y: [0, 1, -0.5, 0],
-    transition: {
-      duration: 0.5,
-      repeat: Number.POSITIVE_INFINITY,
-      repeatDelay: 0.45,
-      ease: 'easeInOut'
+export { getArtifactAction } from "./actions";
+export { ARTIFACT_FILE_GLOW_COLORS, getArtifactGlowColor } from "./glow";
+export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_ICON_MEDIUM_SIZE, ARTIFACT_FILE_ICON_MEDIUM_VIEWBOX, ARTIFACT_FILE_ICON_SMALL_SIZE, ARTIFACT_FILE_ICON_SMALL_VIEWBOX, ARTIFACT_FILE_ICON_TYPES, ArtifactFileIcon, artifactFileIcons, artifactFileIconsMedium, artifactFileIconsSmall, getArtifactFileIconUrl } from "./icons";
+
+/**
+ * Artifact 形态尺寸：
+ * - `medium`：Card（默认）— 大号类型 Icon + 标题 / 大小·日期
+ * - `small`：Small — 小号类型 Icon + 更紧凑的行高与间距
+ */
+
+function inferFileType(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';
+}
+
+/** 主名溢出时保留末尾位数（省略中间），扩展名始终完整可见。 */
+var TITLE_NAME_TAIL_KEEP = 4;
+
+/** 拆出扩展名 + 主名末尾，便于溢出时 `前缀…后四位.ext`。 */
+function splitTitleParts(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;
     }
   }
-};
-function formatCreatedAtToMinute(date) {
-  var year = date.getFullYear();
-  var month = "".concat(date.getMonth() + 1).padStart(2, '0');
-  var day = "".concat(date.getDate()).padStart(2, '0');
-  var hours = "".concat(date.getHours()).padStart(2, '0');
-  var minutes = "".concat(date.getMinutes()).padStart(2, '0');
-  return "\u521B\u5EFA\u65F6\u95F4\uFF1A".concat(year, "-").concat(month, "-").concat(day, " ").concat(hours, ":").concat(minutes);
+  if (name.length <= TITLE_NAME_TAIL_KEEP) {
+    return {
+      head: name,
+      tail: null,
+      extension: extension
+    };
+  }
+  return {
+    head: name.slice(0, -TITLE_NAME_TAIL_KEEP),
+    tail: name.slice(-TITLE_NAME_TAIL_KEEP),
+    extension: extension
+  };
+}
+function ArtifactActionCue(_ref) {
+  var action = _ref.action;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-action": true,
+    "data-odn-artifact-action-kind": action.kind,
+    "aria-hidden": true,
+    title: action.label
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: action.icon,
+    size: 16
+  }));
 }
 
 /**
- * 对话流内的单个产物摘要卡片。
- * 本期聚焦单项展示，保留 `type` 字段以支持未来“报告 / 人群”等产物类型扩展。
+ * 对话流内的产物：
+ * - medium / Card：左 Icon + 右标题 / 大小·日期；可点 hover 时 Icon 后退缩小、文案左移遮罩，右侧浮出操作预期
+ * - small / Small：无底色/描边；hover 用 HoverFill 叠灰底（不展示预览/下载操作预期）
  */
-export function Artifact(_ref) {
-  var title = _ref.title,
-    statRange = _ref.statRange,
-    createdAt = _ref.createdAt,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'Done' : _ref$status,
-    thumbnailUrl = _ref.thumbnailUrl,
-    brandLogoUrl = _ref.brandLogoUrl,
-    _ref$widthMode = _ref.widthMode,
-    widthMode = _ref$widthMode === void 0 ? 'responsive' : _ref$widthMode,
-    _ref$openText = _ref.openText,
-    openText = _ref$openText === void 0 ? '查看详情' : _ref$openText,
-    onOpen = _ref.onOpen;
+export function Artifact(_ref2) {
+  var title = _ref2.title,
+    fileType = _ref2.fileType,
+    fileSize = _ref2.fileSize,
+    date = _ref2.date,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    _ref2$status = _ref2.status,
+    status = _ref2$status === void 0 ? 'Done' : _ref2$status,
+    onOpen = _ref2.onOpen,
+    className = _ref2.className,
+    style = _ref2.style;
   var isGenerating = status === 'Generating';
   var isInteractive = !!onOpen && !isGenerating;
-  var _useState = useState({
-      x: 208,
-      y: 60,
-      active: false
-    }),
+  var resolvedType = fileType !== null && fileType !== void 0 ? fileType : inferFileType(title);
+  var iconSize = size;
+  var action = getArtifactAction(resolvedType);
+  var _splitTitleParts = splitTitleParts(title),
+    titleHead = _splitTitleParts.head,
+    titleTail = _splitTitleParts.tail,
+    titleExtension = _splitTitleParts.extension;
+
+  // 主名前缀被截断时才展示完整 title 的 Tooltip（hover 时再测，受控避免首进不弹）
+  var titleHeadRef = useRef(null);
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    spotlight = _useState2[0],
-    setSpotlight = _useState2[1];
-  var handleMouseMove = function handleMouseMove(event) {
-    var rect = event.currentTarget.getBoundingClientRect();
-    setSpotlight({
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
-      active: true
-    });
-  };
-  var handleMouseEnter = function handleMouseEnter(event) {
-    var rect = event.currentTarget.getBoundingClientRect();
-    setSpotlight({
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
-      active: true
-    });
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    setSpotlight(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        active: false
-      });
-    });
-  };
-  var spotlightStyle = {
-    '--odn-artifact-spot-x': "".concat(spotlight.x, "px"),
-    '--odn-artifact-spot-y': "".concat(spotlight.y, "px"),
-    '--odn-artifact-spot-opacity': spotlight.active && !isGenerating ? 1 : 0
+    titleTooltipOpen = _useState2[0],
+    setTitleTooltipOpen = _useState2[1];
+  var handleTitleMouseEnter = useCallback(function () {
+    var el = titleHeadRef.current;
+    setTitleTooltipOpen(!!el && el.scrollWidth > el.clientWidth);
+  }, []);
+  var handleTitleMouseLeave = useCallback(function () {
+    setTitleTooltipOpen(false);
+  }, []);
+
+  // Small 形态只展示 Icon + 标题；Card（medium）保留大小 / 日期（或 Generating 文案）
+  var showMeta = size !== 'small';
+  var metaParts = !showMeta ? [] : isGenerating ? ['生成中'] : [fileSize, date].filter(Boolean);
+  // 操作预期仅 Card 可点时展示；Small 不展示
+  var showAction = size !== 'small' && isInteractive;
+  var handleClick = function handleClick() {
+    onOpen === null || onOpen === void 0 || onOpen();
   };
-  var createdAtText = createdAt !== null && createdAt !== void 0 ? createdAt : formatCreatedAtToMinute(new Date());
-  var secondLineText = isGenerating ? createdAtText : statRange;
-  var isDone = status === 'Done';
-  var thirdLineText = status === 'Generating' ? '生成中' : isDone ? openText : createdAt !== null && createdAt !== void 0 ? createdAt : '创建时间：--';
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact-spotlight": true,
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("div", {
+  var titleNode = /*#__PURE__*/React.createElement(Tooltip, {
+    popup: /*#__PURE__*/React.createElement("span", {
+      "data-odn-artifact-title-tooltip": true
+    }, title)
+    // Card 向上；List / Small 向右，避免挡住同列下一项
+    ,
+    placement: size === 'small' ? 'right' : 'top',
+    flip: false,
+    mouseEnterDelay: 0.15,
+    visible: titleTooltipOpen,
+    hideOnAncestorScroll: true
+    // display:table 让换行后宽度按最长行收缩，避免 max-content+max-width 撑出留白
+    ,
+    popupStyle: {
+      display: 'table',
+      width: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-title": true,
+    onMouseEnter: handleTitleMouseEnter,
+    onMouseLeave: handleTitleMouseLeave
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: titleHeadRef,
+    "data-odn-artifact-title-name": true
+  }, titleHead), titleTail ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-title-tail": true
+  }, titleTail) : null, titleExtension ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-title-ext": true
+  }, titleExtension) : null));
+  var copy = /*#__PURE__*/React.createElement("span", {
     "data-odn-artifact-copy": true
-  }, /*#__PURE__*/React.createElement("p", {
-    "data-odn-artifact-title": true
-  }, title), /*#__PURE__*/React.createElement("p", {
-    "data-odn-artifact-stat-range": true
-  }, secondLineText), /*#__PURE__*/React.createElement("p", {
-    "data-odn-artifact-created-at": true
-  }, /*#__PURE__*/React.createElement("span", null, thirdLineText), isDone && /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-detail-icon": true,
+  }, titleNode, metaParts.length > 0 ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-meta": true
+  }, metaParts.map(function (part) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: part,
+      "data-odn-artifact-meta-item": true
+    }, part);
+  })) : null);
+  var glowColor = getArtifactGlowColor(resolvedType);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, size !== 'small' ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-glow": true,
     "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "arrowRight",
-    size: 16
-  })))), /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact-visual-wrap": true
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact-visual": true,
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-icon": true,
     "aria-hidden": true
-  }, !isGenerating && (thumbnailUrl ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact-visual-inner": true
-  }, /*#__PURE__*/React.createElement("img", {
-    src: thumbnailUrl,
-    alt: "",
-    "data-odn-artifact-visual-image": true
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-block": true,
-    "data-odn-artifact-visual-block-a": true
-  }), /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-block": true,
-    "data-odn-artifact-visual-block-b": true
-  }), brandLogoUrl ? /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-logo": true
-  }, /*#__PURE__*/React.createElement("img", {
-    src: brandLogoUrl,
-    alt: "",
-    "data-odn-artifact-visual-logo-image": true
-  })) : /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-block": true,
-    "data-odn-artifact-visual-block-e": true
-  }), /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-block": true,
-    "data-odn-artifact-visual-block-c": true
-  }), /*#__PURE__*/React.createElement("span", {
-    "data-odn-artifact-visual-block": true,
-    "data-odn-artifact-visual-block-d": true
-  }))), isGenerating && /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact-generating-icon": true
-  }, /*#__PURE__*/React.createElement("svg", {
-    fill: "none",
-    height: "24",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "2",
-    viewBox: "0 0 24 24",
-    width: "24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2"
-  }), /*#__PURE__*/React.createElement(motion.path, {
-    d: "M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z",
-    initial: "normal",
-    animate: "animate",
-    variants: PEN_VARIANTS
-  }), /*#__PURE__*/React.createElement(motion.path, {
-    d: "M8 18h1",
-    initial: "normal",
-    animate: "animate",
-    transition: {
-      duration: 0.5,
-      repeat: Number.POSITIVE_INFINITY,
-      repeatDelay: 0.45
-    },
-    variants: {
-      normal: {
-        d: 'M8 18h1'
-      },
-      animate: {
-        d: 'M8 18h5'
-      }
-    }
-  }))))));
-  return isInteractive ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "data-odn-artifact": true,
+  }, /*#__PURE__*/React.createElement(ArtifactFileIcon, {
+    type: resolvedType,
+    size: iconSize
+  })), size === 'small' ? copy : /*#__PURE__*/React.createElement("span", {
+    "data-odn-artifact-main": true
+  }, copy), showAction ? /*#__PURE__*/React.createElement(ArtifactActionCue, {
+    action: action
+  }) : null);
+  var sharedProps = _objectSpread({
+    'data-odn-artifact': true,
+    'data-odn-artifact-size': size,
+    'data-odn-artifact-status': status,
+    'data-odn-artifact-file-type': resolvedType,
+    'data-odn-artifact-action-kind': showAction ? action.kind : undefined
+  }, size === 'small' ? {} : {
+    className: className,
+    style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, '--odn-artifact-glow-color', glowColor))
+  });
+  var body = isInteractive ? /*#__PURE__*/React.createElement("button", _extends({
+    type: "button"
+  }, sharedProps, {
     "data-odn-artifact-clickable": true,
-    onClick: onOpen,
-    onMouseEnter: handleMouseEnter,
-    onMouseMove: handleMouseMove,
-    onMouseLeave: handleMouseLeave,
-    style: spotlightStyle,
-    "data-odn-artifact-status": status,
-    "data-odn-artifact-width-mode": widthMode
-  }, content) : /*#__PURE__*/React.createElement("div", {
-    "data-odn-artifact": true,
-    onMouseEnter: !isGenerating ? handleMouseEnter : undefined,
-    onMouseMove: !isGenerating ? handleMouseMove : undefined,
-    onMouseLeave: !isGenerating ? handleMouseLeave : undefined,
-    style: spotlightStyle,
-    "data-odn-artifact-status": status,
-    "data-odn-artifact-width-mode": widthMode
-  }, content);
+    onClick: handleClick
+  }), content) : /*#__PURE__*/React.createElement("div", sharedProps, content);
+
+  // Small：默认透明；可点时用 HoverFill 叠灰底（对齐 Attachments chip / ChatItem）
+  if (size === 'small') {
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      "data-odn-artifact-small-wrap": true,
+      bgClassName: "odn-artifact-small-bg",
+      hoverColor: "var(--odn-color-black-4)",
+      activeColor: "var(--odn-color-black-5)",
+      disabled: !isInteractive,
+      className: className,
+      style: style
+    }, body);
+  }
+  return body;
 }
 Artifact.displayName = 'Artifact';
 export default Artifact;