fix(User): replace Link with useHref for external profile navigation
- Updated avatar image styling on FavePlayersPage - Changed default sort type to '注册时间' - Improved title rendering and structure on EventPage - Added favUser logic and effect in ProfilePage
This commit is contained in:
parent
59cf101c26
commit
60a8bf68d1
@ -1,12 +1,12 @@
|
|||||||
import { Link } from "react-router";
|
import { useHref } from 'react-router';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
uid?: string;
|
uid?: string;
|
||||||
}
|
}
|
||||||
export default function User(props: Props) {
|
export default function User(props: Props) {
|
||||||
|
const href = useHref(`/profile/${props.uid}`);
|
||||||
if (!Number(props.uid)) return <span>{props.name}</span>
|
if (!Number(props.uid)) return <span>{props.name}</span>
|
||||||
return (
|
return (
|
||||||
<Link to={`/profile/${props.uid}`}>{props.name}</Link>
|
<a href={href} target='_blank' rel='noopener noreferrer'>{props.name}</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -23,11 +23,8 @@ export default function EventPage() {
|
|||||||
}, [members]);
|
}, [members]);
|
||||||
useTitle(game.title, { restoreOnUnmount: true });
|
useTitle(game.title, { restoreOnUnmount: true });
|
||||||
return (
|
return (
|
||||||
<div style={{ width: '100%', padding: 10, boxSizing: 'border-box' }}>
|
<div className="app">
|
||||||
<Typography.Title level={3}>
|
<Typography.Title>{game.title}</Typography.Title>
|
||||||
<HomeOutlined style={{ marginRight: 4 }} onClick={() => navigate('/')}/>
|
|
||||||
{game.title}
|
|
||||||
</Typography.Title>
|
|
||||||
<GamePanel members={basePlayers} title={game.title} players={players} />
|
<GamePanel members={basePlayers} title={game.title} players={players} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -4,14 +4,14 @@ import { useNavigate } from "react-router";
|
|||||||
import { useMemo, useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
|
|
||||||
enum SortType {
|
enum SortType {
|
||||||
DEFAULT = '默认排序',
|
DEFAULT = '注册时间',
|
||||||
SCORE_UP = '积分升序',
|
SCORE_UP = '积分升序',
|
||||||
SCORE_DOWN = '积分降序',
|
SCORE_DOWN = '积分降序',
|
||||||
}
|
}
|
||||||
|
|
||||||
export function FavePlayersPage() {
|
export function FavePlayersPage() {
|
||||||
const { favMap } = useFavPlayerStore(state => state);
|
const { favMap } = useFavPlayerStore(state => state);
|
||||||
const [sortType, setSortType] = useState<SortType>(SortType.SCORE_DOWN);
|
const [sortType, setSortType] = useState<SortType>(SortType.DEFAULT);
|
||||||
const list = useMemo(() => {
|
const list = useMemo(() => {
|
||||||
const l = Object.values(favMap);
|
const l = Object.values(favMap);
|
||||||
switch (sortType) {
|
switch (sortType) {
|
||||||
@ -33,8 +33,9 @@ export function FavePlayersPage() {
|
|||||||
value={sortType}
|
value={sortType}
|
||||||
onChange={e => setSortType(e)}
|
onChange={e => setSortType(e)}
|
||||||
options={[
|
options={[
|
||||||
SortType.SCORE_DOWN,
|
SortType.DEFAULT,
|
||||||
SortType.SCORE_UP,
|
SortType.SCORE_UP,
|
||||||
|
SortType.SCORE_DOWN,
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
|
import React, { useEffect, useMemo } from "react";
|
||||||
import { Link, useLoaderData, useNavigate } from "react-router";
|
import { Link, useLoaderData, useNavigate } from "react-router";
|
||||||
import type { XCXProfile } from "../types/profile";
|
|
||||||
import { Avatar, Descriptions, Divider, Flex, FloatButton, Image, Typography } from "antd";
|
import { Avatar, Descriptions, Divider, Flex, FloatButton, Image, Typography } from "antd";
|
||||||
import { HomeOutlined } from "@ant-design/icons";
|
import { HomeOutlined } from "@ant-design/icons";
|
||||||
|
import { useTitle } from "ahooks";
|
||||||
|
import type { XCXProfile } from "../types/profile";
|
||||||
import User from "../components/User";
|
import User from "../components/User";
|
||||||
import React, { useMemo } from "react";
|
|
||||||
import { ChangeBackground } from "../components/ChangeBackground";
|
import { ChangeBackground } from "../components/ChangeBackground";
|
||||||
import UserTags from "../components/Tags";
|
import UserTags from "../components/Tags";
|
||||||
import { GameTable } from "../components/GameTable";
|
import { GameTable } from "../components/GameTable";
|
||||||
import { useTitle } from "ahooks";
|
|
||||||
import { FavButton } from "../components/FavButton";
|
import { FavButton } from "../components/FavButton";
|
||||||
|
import { useFavPlayerStore } from "../store/useFavPlayerStore";
|
||||||
|
|
||||||
function Honor(props: { honors?: XCXProfile['honors'] }) {
|
function Honor(props: { honors?: XCXProfile['honors'] }) {
|
||||||
if (!props.honors?.length) return null;
|
if (!props.honors?.length) return null;
|
||||||
@ -91,6 +91,17 @@ export default function ProfilePage() {
|
|||||||
[profile?.province, profile?.sex, profile?.bg ?? '', ...Object.values(profile?.allCities ?? [])]
|
[profile?.province, profile?.sex, profile?.bg ?? '', ...Object.values(profile?.allCities ?? [])]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
, [profile]);
|
, [profile]);
|
||||||
|
const favUser = useMemo(() => ({
|
||||||
|
uid,
|
||||||
|
score: profile.score,
|
||||||
|
name: profile.username,
|
||||||
|
realname: profile.realname,
|
||||||
|
avatar: profile.realpic
|
||||||
|
}), [profile]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!useFavPlayerStore.getState().isFav(uid)) return;
|
||||||
|
useFavPlayerStore.getState().fav(favUser);
|
||||||
|
}, [favUser]);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ChangeBackground url={profile?.realpic} />
|
<ChangeBackground url={profile?.realpic} />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user