:sparkles: create recent list

dashboard/src/pages/studio/recent/index.tsx

@@ -1,27 +1,187 @@
-import { useParams, Link } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { ProTable } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
-import { Space } from "antd";
+import { Link } from "react-router-dom";
+import { Layout, Space, Table } from "antd";
+
+import type { MenuProps } from "antd";
+import { Button, Dropdown, Menu } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
 
+const { Content } = Layout;
+
+const onMenuClick: MenuProps["onClick"] = (e) => {
+	console.log("click", e);
+};
+
+const menu = (
+	<Menu
+		onClick={onMenuClick}
+		items={[
+			{
+				key: "1",
+				label: "在藏经阁中打开",
+				icon: <SearchOutlined />,
+			},
+			{
+				key: "2",
+				label: "分享",
+				icon: <SearchOutlined />,
+			},
+			{
+				key: "3",
+				label: "删除",
+				icon: <SearchOutlined />,
+			},
+		]}
+	/>
+);
+
+interface IItem {
+	id: number;
+	title: string;
+	subtitle: string;
+	publicity: number;
+	createdAt: number;
+}
+
 const Widget = () => {
-	const intl = useIntl(); //i18n
-	const { studioname } = useParams(); //url 参数
+	const intl = useIntl();
+	const { studioname } = useParams();
 	return (
-		<div>
+		<Layout>
 			<HeadBar />
-			<LeftSider />
-			<h2>
-				studio/{studioname}/{intl.formatMessage({ id: "columns.studio.recent.title" })}
-			</h2>
-			<div>
-				<Space>
-					<Link to=""> </Link>
-				</Space>
-			</div>
+			<Layout>
+				<LeftSider selectedKeys="recent" />
+				<Content>
+					<Layout>{studioname}</Layout>
+					<ProTable<IItem>
+						columns={[
+							{
+								title: intl.formatMessage({ id: "dict.fields.sn.label" }),
+								dataIndex: "id",
+								key: "id",
+								width: 50,
+								search: false,
+							},
+							{
+								title: intl.formatMessage({ id: "forms.fields.title.label" }),
+								dataIndex: "title",
+								key: "title",
+								tip: "过长会自动收缩",
+								ellipsis: true,
+								render: (text, row, index, action) => {
+									return (
+										<div>
+											<div>
+												<Link to="edit/12345">{row.title}</Link>
+											</div>
+											<div>{row.subtitle}</div>
+										</div>
+									);
+								},
+							},
+							{
+								title: intl.formatMessage({ id: "forms.fields.publicity.label" }),
+								dataIndex: "publicity",
+								key: "publicity",
+								width: 100,
+								search: false,
+								filters: true,
+								onFilter: true,
+								valueEnum: {
+									all: { text: "全部", status: "Default" },
+									0: { text: "禁用", status: "Success" },
+									10: { text: "私有", status: "Processing" },
+									20: { text: "链接阅读", status: "Default" },
+									30: { text: "公开阅读", status: "Default" },
+									40: { text: "公开可编辑", status: "Default" },
+								},
+							},
+							{
+								title: intl.formatMessage({ id: "forms.fields.created-at.label" }),
+								key: "created-at",
+								width: 100,
+								search: false,
+								dataIndex: "createdAt",
+								valueType: "date",
+								sorter: (a, b) => a.createdAt - b.createdAt,
+							},
+							{
+								title: "操作",
+								key: "option",
+								width: 120,
+								valueType: "option",
+								render: () => [
+									<Dropdown.Button type="link" overlay={menu}>
+										{intl.formatMessage({ id: "buttons.edit" })}
+									</Dropdown.Button>,
+								],
+							},
+						]}
+						rowSelection={{
+							// 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
+							// 注释该行则默认不显示下拉选项
+							selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+						}}
+						tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
+							<Space size={24}>
+								<span>
+									已选 {selectedRowKeys.length} 项
+									<Button type="link" style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+										取消选择
+									</Button>
+								</span>
+							</Space>
+						)}
+						tableAlertOptionRender={() => {
+							return (
+								<Space size={16}>
+									<Button type="link">批量删除</Button>
+								</Space>
+							);
+						}}
+						request={async (params = {}, sorter, filter) => {
+							// TODO
+							console.log(params, sorter, filter);
+
+							const size = params.pageSize || 20;
+							return {
+								total: 1 << 12,
+								success: true,
+								data: Array.from(Array(size).keys()).map((x) => {
+									const id = ((params.current || 1) - 1) * size + x + 1;
+
+									var it: IItem = {
+										id,
+										title: `title ${id}`,
+										subtitle: `subtitle ${id}`,
+										publicity: (Math.floor(Math.random() * 3) + 1) * 10,
+										createdAt: Date.now() - Math.floor(Math.random() * 2000000000),
+									};
+									return it;
+								}),
+							};
+						}}
+						rowKey="id"
+						bordered
+						pagination={{
+							showQuickJumper: true,
+							showSizeChanger: true,
+						}}
+						search={false}
+						options={{
+							search: true,
+						}}
+					/>
+				</Content>
+			</Layout>
 			<Footer />
-		</div>
+		</Layout>
 	);
 };