feat(component): 添加组件审核历史查看功能

src/api/interface/index.ts

@@ -273,7 +273,7 @@ export interface ReviewGroup {
 
 export interface ComponentHistoryReview {
   identifier: string;
-  componentVersion: number;
+  componentVersion?: number;
   size?: number;
   current?: number;
 }

src/pages/componentDevelopment/componentList/index.tsx

@@ -1,6 +1,18 @@
 import React, { useState, useEffect, useRef } 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 {
+  Button,
+  Divider,
+  Input,
+  Space,
+  Table,
+  Radio,
+  Pagination,
+  Modal,
+  Message,
+  Rate,
+  Tag
+} from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import {
   getMyComponentList,
@@ -10,7 +22,7 @@ import {
   getImportComponentInfo,
   importComponent
 } from '@/api/componentBase';
-import { deleteComponentMarket } from '@/api/componentMarket';
+import { deleteComponentMarket, getComponentHistoryReview } from '@/api/componentMarket';
 import { componentRelease, componentRevoke } from '@/api/componentRelease';
 import { ComponentItem } from '@/api/interface';
 import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal';
@@ -26,7 +38,7 @@ import {
 } from '@/const/isdp/componentBase';
 import dayjs from 'dayjs';
 import { updateComponentCodingPath } from '@/store/ideContainer';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { componentOffSale } from '@/api/componentDeploy';
 
 const Group = Radio.Group;
@@ -52,9 +64,21 @@ const GlobalVarContainer = () => {
   const [importLoading, setImportLoading] = useState(false); // 导入加载状态
   const [showOffSaleModal, setShowOffSaleModal] = useState(false);
   const [offSaleComponent, setOffSaleComponent] = useState(null);
+
+  // 审核历史弹窗状态
+  const [historyModalVisible, setHistoryModalVisible] = useState(false);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [historyData, setHistoryData] = useState([]);
+  const [currentReviewComponent, setCurrentReviewComponent] = useState(null);
+
   const dispatch = useDispatch();
   const skipNextFetchRef = useRef(false); // 用于跳过下一次由分页变化触发的请求
 
+  // 获取用户信息，判断是否为超管
+  const userInfo = useSelector((state: any) => state.user?.userInfo);
+  // TODO: 等后端提供角色标识字段后，替换这里的判断逻辑
+  const isAdmin = userInfo?.role === 'admin' || userInfo?.isAdmin === true;
+
   const menuItems = [
     {
       key: '1',
@@ -159,8 +183,14 @@ const GlobalVarContainer = () => {
             setPublishModalVisible(true);
           }}
           onGoToReview={(row) => {
-            // TODO: 实现查看审核逻辑
-            console.log('Go to review', row);
+            if (isAdmin) {
+              // 超管：切换到组件审核页面
+              setSelectedItem('组件审核');
+            }
+            else {
+              // 普通用户：弹出审核历史弹窗
+              handleShowReviewHistory(row);
+            }
           }}
           onPublishOrRevokeComponent={async (action, identifier, version) => {
             try {
@@ -382,6 +412,31 @@ const GlobalVarContainer = () => {
     setImportComponentInfo(null);
   };
 
+  // 查看审核历史
+  const handleShowReviewHistory = async (row) => {
+    setCurrentReviewComponent(row);
+    setHistoryModalVisible(true);
+    setHistoryLoading(true);
+
+    try {
+      const res: any = await getComponentHistoryReview({
+        identifier: row.identifier
+      });
+
+      if (res.code === 200 && res.data) {
+        setHistoryData(res.data.list || []);
+      }
+      else {
+        Message.error(res.msg || '获取审核历史失败');
+      }
+    } catch (error) {
+      console.error('获取审核历史失败:', error);
+      Message.error('获取审核历史失败');
+    } finally {
+      setHistoryLoading(false);
+    }
+  };
+
   // 获取组件列表数据，支持传入额外参数
   const fetchComponentData = async (extraParams: any = {}) => {
     setLoading(true);
@@ -687,6 +742,92 @@ const GlobalVarContainer = () => {
         loading={importLoading}
       />
 
+      {/* 审核历史弹窗 */}
+      <Modal
+        title={`审核历史 - ${currentReviewComponent?.name || ''}`}
+        visible={historyModalVisible}
+        onCancel={() => setHistoryModalVisible(false)}
+        footer={null}
+        style={{ width: '90%', maxWidth: 1400, minWidth: 800 }}
+      >
+        <div style={{ minHeight: 400 }}>
+          <Table
+            columns={[
+              {
+                title: '组件名称',
+                dataIndex: 'name',
+                width: 150,
+                render: (_, record: any) => record.main?.name || '-'
+              },
+              {
+                title: '分类',
+                dataIndex: 'componentClassify',
+                width: 120,
+                render: (_, record: any) => record.main?.componentClassify || '-'
+              },
+              {
+                title: '组件标识',
+                dataIndex: 'identifier',
+                width: 180,
+                render: (_, record: any) => record.main?.identifier || '-'
+              },
+              {
+                title: '组件版本',
+                dataIndex: 'componentVersion',
+                width: 100,
+                render: (_, record: any) => record.main?.componentVersion ? `v${record.main.componentVersion}` : '-'
+              },
+              {
+                title: '发布状态',
+                dataIndex: 'publicStatus',
+                width: 120,
+                render: (_, record: any) => {
+                  const status = record.main?.publicStatus;
+                  const statusMap = {
+                    '-1': { text: '未发布', color: 'orange' },
+                    0: { text: '未发布', color: 'orange' },
+                    1: { text: '已发布', color: 'green' },
+                    2: { text: '审核中', color: 'arcoblue' },
+                    3: { text: '审核被拒', color: 'red' }
+                  };
+                  const statusInfo = statusMap[status] || { text: '未知', color: 'gray' };
+                  return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
+                }
+              },
+              {
+                title: '组件评分',
+                dataIndex: 'stars',
+                width: 200,
+                render: (_, record: any) => {
+                  const stars = record.main?.stars;
+                  if (stars < 0) return <span style={{ color: '#999' }}>暂无评分</span>;
+                  return <Rate disabled allowHalf value={stars} />;
+                }
+              },
+              {
+                title: '审核人',
+                dataIndex: 'reviewUserName',
+                width: 120,
+                render: (_, record: any) => record.main?.reviewUserName || '-'
+              },
+              {
+                title: '审核结果',
+                dataIndex: 'reviewOpinion',
+                render: (_, record: any) => record.main?.reviewOpinion || '-'
+              }
+            ]}
+            data={historyData}
+            loading={historyLoading}
+            pagination={false}
+            scroll={{ x: 1600, y: 500 }}
+            border={{
+              wrapper: true,
+              cell: true
+            }}
+          />
+        </div>
+      </Modal>
+
       <Modal
         title={'下架组件'}
         visible={showOffSaleModal}