feat(componentDeployment): 添加查看组件功能

src/pages/componentDevelopment/componentDeployment/collapseList.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Collapse, Space, Tag, Button, Table, TableColumnProps, Modal } from '@arco-design/web-react';
+import { Collapse, Space, Tag, Button, Table, TableColumnProps, Modal, Dropdown, Menu } from '@arco-design/web-react';
+import { IconDown, IconToBottom, IconEye } from '@arco-design/web-react/icon';
 import styles from './style/collapseList.module.less';
 import ListNode from '@/pages/componentDevelopment/componentDeployment/listNode';
 import AddModal from '@/pages/componentDevelopment/componentDeployment/addModal';
@@ -69,6 +70,27 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
     }
   };
 
+  // 查看组件
+  const handleViewComponent = (item: any) => {
+    // 先触发跳转事件
+    const navigateEvent = new CustomEvent('navigateToTab', {
+      detail: {
+        path: 'componentList'
+      }
+    });
+    document.dispatchEvent(navigateEvent);
+
+    // 延迟触发搜索事件，确保页面已经切换
+    setTimeout(() => {
+      const searchEvent = new CustomEvent('componentListSearch', {
+        detail: {
+          searchKeyword: item.name
+        }
+      });
+      window.dispatchEvent(searchEvent);
+    }, 100);
+  };
+
 
   useEffect(() => {
     getList();
@@ -140,10 +162,25 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
             </div>
           )}
           {/*更多操作*/}
-          <div className={styles['flex-box']}>
-            <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
-            <span style={{ color: '#A2A2AB' }}>更多操作</span>
-          </div>
+          <Dropdown
+            droplist={
+              <Menu>
+                <Menu.Item key="viewComponent" onClick={() => handleViewComponent(item)}>
+                  <span style={{ color: '#3491FA' }}>
+                    <IconEye />
+                    查看组件
+                  </span>
+                </Menu.Item>
+              </Menu>
+            }
+            position="br"
+          >
+            <div className={styles['flex-box']} style={{ cursor: 'pointer' }}>
+              <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+              <span style={{ color: '#A2A2AB' }}>更多操作</span>
+              <IconDown style={{ fontSize: 12, marginLeft: 4, color: '#A2A2AB' }} />
+            </div>
+          </Dropdown>
         </Space>
       </div>
     );

src/pages/componentDevelopment/componentList/index.tsx

@@ -2,7 +2,14 @@ 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 { getMyComponentList, getCooperationComponentList, remove, exportComponent, getImportComponentInfo, importComponent } from '@/api/componentBase';
+import {
+  getMyComponentList,
+  getCooperationComponentList,
+  remove,
+  exportComponent,
+  getImportComponentInfo,
+  importComponent
+} from '@/api/componentBase';
 import { getReviewGroupByNew } from '@/api/componentMarket';
 import { componentRelease, componentRevoke } from '@/api/componentRelease';
 import { ComponentItem } from '@/api/interface';
@@ -249,6 +256,26 @@ const GlobalVarContainer = () => {
     }
   }, [selectedItem, searchValue]);
 
+  // 监听来自其他页面的搜索关键词
+  useEffect(() => {
+    const handleNavigateWithSearch = (event: any) => {
+      const { searchKeyword } = event.detail || {};
+      if (searchKeyword) {
+        // 设置搜索值
+        setTimeout(() => {
+          setSearchValue(searchKeyword);
+        }, 500);
+      }
+    };
+
+    // 监听导航事件（如果有搜索关键词）
+    window.addEventListener('componentListSearch', handleNavigateWithSearch);
+
+    return () => {
+      window.removeEventListener('componentListSearch', handleNavigateWithSearch);
+    };
+  }, []);
+
   // 处理导入组件 - 文件选择后获取组件信息
   const handleImportFileSelect = async (file: File) => {
     try {
@@ -258,7 +285,8 @@ const GlobalVarContainer = () => {
       if (res.code === 200) {
         setImportComponentInfo(res.data);
         Message.success('组件信息解析成功');
-      } else {
+      }
+      else {
         Message.error(res.msg || '解析组件信息失败');
         setImportComponentInfo(null);
       }
@@ -282,7 +310,8 @@ const GlobalVarContainer = () => {
         setImportModalVisible(false);
         setImportComponentInfo(null);
         fetchComponentData(); // 刷新列表
-      } else {
+      }
+      else {
         Message.error(res.msg || '导入组件失败');
       }
     } catch (error) {