@tfdesign/b-end 1.0.4
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/AI_READ_FIRST.md +131 -0
- package/LICENSE +21 -0
- package/README.md +353 -0
- package/package.json +67 -0
- package/scripts/check-tfds-contract.mjs +334 -0
- package/scripts/check-tfds-integration.mjs +263 -0
- package/scripts/postinstall-cursor-skill.mjs +382 -0
- package/scripts/setup.mjs +520 -0
- package/skills/tfds/CHECKLIST.md +205 -0
- package/skills/tfds/COMMON_FAILURES.md +238 -0
- package/skills/tfds/DESIGN_PRINCIPLES.md +477 -0
- package/skills/tfds/GLOBAL_DESIGN_RULES.md +636 -0
- package/skills/tfds/LAYOUT_RECIPES.md +140 -0
- package/skills/tfds/LAYOUT_RULES.md +1355 -0
- package/skills/tfds/PAGE_ARCHETYPES.md +201 -0
- package/skills/tfds/SKILL.md +188 -0
- package/skills/tfds/components.index.json +7305 -0
- package/skills/tfds/components.summary.json +1809 -0
- package/src/_b_end_runtime/components/AiSuggestionShared.jsx +166 -0
- package/src/_b_end_runtime/components/Avatar.jsx +325 -0
- package/src/_b_end_runtime/components/Avatar.tokens.js +76 -0
- package/src/_b_end_runtime/components/AvatarGridPreview.jsx +56 -0
- package/src/_b_end_runtime/components/AvatarGroup.jsx +80 -0
- package/src/_b_end_runtime/components/AvatarGroup.tokens.js +28 -0
- package/src/_b_end_runtime/components/Button.jsx +144 -0
- package/src/_b_end_runtime/components/Button.tokens.js +90 -0
- package/src/_b_end_runtime/components/Card.jsx +460 -0
- package/src/_b_end_runtime/components/Card.tokens.js +124 -0
- package/src/_b_end_runtime/components/CardPreview.jsx +51 -0
- package/src/_b_end_runtime/components/ChatBubble.jsx +384 -0
- package/src/_b_end_runtime/components/ChatBubble.tokens.js +60 -0
- package/src/_b_end_runtime/components/ChatBubblePreview.jsx +129 -0
- package/src/_b_end_runtime/components/ChatInput.jsx +1399 -0
- package/src/_b_end_runtime/components/ChatInput.tokens.js +75 -0
- package/src/_b_end_runtime/components/ChatMessage.jsx +2215 -0
- package/src/_b_end_runtime/components/ChatMessage.tokens.js +257 -0
- package/src/_b_end_runtime/components/ChatMessagePreview.jsx +388 -0
- package/src/_b_end_runtime/components/Checkbox.jsx +317 -0
- package/src/_b_end_runtime/components/Checkbox.tokens.js +59 -0
- package/src/_b_end_runtime/components/ConversationList.jsx +1264 -0
- package/src/_b_end_runtime/components/ConversationList.tokens.js +135 -0
- package/src/_b_end_runtime/components/ConversationListPreview.jsx +108 -0
- package/src/_b_end_runtime/components/CustomerServiceWorkspaceFrame.jsx +324 -0
- package/src/_b_end_runtime/components/CustomerServiceWorkspaceFrame.tokens.js +69 -0
- package/src/_b_end_runtime/components/DatePicker.jsx +739 -0
- package/src/_b_end_runtime/components/DatePicker.tokens.js +99 -0
- package/src/_b_end_runtime/components/Empty.jsx +141 -0
- package/src/_b_end_runtime/components/Empty.tokens.js +40 -0
- package/src/_b_end_runtime/components/Form.jsx +609 -0
- package/src/_b_end_runtime/components/Form.tokens.js +77 -0
- package/src/_b_end_runtime/components/FormFieldStack.jsx +123 -0
- package/src/_b_end_runtime/components/FormFieldStack.tokens.js +12 -0
- package/src/_b_end_runtime/components/FormTitle.jsx +119 -0
- package/src/_b_end_runtime/components/FormTitle.tokens.js +87 -0
- package/src/_b_end_runtime/components/FullScreenPage.jsx +97 -0
- package/src/_b_end_runtime/components/FullScreenPage.tokens.js +19 -0
- package/src/_b_end_runtime/components/Icon.jsx +172 -0
- package/src/_b_end_runtime/components/Icon.tokens.js +26 -0
- package/src/_b_end_runtime/components/IconGridPreview.jsx +277 -0
- package/src/_b_end_runtime/components/InfoDisplayPanel.jsx +620 -0
- package/src/_b_end_runtime/components/InfoDisplayPanel.tokens.js +71 -0
- package/src/_b_end_runtime/components/InfoDisplayPanelPreview.jsx +133 -0
- package/src/_b_end_runtime/components/Input.jsx +258 -0
- package/src/_b_end_runtime/components/Input.tokens.js +68 -0
- package/src/_b_end_runtime/components/InputNumber.jsx +242 -0
- package/src/_b_end_runtime/components/InputNumber.tokens.js +55 -0
- package/src/_b_end_runtime/components/Modal.jsx +155 -0
- package/src/_b_end_runtime/components/Modal.tokens.js +73 -0
- package/src/_b_end_runtime/components/NavBar.jsx +842 -0
- package/src/_b_end_runtime/components/NavBar.tokens.js +97 -0
- package/src/_b_end_runtime/components/NavBarPreview.jsx +11 -0
- package/src/_b_end_runtime/components/Radio.jsx +227 -0
- package/src/_b_end_runtime/components/Radio.tokens.js +59 -0
- package/src/_b_end_runtime/components/Select.jsx +766 -0
- package/src/_b_end_runtime/components/Select.tokens.js +99 -0
- package/src/_b_end_runtime/components/Sheet.jsx +132 -0
- package/src/_b_end_runtime/components/Sheet.tokens.js +61 -0
- package/src/_b_end_runtime/components/Slider.jsx +346 -0
- package/src/_b_end_runtime/components/Slider.tokens.js +47 -0
- package/src/_b_end_runtime/components/Switch.jsx +124 -0
- package/src/_b_end_runtime/components/Switch.tokens.js +38 -0
- package/src/_b_end_runtime/components/Table.jsx +1338 -0
- package/src/_b_end_runtime/components/Table.tokens.js +147 -0
- package/src/_b_end_runtime/components/TablePreview.jsx +599 -0
- package/src/_b_end_runtime/components/Tabs.jsx +149 -0
- package/src/_b_end_runtime/components/Tabs.tokens.js +102 -0
- package/src/_b_end_runtime/components/Tag.jsx +199 -0
- package/src/_b_end_runtime/components/Tag.tokens.js +171 -0
- package/src/_b_end_runtime/components/TagBar.jsx +1134 -0
- package/src/_b_end_runtime/components/TagBar.tokens.js +75 -0
- package/src/_b_end_runtime/components/TagGridPreview.jsx +23 -0
- package/src/_b_end_runtime/components/TagInput.jsx +382 -0
- package/src/_b_end_runtime/components/TagInput.tokens.js +52 -0
- package/src/_b_end_runtime/components/TextArea.jsx +363 -0
- package/src/_b_end_runtime/components/TextArea.tokens.js +65 -0
- package/src/_b_end_runtime/components/TimePicker.jsx +444 -0
- package/src/_b_end_runtime/components/TimePicker.tokens.js +77 -0
- package/src/_b_end_runtime/components/Toast.jsx +120 -0
- package/src/_b_end_runtime/components/Toast.tokens.js +146 -0
- package/src/_b_end_runtime/components/Tooltip.jsx +282 -0
- package/src/_b_end_runtime/components/Tooltip.tokens.js +48 -0
- package/src/_b_end_runtime/components/TooltipPreview.jsx +50 -0
- package/src/_b_end_runtime/components/Upload.jsx +455 -0
- package/src/_b_end_runtime/components/Upload.tokens.js +47 -0
- package/src/_b_end_runtime/components/avatar-assets/avatar-default.png +0 -0
- package/src/_b_end_runtime/components/avatar-group-assets/avatar-group-1.png +0 -0
- package/src/_b_end_runtime/components/avatar-group-assets/avatar-group-2.png +0 -0
- package/src/_b_end_runtime/components/avatar-group-assets/avatar-group-3.png +0 -0
- package/src/_b_end_runtime/components/avatar-group-assets/avatar-group-4.png +0 -0
- package/src/_b_end_runtime/components/avatar-group-assets/avatar-group-5.png +0 -0
- package/src/_b_end_runtime/components/empty-assets/administrator-1.svg +40 -0
- package/src/_b_end_runtime/components/empty-assets/administrator-2.svg +33 -0
- package/src/_b_end_runtime/components/empty-assets/construction.svg +33 -0
- package/src/_b_end_runtime/components/empty-assets/failure.svg +49 -0
- package/src/_b_end_runtime/components/empty-assets/idle.svg +34 -0
- package/src/_b_end_runtime/components/empty-assets/no-access.svg +36 -0
- package/src/_b_end_runtime/components/empty-assets/no-content.svg +77 -0
- package/src/_b_end_runtime/components/empty-assets/no-result.svg +61 -0
- package/src/_b_end_runtime/components/empty-assets/not-found.svg +46 -0
- package/src/_b_end_runtime/components/empty-assets/success.svg +38 -0
- package/src/_b_end_runtime/components/file-type-assets/batch-report.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/catcat.svg +21 -0
- package/src/_b_end_runtime/components/file-type-assets/code.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/conversation.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/document.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/feishu-card.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/feishu-sheet.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/feishu.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/image.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/index.js +105 -0
- package/src/_b_end_runtime/components/file-type-assets/knowledge.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/pdf.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/pe.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/strategy.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/table.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/webpage.png +0 -0
- package/src/_b_end_runtime/components/file-type-assets/xmind.png +0 -0
- package/src/_b_end_runtime/components/icons/icon-data.js +12496 -0
- package/src/_b_end_runtime/components/nav-bar-assets/bytehi-logo-mark.svg +21 -0
- package/src/_b_end_runtime/components/table-assets/avatar.png +0 -0
- package/src/_b_end_runtime/components/table-assets/button.png +0 -0
- package/src/_b_end_runtime/components/table-assets/icon-chevron-down.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/avatar.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/button.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/checkbox.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/icon-chevron-right.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/icon.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/semi-icons-handle.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/semi-icons-tree-triangle-right.png +0 -0
- package/src/_b_end_runtime/components/table-cell-assets/switch.png +0 -0
- package/src/_b_end_runtime/components/tagShared.js +3 -0
- package/src/_b_end_runtime/components/team-avatar-assets/chengcheng-murphy.png +0 -0
- package/src/_b_end_runtime/components/team-avatar-assets/duan-ran.png +0 -0
- package/src/_b_end_runtime/components/team-avatar-assets/guo-zhezhi.png +0 -0
- package/src/_b_end_runtime/components/team-avatar-assets/li-siru.png +0 -0
- package/src/_b_end_runtime/components/team-avatar-assets/liu-delin.png +0 -0
- package/src/_b_end_runtime/components.js +3499 -0
- package/src/_b_end_runtime/index.js +9 -0
- package/src/_b_end_runtime/page-patterns/BasePageFramePattern.jsx +395 -0
- package/src/_b_end_runtime/page-patterns/ChatConversationPattern.jsx +989 -0
- package/src/_b_end_runtime/page-patterns/ChatHomePagePattern.jsx +281 -0
- package/src/_b_end_runtime/page-patterns/CopilotPagePattern.jsx +380 -0
- package/src/_b_end_runtime/page-patterns/CustomerServiceWorkspaceFramePattern.jsx +392 -0
- package/src/_b_end_runtime/page-patterns/IMConversationPattern.jsx +590 -0
- package/src/_b_end_runtime/page-patterns/McpManagementPage.jsx +237 -0
- package/src/_b_end_runtime/page-patterns/StrategyListPage.jsx +189 -0
- package/src/_b_end_runtime/page-patterns/TabTopBarListPage.jsx +594 -0
- package/src/_b_end_runtime/page-patterns/VariableManagementPage.jsx +87 -0
- package/src/_b_end_runtime/page-patterns/pageListShared.jsx +177 -0
- package/src/_b_end_runtime/patterns.js +428 -0
- package/src/_b_end_runtime/preview-registry.jsx +4719 -0
- package/src/_b_end_runtime/teamMembers.js +56 -0
- package/src/_b_end_runtime/tokens.js +500 -0
- package/src/index.d.ts +1073 -0
- package/src/index.js +52 -0
- package/theme.css +350 -0
package/src/index.d.ts
ADDED
|
@@ -0,0 +1,1073 @@
|
|
|
1
|
+
/* Auto-generated by scripts/generate-tfds-b-end-types.mjs — DO NOT EDIT */
|
|
2
|
+
import type * as React from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 所有 TFDS 组件共享的通用 HTML / React 属性。
|
|
6
|
+
* 提供 className / style / id / aria-* / data-* / onClick 等基础能力,
|
|
7
|
+
* 业务组件可以在此之上扩展自身专属 props。
|
|
8
|
+
*/
|
|
9
|
+
export interface TfdsCommonProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
|
|
10
|
+
className?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/** Avatar — 单个实体(人/机器人/AI/兜底)的头像锚点。用于表格、会话、导航等需要「一眼认出是谁」的位置;不用于多人交叠缩略(那是 AvatarGroup)。 */
|
|
16
|
+
export interface AvatarProps extends TfdsCommonProps {
|
|
17
|
+
/** enum<round | rect>, default: "round" */
|
|
18
|
+
shape?: "round" | "rect";
|
|
19
|
+
/** enum<xxs | mini | xs | s | default | m>, default: "default" */
|
|
20
|
+
size?: "xxs" | "mini" | "xs" | "s" | "default" | "m";
|
|
21
|
+
/** enum<image | eng | ch | fallback | robot | ai>, default: "image" */
|
|
22
|
+
type?: "image" | "eng" | "ch" | "fallback" | "robot" | "ai";
|
|
23
|
+
/** string, default: null */
|
|
24
|
+
src?: string;
|
|
25
|
+
/** string, default: null */
|
|
26
|
+
label?: string;
|
|
27
|
+
/** string, default: "头像" */
|
|
28
|
+
alt?: string;
|
|
29
|
+
}
|
|
30
|
+
export const Avatar: React.FC<AvatarProps>;
|
|
31
|
+
|
|
32
|
+
/** AvatarGroup — 多人参与的缩略表达:固定 5 个圆形图片头像、固定交叠间距,用于「协作成员、围观者」等氛围装饰。需要可配置人数/顺序/文案时请用列表 + 多个 Avatar,不要用本组件硬凑。 */
|
|
33
|
+
export interface AvatarGroupProps extends TfdsCommonProps {
|
|
34
|
+
/** enum<s | default | m>, default: "s" */
|
|
35
|
+
size?: "s" | "default" | "m";
|
|
36
|
+
}
|
|
37
|
+
export const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
38
|
+
|
|
39
|
+
/** Icon — 矢量符号(1198+ 图标名)。用于按钮/输入框前后缀、导航、状态提示等「非人像」图形;需要人像或账号识别请用 Avatar,需要文字标签请用 Button/Tag。 */
|
|
40
|
+
export interface IconProps extends TfdsCommonProps {
|
|
41
|
+
/** string, default: "check-stroked" */
|
|
42
|
+
name?: string;
|
|
43
|
+
/** enum<xs | sm | md | lg | xl>, default: "sm" */
|
|
44
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
45
|
+
/** string, default: "currentColor" */
|
|
46
|
+
color?: string;
|
|
47
|
+
}
|
|
48
|
+
export const Icon: React.FC<IconProps>;
|
|
49
|
+
|
|
50
|
+
/** NavBar — 业务竖向导航栏,集成品牌区、业务入口切换、平台首页模块高亮、主导航、底部工具按钮和用户头像。 */
|
|
51
|
+
export interface NavBarProps extends TfdsCommonProps {
|
|
52
|
+
/** enum<ola | bytehi>, default: "ola" */
|
|
53
|
+
platform?: "ola" | "bytehi";
|
|
54
|
+
/** string, default: "" */
|
|
55
|
+
promptText?: string;
|
|
56
|
+
/** string, default: "OLA" */
|
|
57
|
+
brandName?: string;
|
|
58
|
+
/** string, default: "抖音社区" */
|
|
59
|
+
appLabel?: string;
|
|
60
|
+
/** array, default: null */
|
|
61
|
+
appBusinesses?: unknown[];
|
|
62
|
+
/** string */
|
|
63
|
+
currentAppId?: string;
|
|
64
|
+
/** string, default: null */
|
|
65
|
+
defaultAppId?: string;
|
|
66
|
+
/** function, default: null */
|
|
67
|
+
onAppChange?: (...args: any[]) => any;
|
|
68
|
+
/** string, default: "平台首页" */
|
|
69
|
+
moduleLabel?: string;
|
|
70
|
+
/** boolean, default: true */
|
|
71
|
+
activeModule?: boolean;
|
|
72
|
+
/** array, default: null */
|
|
73
|
+
navItems?: unknown[];
|
|
74
|
+
/** string, default: null */
|
|
75
|
+
activeNavId?: string;
|
|
76
|
+
/** string, default: null */
|
|
77
|
+
activeUtilityId?: string;
|
|
78
|
+
/** string, default: null */
|
|
79
|
+
selectedItemId?: string;
|
|
80
|
+
/** string, default: null */
|
|
81
|
+
defaultSelectedItemId?: string;
|
|
82
|
+
/** boolean, default: false */
|
|
83
|
+
showUtilityActions?: boolean;
|
|
84
|
+
/** array, default: null */
|
|
85
|
+
utilityItems?: unknown[];
|
|
86
|
+
/** function, default: null */
|
|
87
|
+
onSelect?: (...args: any[]) => any;
|
|
88
|
+
/** enum<image | robot | fallback>, default: "image" */
|
|
89
|
+
avatarType?: "image" | "robot" | "fallback";
|
|
90
|
+
/** string, default: null */
|
|
91
|
+
avatarSrc?: string;
|
|
92
|
+
/** string, default: "当前用户头像" */
|
|
93
|
+
avatarAlt?: string;
|
|
94
|
+
}
|
|
95
|
+
export const NavBar: React.FC<NavBarProps>;
|
|
96
|
+
|
|
97
|
+
/** TagBar — 业务标签栏,集成顶部搜索、业务切换、树形标签与最小宽度折叠,适合服务平台左侧标签导航场景。 */
|
|
98
|
+
export interface TagBarProps extends TfdsCommonProps {
|
|
99
|
+
/** array, default: null */
|
|
100
|
+
businesses?: unknown[];
|
|
101
|
+
/** string */
|
|
102
|
+
currentBusinessId?: string;
|
|
103
|
+
/** string, default: null */
|
|
104
|
+
defaultBusinessId?: string;
|
|
105
|
+
/** function, default: null */
|
|
106
|
+
onBusinessChange?: (...args: any[]) => any;
|
|
107
|
+
/** array, default: null */
|
|
108
|
+
items?: unknown[];
|
|
109
|
+
/** string */
|
|
110
|
+
selectedItemId?: string;
|
|
111
|
+
/** string, default: null */
|
|
112
|
+
defaultSelectedItemId?: string;
|
|
113
|
+
/** function, default: null */
|
|
114
|
+
onSelect?: (...args: any[]) => any;
|
|
115
|
+
/** array, default: null */
|
|
116
|
+
expandedIds?: unknown[];
|
|
117
|
+
/** array, default: null */
|
|
118
|
+
defaultExpandedIds?: unknown[];
|
|
119
|
+
/** function, default: null */
|
|
120
|
+
onExpandedChange?: (...args: any[]) => any;
|
|
121
|
+
/** boolean, default: true */
|
|
122
|
+
searchable?: boolean;
|
|
123
|
+
/** string */
|
|
124
|
+
searchValue?: string;
|
|
125
|
+
/** string, default: "" */
|
|
126
|
+
defaultSearchValue?: string;
|
|
127
|
+
/** function, default: null */
|
|
128
|
+
onSearchChange?: (...args: any[]) => any;
|
|
129
|
+
/** boolean, default: true */
|
|
130
|
+
collapsible?: boolean;
|
|
131
|
+
/** boolean */
|
|
132
|
+
collapsed?: boolean;
|
|
133
|
+
/** boolean, default: false */
|
|
134
|
+
defaultCollapsed?: boolean;
|
|
135
|
+
/** function, default: null */
|
|
136
|
+
onCollapsedChange?: (...args: any[]) => any;
|
|
137
|
+
/** enum<transparent | panel>, default: "transparent" */
|
|
138
|
+
tone?: "transparent" | "panel";
|
|
139
|
+
/** boolean, default: true */
|
|
140
|
+
resizable?: boolean;
|
|
141
|
+
/** number */
|
|
142
|
+
width?: number;
|
|
143
|
+
/** number, default: 240 */
|
|
144
|
+
defaultWidth?: number;
|
|
145
|
+
/** number, default: 160 */
|
|
146
|
+
minWidth?: number;
|
|
147
|
+
/** number, default: 360 */
|
|
148
|
+
maxWidth?: number;
|
|
149
|
+
/** number, default: 130 */
|
|
150
|
+
collapseThreshold?: number;
|
|
151
|
+
/** function, default: null */
|
|
152
|
+
onWidthChange?: (...args: any[]) => any;
|
|
153
|
+
}
|
|
154
|
+
export const TagBar: React.FC<TagBarProps>;
|
|
155
|
+
|
|
156
|
+
/** Card — 业务信息摘要卡片,支持数据卡片、商品卡片和信息卡片三类结构。颜色使用遵循背景反衬原则:灰色背景用白底卡,白色背景用灰底卡。 */
|
|
157
|
+
export interface CardProps extends TfdsCommonProps {
|
|
158
|
+
/** enum<data | product | info>, default: "data" */
|
|
159
|
+
type?: "data" | "product" | "info";
|
|
160
|
+
/** enum<white | grey>, default: "white" */
|
|
161
|
+
color?: "white" | "grey";
|
|
162
|
+
/** string, default: "智能服务近7天趋势分析" */
|
|
163
|
+
title?: string;
|
|
164
|
+
/** string, default: "针对指定业务场景下智能服务核心指标、运行路径、渠道等进行趋势分析,并输出总结报告" */
|
|
165
|
+
description?: string;
|
|
166
|
+
/** array, default: null */
|
|
167
|
+
stats?: unknown[];
|
|
168
|
+
/** array, default: null */
|
|
169
|
+
tags?: unknown[];
|
|
170
|
+
/** string, default: "已使用" */
|
|
171
|
+
productStatus?: string;
|
|
172
|
+
/** string, default: null */
|
|
173
|
+
productImageSrc?: string;
|
|
174
|
+
/** string, default: "商品图" */
|
|
175
|
+
productImageAlt?: string;
|
|
176
|
+
/** string, default: "magic-wand-01-stroked" */
|
|
177
|
+
infoIconName?: string;
|
|
178
|
+
/** enum<pink | blue | green | orange | purple | brand | grey>, default: "pink" */
|
|
179
|
+
infoIconTone?: "pink" | "blue" | "green" | "orange" | "purple" | "brand" | "grey";
|
|
180
|
+
/** enum<tone | inverse>, default: "inverse" */
|
|
181
|
+
infoIconStyle?: "tone" | "inverse";
|
|
182
|
+
/** enum<default | icon-right>, default: "icon-right" */
|
|
183
|
+
infoLayout?: "default" | "icon-right";
|
|
184
|
+
/** enum<hidden | visible>, default: "hidden" */
|
|
185
|
+
dataIconVisible?: "hidden" | "visible";
|
|
186
|
+
/** string, default: "edit-04-stroked" */
|
|
187
|
+
dataIconName?: string;
|
|
188
|
+
/** enum<pink | blue | green | orange | purple | brand | grey>, default: "blue" */
|
|
189
|
+
dataIconTone?: "pink" | "blue" | "green" | "orange" | "purple" | "brand" | "grey";
|
|
190
|
+
/** enum<tone | inverse>, default: "inverse" */
|
|
191
|
+
dataIconStyle?: "tone" | "inverse";
|
|
192
|
+
/** string, default: "段然" */
|
|
193
|
+
infoMetaLabel?: string;
|
|
194
|
+
/** string, default: "官方能力" */
|
|
195
|
+
infoMetaBadge?: string;
|
|
196
|
+
/** enum<brand | red | orange | yellow | green | cyan | blue | purple | pink | teal | grey | white | ai>, default: null */
|
|
197
|
+
infoMetaBadgeVariant?: "brand" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "pink" | "teal" | "grey" | "white" | "ai";
|
|
198
|
+
/** string, default: null */
|
|
199
|
+
infoMetaAvatarSrc?: string;
|
|
200
|
+
/** string, default: "用户头像" */
|
|
201
|
+
infoMetaAvatarAlt?: string;
|
|
202
|
+
/** array, default: null */
|
|
203
|
+
infoStats?: unknown[];
|
|
204
|
+
/** function, default: null */
|
|
205
|
+
onAction?: (...args: any[]) => any;
|
|
206
|
+
/** string, default: "查看卡片详情" */
|
|
207
|
+
actionAriaLabel?: string;
|
|
208
|
+
}
|
|
209
|
+
export const Card: React.FC<CardProps>;
|
|
210
|
+
|
|
211
|
+
/** ConversationList — 会话 / 工单 / 线程侧栏列表,用于 IM 对话、即时通讯工作台、客服接待、工单处理、托管队列等需要按状态分组浏览并快速切换当前处理线程的业务场景,默认支持“默认列表 / 卡片列表”双布局切换。 */
|
|
212
|
+
export interface ConversationListProps extends TfdsCommonProps {
|
|
213
|
+
/** enum<default | card>, default: "default" */
|
|
214
|
+
variant?: "default" | "card";
|
|
215
|
+
/** enum<default | card>, default: "default" */
|
|
216
|
+
defaultVariant?: "default" | "card";
|
|
217
|
+
/** function, default: null */
|
|
218
|
+
onVariantChange?: (...args: any[]) => any;
|
|
219
|
+
/** string, default: "会话列表" */
|
|
220
|
+
title?: string;
|
|
221
|
+
/** array, default: null */
|
|
222
|
+
tabs?: unknown[];
|
|
223
|
+
/** string, default: null */
|
|
224
|
+
activeTab?: string;
|
|
225
|
+
/** string, default: "all" */
|
|
226
|
+
defaultActiveTab?: string;
|
|
227
|
+
/** function, default: null */
|
|
228
|
+
onTabChange?: (...args: any[]) => any;
|
|
229
|
+
/** array, default: null */
|
|
230
|
+
sections?: unknown[];
|
|
231
|
+
/** string, default: null */
|
|
232
|
+
activeItemId?: string;
|
|
233
|
+
/** string, default: null */
|
|
234
|
+
defaultActiveItemId?: string;
|
|
235
|
+
/** function, default: null */
|
|
236
|
+
onItemClick?: (...args: any[]) => any;
|
|
237
|
+
/** function, default: null */
|
|
238
|
+
onSend?: (...args: any[]) => any;
|
|
239
|
+
/** boolean, default: true */
|
|
240
|
+
showActions?: boolean;
|
|
241
|
+
/** boolean, default: true */
|
|
242
|
+
showLayoutToggle?: boolean;
|
|
243
|
+
/** boolean, default: true */
|
|
244
|
+
resizable?: boolean;
|
|
245
|
+
/** boolean, default: true */
|
|
246
|
+
collapsible?: boolean;
|
|
247
|
+
/** boolean, default: true */
|
|
248
|
+
autoCollapseOnNarrow?: boolean;
|
|
249
|
+
/** function, default: null */
|
|
250
|
+
onLayoutWidthRequest?: (...args: any[]) => any;
|
|
251
|
+
}
|
|
252
|
+
export const ConversationList: React.FC<ConversationListProps>;
|
|
253
|
+
|
|
254
|
+
/** InfoDisplayPanel — 信息展示面板框架,用于客服工作台、在线 Agent、工单详情右侧信息区等场景;默认以主栏承载全部 tabs,并可按当前选中 tab 拆分出独立栏,最多支持 3 栏。 */
|
|
255
|
+
export interface InfoDisplayPanelProps extends TfdsCommonProps {
|
|
256
|
+
/** array, default: null */
|
|
257
|
+
panels?: unknown[];
|
|
258
|
+
/** number, default: null */
|
|
259
|
+
columnCount?: number;
|
|
260
|
+
/** number, default: 3 */
|
|
261
|
+
defaultColumnCount?: number;
|
|
262
|
+
/** function, default: null */
|
|
263
|
+
onColumnCountChange?: (...args: any[]) => any;
|
|
264
|
+
/** number, default: 200 */
|
|
265
|
+
minPanelWidth?: number;
|
|
266
|
+
/** object, default: null */
|
|
267
|
+
activeTabs?: Record<string, unknown>;
|
|
268
|
+
/** object, default: null */
|
|
269
|
+
defaultActiveTabs?: Record<string, unknown>;
|
|
270
|
+
/** function, default: null */
|
|
271
|
+
onTabChange?: (...args: any[]) => any;
|
|
272
|
+
/** function, default: null */
|
|
273
|
+
onSplitChange?: (...args: any[]) => any;
|
|
274
|
+
/** function, default: null */
|
|
275
|
+
renderPanelContent?: (...args: any[]) => any;
|
|
276
|
+
}
|
|
277
|
+
export const InfoDisplayPanel: React.FC<InfoDisplayPanelProps>;
|
|
278
|
+
|
|
279
|
+
/** ChatBubble — IM 聊天气泡,支持左右 2 种角色布局、单条/多条 2 种气泡组织,以及图片/机器人/AI/隐藏 4 种头像类型,并支持 hover 查看分层消息时间。 */
|
|
280
|
+
export interface ChatBubbleProps extends TfdsCommonProps {
|
|
281
|
+
/** enum<incoming | outgoing>, default: "incoming" */
|
|
282
|
+
variant?: "incoming" | "outgoing";
|
|
283
|
+
/** enum<single | multiple>, default: "single" */
|
|
284
|
+
layout?: "single" | "multiple";
|
|
285
|
+
/** enum<image | robot | ai | none>, default: "none" */
|
|
286
|
+
avatarType?: "image" | "robot" | "ai" | "none";
|
|
287
|
+
/** enum<default | large>, default: "large" */
|
|
288
|
+
size?: "default" | "large";
|
|
289
|
+
/** enum<default | white | grey | ai>, default: "default" */
|
|
290
|
+
incomingTone?: "default" | "white" | "grey" | "ai";
|
|
291
|
+
/** enum<default | white | grey | ai>, default: "white" */
|
|
292
|
+
outgoingTone?: "default" | "white" | "grey" | "ai";
|
|
293
|
+
/** enum<hidden | read>, default: "hidden" */
|
|
294
|
+
receipt?: "hidden" | "read";
|
|
295
|
+
/** array, default: null */
|
|
296
|
+
messages?: unknown[];
|
|
297
|
+
/** array, default: null */
|
|
298
|
+
timestamps?: unknown[];
|
|
299
|
+
/** string, default: null */
|
|
300
|
+
avatarSrc?: string;
|
|
301
|
+
/** string, default: "头像" */
|
|
302
|
+
avatarAlt?: string;
|
|
303
|
+
}
|
|
304
|
+
export const ChatBubble: React.FC<ChatBubbleProps>;
|
|
305
|
+
|
|
306
|
+
/** ChatInput — 对话/消息发送输入框,统一覆盖所有「输入内容并发出」场景。变体选择只看一个维度——UI 上是否有 Agent/工具栏:有(Agent 切换 / @ / 指令 / 附件)→ default;没有 → im-basic。im-basic(基础输入框)是使用频率最高的变体,适用范围:IM 消息输入、会话底部发送栏、评论框、工单回复、模型 Playground 发送栏(type prompt → 「发送并运行模型」)、任何 user/assistant 测试界面。default/default-sm/replying/busy/readonly 专用于内置完整 AI 工具栏的 Agent 对话场景(三层结构:底层氛围背景 → 输入区域 → 猫条)。im-basic 左下角按钮通过声明式 `imActions` 场景化配置,默认是图片 + 表情,最多展示 5 个。 */
|
|
307
|
+
export interface ChatInputProps extends TfdsCommonProps {
|
|
308
|
+
/** enum<default-sm | default | im-basic | replying | busy | readonly>, default: "default" */
|
|
309
|
+
variant?: "default-sm" | "default" | "im-basic" | "replying" | "busy" | "readonly";
|
|
310
|
+
/** string, default: "Auto" */
|
|
311
|
+
agentName?: string;
|
|
312
|
+
/** array, default: "内置 5 个示例 Agent" */
|
|
313
|
+
agentOptions?: unknown[];
|
|
314
|
+
/** array, default: "内置 5 个示例 Mention" */
|
|
315
|
+
mentionOptions?: unknown[];
|
|
316
|
+
/** array, default: "内置 4 个示例 Command" */
|
|
317
|
+
commandOptions?: unknown[];
|
|
318
|
+
/** string, default: "*" */
|
|
319
|
+
acceptFiles?: string;
|
|
320
|
+
/** boolean, default: true */
|
|
321
|
+
multipleFiles?: boolean;
|
|
322
|
+
/** string, default: null */
|
|
323
|
+
catBarText?: string;
|
|
324
|
+
/** node, default: null */
|
|
325
|
+
catBarIcon?: React.ReactNode;
|
|
326
|
+
/** string, default: "需要我为你做什么" */
|
|
327
|
+
placeholder?: string;
|
|
328
|
+
/** string, default: null */
|
|
329
|
+
statusText?: string;
|
|
330
|
+
/** string, default: null */
|
|
331
|
+
actionText?: string;
|
|
332
|
+
/** function, default: null */
|
|
333
|
+
onSend?: (...args: any[]) => any;
|
|
334
|
+
/** function, default: null */
|
|
335
|
+
onStop?: (...args: any[]) => any;
|
|
336
|
+
/** function, default: null */
|
|
337
|
+
onAction?: (...args: any[]) => any;
|
|
338
|
+
/** function, default: null */
|
|
339
|
+
onAgentChange?: (...args: any[]) => any;
|
|
340
|
+
/** function, default: null */
|
|
341
|
+
onMentionsChange?: (...args: any[]) => any;
|
|
342
|
+
/** function, default: null */
|
|
343
|
+
onCommandsChange?: (...args: any[]) => any;
|
|
344
|
+
/** function, default: null */
|
|
345
|
+
onAttachmentsChange?: (...args: any[]) => any;
|
|
346
|
+
/** array, default: "仅 im-basic 生效;默认图片+表情,最多展示 5 个" */
|
|
347
|
+
imActions?: unknown[];
|
|
348
|
+
/** function, default: null */
|
|
349
|
+
onImImageClick?: (...args: any[]) => any;
|
|
350
|
+
/** function, default: null */
|
|
351
|
+
onImEmojiClick?: (...args: any[]) => any;
|
|
352
|
+
/** node, default: null */
|
|
353
|
+
toolbar?: React.ReactNode;
|
|
354
|
+
}
|
|
355
|
+
export const ChatInput: React.FC<ChatInputProps>;
|
|
356
|
+
|
|
357
|
+
/** ChatMessage — AI 对话页「一条消息」原子单元(行业对齐 assistant-ui Message / Microsoft ChatMessage)。一个 ChatMessage = 一条消息(user 气泡 / AI 头像 / 文本回复 / 执行流 / 卡片回复 / 深度思考 / 操作栏),按 role 与 7 类子能力组合呈现。 */
|
|
358
|
+
export interface ChatMessageProps extends TfdsCommonProps {
|
|
359
|
+
/** string, default: "ai" */
|
|
360
|
+
role?: string;
|
|
361
|
+
/** string, default: "" */
|
|
362
|
+
timestamp?: string;
|
|
363
|
+
/** object|boolean, default: null */
|
|
364
|
+
header?: unknown;
|
|
365
|
+
/** object, default: null */
|
|
366
|
+
thinking?: Record<string, unknown>;
|
|
367
|
+
/** string, default: "" */
|
|
368
|
+
leadText?: string;
|
|
369
|
+
/** object, default: null */
|
|
370
|
+
plan?: Record<string, unknown>;
|
|
371
|
+
/** string, default: "梳理抖音电商客服售后退换货政策并生成标准答复口径" */
|
|
372
|
+
title?: string;
|
|
373
|
+
/** string, default: "completed" */
|
|
374
|
+
status?: string;
|
|
375
|
+
/** string, default: "check-circle-stroked" */
|
|
376
|
+
statusIconName?: string;
|
|
377
|
+
/** array, default: null */
|
|
378
|
+
steps?: unknown[];
|
|
379
|
+
/** array, default: null */
|
|
380
|
+
taskGroups?: unknown[];
|
|
381
|
+
/** string, default: "" */
|
|
382
|
+
resultText?: string;
|
|
383
|
+
/** array, default: null */
|
|
384
|
+
resultArtifacts?: unknown[];
|
|
385
|
+
/** array, default: null */
|
|
386
|
+
confirms?: unknown[];
|
|
387
|
+
/** string, default: null */
|
|
388
|
+
taskBadge?: string;
|
|
389
|
+
/** array|object, default: null */
|
|
390
|
+
followUps?: unknown;
|
|
391
|
+
/** object|boolean, default: null */
|
|
392
|
+
actions?: unknown;
|
|
393
|
+
/** array, default: null */
|
|
394
|
+
userContent?: unknown[];
|
|
395
|
+
/** array, default: null */
|
|
396
|
+
userAttachments?: unknown[];
|
|
397
|
+
/** object, default: null */
|
|
398
|
+
userQuote?: Record<string, unknown>;
|
|
399
|
+
/** enum<auto | surface | fill>, default: "auto" */
|
|
400
|
+
userBubbleTone?: "auto" | "surface" | "fill";
|
|
401
|
+
/** boolean, default: true */
|
|
402
|
+
defaultExpanded?: boolean;
|
|
403
|
+
/** boolean, default: undefined */
|
|
404
|
+
expanded?: boolean;
|
|
405
|
+
/** function, default: null */
|
|
406
|
+
onExpandedChange?: (...args: any[]) => any;
|
|
407
|
+
}
|
|
408
|
+
export const ChatMessage: React.FC<ChatMessageProps>;
|
|
409
|
+
|
|
410
|
+
/** Button — 触发一次性动作(提交、取消、打开弹窗、行内「编辑/删除」)。不负责在同一视图内切换多块内容(那是 Tabs);不负责从枚举里选题(那是 Select/Radio)。primary 为每视图唯一主按钮(黑底)。⚠️ 尺寸硬规则:全局默认 size="md"(36px),AI 生成页面时禁止擅自使用 size="sm",仅在设计明确标注或卡片空间极度受限时才可使用 SM。 */
|
|
411
|
+
export interface ButtonProps extends TfdsCommonProps {
|
|
412
|
+
/** enum<primary | outline-brand | outline-black | ghost-brand | ghost-black | text-brand | text-black>, default: "primary" */
|
|
413
|
+
variant?: "primary" | "outline-brand" | "outline-black" | "ghost-brand" | "ghost-black" | "text-brand" | "text-black";
|
|
414
|
+
/** enum<sm | md>, default: "md" */
|
|
415
|
+
size?: "sm" | "md";
|
|
416
|
+
/** enum<rounded | full>, default: "rounded" */
|
|
417
|
+
radius?: "rounded" | "full";
|
|
418
|
+
/** node, default: null */
|
|
419
|
+
icon?: React.ReactNode;
|
|
420
|
+
/** boolean, default: false */
|
|
421
|
+
iconOnly?: boolean;
|
|
422
|
+
/** node, default: null */
|
|
423
|
+
tooltip?: React.ReactNode;
|
|
424
|
+
/** boolean, default: false */
|
|
425
|
+
disabled?: boolean;
|
|
426
|
+
/** boolean, default: false */
|
|
427
|
+
loading?: boolean;
|
|
428
|
+
}
|
|
429
|
+
export const Button: React.FC<ButtonProps>;
|
|
430
|
+
|
|
431
|
+
/** Tabs — 同一页面或同一卡片内,多块平级内容的切换(视图状态保持在本页)。典型:详情子页签、表单分段、筛选维度切换。跨模块站点级导航优先侧栏/路由,而不是 Tabs 堆满一级入口。 */
|
|
432
|
+
export interface TabsProps extends TfdsCommonProps {
|
|
433
|
+
/** enum<line | button | pill | segment>, default: "line" */
|
|
434
|
+
variant?: "line" | "button" | "pill" | "segment";
|
|
435
|
+
/** enum<sm | md | lg>, default: "sm" */
|
|
436
|
+
size?: "sm" | "md" | "lg";
|
|
437
|
+
/** array, default: null */
|
|
438
|
+
items?: unknown[];
|
|
439
|
+
/** number, default: 0 */
|
|
440
|
+
activeIndex?: number;
|
|
441
|
+
/** number, default: 0 */
|
|
442
|
+
defaultIndex?: number;
|
|
443
|
+
/** function, default: null */
|
|
444
|
+
onChange?: (...args: any[]) => any;
|
|
445
|
+
}
|
|
446
|
+
export const Tabs: React.FC<TabsProps>;
|
|
447
|
+
|
|
448
|
+
/** FormTitle — B端标题组件,统一收敛整体页面总标题、工作台标题、一级/二级/三级标题和卡片标题 5 种变体;描述文案默认隐藏,仅在有板块介绍/场景说明/明确要求时通过 showDescription 显示;支持标题后缀 titleSuffix(如状态 Tag)。⚠️ 字体强约束:所有变体的标题文字均通过组件内部 `[font-weight:var(--font-semibold)]` 固定为 600 semibold,字号、行高、颜色由组件 token 固定,禁止通过 className 或 style 覆写字体粗细、字号、颜色。 */
|
|
449
|
+
export interface FormTitleProps extends TfdsCommonProps {
|
|
450
|
+
/** enum<form | level-1 | level-2 | level-3 | card>, default: "form" */
|
|
451
|
+
variant?: "form" | "level-1" | "level-2" | "level-3" | "card";
|
|
452
|
+
/** string, default: "表单标题" */
|
|
453
|
+
title?: string;
|
|
454
|
+
/** string, default: "一级标题描述" */
|
|
455
|
+
description?: string;
|
|
456
|
+
/** ReactNode, default: null */
|
|
457
|
+
titleSuffix?: unknown;
|
|
458
|
+
/** boolean, default: false */
|
|
459
|
+
showDescription?: boolean;
|
|
460
|
+
}
|
|
461
|
+
export const FormTitle: React.FC<FormTitleProps>;
|
|
462
|
+
|
|
463
|
+
/** Form — B端表单组合组件,负责字段标题、说明、错误反馈与 top/left 布局;字段控件复用平台已有基础组件,覆盖 13 类表单字段。 */
|
|
464
|
+
export interface FormProps extends TfdsCommonProps {
|
|
465
|
+
/** enum<vertical | grid>, default: "vertical" */
|
|
466
|
+
layout?: "vertical" | "grid";
|
|
467
|
+
/** enum<top | left>, default: "top" */
|
|
468
|
+
labelPosition?: "top" | "left";
|
|
469
|
+
/** enum<sm | md>, default: "md" */
|
|
470
|
+
size?: "sm" | "md";
|
|
471
|
+
/** array, default: null */
|
|
472
|
+
items?: unknown[];
|
|
473
|
+
/** number, default: 1 */
|
|
474
|
+
columns?: number;
|
|
475
|
+
/** boolean, default: false */
|
|
476
|
+
disabled?: boolean;
|
|
477
|
+
/** boolean, default: true */
|
|
478
|
+
requiredMark?: boolean;
|
|
479
|
+
/** boolean, default: false */
|
|
480
|
+
labelOptional?: boolean;
|
|
481
|
+
/** boolean, default: false */
|
|
482
|
+
labelRequired?: boolean;
|
|
483
|
+
/** boolean, default: false */
|
|
484
|
+
labelAi?: boolean;
|
|
485
|
+
/** boolean, default: false */
|
|
486
|
+
labelHelp?: boolean;
|
|
487
|
+
}
|
|
488
|
+
export const Form: React.FC<FormProps>;
|
|
489
|
+
|
|
490
|
+
export const FORM_FIELD_TYPES: readonly string[];
|
|
491
|
+
export const FORM_SAMPLE_ITEMS: readonly Record<string, unknown>[];
|
|
492
|
+
|
|
493
|
+
/** Input — 用户自输入的短文本/搜索词。值不可穷举或需键盘高效录入时用 Input;若合法值来自有限枚举列表,应优先 Select 或 Radio,避免用 Input 接收「只能是 A/B/C」的值。 */
|
|
494
|
+
export interface InputProps extends TfdsCommonProps {
|
|
495
|
+
/** enum<default | error>, default: "default" */
|
|
496
|
+
status?: "default" | "error";
|
|
497
|
+
/** boolean, default: false */
|
|
498
|
+
disabled?: boolean;
|
|
499
|
+
/** node, default: null */
|
|
500
|
+
prefix?: React.ReactNode;
|
|
501
|
+
/** node, default: null */
|
|
502
|
+
suffix?: React.ReactNode;
|
|
503
|
+
/** boolean, default: false */
|
|
504
|
+
allowClear?: boolean;
|
|
505
|
+
/** string, default: null */
|
|
506
|
+
aiSuggestion?: string;
|
|
507
|
+
/** array, default: null */
|
|
508
|
+
aiSuggestions?: unknown[];
|
|
509
|
+
/** string, default: "请输入" */
|
|
510
|
+
placeholder?: string;
|
|
511
|
+
/** string | array */
|
|
512
|
+
value?: unknown;
|
|
513
|
+
/** string | array */
|
|
514
|
+
defaultValue?: unknown;
|
|
515
|
+
/** function, default: null */
|
|
516
|
+
onChange?: (...args: any[]) => any;
|
|
517
|
+
/** function, default: null */
|
|
518
|
+
onClear?: (...args: any[]) => any;
|
|
519
|
+
/** function, default: null */
|
|
520
|
+
onAdoptSuggestion?: (...args: any[]) => any;
|
|
521
|
+
/** function, default: null */
|
|
522
|
+
onRefreshAiSuggestions?: (...args: any[]) => any;
|
|
523
|
+
}
|
|
524
|
+
export const Input: React.FC<InputProps>;
|
|
525
|
+
|
|
526
|
+
/** TextArea — 多行文本输入,与 Input 共用边框与状态语义;固定 MD 尺寸(14px 字、与 Input md 一致的内边距)。新增 code 类型用于代码 / Prompt 编辑,左侧显示行号并使用等宽字体。默认占位 3 行高度,可选 1~5 行作为最小高度(1 行与 Input md 同高)。高度仅按内容与规则自动变化,不可拖拽改高。maxLength 可选,不设则字数不限。 */
|
|
527
|
+
export interface TextAreaProps extends TfdsCommonProps {
|
|
528
|
+
/** enum<default | code>, default: "default" */
|
|
529
|
+
variant?: "default" | "code";
|
|
530
|
+
/** enum<1 | 2 | 3 | 4 | 5>, default: 3 */
|
|
531
|
+
minRows?: "1" | "2" | "3" | "4" | "5";
|
|
532
|
+
/** enum<default | error>, default: "default" */
|
|
533
|
+
status?: "default" | "error";
|
|
534
|
+
/** boolean, default: false */
|
|
535
|
+
disabled?: boolean;
|
|
536
|
+
/** number */
|
|
537
|
+
maxLength?: number;
|
|
538
|
+
/** boolean, default: false */
|
|
539
|
+
showCount?: boolean;
|
|
540
|
+
/** boolean, default: true */
|
|
541
|
+
enforceMaxLength?: boolean;
|
|
542
|
+
/** enum<vertical | none>, default: "vertical" */
|
|
543
|
+
resize?: "vertical" | "none";
|
|
544
|
+
/** boolean, default: false */
|
|
545
|
+
fillHeight?: boolean;
|
|
546
|
+
/** string, default: null */
|
|
547
|
+
aiSuggestion?: string;
|
|
548
|
+
/** array, default: null */
|
|
549
|
+
aiSuggestions?: unknown[];
|
|
550
|
+
/** string, default: "请输入" */
|
|
551
|
+
placeholder?: string;
|
|
552
|
+
/** string | array */
|
|
553
|
+
value?: unknown;
|
|
554
|
+
/** string | array */
|
|
555
|
+
defaultValue?: unknown;
|
|
556
|
+
/** function, default: null */
|
|
557
|
+
onChange?: (...args: any[]) => any;
|
|
558
|
+
/** function, default: null */
|
|
559
|
+
onAdoptSuggestion?: (...args: any[]) => any;
|
|
560
|
+
/** function, default: null */
|
|
561
|
+
onRefreshAiSuggestions?: (...args: any[]) => any;
|
|
562
|
+
}
|
|
563
|
+
export const TextArea: React.FC<TextAreaProps>;
|
|
564
|
+
|
|
565
|
+
/** InputNumber — 数字输入框,复用 Input 触发器视觉,支持最小值、最大值、步长、小数精度,以及外置/内置步进按钮。 */
|
|
566
|
+
export interface InputNumberProps extends TfdsCommonProps {
|
|
567
|
+
/** enum<default | error>, default: "default" */
|
|
568
|
+
status?: "default" | "error";
|
|
569
|
+
/** boolean, default: false */
|
|
570
|
+
disabled?: boolean;
|
|
571
|
+
/** boolean, default: false */
|
|
572
|
+
innerButtons?: boolean;
|
|
573
|
+
/** boolean, default: true */
|
|
574
|
+
controls?: boolean;
|
|
575
|
+
/** number */
|
|
576
|
+
min?: number;
|
|
577
|
+
/** number */
|
|
578
|
+
max?: number;
|
|
579
|
+
/** number, default: 1 */
|
|
580
|
+
step?: number;
|
|
581
|
+
/** number */
|
|
582
|
+
precision?: number;
|
|
583
|
+
/** string, default: "请输入" */
|
|
584
|
+
placeholder?: string;
|
|
585
|
+
/** number | string */
|
|
586
|
+
value?: unknown;
|
|
587
|
+
/** number | string */
|
|
588
|
+
defaultValue?: unknown;
|
|
589
|
+
/** function, default: null */
|
|
590
|
+
onChange?: (...args: any[]) => any;
|
|
591
|
+
/** function, default: null */
|
|
592
|
+
onStep?: (...args: any[]) => any;
|
|
593
|
+
}
|
|
594
|
+
export const InputNumber: React.FC<InputNumberProps>;
|
|
595
|
+
|
|
596
|
+
/** Select — 从预定义 options 中选值:节省纵向空间、选项可较多、与 Input 视觉同构。单选枚举默认 mode=default;同一字段多选且以标签形式回显用 mode=tag。少量互斥项且需一眼比较布局 → 优先 Radio。 */
|
|
597
|
+
export interface SelectProps extends TfdsCommonProps {
|
|
598
|
+
/** enum<default | error>, default: "default" */
|
|
599
|
+
status?: "default" | "error";
|
|
600
|
+
/** boolean, default: false */
|
|
601
|
+
disabled?: boolean;
|
|
602
|
+
/** boolean, default: false */
|
|
603
|
+
allowClear?: boolean;
|
|
604
|
+
/** enum<default | tag>, default: "default" */
|
|
605
|
+
mode?: "default" | "tag";
|
|
606
|
+
/** string, default: null */
|
|
607
|
+
aiSuggestion?: string;
|
|
608
|
+
/** array, default: null */
|
|
609
|
+
aiSuggestions?: unknown[];
|
|
610
|
+
/** string, default: "请选择" */
|
|
611
|
+
placeholder?: string;
|
|
612
|
+
/** array, default: null */
|
|
613
|
+
options?: unknown[];
|
|
614
|
+
/** string | array */
|
|
615
|
+
value?: unknown;
|
|
616
|
+
/** string | array, default: null */
|
|
617
|
+
defaultValue?: unknown;
|
|
618
|
+
/** function, default: null */
|
|
619
|
+
onChange?: (...args: any[]) => any;
|
|
620
|
+
/** function, default: null */
|
|
621
|
+
onClear?: (...args: any[]) => any;
|
|
622
|
+
/** function, default: null */
|
|
623
|
+
onAdoptSuggestion?: (...args: any[]) => any;
|
|
624
|
+
/** function, default: null */
|
|
625
|
+
onRefreshAiSuggestions?: (...args: any[]) => any;
|
|
626
|
+
}
|
|
627
|
+
export const Select: React.FC<SelectProps>;
|
|
628
|
+
|
|
629
|
+
/** RadioGroup — 互斥单选:同一组内只能选一个值。适合选项少、需要并排或纵列展示全部标签的表单场景。多选请用 CheckboxGroup;布尔即时开关请用 Switch;选项很多请用 Select。 */
|
|
630
|
+
export interface RadioGroupProps extends TfdsCommonProps {
|
|
631
|
+
/** enum<brand | black>, default: "brand" */
|
|
632
|
+
variant?: "brand" | "black";
|
|
633
|
+
/** enum<vertical | horizontal>, default: "vertical" */
|
|
634
|
+
layout?: "vertical" | "horizontal";
|
|
635
|
+
/** boolean, default: false */
|
|
636
|
+
disabled?: boolean;
|
|
637
|
+
/** string */
|
|
638
|
+
value?: string;
|
|
639
|
+
/** string, default: null */
|
|
640
|
+
defaultValue?: string;
|
|
641
|
+
/** function, default: null */
|
|
642
|
+
onChange?: (...args: any[]) => any;
|
|
643
|
+
/** string, default: null */
|
|
644
|
+
name?: string;
|
|
645
|
+
}
|
|
646
|
+
export const RadioGroup: React.FC<RadioGroupProps>;
|
|
647
|
+
|
|
648
|
+
export interface RadioProps extends TfdsCommonProps {
|
|
649
|
+
value?: unknown;
|
|
650
|
+
checked?: boolean;
|
|
651
|
+
disabled?: boolean;
|
|
652
|
+
onChange?: (...args: any[]) => any;
|
|
653
|
+
}
|
|
654
|
+
export const Radio: React.FC<RadioProps>;
|
|
655
|
+
|
|
656
|
+
/** CheckboxGroup — 多选或二元勾选(含「全选/半选」树形父级)。用于权限、标签、筛选条件、同意协议等。互斥单选用 Radio;单一功能开闭且立即生效优先 Switch。 */
|
|
657
|
+
export interface CheckboxGroupProps extends TfdsCommonProps {
|
|
658
|
+
/** enum<brand | black>, default: "brand" */
|
|
659
|
+
variant?: "brand" | "black";
|
|
660
|
+
/** enum<sm | md>, default: "md" */
|
|
661
|
+
size?: "sm" | "md";
|
|
662
|
+
/** enum<vertical | horizontal>, default: "vertical" */
|
|
663
|
+
layout?: "vertical" | "horizontal";
|
|
664
|
+
/** boolean, default: false */
|
|
665
|
+
disabled?: boolean;
|
|
666
|
+
/** array */
|
|
667
|
+
value?: unknown[];
|
|
668
|
+
/** array, default: null */
|
|
669
|
+
defaultValue?: unknown[];
|
|
670
|
+
/** function, default: null */
|
|
671
|
+
onChange?: (...args: any[]) => any;
|
|
672
|
+
/** boolean, default: null */
|
|
673
|
+
checked?: boolean;
|
|
674
|
+
/** boolean, default: false */
|
|
675
|
+
defaultChecked?: boolean;
|
|
676
|
+
/** boolean, default: false */
|
|
677
|
+
indeterminate?: boolean;
|
|
678
|
+
}
|
|
679
|
+
export const CheckboxGroup: React.FC<CheckboxGroupProps>;
|
|
680
|
+
|
|
681
|
+
export interface CheckboxProps extends TfdsCommonProps {
|
|
682
|
+
value?: unknown;
|
|
683
|
+
checked?: boolean;
|
|
684
|
+
disabled?: boolean;
|
|
685
|
+
onChange?: (...args: any[]) => any;
|
|
686
|
+
}
|
|
687
|
+
export const Checkbox: React.FC<CheckboxProps>;
|
|
688
|
+
|
|
689
|
+
/** Switch — 开关组件,两种状态间即时切换,支持品牌绿/主色黑两种视觉变体,尺寸固定为 MD(36px 体系)。 */
|
|
690
|
+
export interface SwitchProps extends TfdsCommonProps {
|
|
691
|
+
/** enum<brand | black>, default: "brand" */
|
|
692
|
+
variant?: "brand" | "black";
|
|
693
|
+
/** boolean, default: null */
|
|
694
|
+
checked?: boolean;
|
|
695
|
+
/** boolean, default: false */
|
|
696
|
+
defaultChecked?: boolean;
|
|
697
|
+
/** function, default: null */
|
|
698
|
+
onChange?: (...args: any[]) => any;
|
|
699
|
+
/** boolean, default: false */
|
|
700
|
+
disabled?: boolean;
|
|
701
|
+
}
|
|
702
|
+
export const Switch: React.FC<SwitchProps>;
|
|
703
|
+
|
|
704
|
+
/** Slider — 滑动输入条,支持单值和区间双滑块,拖动时显示数值气泡并支持刻度标签。 */
|
|
705
|
+
export interface SliderProps extends TfdsCommonProps {
|
|
706
|
+
/** number, default: 0 */
|
|
707
|
+
min?: number;
|
|
708
|
+
/** number, default: 100 */
|
|
709
|
+
max?: number;
|
|
710
|
+
/** number, default: 1 */
|
|
711
|
+
step?: number;
|
|
712
|
+
/** array */
|
|
713
|
+
value?: unknown[];
|
|
714
|
+
/** array, default: [20,80] */
|
|
715
|
+
defaultValue?: unknown[];
|
|
716
|
+
/** boolean, default: false */
|
|
717
|
+
disabled?: boolean;
|
|
718
|
+
/** boolean, default: true */
|
|
719
|
+
showTooltip?: boolean;
|
|
720
|
+
/** node, default: null */
|
|
721
|
+
marks?: React.ReactNode;
|
|
722
|
+
/** function, default: null */
|
|
723
|
+
onChange?: (...args: any[]) => any;
|
|
724
|
+
/** function, default: null */
|
|
725
|
+
onAfterChange?: (...args: any[]) => any;
|
|
726
|
+
}
|
|
727
|
+
export const Slider: React.FC<SliderProps>;
|
|
728
|
+
|
|
729
|
+
/** Upload — 图片宫格上传,96×96 缩略图卡片,支持上传进度、错误重试和禁用态。 */
|
|
730
|
+
export interface UploadProps extends TfdsCommonProps {
|
|
731
|
+
/** string, default: "image/*" */
|
|
732
|
+
accept?: string;
|
|
733
|
+
/** boolean, default: true */
|
|
734
|
+
multiple?: boolean;
|
|
735
|
+
/** number */
|
|
736
|
+
limit?: number;
|
|
737
|
+
/** number */
|
|
738
|
+
maxSize?: number;
|
|
739
|
+
/** number */
|
|
740
|
+
minSize?: number;
|
|
741
|
+
/** boolean, default: false */
|
|
742
|
+
disabled?: boolean;
|
|
743
|
+
/** array */
|
|
744
|
+
value?: unknown[];
|
|
745
|
+
/** array, default: null */
|
|
746
|
+
defaultValue?: unknown[];
|
|
747
|
+
/** function, default: null */
|
|
748
|
+
onChange?: (...args: any[]) => any;
|
|
749
|
+
/** function, default: null */
|
|
750
|
+
onRemove?: (...args: any[]) => any;
|
|
751
|
+
/** function, default: null */
|
|
752
|
+
beforeUpload?: (...args: any[]) => any;
|
|
753
|
+
/** function, default: null */
|
|
754
|
+
onSuccess?: (...args: any[]) => any;
|
|
755
|
+
/** function, default: null */
|
|
756
|
+
onError?: (...args: any[]) => any;
|
|
757
|
+
/** function, default: null */
|
|
758
|
+
onProgress?: (...args: any[]) => any;
|
|
759
|
+
}
|
|
760
|
+
export const Upload: React.FC<UploadProps>;
|
|
761
|
+
|
|
762
|
+
/** FormFieldStack — 纵向堆叠 Form 的业务片段(无独立背景/描边、无 FormTitle、无底栏按钮):按 FormFieldStack 间距样式规范(p-6、gap-6、全宽 stretch)组合任意数量与类型的基础表单控件。stackLayout=select-stack 为 5 段单列 select 示意;stackLayout=mixed-fields 为单 Form 内含 2×input / 2×select / 2×radio / 2×checkbox / 3×textarea 示意。 */
|
|
763
|
+
export interface FormFieldStackProps extends TfdsCommonProps {
|
|
764
|
+
/** enum<select-stack | mixed-fields>, default: "select-stack" */
|
|
765
|
+
stackLayout?: "select-stack" | "mixed-fields";
|
|
766
|
+
}
|
|
767
|
+
export const FormFieldStack: React.FC<FormFieldStackProps>;
|
|
768
|
+
|
|
769
|
+
/** Table — B端业务列表表格,支持标准表格与卡片型表单两种类型。标准表格按列配置单元格类型与尺寸;卡片型表单用于策略、流程、脚本、模板等带父项和版本子项的业务列表,并带展开、查看、更多和分页交互。 */
|
|
770
|
+
export interface TableProps extends TfdsCommonProps {
|
|
771
|
+
/** enum<table | card-form>, default: "table" */
|
|
772
|
+
variant?: "table" | "card-form";
|
|
773
|
+
/** array, default: null */
|
|
774
|
+
columns?: unknown[];
|
|
775
|
+
/** array, default: null */
|
|
776
|
+
dataSource?: unknown[];
|
|
777
|
+
/** string, default: "id" */
|
|
778
|
+
rowKey?: string;
|
|
779
|
+
/** object, default: null */
|
|
780
|
+
pagination?: Record<string, unknown>;
|
|
781
|
+
/** array, default: null */
|
|
782
|
+
expandedRowKeys?: unknown[];
|
|
783
|
+
/** array, default: [] */
|
|
784
|
+
defaultExpandedRowKeys?: unknown[];
|
|
785
|
+
/** function, default: null */
|
|
786
|
+
onExpandedRowKeysChange?: (...args: any[]) => any;
|
|
787
|
+
/** function, default: null */
|
|
788
|
+
onView?: (...args: any[]) => any;
|
|
789
|
+
/** function, default: null */
|
|
790
|
+
onMore?: (...args: any[]) => any;
|
|
791
|
+
/** function, default: null */
|
|
792
|
+
onPageChange?: (...args: any[]) => any;
|
|
793
|
+
/** function, default: null */
|
|
794
|
+
onPageSizeChange?: (...args: any[]) => any;
|
|
795
|
+
/** string, default: "暂无数据" */
|
|
796
|
+
emptyText?: string;
|
|
797
|
+
/** enum<none | first | last | both>, default: "none" */
|
|
798
|
+
fixedColumnsMode?: "none" | "first" | "last" | "both";
|
|
799
|
+
}
|
|
800
|
+
export const Table: React.FC<TableProps>;
|
|
801
|
+
|
|
802
|
+
/** DatePicker — 日期选择器,支持日期、日期时间、日期范围、日期时间范围 4 种类型。 */
|
|
803
|
+
export interface DatePickerProps extends TfdsCommonProps {
|
|
804
|
+
/** enum<date | datetime | daterange | datetimerange>, default: "date" */
|
|
805
|
+
type?: "date" | "datetime" | "daterange" | "datetimerange";
|
|
806
|
+
/** string */
|
|
807
|
+
value?: string;
|
|
808
|
+
/** string */
|
|
809
|
+
defaultValue?: string;
|
|
810
|
+
/** string, default: "" */
|
|
811
|
+
placeholder?: string;
|
|
812
|
+
/** boolean, default: false */
|
|
813
|
+
disabled?: boolean;
|
|
814
|
+
/** boolean, default: false */
|
|
815
|
+
defaultOpen?: boolean;
|
|
816
|
+
/** function, default: null */
|
|
817
|
+
onChange?: (...args: any[]) => any;
|
|
818
|
+
}
|
|
819
|
+
export const DatePicker: React.FC<DatePickerProps>;
|
|
820
|
+
|
|
821
|
+
/** TimePicker — 时间选择器,支持单时间与时间范围,触发器视觉对齐 DatePicker,浮层内按 Figma 滚轮面板选择时/分。 */
|
|
822
|
+
export interface TimePickerProps extends TfdsCommonProps {
|
|
823
|
+
/** enum<time | timerange>, default: "time" */
|
|
824
|
+
type?: "time" | "timerange";
|
|
825
|
+
/** string | array */
|
|
826
|
+
value?: unknown;
|
|
827
|
+
/** string | array */
|
|
828
|
+
defaultValue?: unknown;
|
|
829
|
+
/** string, default: "" */
|
|
830
|
+
placeholder?: string;
|
|
831
|
+
/** boolean, default: false */
|
|
832
|
+
disabled?: boolean;
|
|
833
|
+
/** boolean, default: false */
|
|
834
|
+
defaultOpen?: boolean;
|
|
835
|
+
/** function, default: null */
|
|
836
|
+
onChange?: (...args: any[]) => any;
|
|
837
|
+
}
|
|
838
|
+
export const TimePicker: React.FC<TimePickerProps>;
|
|
839
|
+
|
|
840
|
+
/** Modal — 模态弹窗面板,含标题区、内容区和底部按钮。支持居中(center)和全屏弹窗(fullscreen)两种布局变体。 */
|
|
841
|
+
export interface ModalProps extends TfdsCommonProps {
|
|
842
|
+
/** enum<center | fullscreen>, default: "center" */
|
|
843
|
+
layout?: "center" | "fullscreen";
|
|
844
|
+
/** enum<sm | md | lg>, default: "md" */
|
|
845
|
+
size?: "sm" | "md" | "lg";
|
|
846
|
+
/** string, default: "模态标题" */
|
|
847
|
+
title?: string;
|
|
848
|
+
/** string, default: "模态副标题" */
|
|
849
|
+
subtitle?: string;
|
|
850
|
+
/** boolean, default: true */
|
|
851
|
+
showFooterHint?: boolean;
|
|
852
|
+
/** string, default: "提示信息" */
|
|
853
|
+
footerHint?: string;
|
|
854
|
+
/** string, default: "取消" */
|
|
855
|
+
cancelText?: string;
|
|
856
|
+
/** string, default: "确定" */
|
|
857
|
+
confirmText?: string;
|
|
858
|
+
/** function, default: null */
|
|
859
|
+
onClose?: (...args: any[]) => any;
|
|
860
|
+
/** function, default: null */
|
|
861
|
+
onCancel?: (...args: any[]) => any;
|
|
862
|
+
/** function, default: null */
|
|
863
|
+
onConfirm?: (...args: any[]) => any;
|
|
864
|
+
/** node, default: null */
|
|
865
|
+
footer?: React.ReactNode;
|
|
866
|
+
}
|
|
867
|
+
export const Modal: React.FC<ModalProps>;
|
|
868
|
+
|
|
869
|
+
/** Sheet — 侧边抽屉面板,从屏幕右侧(或左侧)滑入,含标题区、内容区和底部按钮,3 档宽度,内容超高可滚动。 */
|
|
870
|
+
export interface SheetProps extends TfdsCommonProps {
|
|
871
|
+
/** enum<sm | md | lg>, default: "md" */
|
|
872
|
+
size?: "sm" | "md" | "lg";
|
|
873
|
+
/** boolean, default: true */
|
|
874
|
+
showFooterHint?: boolean;
|
|
875
|
+
/** string, default: "侧边标题" */
|
|
876
|
+
title?: string;
|
|
877
|
+
/** string, default: "侧边副标题" */
|
|
878
|
+
subtitle?: string;
|
|
879
|
+
/** string, default: "提示信息" */
|
|
880
|
+
footerHint?: string;
|
|
881
|
+
/** string, default: "取消" */
|
|
882
|
+
cancelText?: string;
|
|
883
|
+
/** string, default: "确定" */
|
|
884
|
+
confirmText?: string;
|
|
885
|
+
/** function, default: null */
|
|
886
|
+
onClose?: (...args: any[]) => any;
|
|
887
|
+
/** function, default: null */
|
|
888
|
+
onCancel?: (...args: any[]) => any;
|
|
889
|
+
/** function, default: null */
|
|
890
|
+
onConfirm?: (...args: any[]) => any;
|
|
891
|
+
/** node, default: null */
|
|
892
|
+
footer?: React.ReactNode;
|
|
893
|
+
}
|
|
894
|
+
export const Sheet: React.FC<SheetProps>;
|
|
895
|
+
|
|
896
|
+
/** TagInput — 标签输入框,严格复用 Tag 展示已选项与 +N 折叠项,宽度自适应折叠超出标签,并通过 Tooltip 展示被省略标签。 */
|
|
897
|
+
export interface TagInputProps extends TfdsCommonProps {
|
|
898
|
+
/** enum<default | error>, default: "default" */
|
|
899
|
+
status?: "default" | "error";
|
|
900
|
+
/** boolean, default: false */
|
|
901
|
+
disabled?: boolean;
|
|
902
|
+
/** string, default: "请输入" */
|
|
903
|
+
placeholder?: string;
|
|
904
|
+
/** array */
|
|
905
|
+
value?: unknown[];
|
|
906
|
+
/** array, default: null */
|
|
907
|
+
defaultValue?: unknown[];
|
|
908
|
+
/** function, default: null */
|
|
909
|
+
onChange?: (...args: any[]) => any;
|
|
910
|
+
/** function, default: null */
|
|
911
|
+
onRemove?: (...args: any[]) => any;
|
|
912
|
+
/** array | string | object, default: null */
|
|
913
|
+
aiSuggestion?: unknown;
|
|
914
|
+
/** array, default: null */
|
|
915
|
+
aiSuggestions?: unknown[];
|
|
916
|
+
/** function, default: null */
|
|
917
|
+
onAdoptSuggestion?: (...args: any[]) => any;
|
|
918
|
+
/** function, default: null */
|
|
919
|
+
onRefreshAiSuggestions?: (...args: any[]) => any;
|
|
920
|
+
/** boolean, default: true */
|
|
921
|
+
closable?: boolean;
|
|
922
|
+
/** enum<brand | red | orange | yellow | green | cyan | blue | purple | pink | teal | grey | white>, default: "grey" */
|
|
923
|
+
tagVariant?: "brand" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "pink" | "teal" | "grey" | "white";
|
|
924
|
+
/** enum<s | m | l>, default: "m" */
|
|
925
|
+
tagSize?: "s" | "m" | "l";
|
|
926
|
+
}
|
|
927
|
+
export const TagInput: React.FC<TagInputProps>;
|
|
928
|
+
|
|
929
|
+
/** Tag — 标签组件,用于标记、分类或状态展示。支持 13 种颜色变体、2 档字体粗细、3 档尺寸、3 种圆角、可关闭功能。 */
|
|
930
|
+
export interface TagProps extends TfdsCommonProps {
|
|
931
|
+
/** enum<brand | red | orange | yellow | green | cyan | blue | purple | pink | teal | grey | white | ai>, default: "brand" */
|
|
932
|
+
variant?: "brand" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "pink" | "teal" | "grey" | "white" | "ai";
|
|
933
|
+
/** enum<regular | bold>, default: "bold" */
|
|
934
|
+
fontWeight?: "regular" | "bold";
|
|
935
|
+
/** enum<s | m | l>, default: "m" */
|
|
936
|
+
size?: "s" | "m" | "l";
|
|
937
|
+
/** enum<md | full>, default: "md" */
|
|
938
|
+
radius?: "md" | "full";
|
|
939
|
+
/** boolean, default: false */
|
|
940
|
+
showIcon?: boolean;
|
|
941
|
+
/** string, default: "tag-01-stroked" */
|
|
942
|
+
iconName?: string;
|
|
943
|
+
/** boolean, default: false */
|
|
944
|
+
closable?: boolean;
|
|
945
|
+
/** function, default: null */
|
|
946
|
+
onClose?: (...args: any[]) => any;
|
|
947
|
+
}
|
|
948
|
+
export const Tag: React.FC<TagProps>;
|
|
949
|
+
|
|
950
|
+
/** Toast — 轻量反馈条:信息/成功/警示/错误四态,左侧状态图标(相对行首额外 4px 左边距)+ 主文案 + 可选文字操作(绿色文字 Button)+ 可关闭;宽度随内容收缩(w-fit),最大不超过 min(100%,560px);圆角 12px、可选语义描边(bordered)、内距 12px、主文案 14px 半粗,行内纵向居中对齐。规范仅覆盖单条条目视觉;全局队列、停留时长与 Portal 由业务集成(对齐 HiUI Toast)。 */
|
|
951
|
+
export interface ToastProps extends TfdsCommonProps {
|
|
952
|
+
/** enum<info | success | warning | error>, default: "info" */
|
|
953
|
+
type?: "info" | "success" | "warning" | "error";
|
|
954
|
+
/** string, default: "补充信息或状态切换" */
|
|
955
|
+
message?: string;
|
|
956
|
+
/** array, default: null */
|
|
957
|
+
actions?: unknown[];
|
|
958
|
+
/** boolean, default: true */
|
|
959
|
+
bordered?: boolean;
|
|
960
|
+
/** boolean, default: true */
|
|
961
|
+
showClose?: boolean;
|
|
962
|
+
/** function, default: null */
|
|
963
|
+
onClose?: (...args: any[]) => any;
|
|
964
|
+
}
|
|
965
|
+
export const Toast: React.FC<ToastProps>;
|
|
966
|
+
|
|
967
|
+
/** Tooltip — 文字提示气泡,hover/focus 触发,支持 12 个方位与视口边缘自动翻转。默认深色变体(grey-800 背景 + 白字),light 白底变体仅用于 TagInput +N 更多标签场景;文本容器固定规格(圆角 8px、内距 8/12、字号 14px),通过 Portal 渲染到 body 以避开父容器裁切。 */
|
|
968
|
+
export interface TooltipProps extends TfdsCommonProps {
|
|
969
|
+
/** enum<top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end>, default: "top" */
|
|
970
|
+
placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
|
|
971
|
+
/** boolean, default: true */
|
|
972
|
+
arrow?: boolean;
|
|
973
|
+
/** boolean, default: true */
|
|
974
|
+
autoFlip?: boolean;
|
|
975
|
+
/** boolean, default: false */
|
|
976
|
+
defaultOpen?: boolean;
|
|
977
|
+
/** number, default: 100 */
|
|
978
|
+
mouseEnterDelay?: number;
|
|
979
|
+
/** number, default: 100 */
|
|
980
|
+
mouseLeaveDelay?: number;
|
|
981
|
+
/** node, default: null */
|
|
982
|
+
content?: React.ReactNode;
|
|
983
|
+
/** enum<dark | light>, default: "dark" */
|
|
984
|
+
tone?: "dark" | "light";
|
|
985
|
+
}
|
|
986
|
+
export const Tooltip: React.FC<TooltipProps>;
|
|
987
|
+
|
|
988
|
+
/** Empty — 空状态占位组件,固定布局(插画 → 文案 → 操作),所有内容区域独立配置、按需组合。10 种内置插画对应常见场景;标题/描述/链接行/三种按钮均可独立传入或省略;buttonLayout 控制横排/竖排。 */
|
|
989
|
+
export interface EmptyProps extends TfdsCommonProps {
|
|
990
|
+
/** enum<no-result | no-content | not-found | no-access | failure | idle | success | construction | administrator-1 | administrator-2>, default: "no-content" */
|
|
991
|
+
illustrationType?: "no-result" | "no-content" | "not-found" | "no-access" | "failure" | "idle" | "success" | "construction" | "administrator-1" | "administrator-2";
|
|
992
|
+
/** enum<row | column>, default: "row" */
|
|
993
|
+
buttonLayout?: "row" | "column";
|
|
994
|
+
/** string, default: "空状态标题" */
|
|
995
|
+
title?: string;
|
|
996
|
+
/** string, default: "这是一段对当前空状态的描述文本" */
|
|
997
|
+
description?: string;
|
|
998
|
+
/** string, default: "一级操作" */
|
|
999
|
+
primaryLabel?: string;
|
|
1000
|
+
/** function, default: null */
|
|
1001
|
+
onPrimary?: (...args: any[]) => any;
|
|
1002
|
+
/** string, default: "" */
|
|
1003
|
+
secondaryLabel?: string;
|
|
1004
|
+
/** function, default: null */
|
|
1005
|
+
onSecondary?: (...args: any[]) => any;
|
|
1006
|
+
/** string, default: "" */
|
|
1007
|
+
tertiaryLabel?: string;
|
|
1008
|
+
/** function, default: null */
|
|
1009
|
+
onTertiary?: (...args: any[]) => any;
|
|
1010
|
+
/** string, default: "" */
|
|
1011
|
+
linkPrefix?: string;
|
|
1012
|
+
/** string, default: "" */
|
|
1013
|
+
linkText?: string;
|
|
1014
|
+
/** function, default: null */
|
|
1015
|
+
onLinkClick?: (...args: any[]) => any;
|
|
1016
|
+
}
|
|
1017
|
+
export const Empty: React.FC<EmptyProps>;
|
|
1018
|
+
|
|
1019
|
+
/** FullScreenPage — 全屏操作页容器,覆盖整个模版框架(含侧边导航),适合分步骤编辑、创建页面不同板块内容流程,以及内容量大、需沉浸长时间编辑的业务场景。支持白底(直铺/描边面板)和灰底(白卡面板)两种背景模式。 */
|
|
1020
|
+
export interface FullScreenPageProps extends TfdsCommonProps {
|
|
1021
|
+
/** enum<white | grey>, default: "white" */
|
|
1022
|
+
bg?: "white" | "grey";
|
|
1023
|
+
/** string, default: "页面标题" */
|
|
1024
|
+
title?: string;
|
|
1025
|
+
/** function, default: null */
|
|
1026
|
+
onBack?: (...args: any[]) => any;
|
|
1027
|
+
/** node, default: null */
|
|
1028
|
+
headerActions?: React.ReactNode;
|
|
1029
|
+
}
|
|
1030
|
+
export const FullScreenPage: React.FC<FullScreenPageProps>;
|
|
1031
|
+
|
|
1032
|
+
/** 页面模板 / Page Pattern Props(业务可按需扩展,如 thread / messages / sections / panels 等) */
|
|
1033
|
+
export interface TfdsPagePatternProps extends TfdsCommonProps {
|
|
1034
|
+
thread?: Record<string, unknown>;
|
|
1035
|
+
messages?: ReadonlyArray<Record<string, unknown>>;
|
|
1036
|
+
sections?: ReadonlyArray<Record<string, unknown>>;
|
|
1037
|
+
panels?: ReadonlyArray<Record<string, unknown>>;
|
|
1038
|
+
activeConversationId?: string;
|
|
1039
|
+
defaultActiveConversationId?: string;
|
|
1040
|
+
onActiveConversationChange?: (id: string) => void;
|
|
1041
|
+
userAvatarSrc?: string;
|
|
1042
|
+
agentAvatarSrc?: string;
|
|
1043
|
+
leftPanel?: React.ReactNode;
|
|
1044
|
+
mainPanel?: React.ReactNode;
|
|
1045
|
+
rightPanel?: React.ReactNode;
|
|
1046
|
+
}
|
|
1047
|
+
export const VariableManagementPage: React.FC<TfdsPagePatternProps>;
|
|
1048
|
+
export const McpManagementPage: React.FC<TfdsPagePatternProps>;
|
|
1049
|
+
export const TabTopBarListPage: React.FC<TfdsPagePatternProps>;
|
|
1050
|
+
export const StrategyListPage: React.FC<TfdsPagePatternProps>;
|
|
1051
|
+
export const BasePageFramePattern: React.FC<TfdsPagePatternProps>;
|
|
1052
|
+
export const ChatHomePagePattern: React.FC<TfdsPagePatternProps>;
|
|
1053
|
+
export const CopilotPagePattern: React.FC<TfdsPagePatternProps>;
|
|
1054
|
+
export const ChatConversationPattern: React.FC<TfdsPagePatternProps>;
|
|
1055
|
+
export const IMConversationPattern: React.FC<TfdsPagePatternProps>;
|
|
1056
|
+
export const CustomerServiceWorkspaceFramePattern: React.FC<TfdsPagePatternProps>;
|
|
1057
|
+
|
|
1058
|
+
/** 包内本地成员头像数据(用于 Avatar / IM / 表格头像列默认头像) */
|
|
1059
|
+
export interface TfdsTeamMember {
|
|
1060
|
+
id: string;
|
|
1061
|
+
name: string;
|
|
1062
|
+
avatarSrc: string;
|
|
1063
|
+
[key: string]: unknown;
|
|
1064
|
+
}
|
|
1065
|
+
export const TEAM_MEMBERS: readonly TfdsTeamMember[];
|
|
1066
|
+
export const DEFAULT_TEAM_MEMBER: TfdsTeamMember;
|
|
1067
|
+
export const TEAM_MEMBER_AVATAR_SRCS: readonly string[];
|
|
1068
|
+
export function getTeamMemberByIndex(index: number): TfdsTeamMember;
|
|
1069
|
+
export function getTeamMemberByName(name: string): TfdsTeamMember | undefined;
|
|
1070
|
+
export function getTeamMemberBySeed(seed: string | number): TfdsTeamMember;
|
|
1071
|
+
export function getTeamAvatarBySeed(seed: string | number): string;
|
|
1072
|
+
export function getRandomTeamMember(): TfdsTeamMember;
|
|
1073
|
+
export function getRandomTeamAvatarSrc(): string;
|