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

package/src/stories/BsEntrySelect.stories.tsx

@@ -1,343 +1,343 @@
-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, maxWidth: 500 }}>
-        <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*="select-none"]',
-    ) 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: '请选择表单',
-  },
-};
-
-export const WithoutSlider: Story = {
-  args: {
-    appDetails: mockAppDetails,
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-    showSlider: false,
-  },
-};
-
-export const ScrollOverflow: Story = {
-  render: (args) => (
-    <div style={{ maxWidth: 300 }}>
-      <BsEntrySelect {...args} />
-    </div>
-  ),
-  args: {
-    appDetails: mockAppDetails,
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-  },
-};
-
-export const NoOverflow: Story = {
-  args: {
-    appDetails: {
-      app1: mockAppDetails.app1,
-    },
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-  },
-};
-
-export const OnlyCurrentApp: Story = {
-  args: {
-    appDetails: {
-      app1: mockAppDetails.app1,
-    },
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-    defaultValue: 'entry1',
-  },
-};
-
-export const OnlyCurrentAppEntries: Story = {
-  args: {
-    appDetails: mockAppDetails,
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-    defaultValue: 'entry1',
-    showCurrentAppEntriesOnly: true,
-  },
-};
-
-export const TabsVariant: Story = {
-  render: (args) => (
-    <div style={{ padding: 16, background: '#E6F4F1', borderRadius: 8 }}>
-      <BsEntrySelect {...args} />
-    </div>
-  ),
-  args: {
-    appDetails: mockAppDetails,
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-    defaultValue: 'entry1',
-    sliderVariant: 'tabs',
-  },
-};
-
-export const TabsVariantOverflow: Story = {
-  render: (args) => (
-    <div style={{ maxWidth: 300, padding: 16, background: '#E6F4F1', borderRadius: 8 }}>
-      <BsEntrySelect {...args} />
-    </div>
-  ),
-  args: {
-    appDetails: mockAppDetails,
-    currentAppId: 'app1',
-    placeholder: '请选择表单',
-    sliderVariant: 'tabs',
-  },
-};
+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, maxWidth: 500 }}>
+        <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*="select-none"]',
+    ) 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: '请选择表单',
+  },
+};
+
+export const WithoutSlider: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    showSlider: false,
+  },
+};
+
+export const ScrollOverflow: Story = {
+  render: (args) => (
+    <div style={{ maxWidth: 300 }}>
+      <BsEntrySelect {...args} />
+    </div>
+  ),
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const NoOverflow: Story = {
+  args: {
+    appDetails: {
+      app1: mockAppDetails.app1,
+    },
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const OnlyCurrentApp: Story = {
+  args: {
+    appDetails: {
+      app1: mockAppDetails.app1,
+    },
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    defaultValue: 'entry1',
+  },
+};
+
+export const OnlyCurrentAppEntries: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    defaultValue: 'entry1',
+    showCurrentAppEntriesOnly: true,
+  },
+};
+
+export const TabsVariant: Story = {
+  render: (args) => (
+    <div style={{ padding: 16, background: '#E6F4F1', borderRadius: 8 }}>
+      <BsEntrySelect {...args} />
+    </div>
+  ),
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    defaultValue: 'entry1',
+    sliderVariant: 'tabs',
+  },
+};
+
+export const TabsVariantOverflow: Story = {
+  render: (args) => (
+    <div style={{ maxWidth: 300, padding: 16, background: '#E6F4F1', borderRadius: 8 }}>
+      <BsEntrySelect {...args} />
+    </div>
+  ),
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    sliderVariant: 'tabs',
+  },
+};