@baishuyun/ai-design 1.0.2 → 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/collapsible.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../components/collapsible";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Example/Chat/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <CollapsibleTrigger className="px-4 py-2 bg-[#EFF0F6] rounded cursor-pointer">
+          点击展开/收起
+        </CollapsibleTrigger>
+        <CollapsibleContent className="px-4 py-2">
+          <p>这是可折叠的内容区域。</p>
+          <p>可以放置任意内容。</p>
+        </CollapsibleContent>
+      </>
+    ),
+  },
+};
+
+export const DefaultOpen: Story = {
+  args: {
+    defaultOpen: true,
+    children: (
+      <>
+        <CollapsibleTrigger className="px-4 py-2 bg-[#EFF0F6] rounded cursor-pointer">
+          默认展开状态
+        </CollapsibleTrigger>
+        <CollapsibleContent className="px-4 py-2">
+          <p>默认展开的内容。</p>
+        </CollapsibleContent>
+      </>
+    ),
+  },
+};