帖子分类
Change-Id: I17bafbfe3c1c8fd26c1e12499cb3c17cd1738e23
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>