@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/stories/ConfirmDialog.stories.tsx

@@ -1,123 +1,123 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { ConfirmDialog } from '../components/confirm-dialog';
-
-const meta = {
-  title: 'Example/Chat/ConfirmDialog',
-  component: ConfirmDialog,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  args: {
-    open: true,
-    title: 'AI表单搭建有修改，是否保存？',
-    description: '您修改了AI表单搭建但没有保存，是否需要保存并继续？',
-  },
-  argTypes: {
-    open: { control: 'boolean' },
-    title: { control: 'text' },
-    description: { control: 'text' },
-    linkText: { control: 'text' },
-    cancelText: { control: 'text' },
-    confirmText: { control: 'text' },
-    showLink: { control: 'boolean' },
-    showCancel: { control: 'boolean' },
-    onLinkClick: { action: 'onLinkClick' },
-    onCancel: { action: 'onCancel' },
-    onConfirm: { action: 'onConfirm' },
-    onOpenChange: { action: 'onOpenChange' },
-  },
-} satisfies Meta<typeof ConfirmDialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default story matching the Figma design
-export const Default: Story = {
-  args: {
-    open: true,
-    title: 'AI表单搭建有修改，是否保存？',
-    description: '您修改了AI表单搭建但没有保存，是否需要保存并继续？',
-    linkText: '留在此页',
-    cancelText: '不保存',
-    confirmText: '保存并继续',
-  },
-};
-
-// Without link button
-export const WithoutLink: Story = {
-  args: {
-    open: true,
-    title: '确认删除？',
-    description: '删除后将无法恢复，请确认是否继续。',
-    showLink: false,
-    cancelText: '取消',
-    confirmText: '删除',
-  },
-};
-
-// Without cancel button
-export const WithoutCancel: Story = {
-  args: {
-    open: true,
-    title: '操作成功',
-    description: '您的更改已保存。',
-    showLink: false,
-    showCancel: false,
-    confirmText: '确定',
-  },
-};
-
-// Simple confirmation
-export const SimpleConfirm: Story = {
-  args: {
-    open: true,
-    title: '确认退出？',
-    description: '退出后未保存的内容将会丢失。',
-    showLink: false,
-    cancelText: '取消',
-    confirmText: '确认退出',
-  },
-};
-
-// Interactive example with state management
-const InteractiveDialogWrapper = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div>
-      <button
-        onClick={() => setOpen(true)}
-        className="px-4 py-2 bg-[#0265ff] text-white rounded cursor-pointer"
-      >
-        打开对话框
-      </button>
-      <ConfirmDialog
-        open={open}
-        onOpenChange={setOpen}
-        title="AI表单搭建有修改，是否保存？"
-        description="您修改了AI表单搭建但没有保存，是否需要保存并继续？"
-        onLinkClick={() => {
-          console.log('Link clicked');
-          setOpen(false);
-        }}
-        onCancel={() => {
-          console.log('Cancel clicked');
-          setOpen(false);
-        }}
-        onConfirm={() => {
-          console.log('Confirm clicked');
-          setOpen(false);
-        }}
-      />
-    </div>
-  );
-};
-
-export const Interactive: Story = {
-  render: () => <InteractiveDialogWrapper />,
-  args: {
-    open: false,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { ConfirmDialog } from '../components/confirm-dialog';
+
+const meta = {
+  title: 'Example/Chat/ConfirmDialog',
+  component: ConfirmDialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    open: true,
+    title: 'AI表单搭建有修改，是否保存？',
+    description: '您修改了AI表单搭建但没有保存，是否需要保存并继续？',
+  },
+  argTypes: {
+    open: { control: 'boolean' },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    linkText: { control: 'text' },
+    cancelText: { control: 'text' },
+    confirmText: { control: 'text' },
+    showLink: { control: 'boolean' },
+    showCancel: { control: 'boolean' },
+    onLinkClick: { action: 'onLinkClick' },
+    onCancel: { action: 'onCancel' },
+    onConfirm: { action: 'onConfirm' },
+    onOpenChange: { action: 'onOpenChange' },
+  },
+} satisfies Meta<typeof ConfirmDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story matching the Figma design
+export const Default: Story = {
+  args: {
+    open: true,
+    title: 'AI表单搭建有修改，是否保存？',
+    description: '您修改了AI表单搭建但没有保存，是否需要保存并继续？',
+    linkText: '留在此页',
+    cancelText: '不保存',
+    confirmText: '保存并继续',
+  },
+};
+
+// Without link button
+export const WithoutLink: Story = {
+  args: {
+    open: true,
+    title: '确认删除？',
+    description: '删除后将无法恢复，请确认是否继续。',
+    showLink: false,
+    cancelText: '取消',
+    confirmText: '删除',
+  },
+};
+
+// Without cancel button
+export const WithoutCancel: Story = {
+  args: {
+    open: true,
+    title: '操作成功',
+    description: '您的更改已保存。',
+    showLink: false,
+    showCancel: false,
+    confirmText: '确定',
+  },
+};
+
+// Simple confirmation
+export const SimpleConfirm: Story = {
+  args: {
+    open: true,
+    title: '确认退出？',
+    description: '退出后未保存的内容将会丢失。',
+    showLink: false,
+    cancelText: '取消',
+    confirmText: '确认退出',
+  },
+};
+
+// Interactive example with state management
+const InteractiveDialogWrapper = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(true)}
+        className="px-4 py-2 bg-[#0265ff] text-white rounded cursor-pointer"
+      >
+        打开对话框
+      </button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="AI表单搭建有修改，是否保存？"
+        description="您修改了AI表单搭建但没有保存，是否需要保存并继续？"
+        onLinkClick={() => {
+          console.log('Link clicked');
+          setOpen(false);
+        }}
+        onCancel={() => {
+          console.log('Cancel clicked');
+          setOpen(false);
+        }}
+        onConfirm={() => {
+          console.log('Confirm clicked');
+          setOpen(false);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveDialogWrapper />,
+  args: {
+    open: false,
+  },
+};

package/src/stories/DataTable.stories.tsx

@@ -1,191 +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>
-    );
-  },
-};
+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>
+    );
+  },
+};