@baishuyun/ai-design 1.0.0

package/src/stories/LinearGradientBorderBtn.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { LinearGradientBorderBtn } from "../components/linear-gradient-border-btn";
+import { LetterAIcon } from "../components/bs-icons";
+
+const meta = {
+  title: "Example/Button/LinearGradientBorderBtn",
+  component: LinearGradientBorderBtn,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof LinearGradientBorderBtn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "搭建供应商评估表",
+  },
+};
+
+export const ShortText: Story = {
+  args: {
+    children: "确认",
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    children: "创建新的供应商管理表单并提交审核",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "搭建供应商评估表",
+    disabled: true,
+  },
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    children: "点击我",
+    onClick: () => alert("按钮被点击了！"),
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    children: "自定义样式",
+    className: "w-[200px]",
+  },
+};
+
+export const MultipleButtons: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <LinearGradientBorderBtn>取消</LinearGradientBorderBtn>
+      <LinearGradientBorderBtn>确定</LinearGradientBorderBtn>
+      <LinearGradientBorderBtn>提交</LinearGradientBorderBtn>
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <div className="flex items-center gap-1">
+        <LetterAIcon />
+        <span>添加表单</span>
+      </div>
+    ),
+  },
+};
+
+export const FixedWidth: Story = {
+  args: {
+    children: "固定宽度按钮",
+    className: "w-[160px]",
+  },
+};

package/src/stories/LinearGradientColorBgAnimation.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { LinearGradientColorBgAnimation } from "../components/linear-gradient-color-bg-animation";
+
+const meta = {
+  title: "Example/Animation/LinearGradientColorBgAnimation",
+  component: LinearGradientColorBgAnimation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof LinearGradientColorBgAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    width: '976px',
+    height: '52px',
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    width: '100vw',
+    height: '400px',
+  },
+  render: (args) => (
+    <LinearGradientColorBgAnimation {...args}>
+      <div style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        height: '100%',
+        color: '#333',
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <h1 style={{ margin: '0 0 16px 0', fontSize: '48px' }}>Flowing Gradient</h1>
+          <p style={{ margin: 0, fontSize: '20px' }}>Natural animated background</p>
+        </div>
+      </div>
+    </LinearGradientColorBgAnimation>
+  ),
+};
+
+export const FixedSize: Story = {
+  args: {
+    width: '800px',
+    height: '300px',
+  },
+};
+
+export const TallSize: Story = {
+  args: {
+    width: '600px',
+    height: '600px',
+  },
+};

package/src/stories/MemoizedMarkdown.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { MemoizedMarkdown } from "../components/memoized-markdown";
+
+const meta = {
+  title: "Example/Chat/MemoizedMarkdown",
+  component: MemoizedMarkdown,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    id: "story-demo",
+  },
+} satisfies Meta<typeof MemoizedMarkdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PlainText: Story = {
+  args: {
+    id: "plain-text",
+    content: "这是一段普通的文本内容，支持 **加粗** 和 *斜体* 等 Markdown 格式。",
+  },
+};
+
+export const CodeBlock: Story = {
+  args: {
+    id: "code-block",
+    content: `
+\`\`\`typescript
+interface User {
+  name: string;
+  age: number;
+}
+
+function greet(user: User): string {
+  return \`Hello, \${user.name}!\`;
+}
+\`\`\`
+    `.trim(),
+  },
+};
+
+export const WithTable: Story = {
+  args: {
+    id: "with-table",
+    content: `
+| 字段名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| name | string | 是 | 用户名称 |
+| age | number | 否 | 用户年龄 |
+| email | string | 是 | 电子邮箱 |
+    `.trim(),
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    id: "long-content",
+    content: `
+## 表单分析
+
+根据供应商管理逻辑设计表单，先填写供应商基础信息（ID、名称、联系人等），再通过子表单填写关联的产品信息。
+
+### 核心字段
+
+- **供应商ID**：唯一标识，必填
+- **供应商名称**：企业全称，必填
+- **联系人**：主要对接人，必填
+- **联系电话**：手机或座机，必填
+
+### 产品信息（子表单）
+
+| 字段名 | 类型 | 说明 |
+|--------|------|------|
+| 产品名称 | string | 产品名称 |
+| 型号 | string | 产品型号 |
+| 单价 | number | 单位价格 |
+
+> 核心字段均设为必填确保信息完整。试试下面建议吧！
+    `.trim(),
+  },
+};
+
+export const JSONCodeBlock: Story = {
+  args: {
+    id: "json-block",
+    content: `
+\`\`\`json
+{
+  "formName": "供应商信息表",
+  "version": "1.0.0",
+  "fields": [
+    { "name": "supplierId", "type": "string", "required": true },
+    { "name": "supplierName", "type": "string", "required": true }
+  ]
+}
+\`\`\`
+    `.trim(),
+  },
+};

package/src/stories/MessageContent.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { MessageContent } from "../components/message-content";
+
+const meta = {
+  title: "Example/Chat/MessageContent",
+  component: MessageContent,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof MessageContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "这是一条来自 AI 助手的消息内容",
+  },
+};
+
+export const WithLongContent: Story = {
+  args: {
+    children:
+      "这是一条比较长的消息内容，用于测试组件在长文本场景下的显示效果。AI 助手可能会返回较长的文本内容，需要确保排版正确。",
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    children: "自定义样式的消息内容",
+    className: "bg-blue-50 px-3 py-2 rounded-lg",
+  },
+};

package/src/stories/NumbersMsgPart.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { NumbersMsgPart } from '../components/number-part';
+
+const meta = {
+  title: 'Example/Chat/NumbersMsgPart',
+  component: NumbersMsgPart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    fileName: '生产小工单.excel',
+  },
+} satisfies Meta<typeof NumbersMsgPart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Small: Story = {
+  args: {
+    size: 80,
+    fileName: undefined,
+  },
+};
+
+export const LongFileName: Story = {
+  args: {
+    fileName: '这是一个非常长的文件名需要截断显示.xlsx',
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    fileName: undefined,
+  },
+};

package/src/stories/OfficeContainer.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { OfficeContainer } from "../components/office-container";
+
+const meta: Meta<typeof OfficeContainer> = {
+  title: "AI Office/OfficeContainer",
+  component: OfficeContainer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100vh", width: "100vw", overflow: "hidden" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PlaceholderHeader = ({
+  children,
+  // bg = "bg-blue-500",
+}: {
+  children: React.ReactNode;
+  bg?: string;
+}) => (
+  <div className={`h-full w-full flex items-center px-4`}>
+    <span className="text-sm font-semibold">{children}</span>
+  </div>
+);
+
+const PlaceholderContent = ({
+  children,
+  bg = "bg-blue-50",
+}: {
+  children: React.ReactNode;
+  bg?: string;
+}) => (
+  <div className={`h-500 rounded-lg border-2 border-dashed border-gray-300 p-4 text-gray-500 ${bg} m-4`}>
+    {children}
+  </div>
+);
+
+export const Base: Story = {
+  args: {
+    headerHeight: 64,
+    leftColHeaderElement: <PlaceholderHeader>Left Header</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>Left Content (scrollable)</PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content (scrollable)
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const CustomHeaderHeight: Story = {
+  args: {
+    headerHeight: 96,
+    leftColHeaderElement: (
+      <PlaceholderHeader>Left Header (96px)</PlaceholderHeader>
+    ),
+    leftColContentElement: <PlaceholderContent>Left Content</PlaceholderContent>,
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">
+        Right Header (96px)
+      </PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">Right Content</PlaceholderContent>
+    ),
+  },
+};

package/src/stories/OptionItem.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { OptionItem } from "../components/option-item";
+
+const meta = {
+  title: "Example/Chat/OptionItem",
+  component: OptionItem,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof OptionItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "选项",
+  },
+};
+
+export const WithBgColor: Story = {
+  args: {
+    label: "单行文本",
+    bgColor: "#E8F4FF",
+    color: "#0265FF",
+  },
+};
+
+export const RedVariant: Story = {
+  args: {
+    label: "错误",
+    bgColor: "#FFEBEE",
+    color: "#D32F2F",
+  },
+};
+
+export const GreenVariant: Story = {
+  args: {
+    label: "成功",
+    bgColor: "#E8F5E9",
+    color: "#388E3C",
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: <span>使用children</span>,
+    bgColor: "#F3E5F5",
+    color: "#7B1FA2",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: (
+      <div className="flex items-center gap-1">
+        <span>✓</span>
+        <span>已选择</span>
+      </div>
+    ),
+    bgColor: "#E8F5E9",
+    color: "#388E3C",
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    label: "自定义颜色",
+    bgColor: "#FFF8DC",
+    color: "#8B4513",
+  },
+};

package/src/stories/PreviewerHeader.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PreviewerHeader } from '../components/previewer-header';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const meta: Meta<typeof PreviewerHeader> = {
+  title: 'Example/Chat/PreviewerHeader',
+  component: PreviewerHeader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <TooltipProvider delayDuration={100}>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: '编辑表单',
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+    style: { width: 700 },
+  },
+};
+
+export const ActiveMode: Story = {
+  args: {
+    title: '编辑表单',
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+    style: { width: 700 },
+    active: true,
+  },
+};
+
+export const WithTips: Story = {
+  args: {
+    title: '编辑表单',
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+    style: { width: 700 },
+    active: true,
+    tips: 'AI生成内容可能不准确，请谨慎使用',
+  },
+};
+
+export const DataVariant: Story = {
+  args: {
+    title: '数据预览',
+    onSave: () => alert('保存点击'),
+    active: false,
+    style: { width: 700 },
+    variant: 'data-previewer',
+  },
+};
+
+export const LoadingOnSave: Story = {
+  args: {
+    title: '编辑表单',
+    onSave: async () => {
+      await delay(2000);
+      alert('保存完成');
+    },
+    onCancel: () => alert('取消点击'),
+    style: { width: 700 },
+  },
+};
+
+
+export const ShowClear: Story = {
+  args: {
+    title: '编辑表单',
+    onClear: () => {
+      alert('清除点击');
+    },
+    onSave: async () => {
+      await delay(2000);
+      alert('保存完成');
+    },
+    onCancel: () => alert('取消点击'),
+    style: { width: 700 },
+  },
+};

package/src/stories/PrimaryConfirmBtn.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PrimaryConfirmBtn } from '../components/primary-confirm-btn';
+import { MagicIcon } from '../components/bs-icons';
+
+const meta = {
+  title: 'Example/Button/PrimaryConfirmBtn',
+  component: PrimaryConfirmBtn,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof PrimaryConfirmBtn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: '确认',
+  },
+};
+
+export const Light: Story = {
+  args: {
+    text: '直接添加',
+    light: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    text: '已确认',
+    disabled: true,
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    text: '提交',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    text: '提交',
+    icon: <MagicIcon />,
+  },
+};
+
+export const DisabledWithInfo: Story = {
+  args: {
+    text: '已确认 6 条数据',
+    icon: <MagicIcon />,
+    disabledWithInfo: true,
+  },
+};