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

package/src/stories/FieldValueInput.stories.tsx

@@ -1,442 +1,442 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import type { FieldType, IField, IFieldValueService } from '@baishuyun/types';
-
-import { FieldValueInput } from '../components/agent-helper/field-value-input';
-
-// ── Mock Service ────────────────────────────────────────────────────
-
-const mockService: IFieldValueService = {
-  searchUsers: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 500));
-    const users = [
-      { id: 'user1', name: '张三', avatar: '' },
-      { id: 'user2', name: '李四', avatar: '' },
-      { id: 'user3', name: '王五', avatar: '' },
-    ];
-    return keyword
-      ? users.filter((u) => u.name.includes(keyword))
-      : users;
-  },
-  searchDepts: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 500));
-    const depts = [
-      { id: 'dept1', name: '技术部' },
-      { id: 'dept2', name: '产品部' },
-      { id: 'dept3', name: '设计部' },
-    ];
-    return keyword
-      ? depts.filter((d) => d.name.includes(keyword))
-      : depts;
-  },
-  searchUserGroups: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    return keyword ? [{ id: 'g1', name: `组-${keyword}` }] : [{ id: 'g1', name: '管理组' }, { id: 'g2', name: '普通组' }];
-  },
-  searchDeptGroups: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    return keyword ? [{ id: 'dg1', name: `部门组-${keyword}` }] : [{ id: 'dg1', name: '研发中心' }];
-  },
-  uploadFile: async (_file) => {
-    await new Promise((r) => setTimeout(r, 800));
-    return { url: 'https://example.com/file.png', name: _file.name };
-  },
-  fetchLinkData: async () => {
-    await new Promise((r) => setTimeout(r, 500));
-    return [
-      { label: '选项A', value: 'a' },
-      { label: '选项B', value: 'b' },
-      { label: '选项C', value: 'c' },
-    ];
-  },
-  searchAddress: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const addresses = [
-      { province: '浙江省', city: '杭州市', district: '西湖区' },
-      { province: '浙江省', city: '杭州市', district: '余杭区' },
-      { province: '北京市', city: '北京市', district: '朝阳区' },
-    ];
-    return keyword
-      ? addresses.filter((a) => a.province.includes(keyword) || a.city.includes(keyword) || a.district.includes(keyword))
-      : addresses;
-  },
-  searchLocation: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    return [
-      { province: '浙江省', city: '杭州市', district: '西湖区', detail: '文三路 123 号', lnglatXY: [120.15, 30.28] as [number, number] },
-      { province: '北京市', city: '北京市', district: '朝阳区', detail: '望京 SOHO', lnglatXY: [116.48, 39.99] as [number, number] },
-    ].filter((l) => !keyword || l.detail.includes(keyword));
-  },
-  searchDistinctValues: async (_field, keyword) => {
-    await new Promise((r) => setTimeout(r, 400));
-    const values = [
-      { label: '苹果', value: 'apple' },
-      { label: '香蕉', value: 'banana' },
-      { label: '橙子', value: 'orange' },
-      { label: '葡萄', value: 'grape' },
-      { label: '西瓜', value: 'watermelon' },
-      { label: '草莓', value: 'strawberry' },
-    ];
-    return keyword
-      ? values.filter((v) => v.label.includes(keyword))
-      : values;
-  },
-};
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <div className="w-[360px] p-[16px]">{children}</div>
-);
-
-// ── Field factory ───────────────────────────────────────────────────
-
-function makeField(
-  type: FieldType,
-  overrides?: Partial<IField>,
-): IField {
-  return {
-    label: '示例字段',
-    widget: {
-      type: type as never,
-      widgetName: 'example_field',
-      value: '',
-      items: [
-        { label: '选项一', value: '1' },
-        { label: '选项二', value: '2' },
-        { label: '选项三', value: '3' },
-      ],
-      ...overrides?.widget,
-    },
-    ...overrides,
-  } as IField;
-}
-
-// ── Meta ────────────────────────────────────────────────────────────
-
-const meta: Meta<typeof FieldValueInput> = {
-  title: 'Agent Helper/FieldValueInput',
-  component: FieldValueInput,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  decorators: [(Story) => <Wrapper><Story /></Wrapper>],
-};
-
-export default meta;
-type Story = StoryObj<typeof FieldValueInput>;
-
-// ── Basic Inputs ────────────────────────────────────────────────────
-
-export const Text: Story = {
-  args: {
-    field: makeField('text', { label: '名称' }),
-  },
-};
-
-export const TextRequired: Story = {
-  args: {
-    field: makeField('text', { label: '名称', widget: { type: 'text', widgetName: 'name', value: '', allowBlank: false } }),
-  },
-};
-
-export const TextWithDescription: Story = {
-  args: {
-    field: makeField('text', { label: '名称', description: '请输入您的姓名' }),
-  },
-};
-
-export const TextDisabled: Story = {
-  args: {
-    field: makeField('text', { label: '名称' }),
-    value: '不可编辑的文本',
-    disabled: true,
-  },
-};
-
-export const NumberInput: Story = {
-  args: {
-    field: makeField('number', { label: '数量' }),
-  },
-};
-
-export const NumberWithValue: Story = {
-  args: {
-    field: makeField('number', { label: '数量' }),
-    value: 42,
-  },
-};
-
-export const Textarea: Story = {
-  args: {
-    field: makeField('textarea', { label: '备注' }),
-  },
-};
-
-export const Password: Story = {
-  args: {
-    field: makeField('password', { label: '密码' }),
-  },
-};
-
-// ── Selection Inputs ────────────────────────────────────────────────
-
-export const Combo: Story = {
-  args: {
-    field: makeField('combo', { label: '下拉选择' }),
-  },
-};
-
-export const LinkData: Story = {
-  args: {
-    field: makeField('linkdata', { label: '联动数据' }),
-    service: mockService,
-  },
-};
-
-export const CheckboxGroup: Story = {
-  args: {
-    field: makeField('checkboxgroup', { label: '多选框组' }),
-  },
-};
-
-export const Combocheck: Story = {
-  args: {
-    field: makeField('combocheck', { label: '下拉多选' }),
-  },
-};
-
-export const RadioGroup: Story = {
-  args: {
-    field: makeField('radiogroup', { label: '单选组' }),
-  },
-};
-
-export const DateTime: Story = {
-  args: {
-    field: makeField('datetime', { label: '日期时间' }),
-  },
-};
-
-// ── Async Pickers ───────────────────────────────────────────────────
-
-export const UserPicker: Story = {
-  args: {
-    field: makeField('user', { label: '负责人' }),
-    service: mockService,
-  },
-};
-
-export const DeptPicker: Story = {
-  args: {
-    field: makeField('dept', { label: '所属部门' }),
-    service: mockService,
-  },
-};
-
-export const UserGroupPicker: Story = {
-  args: {
-    field: makeField('usergroup', { label: '用户组' }),
-    service: mockService,
-  },
-};
-
-export const DeptGroupPicker: Story = {
-  args: {
-    field: makeField('deptgroup', { label: '部门组' }),
-    service: mockService,
-  },
-};
-
-// ── File & Media ────────────────────────────────────────────────────
-
-export const Upload: Story = {
-  args: {
-    field: makeField('upload', { label: '附件' }),
-    service: mockService,
-  },
-};
-
-export const Image: Story = {
-  args: {
-    field: makeField('image', { label: '图片' }),
-    service: mockService,
-  },
-};
-
-// ── Address & Location (cascading province/city/district) ────────────
-
-export const Address: Story = {
-  args: {
-    field: makeField('address', { label: '地址' }),
-  },
-};
-
-export const AddressWithValue: Story = {
-  args: {
-    field: makeField('address', { label: '地址' }),
-    value: { province: '浙江省', city: '杭州市', district: '西湖区' },
-  },
-};
-
-export const Location_: Story = {
-  args: {
-    field: makeField('location', { label: '位置' }),
-  },
-};
-
-export const LocationWithValue: Story = {
-  args: {
-    field: makeField('location', { label: '位置' }),
-    value: { province: '北京市', city: '北京市', district: '朝阳区' },
-  },
-};
-
-// ── Display ─────────────────────────────────────────────────────────
-
-export const Separator: Story = {
-  args: {
-    field: makeField('separator', { label: '分割线标题' }),
-  },
-};
-
-export const SerialNumber: Story = {
-  args: {
-    field: makeField('sn', { label: '流水号' }),
-  },
-};
-
-export const Button: Story = {
-  args: {
-    field: makeField('button', { label: '提交' }),
-  },
-};
-
-export const Subform: Story = {
-  args: {
-    field: makeField('subform', { label: '子表单' }),
-  },
-};
-
-// ── Operator-aware: Range Inputs ─────────────────────────────────────
-
-export const RangeNumber: Story = {
-  args: {
-    field: makeField('number', { label: '金额' }),
-    operator: 'range',
-    value: { min: 10, max: 100 },
-  },
-};
-
-export const RangeDateTime: Story = {
-  args: {
-    field: makeField('datetime', { label: '日期范围' }),
-    operator: 'range',
-    value: { min: '2025-01-01T00:00', max: '2025-12-31T23:59' },
-  },
-};
-
-// ── Operator-aware: Text Multi-select ────────────────────────────────
-
-export const TextMultiSelectIn: Story = {
-  args: {
-    field: makeField('text', { label: '水果选择' }),
-    operator: 'in',
-    service: mockService,
-    value: ['apple', 'banana'],
-  },
-};
-
-export const TextMultiSelectNin: Story = {
-  args: {
-    field: makeField('text', { label: '排除项' }),
-    operator: 'nin',
-    service: mockService,
-    value: ['grape'],
-  },
-};
-
-export const SnMultiSelectIn: Story = {
-  args: {
-    field: makeField('sn', { label: '流水号选择' }),
-    operator: 'in',
-    service: mockService,
-  },
-};
-
-// ── Operator-aware: Async Picker Multi-select ─────────────────────────
-
-export const UserPickerMultiple: Story = {
-  args: {
-    field: makeField('user', { label: '负责人(多选)' }),
-    operator: 'in',
-    service: mockService,
-    value: ['user1', 'user2'],
-  },
-};
-
-export const DeptPickerMultiple: Story = {
-  args: {
-    field: makeField('dept', { label: '所属部门(多选)' }),
-    operator: 'nin',
-    service: mockService,
-    value: ['dept1'],
-  },
-};
-
-export const UserGroupPickerMultiple: Story = {
-  args: {
-    field: makeField('usergroup', { label: '用户组(多选)' }),
-    operator: 'all',
-    service: mockService,
-  },
-};
-
-export const DeptGroupPickerMultiple: Story = {
-  args: {
-    field: makeField('deptgroup', { label: '部门组(多选)' }),
-    operator: 'in',
-    service: mockService,
-  },
-};
-
-// ── Operator-aware: Text single value (no operator → default TextInput) ──
-
-export const TextWithOperatorEq: Story = {
-  args: {
-    field: makeField('text', { label: '关键字' }),
-    operator: 'contains',
-    value: '搜索关键词',
-  },
-};
-
-export const NumberWithOperatorGt: Story = {
-  args: {
-    field: makeField('number', { label: '年龄' }),
-    operator: 'gt',
-    value: 18,
-  },
-};
-
-export const DateTimeWithOperatorEq: Story = {
-  args: {
-    field: makeField('datetime', { label: '开始日期' }),
-    operator: 'gte',
-    value: '2025-01-01T00:00',
-  },
-};
-
-// ── Controlled ──────────────────────────────────────────────────────
-
-export const Controlled: Story = {
-  args: {
-    field: makeField('text', { label: '受控字段' }),
-    value: '受控值',
-  },
-  render: (args) => {
-    const [value, setValue] = useState('受控值');
-    return (
-      <div className="flex flex-col gap-4">
-        <FieldValueInput {...args} value={value} onChange={(v) => setValue(String(v ?? ''))} />
-        <p className="text-[12px] text-[#666]">当前值: {value || '(空)'}</p>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import type { FieldType, IField, IFieldValueService } from '@baishuyun/types';
+
+import { FieldValueInput } from '../components/agent-helper/field-value-input';
+
+// ── Mock Service ────────────────────────────────────────────────────
+
+const mockService: IFieldValueService = {
+  searchUsers: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 500));
+    const users = [
+      { id: 'user1', name: '张三', avatar: '' },
+      { id: 'user2', name: '李四', avatar: '' },
+      { id: 'user3', name: '王五', avatar: '' },
+    ];
+    return keyword
+      ? users.filter((u) => u.name.includes(keyword))
+      : users;
+  },
+  searchDepts: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 500));
+    const depts = [
+      { id: 'dept1', name: '技术部' },
+      { id: 'dept2', name: '产品部' },
+      { id: 'dept3', name: '设计部' },
+    ];
+    return keyword
+      ? depts.filter((d) => d.name.includes(keyword))
+      : depts;
+  },
+  searchUserGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    return keyword ? [{ id: 'g1', name: `组-${keyword}` }] : [{ id: 'g1', name: '管理组' }, { id: 'g2', name: '普通组' }];
+  },
+  searchDeptGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    return keyword ? [{ id: 'dg1', name: `部门组-${keyword}` }] : [{ id: 'dg1', name: '研发中心' }];
+  },
+  uploadFile: async (_file) => {
+    await new Promise((r) => setTimeout(r, 800));
+    return { url: 'https://example.com/file.png', name: _file.name };
+  },
+  fetchLinkData: async () => {
+    await new Promise((r) => setTimeout(r, 500));
+    return [
+      { label: '选项A', value: 'a' },
+      { label: '选项B', value: 'b' },
+      { label: '选项C', value: 'c' },
+    ];
+  },
+  searchAddress: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const addresses = [
+      { province: '浙江省', city: '杭州市', district: '西湖区' },
+      { province: '浙江省', city: '杭州市', district: '余杭区' },
+      { province: '北京市', city: '北京市', district: '朝阳区' },
+    ];
+    return keyword
+      ? addresses.filter((a) => a.province.includes(keyword) || a.city.includes(keyword) || a.district.includes(keyword))
+      : addresses;
+  },
+  searchLocation: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    return [
+      { province: '浙江省', city: '杭州市', district: '西湖区', detail: '文三路 123 号', lnglatXY: [120.15, 30.28] as [number, number] },
+      { province: '北京市', city: '北京市', district: '朝阳区', detail: '望京 SOHO', lnglatXY: [116.48, 39.99] as [number, number] },
+    ].filter((l) => !keyword || l.detail.includes(keyword));
+  },
+  searchDistinctValues: async (_field, keyword) => {
+    await new Promise((r) => setTimeout(r, 400));
+    const values = [
+      { label: '苹果', value: 'apple' },
+      { label: '香蕉', value: 'banana' },
+      { label: '橙子', value: 'orange' },
+      { label: '葡萄', value: 'grape' },
+      { label: '西瓜', value: 'watermelon' },
+      { label: '草莓', value: 'strawberry' },
+    ];
+    return keyword
+      ? values.filter((v) => v.label.includes(keyword))
+      : values;
+  },
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="w-[360px] p-[16px]">{children}</div>
+);
+
+// ── Field factory ───────────────────────────────────────────────────
+
+function makeField(
+  type: FieldType,
+  overrides?: Partial<IField>,
+): IField {
+  return {
+    label: '示例字段',
+    widget: {
+      type: type as never,
+      widgetName: 'example_field',
+      value: '',
+      items: [
+        { label: '选项一', value: '1' },
+        { label: '选项二', value: '2' },
+        { label: '选项三', value: '3' },
+      ],
+      ...overrides?.widget,
+    },
+    ...overrides,
+  } as IField;
+}
+
+// ── Meta ────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof FieldValueInput> = {
+  title: 'Agent Helper/FieldValueInput',
+  component: FieldValueInput,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  decorators: [(Story) => <Wrapper><Story /></Wrapper>],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldValueInput>;
+
+// ── Basic Inputs ────────────────────────────────────────────────────
+
+export const Text: Story = {
+  args: {
+    field: makeField('text', { label: '名称' }),
+  },
+};
+
+export const TextRequired: Story = {
+  args: {
+    field: makeField('text', { label: '名称', widget: { type: 'text', widgetName: 'name', value: '', allowBlank: false } }),
+  },
+};
+
+export const TextWithDescription: Story = {
+  args: {
+    field: makeField('text', { label: '名称', description: '请输入您的姓名' }),
+  },
+};
+
+export const TextDisabled: Story = {
+  args: {
+    field: makeField('text', { label: '名称' }),
+    value: '不可编辑的文本',
+    disabled: true,
+  },
+};
+
+export const NumberInput: Story = {
+  args: {
+    field: makeField('number', { label: '数量' }),
+  },
+};
+
+export const NumberWithValue: Story = {
+  args: {
+    field: makeField('number', { label: '数量' }),
+    value: 42,
+  },
+};
+
+export const Textarea: Story = {
+  args: {
+    field: makeField('textarea', { label: '备注' }),
+  },
+};
+
+export const Password: Story = {
+  args: {
+    field: makeField('password', { label: '密码' }),
+  },
+};
+
+// ── Selection Inputs ────────────────────────────────────────────────
+
+export const Combo: Story = {
+  args: {
+    field: makeField('combo', { label: '下拉选择' }),
+  },
+};
+
+export const LinkData: Story = {
+  args: {
+    field: makeField('linkdata', { label: '联动数据' }),
+    service: mockService,
+  },
+};
+
+export const CheckboxGroup: Story = {
+  args: {
+    field: makeField('checkboxgroup', { label: '多选框组' }),
+  },
+};
+
+export const Combocheck: Story = {
+  args: {
+    field: makeField('combocheck', { label: '下拉多选' }),
+  },
+};
+
+export const RadioGroup: Story = {
+  args: {
+    field: makeField('radiogroup', { label: '单选组' }),
+  },
+};
+
+export const DateTime: Story = {
+  args: {
+    field: makeField('datetime', { label: '日期时间' }),
+  },
+};
+
+// ── Async Pickers ───────────────────────────────────────────────────
+
+export const UserPicker: Story = {
+  args: {
+    field: makeField('user', { label: '负责人' }),
+    service: mockService,
+  },
+};
+
+export const DeptPicker: Story = {
+  args: {
+    field: makeField('dept', { label: '所属部门' }),
+    service: mockService,
+  },
+};
+
+export const UserGroupPicker: Story = {
+  args: {
+    field: makeField('usergroup', { label: '用户组' }),
+    service: mockService,
+  },
+};
+
+export const DeptGroupPicker: Story = {
+  args: {
+    field: makeField('deptgroup', { label: '部门组' }),
+    service: mockService,
+  },
+};
+
+// ── File & Media ────────────────────────────────────────────────────
+
+export const Upload: Story = {
+  args: {
+    field: makeField('upload', { label: '附件' }),
+    service: mockService,
+  },
+};
+
+export const Image: Story = {
+  args: {
+    field: makeField('image', { label: '图片' }),
+    service: mockService,
+  },
+};
+
+// ── Address & Location (cascading province/city/district) ────────────
+
+export const Address: Story = {
+  args: {
+    field: makeField('address', { label: '地址' }),
+  },
+};
+
+export const AddressWithValue: Story = {
+  args: {
+    field: makeField('address', { label: '地址' }),
+    value: { province: '浙江省', city: '杭州市', district: '西湖区' },
+  },
+};
+
+export const Location_: Story = {
+  args: {
+    field: makeField('location', { label: '位置' }),
+  },
+};
+
+export const LocationWithValue: Story = {
+  args: {
+    field: makeField('location', { label: '位置' }),
+    value: { province: '北京市', city: '北京市', district: '朝阳区' },
+  },
+};
+
+// ── Display ─────────────────────────────────────────────────────────
+
+export const Separator: Story = {
+  args: {
+    field: makeField('separator', { label: '分割线标题' }),
+  },
+};
+
+export const SerialNumber: Story = {
+  args: {
+    field: makeField('sn', { label: '流水号' }),
+  },
+};
+
+export const Button: Story = {
+  args: {
+    field: makeField('button', { label: '提交' }),
+  },
+};
+
+export const Subform: Story = {
+  args: {
+    field: makeField('subform', { label: '子表单' }),
+  },
+};
+
+// ── Operator-aware: Range Inputs ─────────────────────────────────────
+
+export const RangeNumber: Story = {
+  args: {
+    field: makeField('number', { label: '金额' }),
+    operator: 'range',
+    value: { min: 10, max: 100 },
+  },
+};
+
+export const RangeDateTime: Story = {
+  args: {
+    field: makeField('datetime', { label: '日期范围' }),
+    operator: 'range',
+    value: { min: '2025-01-01T00:00', max: '2025-12-31T23:59' },
+  },
+};
+
+// ── Operator-aware: Text Multi-select ────────────────────────────────
+
+export const TextMultiSelectIn: Story = {
+  args: {
+    field: makeField('text', { label: '水果选择' }),
+    operator: 'in',
+    service: mockService,
+    value: ['apple', 'banana'],
+  },
+};
+
+export const TextMultiSelectNin: Story = {
+  args: {
+    field: makeField('text', { label: '排除项' }),
+    operator: 'nin',
+    service: mockService,
+    value: ['grape'],
+  },
+};
+
+export const SnMultiSelectIn: Story = {
+  args: {
+    field: makeField('sn', { label: '流水号选择' }),
+    operator: 'in',
+    service: mockService,
+  },
+};
+
+// ── Operator-aware: Async Picker Multi-select ─────────────────────────
+
+export const UserPickerMultiple: Story = {
+  args: {
+    field: makeField('user', { label: '负责人(多选)' }),
+    operator: 'in',
+    service: mockService,
+    value: ['user1', 'user2'],
+  },
+};
+
+export const DeptPickerMultiple: Story = {
+  args: {
+    field: makeField('dept', { label: '所属部门(多选)' }),
+    operator: 'nin',
+    service: mockService,
+    value: ['dept1'],
+  },
+};
+
+export const UserGroupPickerMultiple: Story = {
+  args: {
+    field: makeField('usergroup', { label: '用户组(多选)' }),
+    operator: 'all',
+    service: mockService,
+  },
+};
+
+export const DeptGroupPickerMultiple: Story = {
+  args: {
+    field: makeField('deptgroup', { label: '部门组(多选)' }),
+    operator: 'in',
+    service: mockService,
+  },
+};
+
+// ── Operator-aware: Text single value (no operator → default TextInput) ──
+
+export const TextWithOperatorEq: Story = {
+  args: {
+    field: makeField('text', { label: '关键字' }),
+    operator: 'contains',
+    value: '搜索关键词',
+  },
+};
+
+export const NumberWithOperatorGt: Story = {
+  args: {
+    field: makeField('number', { label: '年龄' }),
+    operator: 'gt',
+    value: 18,
+  },
+};
+
+export const DateTimeWithOperatorEq: Story = {
+  args: {
+    field: makeField('datetime', { label: '开始日期' }),
+    operator: 'gte',
+    value: '2025-01-01T00:00',
+  },
+};
+
+// ── Controlled ──────────────────────────────────────────────────────
+
+export const Controlled: Story = {
+  args: {
+    field: makeField('text', { label: '受控字段' }),
+    value: '受控值',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('受控值');
+    return (
+      <div className="flex flex-col gap-4">
+        <FieldValueInput {...args} value={value} onChange={(v) => setValue(String(v ?? ''))} />
+        <p className="text-[12px] text-[#666]">当前值: {value || '(空)'}</p>
+      </div>
+    );
+  },
+};