@baishuyun/ai-design 1.0.0

package/src/stories/BsEntrySelect.stories.tsx

@@ -0,0 +1,261 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BsEntrySelect } from '../components/bs-entry-select';
+import type { BsEntrySelectChangeResult } from '../components/bs-entry-select';
+import type {
+  IAppDetail,
+  IEntryDetail,
+  IEntryAliasItem,
+} from '@baishuyun/types';
+
+type AppDetailEntryType = 'form' | 'dash' | 'report' | 'flow';
+type AliasItemType = 'form' | 'dash' | 'group';
+
+function makeEntry(
+  id: string,
+  name: string,
+  seq: number,
+  icon: number,
+  type: AppDetailEntryType = 'form',
+): IEntryDetail {
+  return {
+    _id: id,
+    entryId: id,
+    name,
+    parent: '0',
+    seq,
+    icon,
+    type,
+    hasCoop: false,
+    hasFlow: false,
+    isEvent: false,
+    isFavorite: false,
+  };
+}
+
+function makeAlias(
+  parent: string,
+  type: AliasItemType,
+): IEntryAliasItem {
+  return { formId: '', parent, type };
+}
+
+function makeAppDetail(
+  name: string,
+  aliasMap: Record<string, IEntryAliasItem>,
+  entryMap: Record<string, IEntryDetail>,
+): IAppDetail {
+  return {
+    appType: 1,
+    dock_userid: '',
+    dock_username: '',
+    entryIdAliasMap: aliasMap,
+    entryList: Object.keys(entryMap).map((id) => ({ id })),
+    entryMap,
+    isFlow: false,
+    menu: null,
+    name,
+    status: 1,
+    timezone: { offset: 8, value: 'Asia/Shanghai' },
+    virtually_contacts_setting: false,
+  };
+}
+
+const mockAppDetails: Record<string, IAppDetail> = {
+  app1: makeAppDetail(
+    '客户管理',
+    {
+      entry1: makeAlias('0', 'form'),
+      entry2: makeAlias('0', 'form'),
+      group1: makeAlias('0', 'group'),
+      entry4: makeAlias('group1', 'form'),
+      entry6: makeAlias('group1', 'form'),
+      entry5: makeAlias('0', 'form'),
+    },
+    {
+      entry1: makeEntry('entry1', '客户信息表', 1, 51),
+      entry2: makeEntry('entry2', '订单管理表', 2, 52),
+      group1: makeEntry('group1', '分组一', 3, 25),
+      entry4: makeEntry('entry4', '子表单A', 1, 53),
+      entry6: makeEntry('entry6', '子表单B', 2, 55),
+      entry5: makeEntry('entry5', '库存报表', 4, 54, 'report'),
+    },
+  ),
+  app2: makeAppDetail(
+    '供应商管理',
+    {
+      entry7: makeAlias('0', 'form'),
+      entry8: makeAlias('0', 'form'),
+    },
+    {
+      entry7: makeEntry('entry7', '供应商管理表', 1, 56),
+      entry8: makeEntry('entry8', '采购订单表', 2, 57),
+    },
+  ),
+  app3: makeAppDetail(
+    '销售管理',
+    {
+      entry9: makeAlias('0', 'dash'),
+      entry10: makeAlias('0', 'form'),
+    },
+    {
+      entry9: makeEntry('entry9', '销售漏斗', 1, 58, 'dash'),
+      entry10: makeEntry('entry10', '合同审批流程', 2, 59, 'flow'),
+    },
+  ),
+  app4: makeAppDetail(
+    '人事管理',
+    {
+      entry11: makeAlias('0', 'form'),
+    },
+    {
+      entry11: makeEntry('entry11', '考勤统计表', 1, 60, 'report'),
+    },
+  ),
+};
+
+const deepNestingAppDetails: Record<string, IAppDetail> = {
+  deep1: makeAppDetail(
+    '深层嵌套应用',
+    {
+      d1: makeAlias('0', 'form'),
+      group_d2: makeAlias('d1', 'group'),
+      d3: makeAlias('group_d2', 'form'),
+      group_d4: makeAlias('d3', 'group'),
+      d5: makeAlias('group_d4', 'form'),
+      d6: makeAlias('group_d2', 'form'),
+    },
+    {
+      d1: makeEntry('d1', '一级表单', 1, 51),
+      group_d2: makeEntry('group_d2', '二级分组', 1, 25),
+      d3: makeEntry('d3', '三级表单A', 1, 52),
+      group_d4: makeEntry('group_d4', '四级分组', 1, 25),
+      d5: makeEntry('d5', '五级表单', 1, 53),
+      d6: makeEntry('d6', '三级表单B', 2, 54),
+    },
+  ),
+};
+
+const emptyDetails: Record<string, IAppDetail> = {};
+
+const meta: Meta<typeof BsEntrySelect> = {
+  title: 'AI Office/BsEntrySelect',
+  component: BsEntrySelect,
+  parameters: { layout: 'centered' },
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 60, minHeight: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    defaultValue: 'entry1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const Open: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+  play: async ({ canvasElement }) => {
+    const trigger = canvasElement.querySelector(
+      '[class*="rounded-[4px]"][class*="cursor-pointer"]',
+    ) as HTMLElement;
+    if (trigger) trigger.click();
+  },
+};
+
+export const DeepNesting: Story = {
+  args: {
+    appDetails: deepNestingAppDetails,
+    currentAppId: 'deep1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    appDetails: emptyDetails,
+    currentAppId: undefined,
+    placeholder: '暂无可用表单',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    defaultValue: 'entry1',
+    placeholder: '请选择表单',
+    disabled: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] =
+      useState<BsEntrySelectChangeResult | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <BsEntrySelect {...args} onChange={setSelected} />
+        {selected && (
+          <div
+            style={{
+              padding: 12,
+              background: '#F5F7FA',
+              borderRadius: 8,
+              fontSize: 14,
+            }}
+          >
+            <div>
+              <strong>选中条目:</strong> {selected.entry.name}
+            </div>
+            <div>
+              <strong>所属应用ID:</strong> {selected.appId}
+            </div>
+            <div>
+              <strong>所属分组:</strong> {selected.section === 'current' ? '当前应用表单' : '其他应用表单'}
+            </div>
+            <div>
+              <strong>条目ID:</strong> {selected.entry.entryId}
+            </div>
+            <div>
+              <strong>条目类型:</strong> {selected.entry.type}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+};

package/src/stories/BsTooltip.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BsTooltip } from '../components/tooltip';
+import { TooltipProvider } from '../components/ui/tooltip';
+import { IconBtn } from '../components/icon-btn';
+import { ColorfulEditIcon } from '../components/bs-icons';
+
+const meta: Meta<typeof BsTooltip> = {
+  title: 'Example/Chat/BsTooltip',
+  component: BsTooltip,
+  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: {
+    children: <IconBtn icon={<ColorfulEditIcon />} />,
+    content: '编辑消息',
+  },
+};

package/src/stories/Card.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Card } from "../components/card";
+import { UserIcon } from "../components/bs-icons";
+
+const meta = {
+  title: "Example/Chat/Card",
+  component: Card,
+  // 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 Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: "供应商管理，子表单为产品信息",
+    index: 1,
+    desc: "用于记录和管理企业供应商的基本信息、资质认证、合作状态等，便于采购部门进行供应商评估和选择。",
+    icon: <UserIcon />,
+  },
+};

package/src/stories/CardField.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CardField } from '../components/card-field';
+
+const meta: Meta<typeof CardField> = {
+  title: 'Example/Chat/CardField',
+  component: CardField,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardField>;
+
+// 基础用法
+export const Base: Story = {
+  args: {
+    label: '维度（行）',
+    children: '仓库、产品名称、产品编码、日期（年-月）',
+  },
+};
+
+// label 过长省略展示
+export const LongLabel: Story = {
+  args: {
+    label: '这是一个非常长的标签文字需要省略展示',
+    children: '内容区域',
+  },
+};
+
+// 无 children 时显示「无」
+export const NoChildren: Story = {
+  args: {
+    label: '空字段',
+  },
+};
+
+// children 为空字符串
+export const EmptyChildren: Story = {
+  args: {
+    label: '字段名称',
+    children: '',
+  },
+};
+
+// children 内容较长换行展示
+export const LongContent: Story = {
+  args: {
+    label: '详细描述',
+    children:
+      '这是一段很长的内容，用于测试换行效果。内容区域支持自动换行，确保文字不会溢出容器，保持良好的阅读体验。',
+  },
+};
+
+// 多个 CardField 组合使用
+export const MultipleFields: Story = {
+  args: {
+    label: '维度（行）',
+    children: '仓库、产品名称、产品编码、日期（年-月）',
+  },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <CardField label="维度（行）">仓库、产品名称、产品编码、日期（年-月）</CardField>
+      <CardField label="维度（列）">产品类别</CardField>
+      <CardField label="指标">销售额、销售量、库存量</CardField>
+      <CardField label="筛选条件" />
+    </div>
+  ),
+};
+
+// children 为自定义 ReactNode
+export const CustomChildren: Story = {
+  args: {
+    label: '状态',
+    children: <span className="text-green-500 font-medium">已完成</span>,
+  },
+};

package/src/stories/ChatAreaHeader.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+// import { Header } from "./Header";
+import { ChatAreaHeader } from "../components/chat-area-header";
+
+const meta = {
+  title: "Example/Chat/ChatAreaHeader",
+  component: ChatAreaHeader,
+  // 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 ChatAreaHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: "TEST",
+    width: 0,
+  },
+};

package/src/stories/CircleChecker.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { CircleChecker } from '../components/circle-checker';
+
+const meta = {
+  title: 'Example/Chat/CircleChecker',
+  component: CircleChecker,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof CircleChecker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'TEST',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+    children: 'TEST',
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    defaultChecked: false,
+    children: 'TEST',
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled',
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    defaultChecked: true,
+    children: 'Disabled Checked',
+  },
+};
+
+const ControlledComponent = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className="flex flex-col gap-4">
+      <CircleChecker checked={checked} onCheckedChange={setChecked}>
+        Controlled: {checked ? 'Checked' : 'Unchecked'}
+      </CircleChecker>
+      <button
+        className="px-3 py-1 bg-gray-200 rounded text-sm"
+        onClick={() => setChecked(!checked)}
+      >
+        Toggle from outside
+      </button>
+    </div>
+  );
+};
+
+export const Controlled: Story = {
+  render: () => <ControlledComponent />,
+};
+
+export const MultipleOptions: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <CircleChecker>Option A</CircleChecker>
+      <CircleChecker>Option B</CircleChecker>
+      <CircleChecker defaultChecked>Option C (default checked)</CircleChecker>
+    </div>
+  ),
+};

package/src/stories/CollapsibleTextMsg.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CollapsibleTxtMsg } from "../components/collapsible-txt-msg";
+
+const meta = {
+  title: "Example/Chat/CollapsibleTxtMsg",
+  component: CollapsibleTxtMsg,
+  // 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 CollapsibleTxtMsg>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: "表单分析",
+    content:
+      "一些文字描述，字段分析\n设计说明：表单按供应商管理逻辑设计，先填写供应商基础信息（ID、名称、联系人等），再通过子表单填写关联的产品信息（名称、型号、单价等），最后留备注补充。核心字段均设为必填确保信息完整。？试试下面建议吧！",
+    defaultOpen: true,
+  },
+};
+
+export const Collapsed: Story = {
+  args: {
+    title: "表单分析",
+    content:
+      "一些文字描述，字段分析\n设计说明：表单按供应商管理逻辑设计，先填写供应商基础信息（ID、名称、联系人等），再通过子表单填写关联的产品信息（名称、型号、单价等），最后留备注补充。核心字段均设为必填确保信息完整。？试试下面建议吧！",
+    defaultOpen: false,
+  },
+};
+
+export const ShortContent: Story = {
+  args: {
+    title: "简短说明",
+    content: "这是一个简短的内容示例。",
+    defaultOpen: true,
+  },
+};

package/src/stories/ConfirmDialog.stories.tsx

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