♻️ refactor(clients): 重构客户管理页面组件结构

- 将Clients页面拆分为ClientList组件，优化代码组织
- 移除冗余的导入和组件定义，简化页面代码
- 修改ClientList组件，添加auditStatus参数控制过滤逻辑
- 优化查询参数构建，仅在有筛选条件时添加filters参数

✨ feat(clients): 增强客户列表筛选功能

- 实现auditStatus为-1时不过滤审核状态的功能
- 优化查询参数处理逻辑，避免空筛选条件影响查询结果
- 简化客户管理页面代码，提高可维护性

src/client/admin/pages/Clients.tsx

@@ -1,626 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { Table, Button, Space, Input, Modal, Form ,Select} from 'antd';
-import { App } from 'antd';
-import LazyAreaTreeSelect from '@/client/admin/components/LazyAreaTreeSelect';
-import UserSelect from '@/client/admin/components/UserSelect';
-import AuditButtons from '@/client/admin/components/AuditButtons';
-import ClientDetailModal from '@/client/admin/components/ClientDetailModal';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { clientClient, areaClient } from '@/client/api';
-import type { InferResponseType } from 'hono/client';
-
-// 定义类型
-type ClientItem = InferResponseType<typeof clientClient.$get, 200>['data'][0];
-type ClientListResponse = InferResponseType<typeof clientClient.$get, 200>;
-type AreaItem = InferResponseType<typeof areaClient.$get, 200>['data'][0];
+import React from 'react';
+import ClientList from './clients/ClientList';
 
 const Clients: React.FC = () => {
-  const { message } = App.useApp();
-  const [form] = Form.useForm();
-  const [modalVisible, setModalVisible] = useState(false);
-  const [detailModalVisible, setDetailModalVisible] = useState(false);
-  const [selectedClientId, setSelectedClientId] = useState<number | null>(null);
-  const [editingKey, setEditingKey] = useState<string | null>(null);
-  const [searchText, setSearchText] = useState('');
-  const [auditStatusFilter, setAuditStatusFilter] = useState<number | undefined>(undefined);
-  const [areas, setAreas] = useState<AreaItem[]>([]);
-  const queryClient = useQueryClient();
-  
-  const [pagination, setPagination] = useState({
-    current: 1,
-    pageSize: 10,
-  });
-  
-  // 获取区域列表
-  const { data: areasData } = useQuery({
-    queryKey: ['areas'],
-    queryFn: async (): Promise<InferResponseType<typeof areaClient.$get, 200>> => {
-      const res = await areaClient.$get({ query: { page: 1, pageSize: 1000 } });
-      if (!res.ok) {
-        throw new Error('获取区域列表失败');
-      }
-      return res.json();
-    }
-  });
-
-  // 处理区域数据
-  useEffect(() => {
-    if (areasData?.data) {
-      setAreas(areasData.data);
-    }
-  }, [areasData]);
-
-  // 获取区域显示名称
-  const getAreaDisplay = (areaId: number | null, type: 'province' | 'region') => {
-    if (!areaId) return '-';
-    
-    const area = areas.find(a => a.id === areaId);
-    if (!area) return '-';
-    
-    if (type === 'province') {
-      // 如果是顶级区域（省份）
-      if (!area.parentId) {
-        return area.name;
-      }
-      // 如果是子区域，查找父区域名称
-      const parentArea = areas.find(a => a.id === area.parentId);
-      return parentArea ? parentArea.name : area.name;
-    }
-    
-    if (type === 'region') {
-      // 如果是子区域，显示子区域名称
-      if (area.parentId) {
-        return area.name;
-      }
-      return '-';
-    }
-    
-    return '-';
-  };
-  
-  // 获取客户列表数据
-  const { data: clientsData, isLoading: clientsLoading, error: clientsError } = useQuery({
-    queryKey: ['clients', pagination.current, pagination.pageSize, searchText, auditStatusFilter],
-    queryFn: async () => {
-      const filters: Record<string, any> = {};
-      
-      if (auditStatusFilter !== undefined) {
-        filters.auditStatus = auditStatusFilter;
-      }
-      
-      const query: any = {
-        page: pagination.current,
-        pageSize: pagination.pageSize,
-        keyword: searchText
-      };
-      
-      // 如果有筛选条件，添加到filters参数
-      if (Object.keys(filters).length > 0) {
-        query.filters = JSON.stringify(filters);
-      }
-      
-      const res = await clientClient.$get({ query });
-      if (!res.ok) {
-        throw new Error('获取客户列表失败');
-      }
-      return res.json() as Promise<ClientListResponse>;
-    }
-  });
-  
-  // 错误处理
-  useEffect(() => {
-    if (clientsError) {
-      message.error('获取客户列表失败');
-    }
-  }, [clientsError, message]);
-  
-  // 搜索
-  const handleSearch = () => {
-    setPagination({ ...pagination, current: 1 });
-  };
-  
-  // 分页变化
-  const handleTableChange = (newPagination: any) => {
-    setPagination(newPagination);
-  };
-  
-  // 显示添加/编辑弹窗
-  const showModal = (record?: ClientItem) => {
-    setModalVisible(true);
-    if (record) {
-      setEditingKey(record.id.toString());
-      form.setFieldsValue({
-        companyName: record.companyName,
-        areaId: record.areaId,
-        square: record.square,
-        address: record.address,
-        contactPerson: record.contactPerson,
-        position: record.position,
-        mobile: record.mobile,
-        zipCode: record.zipCode,
-        telephone: record.telephone,
-        fax: record.fax,
-        homepage: record.homepage,
-        email: record.email,
-        industry: record.industry,
-        subIndustry: record.subIndustry,
-        customerType: record.customerType,
-        startDate: record.startDate ? new Date(record.startDate) : null,
-        source: record.source,
-        description: record.description,
-        responsibleUserId: record.responsibleUserId,
-        salesPersonId: record.salesPersonId,
-        operatorId: record.operatorId,
-        groupId: record.groupId,
-        remarks: record.remarks,
-        status: record.status,
-        auditStatus: record.auditStatus,
-      });
-    } else {
-      setEditingKey(null);
-      form.resetFields();
-    }
-  };
-  
-  // 关闭弹窗
-  const handleCancel = () => {
-    setModalVisible(false);
-    form.resetFields();
-  };
-
-  // 查看客户详情
-  const showDetailModal = (record: ClientItem) => {
-    setSelectedClientId(record.id);
-    setDetailModalVisible(true);
-  };
-
-  // 关闭详情弹窗
-  const handleDetailModalClose = () => {
-    setDetailModalVisible(false);
-    setSelectedClientId(null);
-  };
-  
-  // 创建客户
-  const createClient = useMutation({
-    mutationFn: async (data: any) => {
-      const res = await clientClient.$post({ json: data as any });
-      if (!res.ok) {
-        throw new Error('创建客户失败');
-      }
-      return res.json();
-    },
-    onSuccess: () => {
-      message.success('客户创建成功');
-      queryClient.invalidateQueries({ queryKey: ['clients'] });
-    }
-  });
-  
-  // 更新客户
-  const updateClient = useMutation({
-    mutationFn: async ({ id, data }: { id: string; data: any }) => {
-      const res = await clientClient[':id'].$put({
-        param: { id: Number(id) },
-        json: data,
-      });
-      if (!res.ok) {
-        throw new Error('更新客户失败');
-      }
-      return res.json();
-    },
-    onSuccess: () => {
-      message.success('客户更新成功');
-      queryClient.invalidateQueries({ queryKey: ['clients'] });
-    }
-  });
-  
-  const handleSubmit = async () => {
-    try {
-      const values = await form.validateFields();
-      
-      // 处理日期字段
-      if (values.startDate) {
-        values.startDate = values.startDate.format('YYYY-MM-DD');
-      }
-      
-      if (editingKey) {
-        // 更新操作
-        await updateClient.mutateAsync({ id: editingKey, data: values });
-      } else {
-        // 创建操作
-        await createClient.mutateAsync(values);
-      }
-      
-      setModalVisible(false);
-    } catch (error) {
-      message.error('操作失败，请重试');
-    }
-  };
-  
-  // 删除客户
-  const deleteClient = useMutation({
-    mutationFn: async (id: number) => {
-      const res = await clientClient[':id'].$delete({ param: { id } });
-      if (!res.ok) {
-        throw new Error('删除客户失败');
-      }
-      return res.json();
-    },
-    onSuccess: () => {
-      message.success('客户删除成功');
-      queryClient.invalidateQueries({ queryKey: ['clients'] });
-    }
-  });
-  
-  const handleDelete = async (id: number) => {
-    try {
-      await deleteClient.mutateAsync(id);
-    } catch (error) {
-      message.error('删除失败，请重试');
-    }
-  };
-  
-  // 表格列定义
-  const columns = [
-  {
-    title: '项目名称',
-    dataIndex: 'companyName',
-    key: 'companyName',
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: '省份',
-    dataIndex: 'areaId',
-    key: 'province',
-    width: 100,
-    render: (areaId: number) => getAreaDisplay(areaId, 'province'),
-  },
-  {
-    title: '地区',
-    dataIndex: 'areaId',
-    key: 'region',
-    width: 100,
-    render: (areaId: number) => getAreaDisplay(areaId, 'region'),
-  },
-  {
-    title: '登记审核',
-    dataIndex: 'auditStatus',
-    key: 'auditStatus',
-    width: 150,
-    render: (status: number, record: ClientItem) => (
-      <AuditButtons
-        recordId={record.id}
-        currentStatus={status}
-      />
-    ),
-  },
-    {
-      title: '主产品/合同估额',
-      dataIndex: 'description',
-      key: 'productAmount',
-      width: 180,
-      ellipsis: true,
-      render: (description: string) => description || '-',
-    },
-    {
-      title: '投资方',
-      dataIndex: 'industry',
-      key: 'investor',
-      width: 150,
-      ellipsis: true,
-      render: (industry: string) => industry || '-',
-    },
-    {
-      title: '产品大类',
-      dataIndex: 'customerType',
-      key: 'productCategory',
-      width: 120,
-      ellipsis: true,
-      render: (customerType: string) => customerType || '-',
-    },
-    {
-      title: '业务员',
-      dataIndex: 'salesPerson',
-      key: 'salesperson',
-      width: 120,
-      render: (salesPerson: ClientItem['salesPerson']) => {
-        return salesPerson?.name || salesPerson?.username || '-';
-      },
-    },
-    {
-      title: '联系人/电话',
-      key: 'contactPhone',
-      width: 180,
-      render: (_: any, record: ClientItem) => (
-        <div>
-          <div>{record.contactPerson || '-'}</div>
-          <div className="text-gray-500 text-sm">{record.mobile || record.telephone || '-'}</div>
-        </div>
-      ),
-    },
-    {
-      title: '预计投标时间',
-      dataIndex: 'oeDate',
-      key: 'bidTime',
-      width: 120,
-      render: (date: string) => {
-        return date ? new Date(date).toLocaleDateString() : '-';
-      },
-    },
-    {
-      title: '更新时间',
-      dataIndex: 'updatedAt',
-      key: 'updatedAt',
-      width: 150,
-      render: (date: string) => new Date(date).toLocaleDateString(),
-    },
-    {
-      title: '操作员',
-      dataIndex: 'operator',
-      key: 'operator',
-      width: 100,
-      render: (operator: ClientItem['operator']) => {
-        return operator?.name || operator?.username || '-';
-      },
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 180,
-      fixed: 'right' as const,
-      render: (_: any, record: ClientItem) => (
-        <Space size="small">
-          <Button
-            size="small"
-            type="link"
-            icon={<EyeOutlined />}
-            onClick={() => showDetailModal(record)}
-          >
-            详情
-          </Button>
-          <Button
-            size="small"
-            type="link"
-            icon={<EditOutlined />}
-            onClick={() => showModal(record)}
-          >
-            编辑
-          </Button>
-          <Button
-            size="small"
-            type="text"
-            danger
-            icon={<DeleteOutlined />}
-            onClick={() => handleDelete(record.id)}
-          >
-            删除
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-  
   return (
-    <div className="p-6">
-      <div className="mb-6 flex justify-between items-center">
-        <h2 className="text-2xl font-bold text-gray-800">客户管理</h2>
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => showModal()}
-          className="shadow-sm hover:shadow-md transition-all duration-200"
-        >
-          添加客户
-        </Button>
-      </div>
-      
-      <div className="mb-6 p-4 bg-white rounded-lg shadow-sm">
-        <div className="flex items-center space-x-4">
-          <Input
-            placeholder="搜索项目名称、联系人或电话"
-            prefix={<SearchOutlined />}
-            value={searchText}
-            onChange={(e) => setSearchText(e.target.value)}
-            onPressEnter={handleSearch}
-            className="max-w-md"
-            allowClear
-          />
-          <Select
-            placeholder="审核状态"
-            value={auditStatusFilter}
-            onChange={setAuditStatusFilter}
-            style={{ width: 120 }}
-            allowClear
-          >
-            <Select.Option value={0}>待审核</Select.Option>
-            <Select.Option value={1}>已审核</Select.Option>
-            <Select.Option value={2}>已拒绝</Select.Option>
-          </Select>
-          <Button
-            type="primary"
-            onClick={handleSearch}
-            className="hover:shadow-md transition-all duration-200"
-          >
-            搜索
-          </Button>
-          <Button onClick={() => {
-            setSearchText('');
-            setAuditStatusFilter(undefined);
-            setPagination({ ...pagination, current: 1 });
-          }}>
-            重置
-          </Button>
-        </div>
-      </div>
-      
-      <div className="bg-white rounded-lg shadow-sm overflow-hidden">
-        <Table
-          columns={columns}
-          dataSource={clientsData?.data || []}
-          rowKey="id"
-          loading={clientsLoading}
-          pagination={{
-            ...pagination,
-            total: clientsData?.pagination.total || 0,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            showTotal: (total, range) =>
-              `显示 ${range[0]}-${range[1]} 条，共 ${total} 条`,
-            pageSizeOptions: [10, 20, 50, 100],
-            responsive: true,
-          }}
-          onChange={handleTableChange}
-          bordered={false}
-          scroll={{ x: 1500 }}
-          className="w-full"
-          rowClassName={(record, index) =>
-            index % 2 === 0 ? 'bg-white hover:bg-gray-50' : 'bg-gray-50 hover:bg-gray-100'
-          }
-        />
-      </div>
-      
-      <Modal
-        title={editingKey ? "编辑项目" : "添加项目"}
-        open={modalVisible}
-        onCancel={handleCancel}
-        footer={[
-          <Button key="cancel" onClick={handleCancel}>
-            取消
-          </Button>,
-          <Button key="submit" type="primary" onClick={handleSubmit} loading={editingKey ? updateClient.isPending : createClient.isPending}>
-            确定
-          </Button>,
-        ]}
-        width={800}
-      >
-        <Form form={form} layout="vertical">
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="companyName"
-              label="项目名称"
-              rules={[{ required: true, message: '请输入项目名称' }]}
-            >
-              <Input placeholder="请输入项目名称" />
-            </Form.Item>
-            
-            <Form.Item
-              name="auditStatus"
-              label="登记审核"
-              initialValue={0}
-            >
-              <Select>
-                <Select.Option value={0}>待审核</Select.Option>
-                <Select.Option value={1}>已审核</Select.Option>
-                <Select.Option value={2}>已拒绝</Select.Option>
-              </Select>
-            </Form.Item>
-          </div>
-          
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="areaId"
-              label="省份/地区"
-            >
-              <LazyAreaTreeSelect
-                placeholder="请选择省份/地区"
-                value={form.getFieldValue('areaId') || undefined}
-                onChange={(value) => form.setFieldValue('areaId', value)}
-              />
-            </Form.Item>
-          </div>
-          
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="description"
-              label="主产品/合同估额"
-            >
-              <Input.TextArea rows={2} placeholder="请输入主产品或合同金额" />
-            </Form.Item>
-            
-            <Form.Item
-              name="industry"
-              label="投资方"
-            >
-              <Input placeholder="请输入投资方信息" />
-            </Form.Item>
-          </div>
-          
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="customerType"
-              label="产品大类"
-            >
-              <Input placeholder="请输入产品大类" />
-            </Form.Item>
-            
-            <Form.Item
-              name="salesPersonId"
-              label="业务员"
-            >
-              <UserSelect placeholder="请选择业务员" />
-            </Form.Item>
-          </div>
-          
-          <Form.Item
-            name="address"
-            label="地址"
-          >
-            <Input placeholder="请输入详细地址" />
-          </Form.Item>
-          
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="contactPerson"
-              label="联系人"
-            >
-              <Input placeholder="请输入联系人姓名" />
-            </Form.Item>
-            
-            <Form.Item
-              name="mobile"
-              label="联系电话"
-            >
-              <Input placeholder="请输入联系电话" />
-            </Form.Item>
-          </div>
-          
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="oeDate"
-              label="预计投标时间"
-            >
-              <Input placeholder="请输入预计投标时间" />
-            </Form.Item>
-            
-            <Form.Item
-              name="status"
-              label="项目状态"
-              initialValue={1}
-            >
-              <Select>
-                <Select.Option value={0}>无效</Select.Option>
-                <Select.Option value={1}>有效</Select.Option>
-              </Select>
-            </Form.Item>
-            
-          </div>
-          
-          <Form.Item
-            name="remarks"
-            label="备注信息"
-          >
-            <Input.TextArea rows={3} placeholder="请输入备注信息" />
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <ClientDetailModal
-        clientId={selectedClientId}
-        visible={detailModalVisible}
-        onClose={handleDetailModalClose}
-      />
-    </div>
+    <ClientList 
+      auditStatus={-1} 
+      pageTitle="客户管理" 
+    />
   );
 };
 

src/client/admin/pages/clients/ClientList.tsx

@@ -85,15 +85,23 @@ const ClientList: React.FC<ClientListProps> = ({ auditStatus, pageTitle }) => {
     queryKey: ['clients', pagination.current, pagination.pageSize, searchText, auditStatus],
     queryFn: async () => {
       const filters: Record<string, any> = {};
-      filters.auditStatus = auditStatus;
+      
+      // 只有当auditStatus不是-1时才添加审核状态过滤
+      if (auditStatus !== -1) {
+        filters.auditStatus = auditStatus;
+      }
 
       const query: any = {
         page: pagination.current,
         pageSize: pagination.pageSize,
-        keyword: searchText,
-        filters: JSON.stringify(filters)
+        keyword: searchText
       };
       
+      // 只有当有筛选条件时才添加filters参数
+      if (Object.keys(filters).length > 0) {
+        query.filters = JSON.stringify(filters);
+      }
+      
       const res = await clientClient.$get({ query });
       if (!res.ok) {
         throw new Error('获取客户列表失败');