Просмотр исходного кода

✨ feat(admin): add user select component

- 创建用户选择下拉组件,支持搜索和清除功能
- 使用React Query获取用户列表数据
- 显示用户名称和用户名信息,优化选择体验
- 添加加载状态和空选项提示
- 支持自定义样式、类名和占位符文本
yourname 8 месяцев назад
Родитель
Сommit
a3bd927c7d
1 измененных файлов с 67 добавлено и 0 удалено
  1. 67 0
      src/client/admin/components/UserSelect.tsx

+ 67 - 0
src/client/admin/components/UserSelect.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Select } from 'antd';
+import { useQuery } from '@tanstack/react-query';
+import { userClient } from '@/client/api';
+import type { InferResponseType } from 'hono/client';
+
+const { Option } = Select;
+
+interface UserSelectProps {
+  value?: number | null;
+  onChange?: (value: number | null) => void;
+  placeholder?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const UserSelect: React.FC<UserSelectProps> = ({
+  value,
+  onChange,
+  placeholder = '请选择用户',
+  style,
+  className
+}) => {
+  // 获取用户列表
+  const { data: usersData, isLoading } = useQuery({
+    queryKey: ['users-select'],
+    queryFn: async (): Promise<InferResponseType<typeof userClient.$get, 200>> => {
+      const res = await userClient.$get({ query: { page: 1, pageSize: 1000 } });
+      if (!res.ok) {
+        throw new Error('获取用户列表失败');
+      }
+      return res.json();
+    }
+  });
+
+  const users = usersData?.data || [];
+
+  const handleChange = (selectedValue: number | null) => {
+    onChange?.(selectedValue);
+  };
+
+  return (
+    <Select
+      allowClear
+      placeholder={placeholder}
+      value={value}
+      onChange={handleChange}
+      loading={isLoading}
+      style={style}
+      className={className}
+      showSearch
+      optionFilterProp="children"
+      filterOption={(input, option) =>
+        option?.children?.toString().toLowerCase().includes(input.toLowerCase()) || false
+      }
+    >
+      <Option value={null as any}>请选择</Option>
+      {users.map(user => (
+        <Option key={user.id} value={user.id}>
+          {user.name || user.username} ({user.username})
+        </Option>
+      ))}
+    </Select>
+  );
+};
+
+export default UserSelect;