@baishuyun/ai-design 1.0.2 → 1.0.4

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 />;
+  },
+};

package/src/stories/field-checker-list-msg.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldCheckerListMsg, FieldValueCheckerListMsg } from "../components/field-checker-list-msg";
+import { FieldIcon } from "../components/field-icon";
+import type { FieldCheckerProps } from "../components/field-checker";
+import type { FieldValueCheckerProps } from "../components/field-value-checker";
+
+const makeField = (label: string, type = "text"): FieldCheckerProps["field"] => ({
+  label,
+  widget: { widgetName: label, type },
+});
+
+const makeCheckerFields = (): FieldCheckerProps[] => [
+  { field: makeField("供应商名称", "text"), icon: <FieldIcon type="text" />, onChange: (c, f) => console.log("change", c, f.label) },
+  { field: makeField("联系方式", "text"), icon: <FieldIcon type="text" />, onChange: (c, f) => console.log("change", c, f.label) },
+  { field: makeField("地址", "location"), icon: <FieldIcon type="location" />, onChange: (c, f) => console.log("change", c, f.label) },
+  { field: makeField("供应商等级", "radiogroup"), icon: <FieldIcon type="radiogroup" />, onChange: (c, f) => console.log("change", c, f.label) },
+];
+
+const makeFilledFields = (): FieldValueCheckerProps[] => [
+  { field: { label: "供应商名称", widget: { widgetName: "name", type: "text", value: "腾讯科技" } }, onChange: () => {} },
+  { field: { label: "联系电话", widget: { widgetName: "phone", type: "text", value: "0755-86013388" } }, onChange: () => {} },
+  { field: { label: "员工数量", widget: { widgetName: "count", type: "number", value: 50000 } }, onChange: () => {} },
+];
+
+const meta: Meta<typeof FieldCheckerListMsg> = {
+  title: "Example/Chat/FieldCheckerListMsg",
+  component: FieldCheckerListMsg,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 500 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldCheckerListMsg>;
+
+export const Default: Story = {
+  args: {
+    fields: makeCheckerFields(),
+    streaming: false,
+  },
+};
+
+export const StreamingState: Story = {
+  args: {
+    fields: makeCheckerFields(),
+    streaming: true,
+  },
+};
+
+export const ConfirmedState: Story = {
+  args: {
+    fields: makeCheckerFields(),
+    streaming: false,
+    confirmed: true,
+  },
+};
+
+export const FieldValueCheckerListMsgDefault: Story = {
+  args: {
+    fields: [],
+    streaming: false,
+  },
+  render: () => (
+    <div style={{ width: 500 }}>
+      <FieldValueCheckerListMsg
+        props={makeFilledFields()}
+        streaming={false}
+      />
+    </div>
+  ),
+};
+
+export const FieldValueCheckerListMsgStreaming: Story = {
+  args: {
+    fields: [],
+    streaming: false,
+  },
+  render: () => (
+    <div style={{ width: 500 }}>
+      <FieldValueCheckerListMsg
+        props={makeFilledFields()}
+        streaming={true}
+      />
+    </div>
+  ),
+};

package/src/stories/field-checker.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldChecker } from "../components/field-checker";
+import { FieldIcon } from "../components/field-icon";
+import type { FieldCheckerProps } from "../components/field-checker";
+
+const makeField = (overrides: Partial<FieldCheckerProps["field"]> = {}): FieldCheckerProps["field"] => ({
+  label: "供应商名称",
+  widget: {
+    widgetName: "supplier_name",
+    type: "text",
+    ...overrides.widget,
+  },
+  ...overrides,
+});
+
+const meta: Meta<typeof FieldChecker> = {
+  title: "Example/Chat/FieldChecker",
+  component: FieldChecker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldChecker>;
+
+export const Default: Story = {
+  args: {
+    field: makeField(),
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const WithOptions: Story = {
+  args: {
+    field: {
+      label: "供应商等级",
+      widget: {
+        widgetName: "supplier_level",
+        type: "radiogroup",
+        items: [
+          { value: "A", text: "A级", color: "#52c41a" },
+          { value: "B", text: "B级", color: "#1677ff" },
+          { value: "C", text: "C级", color: "#fa8c16" },
+        ],
+      },
+    },
+    icon: <FieldIcon type="radiogroup" />,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    field: makeField({ widget: { widgetName: "supplier_name", type: "text" } }),
+    value: "深圳市腾讯计算机系统有限公司",
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const Subform: Story = {
+  args: {
+    field: {
+      label: "联系方式",
+      widget: {
+        widgetName: "contact_info",
+        type: "subform",
+        items: [
+          {
+            label: "联系人",
+            widget: { widgetName: "contact_name", type: "text" },
+          },
+          {
+            label: "电话",
+            widget: { widgetName: "contact_phone", type: "text" },
+          },
+        ],
+      },
+    },
+    icon: <FieldIcon type="subform" />,
+    onChange: (checked, field, parentFieldName, index) => {
+      console.log("FieldChecker onChange:", { checked, field: field.label, parentFieldName, index });
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    field: makeField(),
+    disabled: true,
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const Confirmed: Story = {
+  args: {
+    field: makeField(),
+    confirmed: true,
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    field: makeField(),
+    streaming: true,
+    icon: <FieldIcon type="text" />,
+  },
+};

package/src/stories/field-icon.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldIcon } from "../components/field-icon";
+
+const meta: Meta<typeof FieldIcon> = {
+  title: "Example/Chat/FieldIcon",
+  component: FieldIcon,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldIcon>;
+
+export const Text: Story = {
+  args: { type: "text" },
+};
+
+export const Number: Story = {
+  args: { type: "number" },
+};
+
+export const Datetime: Story = {
+  args: { type: "datetime" },
+};
+
+export const Subform: Story = {
+  args: { type: "subform" },
+};
+
+export const Formula: Story = {
+  args: { type: "formula" },
+};
+
+export const Location: Story = {
+  args: { type: "location" },
+};
+
+export const Upload: Story = {
+  args: { type: "upload" },
+};
+
+export const Unknown: Story = {
+  args: { type: "unknown" },
+};
+
+export const AllIcons: Story = {
+  args: { type: "text" },
+  render: () => {
+    const types = [
+      "text", "number", "datetime", "location", "address", "subform",
+      "password", "textarea", "radiogroup", "radio", "combo", "combocheck",
+      "checkboxgroup", "separator", "upload", "image", "signature", "button",
+      "user", "usergroup", "dept", "deptgroup", "dataload", "linkdata",
+      "linkquery", "sn", "formula", "flowState", "unknown",
+    ] as const;
+    return (
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
+        {types.map((type) => (
+          <div key={type} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
+            <FieldIcon type={type} />
+            <span style={{ fontSize: 11 }}>{type}</span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

package/src/stories/field-value-checker.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldValueChecker } from "../components/field-value-checker";
+import type { FieldValueCheckerProps } from "../components/field-value-checker";
+
+const makeField = (overrides: Partial<FieldValueCheckerProps["field"]> = {}): FieldValueCheckerProps["field"] => ({
+  label: "供应商名称",
+  widget: {
+    widgetName: "supplier_name",
+    type: "text",
+    value: "深圳市腾讯计算机系统有限公司",
+    ...overrides.widget,
+  },
+  ...overrides,
+});
+
+const meta: Meta<typeof FieldValueChecker> = {
+  title: "Example/Chat/FieldValueChecker",
+  component: FieldValueChecker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldValueChecker>;
+
+export const Default: Story = {
+  args: {
+    field: makeField(),
+  },
+};
+
+export const NumberField: Story = {
+  args: {
+    field: makeField({
+      widget: { widgetName: "count", type: "number", value: 42 },
+    }),
+  },
+};
+
+export const Address: Story = {
+  args: {
+    field: {
+      label: "公司地址",
+      widget: {
+        widgetName: "address",
+        type: "address",
+        value: { province: "广东省", city: "深圳市", district: "南山区", detail: "科技园路1号" },
+      },
+    },
+  },
+};
+
+export const LocationField: Story = {
+  args: {
+    field: {
+      label: "位置",
+      widget: {
+        widgetName: "location",
+        type: "location",
+        value: { lnglatXY: ["113.946", "22.547"] },
+      },
+    },
+  },
+};
+
+export const SubForm: Story = {
+  args: {
+    field: {
+      label: "联系方式",
+      widget: {
+        widgetName: "contact_info",
+        type: "subform",
+        value: [
+          [
+            { label: "联系人", fieldName: "name", fieldType: "text", value: "张三" },
+            { label: "电话", fieldName: "phone", fieldType: "text", value: "13800138000" },
+          ],
+          [
+            { label: "联系人", fieldName: "name", fieldType: "text", value: "李四" },
+            { label: "电话", fieldName: "phone", fieldType: "text", value: "13900139000" },
+          ],
+        ],
+      },
+    },
+    onChange: (checked, field, parentFieldName, row) => {
+      console.log("FieldValueChecker onChange:", { checked, field: field.label, parentFieldName, row });
+    },
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    field: makeField(),
+    readonly: true,
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    field: makeField(),
+    streaming: true,
+  },
+};

package/src/stories/subform-fields-value-checker.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { SubformFieldsValueChecker } from "../components/subform-fields-value-checker";
+
+const meta: Meta<typeof SubformFieldsValueChecker> = {
+  title: "Example/Chat/SubformFieldsValueChecker",
+  component: SubformFieldsValueChecker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 450 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SubformFieldsValueChecker>;
+
+export const SingleRow: Story = {
+  args: {
+    subformField: {
+      label: "联系方式",
+      widget: {
+        widgetName: "contact_info",
+        type: "subform",
+        value: [
+          [
+            { label: "联系人", fieldName: "name", fieldType: "text", value: "张三" },
+            { label: "电话", fieldName: "phone", fieldType: "text", value: "13800138000" },
+            { label: "邮箱", fieldName: "email", fieldType: "text", value: "zhangsan@test.com" },
+          ],
+        ],
+      },
+    },
+    onChange: (p) => {
+      console.log("SubformFieldsValueChecker onChange:", p);
+    },
+  },
+};
+
+export const MultipleRows: Story = {
+  args: {
+    subformField: {
+      label: "采购清单",
+      widget: {
+        widgetName: "purchase_list",
+        type: "subform",
+        value: [
+          [
+            { label: "品名", fieldName: "item_name", fieldType: "text", value: "笔记本电脑" },
+            { label: "数量", fieldName: "quantity", fieldType: "number", value: 10 },
+            { label: "单价", fieldName: "price", fieldType: "number", value: 5999 },
+          ],
+          [
+            { label: "品名", fieldName: "item_name", fieldType: "text", value: "显示器" },
+            { label: "数量", fieldName: "quantity", fieldType: "number", value: 5 },
+            { label: "单价", fieldName: "price", fieldType: "number", value: 1999 },
+          ],
+          [
+            { label: "品名", fieldName: "item_name", fieldType: "text", value: "键盘" },
+            { label: "数量", fieldName: "quantity", fieldType: "number", value: 15 },
+            { label: "单价", fieldName: "price", fieldType: "number", value: 299 },
+          ],
+        ],
+      },
+    },
+    onChange: (p) => {
+      console.log("SubformFieldsValueChecker onChange:", p);
+    },
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    subformField: {
+      label: "联系方式",
+      widget: {
+        widgetName: "contact_info",
+        type: "subform",
+        value: [
+          [
+            { label: "联系人", fieldName: "name", fieldType: "text", value: "张三" },
+            { label: "电话", fieldName: "phone", fieldType: "text", value: "13800138000" },
+          ],
+        ],
+      },
+    },
+    readonly: true,
+    onChange: (p) => {
+      console.log("SubformFieldsValueChecker onChange:", p);
+    },
+  },
+};