:construction: term list get-data from api

dashboard/src/pages/studio/term/list.tsx

@@ -1,13 +1,51 @@
 import { useParams } from "react-router-dom";
 import { ProTable } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
-import { Button, Layout, Space, Table, Popover } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
+import {
+	Button,
+	Layout,
+	Space,
+	Table,
+	Popover,
+	Dropdown,
+	Menu,
+	MenuProps,
+} from "antd";
+import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
 
 import TermCreate from "../../../components/studio/term/TermCreate";
+import { ITermListResponse } from "../../../components/api/Term";
+import { get } from "../../../request";
+
+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 {
+	sn: number;
 	id: number;
 	word: string;
 	tag: string;
@@ -31,9 +69,9 @@ const Widget = () => {
 						title: intl.formatMessage({
 							id: "term.fields.sn.label",
 						}),
-						dataIndex: "id",
-						key: "id",
-						width: 80,
+						dataIndex: "sn",
+						key: "sn",
+						width: 30,
 						search: false,
 					},
 					{
@@ -42,7 +80,6 @@ const Widget = () => {
 						}),
 						dataIndex: "word",
 						key: "word",
-						render: (_) => <Link to="">{_}</Link>,
 						tip: "单词过长会自动收缩",
 						ellipsis: true,
 						formItemProps: {
@@ -114,6 +151,30 @@ const Widget = () => {
 						valueType: "date",
 						sorter: (a, b) => a.createdAt - b.createdAt,
 					},
+					{
+						title: intl.formatMessage({ id: "buttons.option" }),
+						key: "option",
+						width: 120,
+						valueType: "option",
+						render: (text, row, index, action) => {
+							return [
+								<Dropdown.Button
+									key={index}
+									type="link"
+									overlay={menu}
+									onClick={() => {
+										//setWordId(row.wordId);
+										//setDrawerTitle(row.word);
+										//setIsEditOpen(true);
+									}}
+								>
+									{intl.formatMessage({
+										id: "buttons.edit",
+									})}
+								</Dropdown.Button>,
+							];
+						},
+					},
 				]}
 				rowSelection={{
 					// 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
@@ -150,29 +211,40 @@ const Widget = () => {
 				request={async (params = {}, sorter, filter) => {
 					// TODO
 					console.log(params, sorter, filter);
+					const offset =
+						((params.current ? params.current : 1) - 1) *
+						(params.pageSize ? params.pageSize : 20);
+					let url = `/v2/terms?view=studio&name=${studioname}&limit=${params.pageSize}&offset=${offset}`;
+					if (typeof params.keyword !== "undefined") {
+						url +=
+							"&search=" + (params.keyword ? params.keyword : "");
+					}
+					console.log(url);
+					const res = await get<ITermListResponse>(url);
 
-					const size = params.pageSize || 20;
+					const items: IItem[] = res.data.rows.map((item, id) => {
+						const date = new Date(item.updated_at);
+						const id2 =
+							((params.current || 1) - 1) *
+								(params.pageSize || 20) +
+							id +
+							1;
+						return {
+							sn: id2,
+							id: item.id,
+							word: item.word,
+							tag: item.tag,
+							channel: item.channal,
+							meaning: item.meaning,
+							meaning2: item.other_meaning,
+							note: item.note,
+							createdAt: date.getTime(),
+						};
+					});
 					return {
-						total: 1 << 12,
+						total: res.data.count,
 						success: true,
-						data: Array.from(Array(size).keys()).map((x) => {
-							const id =
-								((params.current || 1) - 1) * size + x + 1;
-
-							var it: IItem = {
-								id,
-								word: `word ${id}`,
-								tag: "",
-								channel: "2",
-								meaning: `parent ${id}`,
-								meaning2: `meaning ${id}`,
-								note: `note ${id}`,
-								createdAt:
-									Date.now() -
-									Math.floor(Math.random() * 200000),
-							};
-							return it;
-						}),
+						data: items,
 					};
 				}}
 				rowKey="id"
@@ -181,7 +253,6 @@ const Widget = () => {
 					showQuickJumper: true,
 					showSizeChanger: true,
 				}}
-				headerTitle={intl.formatMessage({ id: "dict" })}
 				toolBarRender={() => [
 					<Popover
 						content={<TermCreate studio={studioname} />}
@@ -196,8 +267,9 @@ const Widget = () => {
 						</Button>
 					</Popover>,
 				]}
-				search={{
-					filterType: "light",
+				search={false}
+				options={{
+					search: true,
 				}}
 				dateFormatter="string"
 			/>