@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/stories/ConditonQuantifierSelect.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { ConditonQuantifierSelect } from '../components/agent-helper/condition-quantifier-select';
+import type { quantifier } from '@baishuyun/types';
+
+const meta = {
+  title: 'Agent Helper/ConditonQuantifierSelect',
+  component: ConditonQuantifierSelect,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    defaultValue: 'all',
+    disabled: false,
+  },
+} satisfies Meta<typeof ConditonQuantifierSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'all',
+  },
+};
+
+export const AnySelected: Story = {
+  args: {
+    defaultValue: 'any',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'all',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<quantifier>('all');
+
+    return (
+      <div className="flex items-center gap-[12px]">
+        <ConditonQuantifierSelect value={value} onChange={setValue} />
+        <span className="text-[14px] text-[#666666]">
+          当前值: {value === 'all' ? '所有' : '任意'}
+        </span>
+      </div>
+    );
+  },
+};

package/src/stories/ConditonTriggerDescription.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { ConditonTriggerDescription } from '../components/agent-helper/condition-trigger-description';
+import type { quantifier } from '@baishuyun/types';
+
+const meta = {
+  title: 'Agent Helper/ConditionTriggerDescription',
+  component: ConditonTriggerDescription,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    targetName: '提交',
+    defaultQuantifier: 'all',
+  },
+} satisfies Meta<typeof ConditonTriggerDescription>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    targetName: '提交',
+  },
+};
+
+export const AnyQuantifier: Story = {
+  args: {
+    targetName: '审批',
+    defaultQuantifier: 'any',
+  },
+};
+
+export const CustomPrefixAndSuffix: Story = {
+  args: {
+    targetName: '请假',
+    quantifierPrefixStr: '的数据',
+    quantifierSuffixStr: '满足后执行自动化操作',
+    defaultQuantifier: 'all',
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<quantifier>('all');
+
+    return (
+      <div className="flex flex-col gap-[12px]">
+        <ConditonTriggerDescription
+          targetName="报销"
+          quantifier={value}
+          onQuantifierChange={setValue}
+        />
+        <span className="text-[14px] text-[#666666]">
+          quantifier = {value === 'all' ? '所有' : '任意'}
+        </span>
+      </div>
+    );
+  },
+};

package/src/stories/DataTable.stories.tsx

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { createColumnHelper } from '@tanstack/react-table';
+import { DataTable } from '../components/agent-helper/table';
+
+type LogRecord = {
+  time: string;
+  person: string;
+  triggerType: string;
+  triggerAction: { label: string; linkText?: string };
+  result: { label: string; description: string };
+  tokenCount: string;
+};
+
+const columnHelper = createColumnHelper<LogRecord>();
+
+const logColumns = [
+  columnHelper.accessor('time', {
+    header: '执行时间',
+    cell: (info) => info.getValue(),
+    size: 200,
+  }),
+  columnHelper.accessor('person', {
+    header: '执行人',
+    cell: (info) => info.getValue(),
+    size: 140,
+  }),
+  columnHelper.accessor('triggerType', {
+    header: '触发类型',
+    cell: (info) => info.getValue(),
+    size: 146,
+  }),
+  columnHelper.accessor('triggerAction', {
+    header: '触发动作',
+    cell: (info) => {
+      const { label, linkText } = info.getValue();
+      return (
+        <div className="flex flex-col gap-[10px]">
+          <span className="text-[#999]">{label}</span>
+          {linkText ? (
+            <span>
+              采购单【<span className="text-[#0265ff]">{linkText}</span>】
+            </span>
+          ) : null}
+        </div>
+      );
+    },
+    size: 280,
+  }),
+  columnHelper.accessor('result', {
+    header: '执行结果',
+    cell: (info) => {
+      const { label, description } = info.getValue();
+      return (
+        <div className="flex flex-col gap-[10px]">
+          <span className="text-[#999]">{label}</span>
+          <span>{description}</span>
+        </div>
+      );
+    },
+    size: 400,
+  }),
+  columnHelper.accessor('tokenCount', {
+    header: 'token消耗数',
+    cell: (info) => info.getValue(),
+  }),
+];
+
+const sampleData: LogRecord[] = [
+  {
+    time: '2026-05-21 17:30:58',
+    person: '小胡',
+    triggerType: '自动触发',
+    triggerAction: { label: '新增数据：', linkText: '采购单-0020' },
+    result: { label: '修改数据：', description: '入库单（0条，没有可修改的数据）' },
+    tokenCount: '1.2K',
+  },
+  {
+    time: '2026-05-21 17:30:58',
+    person: '小胡',
+    triggerType: '自动触发',
+    triggerAction: { label: '新增数据：', linkText: '采购单-0021' },
+    result: { label: '修改数据：', description: '入库单（0条，没有可修改的数据）' },
+    tokenCount: '1.2K',
+  },
+  {
+    time: '2026-05-21 17:30:58',
+    person: '小胡',
+    triggerType: '自动触发',
+    triggerAction: { label: '新增数据：', linkText: '采购单-0050' },
+    result: { label: '修改数据：', description: '入库单（0条，没有可修改的数据）' },
+    tokenCount: '1.2K',
+  },
+  {
+    time: '2026-05-21 17:30:58',
+    person: '小胡',
+    triggerType: '自动触发',
+    triggerAction: { label: '新增数据：', linkText: '采购单-0020' },
+    result: { label: '修改数据：', description: '入库单（0条，没有可修改的数据）' },
+    tokenCount: '1.2K',
+  },
+  {
+    time: '2026-05-21 17:30:58',
+    person: '小胡',
+    triggerType: '自动触发',
+    triggerAction: { label: '新增数据：', linkText: '采购单-0020' },
+    result: { label: '修改数据：', description: '入库单（0条，没有可修改的数据）' },
+    tokenCount: '1.2K',
+  },
+  {
+    time: '2026-05-21 17:30:58',
+    person: '小胡',
+    triggerType: '自动触发',
+    triggerAction: { label: '新增数据：', linkText: '采购单-0020' },
+    result: { label: '修改数据：', description: '入库单（0条，没有可修改的数据）' },
+    tokenCount: '1.2K',
+  },
+];
+
+const meta = {
+  title: 'Agent Helper/DataTable',
+  component: DataTable,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    columns: logColumns,
+    data: sampleData,
+  },
+} satisfies Meta<typeof DataTable<LogRecord>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LogTable: Story = {
+  render: (args) => (
+    <div style={{ width: 800 }}>
+      <DataTable {...args} />
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  args: {
+    data: [],
+    emptyText: '您还没有执行日志',
+  },
+  render: (args) => (
+    <div style={{ width: 800 }}>
+      <DataTable {...args} />
+    </div>
+  ),
+};
+
+export const CustomEmpty: Story = {
+  args: {
+    data: [],
+    emptyText: '没有任何记录',
+  },
+  render: (args) => (
+    <div style={{ width: 800 }}>
+      <DataTable {...args} />
+    </div>
+  ),
+};
+
+export const SimpleTable: Story = {
+  render: () => {
+    type Person = { name: string; age: number; role: string };
+
+    const personHelper = createColumnHelper<Person>();
+
+    const simpleColumns = [
+      personHelper.accessor('name', { header: '姓名' }),
+      personHelper.accessor('age', { header: '年龄' }),
+      personHelper.accessor('role', { header: '角色' }),
+    ];
+
+    const simpleData: Person[] = [
+      { name: '张三', age: 28, role: '前端工程师' },
+      { name: '李四', age: 32, role: '后端工程师' },
+      { name: '王五', age: 25, role: '产品经理' },
+    ];
+
+    return (
+      <div style={{ width: 600 }}>
+        <DataTable columns={simpleColumns} data={simpleData} />
+      </div>
+    );
+  },
+};

package/src/stories/DatePicker.stories.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from '../components/agent-helper/date-picker/date-picker';
+import { DateInput } from '../components/agent-helper/date-picker/date-input';
+import type { DateFormat } from '../components/agent-helper/date-picker/types';
+
+// ── DatePicker Stories ──────────────────────────────────────────────────
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Agent Helper/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 40 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { format: 'yyyy-MM-dd' },
+};
+
+export const WithInitialValue: Story = {
+  args: { value: new Date(2026, 4, 15), format: 'yyyy-MM-dd' },
+};
+
+export const DateTimeWithSeconds: Story = {
+  args: { value: new Date(2026, 4, 15, 14, 30, 45), format: 'yyyy-MM-dd HH:mm:ss' },
+};
+
+export const DateTimeWithMinutes: Story = {
+  args: { value: new Date(2026, 4, 15, 14, 30), format: 'yyyy-MM-dd HH:mm' },
+};
+
+export const TimeOnlyWithSeconds: Story = {
+  args: { value: new Date(2026, 0, 1, 14, 30, 45), format: 'HH:mm:ss' },
+};
+
+export const HourMinuteOnly: Story = {
+  args: { value: new Date(2026, 0, 1, 14, 30), format: 'HH:mm' },
+};
+
+export const MonthOnly: Story = {
+  args: { value: new Date(2026, 4, 1), format: 'yyyy-MM' },
+};
+
+export const YearOnly: Story = {
+  args: { value: new Date(2026, 0, 1), format: 'yyyy' },
+};
+
+export const WithDateRange: Story = {
+  args: { format: 'yyyy-MM-dd', minDate: new Date(2026, 0, 1), maxDate: new Date(2026, 11, 31) },
+};
+
+export const WithDateTimeRange: Story = {
+  args: {
+    value: new Date(2026, 4, 15, 12, 0, 0),
+    format: 'yyyy-MM-dd HH:mm:ss',
+    minDate: new Date(2026, 4, 1, 8, 0, 0),
+    maxDate: new Date(2026, 4, 31, 18, 0, 0),
+  },
+};
+
+export const DisabledToday: Story = {
+  args: { format: 'yyyy-MM-dd', maxDate: new Date(2020, 0, 1) },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<Date | undefined>(
+      args.value ? new Date(args.value as Date) : undefined
+    );
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <DatePicker
+          {...(args as any)}
+          value={val}
+          onChange={(date) => setVal(date ?? undefined)}
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值: </strong>
+          <span>{val ? val.toLocaleString() : '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+  args: { format: 'yyyy-MM-dd' as DateFormat },
+};
+
+// ── DateInput Stories ───────────────────────────────────────────────────
+
+export const DateInputDefault: StoryObj<typeof DateInput> = {
+  render: () => <DateInput />,
+  name: 'DateInput / Default',
+};
+
+export const DateInputWithValue: StoryObj<typeof DateInput> = {
+  render: () => <DateInput value={new Date(2026, 4, 15)} format="yyyy-MM-dd" />,
+  name: 'DateInput / With Value',
+};
+
+export const DateInputDateTime: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput
+      value={new Date(2026, 4, 15, 14, 30, 45)}
+      format="yyyy-MM-dd HH:mm:ss"
+    />
+  ),
+  name: 'DateInput / DateTime',
+};
+
+export const DateInputTimeOnly: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput value={new Date(2026, 0, 1, 14, 30, 0)} format="HH:mm" />
+  ),
+  name: 'DateInput / Time Only',
+};
+
+export const DateInputMonthOnly: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput value={new Date(2026, 4, 1)} format="yyyy-MM" />
+  ),
+  name: 'DateInput / Month Only',
+};
+
+export const DateInputYearOnly: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput value={new Date(2026, 0, 1)} format="yyyy" />
+  ),
+  name: 'DateInput / Year Only',
+};
+
+export const DateInputWithRange: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput
+      format="yyyy-MM-dd"
+      minDate={new Date(2026, 4, 1)}
+      maxDate={new Date(2026, 4, 31)}
+    />
+  ),
+  name: 'DateInput / With Range',
+};
+
+export const DateInputDisabled: StoryObj<typeof DateInput> = {
+  render: () => <DateInput value={new Date(2026, 4, 15)} disabled />,
+  name: 'DateInput / Disabled',
+};
+
+export const DateInputInteractive: StoryObj<typeof DateInput> = {
+  render: () => {
+    const [val, setVal] = useState<Date | undefined>();
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <DateInput
+          value={val}
+          onChange={(date) => setVal(date ?? undefined)}
+          format="yyyy-MM-dd HH:mm:ss"
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值: </strong>
+          <span>{val ? val.toLocaleString() : '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+  name: 'DateInput / Interactive',
+};

package/src/stories/ExecLogFilter.stories.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ExecLogFilter } from '../components/agent-helper/exec-log-filter';
+import type { ExecLogFilterValue } from '../components/agent-helper/exec-log-filter';
+import { subDays } from 'date-fns';
+
+const mockExecUserOptions = [
+  { value: 'user1', label: '张三' },
+  { value: 'user2', label: '李四' },
+  { value: 'user3', label: '王五' },
+  { value: 'user4', label: '赵六' },
+];
+
+const mockExecResultOptions = [
+  { value: 'success', label: '执行成功' },
+  { value: 'failure', label: '执行失败' },
+  { value: 'timeout', label: '执行超时' },
+];
+
+const meta: Meta<typeof ExecLogFilter> = {
+  title: 'Agent Helper/ExecLogFilter',
+  component: ExecLogFilter,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {
+    execUserOptions: mockExecUserOptions,
+    execResultOptions: mockExecResultOptions,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, minWidth: 1200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: {
+      dateRange: {
+        from: subDays(new Date(), 7),
+        to: new Date(),
+      },
+      triggerType: 'scheduler',
+      execResult: 'success',
+    },
+  },
+};
+
+export const AllOptionsProvided: Story = {
+  args: {
+    execUserOptions: [
+      { value: 'user1', label: '张三(管理员)' },
+      { value: 'user2', label: '李四(编辑者)' },
+      { value: 'user3', label: '王五(查看者)' },
+      { value: 'user4', label: '赵六(开发者)' },
+      { value: 'user5', label: '孙七(测试员)' },
+      { value: 'user6', label: '周八(运维)' },
+    ],
+    execResultOptions: [
+      { value: 'success', label: '执行成功' },
+      { value: 'failure', label: '执行失败' },
+      { value: 'timeout', label: '执行超时' },
+      { value: 'cancelled', label: '已取消' },
+    ],
+  },
+};
+
+export const EmptyOptions: Story = {
+  args: {
+    execUserOptions: [],
+    execResultOptions: [],
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [filterValue, setFilterValue] = useState<ExecLogFilterValue>({});
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <ExecLogFilter
+          {...args}
+          value={filterValue}
+          onChange={setFilterValue}
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前筛选值:</strong>
+          <pre style={{ marginTop: 8, fontSize: 12 }}>
+            {JSON.stringify(filterValue, (_key, val) =>
+              val instanceof Date ? val.toISOString() : val, 2
+            )}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    execUserOptions: mockExecUserOptions,
+    execResultOptions: mockExecResultOptions,
+  },
+};
+
+export const WithFilterCallback: Story = {
+  render: (args) => {
+    const [lastFiltered, setLastFiltered] = useState<ExecLogFilterValue | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <ExecLogFilter
+          {...args}
+          onFilter={(v) => setLastFiltered(v)}
+        />
+        {lastFiltered && (
+          <div style={{ padding: 12, background: '#F0F6FF', borderRadius: 8, fontSize: 14 }}>
+            <strong>筛选已触发:</strong>
+            <pre style={{ marginTop: 8, fontSize: 12 }}>
+              {JSON.stringify(lastFiltered, (_key, val) =>
+                val instanceof Date ? val.toISOString() : val, 2
+              )}
+            </pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    execUserOptions: mockExecUserOptions,
+    execResultOptions: mockExecResultOptions,
+  },
+};
+
+export const NarrowContainer: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, width: 900 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};