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

package/src/stories/AppSelect.stories.tsx

@@ -1,250 +1,250 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AppSelect, groupsToAppTreeNodes } from '../components/agent-helper/app-select';
-import type { AppTreeNode } from '../components/agent-helper/app-select';
-import type { IAppGroup } from '@baishuyun/types';
-
-// ── Flat groups mock ──────────────────────────────────────────────
-
-const mockGroups: IAppGroup[] = [
-  {
-    _id: 'g1', name: '常用应用', appcount: 3,
-    apps: [
-      { _id: 'app1', appname: '订单管理系统', parent: 'g1', style: { color: '#4ACCC1', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 1, appStatus: 1, disable_export: false },
-      { _id: 'app2', appname: '客户关系管理', parent: 'g1', style: { color: '#FF8C42', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 1, appStatus: 1, disable_export: false },
-      { _id: 'app3', appname: '财务报表分析', parent: 'g1', style: { color: '#7C5CFC', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 1, appStatus: 1, disable_export: false },
-    ],
-  },
-  {
-    _id: 'g2', name: '协作应用', appcount: 2,
-    apps: [
-      { _id: 'app4', appname: '团队任务看板', parent: 'g2', style: { color: '#0265FF', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 2, appStatus: 1, disable_export: false },
-      { _id: 'app5', appname: '文档协作平台', parent: 'g2', style: { color: '#34C759', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 2, appStatus: 1, disable_export: false },
-    ],
-  },
-  {
-    _id: 'g3', name: '工具应用', appcount: 4,
-    apps: [
-      { _id: 'app6', appname: '数据导出工具', parent: 'g3', style: { color: '#AF52DE', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
-      { _id: 'app7', appname: '自动化工作流', parent: 'g3', style: { color: '#FF9500', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
-      { _id: 'app8', appname: '数据可视化图表', parent: 'g3', style: { color: '#30D158', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 3, appStatus: 1, disable_export: false },
-      { _id: 'app9', appname: 'API接口管理', parent: 'g3', style: { color: '#5E5CE6', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
-    ],
-  },
-];
-
-// ── Multi-level tree mock (matches Figma structure) ──────────────
-
-const mockTreeNodes: AppTreeNode[] = [
-  {
-    id: 'g1', label: '默认分组', type: 'group',
-    children: [
-      {
-        id: 'app1', label: '应用一', type: 'app', color: '#4ACCC1',
-        children: [
-          { id: 'item1a', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#4ACCC1' },
-          {
-            id: 'sg1', label: '我的分组一', type: 'group', color: '#7C5CFC',
-            children: [
-              { id: 'item1b', label: '客户表单', type: 'item', color: '#FF9500' },
-              {
-                id: 'sg1a', label: '我的分组一杠1', type: 'group', color: '#AF52DE',
-                children: [
-                  { id: 'item1c', label: '供应商管理表', type: 'item', color: '#FF8C42' },
-                  { id: 'item1d', label: '客户表单', type: 'item', color: '#FF9500' },
-                ],
-              },
-              {
-                id: 'sg1b', label: '我的分组一杠2', type: 'group', color: '#30D158',
-                children: [
-                  { id: 'item1e', label: '供应商管理表', type: 'item', color: '#FF8C42' },
-                  { id: 'item1f', label: '客户表单', type: 'item', color: '#FF9500' },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'app2', label: '应用二', type: 'app', color: '#FF8C42',
-        children: [
-          { id: 'item2a', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#FF8C42' },
-          { id: 'item2b', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#FF8C42' },
-          { id: 'sg2', label: '我的分组一', type: 'group', color: '#7C5CFC' },
-          {
-            id: 'sg3', label: '我的分组二', type: 'group', color: '#5E5CE6',
-            children: [
-              { id: 'item2c', label: '客户表单', type: 'item', color: '#FF9500' },
-              {
-                id: 'sg3a', label: '我的分组二杠1', type: 'group', color: '#AF52DE',
-                children: [
-                  { id: 'item2d', label: '客户表单', type: 'item', color: '#FF9500' },
-                ],
-              },
-              { id: 'sg3b', label: '我的分组二杠2', type: 'group', color: '#30D158' },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 'g2', label: '应用分组一', type: 'group',
-    children: [
-      { id: 'app3a', label: '应用一', type: 'app', color: '#0265FF' },
-      { id: 'app3b', label: '应用二', type: 'app', color: '#34C759' },
-    ],
-  },
-];
-
-// ── Meta ──────────────────────────────────────────────────────────
-
-const meta: Meta<typeof AppSelect> = {
-  title: 'Agent Helper/AppSelect',
-  component: AppSelect,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  args: {
-    nodes: groupsToAppTreeNodes(mockGroups),
-    placeholder: '请选择',
-    searchPlaceholder: '输入应用名称来搜索',
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 360, padding: 20 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ── Flat data stories ────────────────────────────────────────────
-
-export const Default: Story = {};
-
-export const SingleSelected: Story = {
-  args: { defaultValue: 'app2' },
-};
-
-export const AllowEmpty: Story = {
-  args: { allowEmpty: true },
-};
-
-export const AllowEmptyCustomLabel: Story = {
-  args: { allowEmpty: true, emptyLabel: '不限' },
-};
-
-export const AllowEmptyWithShowAll: Story = {
-  name: 'Allow Empty + Show All',
-  args: { allowEmpty: true, showAll: true },
-};
-
-export const MultiSelect: Story = {
-  args: {
-    mode: 'multiple',
-    defaultValue: ['app1', 'app4'],
-  },
-};
-
-export const MultiSelectOverflow: Story = {
-  args: {
-    mode: 'multiple',
-    defaultValue: ['app1', 'app2', 'app4', 'app6', 'app7', 'app8', 'app9'],
-    maxVisibleChips: 4,
-  },
-};
-
-export const EmptyGroups: Story = {
-  args: { nodes: [] },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, defaultValue: 'app1' },
-};
-
-export const DisabledMulti: Story = {
-  args: {
-    mode: 'multiple',
-    disabled: true,
-    defaultValue: ['app1', 'app4'],
-  },
-};
-
-// ── Tree structure stories ────────────────────────────────────────
-
-export const TreeStructure: Story = {
-  name: 'Tree — Multi Level',
-  args: {
-    nodes: mockTreeNodes,
-    searchPlaceholder: '输入表单名称来搜索',
-  },
-};
-
-export const TreeWithSelection: Story = {
-  name: 'Tree — Single Selected',
-  args: {
-    nodes: mockTreeNodes,
-    defaultValue: 'item1c',
-    searchPlaceholder: '输入表单名称来搜索',
-  },
-};
-
-export const TreeMultiSelect: Story = {
-  name: 'Tree — Multi Select',
-  args: {
-    nodes: mockTreeNodes,
-    mode: 'multiple',
-    defaultValue: ['item1a', 'item1c', 'item2d'],
-    searchPlaceholder: '输入表单名称来搜索',
-  },
-};
-
-// ── Interactive demo ─────────────────────────────────────────────
-
-export const Interactive: Story = {
-  args: {
-    nodes: mockTreeNodes,
-    mode: 'multiple',
-    searchPlaceholder: '输入表单名称来搜索',
-  },
-  render: (args) => {
-    const [value, setValue] = useState<string | string[]>([]);
-    const [mode, setMode] = useState<'single' | 'multiple'>('multiple');
-    const [useTree, setUseTree] = useState(true);
-
-    const currentNodes = useTree ? mockTreeNodes : groupsToAppTreeNodes(mockGroups);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
-          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
-            <input type="radio" checked={mode === 'single'} onChange={() => { setMode('single'); setValue(''); }} />
-            单选
-          </label>
-          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
-            <input type="radio" checked={mode === 'multiple'} onChange={() => { setMode('multiple'); setValue([]); }} />
-            多选
-          </label>
-          <span style={{ color: '#E0E0E0' }}>|</span>
-          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
-            <input type="checkbox" checked={useTree} onChange={(e) => { setUseTree(e.target.checked); setValue([]); }} />
-            多层树形
-          </label>
-        </div>
-        <AppSelect
-          {...args}
-          nodes={currentNodes}
-          mode={mode}
-          value={value}
-          onChange={(v) => setValue(v)}
-        />
-        <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all', maxWidth: 320 }}>
-          已选择: {JSON.stringify(value)}
-        </div>
-      </div>
-    );
-  },
-};
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AppSelect, groupsToAppTreeNodes } from '../components/agent-helper/app-select';
+import type { AppTreeNode } from '../components/agent-helper/app-select';
+import type { IAppGroup } from '@baishuyun/types';
+
+// ── Flat groups mock ──────────────────────────────────────────────
+
+const mockGroups: IAppGroup[] = [
+  {
+    _id: 'g1', name: '常用应用', appcount: 3,
+    apps: [
+      { _id: 'app1', appname: '订单管理系统', parent: 'g1', style: { color: '#4ACCC1', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 1, appStatus: 1, disable_export: false },
+      { _id: 'app2', appname: '客户关系管理', parent: 'g1', style: { color: '#FF8C42', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 1, appStatus: 1, disable_export: false },
+      { _id: 'app3', appname: '财务报表分析', parent: 'g1', style: { color: '#7C5CFC', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 1, appStatus: 1, disable_export: false },
+    ],
+  },
+  {
+    _id: 'g2', name: '协作应用', appcount: 2,
+    apps: [
+      { _id: 'app4', appname: '团队任务看板', parent: 'g2', style: { color: '#0265FF', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 2, appStatus: 1, disable_export: false },
+      { _id: 'app5', appname: '文档协作平台', parent: 'g2', style: { color: '#34C759', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 2, appStatus: 1, disable_export: false },
+    ],
+  },
+  {
+    _id: 'g3', name: '工具应用', appcount: 4,
+    apps: [
+      { _id: 'app6', appname: '数据导出工具', parent: 'g3', style: { color: '#AF52DE', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
+      { _id: 'app7', appname: '自动化工作流', parent: 'g3', style: { color: '#FF9500', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
+      { _id: 'app8', appname: '数据可视化图表', parent: 'g3', style: { color: '#30D158', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: true, appType: 3, appStatus: 1, disable_export: false },
+      { _id: 'app9', appname: 'API接口管理', parent: 'g3', style: { color: '#5E5CE6', icon: '' }, copyable: true, deletable: false, editable: true, dock: false, isFavorite: false, appType: 3, appStatus: 1, disable_export: false },
+    ],
+  },
+];
+
+// ── Multi-level tree mock (matches Figma structure) ──────────────
+
+const mockTreeNodes: AppTreeNode[] = [
+  {
+    id: 'g1', label: '默认分组', type: 'group',
+    children: [
+      {
+        id: 'app1', label: '应用一', type: 'app', color: '#4ACCC1',
+        children: [
+          { id: 'item1a', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#4ACCC1' },
+          {
+            id: 'sg1', label: '我的分组一', type: 'group', color: '#7C5CFC',
+            children: [
+              { id: 'item1b', label: '客户表单', type: 'item', color: '#FF9500' },
+              {
+                id: 'sg1a', label: '我的分组一杠1', type: 'group', color: '#AF52DE',
+                children: [
+                  { id: 'item1c', label: '供应商管理表', type: 'item', color: '#FF8C42' },
+                  { id: 'item1d', label: '客户表单', type: 'item', color: '#FF9500' },
+                ],
+              },
+              {
+                id: 'sg1b', label: '我的分组一杠2', type: 'group', color: '#30D158',
+                children: [
+                  { id: 'item1e', label: '供应商管理表', type: 'item', color: '#FF8C42' },
+                  { id: 'item1f', label: '客户表单', type: 'item', color: '#FF9500' },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'app2', label: '应用二', type: 'app', color: '#FF8C42',
+        children: [
+          { id: 'item2a', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#FF8C42' },
+          { id: 'item2b', label: '这个宽度随名字长短拉伸，最长展示这么多...', type: 'item', color: '#FF8C42' },
+          { id: 'sg2', label: '我的分组一', type: 'group', color: '#7C5CFC' },
+          {
+            id: 'sg3', label: '我的分组二', type: 'group', color: '#5E5CE6',
+            children: [
+              { id: 'item2c', label: '客户表单', type: 'item', color: '#FF9500' },
+              {
+                id: 'sg3a', label: '我的分组二杠1', type: 'group', color: '#AF52DE',
+                children: [
+                  { id: 'item2d', label: '客户表单', type: 'item', color: '#FF9500' },
+                ],
+              },
+              { id: 'sg3b', label: '我的分组二杠2', type: 'group', color: '#30D158' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'g2', label: '应用分组一', type: 'group',
+    children: [
+      { id: 'app3a', label: '应用一', type: 'app', color: '#0265FF' },
+      { id: 'app3b', label: '应用二', type: 'app', color: '#34C759' },
+    ],
+  },
+];
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof AppSelect> = {
+  title: 'Agent Helper/AppSelect',
+  component: AppSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    nodes: groupsToAppTreeNodes(mockGroups),
+    placeholder: '请选择',
+    searchPlaceholder: '输入应用名称来搜索',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Flat data stories ────────────────────────────────────────────
+
+export const Default: Story = {};
+
+export const SingleSelected: Story = {
+  args: { defaultValue: 'app2' },
+};
+
+export const AllowEmpty: Story = {
+  args: { allowEmpty: true },
+};
+
+export const AllowEmptyCustomLabel: Story = {
+  args: { allowEmpty: true, emptyLabel: '不限' },
+};
+
+export const AllowEmptyWithShowAll: Story = {
+  name: 'Allow Empty + Show All',
+  args: { allowEmpty: true, showAll: true },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    mode: 'multiple',
+    defaultValue: ['app1', 'app4'],
+  },
+};
+
+export const MultiSelectOverflow: Story = {
+  args: {
+    mode: 'multiple',
+    defaultValue: ['app1', 'app2', 'app4', 'app6', 'app7', 'app8', 'app9'],
+    maxVisibleChips: 4,
+  },
+};
+
+export const EmptyGroups: Story = {
+  args: { nodes: [] },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: 'app1' },
+};
+
+export const DisabledMulti: Story = {
+  args: {
+    mode: 'multiple',
+    disabled: true,
+    defaultValue: ['app1', 'app4'],
+  },
+};
+
+// ── Tree structure stories ────────────────────────────────────────
+
+export const TreeStructure: Story = {
+  name: 'Tree — Multi Level',
+  args: {
+    nodes: mockTreeNodes,
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+};
+
+export const TreeWithSelection: Story = {
+  name: 'Tree — Single Selected',
+  args: {
+    nodes: mockTreeNodes,
+    defaultValue: 'item1c',
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+};
+
+export const TreeMultiSelect: Story = {
+  name: 'Tree — Multi Select',
+  args: {
+    nodes: mockTreeNodes,
+    mode: 'multiple',
+    defaultValue: ['item1a', 'item1c', 'item2d'],
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+};
+
+// ── Interactive demo ─────────────────────────────────────────────
+
+export const Interactive: Story = {
+  args: {
+    nodes: mockTreeNodes,
+    mode: 'multiple',
+    searchPlaceholder: '输入表单名称来搜索',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string | string[]>([]);
+    const [mode, setMode] = useState<'single' | 'multiple'>('multiple');
+    const [useTree, setUseTree] = useState(true);
+
+    const currentNodes = useTree ? mockTreeNodes : groupsToAppTreeNodes(mockGroups);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
+          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <input type="radio" checked={mode === 'single'} onChange={() => { setMode('single'); setValue(''); }} />
+            单选
+          </label>
+          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <input type="radio" checked={mode === 'multiple'} onChange={() => { setMode('multiple'); setValue([]); }} />
+            多选
+          </label>
+          <span style={{ color: '#E0E0E0' }}>|</span>
+          <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <input type="checkbox" checked={useTree} onChange={(e) => { setUseTree(e.target.checked); setValue([]); }} />
+            多层树形
+          </label>
+        </div>
+        <AppSelect
+          {...args}
+          nodes={currentNodes}
+          mode={mode}
+          value={value}
+          onChange={(v) => setValue(v)}
+        />
+        <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all', maxWidth: 320 }}>
+          已选择: {JSON.stringify(value)}
+        </div>
+      </div>
+    );
+  },
+};