添加返回按钮

dashboard/src/components/studio/GoBack.tsx

@@ -0,0 +1,20 @@
+import { Button, Space } from "antd";
+import { Link } from "react-router-dom";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+
+interface IWidgetGoBack {
+	to: string;
+	title?: string;
+}
+const Widget = (prop: IWidgetGoBack) => {
+	return (
+		<Space>
+			<Link to={prop.to}>
+				<Button shape="circle" icon={<ArrowLeftOutlined />} />
+			</Link>
+			<span>{prop.title}</span>
+		</Space>
+	);
+};
+
+export default Widget;

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

@@ -1,13 +1,17 @@
-import { useParams } from "react-router-dom";
-import { ProForm, ProFormText, ProFormSelect, ProFormTextArea } from "@ant-design/pro-components";
+import { Link, useParams } from "react-router-dom";
+import {
+	ProForm,
+	ProFormText,
+	ProFormSelect,
+	ProFormTextArea,
+} from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
-import { message, Layout } from "antd";
-
-import HeadBar from "../../../components/studio/HeadBar";
-import LeftSider from "../../../components/studio/LeftSider";
-import Footer from "../../../components/studio/Footer";
-
-const { Content } = Layout;
+import { message, Card, Button } from "antd";
+import { IGroupResponse } from "../../../components/api/Group";
+import { useEffect, useState } from "react";
+import { get } from "../../../request";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import GoBack from "../../../components/studio/GoBack";
 
 interface IFormData {
 	name: string;
@@ -19,90 +23,101 @@ interface IFormData {
 const Widget = () => {
 	const intl = useIntl();
 	const { studioname, groupid } = useParams(); //url 参数
-	return (
-		<Layout>
-			<HeadBar />
-			<Layout>
-				<LeftSider selectedKeys="userdict" />
-				<Content>
-					<h2>
-						studio/{studioname}/{intl.formatMessage({ id: "columns.studio.group.title" })}/edit/{groupid}
-					</h2>
+	const [title, setTitle] = useState("Loading");
+	useEffect(() => {
+		get<IGroupResponse>(`/v2/group/${groupid}`).then((json) => {
+			setTitle(json.data.name);
+		});
+	}, [groupid]);
 
-					<ProForm<IFormData>
-						onFinish={async (values: IFormData) => {
-							// TODO
-							values.studio = "aaaa";
-							console.log(values);
-							message.success(intl.formatMessage({ id: "flashes.success" }));
-						}}
-					>
-						<ProForm.Group>
-							<ProFormText
-								width="md"
-								name="name"
-								required
-								label={intl.formatMessage({ id: "channel.name" })}
-								rules={[
-									{
-										required: true,
-										message: intl.formatMessage({ id: "channel.create.message.noname" }),
-									},
-								]}
-							/>
-						</ProForm.Group>
-
-						<ProForm.Group>
-							<ProFormSelect
-								options={[
-									{
-										value: "translation",
-										label: intl.formatMessage({ id: "channel.type.translation.title" }),
-									},
-									{
-										value: "nissaya",
-										label: intl.formatMessage({ id: "channel.type.nissaya.title" }),
-									},
-								]}
-								width="md"
-								name="type"
-								rules={[
-									{
-										required: true,
-										message: intl.formatMessage({ id: "channel.create.message.noname" }),
-									},
-								]}
-								label={intl.formatMessage({ id: "channel.type" })}
-							/>
-						</ProForm.Group>
-						<ProForm.Group>
-							<ProFormSelect
-								options={[
-									{ value: "zh-Hans", label: "简体中文" },
-									{ value: "zh-Hant", label: "繁体中文" },
-									{ value: "en-US", label: "English" },
-								]}
-								width="md"
-								name="lang"
-								rules={[
-									{
-										required: true,
-										message: intl.formatMessage({ id: "channel.create.message.noname" }),
-									},
-								]}
-								label={intl.formatMessage({ id: "channel.lang" })}
-							/>
-						</ProForm.Group>
+	return (
+		<Card
+			title={
+				<GoBack to={`/studio/${studioname}/group/list`} title={title} />
+			}
+		>
+			<ProForm<IFormData>
+				onFinish={async (values: IFormData) => {
+					// TODO
+					values.studio = "aaaa";
+					console.log(values);
+					message.success(
+						intl.formatMessage({ id: "flashes.success" })
+					);
+				}}
+			>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						required
+						label={intl.formatMessage({ id: "channel.name" })}
+						rules={[
+							{
+								required: true,
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
+							},
+						]}
+					/>
+				</ProForm.Group>
 
-						<ProForm.Group>
-							<ProFormTextArea name="summary" label="简介" />
-						</ProForm.Group>
-					</ProForm>
-				</Content>
-			</Layout>
+				<ProForm.Group>
+					<ProFormSelect
+						options={[
+							{
+								value: "translation",
+								label: intl.formatMessage({
+									id: "channel.type.translation.title",
+								}),
+							},
+							{
+								value: "nissaya",
+								label: intl.formatMessage({
+									id: "channel.type.nissaya.title",
+								}),
+							},
+						]}
+						width="md"
+						name="type"
+						rules={[
+							{
+								required: true,
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
+							},
+						]}
+						label={intl.formatMessage({ id: "channel.type" })}
+					/>
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormSelect
+						options={[
+							{ value: "zh-Hans", label: "简体中文" },
+							{ value: "zh-Hant", label: "繁体中文" },
+							{ value: "en-US", label: "English" },
+						]}
+						width="md"
+						name="lang"
+						rules={[
+							{
+								required: true,
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
+							},
+						]}
+						label={intl.formatMessage({ id: "channel.lang" })}
+					/>
+				</ProForm.Group>
 
-			<Footer />
-		</Layout>
+				<ProForm.Group>
+					<ProFormTextArea name="summary" label="简介" />
+				</ProForm.Group>
+			</ProForm>
+		</Card>
 	);
 };
 

dashboard/src/pages/studio/group/show.tsx

@@ -1,17 +1,34 @@
 import { useParams } from "react-router-dom";
 import { useIntl } from "react-intl";
-import { Layout } from "antd";
+import { Button, Card } from "antd";
 import { Col, Row } from "antd";
 import GroupFile from "../../../components/studio/group/GroupFile";
 import GroupMember from "../../../components/studio/group/GroupMember";
-
-const { Content } = Layout;
+import { useEffect, useState } from "react";
+import { get } from "../../../request";
+import { IGroupResponse } from "../../../components/api/Group";
+import GoBack from "../../../components/studio/GoBack";
 
 const Widget = () => {
 	const intl = useIntl();
 	const { studioname, groupid } = useParams(); //url 参数
+	const [title, setTitle] = useState("loading");
+	useEffect(() => {
+		get<IGroupResponse>(`/v2/group/${groupid}`).then((json) => {
+			setTitle(json.data.name);
+		});
+	}, [groupid]);
 	return (
-		<Content>
+		<Card
+			title={
+				<GoBack to={`/studio/${studioname}/group/list`} title={title} />
+			}
+			extra={
+				<Button type="link" danger>
+					退群
+				</Button>
+			}
+		>
 			<Row>
 				<Col flex="auto">
 					<GroupFile groupid={groupid} />
@@ -20,7 +37,7 @@ const Widget = () => {
 					<GroupMember groupid={groupid} />
 				</Col>
 			</Row>
-		</Content>
+		</Card>
 	);
 };