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,16 +1,33 @@
-import React, { useState } from 'react';
+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]);
+
+  useEffect(() => {
+    getComponentClassify('component').then((res: any) => {
+      if (res.code === 200) {
+        setClassifyOptions(res.data.map((item) => ({ label: item.classifyName, value: item.classifyName })));
+      }
+    });
+  }, []);
+
   // 状态选项配置
   const statusOptions = [
     { label: '全部', value: undefined },
@@ -43,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={'搜索'}
@@ -63,7 +88,8 @@ const ComponentDeployment = () => {
           </Space>
         </div>
         <div className={styles['content']}>
-          <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
+          <CollapseList searchKeyword={debouncedKeyword} runStatus={selectedStatus}
+                        componentClassify={selectedClassify} />
         </div>
       </div>
 

src/pages/componentDevelopment/componentList/addComponentModal.tsx

@@ -590,7 +590,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
               <div
                 style={{
                   width: '80%',
-                  height: 200
+                  height: "40vh",
+                  overflow: 'auto'
                 }}
               >
                 <CompReview componentDesignData={componentDesignData} />

src/pages/componentDevelopment/componentList/compReview.tsx

@@ -57,27 +57,29 @@ const CompReview = ({ componentDesignData }) => {
             <div className={styles['comp-review-output']}>
               <div className={styles['comp-review-io-label']}>output</div>
               <div className={styles['comp-review-io-items']}>
-                {dataArray.map((data, index) => {
-                  // 确保响应始终是数组格式
+                {dataArray.every((data) => {
+                  const responses = Array.isArray(data.responses) ? data.responses :
+                    (data.responses ? [data.responses] : []);
+                  return responses.length === 0;
+                }) ? (
+                  <div className={styles['comp-review-io-placeholder']}>
+                    无输出参数
+                  </div>
+                ) : (
+                  dataArray.map((data, index) => {
                     const responses = Array.isArray(data.responses) ? data.responses :
                       (data.responses ? [data.responses] : []);
-
                     return (
                       <div key={data.key || data.id || index}>
-                      {responses.length > 0 ? (
-                        responses.map((response, responseIndex) => (
+                        {responses.map((response, responseIndex) => (
                           <div key={responseIndex} className={styles['comp-review-io-item']}>
                             {response.type} {response.ident}
                           </div>
-                        ))
-                      ) : (
-                        <div className={styles['comp-review-io-placeholder']}>
-                          无输出参数
-                        </div>
-                      )}
+                        ))}
                       </div>
                     );
-                })}
+                  })
+                )}
               </div>
             </div>
           </div>