From fd9da62ad8a39083bced625342a4837243322143 Mon Sep 17 00:00:00 2001 From: ZLY Date: Wed, 3 Dec 2025 15:32:49 +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=AE=A1=E6=A0=B8=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E9=A1=B9=E7=9B=AE=E6=A0=87=E8=AF=86=E9=AA=8C=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../componentList/addComponentModal.tsx | 34 ++- .../componentList/compAudit.tsx | 262 ++++++++++++++++++ .../componentList/index.tsx | 218 +++++++-------- 3 files changed, 399 insertions(+), 115 deletions(-) create mode 100644 src/pages/componentDevelopment/componentList/compAudit.tsx diff --git a/src/pages/componentDevelopment/componentList/addComponentModal.tsx b/src/pages/componentDevelopment/componentList/addComponentModal.tsx index 1c69b7c..a383a67 100644 --- a/src/pages/componentDevelopment/componentList/addComponentModal.tsx +++ b/src/pages/componentDevelopment/componentList/addComponentModal.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef, useCallback } from 'react'; import { Modal, Form, @@ -184,13 +184,17 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c if (res.code === 200) setTagsList(res.data); }; + // 防抖 timer ref + const debounceTimerRef = useRef(null); + + // 验证项目标识函数 const validateProjectId = async (projectId: string) => { if (!projectId) return; try { const res = await compProjectValidate(projectId); if (res.data === false) { - // 项目标识已存在，设置表单字段错误 + // 项目标识已存在,设置表单字段错误 form.setFields({ projectId: { value: projectId, @@ -201,7 +205,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c }); } else { - // 项目标识可用，清除错误 + // 项目标识可用,清除错误 form.setFields({ projectId: { value: projectId, @@ -222,6 +226,28 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c } }; + // 防抖后的验证函数 + const debouncedValidateProjectId = useCallback((projectId: string) => { + // 清除之前的定时器 + if (debounceTimerRef.current) { + clearTimeout(debounceTimerRef.current); + } + + // 设置新的定时器 + debounceTimerRef.current = setTimeout(() => { + validateProjectId(projectId); + }, 500); // 500ms 防抖延迟 + }, [form]); + + // 组件卸载时清除定时器 + useEffect(() => { + return () => { + if (debounceTimerRef.current) { + clearTimeout(debounceTimerRef.current); + } + }; + }, []); + const onSubmit = async (showMessage = true) => { try { await form.validate(); @@ -593,7 +619,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c allowClear placeholder="请输入代码标识" disabled={created || isEditMode} - onChange={(e) => validateProjectId(e)} + onChange={(e) => debouncedValidateProjectId(e)} /> diff --git a/src/pages/componentDevelopment/componentList/compAudit.tsx b/src/pages/componentDevelopment/componentList/compAudit.tsx new file mode 100644 index 0000000..ca44e28 --- /dev/null +++ b/src/pages/componentDevelopment/componentList/compAudit.tsx @@ -0,0 +1,262 @@ +import React, { useEffect, useState } from 'react'; +import { Pagination, Table, Tag, Button, Space, Message, Rate } from '@arco-design/web-react'; +import styles from '@/pages/componentDevelopment/componentList/style/index.module.less'; +import { getReviewGroupByNew } from '@/api/componentMarket'; +import dayjs from 'dayjs'; + +// 审核记录接口定义 +interface ReviewRecord { + id: string; + identifier: string; + componentBaseId: string; + componentClassify: string; + name: string; + reviewOpinion: string; + componentVersion: number; + recommend: string; + attachmentAddress: string; + publicStatus: number; + stars: number; + reviewUserName: string; + filesName: string; + createTime: string; + updateTime: string; +} + +// 发布状态映射 +const PUBLIC_STATUS_MAP = { + 0: { text: '待审核', color: 'orange' }, + 1: { text: '审核通过', color: 'green' }, + 2: { text: '审核拒绝', color: 'red' }, + 3: { text: '已发布', color: 'arcoblue' } +}; + +const CompAudit = () => { + const [loading, setLoading] = useState(false); + const [data, setData] = useState([]); + const [pagination, setPagination] = useState({ + totalCount: 0, + pageSize: 10, + totalPage: 0, + currPage: 1 + }); + + const columns = [ + { + title: '组件名称', + dataIndex: 'name', + width: 150 + }, + { + title: '分类', + dataIndex: 'componentClassify', + width: 120 + }, + { + title: '组件标识', + dataIndex: 'identifier', + width: 180 + }, + { + title: '组件版本', + dataIndex: 'componentVersion', + width: 100, + render: (version: number) => `v${version}` + }, + { + title: '发布状态', + dataIndex: 'publicStatus', + width: 120, + render: (status: number) => { + const statusInfo = PUBLIC_STATUS_MAP[status] || { text: '未知', color: 'gray' }; + return {statusInfo.text}; + } + }, + { + title: '组件评分', + dataIndex: 'stars', + width: 150, + render: (stars: number) => { + if (stars < 0) return 暂无评分; + return ; + } + }, + { + title: '推荐度', + dataIndex: 'recommend', + width: 100, + render: (recommend: string) => { + const level = parseInt(recommend); + const colors = ['red', 'orange', 'blue', 'green', 'arcoblue']; + return 等级 {recommend}; + } + }, + { + title: '审核人', + dataIndex: 'reviewUserName', + width: 120 + }, + { + title: '审核意见', + dataIndex: 'reviewOpinion', + width: 200, + render: (opinion: string) => opinion || '-' + }, + { + title: '创建时间', + dataIndex: 'createTime', + width: 180, + render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss') + }, + { + title: '操作', + dataIndex: 'operations', + width: 200, + fixed: 'right' as const, + render: (_, record: ReviewRecord) => ( + + + {record.publicStatus === 0 && ( + <> + + + + )} + {record.attachmentAddress && ( + + )} + + ) + } + ]; + + // 获取组件审核列表数据 + const fetchComponentReview = async () => { + setLoading(true); + try { + const res: any = await getReviewGroupByNew({ + queryType: 'create', + current: pagination.currPage, + size: pagination.pageSize + }); + + console.log('组件审核列表:', res); + + if (res.code === 200 && res.data) { + setData(res.data.records || []); + setPagination({ + totalCount: res.data.total || 0, + pageSize: res.data.size || 10, + totalPage: res.data.pages || 0, + currPage: res.data.current || 1 + }); + } + else { + Message.error(res.msg || '获取审核列表失败'); + } + } catch (error) { + console.error('获取审核列表失败:', error); + Message.error('获取审核列表失败'); + } finally { + setLoading(false); + } + }; + + // 查看详情 + const handleViewDetail = (record: ReviewRecord) => { + // TODO: 实现查看详情逻辑 + console.log('查看详情:', record); + Message.info('查看详情功能待实现'); + }; + + // 审核通过 + const handleApprove = (record: ReviewRecord) => { + // TODO: 实现审核通过逻辑 + console.log('审核通过:', record); + Message.success('审核通过操作待实现'); + }; + + // 审核拒绝 + const handleReject = (record: ReviewRecord) => { + // TODO: 实现审核拒绝逻辑 + console.log('审核拒绝:', record); + Message.warning('审核拒绝操作待实现'); + }; + + // 下载附件 + const handleDownloadAttachment = (record: ReviewRecord) => { + if (record.attachmentAddress) { + window.open(record.attachmentAddress, '_blank'); + } + }; + + // 分页变化处理 + const handlePageChange = (page: number, pageSize?: number) => { + setPagination({ + ...pagination, + currPage: page, + pageSize: pageSize || pagination.pageSize + }); + }; + + // 监听分页变化 + useEffect(() => { + fetchComponentReview(); + }, [pagination.currPage, pagination.pageSize]); + + return ( + <> + +
+ +
+ + ); +}; + +export default CompAudit; \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index fa92a60..2f1090c 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/src/pages/componentDevelopment/componentList/index.tsx @@ -10,13 +10,14 @@ import { getImportComponentInfo, importComponent } from '@/api/componentBase'; -import { getReviewGroupByNew, deleteComponentMarket } from '@/api/componentMarket'; +import { deleteComponentMarket } from '@/api/componentMarket'; import { componentRelease, componentRevoke } from '@/api/componentRelease'; import { ComponentItem } from '@/api/interface'; import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal'; import PublishComponentModal from '@/pages/componentDevelopment/componentList/publishComponentModal'; import ImportComponentModal from '@/pages/componentDevelopment/componentList/importComponentModal'; import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handleButtonGroup'; +import CompAudit from '@/pages/componentDevelopment/componentList/compAudit'; import { componentStatusConstant, componentStatusDict, @@ -253,9 +254,6 @@ const GlobalVarContainer = () => { fetchComponentData(); }, 0); } - else if (selectedItem === '组件审核') { - fetchComponentReview(); - } }, [selectedItem, searchValue]); // 监听来自其他页面的搜索关键词 @@ -284,7 +282,7 @@ const GlobalVarContainer = () => { if (res.code === 200) { setShowOffSaleModal(false); setOffSaleComponent(null); - fetchComponentReview(); + fetchComponentData(); } else { Modal.error({ @@ -307,7 +305,8 @@ const GlobalVarContainer = () => { Message.success('取消发布成功'); // 重新获取数据以更新状态 fetchComponentData(); - } else { + } + else { Message.error(res.message || '取消发布失败'); } } catch (error) { @@ -417,17 +416,6 @@ const GlobalVarContainer = () => { } }; - // 获取组件审核列表数据 - const fetchComponentReview = async () => { - const res: any = await getReviewGroupByNew({ - queryType: 'create', - current: pagination.currPage, - size: pagination.pageSize - }); - - console.log('组件审核列表:', res); - }; - const handlePageChange = (page: number, pageSize?: number) => { setPagination({ ...pagination, @@ -543,101 +531,109 @@ const GlobalVarContainer = () => { ))}
- {/*头部*/} -
-
- - } - placeholder={'输入组件名称搜索'} - style={{ width: 236 }} - value={searchValue} - onChange={(value) => setSearchValue(value)} - onPressEnter={searchHandle} + {selectedItem !== '组件审核' && ( + <> + {/*头部*/} +
+
+ + } + placeholder={'输入组件名称搜索'} + style={{ width: 236 }} + value={searchValue} + onChange={(value) => setSearchValue(value)} + onPressEnter={searchHandle} + /> + + + +
+
+ + {[{ label: '全部', value: '' }, ...componentStatusDict].map((item) => { + return ( + + {({ checked }) => { + return ( + + ); + }} + + ); + })} + + {selectedItem === '我的组件' && }> + {/**/} + + + } +
+ +
+ {/*数据列表*/} +
+
- - - - -
- - {[{ label: '全部', value: '' }, ...componentStatusDict].map((item) => { - return ( - - {({ checked }) => { - return ( - - ); - }} - - ); - })} - - {selectedItem === '我的组件' && }> - {/**/} - - - } -
- - - {/*数据列表*/} - {selectedItem !== '组件审核' && (
-
-
- -
- )} +
+ +
+ + + )} + + {selectedItem === '组件审核' && ( + + )}