mint/dashboard/src/components/studio/group/GroupFile.tsx

import { useIntl } from "react-intl";
import { useState } from "react";
import { ProList } from "@ant-design/pro-components";
import { Space, Tag, Button, Layout } from "antd";
const { Content } = Layout;

const defaultData = [
	{
		id: "1",
		name: "庄春江工作站",
		tag: [{ title: "可编辑", color: "success" }],
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		description: "IAPT|2022-1-3",
	},
	{
		id: "2",
		name: "元亨寺·CBETA",
		tag: [{ title: "可编辑", color: "success" }],
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		description: "我是一条测试的描述",
	},
	{
		id: "3",
		name: "叶均居士",
		tag: [{ title: "只读", color: "default" }],
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		description: "我是一条测试的描述",
	},
	{
		id: "4",
		name: "玛欣德尊者",
		tag: [{ title: "只读", color: "default" }],
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		description: "我是一条测试的描述",
	},
];
type DataItem = typeof defaultData[number];
type IWidgetGroupFile = {
	groupid?: string;
};
const Widget = ({ groupid = "" }: IWidgetGroupFile) => {
	const intl = useIntl(); //i18n
	const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);

	return (
		<Content>
			<Space>{groupid}</Space>
			<ProList<DataItem>
				rowKey="id"
				headerTitle={intl.formatMessage({ id: "group.files" })}
				dataSource={dataSource}
				showActions="hover"
				onDataSourceChange={setDataSource}
				metas={{
					title: {
						dataIndex: "name",
					},
					avatar: {
						dataIndex: "image",
						editable: false,
					},
					description: {
						dataIndex: "description",
					},
					content: {
						dataIndex: "content",
						editable: false,
					},
					subTitle: {
						render: (text, row, index, action) => {
							const showtag = row.tag.map((item, id) => {
								return (
									<Tag color={item.color} key={id}>
										{item.title}
									</Tag>
								);
							});
							return <Space size={0}>{showtag}</Space>;
						},
					},
					actions: {
						render: (text, row, index, action) => [
							<Button
								onClick={() => {
									action?.startEditable(row.id);
								}}
								key="link"
							>
								删除
							</Button>,
						],
					},
				}}
				pagination={{
					showQuickJumper: true,
					showSizeChanger: true,
				}}
			/>
		</Content>
	);
};

export default Widget;