@agentscope-ai/design 1.0.16-rc.0 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/lib/antd/styles/button.style.js +13 -1
  2. package/lib/antd/styles/index.style.js +3 -1
  3. package/lib/antd/styles/tree.style.d.ts +6 -0
  4. package/lib/antd/styles/tree.style.js +18 -0
  5. package/lib/antd/themes/bailianDarkTheme.json +3 -1
  6. package/lib/antd/themes/bailianTheme.json +4 -2
  7. package/lib/antd/themes/carbonDarkTheme.json +3 -1
  8. package/lib/antd/themes/carbonTheme.json +3 -1
  9. package/lib/components/commonComponents/Audio/Control.d.ts +53 -0
  10. package/lib/components/commonComponents/{Video → Audio}/Control.js +18 -15
  11. package/lib/components/commonComponents/Audio/Control.style.d.ts +1 -0
  12. package/lib/components/commonComponents/Audio/Control.style.js +14 -0
  13. package/lib/components/commonComponents/Audio/index.d.ts +14 -0
  14. package/lib/components/commonComponents/Audio/index.js +165 -0
  15. package/lib/components/commonComponents/Audio/index.style.d.ts +1 -0
  16. package/lib/components/commonComponents/Audio/index.style.js +10 -0
  17. package/lib/components/commonComponents/Button/demo/demo1.js +7 -0
  18. package/lib/components/commonComponents/Button/index.js +2 -1
  19. package/lib/components/commonComponents/CollapsePanel/demo/demo1.js +1 -1
  20. package/lib/components/commonComponents/CollapsePanel/index.js +4 -4
  21. package/lib/components/commonComponents/EllipsisTip/index.d.ts +8 -1
  22. package/lib/components/commonComponents/EllipsisTip/index.js +33 -3
  23. package/lib/components/commonComponents/Empty/index.d.ts +6 -0
  24. package/lib/components/commonComponents/Empty/index.js +22 -7
  25. package/lib/components/commonComponents/Empty/index.style.js +1 -1
  26. package/lib/components/commonComponents/Pagination/index.js +33 -42
  27. package/lib/components/commonComponents/Pagination/index.style.js +1 -1
  28. package/lib/components/commonComponents/Steps/index.js +1 -1
  29. package/lib/components/commonComponents/Steps/index.style.js +5 -1
  30. package/lib/components/commonComponents/Table/index.style.js +27 -1
  31. package/lib/components/commonComponents/Tabs/index.js +9 -8
  32. package/lib/components/commonComponents/Tooltip/demo/demo3.d.ts +3 -0
  33. package/lib/components/commonComponents/Tooltip/demo/demo3.js +25 -0
  34. package/lib/components/commonComponents/Tooltip/index.d.ts +7 -1
  35. package/lib/components/commonComponents/Tooltip/index.js +12 -1
  36. package/lib/components/commonComponents/Tooltip/index.style.js +1 -1
  37. package/lib/components/commonComponents/Video/index.d.ts +2 -6
  38. package/lib/components/commonComponents/Video/index.js +8 -8
  39. package/lib/components/commonComponents/Video/index.style.js +2 -6
  40. package/lib/components/mobileComponents/MobileDrawer/index.style.js +7 -1
  41. package/lib/index.d.ts +2 -1
  42. package/lib/index.js +1 -0
  43. package/lib/libs/env/index.d.ts +1 -1
  44. package/lib/typings.d.ts +12 -0
  45. package/llms/all.llms.txt +704 -694
  46. package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +1 -0
  47. package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +2 -1
  48. package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +13 -5
  49. package/llms/index.llms.txt +47 -47
  50. package/package.json +1 -1
  51. package/scripts/mcp-docs-server.js +3 -3
  52. package/lib/components/commonComponents/Video/Control.d.ts +0 -19
@@ -1,7 +1,19 @@
1
1
  var _templateObject;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import createGlobalStyle from "../../libs/createStyle";
4
- export var useButtonStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u53D6\u6D88\u6240\u6709button\u7684boxShadow */\nbutton[type=\"button\"].", "-btn {\n font-weight: 500;\n padding-inline: 11px;\n \n span[data-spark-icon] {\n /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n font-size: 20px;\n }\n \n &.", "-btn-sm {\n padding-inline: 7px;\n \n span[data-spark-icon] {\n /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n font-size: 16px;\n }\n }\n \n &.", "-btn-lg {\n span[data-spark-icon] {\n /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n font-size: 24px;\n }\n }\n}\n\n.", "-btn-default {\n border-color: var(--", "-color-border-secondary);\n}\n\n.", "-btn-textCompact:hover {\n color: var(--", "-color-text-tertiary) !important;\n}\n\n.", "-btn.", "-btn-default.", "-btn-dangerous:not(:disabled):not(.", "-btn-disabled) {\n border-color: transparent;\n background-color: var(--", "-color-error-bg);\n color: var(--", "-color-error);\n \n &:hover {\n background-color: var(--", "-color-error-bg-hover);\n border-color: transparent;\n color: var(--", "-color-error-hover);\n }\n}\n\n.", "-btn-color-dangerous.", "-btn-variant-solid:disabled,\n.", "-btn-color-dangerous.", "-btn-variant-solid.", "-btn-disabled {\n border-color: transparent;\n background-color: var(--", "-color-fill-disable);\n color: var(--", "-color-text-white);\n}\n\n.", "-btn-primary:disabled {\n background: var(--", "-color-fill-disable);\n color: var(--", "-color-text-white);\n border-color: transparent;\n}\n\n.", "-btn-default:disabled {\n background: var(--", "-color-bg-base);\n color: var(--", "-color-text-tertiary);\n border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
4
+ export var useButtonStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u53D6\u6D88\u6240\u6709button\u7684boxShadow */\nbutton[type=\"button\"].", "-btn {\n font-weight: 500;\n padding-inline: 11px;\n \n span[data-spark-icon] {\n /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n font-size: 20px;\n }\n \n &.", "-btn-sm {\n padding-inline: 7px;\n \n span[data-spark-icon] {\n /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n font-size: 16px;\n }\n }\n \n &.", "-btn-lg {\n span[data-spark-icon] {\n /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n font-size: 24px;\n }\n }\n}\n\n.", "-btn-default {\n border-color: var(--", "-color-border-secondary);\n}\n\n.", "-btn-textCompact:hover {\n color: var(--", "-color-text-tertiary) !important;\n}\n\n.", "-btn.", "-btn-default.", "-btn-dangerous:not(:disabled):not(.", "-btn-disabled) {\n border-color: transparent;\n background-color: var(--", "-color-error-bg);\n color: var(--", "-color-error);\n \n &:hover {\n background-color: var(--", "-color-error-bg-hover);\n border-color: transparent;\n color: var(--", "-color-error-hover);\n }\n}\n\n.", "-btn-color-dangerous.", "-btn-variant-solid:disabled,\n.", "-btn-color-dangerous.", "-btn-variant-solid.", "-btn-disabled {\n border-color: transparent;\n background-color: var(--", "-color-fill-disable);\n color: var(--", "-color-text-white);\n}\n\n.", "-btn-primary {\n color: var(--", "-color-text-on-primary);\n}\n.", "-btn-primary.", "-btn-variant-solid:not(:disabled):not(.", "-btn-disabled):hover {\n color: var(--", "-color-text-on-primary);\n}\n\n.", "-btn-primary:disabled {\n background: var(--", "-color-fill-disable);\n color: var(--", "-color-text-white);\n border-color: transparent;\n}\n\n.", "-btn-default:disabled {\n background: var(--", "-color-bg-base);\n color: var(--", "-color-text-tertiary);\n border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
5
+ return p.antPrefix;
6
+ }, function (p) {
7
+ return p.antPrefix;
8
+ }, function (p) {
9
+ return p.antPrefix;
10
+ }, function (p) {
11
+ return p.antPrefix;
12
+ }, function (p) {
13
+ return p.antPrefix;
14
+ }, function (p) {
15
+ return p.antPrefix;
16
+ }, function (p) {
5
17
  return p.antPrefix;
6
18
  }, function (p) {
7
19
  return p.antPrefix;
@@ -19,6 +19,7 @@ import { useSelectStyle } from "./select.style";
19
19
  import { useSliderStyle } from "./slider.style";
20
20
  import { useTableStyle } from "./table.style";
21
21
  import { useTooltipStyle } from "./tooltip.style";
22
+ import { useTreeStyle } from "./tree.style";
22
23
 
23
24
  // 基础动画样式
24
25
  var useBaseStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /* \u5B9A\u4E49\u52A8\u753B\u5173\u952E\u5E27 */\n @keyframes fadeInUp {\n 0% {\n opacity: 0;\n transform: translateY(32px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* animate-in \u52A8\u753B\u7C7B */\n .animate-in {\n opacity: 0;\n transform: translateY(32px);\n animation: fadeInUp 0.4s ease forwards;\n }\n"])));
@@ -42,10 +43,11 @@ export var useIndexStyle = function useIndexStyle() {
42
43
  var SliderStyle = useSliderStyle();
43
44
  var TableStyle = useTableStyle();
44
45
  var TooltipStyle = useTooltipStyle();
46
+ var TreeStyle = useTreeStyle();
45
47
 
46
48
  // 返回组合组件
47
49
  return function IndexStyleComponent() {
48
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseStyle), /*#__PURE__*/React.createElement(AlertStyle), /*#__PURE__*/React.createElement(BreadcrumbStyle), /*#__PURE__*/React.createElement(ButtonStyle), /*#__PURE__*/React.createElement(DropdownStyle), /*#__PURE__*/React.createElement(FloatButtonStyle), /*#__PURE__*/React.createElement(InputNumberStyle), /*#__PURE__*/React.createElement(MessageStyle), /*#__PURE__*/React.createElement(NotificationStyle), /*#__PURE__*/React.createElement(PopoverStyle), /*#__PURE__*/React.createElement(RadioStyle), /*#__PURE__*/React.createElement(SegmentStyle), /*#__PURE__*/React.createElement(SelectStyle), /*#__PURE__*/React.createElement(SliderStyle), /*#__PURE__*/React.createElement(TableStyle), /*#__PURE__*/React.createElement(TooltipStyle));
50
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseStyle), /*#__PURE__*/React.createElement(AlertStyle), /*#__PURE__*/React.createElement(BreadcrumbStyle), /*#__PURE__*/React.createElement(ButtonStyle), /*#__PURE__*/React.createElement(DropdownStyle), /*#__PURE__*/React.createElement(FloatButtonStyle), /*#__PURE__*/React.createElement(InputNumberStyle), /*#__PURE__*/React.createElement(MessageStyle), /*#__PURE__*/React.createElement(NotificationStyle), /*#__PURE__*/React.createElement(PopoverStyle), /*#__PURE__*/React.createElement(RadioStyle), /*#__PURE__*/React.createElement(SegmentStyle), /*#__PURE__*/React.createElement(SelectStyle), /*#__PURE__*/React.createElement(SliderStyle), /*#__PURE__*/React.createElement(TableStyle), /*#__PURE__*/React.createElement(TooltipStyle), /*#__PURE__*/React.createElement(TreeStyle));
49
51
  };
50
52
  };
51
53
 
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Tree 组件全局样式
3
+ * - 节点间距 gap: 8px
4
+ */
5
+ export declare const useTreeStyle: () => () => import("react/jsx-runtime").JSX.Element;
6
+ export default useTreeStyle;
@@ -0,0 +1,18 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import createGlobalStyle from "../../libs/createStyle";
4
+
5
+ /**
6
+ * Tree 组件全局样式
7
+ * - 节点间距 gap: 8px
8
+ */
9
+ export var useTreeStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tree .", "-tree-treenode {\n margin-bottom: 8px;\n}\n\n.", "-tree .", "-tree-treenode:last-child {\n margin-bottom: 0;\n}\n"])), function (p) {
10
+ return p.antPrefix;
11
+ }, function (p) {
12
+ return p.antPrefix;
13
+ }, function (p) {
14
+ return p.antPrefix;
15
+ }, function (p) {
16
+ return p.antPrefix;
17
+ });
18
+ export default useTreeStyle;
@@ -61,7 +61,9 @@
61
61
  "colorLink": "#5551CC",
62
62
  "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
63
63
  "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.04),0px 8px 40px 0px rgba(255, 255, 255, 0.06),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
64
- "colorTextWhite": "#fff",
64
+
65
+ "colorTextWhite": "#fff",
66
+ "colorTextOnPrimary": "#fff",
65
67
  "colorFillDisable": "#8D8C98",
66
68
  "colorPurple": "#5551CC",
67
69
  "colorPurpleHover": "#8383F0",
@@ -6,7 +6,7 @@
6
6
  "borderRadiusXL": 12,
7
7
  "borderRadiusFull": 999,
8
8
  "wireframe": false,
9
- "colorPrimaryBg": "#F2F0FF",
9
+ "colorPrimaryBg": "rgba(97, 92, 237, 0.08)",
10
10
  "colorPrimaryBgHover": "#F2F0FF",
11
11
  "colorPrimaryBorder": "#E2DEFF",
12
12
  "colorPrimaryBorderHover": "#BCB5FF",
@@ -61,7 +61,9 @@
61
61
  "colorLink": "#615CED",
62
62
  "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
63
63
  "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
64
- "colorTextWhite": "#fff",
64
+
65
+ "colorTextWhite": "#ffffff",
66
+ "colorTextOnPrimary": "#ffffff",
65
67
  "colorFillDisable": "#DBDAE7",
66
68
  "colorPurple": "#615CED",
67
69
  "colorPurpleHover": "#8080FF",
@@ -61,7 +61,9 @@
61
61
  "colorLink": "#4D7DFF",
62
62
  "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
63
63
  "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
64
- "colorTextWhite": "#FFFFFF",
64
+
65
+ "colorTextWhite": "#ffffff",
66
+ "colorTextOnPrimary": "#000000",
65
67
  "colorFillDisable": "#898989",
66
68
  "colorPurple": "#615CED",
67
69
  "colorPurpleHover": "#8383F0",
@@ -61,7 +61,9 @@
61
61
  "colorLink": "rgba(0, 77, 255, 1)",
62
62
  "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
63
63
  "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
64
- "colorTextWhite": "rgba(255, 255, 255, 1)",
64
+
65
+ "colorTextWhite": "#ffffff",
66
+ "colorTextOnPrimary": "#ffffff",
65
67
  "colorFillDisable": "rgba(232, 232, 235, 1)",
66
68
  "colorPurple": "rgba(97, 92, 237, 1)",
67
69
  "colorPurpleHover": "#8080FF",
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+ interface MediaPlayerControllerProps {
3
+ /**
4
+ * @description 是否正在播放
5
+ */
6
+ isPlaying: boolean;
7
+ /**
8
+ * @description 类名
9
+ */
10
+ className?: string;
11
+ /**
12
+ * @description 当前时间,单位为秒
13
+ */
14
+ currentTime?: number;
15
+ /**
16
+ * @description 总时间,单位为秒
17
+ */
18
+ duration?: number;
19
+ /**
20
+ * @description 是否启用音量控制
21
+ */
22
+ enableVolume?: boolean;
23
+ /**
24
+ * @description 是否启用全屏控制
25
+ */
26
+ enableFullscreen?: boolean;
27
+ /**
28
+ * @description 是否静音
29
+ */
30
+ muted?: boolean;
31
+ /**
32
+ * @description 静音回调
33
+ */
34
+ onMute?: () => void;
35
+ /**
36
+ * @description 播放/暂停回调
37
+ */
38
+ onPlayPause?: () => void;
39
+ /**
40
+ * @description 全屏回调
41
+ */
42
+ onFullscreen?: () => void;
43
+ /**
44
+ * @description 点击进度条回调,参数为目标时间
45
+ */
46
+ onProgressClick?: (time: number) => void;
47
+ }
48
+ /**
49
+ * 视频播放器控制器组件
50
+ * 包含播放/暂停、音量控制、进度条、时间显示和全屏按钮
51
+ */
52
+ declare const MediaPlayerController: React.FC<MediaPlayerControllerProps>;
53
+ export default MediaPlayerController;
@@ -2,6 +2,7 @@ import { getCommonConfig } from "../../../config";
2
2
  import { IconButton, Progress } from "../../..";
3
3
  import { SparkEnlargeLine, SparkMuteLine, SparkPauseFill, SparkPlayFill, SparkVolumeLine } from '@agentscope-ai/icons';
4
4
  import React, { useMemo } from 'react';
5
+ import { useStyle } from "./Control.style";
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -20,17 +21,19 @@ var formatTime = function formatTime(seconds) {
20
21
  * 视频播放器控制器组件
21
22
  * 包含播放/暂停、音量控制、进度条、时间显示和全屏按钮
22
23
  */
23
- var VideoPlayerController = function VideoPlayerController(props) {
24
+ var MediaPlayerController = function MediaPlayerController(props) {
24
25
  var className = props.className,
25
26
  isPlaying = props.isPlaying,
26
27
  onPlayPause = props.onPlayPause,
27
28
  onFullscreen = props.onFullscreen,
28
29
  onProgressClick = props.onProgressClick,
29
- _props$enableAudio = props.enableAudio,
30
- enableAudio = _props$enableAudio === void 0 ? false : _props$enableAudio,
30
+ _props$enableVolume = props.enableVolume,
31
+ enableVolume = _props$enableVolume === void 0 ? false : _props$enableVolume,
32
+ enableFullscreen = props.enableFullscreen,
31
33
  _props$muted = props.muted,
32
34
  muted = _props$muted === void 0 ? true : _props$muted,
33
35
  onMute = props.onMute;
36
+ var Style = useStyle();
34
37
  var commonConfig = getCommonConfig();
35
38
  var sparkPrefix = commonConfig.sparkPrefix;
36
39
  var currentTime = useMemo(function () {
@@ -59,9 +62,9 @@ var VideoPlayerController = function VideoPlayerController(props) {
59
62
  var clampedTime = Math.max(0, Math.min(targetTime, props.duration));
60
63
  onProgressClick(clampedTime);
61
64
  };
62
- return /*#__PURE__*/_jsx(_Fragment, {
63
- children: /*#__PURE__*/_jsxs("div", {
64
- className: "".concat(sparkPrefix, "-video-player-controller ").concat(className || ''),
65
+ return /*#__PURE__*/_jsxs(_Fragment, {
66
+ children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
67
+ className: "".concat(sparkPrefix, "-media-player-controller ").concat(className || ''),
65
68
  children: [/*#__PURE__*/_jsx(IconButton, {
66
69
  bordered: false,
67
70
  size: "small",
@@ -73,24 +76,24 @@ var VideoPlayerController = function VideoPlayerController(props) {
73
76
  bordered: false,
74
77
  size: "small",
75
78
  shape: "default",
76
- disabled: !enableAudio,
77
- icon: enableAudio && muted ? /*#__PURE__*/_jsx(SparkMuteLine, {}) : /*#__PURE__*/_jsx(SparkVolumeLine, {}),
79
+ disabled: !enableVolume,
80
+ icon: enableVolume && muted ? /*#__PURE__*/_jsx(SparkMuteLine, {}) : /*#__PURE__*/_jsx(SparkVolumeLine, {}),
78
81
  onClick: onMute
79
82
  }), /*#__PURE__*/_jsx("span", {
80
- className: "".concat(sparkPrefix, "-video-time-text"),
83
+ className: "".concat(sparkPrefix, "-media-time-text"),
81
84
  children: currentTime
82
85
  }), /*#__PURE__*/_jsx("div", {
83
- className: "".concat(sparkPrefix, "-video-progress-container"),
86
+ className: "".concat(sparkPrefix, "-media-progress-container"),
84
87
  onClick: handleProgressClick,
85
88
  children: /*#__PURE__*/_jsx(Progress, {
86
- className: "".concat(sparkPrefix, "-video-progress-bar"),
89
+ className: "".concat(sparkPrefix, "-media-progress-bar"),
87
90
  percent: progress,
88
91
  showInfo: false
89
92
  })
90
93
  }), /*#__PURE__*/_jsx("span", {
91
- className: "".concat(sparkPrefix, "-video-time-text"),
94
+ className: "".concat(sparkPrefix, "-media-time-text"),
92
95
  children: duration
93
- }), /*#__PURE__*/_jsx(IconButton, {
96
+ }), enableFullscreen && /*#__PURE__*/_jsx(IconButton, {
94
97
  bordered: false,
95
98
  size: "small",
96
99
  shape: "default",
@@ -98,7 +101,7 @@ var VideoPlayerController = function VideoPlayerController(props) {
98
101
  icon: /*#__PURE__*/_jsx(SparkEnlargeLine, {}),
99
102
  onClick: onFullscreen
100
103
  })]
101
- })
104
+ })]
102
105
  });
103
106
  };
104
- export default VideoPlayerController;
107
+ export default MediaPlayerController;
@@ -0,0 +1 @@
1
+ export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import createGlobalStyle from "../../../libs/createStyle";
4
+ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-media-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.", "-media-time-text {\n flex-grow: 0;\n font-size: 12px;\n line-height: 20px;\n}\n\n// \u8FDB\u5EA6\u6761\u5BB9\u5668\u6837\u5F0F\n.", "-media-progress-container {\n flex-grow: 1;\n cursor: pointer;\n}\n\n// \u8FDB\u5EA6\u6761\u6837\u5F0F\n.", "-media-progress-bar {\n width: 100%;\n\n .", "-progress-bg {\n transition-duration: 0s;\n }\n}\n"])), function (p) {
5
+ return p.sparkPrefix;
6
+ }, function (p) {
7
+ return p.sparkPrefix;
8
+ }, function (p) {
9
+ return p.sparkPrefix;
10
+ }, function (p) {
11
+ return p.sparkPrefix;
12
+ }, function (p) {
13
+ return p.antPrefix;
14
+ });
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ type NativeAudioProps = React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>;
3
+ export interface AudioProps extends NativeAudioProps {
4
+ /**
5
+ * @description audio内部设置了按钮样式,如果有一些操作按钮想继承这个样式可以在这里传入
6
+ */
7
+ children?: React.ReactNode;
8
+ }
9
+ /**
10
+ * 音频播放器组件
11
+ * 包含播放/暂停、音量控制、进度条和时间显示
12
+ */
13
+ declare const Audio: React.ForwardRefExoticComponent<Omit<AudioProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
14
+ export default Audio;
@@ -0,0 +1,165 @@
1
+ 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); }
2
+ var _excluded = ["controls", "children", "className", "style"];
3
+ 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; }
4
+ 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; }
5
+ 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; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
7
+ 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); }
8
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
+ 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."); }
10
+ 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); }
11
+ 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; }
12
+ 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; } }
13
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
+ 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; }
15
+ 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; }
16
+ import React, { forwardRef, useEffect, useState, useRef } from 'react';
17
+ import classNames from 'classnames';
18
+ import MediaPlayerController from "./Control";
19
+ import { useControllableValue } from 'ahooks';
20
+ import { getCommonConfig } from "../../../config";
21
+ import { useStyle } from "./index.style";
22
+ import { jsx as _jsx } from "react/jsx-runtime";
23
+ import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { Fragment as _Fragment } from "react/jsx-runtime";
25
+ /**
26
+ * 音频播放器组件
27
+ * 包含播放/暂停、音量控制、进度条和时间显示
28
+ */
29
+ var Audio = /*#__PURE__*/forwardRef(function (props, ref) {
30
+ var controls = props.controls,
31
+ children = props.children,
32
+ className = props.className,
33
+ style = props.style,
34
+ audioProps = _objectWithoutProperties(props, _excluded);
35
+ var commonConfig = getCommonConfig();
36
+ var sparkPrefix = commonConfig.sparkPrefix;
37
+ var Style = useStyle();
38
+ var _useState = useState(0),
39
+ _useState2 = _slicedToArray(_useState, 2),
40
+ currentTime = _useState2[0],
41
+ setCurrentTime = _useState2[1];
42
+ var _useState3 = useState(0),
43
+ _useState4 = _slicedToArray(_useState3, 2),
44
+ duration = _useState4[0],
45
+ setDuration = _useState4[1];
46
+ var _useState5 = useState(false),
47
+ _useState6 = _slicedToArray(_useState5, 2),
48
+ isPlaying = _useState6[0],
49
+ setIsPlaying = _useState6[1];
50
+ var _useControllableValue = useControllableValue(props, {
51
+ valuePropName: 'muted',
52
+ trigger: 'onMutedChange',
53
+ defaultValue: false
54
+ }),
55
+ _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
56
+ muted = _useControllableValue2[0],
57
+ setMuted = _useControllableValue2[1];
58
+ var audioRef = useRef(null);
59
+
60
+ // 合并refs
61
+ var combinedRef = function combinedRef(element) {
62
+ audioRef.current = element;
63
+ if (ref) {
64
+ if (typeof ref === 'function') {
65
+ ref(element);
66
+ } else {
67
+ ref.current = element;
68
+ }
69
+ }
70
+ };
71
+
72
+ // 监听isPlaying状态来控制定时器
73
+ useEffect(function () {
74
+ var clock;
75
+ if (isPlaying) {
76
+ // 启动定时器
77
+ clock = setInterval(function () {
78
+ if (audioRef.current) {
79
+ setCurrentTime(audioRef.current.currentTime);
80
+ }
81
+ }, 16); // 每16ms更新一次,提供流畅的时间显示
82
+ }
83
+
84
+ // 清理函数
85
+ return function () {
86
+ if (clock) {
87
+ clearInterval(clock);
88
+ }
89
+ };
90
+ }, [isPlaying]);
91
+
92
+ // 音频加载完成处理
93
+ var handleLoadedMetadata = function handleLoadedMetadata() {
94
+ if (audioRef.current) {
95
+ setDuration(audioRef.current.duration);
96
+ }
97
+ };
98
+
99
+ // 播放/暂停切换
100
+ var handlePlayPause = function handlePlayPause() {
101
+ if (audioRef.current) {
102
+ if (isPlaying) {
103
+ audioRef.current.pause();
104
+ } else {
105
+ audioRef.current.play();
106
+ }
107
+ setIsPlaying(!isPlaying);
108
+ }
109
+ };
110
+
111
+ // 处理播放事件
112
+ var handlePlay = function handlePlay() {
113
+ setIsPlaying(true);
114
+ };
115
+
116
+ // 处理暂停事件
117
+ var handlePause = function handlePause() {
118
+ setIsPlaying(false);
119
+ };
120
+
121
+ // 处理播放结束事件
122
+ var handleEnded = function handleEnded() {
123
+ var _audioRef$current;
124
+ setIsPlaying(false);
125
+ setCurrentTime(((_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.duration) || 0);
126
+ };
127
+
128
+ // 处理进度条点击事件
129
+ var handleProgressClick = function handleProgressClick(time) {
130
+ if (audioRef.current) {
131
+ audioRef.current.currentTime = time;
132
+ setCurrentTime(time);
133
+ }
134
+ };
135
+ return /*#__PURE__*/_jsxs(_Fragment, {
136
+ children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
137
+ className: classNames("".concat(sparkPrefix, "-audio-container"), className),
138
+ style: style,
139
+ children: [/*#__PURE__*/_jsx("audio", _objectSpread(_objectSpread({
140
+ ref: combinedRef
141
+ }, audioProps), {}, {
142
+ muted: muted,
143
+ className: "".concat(sparkPrefix, "-audio-element"),
144
+ onLoadedMetadata: handleLoadedMetadata,
145
+ onPlay: handlePlay,
146
+ onPause: handlePause,
147
+ onEnded: handleEnded
148
+ })), controls && /*#__PURE__*/_jsx(MediaPlayerController, {
149
+ className: "".concat(sparkPrefix, "-audio-controller-wrapper"),
150
+ isPlaying: isPlaying,
151
+ currentTime: currentTime,
152
+ duration: duration,
153
+ enableVolume: true,
154
+ enableFullscreen: false,
155
+ muted: muted,
156
+ onMute: function onMute() {
157
+ return setMuted(!muted);
158
+ },
159
+ onPlayPause: handlePlayPause,
160
+ onProgressClick: handleProgressClick
161
+ }), children]
162
+ })]
163
+ });
164
+ });
165
+ export default Audio;
@@ -0,0 +1 @@
1
+ export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,10 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import createGlobalStyle from "../../../libs/createStyle";
4
+ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n// Audio \u4E3B\u5BB9\u5668\u6837\u5F0F\n.", "-audio-container {\n position: relative;\n box-sizing: border-box;\n}\n\n.", "-audio-element {\n display: none;\n}\n\n.", "-audio-controller-wrapper {\n width: 100%;\n}\n"])), function (p) {
5
+ return p.sparkPrefix;
6
+ }, function (p) {
7
+ return p.sparkPrefix;
8
+ }, function (p) {
9
+ return p.sparkPrefix;
10
+ });
@@ -17,6 +17,9 @@ export default (function () {
17
17
  }), /*#__PURE__*/_jsx(Button, {
18
18
  type: "primary",
19
19
  children: "Primary"
20
+ }), /*#__PURE__*/_jsx(Button, {
21
+ type: "primaryLess",
22
+ children: "PrimaryLess"
20
23
  })]
21
24
  }), /*#__PURE__*/_jsxs(Flex, {
22
25
  gap: 16,
@@ -32,6 +35,10 @@ export default (function () {
32
35
  type: "primary",
33
36
  disabled: true,
34
37
  children: "Primary"
38
+ }), /*#__PURE__*/_jsx(Button, {
39
+ type: "primaryLess",
40
+ disabled: true,
41
+ children: "PrimaryLess"
35
42
  })]
36
43
  })]
37
44
  });
@@ -82,7 +82,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
82
82
  colorPrimary: token.token.colorSlate,
83
83
  // @ts-ignore
84
84
  colorPrimaryHover: token.token.colorSlateHover,
85
- colorPrimaryActive: token.token.colorTextBase
85
+ // @ts-ignore
86
+ colorPrimaryActive: token.token.colorSlate
86
87
  }
87
88
  },
88
89
  children: /*#__PURE__*/_jsx(Tooltip, {
@@ -23,7 +23,7 @@ var App = function App() {
23
23
  }),
24
24
  children: /*#__PURE__*/_jsxs("div", {
25
25
  style: {
26
- padding: '0 12px'
26
+ padding: '12px'
27
27
  },
28
28
  children: [/*#__PURE__*/_jsx("p", {
29
29
  children: /*#__PURE__*/_jsx("strong", {
@@ -42,7 +42,8 @@ var CollapsePanel = function CollapsePanel(props) {
42
42
  setContentHeight = _useState6[1];
43
43
  var contentRef = useRef(null);
44
44
  var commonConfig = getCommonConfig();
45
- var sparkPrefix = commonConfig.sparkPrefix;
45
+ var sparkPrefix = commonConfig.sparkPrefix,
46
+ antPrefix = commonConfig.antPrefix;
46
47
  var Style = useStyle();
47
48
  useEffect(function () {
48
49
  if (contentRef.current) {
@@ -65,7 +66,6 @@ var CollapsePanel = function CollapsePanel(props) {
65
66
  var handlePanelClick = function handlePanelClick(e) {
66
67
  e.stopPropagation();
67
68
  e.preventDefault();
68
- if (!expandedHeight) return;
69
69
  if (!isExpanded) {
70
70
  setIsExpanded(true);
71
71
  }
@@ -91,7 +91,7 @@ var CollapsePanel = function CollapsePanel(props) {
91
91
  onClick: handleHeaderClick,
92
92
  children: [/*#__PURE__*/_jsxs("span", {
93
93
  className: "".concat(sparkPrefix, "-collapse-panel-title"),
94
- children: [title, expandedHeight && /*#__PURE__*/_jsxs("div", {
94
+ children: [title, /*#__PURE__*/_jsxs("div", {
95
95
  className: "".concat(sparkPrefix, "-collapse-panel-icon-wrapper"),
96
96
  children: [!isExpanded && isHovered && expandOnPanelClick && /*#__PURE__*/_jsx(SparkDownLine, {
97
97
  style: {
@@ -120,7 +120,7 @@ var CollapsePanel = function CollapsePanel(props) {
120
120
  ref: contentRef,
121
121
  className: "".concat("".concat(sparkPrefix, "-collapse-panel-contentWrapper"), " ", isExpanded && expandedHeight ? 'scrollable' : ''),
122
122
  children: children
123
- }), !isExpanded && expandedHeight && /*#__PURE__*/_jsx("div", {
123
+ }), !isExpanded && /*#__PURE__*/_jsx("div", {
124
124
  className: "".concat(sparkPrefix, "-collapse-panel-mask")
125
125
  })]
126
126
  })]
@@ -1,3 +1,4 @@
1
+ import { TooltipProps } from 'antd';
1
2
  import React, { CSSProperties } from 'react';
2
3
  export interface EllipsisTipProps {
3
4
  className?: string;
@@ -7,7 +8,13 @@ export interface EllipsisTipProps {
7
8
  /** 最多几行; 默认1行 */
8
9
  rows?: number;
9
10
  /** 省略时hover的提示内容; 默认值为children */
10
- tooltip?: React.ReactNode;
11
+ tooltip?: React.ReactNode | TooltipProps;
12
+ /**
13
+ * @description tooltip的最大高度
14
+ * @descriptionEn tooltip max height
15
+ * @default '90vh'
16
+ */
17
+ tooltipMaxHeight?: number | string;
11
18
  }
12
19
  /** 超过展示范围时展示tooltip */
13
20
  export default function EllipsisTip(props: EllipsisTipProps): import("react/jsx-runtime").JSX.Element;