:construction: studio 页面框架完毕

dashboard/src/components/studio/LeftSider.tsx

@@ -12,7 +12,7 @@ const onClick: MenuProps['onClick'] = e => {
     console.log('click ', e);
   };
 
-  type IWidgetHeadBar ={
+type IWidgetHeadBar ={
 	selectedKeys?: string
 }
 const Widget = ({selectedKeys = ''}: IWidgetHeadBar) => {
@@ -61,11 +61,11 @@ const items: MenuProps['items'] = [
 		icon: <AppstoreOutlined/>,
 		children:[
 			{
-				label: (<Link to = {linkUserdict}>{intl.formatMessage({ id: "columns.studio.term.title" })}</Link>),
+				label: (<Link to = {linkUserdict}>{intl.formatMessage({ id: "columns.studio.userdict.title" })}</Link>),
 				key: 'userdict',
 			  },
 			  {
-				label: (<Link to = {linkTerm}>{intl.formatMessage({ id: "columns.studio.userdict.title" })}</Link>),
+				label: (<Link to = {linkTerm}>{intl.formatMessage({ id: "columns.studio.term.title" })}</Link>),
 				key: 'term',
 			  },
 			  {
@@ -73,8 +73,8 @@ const items: MenuProps['items'] = [
 				key: 'article',
 			  },
 			  {
-				label: (<Link to = {linkAnthology}>{intl.formatMessage({ id: "columns.studio.authology.title" })}</Link>),
-				key: 'authology',
+				label: (<Link to = {linkAnthology}>{intl.formatMessage({ id: "columns.studio.anthology.title" })}</Link>),
+				key: 'anthology',
 			  },
 		
 		],

dashboard/src/locales/zh-Hans/index.ts

@@ -4,6 +4,8 @@ import tables from "./tables";
 import nut from "./nut";
 import channel from "./channel";
 import dict from "./dict";
+import term from "./term";
+import group from "./group";
 
 const items = {
   "flashes.success": "操作成功",
@@ -39,6 +41,8 @@ const items = {
   ...nut,
   ...channel,
   ...dict,
+  ...term,
+  ...group,
 };
 
 export default items;

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

@@ -1,25 +1,28 @@
 import { useParams ,Link} from "react-router-dom";
 import { useIntl } from "react-intl";
-import { Space } from "antd";
+import { Layout,Space } from "antd";
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
+const {  Content } = Layout;
 
 const Widget = () => {
 	const intl = useIntl();//i18n
 	const { studioname } = useParams();//url 参数
   return (
-    <div>
+    <Layout>
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.analysis.title" })}/行为分析首页</h2>
-      <div>
-		<Space>
-			<Link to=""> </Link>
-		</Space>
-      </div>
+		<Layout>
+			<LeftSider selectedKeys="analysis"/>
+			<Content>
+				<h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.analysis.title" })}/行为分析首页</h2>
+				<Space>
+					<Link to=""> </Link>
+				</Space>
+			</Content>
+		</Layout>
       <Footer/>
-    </div>
+    </Layout>
   );
 };
 

dashboard/src/pages/studio/anthology/edit.tsx

@@ -1,22 +1,28 @@
 import { useParams } from "react-router-dom";
 import { useIntl } from "react-intl";
+import { Layout } from "antd";
+
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
 
+const {  Content } = Layout;
+
 const Widget = () => {
 	const intl = useIntl();
 	const { studioname,anthology_id } = useParams();//url 参数
   return (
-    <div>
+	<Layout>
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.anthology.title" })}/anthology/{anthology_id}</h2>
-      <div>
-		
-      </div>
-      <Footer/>
-    </div>
+		<Layout>
+			<LeftSider selectedKeys="anthology"/>
+			<Content>
+				<h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.anthology.title" })}/anthology/{anthology_id}</h2>
+			</Content>
+		</Layout>
+		<Footer/>
+    </Layout>
+
   );
 };
 

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

@@ -1,26 +1,32 @@
 import { useParams ,Link} from "react-router-dom";
 import { useIntl } from "react-intl";
-import { Space } from "antd";
+import { Layout,Space } from "antd";
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
 
+const {  Content } = Layout;
+
 const Widget = () => {
 	const intl = useIntl();//i18n
 	const { studioname } = useParams();//url 参数
 	const linkEdit = `/studio/${studioname}/anthology/edit/12345`;
   return (
-    <div>
+    <Layout>
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.article.title" })}/文集列表</h2>
-      <div>
-		<Space>
-			<Link to={linkEdit}> anthology edit </Link>
-		</Space>
-      </div>
+		<Layout>
+			<LeftSider selectedKeys="anthology"/>
+			<Content>
+				<h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.article.title" })}/文集列表</h2>
+				<div>
+					<Space>
+						<Link to={linkEdit}> anthology edit </Link>
+					</Space>
+				</div>
+	  		</Content>
+		</Layout>
       <Footer/>
-    </div>
+    </Layout>
   );
 };
 

dashboard/src/pages/studio/article/edit.tsx

@@ -1,22 +1,27 @@
 import { useParams } from "react-router-dom";
 import { useIntl } from "react-intl";
+import { Layout } from "antd";
+
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
+const {  Content } = Layout;
 
 const Widget = () => {
 	const intl = useIntl();
 	const { studioname,articleid } = useParams();//url 参数
   return (
-    <div>
+	<Layout>
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.article.title" })}/edit/{articleid}</h2>
-      <div>
-		
-      </div>
-      <Footer/>
-    </div>
+		<Layout>
+			<LeftSider selectedKeys="article"/>
+			<Content>
+			<h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.article.title" })}/edit/{articleid}</h2>
+			</Content>
+		</Layout>
+		<Footer/>
+	</Layout>
+
   );
 };
 

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

@@ -1,26 +1,31 @@
 import { useParams ,Link} from "react-router-dom";
 import { useIntl } from "react-intl";
-import { Space } from "antd";
+import { Space,Layout } from "antd";
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
+const {  Content } = Layout;
 
 const Widget = () => {
 	const intl = useIntl();//i18n
 	const { studioname } = useParams();//url 参数
 	const linkEdit = `/studio/${studioname}/article/edit/12345`;
   return (
-    <div>
+	<Layout>
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.article.title" })}/文章列表</h2>
-      <div>
-		<Space>
-			<Link to={linkEdit}> article edit </Link>
-		</Space>
-      </div>
-      <Footer/>
-    </div>
+		<Layout>
+			<LeftSider selectedKeys="article"/>
+			<Content>
+			<h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.article.title" })}/文章列表</h2>
+			<div>
+				<Space>
+					<Link to={linkEdit}> article edit </Link>
+				</Space>
+			</div>
+			</Content>
+		</Layout>
+		<Footer/>
+	</Layout>
   );
 };
 

dashboard/src/pages/studio/channel/edit.tsx

@@ -1,11 +1,13 @@
 import { useParams } from "react-router-dom";
 import { ProForm, ProFormText , ProFormSelect,ProFormTextArea } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
-import { message } from "antd";
+import { message,Layout,Space } from "antd";
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
 
+const {  Content } = Layout;
+
 interface IFormData {
 	name: string;
 	type: string;
@@ -15,15 +17,14 @@ interface IFormData {
   }
 const Widget = () => {
 	const intl = useIntl();
-	const { studioname,channelid } = useParams();//url 参数
+	const { channelid } = useParams();//url 参数
   return (
-    <div>
-		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.channel.title" })}/edit/{channelid}</h2>
-      <div>
-		
-		<div>
+	<Layout>
+	<HeadBar/>
+	<Layout>
+		<LeftSider selectedKeys="channel"/>
+		<Content>
+		<Space>{channelid}</Space>
 		<ProForm<IFormData>
 		onFinish={async (values: IFormData) => {
 			// TODO
@@ -73,10 +74,10 @@ const Widget = () => {
 		</ProForm.Group>
 
 		</ProForm>
-		</div>
-      </div>
-      <Footer/>
-    </div>
+	  </Content>
+	</Layout>
+	<Footer/>
+</Layout>
   );
 };
 

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

@@ -1,26 +1,33 @@
 import { useParams ,Link} from "react-router-dom";
 import { useIntl } from "react-intl";
-import { Space } from "antd";
+import { Space,Layout } from "antd";
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
 
+const {  Content } = Layout;
+
 const Widget = () => {
 	const intl = useIntl();//i18n
 	const { studioname } = useParams();//url 参数
 	const linkEdit = `/studio/${studioname}/channel/edit/12345`;
   return (
-    <div>
-		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.channel.title" })}/版本列表</h2>
-      <div>
-		<Space>
-			<Link to={linkEdit}> channel1 edit </Link>
-		</Space>
-      </div>
-      <Footer/>
-    </div>
+	<Layout>
+	<HeadBar/>
+	<Layout>
+		<LeftSider selectedKeys="channel"/>
+		<Content>
+		<h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.channel.title" })}/版本列表</h2>
+		<div>
+			<Space>
+				<Link to={linkEdit}> channel1 edit </Link>
+			</Space>
+		</div>		
+	  </Content>
+	</Layout>
+	<Footer/>
+</Layout>
+
   );
 };
 

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

@@ -9,6 +9,8 @@ import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
 
+const {  Content } = Layout;
+
 interface IItem {
   id: number;
   word: string;
@@ -28,160 +30,165 @@ const valueEnum = {
 	3: 'ind',
   };
 
+
 const Widget = () => {
   const intl = useIntl();
   const { studioname } = useParams();
   return (
 	<Layout>
-		<HeadBar/>
-		<LeftSider/>
+	<HeadBar/>
+	<Layout>
+		<LeftSider selectedKeys="userdict"/>
+		<Content>
+
 		<Layout>{studioname}</Layout>
-    <ProTable<IItem>
-      columns={[
-        {
-          title: intl.formatMessage({ id: "dict.fields.sn.label" }),
-          dataIndex: "id",
-          key: "id",
-          width: 80,
-          search: false,
-        },
-        {
-          title: intl.formatMessage({ id: "dict.fields.word.label" }),
-          dataIndex: "word",
-          key: "word",
-		  render: (_) => <Link to="">{_}</Link>,
-		  tip: '单词过长会自动收缩',
-		  ellipsis: true,
-		  formItemProps: {
-			rules: [
-			  {
-				required: true,
-				message: '此项为必填项',
-			  },
-			],
-		  },
-        },
-		{
-			title: intl.formatMessage({ id: "dict.fields.type.label" }),
-			dataIndex: "type",
-			key: "type",
+		<ProTable<IItem>
+		columns={[
+			{
+			title: intl.formatMessage({ id: "dict.fields.sn.label" }),
+			dataIndex: "id",
+			key: "id",
+			width: 80,
 			search: false,
-			filters: true,
-			onFilter: true,
-			valueEnum: {
-			  all: { text: '全部', status: 'Default' },
-			  n: { text: '名词', status: 'Default' },
-			  ti: { text: '三性', status: 'Processing' },
-			  v: { text: '动词', status: 'Success' },
-			  ind: { text: '不变词', status: 'Success' },
 			},
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.grammar.label" }),
-			dataIndex: "grammar",
-			key: "grammar",
-			search: false,
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.parent.label" }),
-			dataIndex: "parent",
-			key: "parent",
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.meaning.label" }),
-			dataIndex: "meaning",
-			key: "meaning",
-			tip: '意思过长会自动收缩',
+			{
+			title: intl.formatMessage({ id: "dict.fields.word.label" }),
+			dataIndex: "word",
+			key: "word",
+			render: (_) => <Link to="">{_}</Link>,
+			tip: '单词过长会自动收缩',
 			ellipsis: true,
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.note.label" }),
-			dataIndex: "note",
-			key: "note",
-			search: false,
-			tip: '注释过长会自动收缩',
-			ellipsis: true,
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.factors.label" }),
-			dataIndex: "factors",
-			key: "factors",
-			search: false,
-		},
-        {
-          title: intl.formatMessage({ id: "forms.fields.created-at.label" }),
-          key: "created-at",
-          width: 200,
+			formItemProps: {
+				rules: [
+				{
+					required: true,
+					message: '此项为必填项',
+				},
+				],
+			},
+			},
+			{
+				title: intl.formatMessage({ id: "dict.fields.type.label" }),
+				dataIndex: "type",
+				key: "type",
+				search: false,
+				filters: true,
+				onFilter: true,
+				valueEnum: {
+				all: { text: '全部', status: 'Default' },
+				n: { text: '名词', status: 'Default' },
+				ti: { text: '三性', status: 'Processing' },
+				v: { text: '动词', status: 'Success' },
+				ind: { text: '不变词', status: 'Success' },
+				},
+			},
+			{
+				title: intl.formatMessage({ id: "dict.fields.grammar.label" }),
+				dataIndex: "grammar",
+				key: "grammar",
+				search: false,
+			},
+			{
+				title: intl.formatMessage({ id: "dict.fields.parent.label" }),
+				dataIndex: "parent",
+				key: "parent",
+			},
+			{
+				title: intl.formatMessage({ id: "dict.fields.meaning.label" }),
+				dataIndex: "meaning",
+				key: "meaning",
+				tip: '意思过长会自动收缩',
+				ellipsis: true,
+			},
+			{
+				title: intl.formatMessage({ id: "dict.fields.note.label" }),
+				dataIndex: "note",
+				key: "note",
+				search: false,
+				tip: '注释过长会自动收缩',
+				ellipsis: true,
+			},
+			{
+				title: intl.formatMessage({ id: "dict.fields.factors.label" }),
+				dataIndex: "factors",
+				key: "factors",
+				search: false,
+			},
+			{
+			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,
-        },
-      ]}
-	  rowSelection={{
-        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
-        // 注释该行则默认不显示下拉选项
-        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-        defaultSelectedRowKeys: [1],
-      }}
-      tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
-        <Space size={24}>
-          <span>
-            已选 {selectedRowKeys.length} 项
-            <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
-              取消选择
-            </a>
-          </span>
-        </Space>
-      )}
-      tableAlertOptionRender={() => {
-        return (
-          <Space size={16}>
-            <a>批量删除</a>
-            <a>导出数据</a>
-          </Space>
-        );
-      }}
-      request={async (params = {}, sorter, filter) => {
-        // TODO
-        console.log(params, sorter, filter);
+			search: false,
+			dataIndex: 'createdAt',
+			valueType: 'date',
+			sorter: (a, b) => a.createdAt - b.createdAt,
+			},
+		]}
+		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} 项
+				<a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+				取消选择
+				</a>
+			</span>
+			</Space>
+		)}
+		tableAlertOptionRender={() => {
+			return (
+			<Space size={16}>
+				<a>批量删除</a>
+				<a>导出数据</a>
+			</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,
-              word: `word ${id}`,
-			  type: valueEnum[2],
-			  grammar: "阳-单-属",
-			  parent: `parent ${id}`,
-			  meaning: `meaning ${id}`,
-			  note: `note ${id}`,
-			  factors: `factors ${id}`,
-              createdAt: Date.now() - Math.floor(Math.random() * 200000),
-            };
-            return it;
-          }),
-        };
-      }}
-      rowKey="id"
-      bordered
-      pagination={{
-        showQuickJumper: true,
-        showSizeChanger: true,
-      }}
-      headerTitle={intl.formatMessage({ id: "dict" })}
-	  toolBarRender={() => [
-        <Button key="button" icon={<PlusOutlined />} type="primary">
-          新建
-        </Button>,
-      ]}
-    />
+			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,
+				word: `word ${id}`,
+				type: valueEnum[2],
+				grammar: "阳-单-属",
+				parent: `parent ${id}`,
+				meaning: `meaning ${id}`,
+				note: `note ${id}`,
+				factors: `factors ${id}`,
+				createdAt: Date.now() - Math.floor(Math.random() * 200000),
+				};
+				return it;
+			}),
+			};
+		}}
+		rowKey="id"
+		bordered
+		pagination={{
+			showQuickJumper: true,
+			showSizeChanger: true,
+		}}
+		headerTitle={intl.formatMessage({ id: "dict" })}
+		toolBarRender={() => [
+			<Button key="button" icon={<PlusOutlined />} type="primary">
+			新建
+			</Button>,
+		]}
+		/>
+	  	</Content>
+	</Layout>
 	<Footer/>
 	</Layout>
   );

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

@@ -2,22 +2,23 @@ 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 } from "antd";
+import { Button,Layout,Space, Table  } from "antd";
 import {  PlusOutlined } 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;
+
 interface IItem {
   id: number;
   word: string;
-  type: string;
-  grammar: string;
-  parent: string;
+  tag: string;
+  channel: string;
   meaning: string;  
+  meaning2: string;  
   note: string;
-  factors: string;
   createdAt: number;
 }
 
@@ -28,138 +29,160 @@ const valueEnum = {
 	3: 'ind',
   };
 
+
 const Widget = () => {
   const intl = useIntl();
   const { studioname } = useParams();
   return (
 	<Layout>
-		<HeadBar/>
-		<LeftSider/>
+	<HeadBar/>
+	<Layout>
+		<LeftSider selectedKeys="term"/>
+		<Content>
+
 		<Layout>{studioname}</Layout>
-    <ProTable<IItem>
-      columns={[
-        {
-          title: intl.formatMessage({ id: "dict.fields.sn.label" }),
-          dataIndex: "id",
-          key: "id",
-          width: 80,
-          search: false,
-        },
-        {
-          title: intl.formatMessage({ id: "dict.fields.word.label" }),
-          dataIndex: "word",
-          key: "word",
-		  render: (_) => <Link to="">{_}</Link>,
-		  tip: '单词过长会自动收缩',
-		  ellipsis: true,
-		  formItemProps: {
-			rules: [
-			  {
-				required: true,
-				message: '此项为必填项',
-			  },
-			],
-		  },
-        },
-		{
-			title: intl.formatMessage({ id: "dict.fields.type.label" }),
-			dataIndex: "type",
-			key: "type",
+		<ProTable<IItem>
+		columns={[
+			{
+			title: intl.formatMessage({ id: "term.fields.sn.label" }),
+			dataIndex: "id",
+			key: "id",
+			width: 80,
 			search: false,
-			filters: true,
-			onFilter: true,
-			valueEnum: {
-			  all: { text: '全部', status: 'Default' },
-			  n: { text: '名词', status: 'Default' },
-			  ti: { text: '三性', status: 'Processing' },
-			  v: { text: '动词', status: 'Success' },
-			  ind: { text: '不变词', status: 'Success' },
 			},
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.grammar.label" }),
-			dataIndex: "grammar",
-			key: "grammar",
-			search: false,
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.parent.label" }),
-			dataIndex: "parent",
-			key: "parent",
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.meaning.label" }),
-			dataIndex: "meaning",
-			key: "meaning",
-			tip: '意思过长会自动收缩',
+			{
+			title: intl.formatMessage({ id: "term.fields.word.label" }),
+			dataIndex: "word",
+			key: "word",
+			render: (_) => <Link to="">{_}</Link>,
+			tip: '单词过长会自动收缩',
 			ellipsis: true,
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.note.label" }),
-			dataIndex: "note",
-			key: "note",
-			search: false,
-			tip: '注释过长会自动收缩',
-			ellipsis: true,
-		},
-		{
-			title: intl.formatMessage({ id: "dict.fields.factors.label" }),
-			dataIndex: "factors",
-			key: "factors",
+			formItemProps: {
+				rules: [
+				{
+					required: true,
+					message: '此项为必填项',
+				},
+				],
+			},
+			},
+			{
+				title: intl.formatMessage({ id: "term.fields.tag.label" }),
+				dataIndex: "tag",
+				key: "tag",
+				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,
-		},
-        {
-          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,
-        },
-      ]}
-      request={async (params = {}, sorter, filter) => {
-        // TODO
-        console.log(params, sorter, filter);
+			dataIndex: 'createdAt',
+			valueType: 'date',
+			sorter: (a, b) => a.createdAt - b.createdAt,
+			},
+		]}
+		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} 项
+				<a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+				取消选择
+				</a>
+			</span>
+			</Space>
+		)}
+		tableAlertOptionRender={() => {
+			return (
+			<Space size={16}>
+				<a>批量删除</a>
+				<a>导出数据</a>
+			</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,
-              word: `word ${id}`,
-			  type: valueEnum[2],
-			  grammar: "阳-单-属",
-			  parent: `parent ${id}`,
-			  meaning: `meaning ${id}`,
-			  note: `note ${id}`,
-			  factors: `factors ${id}`,
-              createdAt: Date.now() - Math.floor(Math.random() * 200000),
-            };
-            return it;
-          }),
-        };
-      }}
-      rowKey="id"
-      bordered
-      pagination={{
-        showQuickJumper: true,
-        showSizeChanger: true,
-      }}
-      headerTitle={intl.formatMessage({ id: "dict" })}
-	  toolBarRender={() => [
-        <Button key="button" icon={<PlusOutlined />} type="primary">
-          新建
-        </Button>,
-      ]}
-    />
+			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,
+				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;
+			}),
+			};
+		}}
+		rowKey="id"
+		//bordered
+		pagination={{
+			showQuickJumper: true,
+			showSizeChanger: true,
+		}}
+		headerTitle={intl.formatMessage({ id: "dict" })}
+		toolBarRender={() => [
+			<Button key="button" icon={<PlusOutlined />} type="primary">
+			新建
+			</Button>,
+		]}
+		search={{
+			filterType: 'light',
+		  }}
+		dateFormatter="string"
+		/>
+	  	</Content>
+	</Layout>
 	<Footer/>
-
 	</Layout>
   );
 };