:sparkles: 建立新词对话框

dashboard/src/components/studio/dict/DictCreate.tsx

@@ -0,0 +1,171 @@
+import { ProForm, ProFormText, ProFormSelect } from "@ant-design/pro-components";
+import { Cascader, Layout, Select } from "antd";
+import { useIntl } from "react-intl";
+import { message } from "antd";
+
+const { Option, OptGroup } = Select;
+
+interface CascaderOption {
+	value: string | number;
+	label: string;
+	children?: CascaderOption[];
+}
+
+interface IFormData {
+	word: string;
+	type: string;
+	grammar: string;
+	parent: string;
+	meaning: string;
+	note: string;
+	factors: string;
+	factormeaning: string;
+	lang: string;
+}
+
+type IWidgetDictCreate = {
+	studio: string | undefined;
+};
+const Widget = (param: IWidgetDictCreate) => {
+	const intl = useIntl();
+
+	const data = [
+		{ value: "en", lable: intl.formatMessage({ id: "languages.en-US" }) },
+		{ value: "zh-Hans", lable: intl.formatMessage({ id: "languages.zh-Hans" }) },
+		{ value: "zh-Hant", lable: intl.formatMessage({ id: "languages.zh-Hant" }) },
+	];
+	const langOptions = data.map((d) => <Option value={d.value}>{d.lable}</Option>);
+
+	const case8 = [
+		{
+			value: "nom",
+			label: intl.formatMessage({ id: "dict.fields.type.nom.label" }),
+		},
+		{
+			value: "acc",
+			label: intl.formatMessage({ id: "dict.fields.type.acc.label" }),
+		},
+	];
+	const case2 = [
+		{
+			value: "sg",
+			label: intl.formatMessage({ id: "dict.fields.type.sg.label" }),
+			children: case8,
+		},
+		{
+			value: "pl",
+			label: intl.formatMessage({ id: "dict.fields.type.pl.label" }),
+			children: case8,
+		},
+	];
+	const case3 = [
+		{
+			value: "m",
+			label: intl.formatMessage({ id: "dict.fields.type.m.label" }),
+			children: case2,
+		},
+		{
+			value: "nt",
+			label: intl.formatMessage({ id: "dict.fields.type.nt.label" }),
+			children: case2,
+		},
+		{
+			value: "f",
+			label: intl.formatMessage({ id: "dict.fields.type.f.label" }),
+			children: case2,
+		},
+	];
+	const options: CascaderOption[] = [
+		{
+			value: ".n.",
+			label: intl.formatMessage({ id: "dict.fields.type.n.label" }),
+			children: case3,
+		},
+		{
+			value: ".ti.",
+			label: intl.formatMessage({ id: "dict.fields.type.ti.label" }),
+			children: case3,
+		},
+		{
+			value: ".v.",
+			label: intl.formatMessage({ id: "dict.fields.type.v.label" }),
+			children: case3,
+		},
+	];
+
+	const onLangChange = (value: string) => {
+		console.log(`selected ${value}`);
+	};
+
+	const onLangSearch = (value: string) => {
+		console.log("search:", value);
+	};
+	return (
+		<Layout>
+			<ProForm<IFormData>
+				onFinish={async (values: IFormData) => {
+					// TODO
+					console.log(values);
+					message.success(intl.formatMessage({ id: "flashes.success" }));
+				}}
+			>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="word"
+						required
+						label={intl.formatMessage({ id: "channel.name" })}
+						rules={[
+							{
+								required: true,
+								message: intl.formatMessage({ id: "channel.create.message.noname" }),
+							},
+						]}
+					/>
+				</ProForm.Group>
+				<ProForm.Group>
+					<Cascader options={options} placeholder="Please select" />
+				</ProForm.Group>
+
+				<ProForm.Group>
+					<Select
+						showSearch
+						placeholder="Select a language"
+						optionFilterProp="children"
+						onChange={onLangChange}
+						onSearch={onLangSearch}
+						filterOption={(input, option) =>
+							(option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+						}
+					>
+						<OptGroup label="recent">
+							<Option value="zh-Hans">简体中文</Option>
+							<Option value="en">English</Option>
+						</OptGroup>
+						<OptGroup label="all">{langOptions}</OptGroup>
+					</Select>
+				</ProForm.Group>
+
+				<ProForm.Group>
+					<ProFormSelect
+						options={[
+							{
+								value: "zh-Hans",
+								label: intl.formatMessage({ id: "languages.zh-Hans" }),
+							},
+							{
+								value: "en-US",
+								label: intl.formatMessage({ id: "English" }),
+							},
+						]}
+						width="md"
+						name="lang"
+						label={intl.formatMessage({ id: "forms.fields.lang.label" })}
+					/>
+				</ProForm.Group>
+			</ProForm>
+		</Layout>
+	);
+};
+
+export default Widget;

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

@@ -2,12 +2,13 @@ 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 } from "antd";
+import { Button, Layout, Space, Table, Popover } 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";
+import DictCreate from "../../../components/studio/dict/DictCreate";
 
 const { Content } = Layout;
 
@@ -33,6 +34,9 @@ const valueEnum = {
 const Widget = () => {
 	const intl = useIntl();
 	const { studioname } = useParams();
+
+	const dictCreate = <DictCreate studio={studioname} />;
+
 	return (
 		<Layout>
 			<HeadBar />
@@ -56,14 +60,6 @@ const Widget = () => {
 								render: (_) => <Link to="">{_}</Link>,
 								tip: "单词过长会自动收缩",
 								ellipsis: true,
-								formItemProps: {
-									rules: [
-										{
-											required: true,
-											message: "此项为必填项",
-										},
-									],
-								},
 							},
 							{
 								title: intl.formatMessage({ id: "dict.fields.type.label" }),
@@ -178,14 +174,17 @@ const Widget = () => {
 							showQuickJumper: true,
 							showSizeChanger: true,
 						}}
-						search={{
-							filterType: "light",
+						search={false}
+						options={{
+							search: true,
 						}}
-						headerTitle={intl.formatMessage({ id: "dict" })}
+						headerTitle=""
 						toolBarRender={() => [
-							<Button key="button" icon={<PlusOutlined />} type="primary">
-								新建
-							</Button>,
+							<Popover content={dictCreate} title="new channel" placement="bottomRight">
+								<Button key="button" icon={<PlusOutlined />} type="primary">
+									{intl.formatMessage({ id: "buttons.create" })}
+								</Button>
+							</Popover>,
 						]}
 					/>
 				</Content>