@baishuyun/chat-sdk 0.0.16 → 0.0.17

package/src/stories/fields-design-info-table.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IFieldDesignInfo } from '@baishuyun/types';
+import { FieldsDesignInfoTable } from '@/components/bs-ui/fields-design-info-table';
+
+const meta: Meta<typeof FieldsDesignInfoTable> = {
+  title: 'Example/Chat/FieldsDesignInfoTable',
+  component: FieldsDesignInfoTable,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 420 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof FieldsDesignInfoTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const basicFields: IFieldDesignInfo[] = [
+  {
+    fieldName: '订单编号',
+    type: '流水号',
+    required: true,
+    description: '唯一标识订单的编号',
+    relationDesc: '',
+  },
+  {
+    fieldName: '下单日期',
+    type: '日期时间',
+    required: true,
+    description: '选择订单的下单日期时间',
+    relationDesc: '',
+  },
+  {
+    fieldName: '客户名称',
+    type: '文本',
+    required: true,
+    description: '输入客户的名称',
+    relationDesc: '',
+  },
+  {
+    fieldName: '联系电话',
+    type: '文本',
+    required: true,
+    description: '输入客户的联系电话',
+    relationDesc: '',
+  },
+  {
+    fieldName: '收货地址',
+    type: '地址',
+    required: true,
+    description: '选择或输入收货地址',
+    relationDesc: '',
+  },
+];
+
+const fieldsWithSubform: IFieldDesignInfo[] = [
+  ...basicFields,
+  {
+    fieldName: '商品明细',
+    type: '子表单',
+    required: true,
+    description: '填写订单商品明细',
+    relationDesc: '',
+    isSubForm: true,
+  },
+  {
+    fieldName: '商品名称',
+    type: '文本',
+    required: true,
+    description: '输入商品的名称',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+  {
+    fieldName: '商品单价',
+    type: '数字',
+    required: true,
+    description: '输入商品的单价',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+  {
+    fieldName: '购买数量',
+    type: '数字',
+    required: true,
+    description: '输入商品的购买数量',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+  {
+    fieldName: '商品金额',
+    type: '数字',
+    required: true,
+    description: '自动计算商品金额（单价*数量）红红火火恍恍惚惚哈哈哈哈哈哈哈',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+];
+
+/** 基础表格 - 无子表单 */
+export const Basic: Story = {
+  args: {
+    fields: basicFields,
+  },
+};
+
+/** 包含子表单 - 可展开/收起 */
+export const WithSubForm: Story = {
+  args: {
+    fields: fieldsWithSubform,
+  },
+};
+
+/** 空数据 */
+export const Empty: Story = {
+  args: {
+    fields: [],
+  },
+};
+
+/** 多个子表单 */
+export const MultipleSubForms: Story = {
+  args: {
+    fields: [
+      {
+        fieldName: '项目名称',
+        type: '文本',
+        required: true,
+        description: '输入项目名称',
+        relationDesc: '',
+      },
+      {
+        fieldName: '团队成员',
+        type: '子表单',
+        required: true,
+        description: '添加团队成员信息',
+        relationDesc: '',
+        isSubForm: true,
+      },
+      {
+        fieldName: '姓名',
+        type: '文本',
+        required: true,
+        description: '输入成员姓名',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '团队成员',
+      },
+      {
+        fieldName: '职位',
+        type: '文本',
+        required: false,
+        description: '输入成员职位',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '团队成员',
+      },
+      {
+        fieldName: '备注',
+        type: '文本',
+        required: false,
+        description: '输入备注信息',
+        relationDesc: '',
+      },
+      {
+        fieldName: '里程碑',
+        type: '子表单',
+        required: false,
+        description: '添加项目里程碑',
+        relationDesc: '',
+        isSubForm: true,
+      },
+      {
+        fieldName: '阶段名称',
+        type: '文本',
+        required: true,
+        description: '输入里程碑阶段名称',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '里程碑',
+      },
+      {
+        fieldName: '截止日期',
+        type: '日期时间',
+        required: true,
+        description: '选择里程碑截止日期',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '里程碑',
+      },
+    ],
+  },
+};