@baishuyun/ai-design 2.0.40 → 2.0.42

package/src/stories/TeamWideFormSelect.stories.tsx

@@ -0,0 +1,362 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  TeamWideFormSelect,
+  TeamWideFormDrawer,
+} from '../components/agent-helper/team-wide-form-select';
+import type { TeamWideFormSelectChangeResult } from '../components/agent-helper/team-wide-form-select/types';
+import type { IAllAppsAndFormsData } from '@baishuyun/types';
+
+// ── Mock：按 /dashboard/app/form/list 真实返回结构构造 ────────────
+
+const CURRENT_APP_ID = 'app_current';
+
+const mockData: IAllAppsAndFormsData = {
+  dock_corps: [],
+  dock_items: [],
+  items: [
+    {
+      _id: 'default',
+      name: '默认分组',
+      appcount: 2,
+      apps: [
+        {
+          _id: CURRENT_APP_ID,
+          appname: '客户管理系统',
+          parent: 'default',
+          style: { color: 3, icon: 66 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: true,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+          formList: {
+            aggregate_table: null,
+            etl_table: null,
+            dash: [
+              {
+                appId: CURRENT_APP_ID,
+                entryId: 'dash_1',
+                hasCoop: false,
+                icon: 60,
+                name: '销售报表',
+                type: 'dash',
+              },
+            ],
+            form: [
+              {
+                appId: CURRENT_APP_ID,
+                entryId: 'form_1',
+                hasCoop: true,
+                icon: 51,
+                name: '采购订单表',
+                type: 'form',
+              },
+              {
+                appId: CURRENT_APP_ID,
+                entryId: 'group_1',
+                hasCoop: true,
+                icon: 25,
+                name: '客户资料',
+                type: 'group',
+                child: [
+                  {
+                    appId: CURRENT_APP_ID,
+                    entryId: 'form_2',
+                    hasCoop: true,
+                    icon: 53,
+                    name: '客户信息表',
+                    type: 'form',
+                  },
+                  {
+                    appId: CURRENT_APP_ID,
+                    entryId: 'group_1_1',
+                    hasCoop: true,
+                    icon: 25,
+                    name: '客户资料分组一',
+                    type: 'group',
+                    child: [
+                      {
+                        appId: CURRENT_APP_ID,
+                        entryId: 'form_3',
+                        hasCoop: true,
+                        icon: 56,
+                        name: '供应商管理表',
+                        type: 'form',
+                      },
+                      {
+                        appId: CURRENT_APP_ID,
+                        entryId: 'form_4',
+                        hasCoop: true,
+                        icon: 56,
+                        name: '客户表单',
+                        type: 'form',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+            refApps: [],
+          },
+        },
+        {
+          _id: 'app_2',
+          appname: '应用二',
+          parent: 'default',
+          style: { color: 1, icon: 40 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: false,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+          formList: {
+            aggregate_table: null,
+            dash: null,
+            etl_table: null,
+            form: [
+              {
+                appId: 'app_2',
+                entryId: 'app2_form_1',
+                hasCoop: true,
+                icon: 0,
+                name: '未命名表单',
+                type: 'form',
+              },
+              {
+                appId: 'app_2',
+                entryId: 'app2_group_1',
+                hasCoop: true,
+                icon: 25,
+                name: '我的分组一',
+                type: 'group',
+                child: [
+                  {
+                    appId: 'app_2',
+                    entryId: 'app2_form_2',
+                    hasCoop: true,
+                    icon: 58,
+                    name: '供应商管理表',
+                    type: 'form',
+                  },
+                  {
+                    appId: 'app_2',
+                    entryId: 'app2_group_1_1',
+                    hasCoop: true,
+                    icon: 25,
+                    name: '我的分组一杠1',
+                    type: 'group',
+                    child: [
+                      {
+                        appId: 'app_2',
+                        entryId: 'app2_form_3',
+                        hasCoop: true,
+                        icon: 57,
+                        name: '客户信息',
+                        type: 'form',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+            refApps: [],
+          },
+        },
+      ],
+    },
+    {
+      _id: 'group_b',
+      name: '解决方案模板',
+      appcount: 2,
+      apps: [
+        {
+          _id: 'app_3',
+          appname: '宠物管理',
+          parent: 'group_b',
+          style: { color: 3, icon: 67 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: false,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+          formList: {
+            aggregate_table: null,
+            dash: null,
+            etl_table: null,
+            form: [
+              {
+                appId: 'app_3',
+                entryId: 'app3_form_1',
+                hasCoop: true,
+                icon: 0,
+                name: '宠物信息',
+                type: 'form',
+              },
+            ],
+            refApps: [],
+          },
+        },
+        {
+          _id: 'app_4',
+          appname: '空白应用（无表单）',
+          parent: 'group_b',
+          style: { color: 2, icon: 44 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: false,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+        },
+      ],
+    },
+  ],
+};
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof TeamWideFormSelect> = {
+  title: 'Agent Helper/TeamWideFormSelect',
+  component: TeamWideFormSelect,
+  parameters: { layout: 'centered' },
+  args: {
+    data: mockData,
+    placeholder: '请选择表单',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 320, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── 下拉模式 ──────────────────────────────────────────────────────
+
+export const Dropdown: Story = {
+  name: '下拉 — 全量树',
+};
+
+export const DropdownWithCurrentApp: Story = {
+  name: '下拉 — 按当前应用分组',
+  args: { currentAppId: CURRENT_APP_ID },
+};
+
+export const DropdownSelected: Story = {
+  name: '下拉 — 已选中',
+  args: { currentAppId: CURRENT_APP_ID, defaultValue: 'form_3' },
+};
+
+export const DropdownDisabled: Story = {
+  name: '下拉 — 禁用',
+  args: { defaultValue: 'form_1', disabled: true },
+};
+
+export const DropdownEmpty: Story = {
+  name: '下拉 — 空数据',
+  args: { data: { dock_corps: [], dock_items: [], items: [] } },
+};
+
+// ── 抽屉模式 ──────────────────────────────────────────────────────
+
+export const DrawerMode: Story = {
+  name: '抽屉 — 左侧滑入',
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const [selected, setSelected] =
+      useState<TeamWideFormSelectChangeResult | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          style={{
+            height: 34,
+            padding: '0 12px',
+            border: '1px solid #E0E0E0',
+            borderRadius: 4,
+            background: '#fff',
+            cursor: 'pointer',
+            fontSize: 14,
+          }}
+        >
+          {selected ? selected.form.name : '切换表单'}
+        </button>
+        <TeamWideFormDrawer
+          data={args.data}
+          currentAppId={args.currentAppId}
+          open={open}
+          onOpenChange={setOpen}
+          value={selected?.entryId}
+          onChange={setSelected}
+        />
+        {selected && (
+          <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all' }}>
+            已选择: {selected.form.name}（appId: {selected.appId}, entryId:{' '}
+            {selected.entryId}）
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: { currentAppId: CURRENT_APP_ID },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// ── 交互式（下拉） ────────────────────────────────────────────────
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] =
+      useState<TeamWideFormSelectChangeResult | null>(null);
+    const [useCurrentApp, setUseCurrentApp] = useState(true);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+          <input
+            type="checkbox"
+            checked={useCurrentApp}
+            onChange={(e) => setUseCurrentApp(e.target.checked)}
+          />
+          按当前应用分组展示
+        </label>
+        <TeamWideFormSelect
+          {...args}
+          currentAppId={useCurrentApp ? CURRENT_APP_ID : undefined}
+          value={selected?.entryId ?? ''}
+          onChange={setSelected}
+        />
+        <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all', maxWidth: 300 }}>
+          已选择:{' '}
+          {selected
+            ? `${selected.form.name}（appId: ${selected.appId}, entryId: ${selected.entryId}）`
+            : '无'}
+        </div>
+      </div>
+    );
+  },
+};

package/style.css

@@ -502,6 +502,9 @@
   .mt-\[4px\] {
     margin-top: 4px;
   }
+  .mt-\[7px\] {
+    margin-top: 7px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -1857,6 +1860,9 @@
   .pt-\[8px\] {
     padding-top: 8px;
   }
+  .pt-\[9px\] {
+    padding-top: 9px;
+  }
   .pt-\[20px\] {
     padding-top: 20px;
   }