first commit

2026-07-13 15:23:29 +08:00
commit 50885a98c8
473 changed files with 33772 additions and 0 deletions
@@ -0,0 +1,128 @@
+import React, { useState, useRef } from 'react';
+import { Card, Space, Divider, Typography, message } from 'antd';
+import XinForm, { type XinFormRef } from '@/components/XinForm';
+import type { FormColumn } from '@/components/XinFormField/FieldRender/typings';
+import UserSelector from '@/components/XinFormField/UserSelector';
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * 用户选择器组件使用示例页面
+ */
+const UserSelectorExample: React.FC = () => {
+  const [singleUser, setSingleUser] = useState<number | null>(null);
+  const [multipleUsers, setMultipleUsers] = useState<number[]>([]);
+  const formRef = useRef<XinFormRef>(undefined);
+
+  // 表单列配置
+  const columns: FormColumn<any>[] = [
+    {
+      dataIndex: 'taskName',
+      title: '任务名称',
+      valueType: 'text',
+      rules: [{ required: true, message: '请输入任务名称' }],
+      fieldProps: {
+        placeholder: '请输入任务名称',
+      },
+    },
+    {
+      dataIndex: 'owner_id',
+      title: '任务负责人',
+      rules: [{ required: true, message: '请选择负责人' }],
+      fieldRender: () => <UserSelector placeholder="请选择负责人" />,
+    },
+    {
+      dataIndex: 'participant_ids',
+      title: '参与人员',
+      rules: [
+        { required: true, message: '请至少选择一个参与人员' },
+        {
+          validator: (_: any, value: number[]) => {
+            if (value && value.length > 10) {
+              return Promise.reject('最多选择10个参与人员');
+            }
+            return Promise.resolve();
+          },
+        },
+      ],
+      fieldRender: () => <UserSelector mode="multiple" maxTagCount={3} placeholder="请选择参与人员" />,
+    },
+    {
+      dataIndex: 'description',
+      title: '任务描述',
+      valueType: 'textarea',
+      fieldProps: {
+        placeholder: '请输入任务描述',
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <Typography style={{ margin: '12px 0 24px 0' }}>
+        <Title level={2}>用户选择器组件示例</Title>
+        <Paragraph>
+          基于 AntDesign 封装的用户选择器表单组件，支持单选和多选模式。
+        </Paragraph>
+      </Typography>
+
+      <Space direction="vertical" size="large" style={{ width: '100%' }}>
+        <Card title="独立使用" bordered>
+          
+          <Text>单选模式：</Text>
+          <div className="mt-2">
+            <UserSelector
+              value={singleUser}
+              onChange={(value) => {
+                setSingleUser(value as number);
+                message.success(`选中用户ID: ${value}`);
+              }}
+              placeholder="请选择用户"
+            />
+          </div>
+          <Text type="secondary" className="mt-2 block">
+            当前选中: {singleUser || '未选择'}
+          </Text>
+
+          <Divider />
+
+          <Text>多选模式：</Text>
+          <div className="mt-2">
+            <UserSelector
+              mode="multiple"
+              value={multipleUsers}
+              onChange={(value) => {
+                setMultipleUsers(value as number[]);
+                message.success(`选中${(value as number[]).length}个用户`);
+              }}
+              placeholder="请选择多个用户"
+              maxTagCount={3}
+            />
+          </div>
+          <Text type="secondary" className="mt-2 block">
+            当前选中: {multipleUsers.length > 0 ? multipleUsers.join(', ') : '未选择'}
+          </Text>
+        </Card>
+
+        <Card title="在 XinForm 中使用" bordered>
+          <XinForm
+            formRef={formRef}
+            columns={columns}
+            onFinish={async (values) => {
+              console.log('表单提交:', values);
+              message.success('提交成功！');
+              message.info(`负责人ID: ${values.owner_id}, 参与人IDs: ${values.participant_ids?.join(', ')}`);
+              return true;
+            }}
+            submitter={{
+              submitText: '提交表单',
+              render: (dom) => dom.submit,
+            }}
+          />
+        </Card>
+      </Space>
+    </div>
+  );
+};
+
+export default UserSelectorExample;