feat(componentList): 添加高级搜索功能

src/pages/componentDevelopment/componentList/index.tsx

@@ -11,7 +11,9 @@ import {
   Modal,
   Message,
   Rate,
-  Tag
+  Tag,
+  Form,
+  Select
 } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import {
@@ -25,6 +27,7 @@ import {
 import { deleteComponentMarket, getComponentHistoryReview } from '@/api/componentMarket';
 import { componentRelease, componentRevoke } from '@/api/componentRelease';
 import { ComponentItem } from '@/api/interface';
+import { getComponentClassify } from '@/api/componentClassify';
 import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal';
 import PublishComponentModal from '@/pages/componentDevelopment/componentList/publishComponentModal';
 import ImportComponentModal from '@/pages/componentDevelopment/componentList/importComponentModal';
@@ -42,6 +45,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { componentOffSale } from '@/api/componentDeploy';
 
 const Group = Radio.Group;
+const FormItem = Form.Item;
 
 const GlobalVarContainer = () => {
   const [selectedItem, setSelectedItem] = useState('我的组件');
@@ -59,6 +63,24 @@ const GlobalVarContainer = () => {
   const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态
   const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
   const [componentStatus, setComponentStatus] = useState(''); // 添加组件状态筛选
+
+  // 搜索表单字段
+  const [searchForm, setSearchForm] = useState({
+    name: '',           // 组件名称
+    projectId: '',      // 组件标识
+    componentClassify: '', // 组件分类
+    createUserName: '', // 创建人
+    codeLanguage: ''    // 代码语言
+  });
+
+  // 组件分类选项
+  const [classifyOptions, setClassifyOptions] = useState([]);
+
+  // 代码语言选项
+  const codeLanguageOptions = [
+    { label: 'Java', value: 'Java' },
+    { label: 'Python', value: 'Python' }
+  ];
   const [importModalVisible, setImportModalVisible] = useState(false); // 导入弹窗
   const [importComponentInfo, setImportComponentInfo] = useState(null); // 导入组件信息
   const [importLoading, setImportLoading] = useState(false); // 导入加载状态
@@ -287,6 +309,24 @@ const GlobalVarContainer = () => {
     }
   }, [selectedItem]);
 
+  // 获取组件分类选项
+  useEffect(() => {
+    const fetchClassifyOptions = async () => {
+      try {
+        const res: any = await getComponentClassify('component');
+        if (res.code === 200 && res.data) {
+          setClassifyOptions(res.data.map(item => ({
+            label: item.classifyName,
+            value: item.classifyName
+          })));
+        }
+      } catch (error) {
+        console.error('获取组件分类失败:', error);
+      }
+    };
+    fetchClassifyOptions();
+  }, []);
+
   // 监听来自其他页面的搜索关键词
   useEffect(() => {
     const handleNavigateWithSearch = (event: any) => {
@@ -450,9 +490,32 @@ const GlobalVarContainer = () => {
         size: extraParams.size ?? pagination.size
       };
 
-      const searchName = extraParams.name !== undefined ? extraParams.name : searchValue.trim();
+      // 处理搜索表单参数
-      if (searchName) {
+      const formData = extraParams.searchForm !== undefined ? extraParams.searchForm : searchForm;
-        params.name = searchName;
+
+      // 组件名称
+      if (formData.name?.trim()) {
+        params.name = formData.name.trim();
+      }
+
+      // 组件标识
+      if (formData.projectId?.trim()) {
+        params.projectId = formData.projectId.trim();
+      }
+
+      // 组件分类
+      if (formData.componentClassify?.trim()) {
+        params.componentClassify = formData.componentClassify.trim();
+      }
+
+      // 创建人
+      if (formData.createUserName?.trim()) {
+        params.createUserName = formData.createUserName.trim();
+      }
+
+      // 代码语言
+      if (formData.codeLanguage?.trim()) {
+        params.codeLanguage = formData.codeLanguage.trim();
       }
 
       const status = extraParams.componentStatus !== undefined ? extraParams.componentStatus : componentStatus;
@@ -510,13 +573,21 @@ const GlobalVarContainer = () => {
 
   // 重置搜索
   const resetSearch = () => {
+    const emptyForm = {
+      name: '',
+      projectId: '',
+      componentClassify: '',
+      createUserName: '',
+      codeLanguage: ''
+    };
+    setSearchForm(emptyForm);
     setSearchValue('');
     setComponentStatus('');
     setPagination(prev => ({
       ...prev,
       current: 1
     }));
-    fetchComponentData({ current: 1, size: pagination.size, name: '', componentStatus: '' });
+    fetchComponentData({ current: 1, size: pagination.size, searchForm: emptyForm, componentStatus: '' });
   };
 
   // 修改导出组件的回调函数
@@ -604,14 +675,72 @@ const GlobalVarContainer = () => {
               <div className={styles['comp-list-header']}>
                 <div className={styles['comp-list-search']}>
                   <Space>
-                    <Input
+                    <Form
-                      prefix={<IconSearch />}
+                      style={{ width: '100%' }}
-                      placeholder={'输入组件名称搜索'}
+                      autoComplete="off"
-                      style={{ width: 236 }}
+                      layout="inline"
-                      value={searchValue}
+                    >
-                      onChange={(value) => setSearchValue(value)}
+                      <FormItem label="组件名称">
-                      onPressEnter={searchHandle}
+                        <Input
-                    />
+                          value={searchForm.name}
+                          onChange={(value) => setSearchForm({ ...searchForm, name: value })}
+                          onPressEnter={searchHandle}
+                          placeholder={'输入组件名称'}
+                          allowClear
+                          style={{ width: 200 }}
+                        />
+                      </FormItem>
+                      <FormItem label="组件标识">
+                        <Input
+                          value={searchForm.projectId}
+                          onChange={(value) => setSearchForm({ ...searchForm, projectId: value })}
+                          onPressEnter={searchHandle}
+                          placeholder={'输入组件标识'}
+                          allowClear
+                          style={{ width: 200 }}
+                        />
+                      </FormItem>
+                      <FormItem label="分类">
+                        <Select
+                          value={searchForm.componentClassify}
+                          onChange={(value) => setSearchForm({ ...searchForm, componentClassify: value })}
+                          placeholder={'选择组件分类'}
+                          allowClear
+                          style={{ width: 150 }}
+                        >
+                          {classifyOptions.map(option => (
+                            <Select.Option key={option.value} value={option.value}>
+                              {option.label}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </FormItem>
+                      <FormItem label="创建人">
+                        <Input
+                          value={searchForm.createUserName}
+                          onChange={(value) => setSearchForm({ ...searchForm, createUserName: value })}
+                          onPressEnter={searchHandle}
+                          placeholder={'输入创建人'}
+                          allowClear
+                          style={{ width: 150 }}
+                        />
+                      </FormItem>
+                      <FormItem label="代码语言">
+                        <Select
+                          value={searchForm.codeLanguage}
+                          onChange={(value) => setSearchForm({ ...searchForm, codeLanguage: value })}
+                          placeholder={'选择代码语言'}
+                          allowClear
+                          style={{ width: 150 }}
+                        >
+                          {codeLanguageOptions.map(option => (
+                            <Select.Option key={option.value} value={option.value}>
+                              {option.label}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </FormItem>
+                    </Form>
                     <Button
                       type="primary"
                       style={{ marginLeft: 5, borderRadius: 4 }}