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

package/src/stories/collapsible.stories.tsx

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

package/src/stories/drawer.stories.tsx

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