:art: formatting

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

@@ -3,9 +3,9 @@ import { ProTable } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
 import { Button, Space, Table, Dropdown, Menu, MenuProps } from "antd";
 import {
-	SearchOutlined,
-	DeleteOutlined,
-	ShareAltOutlined,
+  SearchOutlined,
+  DeleteOutlined,
+  ShareAltOutlined,
 } from "@ant-design/icons";
 
 import TermCreate from "../../../components/studio/term/TermCreate";
@@ -13,251 +13,249 @@ import { ITermListResponse } from "../../../components/api/Term";
 import { get } from "../../../request";
 
 const onMenuClick: MenuProps["onClick"] = (e) => {
-	console.log("click", e);
+  console.log("click", e);
 };
 
 const menu = (
-	<Menu
-		onClick={onMenuClick}
-		items={[
-			{
-				key: "1",
-				label: "更多查询",
-				icon: <SearchOutlined />,
-			},
-			{
-				key: "2",
-				label: "分享",
-				icon: <ShareAltOutlined />,
-			},
-			{
-				key: "3",
-				label: "删除",
-				icon: <DeleteOutlined />,
-			},
-		]}
-	/>
+  <Menu
+    onClick={onMenuClick}
+    items={[
+      {
+        key: "1",
+        label: "更多查询",
+        icon: <SearchOutlined />,
+      },
+      {
+        key: "2",
+        label: "分享",
+        icon: <ShareAltOutlined />,
+      },
+      {
+        key: "3",
+        label: "删除",
+        icon: <DeleteOutlined />,
+      },
+    ]}
+  />
 );
 
 interface IItem {
-	sn: number;
-	id: string;
-	word: string;
-	tag: string;
-	channel: string;
-	meaning: string;
-	meaning2: string;
-	note: string;
-	createdAt: number;
+  sn: number;
+  id: string;
+  word: string;
+  tag: string;
+  channel: string;
+  meaning: string;
+  meaning2: string;
+  note: string;
+  createdAt: number;
 }
 
 const Widget = () => {
-	const intl = useIntl();
-	const { studioname } = useParams();
+  const intl = useIntl();
+  const { studioname } = useParams();
 
-	return (
-		<>
-			<ProTable<IItem>
-				columns={[
-					{
-						title: intl.formatMessage({
-							id: "term.fields.sn.label",
-						}),
-						dataIndex: "sn",
-						key: "sn",
-						width: 30,
-						search: false,
-					},
-					{
-						title: intl.formatMessage({
-							id: "term.fields.word.label",
-						}),
-						dataIndex: "word",
-						key: "word",
-						tip: "单词过长会自动收缩",
-						ellipsis: true,
-						formItemProps: {
-							rules: [
-								{
-									required: true,
-									message: "此项为必填项",
-								},
-							],
-						},
-					},
-					{
-						title: intl.formatMessage({
-							id: "term.fields.description.label",
-						}),
-						dataIndex: "tag",
-						key: "description",
-						search: false,
-					},
-					{
-						title: intl.formatMessage({
-							id: "term.fields.channel.label",
-						}),
-						dataIndex: "channel",
-						valueType: "select",
-						valueEnum: {
-							all: { text: "全部" },
-							1: { text: "中文" },
-							2: { text: "中文草稿" },
-							3: { text: "英文" },
-							4: { text: "英文草稿" },
-							5: { text: "Visuddhinanda" },
-						},
-					},
-					{
-						title: intl.formatMessage({
-							id: "term.fields.meaning.label",
-						}),
-						dataIndex: "meaning",
-						key: "meaning",
-					},
-					{
-						title: intl.formatMessage({
-							id: "term.fields.meaning2.label",
-						}),
-						dataIndex: "meaning2",
-						key: "meaning2",
-						tip: "意思过长会自动收缩",
-						ellipsis: true,
-					},
-					{
-						title: intl.formatMessage({
-							id: "term.fields.note.label",
-						}),
-						dataIndex: "note",
-						key: "note",
-						search: false,
-						tip: "注释过长会自动收缩",
-						ellipsis: true,
-					},
-					{
-						title: intl.formatMessage({
-							id: "forms.fields.created-at.label",
-						}),
-						key: "created-at",
-						width: 200,
-						search: false,
-						dataIndex: "createdAt",
-						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);
-									}}
-								>
-									<TermCreate
-										studio={studioname}
-										edit={true}
-										wordId={row.id}
-									/>
-								</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>
-							{intl.formatMessage({ id: "buttons.selected" })}
-							{selectedRowKeys.length}
-							<Button
-								type="link"
-								style={{ marginInlineStart: 8 }}
-								onClick={onCleanSelected}
-							>
-								{intl.formatMessage({ id: "buttons.unselect" })}
-							</Button>
-						</span>
-					</Space>
-				)}
-				tableAlertOptionRender={() => {
-					return (
-						<Space size={16}>
-							<Button type="link">批量删除</Button>
-							<Button type="link">导出数据</Button>
-						</Space>
-					);
-				}}
-				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);
+  return (
+    <>
+      <ProTable<IItem>
+        columns={[
+          {
+            title: intl.formatMessage({
+              id: "term.fields.sn.label",
+            }),
+            dataIndex: "sn",
+            key: "sn",
+            width: 30,
+            search: false,
+          },
+          {
+            title: intl.formatMessage({
+              id: "term.fields.word.label",
+            }),
+            dataIndex: "word",
+            key: "word",
+            tip: "单词过长会自动收缩",
+            ellipsis: true,
+            formItemProps: {
+              rules: [
+                {
+                  required: true,
+                  message: "此项为必填项",
+                },
+              ],
+            },
+          },
+          {
+            title: intl.formatMessage({
+              id: "term.fields.description.label",
+            }),
+            dataIndex: "tag",
+            key: "description",
+            search: false,
+          },
+          {
+            title: intl.formatMessage({
+              id: "term.fields.channel.label",
+            }),
+            dataIndex: "channel",
+            valueType: "select",
+            valueEnum: {
+              all: { text: "全部" },
+              1: { text: "中文" },
+              2: { text: "中文草稿" },
+              3: { text: "英文" },
+              4: { text: "英文草稿" },
+              5: { text: "Visuddhinanda" },
+            },
+          },
+          {
+            title: intl.formatMessage({
+              id: "term.fields.meaning.label",
+            }),
+            dataIndex: "meaning",
+            key: "meaning",
+          },
+          {
+            title: intl.formatMessage({
+              id: "term.fields.meaning2.label",
+            }),
+            dataIndex: "meaning2",
+            key: "meaning2",
+            tip: "意思过长会自动收缩",
+            ellipsis: true,
+          },
+          {
+            title: intl.formatMessage({
+              id: "term.fields.note.label",
+            }),
+            dataIndex: "note",
+            key: "note",
+            search: false,
+            tip: "注释过长会自动收缩",
+            ellipsis: true,
+          },
+          {
+            title: intl.formatMessage({
+              id: "forms.fields.created-at.label",
+            }),
+            key: "created-at",
+            width: 200,
+            search: false,
+            dataIndex: "createdAt",
+            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);
+                  }}
+                >
+                  <TermCreate
+                    studio={studioname}
+                    isCreate={false}
+                    wordId={row.id}
+                  />
+                </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>
+              {intl.formatMessage({ id: "buttons.selected" })}
+              {selectedRowKeys.length}
+              <Button
+                type="link"
+                style={{ marginInlineStart: 8 }}
+                onClick={onCleanSelected}
+              >
+                {intl.formatMessage({ id: "buttons.unselect" })}
+              </Button>
+            </span>
+          </Space>
+        )}
+        tableAlertOptionRender={() => {
+          return (
+            <Space size={16}>
+              <Button type="link">批量删除</Button>
+              <Button type="link">导出数据</Button>
+            </Space>
+          );
+        }}
+        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 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.guid,
-							word: item.word,
-							tag: item.tag,
-							channel: item.channal,
-							meaning: item.meaning,
-							meaning2: item.other_meaning,
-							note: item.note,
-							createdAt: date.getTime(),
-						};
-					});
-					return {
-						total: res.data.count,
-						success: true,
-						data: items,
-					};
-				}}
-				rowKey="id"
-				//bordered
-				pagination={{
-					showQuickJumper: true,
-					showSizeChanger: true,
-				}}
-				toolBarRender={() => [<TermCreate studio={studioname} />]}
-				search={false}
-				options={{
-					search: true,
-				}}
-				dateFormatter="string"
-			/>
-		</>
-	);
+          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.guid,
+              word: item.word,
+              tag: item.tag,
+              channel: item.channal,
+              meaning: item.meaning,
+              meaning2: item.other_meaning,
+              note: item.note,
+              createdAt: date.getTime(),
+            };
+          });
+          return {
+            total: res.data.count,
+            success: true,
+            data: items,
+          };
+        }}
+        rowKey="id"
+        //bordered
+        pagination={{
+          showQuickJumper: true,
+          showSizeChanger: true,
+        }}
+        toolBarRender={() => [
+          <TermCreate isCreate={true} studio={studioname} />,
+        ]}
+        search={false}
+        options={{
+          search: true,
+        }}
+        dateFormatter="string"
+      />
+    </>
+  );
 };
 
 export default Widget;