From 5ec2babc4434fa9a33968d3dc4bed7c925abb9b2 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sat, 3 May 2025 07:08:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96ViewerLayout=E5=92=8C?=
 =?UTF-8?q?QuestionBoxView=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在ViewerLayout.vue中添加过渡模式以增强动画效果
- 更新QuestionBoxView.vue，调整问题头部间距，优化图片展示逻辑，修改上传图片网格样式，提升用户体验
---
 src/views/ViewerLayout.vue         |  15 +----
 src/views/view/QuestionBoxView.vue | 102 ++++++++---------------------
 2 files changed, 28 insertions(+), 89 deletions(-)

diff --git a/src/views/ViewerLayout.vue b/src/views/ViewerLayout.vue
index 6b8706c..1a2f7a2 100644
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -476,6 +476,7 @@
           <RouterView v-slot="{ Component }">
             <Transition
               name="fade-slide"
+              mode="out-in"
               :appear="true"
             >
               <KeepAlive>
@@ -676,19 +677,7 @@
 // --- 路由过渡动画 ---
 .fade-slide-enter-active,
 .fade-slide-leave-active {
-  transition: opacity 0.25s ease, transform 0.25s ease;
-  // 关键: 相对于 content-layout-container 定位
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%; // 让过渡元素也撑满容器高度
-  // 关键: 保持内边距和盒模型一致
-  padding: var(--vtsuru-content-padding);
-  box-sizing: border-box;
-  // 关键: 背景色防止透视
-  background-color: var(--n-card-color); // 使用内容区的背景色
-  z-index: 1;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .fade-slide-enter-from {
diff --git a/src/views/view/QuestionBoxView.vue b/src/views/view/QuestionBoxView.vue
index 6aa19f4..9cf7588 100644
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -26,6 +26,8 @@ import {
   NSpin,
   NIcon,
   useMessage,
+  NCarousel,
+  NCarouselItem,
 } from 'naive-ui'
 import { AddCircle24Regular, DismissCircle24Regular } from '@vicons/fluent'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -706,44 +708,10 @@ onUnmounted(() => {
                 <!-- 问题头部 -->
                 <template #header>
                   <NSpace
-                    :size="0"
+                    :size="5"
                     align="center"
                     class="question-header"
                   >
-                    <NTooltip v-if="!item.isAnonymous">
-                      <template #trigger>
-                        <NAvatar
-                          v-if="item.sender?.id"
-                          :src="getUserAvatarUrl(item.sender.id)"
-                          round
-                          size="small"
-                          class="sender-avatar"
-                          :img-props="{ referrerpolicy: 'no-referrer' }"
-                        />
-                        <NAvatar
-                          v-else
-                          round
-                          size="small"
-                          class="sender-avatar"
-                        >
-                          ?
-                        </NAvatar>
-                      </template>
-                      {{ item.sender?.name || '未知用户' }}
-                    </NTooltip>
-                    <NTooltip v-else>
-                      <template #trigger>
-                        <NAvatar
-                          round
-                          size="small"
-                          class="sender-avatar"
-                        >
-                          匿
-                        </NAvatar>
-                      </template>
-                      匿名用户
-                    </NTooltip>
-
                     <NText
                       depth="3"
                       class="time-text"
@@ -782,23 +750,20 @@ onUnmounted(() => {
                   >
                     {{ item.question.message }}
                   </div>
+                  <NDivider style="margin: 0;" />
                   <div
                     v-if="item.questionImages && item.questionImages.length > 0"
                     class="question-image-container"
                   >
-                    <NSpace
-                      vertical
-                      align="center"
-                    >
-                      <NImage
-                        v-for="(img, index) in item.questionImages"
-                        :key="index"
-                        :src="img.path"
-                        class="question-image"
-                        lazy
-                        object-fit="contain"
-                      />
-                    </NSpace>
+                  <NImage
+                      v-for="(img, index) in item.questionImages"
+                      :key="index"
+                      :src="img.path"
+                      class="question-image"
+                      :img-props="{ height: '100px' }"
+                      lazy
+                      object-fit="contain"
+                    />
                   </div>
                 </NCard>
 
@@ -925,7 +890,8 @@ onUnmounted(() => {
 }
 
 .image-upload-card {
-  width: 50%;
+  max-width: 500px;
+  width: 100%;
   margin: 0 auto;
   text-align: center;
   border-radius: 6px;
@@ -954,14 +920,17 @@ onUnmounted(() => {
 /* 已登录用户图片上传网格 */
 .upload-images-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   gap: 8px;
 }
 
 .upload-image-item, .upload-add-item {
-  height: 60px;
+  aspect-ratio: 1 / 1;
   border-radius: 4px;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .upload-add-item {
@@ -973,23 +942,10 @@ onUnmounted(() => {
 }
 
 .add-icon {
-  font-size: 20px;
+  font-size: 24px;
   color: var(--text-color);
 }
 
-/* 图片预览样式 */
-.image-preview-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.upload-preview-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .remove-image-btn {
   position: absolute;
   top: 2px;
@@ -1159,19 +1115,13 @@ onUnmounted(() => {
 
 .question-image-container {
   display: flex;
+  flex-direction: row;
+  align-items: center;
   justify-content: center;
+  gap: 8px;
   margin-top: 12px;
-}
-
-.question-image {
-  max-height: 200px;
-  max-width: 100%;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-}
-
-.question-image:hover {
-  transform: scale(1.02);
+  width: 100%;
+  overflow: hidden;
 }
 
 /* 回答区域 */