@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/stories/Select.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+} from '../components/ui/select';
+import { Label } from '../components/ui/label';
+
+const meta = {
+  title: 'AI Office/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {} as any,
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="请选择" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">选项一</SelectItem>
+        <SelectItem value="option2">选项二</SelectItem>
+        <SelectItem value="option3">选项三</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithPlaceholder: Story = {
+  args: {} as any,
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="请选择触发方式" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="manual">手动触发</SelectItem>
+        <SelectItem value="auto">自动触发</SelectItem>
+        <SelectItem value="scheduled">定时触发</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {} as any,
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]" disabled>
+        <SelectValue placeholder="已禁用" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">选项一</SelectItem>
+        <SelectItem value="option2">选项二</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithLabel: Story = {
+  args: {} as any,
+  render: () => (
+    <div className="flex flex-col gap-[6px]">
+      <Label>应用范围</Label>
+      <Select>
+        <SelectTrigger className="w-[200px]">
+          <SelectValue placeholder="请选择应用范围" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">全部应用</SelectItem>
+          <SelectItem value="specific">指定应用</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const WithGroups: Story = {
+  args: {} as any,
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[240px]">
+        <SelectValue placeholder="请选择字段类型" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>基础字段</SelectLabel>
+          <SelectItem value="text">单行文本</SelectItem>
+          <SelectItem value="textarea">多行文本</SelectItem>
+          <SelectItem value="number">数字</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>高级字段</SelectLabel>
+          <SelectItem value="select">下拉选择</SelectItem>
+          <SelectItem value="date">日期</SelectItem>
+          <SelectItem value="file">附件</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const DisabledWithValue: Story = {
+  args: {} as any,
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]" disabled>
+        <SelectValue placeholder="已选：选项一" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">选项一</SelectItem>
+        <SelectItem value="option2">选项二</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

package/src/stories/Textarea.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Textarea } from '../components/ui/textarea';
+import { Label } from '../components/ui/label';
+
+const meta = {
+  title: 'AI Office/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: '请输入内容',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: '这是一段示例文本内容。',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: '请输入提示词配置信息',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: '不可编辑的文本内容',
+    disabled: true,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    id: 'textarea-demo',
+    placeholder: '请输入内容',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px] w-[400px]">
+      <Label htmlFor={args.id}>提示词配置</Label>
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const DisabledWithLabel: Story = {
+  args: {
+    id: 'textarea-disabled',
+    defaultValue: '这是不可编辑的文本内容',
+    disabled: true,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px] w-[400px]">
+      <Label htmlFor={args.id}>提示词配置</Label>
+      <Textarea {...args} />
+    </div>
+  ),
+};

package/src/stories/TriggerSelect.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { TriggerSelect } from '../components/agent-helper/trigger-select';
+
+const meta = {
+  title: 'Agent Helper/TriggerSelect',
+  component: TriggerSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {},
+} satisfies Meta<typeof TriggerSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSelection: Story = {
+  args: {
+    value: 'universal',
+  },
+};
+
+const InteractiveComponent = () => {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <TriggerSelect
+        value={value as any}
+        onChange={(v) => setValue(v)}
+      />
+      {value && (
+        <p style={{ fontSize: 14, color: '#666' }}>
+          当前选中: {value}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  args: {} as any,
+  render: () => <InteractiveComponent />,
+};

package/src/stories/TriggerTimePreferenceSelect.stories.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TriggerTimePreferenceSelect } from '../components/agent-helper/trigger-time-preference-select';
+import type { ITriggerTimePreference } from '@baishuyun/types';
+import type { FormSelectItem } from '../components/agent-helper/form-select';
+import type { IField } from '@baishuyun/types';
+
+const mockForms: FormSelectItem[] = [
+  { id: 'form1', name: '采购订单表', icon: 51, type: 'form' },
+  { id: 'form2', name: '客户信息表', icon: 52, type: 'form' },
+  { id: 'form3', name: '供应商管理表', icon: 55, type: 'form' },
+  { id: 'group1', name: '客户资料', icon: 25, itemType: 'group' },
+  { id: 'form4', name: '客户信息表', icon: 53, type: 'form', parent: 'group1' },
+  { id: 'form5', name: '销售报表', icon: 60, type: 'report', parent: 'group1' },
+];
+
+const mockFields: IField[] = [
+  { label: '创建时间', widget: { type: 'datetime', widgetName: 'create_time', value: '' } },
+  { label: '更新日期', widget: { type: 'datetime', widgetName: 'update_date', value: '' } },
+  { label: '截止时间', widget: { type: 'datetime', widgetName: 'deadline', value: '' } },
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text_field', value: '' } },
+  { label: '数字', widget: { type: 'number', widgetName: 'number_field', value: 0 } },
+  { label: '日期时间', widget: { type: 'datetime', widgetName: 'datetime_field', value: '' } },
+];
+
+const meta: Meta<typeof TriggerTimePreferenceSelect> = {
+  title: 'Agent Helper/TriggerTimePreferenceSelect',
+  component: TriggerTimePreferenceSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, maxWidth: 800 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CustomTime: Story = {
+  args: {
+    value: {
+      type: 'custom',
+      customTriggerTimePayload: new Date('2025-06-15').toISOString(),
+    },
+  },
+};
+
+export const DateField: Story = {
+  args: {
+    forms: mockForms,
+    fields: mockFields,
+    value: {
+      type: 'date_field',
+      customTriggerTimePayload: {
+        formId: 'form1',
+        fieldId: 'create_time',
+        dateFieldType: 'datetime',
+        offsetType: 'time',
+        offsetValue: 0,
+        offsetUnit: 'minute',
+      },
+    },
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    forms: mockForms,
+    fields: mockFields,
+  },
+  render: (args) => {
+    const [val, setVal] = useState<ITriggerTimePreference | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <TriggerTimePreferenceSelect
+          {...args}
+          value={val}
+          onChange={setVal}
+        />
+        <div
+          style={{
+            padding: 12,
+            background: '#F5F7FA',
+            borderRadius: 8,
+            fontSize: 13,
+            fontFamily: 'monospace',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-all',
+          }}
+        >
+          <strong>当前值:</strong>
+          <pre style={{ margin: '8px 0 0', fontSize: 12 }}>
+            {val ? JSON.stringify(val, null, 2) : '(未选择)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/TriggerTimeSourceTypeSelect.stories.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TriggerTimeSourceTypeSelect } from '../components/agent-helper/trigger-time-source-type-select';
+import type { triggerTimeSourceType } from '@baishuyun/types';
+
+const meta: Meta<typeof TriggerTimeSourceTypeSelect> = {
+  title: 'Agent Helper/TriggerTimeSourceTypeSelect',
+  component: TriggerTimeSourceTypeSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: 'custom',
+  },
+};
+
+export const DateFieldValue: Story = {
+  args: {
+    value: 'date_field',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'custom',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择时间来源',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<triggerTimeSourceType | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <TriggerTimeSourceTypeSelect
+          {...args}
+          value={val}
+          onChange={setVal}
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>{val ?? '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/WeekdaysSelect.stories.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { WeekdaysSelect, WeekdaysOptions } from '../components/agent-helper/weekdays-select';
+import type { repeatByWeekDetail } from '@baishuyun/types';
+
+const meta: Meta<typeof WeekdaysSelect> = {
+  title: 'Agent Helper/WeekdaysSelect',
+  component: WeekdaysSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: ['mon', 'wed', 'fri'],
+  },
+};
+
+export const AllSelected: Story = {
+  args: {
+    value: WeekdaysOptions.map((o) => o.value),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: ['mon', 'tue'],
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择重复的星期',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<repeatByWeekDetail[]>([]);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <WeekdaysSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>
+            {val.length > 0 ? val.join(', ') : '(未选择)'}
+          </span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/drawer.stories.tsx

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerCloseButton,
+  DrawerClose,
+} from '../components/ui/drawer';
+import { Button } from '../components/ui/button';
+
+const meta = {
+  title: 'Agent Helper/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderDrawer = (children: React.ReactNode, footer?: React.ReactNode) => {
+  function DemoDrawer() {
+    const [open, setOpen] = useState(false);
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button>打开抽屉</Button>
+        </DrawerTrigger>
+        <DrawerContent className='h-[calc(100vh-52px)]'>
+          <DrawerHeader>
+            <DrawerTitle>智能体设置</DrawerTitle>
+            <DrawerCloseButton />
+          </DrawerHeader>
+          <DrawerBody>
+            {children}
+          </DrawerBody>
+          {footer}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+  return <DemoDrawer />;
+};
+
+export const Default: Story = {
+  render: () =>
+    renderDrawer(
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          智能体可以对表单数据进行XXX，并在表单中再次调用。
+        </p>
+        <p className="text-sm text-muted-foreground">
+          常用于进-销-存等场景。
+          <span className="text-[#0265ff] underline cursor-pointer">了解详情</span>
+        </p>
+        <Button className="bg-[#0265ff] hover:bg-[#0265ff]/90 text-white">新建智能体</Button>
+      </div>,
+      <DrawerFooter>
+        <Button className="bg-[#0265ff] hover:bg-[#0265ff]/90 text-white w-[94px]">保存</Button>
+        <Button variant="outline" className="border-[#E0E0E0] text-[#030303] w-[94px]">取消</Button>
+      </DrawerFooter>
+    ),
+};
+
+export const WithScrollableContent: Story = {
+  render: () =>
+    renderDrawer(
+      <div className="space-y-4">
+        {Array.from({ length: 20 }, (_, i) => (
+          <div key={i} className="p-4 border rounded-lg">
+            <h4 className="font-medium mb-2">选项 {i + 1}</h4>
+            <p className="text-sm text-muted-foreground">
+              这是第 {i + 1} 个选项的描述内容，用于演示抽屉内容区域的滚动行为。
+            </p>
+          </div>
+        ))}
+      </div>,
+      <DrawerFooter>
+        <Button className="bg-[#0265ff] hover:bg-[#0265ff]/90 text-white rounded w-[94px]">保存</Button>
+        <DrawerClose asChild>
+          <Button variant="outline" className="border-[#E0E0E0] text-[#030303] rounded w-[94px]">取消</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    ),
+};
+
+export const WithoutFooter: Story = {
+  render: () =>
+    renderDrawer(
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          这是一个没有底部操作栏的抽屉，内容区域会自动填充剩余空间。
+        </p>
+        <div className="p-4 border rounded-lg">
+          <h4 className="font-medium mb-2">说明</h4>
+          <p className="text-sm text-muted-foreground">
+            当不需要操作按钮时，可以省略 DrawerFooter 组件。
+          </p>
+        </div>
+      </div>
+    ),
+};
+
+export const CustomHeight: Story = {
+  render: () => {
+    function CustomHeightDrawer() {
+      const [open, setOpen] = useState(false);
+      return (
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
+            <Button>打开抽屉</Button>
+          </DrawerTrigger>
+          <DrawerContent className="max-h-[600px]">
+            <DrawerHeader>
+              <DrawerTitle>自定义高度</DrawerTitle>
+              <DrawerCloseButton />
+            </DrawerHeader>
+            <DrawerBody>
+              <div className="space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  这个抽屉通过 className 设置了 max-h-[600px]，覆盖了默认的 max-h-[90vh]。
+                </p>
+              </div>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button className="bg-[#0265ff] hover:bg-[#0265ff]/90 text-white rounded w-[94px]">保存</Button>
+              <Button variant="outline" className="border-[#E0E0E0] text-[#030303] rounded w-[94px]">取消</Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      );
+    }
+    return <CustomHeightDrawer />;
+  },
+};
+
+export const FormContent: Story = {
+  render: () => {
+    function FormDrawer() {
+      const [open, setOpen] = useState(false);
+      return (
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
+            <Button>编辑信息</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>编辑智能体信息</DrawerTitle>
+              <DrawerCloseButton />
+            </DrawerHeader>
+            <DrawerBody>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium mb-1.5 block">名称</label>
+                  <input
+                    className="w-full h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    defaultValue="智能体名称"
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium mb-1.5 block">描述</label>
+                  <textarea
+                    className="w-full min-h-[80px] rounded-md border border-input bg-transparent px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    defaultValue="这是一个智能体描述"
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium mb-1.5 block">类型</label>
+                  <select className="w-full h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+                    <option>表单搭建</option>
+                    <option>数据查询</option>
+                    <option>表单填写</option>
+                  </select>
+                </div>
+              </div>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button className="bg-[#0265ff] hover:bg-[#0265ff]/90 text-white rounded w-[94px]">保存</Button>
+              <DrawerClose asChild>
+                <Button variant="outline" className="border-[#E0E0E0] text-[#030303] rounded w-[94px]">取消</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      );
+    }
+    return <FormDrawer />;
+  },
+};