form 内容与 proform 外壳分离

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

@@ -1,4 +1,8 @@
-import { ProForm, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
+import {
+	ProForm,
+	ProFormText,
+	ProFormTextArea,
+} from "@ant-design/pro-components";
 import { Layout } from "antd";
 import { useIntl } from "react-intl";
 import { message } from "antd";
@@ -6,6 +10,7 @@ import { message } from "antd";
 import SelectLang from "../SelectLang";
 import SelectCase from "../SelectCase";
 import Confidene from "../Confidence";
+import DictEditInner from "./DictEditInner";
 
 interface IFormData {
 	word: string;
@@ -20,9 +25,10 @@ interface IFormData {
 }
 
 type IWidgetDictCreate = {
-	studio: string | undefined;
+	studio: string;
+	word?: string;
 };
-const Widget = (param: IWidgetDictCreate) => {
+const Widget = (prop: IWidgetDictCreate) => {
 	const intl = useIntl();
 	/*
 	const onLangChange = (value: string) => {
@@ -34,73 +40,19 @@ const Widget = (param: IWidgetDictCreate) => {
 	};
 	*/
 	return (
-		<Layout>
+		<>
 			<ProForm<IFormData>
 				onFinish={async (values: IFormData) => {
 					// TODO
 					console.log(values);
-					message.success(intl.formatMessage({ id: "flashes.success" }));
+					message.success(
+						intl.formatMessage({ id: "flashes.success" })
+					);
 				}}
 			>
-				<ProForm.Group>
-					<ProFormText
-						width="md"
-						name="word"
-						required
-						label={intl.formatMessage({ id: "dict.fields.word.label" })}
-						rules={[
-							{
-								required: true,
-								message: intl.formatMessage({ id: "channel.create.message.noname" }),
-							},
-						]}
-					/>
-				</ProForm.Group>
-				<ProForm.Group>
-					<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>
-					<ProFormTextArea name="note" label={intl.formatMessage({ id: "forms.fields.note.label" })} />
-				</ProForm.Group>
-				<Layout>
-					<div>信心指数</div>
-					<Confidene />
-				</Layout>
+				<DictEditInner word={prop.word} />
 			</ProForm>
-		</Layout>
+		</>
 	);
 };
 

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

@@ -0,0 +1,107 @@
+import {
+	ProForm,
+	ProFormSlider,
+	ProFormText,
+	ProFormTextArea,
+} from "@ant-design/pro-components";
+import { Layout } from "antd";
+import { useIntl } from "react-intl";
+import { message } from "antd";
+
+import LangSelect from "../LangSelect";
+import SelectCase from "../SelectCase";
+import Confidene from "../Confidence";
+import Confidence from "../Confidence";
+
+type IWidgetDictCreate = {
+	word?: string;
+};
+const Widget = (prop: IWidgetDictCreate) => {
+	const intl = useIntl();
+	/*
+	const onLangChange = (value: string) => {
+		console.log(`selected ${value}`);
+	};
+
+	const onLangSearch = (value: string) => {
+		console.log("search:", value);
+	};
+	*/
+	return (
+		<>
+			<ProForm.Group>
+				<ProFormText
+					width="md"
+					name="word"
+					initialValue={prop.word}
+					required
+					label={intl.formatMessage({ id: "dict.fields.word.label" })}
+					rules={[
+						{
+							required: true,
+							message: intl.formatMessage({
+								id: "channel.create.message.noname",
+							}),
+						},
+					]}
+				/>
+			</ProForm.Group>
+			<ProForm.Group>
+				<div>语法信息</div>
+				<SelectCase />
+			</ProForm.Group>
+			<ProForm.Group>
+				<ProFormText
+					width="md"
+					name="parent"
+					label={intl.formatMessage({
+						id: "dict.fields.parent.label",
+					})}
+				/>
+			</ProForm.Group>
+			<ProForm.Group>
+				<LangSelect />
+			</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>
+				<ProFormTextArea
+					name="note"
+					label={intl.formatMessage({
+						id: "forms.fields.note.label",
+					})}
+				/>
+			</ProForm.Group>
+			<ProForm.Group>
+				<Confidence />
+			</ProForm.Group>
+		</>
+	);
+};
+
+export default Widget;