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']}
|
||||
menu={{
|
||||
items: mapMenu,
|
||||
onClick: (e) => openWebMapRaw(e.key as MapType, info.geo!),
|
||||
onClick: (e) => openWebMapRaw(e.key as MapType, {
|
||||
...info.geo!,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<Button icon={<PushpinOutlined />}>
|
||||
|
||||
@ -1,30 +1,17 @@
|
||||
import { Avatar, Button, Drawer, Typography } from "antd";
|
||||
import { useLoaderData } from "react-router";
|
||||
import type { ClubDetail, IEventInfo } from "../types";
|
||||
import { useState } from "react";
|
||||
import { ChangeBackground } from "../components/ChangeBackground";
|
||||
import type { ClubDetail } from "../types";
|
||||
import { ClubEvenList } from "../components/ClubEventList";
|
||||
import { ClubSummary } from "../components/ClubSummary";
|
||||
|
||||
export const ClubEventsPage = () => {
|
||||
const { info } = useLoaderData<{
|
||||
info: ClubDetail;
|
||||
events: IEventInfo[];
|
||||
total: number;
|
||||
}>();
|
||||
|
||||
const [isArticleOpen, setIsArticleOpen] = useState(false);
|
||||
return (
|
||||
<div className="app">
|
||||
<ChangeBackground url={info.img} />
|
||||
<Avatar src={info.img} size={80} />
|
||||
<Typography.Title>{info.name}</Typography.Title>
|
||||
<Button onClick={() => setIsArticleOpen(true)}>查看公告</Button>
|
||||
<ClubSummary 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user