完成主页， 作品页，作品编辑页
> 未对接后端接口
Change-Id: I5d62663602656da4940707e00f76bfe09d824c2c
diff --git a/src/feature/user/UserHome.tsx b/src/feature/user/UserHome.tsx
index 5f925dc..cae4f6d 100644
--- a/src/feature/user/UserHome.tsx
+++ b/src/feature/user/UserHome.tsx
@@ -3,7 +3,7 @@
import axios from 'axios';
import { useEffect, useState } from 'react';
import { useAppSelector, useAppDispatch } from '../../store/hooks';
-import { getUserInfo } from './userSlice';
+import { getUserDetail, getUserInfo } from './userSlice';
const { Title, Text, Paragraph } = Typography;
@@ -56,17 +56,19 @@
// 检查token并获取用户信息
useEffect(() => {
const initializeUser = async () => {
- const token = localStorage.getItem('token');
- if (!token) {
- // 如果没有token，重定向到登录页
- window.location.href = '/login';
- return;
+ if (userState.userid) {
+ await dispatch(getUserDetail(userState.userid));
+
}
// 如果用户信息为空或状态为idle，重新获取
if (!userState.username || userState.status === 'idle') {
try {
- await dispatch(getUserInfo()).unwrap();
+ await dispatch(getUserInfo()).then(
+ () => {
+ dispatch(getUserDetail(userState.userid));
+ }
+ )
} catch (error) {
console.error('获取用户信息失败:', error);
// 如果获取用户信息失败，可能token过期，重定向到登录页
@@ -75,6 +77,7 @@
return;
}
}
+
setPageLoading(false);
};
@@ -139,11 +142,11 @@
// 如果页面正在初始化，显示加载状态
if (pageLoading || userState.status === 'loading') {
return (
- <div style={{
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- minHeight: '400px'
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ minHeight: '400px'
}}>
<Spin size="large" tip="加载用户信息中..." />
</div>
@@ -153,19 +156,19 @@
// 如果获取用户信息失败
if (userState.status === 'failed' || !userState.username) {
return (
- <div style={{
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
minHeight: '400px',
flexDirection: 'column'
}}>
- <Empty
+ <Empty
description="无法获取用户信息"
style={{ marginBottom: 16 }}
/>
- <Button
- type="primary"
+ <Button
+ type="primary"
onClick={() => dispatch(getUserInfo())}
>
重新加载
@@ -174,21 +177,24 @@
);
}
+
+
+
return (
<div className="user-home-container" style={{ padding: '0 24px' }}>
{/* 用户信息横栏 */}
- <Card
- style={{
- marginBottom: 24,
+ <Card
+ style={{
+ marginBottom: 24,
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
border: 'none'
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Space size="large" align="center">
- <Avatar
- size={80}
- icon={<UserOutlined />}
+ <Avatar
+ size={80}
+ icon={<UserOutlined />}
style={{ backgroundColor: '#fff', color: '#667eea' }}
/>
<div>
@@ -216,12 +222,12 @@
<Row gutter={24}>
{/* 左侧：作品展示栏 */}
<Col span={16}>
- <Card
+ <Card
title={
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<span>我的作品</span>
- <Button
- type="primary"
+ <Button
+ type="primary"
icon={<PlusOutlined />}
onClick={() => {
// 这里后续添加跳转到发布作品页面的逻辑
@@ -239,7 +245,7 @@
<Spin size="large" tip="加载作品中..." />
</div>
) : userWorks.length === 0 ? (
- <Empty
+ <Empty
description="暂无作品，快去发布第一个作品吧！"
style={{ padding: '50px 0' }}
/>
@@ -247,7 +253,7 @@
<Row gutter={[16, 16]}>
{userWorks.map((work) => (
<Col span={12} key={work.id}>
- <Card
+ <Card
hoverable
style={{ height: '100%' }}
actions={[
@@ -261,27 +267,27 @@
>
<Card.Meta
title={
- <div style={{
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap'
+ <div style={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
}}>
{work.title}
</div>
}
description={
<div>
- <Paragraph
- ellipsis={{ rows: 2 }}
+ <Paragraph
+ ellipsis={{ rows: 2 }}
style={{ marginBottom: 8, minHeight: '40px' }}
>
{work.description || '暂无描述'}
</Paragraph>
- <div style={{
- display: 'flex',
- justifyContent: 'space-between',
- fontSize: '12px',
- color: '#999'
+ <div style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ fontSize: '12px',
+ color: '#999'
}}>
<span>
<CalendarOutlined /> {formatDate(work.createTime)}
@@ -301,7 +307,7 @@
{/* 右侧：通知栏 */}
<Col span={8}>
- <Card
+ <Card
title={
<div style={{ display: 'flex', alignItems: 'center' }}>
<BellOutlined style={{ marginRight: 8 }} />
@@ -314,8 +320,8 @@
<div>
{mockNotifications.map((notification, index) => (
<div key={notification.id}>
- <div
- style={{
+ <div
+ style={{
padding: '12px',
backgroundColor: notification.unread ? '#f6ffed' : 'transparent',
borderRadius: '4px',
@@ -323,7 +329,7 @@
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div style={{ flex: 1 }}>
- <div style={{
+ <div style={{
fontWeight: notification.unread ? 'bold' : 'normal',
marginBottom: '4px',
display: 'flex',
@@ -331,15 +337,15 @@
}}>
{notification.title}
{notification.unread && (
- <Badge
- color="red"
+ <Badge
+ color="red"
style={{ marginLeft: '8px' }}
/>
)}
</div>
- <div style={{
- color: '#666',
- fontSize: '14px',
+ <div style={{
+ color: '#666',
+ fontSize: '14px',
lineHeight: '1.4',
marginBottom: '8px'
}}>
@@ -354,7 +360,7 @@
{index < mockNotifications.length - 1 && <Divider style={{ margin: '0' }} />}
</div>
))}
-
+
{/* 查看更多按钮 */}
<div style={{ textAlign: 'center', marginTop: '16px' }}>
<Button type="link">查看全部通知</Button>
diff --git a/src/feature/user/UserLayout.tsx b/src/feature/user/UserLayout.tsx
index cb88dde..e3613ec 100644
--- a/src/feature/user/UserLayout.tsx
+++ b/src/feature/user/UserLayout.tsx
@@ -5,13 +5,13 @@
function UserLayout() {
return (
-
- <Content style={{ margin: '24px 16px 0' }}>
- <div style={{ padding: 24, minHeight: 360 }}>
- <Outlet /> {/* 这里会渲染子路由对应的组件 */}
- </div>
- </Content>
-
+
+ <Content style={{ margin: '24px 16px 0' }}>
+ <div style={{ padding: 24, minHeight: 360 }}>
+ <Outlet />
+ </div>
+ </Content>
+
);
}
diff --git a/src/feature/user/userSlice.ts b/src/feature/user/userSlice.ts
index c3f7e44..64daa4e 100644
--- a/src/feature/user/userSlice.ts
+++ b/src/feature/user/userSlice.ts
@@ -1,6 +1,6 @@
// src/store/userSlice.ts
import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit';
-import type { UserInfo } from '../../api/User/type';
+import type { UserDetailInfo, UserInfo } from '../../api/User/type';
import UserAPi from '../../api/User/UserApi';
// 定义用户信息的类型
@@ -39,6 +39,23 @@
}
);
+export const getUserDetail = createAsyncThunk<
+ UserDetailInfo,
+ string,
+ {rejectValue:string}
+>(
+ 'user/getUserDetail',
+ async (id, { rejectWithValue }) => {
+ if(!id) return rejectWithValue("未获取到用户信息");
+ const response = await UserAPi.getMeDetail(id);
+ if (response.data.code == 0) {
+ return response.data.data;
+ } else {
+ return rejectWithValue(response.data.message);
+ }
+ }
+);
+
// 创建 userSlice
const userSlice = createSlice({
name: 'user',
@@ -62,7 +79,21 @@
.addCase(getUserInfo.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message ?? 'Unknown error';
- });
+ })
+ // getUserDetailFromState
+ .addCase(getUserDetail.pending, (state) => {
+ state.status = 'loading';
+ state.error = null;
+ })
+ .addCase(getUserDetail.fulfilled, (state, action: PayloadAction<UserDetailInfo>) => {
+ state.status = 'succeeded';
+ state.username = action.payload.username;
+ state.email = action.payload.email || '';
+ })
+ .addCase(getUserDetail.rejected, (state, action) => {
+ state.status = 'failed';
+ state.error = action.payload || action.error.message || 'Unknown error';
+ })
},
});