feat(component): 新增组件复制与分享协作功能

master
钟良源 3 months ago
parent 9166dc0d5c
commit 3ff114bd8b

@ -1,4 +1,6 @@
// application
import { getReviewGroupByNew } from '@/api/componentMarket';
export interface CronModel {
appId: string;
cron: string;
@ -256,3 +258,9 @@ export interface ComponentItem {
repoCloneUrl: string;
createUserName: string;
}
export interface ReviewGroup {
queryType: string;
current?: number;
size?: number;
}

@ -16,6 +16,8 @@ interface HandleButtonGroupProps {
onNavTo: (id: number, type: string) => void;
onSourceCodeView: (row: ComponentItem) => void;
onShowEdit: (row: ComponentItem, index: number) => void;
onCopyHandler: (row: ComponentItem) => void;
onShareCollaboration: (row: ComponentItem) => void;
onExportComponent: (id: number) => void;
onStopComponentShow: (row: ComponentItem) => void;
onRowDel: (row: ComponentItem) => void;
@ -30,6 +32,8 @@ const HandleButtonGroup: React.FC<HandleButtonGroupProps> = ({
onNavTo,
onSourceCodeView,
onShowEdit,
onCopyHandler,
onShareCollaboration,
onExportComponent,
onStopComponentShow,
onRowDel
@ -44,6 +48,24 @@ const HandleButtonGroup: React.FC<HandleButtonGroupProps> = ({
const renderDropdownMenu = () => {
const items = [];
// 组件复制
if (!isEligible([componentStatusConstant.DEFAULT, componentStatusConstant.DESIGN], row.componentStatus)) {
items.push(
<Menu.Item key="copy">
<Button type="text" onClick={() => onCopyHandler(row)}></Button>
</Menu.Item>
);
}
// 分享协作
if (!isEligible([componentStatusConstant.DESIGN, componentStatusConstant.DEFAULT], row.componentStatus)) {
items.push(
<Menu.Item key="share">
<Button type="text" onClick={() => onShareCollaboration(row)}></Button>
</Menu.Item>
);
}
// 导出组件
items.push(
<Menu.Item key="export">

@ -2,17 +2,19 @@ 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, remove } from '@/api/componentBase';
import { exportComponent, getCooperationComponentList, getMyComponentList, remove } from '@/api/componentBase';
import { componentRelease, componentRevoke } from '@/api/componentRelease';
import { ComponentItem } from '@/api/interface';
import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal';
import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handleButtonGroup';
import {
componentStatusConstant,
componentStatusDict,
publicStatus,
publicStatusDict, publishStatusConstant, publishStatusDict
publicStatusDict,
publishStatusDict
} from '@/const/isdp/componentBase';
import dayjs from 'dayjs';
import { getReviewGroupByNew } from '@/api/componentMarket';
const Group = Radio.Group;
@ -134,21 +136,38 @@ const GlobalVarContainer = () => {
// TODO: 实现查看审核逻辑
console.log('Go to review', row);
}}
onPublishOrRevokeComponent={(action, identifier, version) => {
// TODO: 实现公开/取消公开组件逻辑
console.log('Publish or revoke component', action, identifier, version);
onPublishOrRevokeComponent={async (action, identifier, version) => {
try {
if (action === 'publish') {
await componentRelease({ identifier, version });
Message.success('组件公开成功');
}
else if (action === 'revoke') {
await componentRevoke({ identifier, version });
Message.success('组件撤销成功');
}
// 重新获取数据以更新状态
fetchComponentData();
} catch (error) {
console.error('操作失败:', error);
Message.error(`组件${action === 'publish' ? '公开' : '撤销'}失败: ${error.message || ''}`);
}
}}
onNavTo={(id, type) => {
// TODO: 实现导航逻辑
console.log('Nav to', id, type);
}}
onSourceCodeView={(row) => {
// TODO: 实现查看源码逻辑
console.log('Source code view', row);
// 跳转到组件编码Tab并传递localProjectPath参数
const event = new CustomEvent('navigateToTab', {
detail: {
path: 'componentCoding',
localProjectPath: row.localProjectPath
}
});
document.dispatchEvent(event);
}}
onShowEdit={(row, index) => {
// TODO: 实现编辑组件逻辑
console.log('Show edit', row, index);
setSelectComponent(row);
setVisible(true);
}}
@ -163,6 +182,7 @@ const GlobalVarContainer = () => {
onExportComponent={(id) => {
// TODO: 实现导出组件逻辑
console.log('Export component', id);
exportComponent(id);
}}
onStopComponentShow={(row) => {
// TODO: 实现下架组件逻辑
@ -194,15 +214,23 @@ const GlobalVarContainer = () => {
];
useEffect(() => {
if (selectedItem === '我的组件') {
if (selectedItem === '我的组件' || selectedItem === '协同组件') {
fetchComponentData();
}
else if (selectedItem === '组件审核') {
fetchComponentReview();
}
}, [selectedItem, pagination.currPage, pagination.pageSize]);
// 获取组件列表数据
const fetchComponentData = async () => {
setLoading(true);
const apiMap = {
'我的组件': getMyComponentList,
'协同组件': getCooperationComponentList
};
try {
const res: any = await getMyComponentList({
const res: any = await apiMap[selectedItem]({
currPage: pagination.currPage,
pageSize: pagination.pageSize
});
@ -221,6 +249,17 @@ 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,
@ -281,7 +320,7 @@ const GlobalVarContainer = () => {
);
})}
</Radio.Group>
<Space split={<Divider type="vertical" />}>
{selectedItem === '我的组件' && <Space split={<Divider type="vertical" />}>
<Button type="secondary" style={{ borderRadius: 4 }}></Button>
<Button type="outline" style={{ borderRadius: 4 }}></Button>
<Button type="primary" style={{ borderRadius: 4 }} onClick={() => {
@ -289,7 +328,7 @@ const GlobalVarContainer = () => {
setVisible(true);
}}>+
</Button>
</Space>
</Space>}
</div>
</div>

Loading…
Cancel
Save