feat(componentDeployment): 添加组件分类筛选功能

src/pages/componentDevelopment/componentDeployment/collapseList.tsx

@@ -24,9 +24,10 @@ const CollapseItem = Collapse.Item;
 interface CollapseListProps {
   searchKeyword?: string;
   runStatus?: string;
+  componentClassify?: string;
 }
 
-const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus }) => {
+const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus, componentClassify }) => {
   const [collapses, setCollapses] = useState([]);
   const [visible, setVisible] = useState(false);
   const [showOffSaleModal, setShowOffSaleModal] = useState(false);
@@ -56,6 +57,11 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
       params.runStatus = runStatus;
     }
 
+    // 添加组件分类筛选
+    if (componentClassify) {
+      params.componentClassify = componentClassify;
+    }
+
     const res: any = await getDeployList(params);
     if (res.code === 200) {
       setCollapses(res.data.list.reverse());
@@ -128,7 +134,7 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
   useEffect(() => {
     setCurrent(1); // 搜索条件变化时重置到第一页
     getList(1, pageSize);
-  }, [searchKeyword, runStatus]);
+  }, [searchKeyword, runStatus, componentClassify]);
 
   // 折叠面板头部
   const headerNode = (item) => {

src/pages/componentDevelopment/componentDeployment/index.tsx

@@ -1,21 +1,32 @@
 import React, { useState, useEffect } from 'react';
 import styles from './style/index.module.less';
-import { Button, Input, Modal, Radio, Space } from '@arco-design/web-react';
+import { Button, Input, Modal, Radio, Space, Select } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import CollapseList from './collapseList';
 import { startStatusConstant } from '@/const/isdp/componentDeploy';
 import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial';
+import { getComponentClassify } from '@/api/componentClassify';
 
 const ComponentDeployment = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
   const [debouncedKeyword, setDebouncedKeyword] = useState('');
+  const [selectedClassify, setSelectedClassify] = useState<string | undefined>(undefined);
+  const [classifyOptions, setClassifyOptions] = useState<{ label: string; value: string }[]>([]);
+  const [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
+  const [tutorialVisible, setTutorialVisible] = useState(false);
 
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
     return () => clearTimeout(timer);
   }, [searchKeyword]);
-  const [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
+
-  const [tutorialVisible, setTutorialVisible] = useState(false);
+  useEffect(() => {
+    getComponentClassify('component').then((res: any) => {
+      if (res.code === 200) {
+        setClassifyOptions(res.data.map((item) => ({ label: item.classifyName, value: item.classifyName })));
+      }
+    });
+  }, []);
 
   // 状态选项配置
   const statusOptions = [
@@ -49,6 +60,14 @@ const ComponentDeployment = () => {
           </Radio.Group>
 
           <Space>
+            <Select
+              placeholder="组件分类"
+              allowClear
+              style={{ width: 160 }}
+              value={selectedClassify}
+              onChange={(value) => setSelectedClassify(value)}
+              options={classifyOptions}
+            />
             <Input
               prefix={<IconSearch />}
               placeholder={'搜索'}
@@ -69,7 +88,8 @@ const ComponentDeployment = () => {
           </Space>
         </div>
         <div className={styles['content']}>
-          <CollapseList searchKeyword={debouncedKeyword} runStatus={selectedStatus} />
+          <CollapseList searchKeyword={debouncedKeyword} runStatus={selectedStatus}
+                        componentClassify={selectedClassify} />
         </div>
       </div>