From 1b1d4e620be520318d3830347ebe94d0bd109dbf Mon Sep 17 00:00:00 2001
From: zly <zhongliangyuan@gdngsk.com>
Date: Thu, 19 Mar 2026 15:48:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(componentDeployment):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=88=86=E7=B1=BB=E7=AD=9B=E9=80=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentDeployment/collapseList.tsx      | 10 +++++--
 .../componentDeployment/index.tsx             | 28 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/pages/componentDevelopment/componentDeployment/collapseList.tsx b/src/pages/componentDevelopment/componentDeployment/collapseList.tsx
index 1bc4240..d68beb1 100644
--- a/src/pages/componentDevelopment/componentDeployment/collapseList.tsx
+++ b/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) => {
diff --git a/src/pages/componentDevelopment/componentDeployment/index.tsx b/src/pages/componentDevelopment/componentDeployment/index.tsx
index 24e1278..1e3909a 100644
--- a/src/pages/componentDevelopment/componentDeployment/index.tsx
+++ b/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>