@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/stories/AgentHelperCard.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentHelperCard } from '../components/agent-helper/agent-helper-card';
+import type { IAgentHelper } from '@baishuyun/types';
+
+const sampleHelper: IAgentHelper = {
+  id: 'helper-1',
+  agentId: 'ai-form-filling',
+  helperName: '未命名表单动作触发智能体助手',
+  triggerType: 'form_action',
+  formId: 'form-sales-out',
+  formActionTriggerType: ['submit', 'edit', 'delete', 'init', 'edit_init'],
+  enabled: true,
+  prompt: '',
+  logs: [],
+};
+
+const meta = {
+  title: 'Agent Helper/AgentHelperCard',
+  component: AgentHelperCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    helper: sampleHelper,
+    agentName: 'AI填报',
+    agentIcon: 'https://picsum.photos/28/28',
+    onEnabledChange: () => {},
+    onViewLogs: () => {},
+    onEdit: () => {},
+    onCopy: () => {},
+    onDelete: () => {},
+  },
+} satisfies Meta<typeof AgentHelperCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FormAction: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    helper: {
+      ...sampleHelper,
+      enabled: false,
+    },
+  },
+};
+
+export const FormField: Story = {
+  args: {
+    helper: {
+      ...sampleHelper,
+      triggerType: 'form_field',
+      triggerFieldWidgetName: '客户名称',
+      helperName: '表单字段触发智能体助手',
+    },
+  },
+};
+
+export const FormFlowNode: Story = {
+  args: {
+    helper: {
+      ...sampleHelper,
+      triggerType: 'form_flow_node',
+      flowNodeTriggerType: ['flow_end', 'flow_node'],
+      helperName: '流程节点触发智能体助手',
+    },
+  },
+};
+
+export const Universal: Story = {
+  args: {
+    helper: {
+      ...sampleHelper,
+      triggerType: 'universal',
+      helperName: '通用型智能体助手',
+    },
+  },
+};
+
+export const Scheduler: Story = {
+  args: {
+    helper: {
+      ...sampleHelper,
+      triggerType: 'scheduler',
+      helperName: '计划任务智能体助手',
+    },
+  },
+};
+
+export const NoCallbacks: Story = {
+  args: {
+    helper: sampleHelper,
+    agentName: 'AI填报',
+    agentIcon: 'https://picsum.photos/28/28',
+  },
+};
+
+export const NoAgentTag: Story = {
+  args: {
+    helper: sampleHelper,
+  },
+};

package/src/stories/AgentHelperCardList.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentHelperCardList } from '../components/agent-helper/agent-helper-card-list';
+import type { IAgentHelper, FormActionType, FlowNodeActionType } from '@baishuyun/types';
+
+const agentMap: Record<string, { name: string; icon: string }> = {
+  'ai-form-filling': { name: 'AI填报', icon: 'https://picsum.photos/28/28' },
+  'form-building': { name: '表单搭建', icon: 'https://picsum.photos/28/28?random=2' },
+  'ai-translate': { name: 'AI翻译', icon: 'https://picsum.photos/28/28?random=3' },
+};
+
+const getAgentName = (agentId: string) => agentMap[agentId]?.name;
+const getAgentIcon = (agentId: string) => agentMap[agentId]?.icon;
+
+const items: Array<IAgentHelper> = [
+  {
+    id: 'helper-1',
+    agentId: 'ai-form-filling',
+    helperName: '未命名通用型智能体助手',
+    triggerType: 'universal' as const,
+    formId: '',
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+  {
+    id: 'helper-2',
+    agentId: 'ai-form-filling',
+    helperName: '未命名通用型智能体助手',
+    triggerType: 'universal' as const,
+    formId: '',
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+  {
+    id: 'helper-3',
+    agentId: 'ai-form-filling',
+    helperName: '未命名表单字段触发智能体助手',
+    triggerType: 'form_field' as const,
+    formId: 'form-sales-out',
+    triggerFieldWidgetName: '单行文本',
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+  {
+    id: 'helper-4',
+    agentId: 'ai-form-filling',
+    helperName: '未命名表单动作触发智能体助手',
+    triggerType: 'form_action' as const,
+    formId: 'form-sales-out',
+    formActionTriggerType: ['submit', 'edit', 'delete', 'init', 'edit_init'] as FormActionType[],
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+  {
+    id: 'helper-5',
+    agentId: 'form-building',
+    helperName: '表单名称-回写辅助表',
+    triggerType: 'form_flow_node' as const,
+    formId: 'form-sales-out',
+    flowNodeTriggerType: ['flow_end', 'flow_node'] as FlowNodeActionType[],
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+  {
+    id: 'helper-6',
+    agentId: 'ai-translate',
+    helperName: '表单名称-回写辅助表',
+    triggerType: 'scheduler' as const,
+    formId: '',
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+  {
+    id: 'helper-7',
+    agentId: 'ai-translate',
+    helperName: '表单名称-回写辅助表',
+    triggerType: 'scheduler' as const,
+    formId: '',
+    prompt: '',
+    logs: [],
+    enabled: true,
+  },
+];
+
+const meta = {
+  title: 'Agent Helper/AgentHelperCardList',
+  component: AgentHelperCardList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    items,
+    getAgentName,
+    getAgentIcon,
+  },
+} satisfies Meta<typeof AgentHelperCardList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+  },
+};
+
+export const SingleCard: Story = {
+  args: {
+    items: items.slice(0, 1),
+  },
+};

package/src/stories/AgentHelperMainLayout.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AgentHelperMainLayout } from '../components/agent-helper/agent-helper-main-layout';
+
+const meta: Meta<typeof AgentHelperMainLayout> = {
+  title: 'Agent Helper/AgentHelperMainLayout',
+  component: AgentHelperMainLayout,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: '1060px', height: '600px' }}>
+      <AgentHelperMainLayout>
+        <AgentHelperMainLayout.TopBar>
+          <span style={{ padding: '0 16px', fontSize: 14, color: '#333' }}>TopBar</span>
+        </AgentHelperMainLayout.TopBar>
+        <AgentHelperMainLayout.Main>
+          <AgentHelperMainLayout.SideBar>
+            <div style={{ padding: 12, fontSize: 14, color: '#999' }}>SideBar</div>
+          </AgentHelperMainLayout.SideBar>
+          <AgentHelperMainLayout.Content>
+            <div style={{ padding: 20, fontSize: 14, color: '#999' }}>Content</div>
+          </AgentHelperMainLayout.Content>
+        </AgentHelperMainLayout.Main>
+      </AgentHelperMainLayout>
+    </div>
+  ),
+};
+
+export const NoSidebar: Story = {
+  render: () => (
+    <div style={{ width: '800px', height: '400px' }}>
+      <AgentHelperMainLayout>
+        <AgentHelperMainLayout.TopBar>
+          <span style={{ padding: '0 16px', fontSize: 14, color: '#333' }}>TopBar</span>
+        </AgentHelperMainLayout.TopBar>
+        <AgentHelperMainLayout.Main>
+          <AgentHelperMainLayout.Content>
+            <div style={{ padding: 20, fontSize: 14, color: '#999' }}>Content without SideBar</div>
+          </AgentHelperMainLayout.Content>
+        </AgentHelperMainLayout.Main>
+      </AgentHelperMainLayout>
+    </div>
+  ),
+};
+
+export const CustomWidth: Story = {
+  render: () => (
+    <div style={{ width: '800px', height: '400px' }}>
+      <AgentHelperMainLayout>
+        <AgentHelperMainLayout.TopBar>
+          <span style={{ padding: '0 16px', fontSize: 14, color: '#333' }}>TopBar</span>
+        </AgentHelperMainLayout.TopBar>
+        <AgentHelperMainLayout.Main>
+          <AgentHelperMainLayout.SideBar className="w-[200px]">
+            <div style={{ padding: 12, fontSize: 14, color: '#999' }}>200px SideBar</div>
+          </AgentHelperMainLayout.SideBar>
+          <AgentHelperMainLayout.Content>
+            <div style={{ padding: 20, fontSize: 14, color: '#999' }}>Content</div>
+          </AgentHelperMainLayout.Content>
+        </AgentHelperMainLayout.Main>
+      </AgentHelperMainLayout>
+    </div>
+  ),
+};

package/src/stories/AgentTag.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentTag } from '../components/agent-helper/agent-tag';
+// import type { IOfficeAgent } from '@baishuyun/ai-office/sdk';
+import { IAgentInfo } from '@baishuyun/types';
+
+const sampleAgent: IAgentInfo = {
+  id: 'ai-form-filling',
+  name: 'AI填报',
+  icon: 'https://picsum.photos/28/28',
+};
+
+const meta = {
+  title: 'Agent Helper/AgentTag',
+  component: AgentTag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    agent: sampleAgent,
+  },
+} satisfies Meta<typeof AgentTag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const LongName: Story = {
+  args: {
+    agent: {
+      ...sampleAgent,
+      name: 'AI数据分析助手',
+    },
+  },
+};
+
+export const CustomClass: Story = {
+  args: {
+    agent: sampleAgent,
+    className: 'shadow-md',
+  },
+};

package/src/stories/AppSelect.stories.tsx

@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AppSelect, groupsToAppTreeNodes } from '../components/agent-helper/app-select';
+import type { AppTreeNode } from '../components/agent-helper/app-select';
+import type { IAppGroup } from '@baishuyun/types';
+
+// ── Flat groups mock ──────────────────────────────────────────────
+
+const mockGroups: IAppGroup[] = [
+  {
+    _id: 'g1', name: '常用应用', appcount: 3,
+    apps: [
+      { _id: 'app1', appname: '订单管理系统', parent: 'g1', style: { color: '#4ACCC1', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 1, appStatus: 1, disable_export: false },
+      { _id: 'app2', appname: '客户关系管理', parent: 'g1', style: { color: '#FF8C42', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 1, appStatus: 1, disable_export: false },
+      { _id: 'app3', appname: '财务报表分析', parent: 'g1', style: { color: '#7C5CFC', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 1, appStatus: 1, disable_export: false },
+    ],
+  },
+  {
+    _id: 'g2', name: '协作应用', appcount: 2,
+    apps: [
+      { _id: 'app4', appname: '团队任务看板', parent: 'g2', style: { color: '#0265FF', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 2, appStatus: 1, disable_export: false },
+      { _id: 'app5', appname: '文档协作平台', parent: 'g2', style: { color: '#34C759', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 2, appStatus: 1, disable_export: false },
+    ],
+  },
+  {
+    _id: 'g3', name: '工具应用', appcount: 4,
+    apps: [
+      { _id: 'app6', appname: '数据导出工具', parent: 'g3', style: { color: '#AF52DE', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
+      { _id: 'app7', appname: '自动化工作流', parent: 'g3', style: { color: '#FF9500', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
+      { _id: 'app8', appname: '数据可视化图表', parent: 'g3', style: { color: '#30D158', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 3, appStatus: 1, disable_export: false },
+      { _id: 'app9', appname: 'API接口管理', parent: 'g3', style: { color: '#5E5CE6', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
+    ],
+  },
+];
+
+// ── Multi-level tree mock (matches Figma structure) ──────────────
+
+const mockTreeNodes: AppTreeNode[] = [
+  {
+    id: 'g1', label: '默认分组', type: 'group',
+    children: [
+      {
+        id: 'app1', label: '应用一', type: 'app', color: '#4ACCC1',
+        children: [
+          { id: 'item1a', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#4ACCC1' },
+          {
+            id: 'sg1', label: '我的分组一', type: 'group', color: '#7C5CFC',
+            children: [
+              { id: 'item1b', label: '客户表单', type: 'item', color: '#FF9500' },
+              {
+                id: 'sg1a', label: '我的分组一杠1', type: 'group', color: '#AF52DE',
+                children: [
+                  { id: 'item1c', label: '供应商管理表', type: 'item', color: '#FF8C42' },
+                  { id: 'item1d', label: '客户表单', type: 'item', color: '#FF9500' },
+                ],
+              },
+              {
+                id: 'sg1b', label: '我的分组一杠2', type: 'group', color: '#30D158',
+                children: [
+                  { id: 'item1e', label: '供应商管理表', type: 'item', color: '#FF8C42' },
+                  { id: 'item1f', label: '客户表单', type: 'item', color: '#FF9500' },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'app2', label: '应用二', type: 'app', color: '#FF8C42',
+        children: [
+          { id: 'item2a', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#FF8C42' },
+          { id: 'item2b', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#FF8C42' },
+          { id: 'sg2', label: '我的分组一', type: 'group', color: '#7C5CFC' },
+          {
+            id: 'sg3', label: '我的分组二', type: 'group', color: '#5E5CE6',
+            children: [
+              { id: 'item2c', label: '客户表单', type: 'item', color: '#FF9500' },
+              {
+                id: 'sg3a', label: '我的分组二杠1', type: 'group', color: '#AF52DE',
+                children: [
+                  { id: 'item2d', label: '客户表单', type: 'item', color: '#FF9500' },
+                ],
+              },
+              { id: 'sg3b', label: '我的分组二杠2', type: 'group', color: '#30D158' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'g2', label: '应用分组一', type: 'group',
+    children: [
+      { id: 'app3a', label: '应用一', type: 'app', color: '#0265FF' },
+      { id: 'app3b', label: '应用二', type: 'app', color: '#34C759' },
+    ],
+  },
+];
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof AppSelect> = {
+  title: 'Agent Helper/AppSelect',
+  component: AppSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    nodes: groupsToAppTreeNodes(mockGroups),
+    placeholder: '请选择',
+    searchPlaceholder: '输入应用名称来搜索',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Flat data stories ────────────────────────────────────────────
+
+export const Default: Story = {};
+
+export const SingleSelected: Story = {
+  args: { defaultValue: 'app2' },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    mode: 'multiple',
+    defaultValue: ['app1', 'app4'],
+  },
+};
+
+export const MultiSelectOverflow: Story = {
+  args: {
+    mode: 'multiple',
+    defaultValue: ['app1', 'app2', 'app4', 'app6', 'app7', 'app8', 'app9'],
+    maxVisibleChips: 4,
+  },
+};
+
+export const EmptyGroups: Story = {
+  args: { nodes: [] },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: 'app1' },
+};
+
+export const DisabledMulti: Story = {
+  args: {
+    mode: 'multiple',
+    disabled: true,
+    defaultValue: ['app1', 'app4'],
+  },
+};
+
+// ── Tree structure stories ────────────────────────────────────────
+
+export const TreeStructure: Story = {
+  name: 'Tree — Multi Level',
+  args: {
+    nodes: mockTreeNodes,
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+};
+
+export const TreeWithSelection: Story = {
+  name: 'Tree — Single Selected',
+  args: {
+    nodes: mockTreeNodes,
+    defaultValue: 'item1c',
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+};
+
+export const TreeMultiSelect: Story = {
+  name: 'Tree — Multi Select',
+  args: {
+    nodes: mockTreeNodes,
+    mode: 'multiple',
+    defaultValue: ['item1a', 'item1c', 'item2d'],
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+};
+
+// ── Interactive demo ─────────────────────────────────────────────
+
+export const Interactive: Story = {
+  args: {
+    nodes: mockTreeNodes,
+    mode: 'multiple',
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string | string[]>([]);
+    const [mode, setMode] = useState<'single' | 'multiple'>('multiple');
+    const [useTree, setUseTree] = useState(true);
+
+    const currentNodes = useTree ? mockTreeNodes : groupsToAppTreeNodes(mockGroups);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
+          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <input type="radio" checked={mode === 'single'} onChange={() => { setMode('single'); setValue(''); }} />
+            单选
+          </label>
+          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <input type="radio" checked={mode === 'multiple'} onChange={() => { setMode('multiple'); setValue([]); }} />
+            多选
+          </label>
+          <span style={{ color: '#E0E0E0' }}>|</span>
+          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <input type="checkbox" checked={useTree} onChange={(e) => { setUseTree(e.target.checked); setValue([]); }} />
+            多层树形
+          </label>
+        </div>
+        <AppSelect
+          {...args}
+          nodes={currentNodes}
+          mode={mode}
+          value={value}
+          onChange={(v) => setValue(v)}
+        />
+        <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all', maxWidth: 320 }}>
+          已选择: {JSON.stringify(value)}
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/BorderAnimation.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { BorderAnimation } from '../components/border-animation';
 
 const meta = {
-  title: 'Animation/BorderAnimation',
+  title: 'Example/Animation/BorderAnimation',
   component: BorderAnimation,
   tags: ['autodocs'],
   parameters: {