@ant-design/agentic-ui 2.29.45 → 2.29.46
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.
- package/dist/MarkdownEditor/editor/plugins/useKeyboard.js +3 -1
- package/dist/MarkdownEditor/editor/tools/JinjaTemplatePanel/index.js +6 -0
- package/dist/TaskList/TaskList.d.ts +3 -0
- package/dist/TaskList/TaskList.js +210 -0
- package/dist/TaskList/components/StatusIcon.d.ts +9 -0
- package/dist/TaskList/components/StatusIcon.js +23 -0
- package/dist/TaskList/components/TaskListItem.d.ts +12 -0
- package/dist/TaskList/components/TaskListItem.js +68 -0
- package/dist/TaskList/constants.d.ts +24 -0
- package/dist/TaskList/constants.js +38 -0
- package/dist/TaskList/index.d.ts +2 -50
- package/dist/TaskList/index.js +1 -260
- package/dist/TaskList/style.js +66 -9
- package/dist/TaskList/types.d.ts +29 -0
- package/dist/TaskList/types.js +3 -0
- package/dist/ToolUseBar/style.js +6 -5
- package/package.json +1 -1
|
@@ -256,9 +256,11 @@ import { useEditorStore } from "../store";
|
|
|
256
256
|
var str = Node.string(node3[0]) || '';
|
|
257
257
|
var codeMatch = str.match(/^```([\w+\-#]+)$/i);
|
|
258
258
|
if (codeMatch) {} else {
|
|
259
|
+
var _e_nativeEvent1;
|
|
259
260
|
var strAfterKey = str + (e.key.length === 1 ? e.key : '');
|
|
260
261
|
// 在实际输入一个字符且补全 trigger 时打开面板,支持在文本后输入(如 "hello {}")
|
|
261
|
-
|
|
262
|
+
// IME 组合期间不触发,避免输入法选字时误触发或失效
|
|
263
|
+
if (jinjaTemplatePanelEnabled && e.key.length === 1 && !((_e_nativeEvent1 = e.nativeEvent) === null || _e_nativeEvent1 === void 0 ? void 0 : _e_nativeEvent1.isComposing) && strAfterKey.endsWith(jinjaTrigger) && setOpenJinjaTemplate && setJinjaAnchorPath) {
|
|
262
264
|
setJinjaAnchorPath(node3[1]);
|
|
263
265
|
setTimeout(function() {
|
|
264
266
|
return setOpenJinjaTemplate(true);
|
|
@@ -123,6 +123,7 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
|
|
|
123
123
|
position: 'fixed'
|
|
124
124
|
}), 2), position = _useState3[0], setPosition = _useState3[1];
|
|
125
125
|
var domRef = useRef(null);
|
|
126
|
+
var openTimeRef = useRef(0);
|
|
126
127
|
var context = React.useContext(ConfigProvider.ConfigContext);
|
|
127
128
|
var prefixCls = (_ref3 = context === null || context === void 0 ? void 0 : (_context_getPrefixCls = context.getPrefixCls) === null || _context_getPrefixCls === void 0 ? void 0 : _context_getPrefixCls.call(context, 'agentic-md-editor-jinja-panel')) !== null && _ref3 !== void 0 ? _ref3 : JINJA_PANEL_PREFIX_CLS;
|
|
128
129
|
var _useJinjaTemplatePanelStyle = useJinjaTemplatePanelStyle(prefixCls), wrapSSR = _useJinjaTemplatePanelStyle.wrapSSR, hashId = _useJinjaTemplatePanelStyle.hashId;
|
|
@@ -137,6 +138,10 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
|
|
|
137
138
|
var handleClickOutside = useCallback(function(e) {
|
|
138
139
|
var target = e.target;
|
|
139
140
|
if (domRef.current && !domRef.current.contains(target)) {
|
|
141
|
+
// 忽略弹窗打开后短时间内的点击,避免「点击聚焦编辑器后快速输入 {}」
|
|
142
|
+
// 触发的陈旧 click 事件立即关闭弹窗
|
|
143
|
+
var elapsed = Date.now() - openTimeRef.current;
|
|
144
|
+
if (elapsed < 150) return;
|
|
140
145
|
close();
|
|
141
146
|
}
|
|
142
147
|
}, [
|
|
@@ -196,6 +201,7 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
|
|
|
196
201
|
useEffect(function() {
|
|
197
202
|
if (!openJinjaTemplate) return;
|
|
198
203
|
if (typeof window === 'undefined') return;
|
|
204
|
+
openTimeRef.current = Date.now();
|
|
199
205
|
window.addEventListener('click', handleClickOutside);
|
|
200
206
|
return function() {
|
|
201
207
|
return window.removeEventListener('click', handleClickOutside);
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
function _array_like_to_array(arr, len) {
|
|
2
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
+
return arr2;
|
|
5
|
+
}
|
|
6
|
+
function _array_with_holes(arr) {
|
|
7
|
+
if (Array.isArray(arr)) return arr;
|
|
8
|
+
}
|
|
9
|
+
function _array_without_holes(arr) {
|
|
10
|
+
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
11
|
+
}
|
|
12
|
+
function _iterable_to_array(iter) {
|
|
13
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
14
|
+
}
|
|
15
|
+
function _iterable_to_array_limit(arr, i) {
|
|
16
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
17
|
+
if (_i == null) return;
|
|
18
|
+
var _arr = [];
|
|
19
|
+
var _n = true;
|
|
20
|
+
var _d = false;
|
|
21
|
+
var _s, _e;
|
|
22
|
+
try {
|
|
23
|
+
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
24
|
+
_arr.push(_s.value);
|
|
25
|
+
if (i && _arr.length === i) break;
|
|
26
|
+
}
|
|
27
|
+
} catch (err) {
|
|
28
|
+
_d = true;
|
|
29
|
+
_e = err;
|
|
30
|
+
} finally{
|
|
31
|
+
try {
|
|
32
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
33
|
+
} finally{
|
|
34
|
+
if (_d) throw _e;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return _arr;
|
|
38
|
+
}
|
|
39
|
+
function _non_iterable_rest() {
|
|
40
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
41
|
+
}
|
|
42
|
+
function _non_iterable_spread() {
|
|
43
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
44
|
+
}
|
|
45
|
+
function _sliced_to_array(arr, i) {
|
|
46
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
47
|
+
}
|
|
48
|
+
function _to_consumable_array(arr) {
|
|
49
|
+
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
50
|
+
}
|
|
51
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
52
|
+
if (!o) return;
|
|
53
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
54
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
55
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
56
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
57
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
58
|
+
}
|
|
59
|
+
import { ChevronUp } from "@sofa-design/icons";
|
|
60
|
+
import { ConfigProvider } from "antd";
|
|
61
|
+
import classNames from "clsx";
|
|
62
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
63
|
+
import { useMergedState } from "rc-util";
|
|
64
|
+
import React, { memo, useContext, useMemo } from "react";
|
|
65
|
+
import { ActionIconBox } from "../Components/ActionIconBox";
|
|
66
|
+
import { useRefFunction } from "../Hooks/useRefFunction";
|
|
67
|
+
import { I18nContext } from "../I18n";
|
|
68
|
+
import { StatusIcon } from "./components/StatusIcon";
|
|
69
|
+
import { TaskListItem } from "./components/TaskListItem";
|
|
70
|
+
import { COLLAPSE_TRANSITION, COLLAPSE_VARIANTS, getArrowRotation } from "./constants";
|
|
71
|
+
import { useStyle } from "./style";
|
|
72
|
+
var getDefaultExpandedKeys = function getDefaultExpandedKeys(items, isControlled) {
|
|
73
|
+
return isControlled ? [] : items.map(function(item) {
|
|
74
|
+
return item.key;
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
export var TaskList = /*#__PURE__*/ memo(function(param) {
|
|
78
|
+
var items = param.items, className = param.className, expandedKeys = param.expandedKeys, onExpandedKeysChange = param.onExpandedKeysChange, _param_variant = param.variant, variant = _param_variant === void 0 ? 'default' : _param_variant, open = param.open, onOpenChange = param.onOpenChange;
|
|
79
|
+
var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
|
|
80
|
+
var prefixCls = getPrefixCls('task-list');
|
|
81
|
+
var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
|
|
82
|
+
var locale = useContext(I18nContext).locale;
|
|
83
|
+
var isControlled = expandedKeys !== undefined;
|
|
84
|
+
var _useMergedState = _sliced_to_array(useMergedState(getDefaultExpandedKeys(items, isControlled), {
|
|
85
|
+
value: expandedKeys,
|
|
86
|
+
onChange: onExpandedKeysChange
|
|
87
|
+
}), 2), internalExpandedKeys = _useMergedState[0], setInternalExpandedKeys = _useMergedState[1];
|
|
88
|
+
var handleToggle = useRefFunction(function(key) {
|
|
89
|
+
var currentExpanded = isControlled ? expandedKeys : internalExpandedKeys;
|
|
90
|
+
var newExpandedKeys = currentExpanded.includes(key) ? currentExpanded.filter(function(k) {
|
|
91
|
+
return k !== key;
|
|
92
|
+
}) : _to_consumable_array(currentExpanded).concat([
|
|
93
|
+
key
|
|
94
|
+
]);
|
|
95
|
+
setInternalExpandedKeys(newExpandedKeys);
|
|
96
|
+
});
|
|
97
|
+
var _useMergedState1 = _sliced_to_array(useMergedState(false, {
|
|
98
|
+
value: open,
|
|
99
|
+
onChange: function onChange(val) {
|
|
100
|
+
return onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(val);
|
|
101
|
+
}
|
|
102
|
+
}), 2), simpleExpanded = _useMergedState1[0], setSimpleExpanded = _useMergedState1[1];
|
|
103
|
+
var handleSimpleToggle = useRefFunction(function() {
|
|
104
|
+
setSimpleExpanded(function(prev) {
|
|
105
|
+
return !prev;
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
var _useMemo = useMemo(function() {
|
|
109
|
+
var completedCount = items.filter(function(i) {
|
|
110
|
+
return i.status === 'success';
|
|
111
|
+
}).length;
|
|
112
|
+
var loadingItem = items.find(function(i) {
|
|
113
|
+
return i.status === 'loading';
|
|
114
|
+
});
|
|
115
|
+
var hasError = items.some(function(i) {
|
|
116
|
+
return i.status === 'error';
|
|
117
|
+
});
|
|
118
|
+
var allDone = completedCount === items.length && items.length > 0;
|
|
119
|
+
var status = 'pending';
|
|
120
|
+
var text = (locale === null || locale === void 0 ? void 0 : locale['taskList.taskList']) || '任务列表';
|
|
121
|
+
if (allDone) {
|
|
122
|
+
status = 'success';
|
|
123
|
+
text = (locale === null || locale === void 0 ? void 0 : locale['taskList.taskComplete']) || '任务完成';
|
|
124
|
+
} else if (loadingItem === null || loadingItem === void 0 ? void 0 : loadingItem.title) {
|
|
125
|
+
status = 'loading';
|
|
126
|
+
var tpl = (locale === null || locale === void 0 ? void 0 : locale['taskList.taskInProgress']) || '正在进行${taskName}任务';
|
|
127
|
+
var title = loadingItem.title;
|
|
128
|
+
var taskName = typeof title === 'string' || typeof title === 'number' ? String(title) : '';
|
|
129
|
+
text = tpl.replace('${taskName}', taskName);
|
|
130
|
+
} else if (hasError) {
|
|
131
|
+
status = 'error';
|
|
132
|
+
text = (locale === null || locale === void 0 ? void 0 : locale['taskList.taskAborted']) || '任务已取消';
|
|
133
|
+
}
|
|
134
|
+
return {
|
|
135
|
+
summaryStatus: status,
|
|
136
|
+
summaryText: text,
|
|
137
|
+
progressText: "".concat(completedCount, "/").concat(items.length)
|
|
138
|
+
};
|
|
139
|
+
}, [
|
|
140
|
+
items,
|
|
141
|
+
locale
|
|
142
|
+
]), summaryStatus = _useMemo.summaryStatus, summaryText = _useMemo.summaryText, progressText = _useMemo.progressText;
|
|
143
|
+
var renderItems = function renderItems() {
|
|
144
|
+
return items.map(function(item, index) {
|
|
145
|
+
return /*#__PURE__*/ React.createElement(TaskListItem, {
|
|
146
|
+
key: item.key,
|
|
147
|
+
item: item,
|
|
148
|
+
isLast: index === items.length - 1,
|
|
149
|
+
prefixCls: prefixCls,
|
|
150
|
+
hashId: hashId,
|
|
151
|
+
expandedKeys: internalExpandedKeys,
|
|
152
|
+
onToggle: handleToggle
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
};
|
|
156
|
+
if (variant !== 'simple') {
|
|
157
|
+
return wrapSSR(/*#__PURE__*/ React.createElement("div", {
|
|
158
|
+
className: className
|
|
159
|
+
}, renderItems()));
|
|
160
|
+
}
|
|
161
|
+
var simpleCls = "".concat(prefixCls, "-simple");
|
|
162
|
+
var simpleArrowTitle = simpleExpanded ? (locale === null || locale === void 0 ? void 0 : locale['taskList.collapse']) || '收起' : (locale === null || locale === void 0 ? void 0 : locale['taskList.expand']) || '展开';
|
|
163
|
+
return wrapSSR(/*#__PURE__*/ React.createElement("div", {
|
|
164
|
+
className: classNames("".concat(simpleCls, "-wrapper"), hashId, className),
|
|
165
|
+
"data-testid": "task-list-simple-wrapper"
|
|
166
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
167
|
+
className: classNames(simpleCls, hashId),
|
|
168
|
+
onClick: handleSimpleToggle,
|
|
169
|
+
role: "button",
|
|
170
|
+
tabIndex: 0,
|
|
171
|
+
"aria-expanded": simpleExpanded,
|
|
172
|
+
"aria-label": simpleArrowTitle,
|
|
173
|
+
"data-testid": "task-list-simple-bar"
|
|
174
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
175
|
+
className: classNames("".concat(simpleCls, "-status"), hashId)
|
|
176
|
+
}, /*#__PURE__*/ React.createElement(StatusIcon, {
|
|
177
|
+
status: summaryStatus,
|
|
178
|
+
prefixCls: prefixCls,
|
|
179
|
+
hashId: hashId
|
|
180
|
+
})), /*#__PURE__*/ React.createElement("div", {
|
|
181
|
+
className: classNames("".concat(simpleCls, "-text"), hashId)
|
|
182
|
+
}, summaryText), /*#__PURE__*/ React.createElement("div", {
|
|
183
|
+
className: classNames("".concat(simpleCls, "-progress"), hashId)
|
|
184
|
+
}, progressText), /*#__PURE__*/ React.createElement("div", {
|
|
185
|
+
className: classNames("".concat(simpleCls, "-arrow"), hashId)
|
|
186
|
+
}, /*#__PURE__*/ React.createElement(ActionIconBox, {
|
|
187
|
+
title: simpleArrowTitle,
|
|
188
|
+
iconStyle: getArrowRotation(!simpleExpanded),
|
|
189
|
+
loading: false,
|
|
190
|
+
onClick: function onClick(e) {
|
|
191
|
+
e.stopPropagation();
|
|
192
|
+
handleSimpleToggle();
|
|
193
|
+
}
|
|
194
|
+
}, /*#__PURE__*/ React.createElement(ChevronUp, {
|
|
195
|
+
"data-testid": "task-list-simple-arrow"
|
|
196
|
+
})))), /*#__PURE__*/ React.createElement(AnimatePresence, {
|
|
197
|
+
initial: false
|
|
198
|
+
}, simpleExpanded && /*#__PURE__*/ React.createElement(motion.div, {
|
|
199
|
+
key: "simple-task-list-content",
|
|
200
|
+
variants: COLLAPSE_VARIANTS,
|
|
201
|
+
initial: "collapsed",
|
|
202
|
+
animate: "expanded",
|
|
203
|
+
exit: "collapsed",
|
|
204
|
+
transition: COLLAPSE_TRANSITION,
|
|
205
|
+
className: classNames("".concat(simpleCls, "-content"), hashId)
|
|
206
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
207
|
+
className: classNames("".concat(simpleCls, "-list"), hashId)
|
|
208
|
+
}, renderItems())))));
|
|
209
|
+
});
|
|
210
|
+
TaskList.displayName = 'TaskList';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { CircleDashed, SuccessFill, X } from "@sofa-design/icons";
|
|
2
|
+
import classNames from "clsx";
|
|
3
|
+
import React, { memo } from "react";
|
|
4
|
+
import { Loading } from "../../Components/Loading";
|
|
5
|
+
import { LOADING_SIZE } from "../constants";
|
|
6
|
+
export var StatusIcon = /*#__PURE__*/ memo(function(param) {
|
|
7
|
+
var status = param.status, prefixCls = param.prefixCls, hashId = param.hashId;
|
|
8
|
+
var statusMap = {
|
|
9
|
+
success: /*#__PURE__*/ React.createElement(SuccessFill, null),
|
|
10
|
+
loading: /*#__PURE__*/ React.createElement(Loading, {
|
|
11
|
+
size: LOADING_SIZE
|
|
12
|
+
}),
|
|
13
|
+
pending: /*#__PURE__*/ React.createElement("div", {
|
|
14
|
+
className: classNames("".concat(prefixCls, "-status-idle"), hashId)
|
|
15
|
+
}, /*#__PURE__*/ React.createElement(CircleDashed, null)),
|
|
16
|
+
error: /*#__PURE__*/ React.createElement(X, null)
|
|
17
|
+
};
|
|
18
|
+
return /*#__PURE__*/ React.createElement("div", {
|
|
19
|
+
className: classNames("".concat(prefixCls, "-status"), "".concat(prefixCls, "-status-").concat(status), hashId),
|
|
20
|
+
"data-testid": "task-list-status-".concat(status)
|
|
21
|
+
}, statusMap[status]);
|
|
22
|
+
});
|
|
23
|
+
StatusIcon.displayName = 'StatusIcon';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TaskItem } from '../types';
|
|
3
|
+
interface TaskListItemProps {
|
|
4
|
+
item: TaskItem;
|
|
5
|
+
isLast: boolean;
|
|
6
|
+
prefixCls: string;
|
|
7
|
+
hashId: string;
|
|
8
|
+
expandedKeys: string[];
|
|
9
|
+
onToggle: (key: string) => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const TaskListItem: React.FC<TaskListItemProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { ChevronUp } from "@sofa-design/icons";
|
|
2
|
+
import classNames from "clsx";
|
|
3
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
4
|
+
import React, { memo, useCallback, useContext } from "react";
|
|
5
|
+
import { ActionIconBox } from "../../Components/ActionIconBox";
|
|
6
|
+
import { I18nContext } from "../../I18n";
|
|
7
|
+
import { COLLAPSE_TRANSITION, COLLAPSE_VARIANTS, getArrowRotation, hasTaskContent } from "../constants";
|
|
8
|
+
import { StatusIcon } from "./StatusIcon";
|
|
9
|
+
export var TaskListItem = /*#__PURE__*/ memo(function(param) {
|
|
10
|
+
var item = param.item, isLast = param.isLast, prefixCls = param.prefixCls, hashId = param.hashId, expandedKeys = param.expandedKeys, onToggle = param.onToggle;
|
|
11
|
+
var locale = useContext(I18nContext).locale;
|
|
12
|
+
var isCollapsed = !expandedKeys.includes(item.key);
|
|
13
|
+
var hasContent = hasTaskContent(item.content);
|
|
14
|
+
var handleToggle = useCallback(function() {
|
|
15
|
+
onToggle(item.key);
|
|
16
|
+
}, [
|
|
17
|
+
item.key,
|
|
18
|
+
onToggle
|
|
19
|
+
]);
|
|
20
|
+
var arrowTitle = isCollapsed ? (locale === null || locale === void 0 ? void 0 : locale['taskList.expand']) || '展开' : (locale === null || locale === void 0 ? void 0 : locale['taskList.collapse']) || '收起';
|
|
21
|
+
return /*#__PURE__*/ React.createElement("div", {
|
|
22
|
+
key: item.key,
|
|
23
|
+
className: classNames("".concat(prefixCls, "-thoughtChainItem"), hashId),
|
|
24
|
+
"data-testid": "task-list-thoughtChainItem"
|
|
25
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
26
|
+
className: classNames("".concat(prefixCls, "-left"), hashId),
|
|
27
|
+
onClick: handleToggle,
|
|
28
|
+
"data-testid": "task-list-left"
|
|
29
|
+
}, /*#__PURE__*/ React.createElement(StatusIcon, {
|
|
30
|
+
status: item.status,
|
|
31
|
+
prefixCls: prefixCls,
|
|
32
|
+
hashId: hashId
|
|
33
|
+
}), /*#__PURE__*/ React.createElement("div", {
|
|
34
|
+
className: classNames("".concat(prefixCls, "-content-left"), hashId)
|
|
35
|
+
}, !isLast && /*#__PURE__*/ React.createElement("div", {
|
|
36
|
+
className: classNames("".concat(prefixCls, "-dash-line"), hashId),
|
|
37
|
+
"data-testid": "task-list-dash-line"
|
|
38
|
+
}))), /*#__PURE__*/ React.createElement("div", {
|
|
39
|
+
className: classNames("".concat(prefixCls, "-right"), hashId)
|
|
40
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
41
|
+
className: classNames("".concat(prefixCls, "-top"), hashId),
|
|
42
|
+
onClick: handleToggle
|
|
43
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
44
|
+
className: classNames("".concat(prefixCls, "-title"), hashId)
|
|
45
|
+
}, item.title), hasContent && /*#__PURE__*/ React.createElement("div", {
|
|
46
|
+
className: classNames("".concat(prefixCls, "-arrowContainer"), hashId),
|
|
47
|
+
"data-testid": "task-list-arrowContainer"
|
|
48
|
+
}, /*#__PURE__*/ React.createElement(ActionIconBox, {
|
|
49
|
+
title: arrowTitle,
|
|
50
|
+
iconStyle: getArrowRotation(isCollapsed),
|
|
51
|
+
loading: false
|
|
52
|
+
}, /*#__PURE__*/ React.createElement(ChevronUp, {
|
|
53
|
+
"data-testid": "task-list-arrow"
|
|
54
|
+
})))), /*#__PURE__*/ React.createElement(AnimatePresence, {
|
|
55
|
+
initial: false
|
|
56
|
+
}, !isCollapsed && /*#__PURE__*/ React.createElement(motion.div, {
|
|
57
|
+
key: "task-content",
|
|
58
|
+
variants: COLLAPSE_VARIANTS,
|
|
59
|
+
initial: "collapsed",
|
|
60
|
+
animate: "expanded",
|
|
61
|
+
exit: "collapsed",
|
|
62
|
+
transition: COLLAPSE_TRANSITION,
|
|
63
|
+
className: classNames("".concat(prefixCls, "-body"), hashId)
|
|
64
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
65
|
+
className: classNames("".concat(prefixCls, "-content"), hashId)
|
|
66
|
+
}, item.content)))));
|
|
67
|
+
});
|
|
68
|
+
TaskListItem.displayName = 'TaskListItem';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LOADING_SIZE = 16;
|
|
3
|
+
export declare const COLLAPSE_VARIANTS: {
|
|
4
|
+
expanded: {
|
|
5
|
+
height: string;
|
|
6
|
+
opacity: number;
|
|
7
|
+
};
|
|
8
|
+
collapsed: {
|
|
9
|
+
height: number;
|
|
10
|
+
opacity: number;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare const COLLAPSE_TRANSITION: {
|
|
14
|
+
height: {
|
|
15
|
+
duration: number;
|
|
16
|
+
ease: number[];
|
|
17
|
+
};
|
|
18
|
+
opacity: {
|
|
19
|
+
duration: number;
|
|
20
|
+
ease: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export declare const getArrowRotation: (collapsed: boolean) => React.CSSProperties;
|
|
24
|
+
export declare const hasTaskContent: (content: React.ReactNode | React.ReactNode[]) => boolean;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export var LOADING_SIZE = 16;
|
|
2
|
+
export var COLLAPSE_VARIANTS = {
|
|
3
|
+
expanded: {
|
|
4
|
+
height: 'auto',
|
|
5
|
+
opacity: 1
|
|
6
|
+
},
|
|
7
|
+
collapsed: {
|
|
8
|
+
height: 0,
|
|
9
|
+
opacity: 0
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
export var COLLAPSE_TRANSITION = {
|
|
13
|
+
height: {
|
|
14
|
+
duration: 0.26,
|
|
15
|
+
ease: [
|
|
16
|
+
0.4,
|
|
17
|
+
0,
|
|
18
|
+
0.2,
|
|
19
|
+
1
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
opacity: {
|
|
23
|
+
duration: 0.2,
|
|
24
|
+
ease: 'linear'
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
export var getArrowRotation = function getArrowRotation(collapsed) {
|
|
28
|
+
return {
|
|
29
|
+
transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
|
|
30
|
+
transition: 'transform 0.3s ease'
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export var hasTaskContent = function hasTaskContent(content) {
|
|
34
|
+
if (Array.isArray(content)) {
|
|
35
|
+
return content.length > 0;
|
|
36
|
+
}
|
|
37
|
+
return !!content;
|
|
38
|
+
};
|
package/dist/TaskList/index.d.ts
CHANGED
|
@@ -1,50 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
type
|
|
3
|
-
type TaskItem = {
|
|
4
|
-
key: string;
|
|
5
|
-
title?: React.ReactNode;
|
|
6
|
-
content: React.ReactNode | React.ReactNode[];
|
|
7
|
-
status: TaskStatus;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* TaskList 组件属性
|
|
11
|
-
*/
|
|
12
|
-
export type TaskListProps = {
|
|
13
|
-
/** 任务列表数据 */
|
|
14
|
-
items: TaskItem[];
|
|
15
|
-
/** 自定义类名 */
|
|
16
|
-
className?: string;
|
|
17
|
-
/** 受控模式:指定当前展开的任务项 key 数组 */
|
|
18
|
-
expandedKeys?: string[];
|
|
19
|
-
/** 受控模式:展开状态变化时的回调函数 */
|
|
20
|
-
onExpandedKeysChange?: (expandedKeys: string[]) => void;
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* @deprecated @since 2.30.0 请使用 TaskListProps 替代
|
|
24
|
-
*/
|
|
25
|
-
export type ThoughtChainProps = TaskListProps;
|
|
26
|
-
/**
|
|
27
|
-
* TaskList 组件
|
|
28
|
-
*
|
|
29
|
-
* 显示任务列表,支持展开/折叠、状态管理等功能
|
|
30
|
-
* 支持受控和非受控两种模式
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```tsx
|
|
34
|
-
* // 非受控模式
|
|
35
|
-
* <TaskList
|
|
36
|
-
* items={[
|
|
37
|
-
* { key: 'task1', title: '任务1', content: '内容', status: 'success' }
|
|
38
|
-
* ]}
|
|
39
|
-
* />
|
|
40
|
-
*
|
|
41
|
-
* // 受控模式
|
|
42
|
-
* <TaskList
|
|
43
|
-
* items={tasks}
|
|
44
|
-
* expandedKeys={expandedKeys}
|
|
45
|
-
* onExpandedKeysChange={setExpandedKeys}
|
|
46
|
-
* />
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
export declare const TaskList: React.MemoExoticComponent<({ items, className, expandedKeys, onExpandedKeysChange }: TaskListProps) => any>;
|
|
50
|
-
export {};
|
|
1
|
+
export { TaskList } from './TaskList';
|
|
2
|
+
export type { TaskItem, TaskListProps, TaskListVariant, TaskStatus, ThoughtChainProps, } from './types';
|
package/dist/TaskList/index.js
CHANGED
|
@@ -1,260 +1 @@
|
|
|
1
|
-
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _array_without_holes(arr) {
|
|
10
|
-
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
11
|
-
}
|
|
12
|
-
function _iterable_to_array(iter) {
|
|
13
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
14
|
-
}
|
|
15
|
-
function _iterable_to_array_limit(arr, i) {
|
|
16
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
17
|
-
if (_i == null) return;
|
|
18
|
-
var _arr = [];
|
|
19
|
-
var _n = true;
|
|
20
|
-
var _d = false;
|
|
21
|
-
var _s, _e;
|
|
22
|
-
try {
|
|
23
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
24
|
-
_arr.push(_s.value);
|
|
25
|
-
if (i && _arr.length === i) break;
|
|
26
|
-
}
|
|
27
|
-
} catch (err) {
|
|
28
|
-
_d = true;
|
|
29
|
-
_e = err;
|
|
30
|
-
} finally{
|
|
31
|
-
try {
|
|
32
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
33
|
-
} finally{
|
|
34
|
-
if (_d) throw _e;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
return _arr;
|
|
38
|
-
}
|
|
39
|
-
function _non_iterable_rest() {
|
|
40
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
41
|
-
}
|
|
42
|
-
function _non_iterable_spread() {
|
|
43
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
44
|
-
}
|
|
45
|
-
function _sliced_to_array(arr, i) {
|
|
46
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
47
|
-
}
|
|
48
|
-
function _to_consumable_array(arr) {
|
|
49
|
-
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
50
|
-
}
|
|
51
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
52
|
-
if (!o) return;
|
|
53
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
54
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
55
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
56
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
57
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
58
|
-
}
|
|
59
|
-
import { ChevronUp, CircleDashed, SuccessFill, X } from "@sofa-design/icons";
|
|
60
|
-
import { ConfigProvider } from "antd";
|
|
61
|
-
import classNames from "clsx";
|
|
62
|
-
import { AnimatePresence, motion } from "framer-motion";
|
|
63
|
-
import { useMergedState } from "rc-util";
|
|
64
|
-
import React, { memo, useCallback, useContext, useMemo } from "react";
|
|
65
|
-
import { ActionIconBox } from "../Components/ActionIconBox";
|
|
66
|
-
import { Loading } from "../Components/Loading";
|
|
67
|
-
import { useRefFunction } from "../Hooks/useRefFunction";
|
|
68
|
-
import { I18nContext } from "../I18n";
|
|
69
|
-
import { useStyle } from "./style";
|
|
70
|
-
var LOADING_SIZE = 16;
|
|
71
|
-
var buildClassName = function buildClassName() {
|
|
72
|
-
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
|
|
73
|
-
args[_key] = arguments[_key];
|
|
74
|
-
}
|
|
75
|
-
return classNames.apply(void 0, _to_consumable_array(args));
|
|
76
|
-
};
|
|
77
|
-
var hasTaskContent = function hasTaskContent(content) {
|
|
78
|
-
if (Array.isArray(content)) {
|
|
79
|
-
return content.length > 0;
|
|
80
|
-
}
|
|
81
|
-
return !!content;
|
|
82
|
-
};
|
|
83
|
-
var getArrowRotation = function getArrowRotation(collapsed) {
|
|
84
|
-
return {
|
|
85
|
-
transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
|
|
86
|
-
transition: 'transform 0.3s ease'
|
|
87
|
-
};
|
|
88
|
-
};
|
|
89
|
-
var StatusIcon = /*#__PURE__*/ memo(function(param) {
|
|
90
|
-
var status = param.status, prefixCls = param.prefixCls, hashId = param.hashId;
|
|
91
|
-
var statusMap = {
|
|
92
|
-
success: /*#__PURE__*/ React.createElement(SuccessFill, null),
|
|
93
|
-
loading: /*#__PURE__*/ React.createElement(Loading, {
|
|
94
|
-
size: LOADING_SIZE
|
|
95
|
-
}),
|
|
96
|
-
pending: /*#__PURE__*/ React.createElement("div", {
|
|
97
|
-
className: buildClassName("".concat(prefixCls, "-status-idle"), hashId)
|
|
98
|
-
}, /*#__PURE__*/ React.createElement(CircleDashed, null)),
|
|
99
|
-
error: /*#__PURE__*/ React.createElement(X, null)
|
|
100
|
-
};
|
|
101
|
-
return /*#__PURE__*/ React.createElement("div", {
|
|
102
|
-
className: buildClassName("".concat(prefixCls, "-status"), "".concat(prefixCls, "-status-").concat(status), hashId),
|
|
103
|
-
"data-testid": "task-list-status-".concat(status)
|
|
104
|
-
}, statusMap[status]);
|
|
105
|
-
});
|
|
106
|
-
StatusIcon.displayName = 'StatusIcon';
|
|
107
|
-
var TaskListItem = /*#__PURE__*/ memo(function(param) {
|
|
108
|
-
var item = param.item, isLast = param.isLast, prefixCls = param.prefixCls, hashId = param.hashId, expandedKeys = param.expandedKeys, onToggle = param.onToggle;
|
|
109
|
-
var locale = useContext(I18nContext).locale;
|
|
110
|
-
var isCollapsed = !expandedKeys.includes(item.key);
|
|
111
|
-
var hasContent = hasTaskContent(item.content);
|
|
112
|
-
// 使用 useCallback 优化切换处理函数
|
|
113
|
-
var handleToggle = useCallback(function() {
|
|
114
|
-
onToggle(item.key);
|
|
115
|
-
}, [
|
|
116
|
-
item.key,
|
|
117
|
-
onToggle
|
|
118
|
-
]);
|
|
119
|
-
var arrowTitle = isCollapsed ? (locale === null || locale === void 0 ? void 0 : locale['taskList.expand']) || '展开' : (locale === null || locale === void 0 ? void 0 : locale['taskList.collapse']) || '收起';
|
|
120
|
-
var contentVariants = useMemo(function() {
|
|
121
|
-
return {
|
|
122
|
-
expanded: {
|
|
123
|
-
height: 'auto',
|
|
124
|
-
opacity: 1
|
|
125
|
-
},
|
|
126
|
-
collapsed: {
|
|
127
|
-
height: 0,
|
|
128
|
-
opacity: 0
|
|
129
|
-
}
|
|
130
|
-
};
|
|
131
|
-
}, []);
|
|
132
|
-
var contentTransition = useMemo(function() {
|
|
133
|
-
return {
|
|
134
|
-
height: {
|
|
135
|
-
duration: 0.26,
|
|
136
|
-
ease: [
|
|
137
|
-
0.4,
|
|
138
|
-
0,
|
|
139
|
-
0.2,
|
|
140
|
-
1
|
|
141
|
-
]
|
|
142
|
-
},
|
|
143
|
-
opacity: {
|
|
144
|
-
duration: 0.2,
|
|
145
|
-
ease: 'linear'
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
}, []);
|
|
149
|
-
return /*#__PURE__*/ React.createElement("div", {
|
|
150
|
-
key: item.key,
|
|
151
|
-
className: buildClassName("".concat(prefixCls, "-thoughtChainItem"), hashId),
|
|
152
|
-
"data-testid": "task-list-thoughtChainItem"
|
|
153
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
154
|
-
className: buildClassName("".concat(prefixCls, "-left"), hashId),
|
|
155
|
-
onClick: handleToggle,
|
|
156
|
-
"data-testid": "task-list-left"
|
|
157
|
-
}, /*#__PURE__*/ React.createElement(StatusIcon, {
|
|
158
|
-
status: item.status,
|
|
159
|
-
prefixCls: prefixCls,
|
|
160
|
-
hashId: hashId
|
|
161
|
-
}), /*#__PURE__*/ React.createElement("div", {
|
|
162
|
-
className: buildClassName("".concat(prefixCls, "-content-left"), hashId)
|
|
163
|
-
}, !isLast && /*#__PURE__*/ React.createElement("div", {
|
|
164
|
-
className: buildClassName("".concat(prefixCls, "-dash-line"), hashId),
|
|
165
|
-
"data-testid": "task-list-dash-line"
|
|
166
|
-
}))), /*#__PURE__*/ React.createElement("div", {
|
|
167
|
-
className: buildClassName("".concat(prefixCls, "-right"), hashId)
|
|
168
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
169
|
-
className: buildClassName("".concat(prefixCls, "-top"), hashId),
|
|
170
|
-
onClick: handleToggle
|
|
171
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
172
|
-
className: buildClassName("".concat(prefixCls, "-title"), hashId)
|
|
173
|
-
}, item.title), hasContent && /*#__PURE__*/ React.createElement("div", {
|
|
174
|
-
className: buildClassName("".concat(prefixCls, "-arrowContainer"), hashId),
|
|
175
|
-
onClick: handleToggle,
|
|
176
|
-
"data-testid": "task-list-arrowContainer"
|
|
177
|
-
}, /*#__PURE__*/ React.createElement(ActionIconBox, {
|
|
178
|
-
title: arrowTitle,
|
|
179
|
-
iconStyle: getArrowRotation(isCollapsed),
|
|
180
|
-
loading: false,
|
|
181
|
-
onClick: handleToggle
|
|
182
|
-
}, /*#__PURE__*/ React.createElement(ChevronUp, {
|
|
183
|
-
"data-testid": "task-list-arrow"
|
|
184
|
-
})))), /*#__PURE__*/ React.createElement(AnimatePresence, {
|
|
185
|
-
initial: false
|
|
186
|
-
}, !isCollapsed && /*#__PURE__*/ React.createElement(motion.div, {
|
|
187
|
-
key: "task-content",
|
|
188
|
-
variants: contentVariants,
|
|
189
|
-
initial: "collapsed",
|
|
190
|
-
animate: "expanded",
|
|
191
|
-
exit: "collapsed",
|
|
192
|
-
transition: contentTransition,
|
|
193
|
-
className: buildClassName("".concat(prefixCls, "-body"), hashId)
|
|
194
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
|
195
|
-
className: buildClassName("".concat(prefixCls, "-content"), hashId)
|
|
196
|
-
}, item.content)))));
|
|
197
|
-
});
|
|
198
|
-
TaskListItem.displayName = 'TaskListItem';
|
|
199
|
-
var getDefaultExpandedKeys = function getDefaultExpandedKeys(items, isControlled) {
|
|
200
|
-
return isControlled ? [] : items.map(function(item) {
|
|
201
|
-
return item.key;
|
|
202
|
-
});
|
|
203
|
-
};
|
|
204
|
-
/**
|
|
205
|
-
* TaskList 组件
|
|
206
|
-
*
|
|
207
|
-
* 显示任务列表,支持展开/折叠、状态管理等功能
|
|
208
|
-
* 支持受控和非受控两种模式
|
|
209
|
-
*
|
|
210
|
-
* @example
|
|
211
|
-
* ```tsx
|
|
212
|
-
* // 非受控模式
|
|
213
|
-
* <TaskList
|
|
214
|
-
* items={[
|
|
215
|
-
* { key: 'task1', title: '任务1', content: '内容', status: 'success' }
|
|
216
|
-
* ]}
|
|
217
|
-
* />
|
|
218
|
-
*
|
|
219
|
-
* // 受控模式
|
|
220
|
-
* <TaskList
|
|
221
|
-
* items={tasks}
|
|
222
|
-
* expandedKeys={expandedKeys}
|
|
223
|
-
* onExpandedKeysChange={setExpandedKeys}
|
|
224
|
-
* />
|
|
225
|
-
* ```
|
|
226
|
-
*/ export var TaskList = /*#__PURE__*/ memo(function(param) {
|
|
227
|
-
var items = param.items, className = param.className, expandedKeys = param.expandedKeys, onExpandedKeysChange = param.onExpandedKeysChange;
|
|
228
|
-
var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
|
|
229
|
-
var prefixCls = getPrefixCls('task-list');
|
|
230
|
-
var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
|
|
231
|
-
var isControlled = expandedKeys !== undefined;
|
|
232
|
-
var defaultKeys = getDefaultExpandedKeys(items, isControlled);
|
|
233
|
-
var _useMergedState = _sliced_to_array(useMergedState(defaultKeys, {
|
|
234
|
-
value: expandedKeys,
|
|
235
|
-
onChange: onExpandedKeysChange
|
|
236
|
-
}), 2), internalExpandedKeys = _useMergedState[0], setInternalExpandedKeys = _useMergedState[1];
|
|
237
|
-
var handleToggle = useRefFunction(function(key) {
|
|
238
|
-
var currentExpanded = isControlled ? expandedKeys : internalExpandedKeys;
|
|
239
|
-
var newExpandedKeys = currentExpanded.includes(key) ? currentExpanded.filter(function(k) {
|
|
240
|
-
return k !== key;
|
|
241
|
-
}) : _to_consumable_array(currentExpanded).concat([
|
|
242
|
-
key
|
|
243
|
-
]);
|
|
244
|
-
setInternalExpandedKeys(newExpandedKeys);
|
|
245
|
-
});
|
|
246
|
-
return wrapSSR(/*#__PURE__*/ React.createElement("div", {
|
|
247
|
-
className: className
|
|
248
|
-
}, items.map(function(item, index) {
|
|
249
|
-
return /*#__PURE__*/ React.createElement(TaskListItem, {
|
|
250
|
-
key: item.key,
|
|
251
|
-
item: item,
|
|
252
|
-
isLast: index === items.length - 1,
|
|
253
|
-
prefixCls: prefixCls,
|
|
254
|
-
hashId: hashId,
|
|
255
|
-
expandedKeys: internalExpandedKeys,
|
|
256
|
-
onToggle: handleToggle
|
|
257
|
-
});
|
|
258
|
-
})));
|
|
259
|
-
});
|
|
260
|
-
TaskList.displayName = 'TaskList';
|
|
1
|
+
export { TaskList } from "./TaskList";
|
package/dist/TaskList/style.js
CHANGED
|
@@ -52,8 +52,9 @@ function _object_spread_props(target, source) {
|
|
|
52
52
|
}
|
|
53
53
|
import { useEditorStyleRegister } from "../Hooks/useStyle";
|
|
54
54
|
var genStyle = function genStyle(token) {
|
|
55
|
-
var
|
|
56
|
-
|
|
55
|
+
var componentCls = token.componentCls;
|
|
56
|
+
var _obj, _obj1;
|
|
57
|
+
return _define_property({}, componentCls, {
|
|
57
58
|
'&-thoughtChainItem': {
|
|
58
59
|
marginBottom: 4,
|
|
59
60
|
display: 'flex',
|
|
@@ -105,27 +106,27 @@ var genStyle = function genStyle(token) {
|
|
|
105
106
|
marginBottom: 4,
|
|
106
107
|
gap: 4,
|
|
107
108
|
cursor: 'pointer'
|
|
108
|
-
}, _define_property(_obj, "".concat(
|
|
109
|
+
}, _define_property(_obj, "".concat(componentCls, "-titleContainer"), {
|
|
109
110
|
paddingTop: 8,
|
|
110
111
|
display: 'flex',
|
|
111
112
|
alignItems: 'center'
|
|
112
|
-
}), _define_property(_obj, "".concat(
|
|
113
|
+
}), _define_property(_obj, "".concat(componentCls, "-title"), {
|
|
113
114
|
font: 'var(--font-text-h6-base)',
|
|
114
115
|
marginLeft: 12,
|
|
115
116
|
textAlign: 'justify',
|
|
116
117
|
color: 'var(--color-gray-text-default)'
|
|
117
|
-
}), _define_property(_obj, "".concat(
|
|
118
|
+
}), _define_property(_obj, "".concat(componentCls, "-loading"), {
|
|
118
119
|
height: 20,
|
|
119
120
|
display: 'flex',
|
|
120
121
|
alignItems: 'center',
|
|
121
122
|
justifyContent: 'center'
|
|
122
|
-
}), _define_property(_obj, "".concat(
|
|
123
|
+
}), _define_property(_obj, "".concat(componentCls, "-arrowContainer"), {
|
|
123
124
|
height: 20,
|
|
124
125
|
lineHeight: '20px',
|
|
125
126
|
display: 'flex',
|
|
126
127
|
alignItems: 'center',
|
|
127
128
|
justifyContent: 'center'
|
|
128
|
-
}), _define_property(_obj, "".concat(
|
|
129
|
+
}), _define_property(_obj, "".concat(componentCls, "-arrow"), {
|
|
129
130
|
flexShrink: 0,
|
|
130
131
|
width: 16,
|
|
131
132
|
height: 16,
|
|
@@ -133,7 +134,7 @@ var genStyle = function genStyle(token) {
|
|
|
133
134
|
}), _obj),
|
|
134
135
|
'&-body': _define_property({
|
|
135
136
|
display: 'flex'
|
|
136
|
-
}, "".concat(
|
|
137
|
+
}, "".concat(componentCls, "-content"), {
|
|
137
138
|
font: 'var(--font-text-paragraph-sm)',
|
|
138
139
|
marginLeft: 12,
|
|
139
140
|
display: 'flex',
|
|
@@ -141,7 +142,63 @@ var genStyle = function genStyle(token) {
|
|
|
141
142
|
gap: 2,
|
|
142
143
|
letterSpacing: 'var(--letter-spacing-paragraph-sm, normal)',
|
|
143
144
|
color: 'var(--color-gray-text-secondary)'
|
|
144
|
-
})
|
|
145
|
+
}),
|
|
146
|
+
// Simple variant - wrapper
|
|
147
|
+
'&-simple-wrapper': {
|
|
148
|
+
borderRadius: 'var(--radius-control-base, 8px)',
|
|
149
|
+
background: 'var(--color-gray-bg-page-dark, #f5f5f5)',
|
|
150
|
+
boxShadow: 'var(--shadow-control-base, none)',
|
|
151
|
+
overflow: 'hidden'
|
|
152
|
+
},
|
|
153
|
+
// Simple variant - bar
|
|
154
|
+
'&-simple': (_obj1 = {
|
|
155
|
+
display: 'flex',
|
|
156
|
+
alignItems: 'center',
|
|
157
|
+
height: 36,
|
|
158
|
+
padding: '0 12px',
|
|
159
|
+
gap: 8,
|
|
160
|
+
cursor: 'pointer',
|
|
161
|
+
userSelect: 'none',
|
|
162
|
+
transition: 'background 0.2s ease',
|
|
163
|
+
'&:hover': {
|
|
164
|
+
background: 'var(--color-gray-control-fill-active, rgba(0,0,0,0.04))'
|
|
165
|
+
}
|
|
166
|
+
}, _define_property(_obj1, "".concat(componentCls, "-simple-status"), _define_property({
|
|
167
|
+
display: 'flex',
|
|
168
|
+
alignItems: 'center',
|
|
169
|
+
flexShrink: 0
|
|
170
|
+
}, "".concat(componentCls, "-status"), {
|
|
171
|
+
height: 'auto',
|
|
172
|
+
svg: {
|
|
173
|
+
width: 14,
|
|
174
|
+
height: 14
|
|
175
|
+
}
|
|
176
|
+
})), _define_property(_obj1, "".concat(componentCls, "-simple-text"), {
|
|
177
|
+
flex: 1,
|
|
178
|
+
minWidth: 0,
|
|
179
|
+
font: 'var(--font-text-paragraph-base, 14px)',
|
|
180
|
+
letterSpacing: 'var(--letter-spacing-paragraph-base, normal)',
|
|
181
|
+
color: 'var(--color-gray-text-default, rgba(0,3,9,0.85))',
|
|
182
|
+
overflow: 'hidden',
|
|
183
|
+
textOverflow: 'ellipsis',
|
|
184
|
+
whiteSpace: 'nowrap'
|
|
185
|
+
}), _define_property(_obj1, "".concat(componentCls, "-simple-progress"), {
|
|
186
|
+
flexShrink: 0,
|
|
187
|
+
font: 'var(--font-text-paragraph-sm, 12px)',
|
|
188
|
+
color: 'var(--color-gray-text-secondary, rgba(0,3,9,0.45))'
|
|
189
|
+
}), _define_property(_obj1, "".concat(componentCls, "-simple-arrow"), {
|
|
190
|
+
flexShrink: 0,
|
|
191
|
+
display: 'flex',
|
|
192
|
+
alignItems: 'center',
|
|
193
|
+
justifyContent: 'center'
|
|
194
|
+
}), _obj1),
|
|
195
|
+
// Simple variant - expanded content
|
|
196
|
+
'&-simple-content': {
|
|
197
|
+
overflow: 'hidden'
|
|
198
|
+
},
|
|
199
|
+
'&-simple-list': {
|
|
200
|
+
padding: '4px 12px 8px'
|
|
201
|
+
}
|
|
145
202
|
});
|
|
146
203
|
};
|
|
147
204
|
export function useStyle(prefixCls) {
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type TaskStatus = 'success' | 'pending' | 'loading' | 'error';
|
|
3
|
+
export interface TaskItem {
|
|
4
|
+
key: string;
|
|
5
|
+
title?: React.ReactNode;
|
|
6
|
+
content: React.ReactNode | React.ReactNode[];
|
|
7
|
+
status: TaskStatus;
|
|
8
|
+
}
|
|
9
|
+
export type TaskListVariant = 'default' | 'simple';
|
|
10
|
+
export interface TaskListProps {
|
|
11
|
+
/** 任务列表数据 */
|
|
12
|
+
items: TaskItem[];
|
|
13
|
+
/** 自定义类名 */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** 受控模式:指定当前展开的任务项 key 数组 */
|
|
16
|
+
expandedKeys?: string[];
|
|
17
|
+
/** 受控模式:展开状态变化时的回调函数 */
|
|
18
|
+
onExpandedKeysChange?: (expandedKeys: string[]) => void;
|
|
19
|
+
/** 组件变体,simple 模式将任务列表收起为紧凑的单行摘要 */
|
|
20
|
+
variant?: TaskListVariant;
|
|
21
|
+
/** simple 模式下摘要条是否展开(受控) */
|
|
22
|
+
open?: boolean;
|
|
23
|
+
/** simple 模式下摘要条展开状态变化回调 */
|
|
24
|
+
onOpenChange?: (open: boolean) => void;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated @since 2.30.0 请使用 TaskListProps 替代
|
|
28
|
+
*/
|
|
29
|
+
export type ThoughtChainProps = TaskListProps;
|
package/dist/ToolUseBar/style.js
CHANGED
|
@@ -302,7 +302,12 @@ var genStyle = function genStyle(token) {
|
|
|
302
302
|
},
|
|
303
303
|
'&-tool-container': {
|
|
304
304
|
display: 'flex',
|
|
305
|
+
flexDirection: 'column',
|
|
305
306
|
width: '100%',
|
|
307
|
+
maxHeight: 700,
|
|
308
|
+
overflow: 'hidden',
|
|
309
|
+
overflowY: 'auto',
|
|
310
|
+
position: 'relative',
|
|
306
311
|
paddingInline: 4,
|
|
307
312
|
paddingBottom: 4,
|
|
308
313
|
'&-light': {
|
|
@@ -319,11 +324,7 @@ var genStyle = function genStyle(token) {
|
|
|
319
324
|
fontWeight: 'normal',
|
|
320
325
|
lineHeight: '160%',
|
|
321
326
|
letterSpacing: 'normal',
|
|
322
|
-
color: '#767E8B'
|
|
323
|
-
overflow: 'hidden',
|
|
324
|
-
display: '-webkit-box',
|
|
325
|
-
WebkitLineClamp: 5,
|
|
326
|
-
WebkitBoxOrient: 'vertical'
|
|
327
|
+
color: '#767E8B'
|
|
327
328
|
},
|
|
328
329
|
'&-tool-content-error': {
|
|
329
330
|
display: 'flex',
|