From d8566241305ed918e2e30f01461d86b45ad850d1 Mon Sep 17 00:00:00 2001
From: lee-zt <2960166273@qq.com>
Date: Mon, 26 May 2025 19:01:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=96=E5=AD=90=E5=88=97=E8=A1=A8=E5=92=8C?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=B8=96=E5=AD=90=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-frontend/src/components/PostPage.vue  | 92 ++++++++----------
 .../vue-frontend/src/stores/postdetail.js     | 93 ++++++++++++++++++
 .../vue-frontend/src/stores/postlist.js       | 78 +++++++++++++++
 .../vue-frontend/src/views/PostDetail.vue     | 97 +++++++------------
 4 files changed, 246 insertions(+), 114 deletions(-)
 create mode 100644 珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js
 create mode 100644 珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js

diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
index bc13b47..cb9168b 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
@@ -37,69 +37,59 @@
 </template>
 
 <script setup lang="js" name="PostPage">
-import { ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { usePostListStore } from '@/stores/postlist.js';
 
 const categories = ref(['全部', '学习', '娱乐', '二手交易']);
 const selectedCategory = ref('全部');
-const posts = ref([
-  {
-    id: 1,
-    category: '学习',
-    title: '如何高效学习？',
-    summary: '分享一些学习技巧...',
-    avatar: require('@/assets/default-avatar/boy_1.png'),
-    likes: 1200,
-    comments: 10,
-    favorites: 100,
-  },
-  {
-    id: 2,
-    category: '娱乐',
-    title: '最近的热门电影推荐',
-    summary: '看看这些电影吧...',
-    avatar: require('@/assets/default-avatar/girl_1.png'),
-    likes: 800,
-    comments: 5,
-    favorites: 50,
-  },
-  {
-    id: 3,
-    category: '二手交易',
-    title: '出售二手书籍',
-    summary: '价格优惠，欢迎咨询...',
-    avatar: require('@/assets/default-avatar/boy_2.png'),
-    likes: 300,
-    comments: 2,
-    favorites: 20,
-  },
-  {
-    id: 4,
-    category: '学习',
-    title: '考研经验分享',
-    summary: '考研路上的一些心得...',
-    avatar: require('@/assets/default-avatar/girl_3.png'),
-    likes: 1500,
-    comments: 20,
-    favorites: 200,
-  },
-]);
-
-const filteredPosts = ref(posts.value);
-
+const postListStore = usePostListStore();
 const router = useRouter();
 
-const selectCategory = (category) => {
+// 计算属性，动态筛选
+const filteredPosts = computed(() => {
+  if (selectedCategory.value === '全部') return postListStore.posts;
+  return postListStore.posts.filter(post => post.category === selectedCategory.value);
+});
+
+// 分类切换
+const selectCategory = async (category) => {
   selectedCategory.value = category;
-  filteredPosts.value =
-    category === '全部'
-      ? posts.value
-      : posts.value.filter((post) => post.category === category);
+  postListStore.resetList();
+  await postListStore.getList({});
 };
 
+// 跳转详情
 const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
 };
+
+// 滚动触底加载
+const handleScroll = async () => {
+  const scrollContainer = document.documentElement;
+  if (
+    scrollContainer.scrollTop + window.innerHeight >= scrollContainer.scrollHeight - 10 &&
+    !postListStore.loading &&
+    !postListStore.finished
+  ) {
+    await postListStore.getList({});
+  }
+};
+
+onMounted(async () => {
+  // 首次加载
+  await postListStore.getList({});
+  window.addEventListener('scroll', handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
+
+// 分类切换时自动滚动到顶部
+watch(selectedCategory, () => {
+  window.scrollTo(0, 0);
+});
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js
new file mode 100644
index 0000000..4e9d6f9
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js
@@ -0,0 +1,93 @@
+import { defineStore } from "pinia";
+import request from "@/utils/request";
+
+export const usePostDetailStore = defineStore("postDetail", {
+  state: () => ({
+    post: null,           // 帖子主要信息
+    comments: [],         // 评论列表
+    userInfo: null,       // 用户信息
+    totalComments: 0,     // 评论总数
+    likeCount: 0,         // 点赞数
+    commentCount: 0,      // 评论数
+    favoriteCount: 0,     // 收藏数
+    viewCount: 0,         // 浏览数
+    isLike: false,        // 是否点赞
+    loading: false,       // 加载状态
+  }),
+  actions: {
+    setPost(post) {
+      this.post = post;
+    },
+    setComments(comments) {
+      this.comments = comments;
+      this.totalComments = comments.length;
+    },
+    setUserInfo(userInfo) {
+      this.userInfo = userInfo;
+    },
+    addComment(comment) {
+      this.comments.push(comment);
+      this.totalComments += 1;
+    },
+    async fetchPostDetail(postId, { lastVal = Date.now(), offset = 0, size = 10 } = {}) {
+      this.loading = true;
+      try {
+        // 获取帖子详情
+        const postRes = await request.get(`/post/detail/${postId}`);
+        if (postRes.code === 200 && postRes.data) {
+          const {
+            id,
+            image,
+            title,
+            content,
+            likeCount,
+            commentCount,
+            favoriteCount,
+            viewCount,
+            isLike,
+            userId,
+            userName,
+            userAvatar,
+            createTime
+          } = postRes.data;
+
+          // 主要帖子信息
+          this.post = {
+            postId: id,
+            title,
+            content,
+            createTime,
+          };
+
+          // 用户信息
+          this.userInfo = {
+            userId,
+            userName,
+            userAvatar: userAvatar || image || null,
+            followers:1234,//先预设粉丝占位
+          };
+
+          // 其余字段
+          this.likeCount = likeCount;
+          this.commentCount = commentCount;
+          this.favoriteCount = favoriteCount;
+          this.viewCount = viewCount;
+          this.isLike = isLike;
+        }
+
+        // 获取评论列表
+        const commentRes = await request.post('/comment/list', {
+          lastVal,
+          offset,
+          size,
+          postId
+        });
+        if (commentRes.code === 200) {
+          this.setComments(commentRes.data.records || []);
+        }
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+});
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js
new file mode 100644
index 0000000..af303ac
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js
@@ -0,0 +1,78 @@
+import {defineStore} from 'pinia';
+import axios from 'axios'; 
+import request from '@/utils/request';
+
+export const usePostListStore = defineStore('postList', {
+  state: () => ({
+    posts: [], // 帖子列表
+    total: 0, // 帖子总数
+    page: 1, // 当前页码
+    pageSize: 10, // 每页帖子数
+    lastVal: Date.now(), // 用于滚动分页的时间戳
+    offset: 0, // 偏移量
+    loading: false, // 加载状态
+    finished: false, // 是否加载完全部
+  }),
+  actions: {
+    setPosts(posts) {
+      this.posts = posts;
+    },
+    setTotal(total) {
+      this.total = total;
+    },
+    setPage(page) {
+      this.page = page;
+    },
+    setPageSize(pageSize) {
+      this.pageSize = pageSize;
+    },
+    addPost(post) {
+      this.posts.push(post);
+      this.total += 1; // 更新总数
+    },
+    removePost(postId) {
+      this.posts = this.posts.filter(post => post.id !== postId);
+      this.total -= 1; // 更新总数
+    },
+    async getList({ lastVal = this.lastVal, offset = this.offset, size = this.pageSize } = {}) {
+      if (this.loading || this.finished) return;
+      this.loading = true;
+      try {
+        const res = await request.post('/post/list', { lastVal, offset, size });
+        if (res.code === 200) {
+          const { records, lastVal: newLastVal, offset: newOffset, size: newSize } = res.data;
+          if (records.length > 0) {
+            // 字段映射
+            const mappedRecords = records.map(post => ({
+              id: post.id,
+              avatar: post.userAvatar || post.image || require('@/assets/default-avatar/boy_1.png'),
+              title: post.title,
+              summary: post.content ? post.content.slice(0, 40) + (post.content.length > 40 ? '...' : '') : '',
+              likes: post.likeCount,
+              comments: post.commentCount,
+              favorites: post.favoriteCount,
+              category: post.category || '全部',
+              createTime: post.createTime,
+              userName: post.userName,
+            }));
+            this.posts = [...this.posts, ...mappedRecords];
+            this.lastVal = newLastVal;
+            this.offset = newOffset;
+            this.pageSize = newSize;
+          }
+          if (records.length < size) {
+            this.finished = true; // 没有更多数据
+          }
+        }
+      } finally {
+        this.loading = false;
+      }
+    },
+    resetList() {
+      this.posts = [];
+      this.lastVal = Date.now();
+      this.offset = 0;
+      this.finished = false;
+    }
+  },
+});
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
index 30e7add..7cd4bf6 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="post-detail-container">
-        <!-- 作者信息栏 -->
+        <!-- 作者信息栏（可保留或移除） -->
         <div class="author-info">
-            <img :src="author.avatar" alt="头像" class="author-avatar" />
+            <img :src="author.userAvatar" alt="头像" class="author-avatar" />
             <div class="author-details">
-                <h3 class="author-name">{{ author.name }}</h3>
+                <h3 class="author-name">{{ author.userName }}</h3>
                 <p class="author-stats">粉丝数：{{ author.followers }}</p>
                 <button @click="toggleFollow" class="follow-button">
                     {{ isFollowing ? '取消关注' : '关注' }}
@@ -14,16 +14,16 @@
 
         <!-- 帖子内容 -->
         <div class="post-content">
-            <img :src="author.avatar" alt="作者头像" class="post-author-avatar" />
-            <h1 class="post-title">{{ postTitle }}</h1>
-            <p class="post-body">{{ postContent }}</p>
+            <img :src="author.userAvatar" alt="作者头像" class="post-author-avatar" />
+            <h1 class="post-title">{{ postDetailStore.post?.title }}</h1>
+            <p class="post-body">{{ postDetailStore.post?.content }}</p>
             <div class="post-stats">
-                <span> 热度 {{ postStats.likes }}</span>
-                <span> 点赞 {{ postStats.favorites }}</span>
-                <span> 评论 {{ postStats.comments }}</span>
+                <span> 热度 {{ postDetailStore.post?.likeCount ?? 0 }}</span>
+                <span> 点赞 {{ postDetailStore.post?.favoriteCount ?? 0 }}</span>
+                <span> 评论 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
             </div>
             <div class="post-time">
-                发布时间：{{ postTime }}
+                发布时间：{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
             </div>
         </div>
 
@@ -31,14 +31,14 @@
         <div class="comments-section">
             <h2 class="comments-title">评论</h2>
             <ul class="comments-list">
-                <li v-for="(comment, index) in comments" :key="index" class="comment-item">
-                    <img :src="comment.avatar" alt="评论者头像" class="comment-avatar" />
+                <li v-for="comment in postDetailStore.comments" :key="comment.id" class="comment-item">
+                    <img :src="comment.userAvatar || require('@/assets/default-avatar/boy_1.png')" alt="评论者头像" class="comment-avatar" />
                     <div class="comment-content">
-                        <p class="comment-name">{{ comment.name }}</p> <!-- 评论者名字 -->
-                        <p class="comment-text">{{ comment.text }}</p>
+                        <p class="comment-name">{{ comment.userName }}</p>
+                        <p class="comment-text">{{ comment.content }}</p>
                         <div class="comment-meta">
-                            <span class="comment-time">{{ comment.time }}</span>
-                            <span class="comment-likes">赞 {{ comment.likes }}</span>
+                            <span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
+                            <span class="comment-likes">赞 {{ comment.likeCount ?? 0 }}</span>
                         </div>
                     </div>
                 </li>
@@ -60,70 +60,41 @@
 <script setup lang="js" name="PostDetail">
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import { usePostDetailStore } from '@/stores/postdetail';
 
 const route = useRoute();
-const postId = ref(route.params.id);
-const postTitle = ref('');
-const postContent = ref('');
+const postDetailStore = usePostDetailStore();
 const newComment = ref('');
 
-// 作者信息
-const author = ref({
-  avatar: require('@/assets/default-avatar/boy_4.png'),
-  name: '珈人1号',
-  followers: 1234,
-});
-
-// 帖子统计信息
-const postStats = ref({
-  likes: 1200,
-  favorites: 300,
-  comments: 45,
-});
-
-// 发布时间
-const postTime = ref('2025年4月20日 14:30');
-
-// 评论数据
-const comments = ref([
-  {
-    avatar: require('@/assets/default-avatar/girl_1.png'),
-    name: '评论者1',
-    text: '这是第一条评论。',
-    time: '2025年4月20日 15:00',
-    likes: 10,
-  },
-  {
-    avatar: require('@/assets/default-avatar/boy_2.png'),
-    name: '评论者2',
-    text: '这是第二条评论。',
-    time: '2025年4月20日 15:30',
-    likes: 5,
-  },
-]);
-
+// 作者信息（如不需要可移除）
+const author = postDetailStore.post?.author ;
 const isFollowing = ref(false);
-
 const toggleFollow = () => {
   isFollowing.value = !isFollowing.value;
 };
 
+// 时间格式化
+function formatTime(timeStr) {
+  const date = new Date(timeStr);
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
+}
+
+// 发送评论（这里只做前端追加，实际应调用后端接口）
 const sendComment = () => {
   if (newComment.value.trim()) {
-    comments.value.push({
-      avatar: require('@/assets/default-avatar/boy_1.png'),
-      name: '新评论者',
-      text: newComment.value,
-      time: new Date().toLocaleString(),
-      likes: 0,
+    postDetailStore.addComment({
+      userAvatar: require('@/assets/default-avatar/boy_1.png'),
+      userName: '新评论者',
+      content: newComment.value,
+      createTime: new Date().toISOString(),
+      likeCount: 0,
     });
     newComment.value = '';
   }
 };
 
 onMounted(() => {
-  postTitle.value = `帖子标题 ${postId.value}`;
-  postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
+  postDetailStore.fetchPostDetail(route.params.id);
 });
 </script>