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

package/src/stories/FieldSelect.stories.tsx

@@ -1,228 +1,228 @@
-import { useState, useRef, useCallback } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { FieldSelect, FieldSelectPopover } from '../components/agent-helper/field-select';
-import type { FieldSelectProps } from '../components/agent-helper/field-select';
-import type { IField } from '@baishuyun/types';
-
-// ── Mock Data ─────────────────────────────────────────────────────
-
-const mockFields: IField[] = [
-  { label: '单行文本', widget: { type: 'text', widgetName: 'text_field', value: '' } },
-  { label: '多行文本', widget: { type: 'textarea', widgetName: 'textarea_field', value: '' } },
-  { label: '数字', widget: { type: 'number', widgetName: 'number_field', value: 0 } },
-  { label: '日期时间', widget: { type: 'datetime', widgetName: 'datetime_field', value: '' } },
-  { label: '附件上传', widget: { type: 'upload', widgetName: 'upload_field', value: '' } },
-  { label: '图片上传', widget: { type: 'image', widgetName: 'image_field', value: '' } },
-  { label: '单选框', widget: { type: 'radio', widgetName: 'radio_field', value: '' } },
-  { label: '下拉框', widget: { type: 'combo', widgetName: 'combo_field', value: '' } },
-  { label: '成员选择', widget: { type: 'user', widgetName: 'user_field', value: '' } },
-  { label: '部门选择', widget: { type: 'dept', widgetName: 'dept_field', value: '' } },
-  { label: '签名', widget: { type: 'signature', widgetName: 'sig_field', value: '' } },
-  { label: '关联数据', widget: { type: 'linkdata', widgetName: 'link_field', value: '' } },
-];
-
-const mockFieldsWithSubForms: IField[] = [
-  { label: '单行文本', widget: { type: 'text', widgetName: 'text1', value: '' } },
-  {
-    label: '定位',
-    widget: {
-      type: 'location',
-      widgetName: 'location_field',
-      value: '',
-      items: [
-        { label: '地址', value: 'addr', widget: { type: 'address', widgetName: 'addr_field', value: '' } },
-        { label: '经度', value: 'lng', widget: { type: 'text', widgetName: 'lng_field', value: '' } },
-        { label: '纬度', value: 'lat', widget: { type: 'text', widgetName: 'lat_field', value: '' } },
-      ],
-    },
-  },
-  {
-    label: '子表单',
-    widget: {
-      type: 'subform',
-      widgetName: 'subform1',
-      value: '',
-      items: [
-        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
-        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
-        { label: '子字段三', value: 'sub3', widget: { type: 'datetime', widgetName: 'sub_date', value: '' } },
-      ],
-    },
-  },
-  {
-    label: '嵌套子表单',
-    widget: {
-      type: 'subform',
-      widgetName: 'nested_subform',
-      value: '',
-      items: [
-        { label: '嵌套字段A', value: 'na', widget: { type: 'text', widgetName: 'na_text', value: '' } },
-        { label: '嵌套字段B', value: 'nb', widget: { type: 'upload', widgetName: 'nb_file', value: '' } },
-        { label: '嵌套字段C', value: 'nc', widget: { type: 'number', widgetName: 'nc_num', value: 0 } },
-      ],
-    },
-  },
-  { label: '日期时间', widget: { type: 'datetime', widgetName: 'dt1', value: '' } },
-  { label: '附件', widget: { type: 'upload', widgetName: 'file1', value: '' } },
-  { label: '无类型字段', description: '这个字段没有 widget' },
-];
-
-// ── Meta ──────────────────────────────────────────────────────────
-
-const meta: Meta<typeof FieldSelect> = {
-  title: 'Agent Helper/FieldSelect',
-  component: FieldSelect,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  args: {
-    fields: mockFields,
-    placeholder: '请选择字段',
-    searchPlaceholder: '输入字段名称来搜索',
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 360, padding: 20 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ── Stories ───────────────────────────────────────────────────────
-
-export const Default: Story = {};
-
-export const WithSelection: Story = {
-  args: { defaultValue: 'datetime_field' },
-};
-
-export const Empty: Story = {
-  args: { fields: [] },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, defaultValue: 'text_field' },
-};
-
-export const NoTypeBadge: Story = {
-  args: { showTypeBadge: false, defaultValue: 'number_field' },
-};
-
-export const WithSubForms: Story = {
-  args: {
-    fields: mockFieldsWithSubForms,
-    defaultValue: 'sub_text',
-  },
-};
-
-// ── Standalone Popover Story ──────────────────────────────────────
-
-export const StandalonePopover: StoryObj<typeof FieldSelectPopover> = {
-  render: () => {
-    const [selected, setSelected] = useState<{ field: IField; key: string } | null>(null);
-    const [open, setOpen] = useState(false);
-    const btnRef = useRef<HTMLButtonElement>(null);
-
-    const handleSelect = useCallback((field: IField, nodeKey: string) => {
-      setSelected({ field, key: nodeKey });
-      setOpen(false);
-    }, []);
-
-    return (
-      <div style={{ position: 'relative' }}>
-        <button
-          ref={btnRef}
-          type="button"
-          onClick={() => setOpen(!open)}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: 260,
-            height: 34,
-            padding: '7px 10px',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-            background: '#fff',
-            cursor: 'pointer',
-            fontSize: 14,
-          }}
-        >
-          <span style={{ color: selected ? '#030303' : '#999999' }}>
-            {selected ? selected.field.label : '自定义触发器 (点击打开)'}
-          </span>
-          <span style={{ color: '#666666', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}>
-            ▼
-          </span>
-        </button>
-        {open && (
-          <div
-            style={{
-              position: 'absolute',
-              top: 38,
-              left: 0,
-              zIndex: 9999,
-            }}
-          >
-            <FieldSelectPopover
-              fields={mockFieldsWithSubForms}
-              selectedKey={selected?.key}
-              onSelect={handleSelect}
-              showTypeBadge
-              width={260}
-            />
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-// ── Interactive Story ─────────────────────────────────────────────
-
-export const Interactive: Story = {
-  args: {
-    fields: mockFieldsWithSubForms,
-  },
-  render: (args: FieldSelectProps) => {
-    const [selectedKey, setSelectedKey] = useState<string | undefined>();
-    const [selectedField, setSelectedField] = useState<IField | null>(null);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <FieldSelect
-          {...args}
-          value={selectedKey}
-          onChange={(field, key) => {
-            setSelectedField(field);
-            setSelectedKey(key);
-          }}
-        />
-        <div style={{ fontSize: 12, color: '#666666', wordBreak: 'break-all' }}>
-          {selectedField ? (
-            <>
-              <div>已选择: {selectedField.label}</div>
-              {selectedField.widget && (
-                <>
-                  <div>类型: {selectedField.widget.type}</div>
-                  <div>字段名: {selectedField.widget.widgetName}</div>
-                  {selectedField.widget.items && (
-                    <div>子字段数: {selectedField.widget.items.length}</div>
-                  )}
-                </>
-              )}
-              {selectedField.description && (
-                <div>描述: {selectedField.description}</div>
-              )}
-            </>
-          ) : (
-            '未选择'
-          )}
-        </div>
-      </div>
-    );
-  },
-};
+import { useState, useRef, useCallback } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FieldSelect, FieldSelectPopover } from '../components/agent-helper/field-select';
+import type { FieldSelectProps } from '../components/agent-helper/field-select';
+import type { IField } from '@baishuyun/types';
+
+// ── Mock Data ─────────────────────────────────────────────────────
+
+const mockFields: IField[] = [
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text_field', value: '' } },
+  { label: '多行文本', widget: { type: 'textarea', widgetName: 'textarea_field', value: '' } },
+  { label: '数字', widget: { type: 'number', widgetName: 'number_field', value: 0 } },
+  { label: '日期时间', widget: { type: 'datetime', widgetName: 'datetime_field', value: '' } },
+  { label: '附件上传', widget: { type: 'upload', widgetName: 'upload_field', value: '' } },
+  { label: '图片上传', widget: { type: 'image', widgetName: 'image_field', value: '' } },
+  { label: '单选框', widget: { type: 'radio', widgetName: 'radio_field', value: '' } },
+  { label: '下拉框', widget: { type: 'combo', widgetName: 'combo_field', value: '' } },
+  { label: '成员选择', widget: { type: 'user', widgetName: 'user_field', value: '' } },
+  { label: '部门选择', widget: { type: 'dept', widgetName: 'dept_field', value: '' } },
+  { label: '签名', widget: { type: 'signature', widgetName: 'sig_field', value: '' } },
+  { label: '关联数据', widget: { type: 'linkdata', widgetName: 'link_field', value: '' } },
+];
+
+const mockFieldsWithSubForms: IField[] = [
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text1', value: '' } },
+  {
+    label: '定位',
+    widget: {
+      type: 'location',
+      widgetName: 'location_field',
+      value: '',
+      items: [
+        { label: '地址', value: 'addr', widget: { type: 'address', widgetName: 'addr_field', value: '' } },
+        { label: '经度', value: 'lng', widget: { type: 'text', widgetName: 'lng_field', value: '' } },
+        { label: '纬度', value: 'lat', widget: { type: 'text', widgetName: 'lat_field', value: '' } },
+      ],
+    },
+  },
+  {
+    label: '子表单',
+    widget: {
+      type: 'subform',
+      widgetName: 'subform1',
+      value: '',
+      items: [
+        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
+        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
+        { label: '子字段三', value: 'sub3', widget: { type: 'datetime', widgetName: 'sub_date', value: '' } },
+      ],
+    },
+  },
+  {
+    label: '嵌套子表单',
+    widget: {
+      type: 'subform',
+      widgetName: 'nested_subform',
+      value: '',
+      items: [
+        { label: '嵌套字段A', value: 'na', widget: { type: 'text', widgetName: 'na_text', value: '' } },
+        { label: '嵌套字段B', value: 'nb', widget: { type: 'upload', widgetName: 'nb_file', value: '' } },
+        { label: '嵌套字段C', value: 'nc', widget: { type: 'number', widgetName: 'nc_num', value: 0 } },
+      ],
+    },
+  },
+  { label: '日期时间', widget: { type: 'datetime', widgetName: 'dt1', value: '' } },
+  { label: '附件', widget: { type: 'upload', widgetName: 'file1', value: '' } },
+  { label: '无类型字段', description: '这个字段没有 widget' },
+];
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof FieldSelect> = {
+  title: 'Agent Helper/FieldSelect',
+  component: FieldSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    fields: mockFields,
+    placeholder: '请选择字段',
+    searchPlaceholder: '输入字段名称来搜索',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Stories ───────────────────────────────────────────────────────
+
+export const Default: Story = {};
+
+export const WithSelection: Story = {
+  args: { defaultValue: 'datetime_field' },
+};
+
+export const Empty: Story = {
+  args: { fields: [] },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: 'text_field' },
+};
+
+export const NoTypeBadge: Story = {
+  args: { showTypeBadge: false, defaultValue: 'number_field' },
+};
+
+export const WithSubForms: Story = {
+  args: {
+    fields: mockFieldsWithSubForms,
+    defaultValue: 'sub_text',
+  },
+};
+
+// ── Standalone Popover Story ──────────────────────────────────────
+
+export const StandalonePopover: StoryObj<typeof FieldSelectPopover> = {
+  render: () => {
+    const [selected, setSelected] = useState<{ field: IField; key: string } | null>(null);
+    const [open, setOpen] = useState(false);
+    const btnRef = useRef<HTMLButtonElement>(null);
+
+    const handleSelect = useCallback((field: IField, nodeKey: string) => {
+      setSelected({ field, key: nodeKey });
+      setOpen(false);
+    }, []);
+
+    return (
+      <div style={{ position: 'relative' }}>
+        <button
+          ref={btnRef}
+          type="button"
+          onClick={() => setOpen(!open)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: 260,
+            height: 34,
+            padding: '7px 10px',
+            border: '1px solid #E0E0E0',
+            borderRadius: 4,
+            background: '#fff',
+            cursor: 'pointer',
+            fontSize: 14,
+          }}
+        >
+          <span style={{ color: selected ? '#030303' : '#999999' }}>
+            {selected ? selected.field.label : '自定义触发器 (点击打开)'}
+          </span>
+          <span style={{ color: '#666666', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}>
+            ▼
+          </span>
+        </button>
+        {open && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 38,
+              left: 0,
+              zIndex: 9999,
+            }}
+          >
+            <FieldSelectPopover
+              fields={mockFieldsWithSubForms}
+              selectedKey={selected?.key}
+              onSelect={handleSelect}
+              showTypeBadge
+              width={260}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+// ── Interactive Story ─────────────────────────────────────────────
+
+export const Interactive: Story = {
+  args: {
+    fields: mockFieldsWithSubForms,
+  },
+  render: (args: FieldSelectProps) => {
+    const [selectedKey, setSelectedKey] = useState<string | undefined>();
+    const [selectedField, setSelectedField] = useState<IField | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <FieldSelect
+          {...args}
+          value={selectedKey}
+          onChange={(field, key) => {
+            setSelectedField(field);
+            setSelectedKey(key);
+          }}
+        />
+        <div style={{ fontSize: 12, color: '#666666', wordBreak: 'break-all' }}>
+          {selectedField ? (
+            <>
+              <div>已选择: {selectedField.label}</div>
+              {selectedField.widget && (
+                <>
+                  <div>类型: {selectedField.widget.type}</div>
+                  <div>字段名: {selectedField.widget.widgetName}</div>
+                  {selectedField.widget.items && (
+                    <div>子字段数: {selectedField.widget.items.length}</div>
+                  )}
+                </>
+              )}
+              {selectedField.description && (
+                <div>描述: {selectedField.description}</div>
+              )}
+            </>
+          ) : (
+            '未选择'
+          )}
+        </div>
+      </div>
+    );
+  },
+};