樱花飘落效果，还需更优素材

珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.8.4",
         "core-js": "^3.8.3",
         "element-plus": "^2.9.8",
+        "jparticles": "^3.5.0",
         "pinia": "^3.0.2",
         "vue": "^3.2.13",
         "vue-router": "^4.5.0"
@@ -7613,6 +7614,12 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/jparticles": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/jparticles/-/jparticles-3.5.0.tgz",
+      "integrity": "sha512-qUKP56Xqh2G7TqFKHMPDYzfZKkvsbLGJu+xJI4dh0YGZL26zOCUVV31MkkPWmfd6SaST23mhSvvvEArFd8yApQ==",
+      "license": "MIT"
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",

珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json

@@ -11,11 +11,11 @@
     "axios": "^1.8.4",
     "core-js": "^3.8.3",
     "element-plus": "^2.9.8",
+    "jparticles": "^3.5.0",
     "pinia": "^3.0.2",
     "vue": "^3.2.13",
     "vue-router": "^4.5.0"
   },
-  
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue

@@ -2,6 +2,8 @@
 <template>
   <div id="app">
     <Header />
+     <!-- 飘 🌸蒙版 -->
+    <div class="snow" id="snow"></div>
     <RouterView></RouterView>
   </div>
 </template>
@@ -10,6 +12,29 @@
 <script setup lang="js" name="App">
 import Header from './components/Header.vue';
 import { RouterView } from 'vue-router';
+import { Snow } from 'jparticles';
+import { onMounted} from 'vue';
+import { sakura } from './assets/sakura';
+
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+onMounted(() => {
+ new Snow('#snow', 
+  { 
+    num: getRandomInt(1,4), 
+    color: '#fff',
+    maxR: 3, 
+    minR: 12, 
+    maxSpeed: 0.4, 
+    minSpeed: 0.1, 
+    swing: true, 
+    swingProbability: 0.1, 
+    spin: true, 
+    shape: sakura(),
+  });
+});
 </script>
 
 <!-- 样式部分,定义CSS样式 -->
@@ -22,4 +47,13 @@ import { RouterView } from 'vue-router';
   color: #2c3e50;
   margin-top: 60px;
 }
+.snow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9;
+  pointer-events: none;
+}
 </style>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js

@@ -54,6 +54,7 @@ export const usePostDetailStore = defineStore("postDetail", {
           // 主要帖子信息
           this.post = {
             postId: id,
+            image: image,
             title,
             content,
             createTime,
@@ -63,7 +64,7 @@ export const usePostDetailStore = defineStore("postDetail", {
           this.userInfo = {
             userId,
             userName,
-            userAvatar: userAvatar || image || null,
+            userAvatar: userAvatar,
             followers:1234,//先预设粉丝占位
           };
 

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js

@@ -1,5 +1,4 @@
-import {defineStore} from 'pinia';
-import axios from 'axios'; 
+import {defineStore} from 'pinia'; 
 import request from '@/utils/request';
 
 export const usePostListStore = defineStore('postList', {

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/utils/request.js

@@ -24,8 +24,10 @@ request.interceptors.request.use(
     console.log('Request:',config);
     if (!config.url.includes('/captcha') && !config.url.includes('/verify-captcha')) {
       const token = localStorage.getItem('accessToken');
+      const refreshToken = localStorage.getItem('refreshToken');
       if (token) {
         config.headers['Authorization'] = token;
+        config.headers['X-Refresh-Token'] = refreshToken; 
       }
     }
     return config;

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue

@@ -60,10 +60,12 @@
 <script setup lang="js" name="PostDetail">
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import { usePostDetailStore } from '@/stores/postdetail';
+import { usePostDetailStore } from '@/stores/postdetail.js';
+import { useUserStore } from '@/stores/user.js';
 
 const route = useRoute();
 const postDetailStore = usePostDetailStore();
+const userStore = useUserStore(); // 如果需要用户信息
 const newComment = ref('');
 
 // 作者信息（如不需要可移除）
@@ -81,10 +83,15 @@ function formatTime(timeStr) {
 
 // 发送评论（这里只做前端追加，实际应调用后端接口）
 const sendComment = () => {
+  if (!userStore.isLoggedIn) {
+    alert('请先登录后再评论');
+    return;
+  }
   if (newComment.value.trim()) {
     postDetailStore.addComment({
-      userAvatar: require('@/assets/default-avatar/boy_1.png'),
-      userName: '新评论者',
+      userAvatar: userStore.userInfo.avatar || require('@/assets/default-avatar/boy_1.png'),
+      userName: userStore.userInfo.username,
+      userId: userStore.userInfo.userid,
       content: newComment.value,
       createTime: new Date().toISOString(),
       likeCount: 0,