:construction: UI完成

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

@@ -1,15 +1,11 @@
-import { ProForm, ProFormText } from "@ant-design/pro-components";
-import { Cascader, Layout, Select } from "antd";
+import { ProForm, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
+import { Layout } from "antd";
 import { useIntl } from "react-intl";
 import { message } from "antd";
 
-const { Option, OptGroup } = Select;
-
-interface CascaderOption {
-	value: string | number;
-	label: string;
-	children?: CascaderOption[];
-}
+import SelectLang from "../SelectLang";
+import SelectCase from "../SelectCase";
+import Confidene from "../Confidence";
 
 interface IFormData {
 	word: string;
@@ -29,70 +25,6 @@ type IWidgetDictCreate = {
 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}`);
 	};
@@ -124,27 +56,48 @@ const Widget = (param: IWidgetDictCreate) => {
 					/>
 				</ProForm.Group>
 				<ProForm.Group>
-					<Cascader options={options} placeholder="Please select case" />
+					<div>语法信息</div>
+					<SelectCase />
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="parent"
+						label={intl.formatMessage({ id: "dict.fields.parent.label" })}
+					/>
+				</ProForm.Group>
+				<ProForm.Group>
+					<div>语言</div>
+					<SelectLang />
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="meaning"
+						label={intl.formatMessage({ id: "dict.fields.meaning.label" })}
+					/>
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="factors"
+						label={intl.formatMessage({ id: "dict.fields.factors.label" })}
+					/>
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="factormeaning"
+						label={intl.formatMessage({ id: "dict.fields.factormeaning.label" })}
+					/>
 				</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>
+					<ProFormTextArea name="note" label={intl.formatMessage({ id: "forms.fields.note.label" })} />
 				</ProForm.Group>
+				<Layout>
+					<div>信心指数</div>
+					<Confidene />
+				</Layout>
 			</ProForm>
 		</Layout>
 	);