@agentscope-ai/design 1.0.9 → 1.0.10

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

@@ -1,6 +1,6 @@
 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/newCreateStyle";
+import createGlobalStyle from "../../../libs/createStyle";
 export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-upload.", "-upload-wrapper {\n  .", "-upload.", "-upload-select {\n    border: var(--", "-line-width) dashed var(--", "-color-border-secondary);\n    background-color: var(--", "-color-fill-tertiary);\n  }\n  \n  .", "-upload-drag {\n    border: var(--", "-line-width) dashed var(--", "-color-border-secondary);\n    background-color: var(--", "-color-fill-tertiary);\n    \n    .", "-upload-btn {\n      padding: 32px 48px;\n    }\n    \n    .", "-upload-drag-container {\n      text-align: center;\n      \n      .", "-upload-icon {\n        display: inline-grid;\n        place-items: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 8px;\n        background: var(--", "-color-bg-base);\n      }\n      \n      .", "-upload-text {\n        margin-top: 8px;\n        margin-bottom: 0;\n        color: var(--", "-color-text);\n        font-weight: 500;\n        line-height: 24px;\n      }\n      \n      .", "-upload-hint {\n        margin-top: 4px;\n        margin-bottom: 0;\n        color: var(--", "-color-text-secondary);\n        line-height: 20px;\n      }\n    }\n  }\n}\n\n.", "-upload.", "-custom-uploaded {\n  .", "-upload-list {\n    &:first-child {\n      margin-top: 0;\n      width: 242px;\n    }\n    \n    .", "-upload-list-item {\n      display: flex;\n      align-items: center;\n      height: 60px;\n      padding: 9px 12px;\n      margin-top: 20px;\n      border-color: var(--", "-color-border-secondary);\n      border-style: solid;\n      \n      .", "-upload-list-item-thumbnail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 40px;\n        height: 40px;\n      }\n      \n      .", "-upload-list-item-name {\n        width: 150px;\n        color: var(--", "-color-text);\n        line-height: 24px;\n        font-weight: 500;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      \n      .", "-upload-list-item-actions {\n        .", "-btn {\n          width: 32px;\n          height: 32px;\n          color: var(--", "-color-text-tertiary);\n        }\n      }\n      \n      .", "-upload-list-item-progress {\n        bottom: 6px;\n        padding-left: 48px;\n        \n        .", "-progress {\n          display: flex;\n          align-items: center;\n          height: 20px;\n        }\n      }\n      \n      &.", "-upload-list-item-error {\n        border-color: var(--", "-color-border-secondary);\n        \n        .", "-upload-list-item-name {\n          color: var(--", "-color-error);\n        }\n        \n        .", "-btn-icon .anticon {\n          color: var(--", "-color-text-tertiary);\n        }\n      }\n    }\n  }\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface VideoPlayerControllerProps {
+    isPlaying: boolean;
+    className?: string;
+    currentTime?: number;
+    duration?: number;
+    enableAudio?: boolean;
+    muted?: boolean;
+    onMute?: () => void;
+    onPlayPause?: () => void;
+    onFullscreen?: () => void;
+    onProgressClick?: (time: number) => void;
+}
+/**
+ * 视频播放器控制器组件
+ * 包含播放/暂停、音量控制、进度条、时间显示和全屏按钮
+ */
+declare const VideoPlayerController: React.FC<VideoPlayerControllerProps>;
+export default VideoPlayerController;

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

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import { IconButton, Progress } from '@ali/agentscope-ai-design';
+import { SparkPauseFill, SparkVolumeLine, SparkEnlargeLine, SparkPlayFill, SparkMuteLine } from '@agentscope-ai/icons';
+import { getCommonConfig } from "../../../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 将秒数转换为 mm:ss 格式
+ * @param seconds 秒数
+ * @returns mm:ss 格式字符串
+ */
+var formatTime = function formatTime(seconds) {
+  var minutes = Math.floor(seconds / 60);
+  var remainingSeconds = Math.floor(seconds % 60);
+  return "".concat(minutes.toString().padStart(2, '0'), ":").concat(remainingSeconds.toString().padStart(2, '0'));
+};
+
+/**
+ * 视频播放器控制器组件
+ * 包含播放/暂停、音量控制、进度条、时间显示和全屏按钮
+ */
+var VideoPlayerController = function VideoPlayerController(props) {
+  var className = props.className,
+    isPlaying = props.isPlaying,
+    onPlayPause = props.onPlayPause,
+    onFullscreen = props.onFullscreen,
+    onProgressClick = props.onProgressClick,
+    _props$enableAudio = props.enableAudio,
+    enableAudio = _props$enableAudio === void 0 ? false : _props$enableAudio,
+    _props$muted = props.muted,
+    muted = _props$muted === void 0 ? true : _props$muted,
+    onMute = props.onMute;
+  var commonConfig = getCommonConfig();
+  var sparkPrefix = commonConfig.sparkPrefix;
+  var currentTime = useMemo(function () {
+    return formatTime(props.currentTime || 0);
+  }, [props.currentTime]);
+  var duration = useMemo(function () {
+    return formatTime(props.duration || 0);
+  }, [props.duration]);
+  var progress = useMemo(function () {
+    return Math.min((props.currentTime || 0) / (props.duration || 0.01) * 100, 100);
+  }, [props.currentTime, props.duration]);
+
+  /**
+   * 处理进度条点击事件
+   * @param event 鼠标点击事件
+   */
+  var handleProgressClick = function handleProgressClick(event) {
+    if (!onProgressClick || !props.duration) return;
+    var rect = event.currentTarget.getBoundingClientRect();
+    var clickX = event.clientX - rect.left;
+    var progressWidth = rect.width;
+    var clickPercent = clickX / progressWidth;
+    var targetTime = clickPercent * props.duration;
+
+    // 确保时间在有效范围内
+    var clampedTime = Math.max(0, Math.min(targetTime, props.duration));
+    onProgressClick(clampedTime);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "".concat(sparkPrefix, "-video-player-controller ").concat(className || ''),
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        bordered: false,
+        size: "small",
+        shape: "default",
+        disabled: false,
+        icon: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {}),
+        onClick: onPlayPause
+      }), /*#__PURE__*/_jsx(IconButton, {
+        bordered: false,
+        size: "small",
+        shape: "default",
+        disabled: !enableAudio,
+        icon: enableAudio && muted ? /*#__PURE__*/_jsx(SparkMuteLine, {}) : /*#__PURE__*/_jsx(SparkVolumeLine, {}),
+        onClick: onMute
+      }), /*#__PURE__*/_jsx("span", {
+        className: "".concat(sparkPrefix, "-video-time-text"),
+        children: currentTime
+      }), /*#__PURE__*/_jsx("div", {
+        className: "".concat(sparkPrefix, "-video-progress-container"),
+        onClick: handleProgressClick,
+        children: /*#__PURE__*/_jsx(Progress, {
+          className: "".concat(sparkPrefix, "-video-progress-bar"),
+          percent: progress,
+          showInfo: false
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        className: "".concat(sparkPrefix, "-video-time-text"),
+        children: duration
+      }), /*#__PURE__*/_jsx(IconButton, {
+        bordered: false,
+        size: "small",
+        shape: "default",
+        disabled: false,
+        icon: /*#__PURE__*/_jsx(SparkEnlargeLine, {}),
+        onClick: onFullscreen
+      })]
+    })
+  });
+};
+export default VideoPlayerController;

package/lib/components/commonComponents/Video/demo/demo1.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Video/demo/demo1.js

@@ -0,0 +1,12 @@
+import { Video } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Video, {
+    src: "https://cloud.video.taobao.com/vod/ObvVc91XA3OJXnFHl0KVhBo_60LrKAROCojWxB_EAYs.mp4",
+    controls: true,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+type NativeVideoProps = React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+interface IProps extends NativeVideoProps {
+    /**
+     * @description 视频地址
+     */
+    src?: string;
+    /**
+     * @description 鼠标进入时是否自动播放
+     */
+    mouseEnterAutoPlay?: boolean;
+    /**
+     * @description video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入
+     */
+    children?: React.ReactNode;
+}
+declare const Video: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
+export default Video;

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

@@ -0,0 +1,222 @@
+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 = ["controls", "mouseEnterAutoPlay", "children", "className", "style"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 { useControllableValue } from 'ahooks';
+import { getCommonConfig } from "../../../config";
+import { useStyle } from "./index.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Video = /*#__PURE__*/forwardRef(function (props, ref) {
+  var controls = props.controls,
+    _props$mouseEnterAuto = props.mouseEnterAutoPlay,
+    mouseEnterAutoPlay = _props$mouseEnterAuto === void 0 ? false : _props$mouseEnterAuto,
+    children = props.children,
+    className = props.className,
+    style = props.style,
+    videoProps = _objectWithoutProperties(props, _excluded);
+  var commonConfig = getCommonConfig();
+  var sparkPrefix = commonConfig.sparkPrefix;
+  var Style = useStyle();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTime = _useState2[0],
+    setCurrentTime = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    duration = _useState4[0],
+    setDuration = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPlaying = _useState6[0],
+    setIsPlaying = _useState6[1];
+  var _useControllableValue = useControllableValue(props, {
+      valuePropName: 'muted',
+      trigger: 'onMutedChange',
+      defaultValue: true
+    }),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    muted = _useControllableValue2[0],
+    setMuted = _useControllableValue2[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    enableAudio = _useState8[0],
+    setEnableAudio = _useState8[1];
+  var videoRef = useRef(null);
+  var lockMouseEnterAutoPlayRef = useRef(false);
+
+  // 合并refs
+  var combinedRef = function combinedRef(element) {
+    videoRef.current = element;
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  };
+
+  // 监听isPlaying状态来控制定时器
+  useEffect(function () {
+    var clock;
+    if (isPlaying) {
+      // 启动定时器
+      clock = setInterval(function () {
+        if (videoRef.current) {
+          setCurrentTime(videoRef.current.currentTime);
+        }
+      }, 16); // 每100ms更新一次，提供流畅的时间显示
+    }
+
+    // 清理函数
+    return function () {
+      if (clock) {
+        clearInterval(clock);
+      }
+    };
+  }, [isPlaying]);
+
+  // 检测视频是否有音频通道
+  var checkAudioTracks = function checkAudioTracks() {
+    // @ts-ignore
+    window.videoRef = videoRef.current;
+    if (videoRef.current) {
+      // 方法1: 检查mozHasAudio属性 (Firefox)
+      if ('mozHasAudio' in videoRef.current) {
+        // @ts-ignore
+        setEnableAudio(videoRef.current.mozHasAudio);
+        return true;
+      }
+      // 方法2: 检查webkitAudioDecodedByteCount属性 (WebKit)
+      if ('webkitAudioDecodedByteCount' in videoRef.current) {
+        // @ts-ignore
+        setEnableAudio(videoRef.current.webkitAudioDecodedByteCount > 0);
+        return true;
+      }
+      setEnableAudio(false);
+      return false;
+    }
+    return false;
+  };
+
+  // 视频加载完成处理
+  var handleLoadedMetadata = function handleLoadedMetadata() {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration);
+    }
+  };
+
+  // 播放/暂停切换
+  var handlePlayPause = function handlePlayPause() {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  // 处理播放事件
+  var handlePlay = function handlePlay() {
+    setIsPlaying(true);
+  };
+
+  // 处理暂停事件
+  var handlePause = function handlePause() {
+    setIsPlaying(false);
+  };
+
+  // 全屏切换
+  var handleFullscreen = function handleFullscreen() {
+    if (videoRef.current) {
+      if (videoRef.current.requestFullscreen) {
+        videoRef.current.requestFullscreen();
+      }
+    }
+  };
+
+  // 处理播放结束事件
+  var handleEnded = function handleEnded() {
+    var _videoRef$current;
+    setIsPlaying(false);
+    setCurrentTime((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.duration);
+  };
+
+  // 处理鼠标进入事件
+  var handleMouseEnter = function handleMouseEnter() {
+    if (mouseEnterAutoPlay && !lockMouseEnterAutoPlayRef.current) {
+      if (!isPlaying) {
+        videoRef.current.play();
+        lockMouseEnterAutoPlayRef.current = true;
+      }
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (mouseEnterAutoPlay && lockMouseEnterAutoPlayRef.current) {
+      lockMouseEnterAutoPlayRef.current = false;
+    }
+  };
+
+  // 处理进度条点击事件
+  var handleProgressClick = function handleProgressClick(time) {
+    if (videoRef.current) {
+      videoRef.current.currentTime = time;
+      setCurrentTime(time);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx("div", {
+      className: classNames("".concat(sparkPrefix, "-video-container"), className),
+      style: style,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(sparkPrefix, "-video-content"),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [/*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({
+          ref: combinedRef
+        }, videoProps), {}, {
+          muted: muted,
+          className: "".concat(sparkPrefix, "-video-element"),
+          crossOrigin: "anonymous",
+          onLoadedMetadata: handleLoadedMetadata,
+          onCanPlayThrough: checkAudioTracks,
+          onPlay: handlePlay,
+          onPause: handlePause,
+          onEnded: handleEnded
+        })), controls && /*#__PURE__*/_jsx(VideoPlayerController, {
+          className: "".concat(sparkPrefix, "-video-controller-wrapper"),
+          isPlaying: isPlaying,
+          currentTime: currentTime,
+          duration: duration,
+          enableAudio: enableAudio,
+          muted: muted,
+          onMute: function onMute() {
+            return setMuted(!muted);
+          },
+          onPlayPause: handlePlayPause,
+          onFullscreen: handleFullscreen,
+          onProgressClick: handleProgressClick
+        }), children]
+      })
+    })]
+  });
+});
+export default Video;

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

@@ -0,0 +1 @@
+export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+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) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, 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) {
+  return p.sparkPrefix;
+}, function (p) {
+  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/i18n/strings/en-US.json

@@ -1,6 +1,8 @@
 {
   "components.commonComponents.AlertDialog.Prompt": "Prompt",
   "components.commonComponents.Pagination.PreviousPage": "Previous Page",
+  "components.commonComponents.Pagination.Items": "Items",
+  "components.commonComponents.Pagination.Page": "Page",
   "components.commonComponents.Pagination.NextPage": "Next page",
   "components.commonComponents.SlateEditor.TheNumberOfWordsCannot": "The number of words cannot exceed {wordLimit}.",
   "components.commonComponents.SlateEditor.EnterHere": "Enter here",
@@ -11,4 +13,4 @@
   "components.SlateEditor.utils.editor.WraptagnameCannotBeNestedIn": "[{wrapTagName}] cannot be nested in [{tagName}]]",
   "components.SlateEditor.utils.withEditor.YouCanEnterAMaximum": "You can enter a maximum of {maxLen} characters.",
   "components.commonComponents.Image.Preview": "Preview"
-}
+}

package/lib/i18n/strings/zh-CN.json

@@ -1,6 +1,8 @@
 {
   "components.commonComponents.AlertDialog.Prompt": "提示",
   "components.commonComponents.Pagination.PreviousPage": "上一页",
+  "components.commonComponents.Pagination.Items": "条",
+  "components.commonComponents.Pagination.Page": "页",
   "components.commonComponents.Pagination.NextPage": "下一页",
   "components.commonComponents.SlateEditor.TheNumberOfWordsCannot": "字数不能超过{wordLimit}字",
   "components.commonComponents.SlateEditor.EnterHere": "在这里输入",
@@ -11,4 +13,4 @@
   "components.SlateEditor.utils.editor.WraptagnameCannotBeNestedIn": "【{wrapTagName}】中不能嵌套【{tagName}】",
   "components.SlateEditor.utils.withEditor.YouCanEnterAMaximum": "最多可输入{maxLen}字",
   "components.commonComponents.Image.Preview": "预览"
-}
+}

package/lib/index.d.ts

@@ -47,6 +47,7 @@ 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 staticRenderer } from './libs/staticRenderer';
 /**
  * hooks
@@ -57,7 +58,7 @@ export { default as useGlobalStyle } from './hooks/useGlobalStyle';
  */
 export { default as delay } from './libs/delay';
 export { safeHtml } from './libs/dom';
-export { generateCssVars, generateCssVarsByMap, insertMetaCssVars, } from './libs/generateCssVars';
+export { generateCssVars, generateCssVarsByMap, insertMetaCssVars, } from "./libs/generateCssVars";
 export { copy, renderTooltip } from './libs/utils';
 export { waitForDom, waitForFunc } from './libs/waitFor';
 export { getRegionName } from './libs/region';

package/lib/index.js

@@ -52,6 +52,7 @@ export { default as Tag } from "./components/commonComponents/Tag";
 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 staticRenderer } from "./libs/staticRenderer";
 
 /**

package/lib/libs/createStyle/index.d.ts

@@ -1 +1,7 @@
-export default function createStyle(func: any): (props?: {}) => import("../../config").CommonConfig;
+import { CSSStyle } from 'antd-style';
+import { GlobalTheme } from 'antd-style/lib/factories/createGlobalStyle';
+export default function createGlobalStyle(...styles: CSSStyle<GlobalTheme & {
+    sparkPrefix: string;
+    antPrefix: string;
+    blPrefix: string;
+}>): () => () => import("react/jsx-runtime").JSX.Element;

package/lib/libs/createStyle/index.js

@@ -1,76 +1,28 @@
-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); }
-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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/**
- * 参考资料
- * https://ntsim.uk/posts/how-to-update-or-remove-global-styles-in-emotion
- */
-import { css } from '@emotion/react';
-import { useLayoutEffect, useMemo } from 'react';
-import { compile, serialize, stringify } from 'stylis';
 import { useCommonConfig } from "../../config";
-var stylesMap = new Map();
-function applyStyle(styleId, styles) {
-  if (!styles.styles) {
-    return;
+import { createGlobalStyle as originCreateGlobalStyle } from 'antd-style';
+import { useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function createGlobalStyle() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
   }
-  // 避免相同样式被渲染多次
-  var old = stylesMap.get(styleId);
-  if (old === styles.styles) {
-    return;
-  }
-  stylesMap.set(styleId, styles.styles);
-  var result = serialize(compile(styles.styles), stringify);
-  var oldDom = document.getElementById('bl-style-' + styleId);
-  if (oldDom) {
-    // 已经存在节点，则仅更新节点样式内容
-    oldDom.innerHTML = result;
-  } else {
-    // 不存在节点，才创建节点
-    var dom = document.createElement('style');
-    dom.setAttribute('id', 'bl-style-' + styleId);
-    dom.dataset.flag = 'bl-style';
-    dom.setAttribute('name', styleId);
-    dom.innerHTML = result;
-    document.head.appendChild(dom);
-  }
-}
-function removeStyle(styleId) {
-  stylesMap.delete(styleId);
-  var dom = document.getElementById('bl-style-' + styleId);
-  if (dom) {
-    dom.remove();
-  }
-}
-var cacheUseStyles = {};
-export default function createStyle(func) {
-  var localProps = {};
-  return function useStyle() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : localProps;
-    var config = useCommonConfig();
-    var styles = useMemo(function () {
-      return func(_objectSpread(_objectSpread(_objectSpread({}, config), props), {}, {
-        css: css
-      }));
-    }, [config, props]);
-    applyStyle(styles.name, styles);
-    useLayoutEffect(function () {
-      var cacheName = styles.name;
-      cacheUseStyles[cacheName] = cacheUseStyles[cacheName] || 0;
-      cacheUseStyles[cacheName] += 1;
-      return function () {
-        cacheUseStyles[cacheName] -= 1;
-        setTimeout(function () {
-          // 渲染样式已不使用，删除掉对应样式
-          if (cacheUseStyles[cacheName] <= 0) {
-            removeStyle(cacheName);
-          }
-        }, 100);
-      };
-    }, [styles.name]);
-    return config;
+  return function () {
+    var _useCommonConfig = useCommonConfig(),
+      sparkPrefix = _useCommonConfig.sparkPrefix,
+      antPrefix = _useCommonConfig.antPrefix,
+      blPrefix = _useCommonConfig.blPrefix;
+    // @ts-ignore
+    var Style = originCreateGlobalStyle.apply(void 0, styles);
+    var ref = useRef(function () {
+      // @ts-ignore
+      return /*#__PURE__*/_jsx(Style
+      // @ts-ignore
+      , {
+        sparkPrefix: sparkPrefix,
+        antPrefix: antPrefix,
+        blPrefix: blPrefix
+      });
+    });
+    return ref.current;
   };
 }

package/lib/libs/generateCssVars/index.js

@@ -31,7 +31,7 @@ export var insertMetaCssVars = function insertMetaCssVars(tokens) {
   tokens.forEach(function (item, index) {
     styleContent += "  ".concat(item.name, ": ").concat(typeof item.value === 'string' ? item.value : "".concat(item.value, "px"), ";").concat(index < tokens.length - 1 ? '\n' : '');
   });
-  styleContent = ":root{\n".concat(styleContent, "\n}");
+  styleContent = ":root{\n  ".concat(styleContent, "\n  }");
   var styleEle = document.createElement('style');
   styleEle.setAttribute('styleType', styleType);
   styleEle.textContent = styleContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/design",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Basic components for the best experience of LLM",
   "license": "MIT",
   "sideEffects": [

package/lib/libs/newCreateStyle/index.d.ts

@@ -1,7 +0,0 @@
-import { CSSStyle } from 'antd-style';
-import { GlobalTheme } from 'antd-style/lib/factories/createGlobalStyle';
-export default function createGlobalStyle(...styles: CSSStyle<GlobalTheme & {
-    sparkPrefix: string;
-    antPrefix: string;
-    blPrefix: string;
-}>): () => () => import("react/jsx-runtime").JSX.Element;