@agentscope-ai/design 1.0.8 → 1.0.10

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

@@ -11,27 +11,33 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { getCommonConfig } from "../../../config";
 import { Upload as AntdUpload } from 'antd';
 import classNames from 'classnames';
-import useIndexStyle from "./index.style";
+import { useStyle } from "./index.style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Upload = function Upload(props) {
   var className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
   var commonConfig = getCommonConfig();
   var sparkPrefix = commonConfig.sparkPrefix;
-  useIndexStyle();
-  return /*#__PURE__*/_jsx(AntdUpload, _objectSpread({
-    className: classNames("".concat(sparkPrefix, "-upload"), className)
-  }, restProps));
+  var Style = useStyle();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(AntdUpload, _objectSpread({
+      className: classNames("".concat(sparkPrefix, "-upload"), className)
+    }, restProps))]
+  });
 };
 var Dragger = function Dragger(props) {
   var className = props.className,
     restProps = _objectWithoutProperties(props, _excluded2);
   var commonConfig = getCommonConfig();
   var sparkPrefix = commonConfig.sparkPrefix;
-  useIndexStyle();
-  return /*#__PURE__*/_jsx(AntdUpload.Dragger, _objectSpread({
-    className: classNames("".concat(sparkPrefix, "-upload"), className)
-  }, restProps));
+  var Style = useStyle();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(AntdUpload.Dragger, _objectSpread({
+      className: classNames("".concat(sparkPrefix, "-upload"), className)
+    }, restProps))]
+  });
 };
 Upload.Dragger = Dragger;
 Upload.LIST_IGNORE = AntdUpload.LIST_IGNORE;

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

@@ -1,125 +1 @@
-export declare function getIndexStyleData(params: any): {
-    [x: string]: {
-        [x: string]: {
-            border: string;
-            backgroundColor: string;
-        };
-    } | {
-        [x: string]: {
-            [x: string]: {
-                marginTop: number;
-                width: string;
-                display?: undefined;
-                alignItems?: undefined;
-                height?: undefined;
-                padding?: undefined;
-                borderColor?: undefined;
-                borderStyle?: undefined;
-            } | {
-                [x: string]: string | {
-                    display: string;
-                    justifyContent: string;
-                    alignItems: string;
-                    width: string;
-                    height: string;
-                    color?: undefined;
-                    lineHeight?: undefined;
-                    fontWeight?: undefined;
-                    overflow?: undefined;
-                    textOverflow?: undefined;
-                    whiteSpace?: undefined;
-                    bottom?: undefined;
-                    paddingLeft?: undefined;
-                    borderColor?: undefined;
-                } | {
-                    width: string;
-                    color: string;
-                    lineHeight: string;
-                    fontWeight: number;
-                    overflow: string;
-                    textOverflow: string;
-                    whiteSpace: string;
-                    display?: undefined;
-                    justifyContent?: undefined;
-                    alignItems?: undefined;
-                    height?: undefined;
-                    bottom?: undefined;
-                    paddingLeft?: undefined;
-                    borderColor?: undefined;
-                } | {
-                    [x: string]: {
-                        width: string;
-                        height: string;
-                        color: string;
-                    };
-                    display?: undefined;
-                    justifyContent?: undefined;
-                    alignItems?: undefined;
-                    width?: undefined;
-                    height?: undefined;
-                    color?: undefined;
-                    lineHeight?: undefined;
-                    fontWeight?: undefined;
-                    overflow?: undefined;
-                    textOverflow?: undefined;
-                    whiteSpace?: undefined;
-                    bottom?: undefined;
-                    paddingLeft?: undefined;
-                    borderColor?: undefined;
-                } | {
-                    [x: string]: string | {
-                        display: string;
-                        alignItems: string;
-                        height: string;
-                    };
-                    bottom: string;
-                    paddingLeft: string;
-                    display?: undefined;
-                    justifyContent?: undefined;
-                    alignItems?: undefined;
-                    width?: undefined;
-                    height?: undefined;
-                    color?: undefined;
-                    lineHeight?: undefined;
-                    fontWeight?: undefined;
-                    overflow?: undefined;
-                    textOverflow?: undefined;
-                    whiteSpace?: undefined;
-                    borderColor?: undefined;
-                } | {
-                    [x: string]: string | {
-                        color: string;
-                    };
-                    borderColor: string;
-                    display?: undefined;
-                    justifyContent?: undefined;
-                    alignItems?: undefined;
-                    width?: undefined;
-                    height?: undefined;
-                    color?: undefined;
-                    lineHeight?: undefined;
-                    fontWeight?: undefined;
-                    overflow?: undefined;
-                    textOverflow?: undefined;
-                    whiteSpace?: undefined;
-                    bottom?: undefined;
-                    paddingLeft?: undefined;
-                };
-                display: string;
-                alignItems: string;
-                height: string;
-                padding: string;
-                marginTop: string;
-                borderColor: string;
-                borderStyle: string;
-                width?: undefined;
-            };
-            "&:first-child": {
-                marginTop: number;
-                width: string;
-            };
-        };
-    };
-};
-declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
-export default useIndexStyle;
+export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,90 +1,80 @@
-var _excluded = ["css"];
-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 _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; }
-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); }
-import createStyle from "../../../libs/createStyle";
-export function getIndexStyleData(params) {
-  var sparkPrefix = params.sparkPrefix,
-    antPrefix = params.antPrefix;
-  return _defineProperty(_defineProperty({}, ".".concat(sparkPrefix, "-upload.").concat(antPrefix, "-upload-wrapper"), _defineProperty(_defineProperty({}, ".".concat(antPrefix, "-upload.").concat(antPrefix, "-upload-select"), {
-    border: "var(--".concat(antPrefix, "-line-width) dashed var(--").concat(antPrefix, "-color-border-secondary)"),
-    backgroundColor: "var(--".concat(antPrefix, "-color-fill-tertiary)")
-  }), ".".concat(antPrefix, "-upload-drag"), _defineProperty(_defineProperty({
-    border: "var(--".concat(antPrefix, "-line-width) dashed var(--").concat(antPrefix, "-color-border-secondary)"),
-    backgroundColor: "var(--".concat(antPrefix, "-color-fill-tertiary)")
-  }, ".".concat(antPrefix, "-upload-btn"), {
-    padding: '32px 48px'
-  }), ".".concat(antPrefix, "-upload-drag-container"), _defineProperty(_defineProperty(_defineProperty({
-    textAlign: 'center'
-  }, ".".concat(antPrefix, "-upload-icon"), {
-    display: 'inline-grid',
-    placeItems: 'center',
-    width: '40px',
-    height: '40px',
-    borderRadius: '8px',
-    background: "var(--".concat(antPrefix, "-color-bg-base)")
-  }), ".".concat(antPrefix, "-upload-text"), {
-    marginTop: '8px',
-    marginBottom: 0,
-    color: "var(--".concat(antPrefix, "-color-text)"),
-    fontWeight: 500,
-    lineHeight: '24px'
-  }), ".".concat(antPrefix, "-upload-hint"), {
-    marginTop: '4px',
-    marginBottom: 0,
-    color: "var(--".concat(antPrefix, "-color-text-secondary)"),
-    lineHeight: '20px'
-  })))), ".".concat(sparkPrefix, "-upload.").concat(sparkPrefix, "-custom-uploaded"), _defineProperty({}, ".".concat(antPrefix, "-upload-list"), _defineProperty(_defineProperty({}, "&:first-child", {
-    marginTop: 0,
-    width: '242px'
-  }), ".".concat(antPrefix, "-upload-list-item"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    display: 'flex',
-    alignItems: 'center',
-    height: '60px',
-    padding: '9px 12px',
-    marginTop: '20px',
-    borderColor: "var(--".concat(antPrefix, "-color-border-secondary)"),
-    borderStyle: 'solid'
-  }, ".".concat(antPrefix, "-upload-list-item-thumbnail"), {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '40px',
-    height: '40px'
-  }), ".".concat(antPrefix, "-upload-list-item-name"), {
-    width: '150px',
-    color: "var(--".concat(antPrefix, "-color-text)"),
-    lineHeight: '24px',
-    fontWeight: 500,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }), ".".concat(antPrefix, "-upload-list-item-actions"), _defineProperty({}, ".".concat(antPrefix, "-btn"), {
-    width: '32px',
-    height: '32px',
-    color: "var(--".concat(antPrefix, "-color-text-tertiary)")
-  })), ".".concat(antPrefix, "-upload-list-item-progress"), _defineProperty({
-    bottom: '6px',
-    paddingLeft: '48px'
-  }, ".".concat(antPrefix, "-progress"), {
-    display: 'flex',
-    alignItems: 'center',
-    height: '20px'
-  })), "&.".concat(antPrefix, "-upload-list-item-error"), _defineProperty(_defineProperty({
-    borderColor: "var(--".concat(antPrefix, "-color-border-secondary)")
-  }, ".".concat(antPrefix, "-upload-list-item-name"), {
-    color: "var(--".concat(antPrefix, "-color-error)")
-  }), ".".concat(antPrefix, "-btn-icon .anticon"), {
-    color: "var(--".concat(antPrefix, "-color-text-tertiary)")
-  })))));
-}
-var useIndexStyle = createStyle(function (_ref2) {
-  var css = _ref2.css,
-    params = _objectWithoutProperties(_ref2, _excluded);
-  var result = css(getIndexStyleData(params));
-  return result;
-});
-export default useIndexStyle;
+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.", "-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) {
+  return p.antPrefix;
+}, 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;
+}, 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;
+}, 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;
+}, function (p) {
+  return p.antPrefix;
+}, 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;
+}, 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;
+}, 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;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+});

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;