From 65d6098c0c7f0dabea1ce6ceef185767c61bcc27 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Tue, 11 Nov 2025 16:53:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20=E5=AE=9E=E7=8E=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=88=97=E8=A1=A8=E6=90=9C=E7=B4=A2=E4=B8=8E=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加搜索状态和搜索处理逻辑- 实现分页重置和延迟搜索机制- 完善导出组件功能并添加错误提示
- 优化组件列表获取逻辑，支持搜索参数传递
- 增加搜索框和重置按钮UI及交互
- 补充获取组件列表失败的错误消息提示
---
 .../componentList/index.tsx                   | 95 ++++++++++++++++---
 1 file changed, 80 insertions(+), 15 deletions(-)

diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx
index bdc440d..1b919f7 100644
--- a/src/pages/componentDevelopment/componentList/index.tsx
+++ b/src/pages/componentDevelopment/componentList/index.tsx
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import styles from './style/index.module.less';
 import { Button, Divider, Input, Space, Table, Radio, Pagination, Modal, Message } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
-import { exportComponent, getCooperationComponentList, getMyComponentList, remove } from '@/api/componentBase';
+import { getMyComponentList, getCooperationComponentList, remove, exportComponent } from '@/api/componentBase';
+import { getReviewGroupByNew } from '@/api/componentMarket';
 import { componentRelease, componentRevoke } from '@/api/componentRelease';
 import { ComponentItem } from '@/api/interface';
 import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal';
@@ -10,11 +11,10 @@ import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handle
 import {
   componentStatusConstant,
   componentStatusDict,
-  publicStatusDict,
-  publishStatusDict
+  publicStatus,
+  publicStatusDict, publishStatusConstant, publishStatusDict
 } from '@/const/isdp/componentBase';
 import dayjs from 'dayjs';
-import { getReviewGroupByNew } from '@/api/componentMarket';
 
 const Group = Radio.Group;
 
@@ -31,6 +31,7 @@ const GlobalVarContainer = () => {
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
   const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态
+  const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
 
   const menuItems = [
     {
@@ -183,9 +184,8 @@ const GlobalVarContainer = () => {
             console.log('Share collaboration', row);
           }}
           onExportComponent={(id) => {
-            // TODO: 实现导出组件逻辑
-            console.log('Export component', id);
-            exportComponent(id);
+            // 实现导出组件逻辑
+            onExportComponent(id);
           }}
           onStopComponentShow={(row) => {
             // TODO: 实现下架组件逻辑
@@ -218,25 +218,41 @@ const GlobalVarContainer = () => {
 
   useEffect(() => {
     if (selectedItem === '我的组件' || selectedItem === '协同组件') {
-      fetchComponentData();
+      // 当切换菜单或搜索条件变化时，重置到第一页
+      setPagination({
+        ...pagination,
+        currPage: 1
+      });
+      // 延迟执行搜索，确保分页参数已更新
+      setTimeout(() => {
+        fetchComponentData();
+      }, 0);
     }
     else if (selectedItem === '组件审核') {
       fetchComponentReview();
     }
-  }, [selectedItem, pagination.currPage, pagination.pageSize]);
+  }, [selectedItem, searchValue]); // 添加 searchValue 作为依赖项
 
-  // 获取组件列表数据
-  const fetchComponentData = async () => {
+  // 获取组件列表数据，支持传入额外参数
+  const fetchComponentData = async (extraParams: any = {}) => {
     setLoading(true);
     const apiMap = {
       '我的组件': getMyComponentList,
       '协同组件': getCooperationComponentList
     };
     try {
-      const res: any = await apiMap[selectedItem]({
+      const params = {
         currPage: pagination.currPage,
-        pageSize: pagination.pageSize
-      });
+        pageSize: pagination.pageSize,
+        ...extraParams
+      };
+
+      // 如果有搜索关键词，则添加到参数中
+      if (searchValue.trim()) {
+        params.name = searchValue.trim();
+      }
+
+      const res: any = await apiMap[selectedItem](params);
 
       setComponentData(res.data.list);
       setPagination({
@@ -247,6 +263,7 @@ const GlobalVarContainer = () => {
       });
     } catch (error) {
       console.error('获取组件列表失败:', error);
+      Message.error('获取组件列表失败');
     } finally {
       setLoading(false);
     }
@@ -271,6 +288,43 @@ const GlobalVarContainer = () => {
     });
   };
 
+  // 修改分页变化处理函数
+  useEffect(() => {
+    if (selectedItem === '我的组件' || selectedItem === '协同组件') {
+      fetchComponentData();
+    }
+  }, [pagination.currPage, pagination.pageSize]);
+
+  // 搜索处理函数
+  const searchHandle = () => {
+    // 重置到第一页并触发搜索
+    setPagination({
+      ...pagination,
+      currPage: 1
+    });
+    fetchComponentData();
+  };
+
+  // 重置搜索
+  const resetSearch = () => {
+    setSearchValue('');
+    setPagination({
+      ...pagination,
+      currPage: 1
+    });
+    fetchComponentData();
+  };
+
+  // 修改导出组件的回调函数
+  const onExportComponent = async (id) => {
+    try {
+      await exportComponent(id);
+      Message.success('组件导出成功');
+    } catch (error) {
+      console.error('导出组件失败:', error);
+      Message.error('组件导出失败');
+    }
+  };
 
   return (
     <>
@@ -296,15 +350,26 @@ const GlobalVarContainer = () => {
               <Space>
                 <Input
                   prefix={<IconSearch />}
-                  placeholder={'搜索'}
+                  placeholder={'输入组件名称搜索'}
                   style={{ width: 236 }}
+                  value={searchValue}
+                  onChange={(value) => setSearchValue(value)}
+                  onPressEnter={searchHandle}
                 />
                 <Button
                   type="primary"
                   style={{ marginLeft: 5, borderRadius: 4 }}
+                  onClick={searchHandle}
                 >
                   搜索
                 </Button>
+                <Button
+                  type="outline"
+                  style={{ marginLeft: 5, borderRadius: 4 }}
+                  onClick={resetSearch}
+                >
+                  重置
+                </Button>
               </Space>
             </div>
             <div className={styles['comp-list-handle']}>