@agentscope-ai/design 1.0.16 → 1.0.18

package/lib/components/commonComponents/Tooltip/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["mode", "arrow", "overlayClassName", "getPopupContainer"];
+var _excluded = ["mode", "maxHeight", "styles", "arrow", "overlayClassName", "getPopupContainer", "align"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,15 +20,26 @@ var SparkTooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   var Style = useStyle();
   var _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'dark' : _props$mode,
+    _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? '90vh' : _props$maxHeight,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
     arrow = props.arrow,
     overlayClassName = props.overlayClassName,
     getPopupContainer = props.getPopupContainer,
+    align = props.align,
     restProps = _objectWithoutProperties(props, _excluded);
   var _getCommonConfig = getCommonConfig(),
     sparkPrefix = _getCommonConfig.sparkPrefix,
     antPrefix = _getCommonConfig.antPrefix;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, restProps), {}, {
+      styles: _objectSpread(_objectSpread({}, styles), {}, {
+        body: _objectSpread({
+          maxHeight: maxHeight,
+          overflow: 'auto'
+        }, styles.body)
+      }),
       arrow: arrow !== null && arrow !== void 0 ? arrow : false,
       overlayClassName: classNames(overlayClassName, mode === 'light' && "".concat(sparkPrefix, "-tooltip-light")),
       getPopupContainer: getPopupContainer || function (triggerNode) {

package/lib/components/commonComponents/Tooltip/index.style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u9ED8\u8BA4\u6DF1\u8272 */\n.", "-tooltip-content {\n  .", "-tooltip-inner {\n    border: 1px solid transparent;\n    padding: 6px 12px;\n    background: var(--", "-color-text-base);\n    color: var(--", "-color-bg-base);\n  }\n}\n\n/* \u6D45\u8272\u6A21\u5F0F */\n.", "-tooltip-light {\n  .", "-tooltip-content .", "-tooltip-inner {\n    background: var(--", "-color-bg-base);\n    color: var(--", "-color-text);\n  }\n  \n  .", "-tooltip-arrow {\n    &::after {\n      background: var(--", "-color-bg-base);\n    }\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u9ED8\u8BA4\u6DF1\u8272 */\n.", "-tooltip-content {\n  .", "-tooltip-inner {\n    border: 1px solid transparent;\n    padding: 6px 12px;\n    background: var(--", "-color-slate);\n    color: var(--", "-color-text-on-primary);\n  }\n}\n\n/* \u6D45\u8272\u6A21\u5F0F */\n.", "-tooltip-light {\n  .", "-tooltip-content .", "-tooltip-inner {\n    background: var(--", "-color-bg-base);\n    color: var(--", "-color-text);\n  }\n  \n  .", "-tooltip-arrow {\n    &::after {\n      background: var(--", "-color-bg-base);\n    }\n  }\n}\n"])), function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/components/commonComponents/Video/index.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 type NativeVideoProps = React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
-interface IProps extends NativeVideoProps {
-    /**
-     * @description 视频地址
-     */
-    src?: string;
+export interface VideoProps extends NativeVideoProps {
     /**
      * @description 鼠标进入时是否自动播放
+     * @descriptionEn mouse enter auto play
+     * @default false
      */
     mouseEnterAutoPlay?: boolean;
     /**
      * @description video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入
+     * @descriptionEn video internal sets the style of the buttons in the dark background, if there are some operation buttons that want to inherit this style can be passed in here
      */
     children?: React.ReactNode;
 }
-declare const Video: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
+declare const Video: React.ForwardRefExoticComponent<Omit<VideoProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
 export default Video;

package/lib/components/commonComponents/Video/index.js

@@ -15,7 +15,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
-import VideoPlayerController from "./Control";
+import MediaPlayerController from "../Audio/Control";
 import { useControllableValue } from 'ahooks';
 import { getCommonConfig } from "../../../config";
 import { useStyle } from "./index.style";
@@ -55,8 +55,8 @@ var Video = /*#__PURE__*/forwardRef(function (props, ref) {
     setMuted = _useControllableValue2[1];
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    enableAudio = _useState8[0],
-    setEnableAudio = _useState8[1];
+    enableVolume = _useState8[0],
+    setEnableVolume = _useState8[1];
   var videoRef = useRef(null);
   var lockMouseEnterAutoPlayRef = useRef(false);
 
@@ -100,16 +100,16 @@ var Video = /*#__PURE__*/forwardRef(function (props, ref) {
       // 方法1: 检查mozHasAudio属性 (Firefox)
       if ('mozHasAudio' in videoRef.current) {
         // @ts-ignore
-        setEnableAudio(videoRef.current.mozHasAudio);
+        setEnableVolume(videoRef.current.mozHasAudio);
         return true;
       }
       // 方法2: 检查webkitAudioDecodedByteCount属性 (WebKit)
       if ('webkitAudioDecodedByteCount' in videoRef.current) {
         // @ts-ignore
-        setEnableAudio(videoRef.current.webkitAudioDecodedByteCount > 0);
+        setEnableVolume(videoRef.current.webkitAudioDecodedByteCount > 0);
         return true;
       }
-      setEnableAudio(false);
+      setEnableVolume(false);
       return false;
     }
     return false;
@@ -190,9 +190,14 @@ var Video = /*#__PURE__*/forwardRef(function (props, ref) {
         className: "".concat(sparkPrefix, "-video-content"),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: [/*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({
+        children: [props.poster && /*#__PURE__*/_jsx("img", {
+          src: props.poster,
+          alt: "poster",
+          className: "".concat(sparkPrefix, "-video-poster")
+        }), /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({
           ref: combinedRef
         }, videoProps), {}, {
+          controls: false,
           muted: muted,
           className: "".concat(sparkPrefix, "-video-element"),
           crossOrigin: "anonymous",
@@ -201,12 +206,12 @@ var Video = /*#__PURE__*/forwardRef(function (props, ref) {
           onPlay: handlePlay,
           onPause: handlePause,
           onEnded: handleEnded
-        })), controls && /*#__PURE__*/_jsx(VideoPlayerController, {
+        })), controls && /*#__PURE__*/_jsx(MediaPlayerController, {
           className: "".concat(sparkPrefix, "-video-controller-wrapper"),
           isPlaying: isPlaying,
           currentTime: currentTime,
           duration: duration,
-          enableAudio: enableAudio,
+          enableVolume: enableVolume,
           muted: muted,
           onMute: function onMute() {
             return setMuted(!muted);

package/lib/components/commonComponents/Video/index.style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n// Video \u4E3B\u5BB9\u5668\u6837\u5F0F\n.", "-video-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n\n  button {\n    --", "-color-text-disabled: rgba(231, 231, 237, 0.25) !important;\n    --", "-button-text-text-color: rgba(231, 231, 237, 0.88) !important;\n    --", "-button-text-text-hover-color: rgba(231, 231, 237, 0.88) !important;\n    --", "-button-text-hover-bg: rgba(231, 231, 237, 0.08) !important;\n  }\n}\n\n.", "-video-content {\n  width: 100%;\n  height: 100%;\n}\n\n.", "-video-element {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.", "-video-controller-wrapper {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(0deg, #000000 2%, rgba(0, 0, 0, 0) 94%);\n  transition: opacity 0.3s;\n}\n\n// VideoPlayerController \u7EC4\u4EF6\u5185\u90E8\u6837\u5F0F\n.", "-video-player-controller {\n  display: flex;\n  padding: 8px;\n  gap: 8px;\n  align-items: center;\n  width: 100%;\n  height: 40px;\n  overflow: hidden;\n}\n\n// \u65F6\u95F4\u6587\u672C\u6837\u5F0F\n.", "-video-time-text {\n  flex-grow: 0;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--", "-color-text-white);\n}\n\n// \u8FDB\u5EA6\u6761\u5BB9\u5668\u6837\u5F0F\n.", "-video-progress-container {\n  flex-grow: 1;\n  cursor: pointer;\n}\n\n// \u8FDB\u5EA6\u6761\u6837\u5F0F\n.", "-video-progress-bar {\n  width: 100%;\n\n  .", "-progress-inner {\n    --", "-progress-remaining-color: var(--", "-color-fill);\n  }\n  \n  .", "-progress-bg {\n    background: var(--", "-color-text-white) !important;\n    transition-duration: 0s;\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n// Video \u4E3B\u5BB9\u5668\u6837\u5F0F\n.", "-video-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n\n  button {\n    --", "-color-text-disabled: rgba(231, 231, 237, 0.25) !important;\n    --", "-button-text-text-color: rgba(231, 231, 237, 0.88) !important;\n    --", "-button-text-text-hover-color: rgba(231, 231, 237, 0.88) !important;\n    --", "-button-text-hover-bg: rgba(231, 231, 237, 0.08) !important;\n  }\n\n  .", "-media-time-text {\n    color: var(--", "-color-text-white);\n  }\n}\n\n.", "-video-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.", "-video-element {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.", "-video-poster {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.", "-video-controller-wrapper {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(0deg, #000000 2%, rgba(0, 0, 0, 0) 94%);\n  transition: opacity 0.3s;\n}\n  // \u8FDB\u5EA6\u6761\u6837\u5F0F\n.", "-media-progress-bar {\n  .", "-progress-inner {\n    --", "-progress-remaining-color: var(--", "-color-fill);\n  }\n  \n  .", "-progress-bg {\n    background: var(--", "-color-text-white) !important;\n  }\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
@@ -14,15 +14,13 @@ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _t
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
-  return p.sparkPrefix;
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.sparkPrefix;
-}, function (p) {
-  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {

package/lib/components/mobileComponents/MobileDrawer/index.style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-drawer {\n  .", "-drawer-header {\n    padding: 12px 20px;\n    border-bottom: none;\n    \n    .", "-drawer-header-title {\n      display: flex;\n      flex-direction: row;\n      \n      .", "-drawer-title {\n        font-size: 16px;\n        font-weight: 500;\n        line-height: 28px;\n        color: var(--", "-color-text);\n        display: flex;\n        justify-content: center;\n        padding-right: 32px;\n      }\n      \n      .", "-drawer-close {\n        width: 32px;\n        height: 32px;\n      }\n    }\n  }\n  \n  .", "-drawer-body {\n    --", "-padding-lg: 20px;\n  }\n  \n  .", "-drawer-footer {\n    padding: 16px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-top: none;\n    \n    .", "-drawer-footer-info {\n      font-size: 14px;\n      line-height: 24px;\n      color: var(--", "-color-text-tertiary);\n    }\n    \n    .", "-drawer-footer-buttons {\n      display: flex;\n      gap: 12px;\n    }\n  }\n  \n  .", "-drawer-close {\n    color: var(--", "-color-text);\n    margin: 0;\n  }\n}\n\n.", "-drawer.", "-show-divider {\n  .", "-drawer-header {\n    border-bottom: 1px solid var(--", "-color-border-secondary);\n  }\n  \n  .", "-drawer-footer {\n    border-top: 1px solid var(--", "-color-border-secondary);\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-drawer {\n  .", "-drawer-header {\n    padding: 12px 20px;\n    border-bottom: none;\n    \n    .", "-drawer-header-title {\n      display: flex;\n      flex-direction: row;\n      \n      .", "-drawer-title {\n        font-size: 16px;\n        font-weight: 500;\n        line-height: 28px;\n        color: var(--", "-color-text);\n        display: flex;\n        justify-content: center;\n        padding-right: 32px;\n      }\n      \n      .", "-drawer-close {\n        width: 32px;\n        height: 32px;\n      }\n    }\n  }\n  \n  .", "-drawer-body {\n    --", "-padding-lg: 20px;\n  }\n  \n  .", "-drawer-footer {\n    padding: 16px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-top: none;\n    \n    .", "-drawer-footer-info {\n      font-size: 14px;\n      line-height: 24px;\n      color: var(--", "-color-text-tertiary);\n    }\n    \n    .", "-drawer-footer-buttons {\n      display: flex;\n      gap: 12px;\n    }\n  }\n  \n  .", "-drawer-close {\n    color: var(--", "-color-text);\n    margin: 0;\n  }\n}\n\n.", "-drawer.", "-show-divider {\n  .", "-drawer-header {\n    border-bottom: 1px solid var(--", "-color-border-secondary);\n  }\n  \n  .", "-drawer-footer {\n    border-top: 1px solid var(--", "-color-border-secondary);\n  }\n}\n.", "-drawer-bottom {\n  .", "-drawer-content-wrapper {\n    border-radius: 16px 16px 0 0;\n  }\n  .", "-drawer-content {\n    border-radius: 16px 16px 0 0;\n  }\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
@@ -41,4 +41,10 @@ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _t
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 });

package/lib/index.d.ts

@@ -48,7 +48,8 @@ export { default as Tag, type SparkTagProps as TagProps, } from './components/co
 export { default as TimePicker } from './components/commonComponents/TimePicker';
 export { default as Tooltip, type SparkTooltipProps as TooltipProps, } from './components/commonComponents/Tooltip';
 export { default as Upload } from './components/commonComponents/Upload';
-export { default as Video } from './components/commonComponents/Video';
+export { default as Video, type VideoProps } from './components/commonComponents/Video';
+export { default as Audio, type AudioProps } from './components/commonComponents/Audio';
 export { FileCard, default as FileIcon, type SparkFileCardProps, type SparkFileIconProps, } from './components/commonComponents/FileIcon';
 /**
  * 移动端组件

package/lib/index.js

@@ -54,6 +54,7 @@ export { default as TimePicker } from "./components/commonComponents/TimePicker"
 export { default as Tooltip } from "./components/commonComponents/Tooltip";
 export { default as Upload } from "./components/commonComponents/Upload";
 export { default as Video } from "./components/commonComponents/Video";
+export { default as Audio } from "./components/commonComponents/Audio";
 export { FileCard, default as FileIcon } from "./components/commonComponents/FileIcon";
 
 /**

package/lib/typings.d.ts

@@ -12,3 +12,15 @@ interface Window {
   /** 在阿里云viper>应用配置>基础数据中配置的应用配置项 */
   ALIYUN_CONSOLE_GLOBAL?: any;
 }
+
+// 扩展 antd 的 GlobalToken 类型，添加自定义 token
+declare module 'antd/es/theme/interface' {
+  interface GlobalToken {
+    /** 自定义灰色主题色 */
+    colorSlate?: string;
+    /** 自定义灰色主题色悬停态 */
+    colorSlateHover?: string;
+    /** 自定义灰色主题色背景 */
+    colorSlateBg?: string;
+  }
+}