Docker
Change-Id: I2aefd96a43bcf3a3c41c079ecfc04a3fee48bed6
diff --git a/src/views/homepage/homepage.module.css b/src/views/homepage/homepage.module.css
new file mode 100644
index 0000000..fdcc060
--- /dev/null
+++ b/src/views/homepage/homepage.module.css
@@ -0,0 +1,249 @@
+/* 主题色变量 */
+/* :root {
+ --primary-color: #3498db;
+ --primary-hover: #2980b9;
+ --secondary-color: #f1c40f;
+ --dark-color: #2c3e50;
+ --light-color: #ecf0f1;
+ --text-color: #333;
+ --text-secondary: #7f8c8d;
+ --border-color: #ddd;
+ } */
+
+ /* --bg-color: #2b2b2b;
+ --text-color: #f1f1f1;
+ --card-bg: #1e1e1e;
+ --border-color: #444444; */
+
+ .container {
+ min-height: 100vh;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+
+ /* 顶部导航栏 */
+ .header {
+ display: flex;
+ align-items: center;
+ padding: 15px 30px;
+ background-color: solid var(--card-bg);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ .logo {
+ height: 40px;
+ cursor: pointer;
+ transition: transform 0.3s;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ }
+
+ .siteTitle {
+ margin: 0 0 0 15px;
+ color: var(--text-color);
+ font-size: 24px;
+ }
+
+ /* 主内容区 */
+ .mainContent {
+ display: flex;
+ min-height: calc(100vh - 70px);
+ padding: 20px;
+ gap: 20px;
+ }
+
+ /* 左侧用户信息区 */
+ .userProfile {
+ flex: 2;
+ background-color: var(--card-bg);
+ border-radius: 10px;
+ padding: 25px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+ }
+
+ .userHeader {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ .userAvatar {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 3px solid var(--primary-color);
+ margin-right: 20px;
+ }
+
+ .userInfo {
+ flex: 1;
+ }
+
+ .username {
+ margin: 0 0 5px 0;
+ color: var(--text-color);
+ font-size: 22px;
+ }
+
+ .inviteCode {
+ color: var(--text-color);
+ font-size: 14px;
+ margin-bottom: 10px;
+ }
+
+ .editButton {
+ padding: 8px 20px;
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 20px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
+ }
+
+ .editButton:hover {
+ background-color: var(--primary-hover);
+ }
+
+ /* 用户统计 */
+ .userStats {
+ display: flex;
+ justify-content: space-between;
+ margin: 25px 0;
+ padding: 15px 0;
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+ }
+
+ .statItem {
+ text-align: center;
+ padding: 0 10px;
+ }
+
+ .statNumber {
+ font-size: 22px;
+ font-weight: bold;
+ color: var(--primary-color);
+ }
+
+ .statLabel {
+ font-size: 14px;
+ color: var(--text-secondary);
+ margin-top: 5px;
+ }
+
+ /* 用户数据 */
+ .userData {
+ background-color: var(--light-color);
+ padding: 15px;
+ border-radius: 8px;
+ margin-bottom: 25px;
+ }
+
+ .dataItem {
+ margin-bottom: 8px;
+ font-size: 15px;
+ }
+
+ .dataItem strong {
+ color: var(--primary-color);
+ }
+
+ /* 作品区 */
+ .worksSection {
+ margin-top: 30px;
+ }
+
+ .sectionTitle {
+ margin: 0 0 20px 0;
+ color: var(--dark-color);
+ font-size: 18px;
+ padding-bottom: 10px;
+ border-bottom: 2px solid var(--primary-color);
+ }
+
+ .workItem {
+ padding: 15px;
+ margin-bottom: 15px;
+ background-color: var(--primary-card);
+ border-radius: 8px;
+ border-left: 4px solid var(--primary-color);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s, box-shadow 0.3s;
+ }
+
+ .workItem:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ }
+
+ .workTitle {
+ margin: 0 0 10px 0;
+ color: var(--text-color);
+ font-size: 16px;
+ }
+
+ .workMeta {
+ display: flex;
+ justify-content: space-between;
+ font-size: 14px;
+ color: var(--text-color);
+ }
+
+ /* 右侧内容区 */
+ .rightContent {
+ flex: 1;
+ min-width: 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .petSection, .trafficSection {
+ background-color: var(--card-bg);
+ border-radius: 10px;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+ }
+
+ .petContainer {
+ background-color: var(--card-bg);
+ border-radius: 8px;
+ padding: 15px;
+ text-align: center;
+ }
+
+ .petImage {
+ max-width: 100%;
+ height: auto;
+ border-radius: 5px;
+ }
+
+ .trafficContainer {
+ background-color: white;
+ border-radius: 8px;
+ padding: 10px;
+ text-align: center;
+ border: 1px solid var(--border-color);
+ }
+
+ .trafficImage {
+ max-width: 100%;
+ height: auto;
+ }
+
+ /* 加载和错误状态 */
+ .loading, .error {
+ padding: 20px;
+ text-align: center;
+ color: var(--text-color);
+ }
+
+ .error {
+ color: #e74c3c;
+ }
\ No newline at end of file
diff --git a/src/views/homepage/homepage.tsx b/src/views/homepage/homepage.tsx
new file mode 100644
index 0000000..58c910f
--- /dev/null
+++ b/src/views/homepage/homepage.tsx
@@ -0,0 +1,164 @@
+import React, { useCallback, useEffect } from 'react';
+import styles from './homepage.module.css';
+import { useApi } from '@/hooks/request';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
+import { useNavigate } from 'react-router';
+import logo from '&/assets/logo.png';
+import { getUserMessage } from '@/api/homepage';
+import request from '@/utils/request'
+import { hotPosts } from '@/api/post';
+import { postUserLogin } from '@/api/auth';
+
+interface WorkItem {
+ postId: number,
+ userId: number,
+ postTitle: string,
+ postContent: string,
+ createdAt: number,
+ postType: string,
+ viewCount: number,
+ hotScore: number,
+ lastCalculated: number
+
+}
+
+interface UserStats {
+ likes: number;
+ following: number;
+ followers: number;
+ mutualFollows: number;
+}
+
+interface UserResponse {
+ username: string;
+ inviteCode: string;
+ stats: UserStats;
+ upload: string;
+ level: string;
+ works: WorkItem[];
+ petImage: string;
+ trafficImage: string;
+}
+
+
+const Homepage: React.FC =() => {
+ const navigate = useNavigate();
+ const userInfo = useSelector((state: RootState) => state.user);
+
+ // 获取用户作品数据
+ // const {data: response, loading, error, refresh} =useApi(()=>request.get(getUserMessage), false);
+ const { data: response, loading, error, refresh } = useApi<UserResponse>(() => request.get(getUserMessage), false);
+ useEffect(() => {
+ refresh(); // 页面首次加载时触发请求
+ }, []);
+ // 用户统计数据
+ const userStats = {
+ likes: response?.stats?.likes ?? 0,
+ following: response?.stats?.following ?? 0,
+ followers: response?.stats?.followers ?? 0,
+ mutualFollows: response?.stats?.mutualFollows ?? 0,
+ uploadAmount: response?.upload ?? '--',
+ level: response?.level ?? '--'
+ };
+
+ const handleLogoClick = () => {
+ navigate('/');
+ };
+
+ return (
+ <div className={styles.container}>
+
+
+ {/* 用户信息主区域 */}
+ <div className={styles.mainContent}>
+ {/* 左侧用户信息区 */}
+ <div className={styles.userProfile}>
+ <div className={styles.userHeader}>
+ <img
+ src={userInfo.avatar || '/default-avatar.png'}
+ alt="用户头像"
+ className={styles.userAvatar}
+ />
+ <div className={styles.userInfo}>
+ <h2 className={styles.username}>阳菜，放睛！</h2>
+ <div className={styles.inviteCode}>邀请码：1314520</div>
+ <button className={styles.editButton}>编辑主页</button>
+ <button
+ className={styles.editButton}
+ onClick={() => navigate('/postDetails', {
+ state: { isNewPost: true }
+ })}
+ >
+ 发布种子
+ </button>
+ </div>
+ </div>
+
+ <div className={styles.userStats}>
+ <div className={styles.statItem}>
+ <div className={styles.statNumber}>{userStats.likes}</div>
+ <div className={styles.statLabel}>获赞</div>
+ </div>
+ <div className={styles.statItem}>
+ <div className={styles.statNumber}>{userStats.following}</div>
+ <div className={styles.statLabel}>关注</div>
+ </div>
+ <div className={styles.statItem}>
+ <div className={styles.statNumber}>{userStats.followers}</div>
+ <div className={styles.statLabel}>粉丝</div>
+ </div>
+ <div className={styles.statItem}>
+ <div className={styles.statNumber}>{userStats.mutualFollows}</div>
+ <div className={styles.statLabel}>互关</div>
+ </div>
+ </div>
+
+ <div className={styles.userData}>
+ <div className={styles.dataItem}>
+ <span>您的总上传量为：</span>
+ <strong>{userStats.uploadAmount}</strong>
+ </div>
+ <div className={styles.dataItem}>
+ <span>您的用户等级为：</span>
+ <strong>{userStats.level}</strong>
+ </div>
+ </div>
+
+ <div className={styles.worksSection}>
+ <h3 className={styles.sectionTitle}>我的作品</h3>
+ {loading && <div className={styles.loading}>加载中...</div>}
+ {error && <div className={styles.error}>{error.message}</div>}
+
+ {response && response.works.map(work => (
+ <div key={work.postId} className={styles.workItem}>
+ <h4 className={styles.workTitle}>{work.postTitle}</h4>
+ <div className={styles.workMeta}>
+ <span>发布时间：{work.createdAt}</span>
+ <span>下载量：{work.viewCount} 做种数：{'待定'}</span>
+ </div>
+ </div>
+ )) }
+ </div>
+ </div>
+
+ {/* 右侧内容区 */}
+ <div className={styles.rightContent}>
+ <div className={styles.petSection}>
+ <h3 className={styles.sectionTitle}>宠物图</h3>
+ <div className={styles.petContainer}>
+ <img
+ src="/assets/pet-blue-star.png"
+ alt="蓝色星星宠物"
+ className={styles.petImage}
+ />
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Homepage;
\ No newline at end of file