优化帖子详情页面

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

@@ -1,37 +1,37 @@
 <template>
-    <div class="post-detail-container">
-        <!-- 作者信息栏 -->
-        <div class="author-info" v-if="author && author.userName">
-            <img 
-                :src="(author.userName === '匿名用户' || postDetailStore.post?.status === 1 ) 
-                ? require('@/assets/default-avatar/boy_4.png') 
-                : author.userAvatar|| require('@/assets/default-avatar/boy_1.png') "  
-                alt="头像" 
-                class="author-avatar"
-                :style="{ cursor: (author.userName === '匿名用户' || postDetailStore.post?.status === 1 )  ? 'not-allowed' : 'pointer' }"
-                @click="handleAuthorAvatarClick"
-            />
-            <div class="author-details">
-                <h3 class="author-name">{{ author.userName || '匿名用户' }}</h3>
-                <p class="author-stats">粉丝数：{{ author.followers ?? 0 }}</p>
-                <button @click="toggleFollow" class="follow-button">
-                    {{ isFollowing ? '取消关注' : '关注' }}
-                </button>
-            </div>
-        </div>
-
-        <!-- 主内容区：帖子内容+评论区+发送评论 -->
         <div class="main-content">
             <!-- 帖子内容 -->
             <div class="post-content">
+                <div class="author-row">
+                    <img 
+                        :src="(author.userName === '匿名用户' || postDetailStore.post?.status === 1 ) 
+                        ? require('@/assets/default-avatar/boy_4.png') 
+                        : author.userAvatar|| require('@/assets/default-avatar/boy_1.png') "  
+                        alt="头像" 
+                        class="author-avatar"
+                        :style="{ cursor: (author.userName === '匿名用户' || postDetailStore.post?.status === 1 )  ? 'not-allowed' : 'pointer' }"
+                        @click="handleAuthorAvatarClick"
+                    />
+                    <div class="author-info">
+                        <h3 class="author-name">{{ author.userName || '匿名用户' }}</h3>
+                        <button @click="toggleFollow" class="follow-button">
+                            {{ isFollowing ? '取消关注' : '关注' }}
+                        </button>
+                    </div>
+                    <h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
+                </div>
+                <p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
                 <img
                     v-if="postDetailStore.post?.image"
                     :src="postDetailStore.post.image"
                     alt="帖子封面"
                     class="post-cover"
+                    @click="showImagePreview = true"
                 />
-                <h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
+                <!-- 大图预览遮罩 -->
-                <p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
+                <div v-if="showImagePreview" class="image-preview-mask" @click="showImagePreview = false">
+                    <img :src="postDetailStore.post.image" class="image-preview-big" @click.stop />
+                </div>
                 <div class="post-stats">
                     <span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
                     <span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
@@ -153,7 +153,6 @@
                 </div>
             </div>
         </div>
-    </div>
 </template>
 
 <script setup lang="js" name="PostDetail">
@@ -169,7 +168,7 @@ const postDetailStore = usePostDetailStore();
 const userStore = useUserStore();
 const newComment = ref('');
 const replyingComment = ref(null);
-
+const showImagePreview = ref(false);
 // 用计算属性保证 author 总是对象，避免 undefined
 const author = computed(() => postDetailStore.post?.author || {});
 
@@ -289,29 +288,32 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.post-detail-container {
+.main-content {
-    display: grid;
+    max-width: 800px;
-    grid-template-areas:
-        "main-content author-info";
-    grid-template-columns: 3fr 1fr;
-    gap: 20px;
-    padding: 20px;
-    box-sizing: border-box;
-    max-width: 1200px;
     margin: 0 auto;
-    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 20px;
+    min-width: 0;
+    min-height: 0;
+    background: transparent;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+
+.author-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
 }
 
 .author-info {
-    grid-area: author-info;
     display: flex;
-    flex-direction: row; /* 水平排列头像和详情 */
+    flex-direction: column;
     align-items: flex-start;
-    background-color: #f5f5f5;
+    min-width: 90px;
-    padding: 20px;
+    margin-right: 18px;
-    border: 1px solid #ccc;
-    max-height: 200px;
-    border-radius: 8px;
 }
 
 .author-avatar {
@@ -322,24 +324,11 @@ onUnmounted(() => {
     margin-right: 15px; /* 与作者详情的间距 */
 }
 
-.author-details {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
 .author-name {
-    font-size: 18px;
+    font-size: 28px;
     margin: 0;
     }
 
-.author-stats {
-    font-size: 14px;
-    color: #666;
-    margin: 5px 0;
-    text-align: left; /* 设置居左 */
-}
-
 .follow-button {
     margin-top: 10px;
     padding: 8px 16px;
@@ -355,39 +344,52 @@ onUnmounted(() => {
     background-color: #4a8a5a;
 }
 
-.main-content {
-    grid-area: main-content;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    gap:20px;
-    min-width: 0;
-    min-height: 0;
-}
-
 .post-content {
     grid-area: post-content;
     background-color: #ffffff;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 8px;
-    position: relative; /* 为绝对定位的元素提供参考 */
+    position: relative; 
 }
 
 .post-cover {
-    position: absolute;
+    position: static;
-    top: 20px;
+    display: block;
-    right: 20px;
+    margin: 5px auto 0 auto;
-    width: 100px;
+    width: auto;
-    height: 100px;
+    height: 200px;
-    border-radius: 50%;
+    max-width: 100%;
     object-fit: cover;
+    border-radius: 12px;
     border: 2px solid #ccc;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    cursor: pointer; /* 鼠标悬停变小手 */
+    transition: box-shadow 0.2s;
+}
+.post-cover:hover {
+    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+}
+
+.image-preview-mask {
+    position: fixed;
+    z-index: 9999;
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.image-preview-big {
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: 12px;
+    box-shadow: 0 4px 32px rgba(0,0,0,0.25);
+    background: #fff;
 }
 
 .post-title {
     font-size: 32px;
-    max-width: 70%;
     margin-bottom: 10px;
     text-align: left;
     padding-left: 5px;
@@ -396,8 +398,7 @@ onUnmounted(() => {
 }
 
 .post-body {
-    font-size: 16px;
+    font-size: 20px;
-    max-width: 70%;
     line-height: 1.5;
     margin-bottom: 20px;
     text-align: left;