帖子分类
Change-Id: I17bafbfe3c1c8fd26c1e12499cb3c17cd1738e23
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index a6c1fe7..a305521 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React, { use, useEffect } from "react";
import Icon, {
HomeOutlined,
} from "@ant-design/icons";
@@ -8,12 +8,12 @@
import { Menu } from 'antd';
import { useState } from "react";
import style from './navbar.module.css'
-
+import { set } from "lodash";
+import { useNavigate } from "react-router";
type CustomIconComponentProps = GetProps<typeof Icon>;
type MenuItem = Required<MenuProps>['items'][number];
const web_base_url = process.env.WEB_BASE_URL || 'http://localhost:3000';
-
const VideoSvg = () => (
<svg width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg" p-id="7331" viewBox="0 0 1024 1024">
<title>video icon</title>
@@ -63,7 +63,6 @@
<Icon component={ChatSvg} {...props} />
);
-
const items: MenuItem[] = [
{
key: 'home',
@@ -78,7 +77,7 @@
key: 'video',
icon: <VideoIcon />,
label: (
- <a href={{web_base_url}+'/posts?type=video'}>
+ <a href={'/posts?type=video'}>
影视
</a>
),
@@ -87,7 +86,7 @@
key: 'music',
icon: <MusicIcon />,
label: (
- <a href={{web_base_url}+'/posts?type=music'}>
+ <a href={'/posts?type=music'}>
音乐
</a>
),
@@ -96,7 +95,7 @@
key: 'game',
icon: <GameIcon />,
label: (
- <a href={{web_base_url}+'/posts?type=game'}>
+ <a href={'/posts?type=game'}>
游戏
</a>
),
@@ -105,7 +104,7 @@
key: 'software',
icon: <SoftwareIcon />,
label: (
- <a href={{web_base_url}+'/posts?type=software'}>
+ <a href={'/posts?type=software'}>
软件
</a>
),
@@ -114,20 +113,27 @@
key: 'chat',
icon: <ChatIcon />,
label: (
- <a href={{web_base_url}+'/posts?type=chat'}>
+ <a href={'/posts?type=chat'}>
聊天
</a>
),
},
];
+interface NavbarProps {
+ current?: string;
+}
-
-const Navbar: React.FC = () => {
+const Navbar: React.FC<NavbarProps> = (props) => {
const [current, setCurrent] = useState('home');
-
+ useEffect(() => {
+ console.log('current:', props.current);
+ if (props.current) {
+ setCurrent(props.current);
+ }
+ },[props.current]);
const onClick: MenuProps['onClick'] = (e) => {
console.log('click ', e);
setCurrent(e.key);
diff --git a/src/components/postsPanel/postsPanel.module.css b/src/components/postsPanel/postsPanel.module.css
index dc10683..b4b75ce 100644
--- a/src/components/postsPanel/postsPanel.module.css
+++ b/src/components/postsPanel/postsPanel.module.css
@@ -2,6 +2,7 @@
background-color: var(--card-bg);
height:100%;
width:100%;
+ padding:0px 5px;
}
.header{
@@ -27,7 +28,16 @@
.content .item{
display:flex;
justify-content:space-between;
+ align-items:center;
+ padding-top:10px;
+ padding-bottom:10px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* 添加边框阴影 */
+ border:1px solid rgba(0,0,0,0.04);
+}
+.content .item:hover {
+ background:var(--select-bg-color);
+ cursor:pointer
}
.content .item .text{
width:70%;
diff --git a/src/components/postsPanel/postsPanel.tsx b/src/components/postsPanel/postsPanel.tsx
index e4f87c0..2916753 100644
--- a/src/components/postsPanel/postsPanel.tsx
+++ b/src/components/postsPanel/postsPanel.tsx
@@ -2,6 +2,7 @@
import React, { useCallback } from 'react';
import request from '@/utils/request'
import style from './postsPanel.module.css'
+import { useNavigate } from 'react-router';
interface panelProps{
@@ -11,23 +12,24 @@
}
const PostsPanel:React.FC<panelProps> = (props) => {
- const fenchData = useCallback(() => request.get(props.url), [props.url])
+ const nav = useNavigate();
+ const fenchData = useCallback(() => request.get(`${props.url}?page=1&size=5`), [props.url])
const {data} = useApi(fenchData, true);
-
-
-
+ const handlePostCheck =(postId:string) =>{
+ nav('/postDetail?postId=' + postId);
+ }
return (
<div className={style.panel}>
<div className={style.header}>
<span className={style.title}>{props.name}</span>
<span className={style.more}>更多</span>
</div>
- <div className={style.content}>
+ <div className={style.content} >
{data && data.length > 0 ?
- data?.map((item: { title: string; date: string }, index: number) => (
- <div key={index} className={style.item}>
- <span className={style.text}>{item.title}</span>
- <span>{item.date}</span>
+ data?.map((item: {postId:string, postTitle: string; createdAt: string }, index: number) => (
+ <div key={index} className={style.item} onClick={()=> handlePostCheck(item.postId)} >
+ <span className={style.text}>{item.postTitle}</span>
+ <span>{item.createdAt}</span>
</div>
)) :(
<div>未查询到相关记录</div>
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index a5156f4..834e841 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useEffect } from "react";
import { useAppSelector } from "../../hooks/store";
import style from "./style.module.css"
-
+import { useApi } from "@/hooks/request";
+import request from "@/utils/request";
+import { getUserInfo } from "@/api/user";
+import { useAppDispatch } from "@/hooks/store";
interface SelfStatusProps {
className?: string;
}
@@ -13,11 +16,25 @@
const downloadTraffic = useAppSelector(state => state.user.downloadTraffic);
const downloadPoints = useAppSelector(state => state.user.downloadPoints);
const avatar = useAppSelector(state => state.user.avatar);
+ const dispatch = useAppDispatch();
+ const { data, refresh } = useApi(() => request.get(getUserInfo), false);
+ useEffect(() => {
+ if (avatar.length === 0) {
+ refresh(); // 触发 API 请求
+ }
+ }, [avatar, refresh]);
+
+ useEffect(() => {
+ if (data) {
+ dispatch({ type: "user/getUserInfo", payload: data });
+ }
+ }, [data, dispatch]);
return (
<div className={style.container}>
<div className={style.left}>
- <img className={style.avatar} src={avatar} alt="User Avatar" />
+ {avatar && avatar.length > 0 ? (
+ <img className={style.avatar} src={avatar} alt="User Avatar" />):null}
</div>
<div className={style.right}>
<div className={style.info}>
diff --git a/src/components/selfStatus/style.module.css b/src/components/selfStatus/style.module.css
index 8ed86a7..858e88a 100644
--- a/src/components/selfStatus/style.module.css
+++ b/src/components/selfStatus/style.module.css
@@ -4,7 +4,6 @@
align-items: flex-start;
justify-content: space-between;
padding: 20px;
- border: 1px solid #ccc;
border-radius: 10px;
background-color: var(--card-bg);
width: 100%;