refactor: extract club header logic into ClubSummary component and simplify ClubEventsPage
- Moved header logic (background, avatar, title, notice button) from ClubEventsPage into a new ClubSummary component. - Updated ClubEventsPage to use ClubSummary instead of managing layout and state directly. - Fixed `onClick` handler in ClubSummary to correctly spread the `info.geo` object when passing to `openWebMapRaw`. - Removed unused imports and state from ClubEventsPage.
This commit is contained in:
parent
f188b4eac4
commit
1b01cff7d7
@ -62,7 +62,9 @@ export const ClubSummary = (props: Props) => {
|
|||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
menu={{
|
menu={{
|
||||||
items: mapMenu,
|
items: mapMenu,
|
||||||
onClick: (e) => openWebMapRaw(e.key as MapType, info.geo!),
|
onClick: (e) => openWebMapRaw(e.key as MapType, {
|
||||||
|
...info.geo!,
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Button icon={<PushpinOutlined />}>
|
<Button icon={<PushpinOutlined />}>
|
||||||
|
|||||||
@ -1,30 +1,17 @@
|
|||||||
import { Avatar, Button, Drawer, Typography } from "antd";
|
|
||||||
import { useLoaderData } from "react-router";
|
import { useLoaderData } from "react-router";
|
||||||
import type { ClubDetail, IEventInfo } from "../types";
|
import type { ClubDetail } from "../types";
|
||||||
import { useState } from "react";
|
|
||||||
import { ChangeBackground } from "../components/ChangeBackground";
|
|
||||||
import { ClubEvenList } from "../components/ClubEventList";
|
import { ClubEvenList } from "../components/ClubEventList";
|
||||||
|
import { ClubSummary } from "../components/ClubSummary";
|
||||||
|
|
||||||
export const ClubEventsPage = () => {
|
export const ClubEventsPage = () => {
|
||||||
const { info } = useLoaderData<{
|
const { info } = useLoaderData<{
|
||||||
info: ClubDetail;
|
info: ClubDetail;
|
||||||
events: IEventInfo[];
|
|
||||||
total: number;
|
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const [isArticleOpen, setIsArticleOpen] = useState(false);
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
<ChangeBackground url={info.img} />
|
<ClubSummary clubId={info.id} />
|
||||||
<Avatar src={info.img} size={80} />
|
|
||||||
<Typography.Title>{info.name}</Typography.Title>
|
|
||||||
<Button onClick={() => setIsArticleOpen(true)}>查看公告</Button>
|
|
||||||
<ClubEvenList clubId={info.id} />
|
<ClubEvenList clubId={info.id} />
|
||||||
<Drawer size={'60vh'} open={isArticleOpen} onClose={() => setIsArticleOpen(false)} placement="bottom">
|
|
||||||
<div style={{ textAlign: 'center' }}>
|
|
||||||
<Typography.Paragraph style={{ whiteSpace: 'pre', textWrap: 'auto' }}>{info.article}</Typography.Paragraph>
|
|
||||||
</div>
|
|
||||||
</Drawer>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user