@tfdesign/b-end 1.0.4

package/src/index.js

@@ -0,0 +1,52 @@
+/**
+ * @tf-designsystem/b-end 公开 API（由 scripts/generate-tfds-b-end-bundle.mjs 生成，勿手改）
+ * 实现位于包内 ./src/_b_end_runtime/（与主仓 src/data/systems/b-end 同步，可独立 npm 安装）
+ */
+
+export { default as Avatar } from './_b_end_runtime/components/Avatar.jsx';
+export { default as AvatarGroup } from './_b_end_runtime/components/AvatarGroup.jsx';
+export { default as Icon } from './_b_end_runtime/components/Icon.jsx';
+export { default as NavBar } from './_b_end_runtime/components/NavBar.jsx';
+export { default as TagBar } from './_b_end_runtime/components/TagBar.jsx';
+export { default as Card } from './_b_end_runtime/components/Card.jsx';
+export { default as ConversationList } from './_b_end_runtime/components/ConversationList.jsx';
+export { default as InfoDisplayPanel } from './_b_end_runtime/components/InfoDisplayPanel.jsx';
+export { default as ChatBubble } from './_b_end_runtime/components/ChatBubble.jsx';
+export { default as ChatInput } from './_b_end_runtime/components/ChatInput.jsx';
+export { default as ChatMessage } from './_b_end_runtime/components/ChatMessage.jsx';
+export { default as Button } from './_b_end_runtime/components/Button.jsx';
+export { default as Tabs } from './_b_end_runtime/components/Tabs.jsx';
+export { default as FormTitle } from './_b_end_runtime/components/FormTitle.jsx';
+export { default as Form, FORM_FIELD_TYPES, FORM_SAMPLE_ITEMS } from './_b_end_runtime/components/Form.jsx';
+export { default as Input } from './_b_end_runtime/components/Input.jsx';
+export { default as TextArea } from './_b_end_runtime/components/TextArea.jsx';
+export { default as InputNumber } from './_b_end_runtime/components/InputNumber.jsx';
+export { default as Select } from './_b_end_runtime/components/Select.jsx';
+export { default as RadioGroup, Radio } from './_b_end_runtime/components/Radio.jsx';
+export { default as CheckboxGroup, Checkbox } from './_b_end_runtime/components/Checkbox.jsx';
+export { default as Switch } from './_b_end_runtime/components/Switch.jsx';
+export { default as Slider } from './_b_end_runtime/components/Slider.jsx';
+export { default as Upload } from './_b_end_runtime/components/Upload.jsx';
+export { default as FormFieldStack } from './_b_end_runtime/components/FormFieldStack.jsx';
+export { default as Table } from './_b_end_runtime/components/Table.jsx';
+export { default as DatePicker } from './_b_end_runtime/components/DatePicker.jsx';
+export { default as TimePicker } from './_b_end_runtime/components/TimePicker.jsx';
+export { default as Modal } from './_b_end_runtime/components/Modal.jsx';
+export { default as Sheet } from './_b_end_runtime/components/Sheet.jsx';
+export { default as TagInput } from './_b_end_runtime/components/TagInput.jsx';
+export { default as Tag } from './_b_end_runtime/components/Tag.jsx';
+export { default as Toast } from './_b_end_runtime/components/Toast.jsx';
+export { default as Tooltip } from './_b_end_runtime/components/Tooltip.jsx';
+export { default as Empty } from './_b_end_runtime/components/Empty.jsx';
+export { default as FullScreenPage } from './_b_end_runtime/components/FullScreenPage.jsx';
+export { TEAM_MEMBERS, DEFAULT_TEAM_MEMBER, TEAM_MEMBER_AVATAR_SRCS, getTeamMemberByIndex, getTeamMemberByName, getTeamMemberBySeed, getTeamAvatarBySeed, getRandomTeamMember, getRandomTeamAvatarSrc } from './_b_end_runtime/teamMembers.js';
+export { default as VariableManagementPage } from './_b_end_runtime/page-patterns/VariableManagementPage.jsx';
+export { default as McpManagementPage } from './_b_end_runtime/page-patterns/McpManagementPage.jsx';
+export { default as TabTopBarListPage } from './_b_end_runtime/page-patterns/TabTopBarListPage.jsx';
+export { default as StrategyListPage } from './_b_end_runtime/page-patterns/StrategyListPage.jsx';
+export { default as CustomerServiceWorkspaceFramePattern } from './_b_end_runtime/page-patterns/CustomerServiceWorkspaceFramePattern.jsx';
+export { default as BasePageFramePattern } from './_b_end_runtime/page-patterns/BasePageFramePattern.jsx';
+export { default as ChatHomePagePattern } from './_b_end_runtime/page-patterns/ChatHomePagePattern.jsx';
+export { default as CopilotPagePattern } from './_b_end_runtime/page-patterns/CopilotPagePattern.jsx';
+export { default as ChatConversationPattern } from './_b_end_runtime/page-patterns/ChatConversationPattern.jsx';
+export { default as IMConversationPattern } from './_b_end_runtime/page-patterns/IMConversationPattern.jsx';

package/theme.css

@@ -0,0 +1,350 @@
+@theme {
+  /* ── Colors ── */
+  --color-black: #000000;
+  --color-transparent: transparent;
+  --color-white: #FFFFFF;
+  --color-brand-50: #EAFAF6;
+  --color-brand-100: #CFF3EA;
+  --color-brand-200: #A8E8D7;
+  --color-brand-300: #87DEC9;
+  --color-brand-400: #6BD8BF;
+  --color-brand-500: #56D3BC;
+  --color-brand-600: #32C4AC;
+  --color-brand-700: #18B49D;
+  --color-brand-800: #129683;
+  --color-brand-900: #0D786A;
+  --color-brand-950: #053E3A;
+  --color-blueGrey-50: #FCFCFD;
+  --color-blueGrey-100: #F9FAFB;
+  --color-blueGrey-200: #F2F4F7;
+  --color-blueGrey-300: #E4E7EC;
+  --color-blueGrey-400: #D0D5DD;
+  --color-blueGrey-500: #98A2B3;
+  --color-blueGrey-600: #667085;
+  --color-blueGrey-700: #475467;
+  --color-blueGrey-800: #344054;
+  --color-blueGrey-900: #182230;
+  --color-blueGrey-950: #0D1321;
+  --color-grey-50: #F9F9F9;
+  --color-grey-100: #E6E7EA;
+  --color-grey-200: #C6C7CD;
+  --color-grey-300: #A7A8B0;
+  --color-grey-400: #878892;
+  --color-grey-500: #6B6C75;
+  --color-grey-600: #555661;
+  --color-grey-700: #41424C;
+  --color-grey-800: #2E2F38;
+  --color-grey-900: #1C1C23;
+  --color-grey-950: #111116;
+  --color-blue-50: #ECF6FE;
+  --color-blue-100: #CFE9FE;
+  --color-blue-200: #9FD1FC;
+  --color-blue-300: #70B8FB;
+  --color-blue-400: #429EF9;
+  --color-blue-500: #1482F8;
+  --color-blue-600: #0B69D4;
+  --color-blue-700: #0451B1;
+  --color-blue-800: #003D8D;
+  --color-blue-900: #002C69;
+  --color-blue-950: #001A36;
+  --color-indigo-50: #ECEFF7;
+  --color-indigo-100: #D1D6F0;
+  --color-indigo-200: #A6B1E1;
+  --color-indigo-300: #7F8ED1;
+  --color-indigo-400: #5D6DC2;
+  --color-indigo-500: #3E4FB3;
+  --color-indigo-600: #32409F;
+  --color-indigo-700: #28338A;
+  --color-indigo-800: #1E2776;
+  --color-indigo-900: #161C61;
+  --color-indigo-950: #0D1240;
+  --color-lightBlue-50: #F0F7FB;
+  --color-lightBlue-100: #DCEEFA;
+  --color-lightBlue-200: #9CD8F7;
+  --color-lightBlue-300: #6FC8F4;
+  --color-lightBlue-400: #3FB6F0;
+  --color-lightBlue-500: #139FEC;
+  --color-lightBlue-600: #0A81C5;
+  --color-lightBlue-700: #0365A9;
+  --color-lightBlue-800: #034A83;
+  --color-lightBlue-900: #0A3550;
+  --color-lightBlue-950: #061F30;
+  --color-green-50: #F0FDF4;
+  --color-green-100: #D0F8D1;
+  --color-green-200: #A6F1A7;
+  --color-green-300: #7FE182;
+  --color-green-400: #5ECE62;
+  --color-green-500: #3EB346;
+  --color-green-600: #329538;
+  --color-green-700: #27772F;
+  --color-green-800: #1D5A24;
+  --color-green-900: #123C18;
+  --color-green-950: #09220D;
+  --color-lightGreen-50: #F6FAF0;
+  --color-lightGreen-100: #E4EECF;
+  --color-lightGreen-200: #C8E09E;
+  --color-lightGreen-300: #AFD16E;
+  --color-lightGreen-400: #97BF41;
+  --color-lightGreen-500: #7FAE18;
+  --color-lightGreen-600: #6A9215;
+  --color-lightGreen-700: #577713;
+  --color-lightGreen-800: #455E12;
+  --color-lightGreen-900: #354810;
+  --color-lightGreen-950: #1F2A09;
+  --color-lime-50: #F3FAE8;
+  --color-lime-100: #E5F5C8;
+  --color-lime-200: #CFEC95;
+  --color-lime-300: #BDE266;
+  --color-lime-400: #AED93A;
+  --color-lime-500: #A3CF11;
+  --color-lime-600: #85AD0C;
+  --color-lime-700: #688A09;
+  --color-lime-800: #4C6705;
+  --color-lime-900: #314503;
+  --color-lime-950: #1F2A02;
+  --color-cyan-50: #EAF9FA;
+  --color-cyan-100: #C2F0F3;
+  --color-cyan-200: #8AE3E8;
+  --color-cyan-300: #58D4DC;
+  --color-cyan-400: #30C4CF;
+  --color-cyan-500: #14B1BE;
+  --color-cyan-600: #0E94A0;
+  --color-cyan-700: #0A7782;
+  --color-cyan-800: #075A64;
+  --color-cyan-900: #043F47;
+  --color-cyan-950: #022429;
+  --color-red-50: #FEF2F1;
+  --color-red-100: #FCD9D7;
+  --color-red-200: #F9ACA7;
+  --color-red-300: #F6837B;
+  --color-red-400: #F35F55;
+  --color-red-500: #F74331;
+  --color-red-600: #D32E24;
+  --color-red-700: #AD201A;
+  --color-red-800: #861613;
+  --color-red-900: #600E0D;
+  --color-red-950: #3B0706;
+  --color-orange-50: #FFF5EE;
+  --color-orange-100: #FEE1CA;
+  --color-orange-200: #FDC592;
+  --color-orange-300: #FBAA5E;
+  --color-orange-400: #FA9332;
+  --color-orange-500: #FA8B14;
+  --color-orange-600: #D17310;
+  --color-orange-700: #A85B0D;
+  --color-orange-800: #80440A;
+  --color-orange-900: #5A3008;
+  --color-orange-950: #351B04;
+  --color-yellow-50: #FEFDEC;
+  --color-yellow-100: #FEFACF;
+  --color-yellow-200: #FCF29F;
+  --color-yellow-300: #FBE870;
+  --color-yellow-400: #F9DA42;
+  --color-yellow-500: #F8C914;
+  --color-yellow-600: #CF9D0F;
+  --color-yellow-700: #A5760A;
+  --color-yellow-800: #7C5206;
+  --color-yellow-900: #533203;
+  --color-yellow-950: #331F02;
+  --color-amber-50: #FFFAEB;
+  --color-amber-100: #FEF0C7;
+  --color-amber-200: #FEDF89;
+  --color-amber-300: #FEC84B;
+  --color-amber-400: #FDB022;
+  --color-amber-500: #F79009;
+  --color-amber-600: #DC6803;
+  --color-amber-700: #B54708;
+  --color-amber-800: #93370D;
+  --color-amber-900: #7A2E0E;
+  --color-amber-950: #4A1A06;
+  --color-pink-50: #FDEDF1;
+  --color-pink-100: #FAD2DC;
+  --color-pink-200: #F5A7BD;
+  --color-pink-300: #F17DA2;
+  --color-pink-400: #EC558A;
+  --color-pink-500: #E72E75;
+  --color-pink-600: #C32165;
+  --color-pink-700: #A01654;
+  --color-pink-800: #7C0E43;
+  --color-pink-900: #580731;
+  --color-pink-950: #360420;
+  --color-violet-50: #F1EEF9;
+  --color-violet-100: #DCD4F3;
+  --color-violet-200: #BBACE8;
+  --color-violet-300: #9E86DC;
+  --color-violet-400: #8464D1;
+  --color-violet-500: #6D45C5;
+  --color-violet-600: #6039B1;
+  --color-violet-700: #542D9C;
+  --color-violet-800: #482388;
+  --color-violet-900: #3C1B73;
+  --color-violet-950: #28124D;
+  --color-purple-50: #F7EAF7;
+  --color-purple-100: #F0CCF0;
+  --color-purple-200: #DF9DE1;
+  --color-purple-300: #CC73D1;
+  --color-purple-400: #B74EC2;
+  --color-purple-500: #A22DB3;
+  --color-purple-600: #8B239F;
+  --color-purple-700: #751A8A;
+  --color-purple-800: #5F1376;
+  --color-purple-900: #4B0D61;
+  --color-purple-950: #31083F;
+
+  /* ── Component-only colors（组件特化色，命名空间共用 --color-*，不进通用调色板）── */
+  --color-robot-50: #FCFCFC;  /* used by: Avatar */
+  --color-robot-100: #EDEDED;  /* used by: Avatar */
+  --color-robot-500: #24B9D9;  /* used by: Avatar */
+  --color-robot-900: #000000;  /* used by: Avatar */
+
+  /* ── Semantic tokens → --color-* 命名空间 ── */
+  --color-primary: var(--color-brand-500);  /* Primary ← brand-500 */
+  --color-success: var(--color-green-500);  /* Success ← green-500 */
+  --color-warning: var(--color-orange-500);  /* Warning ← orange-500 */
+  --color-danger: var(--color-red-500);  /* Danger ← red-500 */
+  --color-info: var(--color-brand-500);  /* Info ← brand-500 */
+  --color-tertiary: var(--color-grey-500);  /* Tertiary ← grey-500 */
+  --color-foreground: var(--color-blueGrey-900);  /* 主文字 ← blueGrey-900 */
+  --color-foreground-secondary: var(--color-blueGrey-700);  /* 副文字 ← blueGrey-700 */
+  --color-foreground-muted: var(--color-blueGrey-600);  /* 辅助文字 ← blueGrey-600 */
+  --color-foreground-disabled: var(--color-blueGrey-500);  /* 禁用文字 ← blueGrey-500 */
+  --color-foreground-inverse: var(--color-white);  /* 反色文字 ← white */
+  --color-link: var(--color-brand-700);  /* 链接文字 ← brand-700 */
+  --color-page: var(--color-white);  /* 页面底层背景 ← white */
+  --color-surface: var(--color-white);  /* 容器 / 卡片背景 ← white */
+  --color-elevated: var(--color-white);  /* 浮层背景 ← white */
+  --color-disabled: var(--color-blueGrey-100);  /* 禁用背景 ← blueGrey-100 */
+  --color-card-secondary: rgba(255,255,255,0.65);  /* 卡片次级背景 ← white/65% */
+  --color-chat-incoming: rgba(52,59,57,0.05);  /* 聊天气泡-左侧 ← grey-800/5% */
+  --color-chat-outgoing: #E5F7F7;  /* 聊天气泡-右侧 ← cyan-soft/custom */
+  --color-chat-outgoing-ai: linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%);  /* 聊天气泡-右侧AI渐变 ← gradient/ai-fill-1 */
+  --color-fill: rgba(83, 96, 143, 0.07);  /* 填充-默认态 ← blueGrey/7% */
+  --color-fill-hover: rgba(83, 96, 143, 0.12);  /* 填充-悬浮态 ← blueGrey/12% */
+  --color-fill-active: rgba(83, 96, 143, 0.15);  /* 填充-激活态 ← blueGrey/15% */
+  --color-border-default: var(--color-blueGrey-300);  /* 默认描边 ← blueGrey-300 */
+  --color-border-strong: var(--color-blueGrey-400);  /* 强调/悬浮描边 ← blueGrey-400 */
+  --color-border-brand: var(--color-brand-500);  /* 品牌描边 ← brand-500 */
+  --color-border-brand-strong: var(--color-brand-600);  /* 品牌强调描边 ← brand-600 */
+  --color-border-line-light: rgba(22,24,35,0.08);  /* 细线描边 rgba ← literal */
+  --color-overlay: rgba(22, 22, 26, 0.60);  /* 蒙层背景 ← grey-950/60% */
+  --color-ring: var(--color-brand-500);  /* 焦点环 ← brand-500 */
+
+  /* ── 兼容别名：Tailwind v4 默认 border 工具读取 --color-border ── */
+  --color-border: var(--color-border-default);
+
+  /* ── Custom backgrounds ── */
+  --bg-chat-outgoing-ai: linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%);
+
+  /* ── Data colors（图表色，硬编码 hex）── */
+  --color-data-0: #24CDA5;
+  --color-data-1: #FF8F52;
+  --color-data-2: #D93B95;
+  --color-data-3: #835FD8;
+  --color-data-4: #3F81EB;
+  --color-data-5: #63D1E0;
+  --color-data-6: #F2496F;
+  --color-data-7: #6EA1DA;
+  --color-data-8: #B399FE;
+  --color-data-9: #FC7E90;
+  --color-data-10: #C6E360;
+  --color-data-11: #FEC849;
+
+  /* ── Spacing ── */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-0_5: 2px;
+  --spacing-avatar-group-overlap: 10px;
+
+  /* ── Font Family（英文 Inter + 中文苹方）── */
+  --font-sans: Inter, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+
+  /* ── Font Size ── */
+  --text-xs: 0.75rem;  /* 12px */
+  --text-sm: 0.875rem;  /* 14px */
+  --text-base: 1rem;  /* 16px */
+  --text-lg: 1.125rem;  /* 18px */
+  --text-xl: 1.25rem;  /* 20px */
+  --text-2xl: 1.5rem;  /* 24px */
+  --text-3xl: 1.875rem;  /* 30px */
+  --text-4xl: 2.25rem;  /* 36px */
+  --text-5xl: 3rem;  /* 48px */
+
+  /* ── Font Weight ── */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* ── Line Height ── */
+  --leading-4: 16px;
+  --leading-5: 20px;
+  --leading-card-copy: 21px;
+  --leading-card-title: 22px;
+
+  /* ── Letter Spacing ── */
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+
+  /* ── Border Radius ── */
+  --radius-none: 0px;
+  --radius-avatar: 3px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-card: 20px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+
+  /* ── Size ── */
+  --size-card-width: 400px;
+  --size-card-min-height: 201px;
+  --size-chat-bubble-max: 500px;
+  --size-icon-14: 14px;
+  --size-control-sm: 24px;
+  --size-control-md: 36px;
+  --size-input-width: 300px;
+
+  /* ── Shadows ── */
+  --shadow-none: 0 0 #0000;
+  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
+  --shadow-DEFAULT: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
+  --shadow-card: 0 30px 50px 0 rgba(0,9,36,0.05);
+  --shadow-list: 0 0 16px 0 rgba(101,115,137,0.06);
+
+  /* ── Gradients ── */
+  --gradient-dark: linear-gradient(74deg, rgba(134,255,197,0.4) 1.5%, transparent 50%), linear-gradient(250deg, rgba(255,158,44,0.28) 11%, transparent 52%), linear-gradient(101deg, #34423B 14%, #16141F 104%);
+  --gradient-ai-fill-1: linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%);
+  --gradient-ai-fill-2: linear-gradient(-45deg, rgba(254, 224, 253, 1) 0%, rgba(233, 218, 255, 1) 25%, rgba(213, 225, 255, 1) 48%, rgba(213, 243, 248, 1) 83%, rgba(213, 247, 242, 1) 100%);
+  --gradient-ai-fill-3: linear-gradient(-45deg, rgba(255, 153, 248, 1) 0%, rgba(181, 131, 255, 1) 25%, rgba(114, 156, 255, 1) 48%, rgba(117, 218, 231, 1) 83%, rgba(115, 230, 204, 1) 100%);
+  --gradient-ai-fill-text: linear-gradient(135deg, rgba(22, 218, 203, 1) 0%, rgba(49, 134, 212, 1) 20%, rgba(111, 88, 227, 1) 70%, rgba(231, 116, 221, 1) 100%);
+}
+
+/* ── ChatMessage 执行流：全局变量与动画（与平台 src/index.css 对齐，随 theme.css 一并下发）── */
+:root {
+  --tfds-ai-execution-icon-gradient: linear-gradient(180deg, rgba(200, 214, 210, 0.09) 0%, rgba(52, 59, 57, 0.09) 100%);
+  --tfds-ai-execution-processing-fill: rgba(52, 59, 57, 0.04);
+  --tfds-ai-execution-processing-shimmer: linear-gradient(90deg, rgba(52, 59, 57, 0.045) 0%, rgba(52, 59, 57, 0.05) 28%, rgba(255, 255, 255, 0.18) 50%, rgba(52, 59, 57, 0.05) 72%, rgba(52, 59, 57, 0.045) 100%);
+}
+@keyframes tfds-ai-execution-shimmer {
+  0% { background-position: 140% 0; }
+  100% { background-position: -40% 0; }
+}