fix: 前端ui重构完成

frontend_nuxt/components/HeaderComponent.vue

@@ -47,9 +47,9 @@
             </div>
           </ToolTip>
 
-          <ToolTip v-if="isLogin" content="站内信" placement="bottom">
+          <ToolTip v-if="isLogin" content="站内信和频道" placement="bottom">
             <div class="messages-icon" @click="goToMessages">
-              <i class="fas fa-envelope"></i>
+              <i class="fas fa-comments"></i>
               <span v-if="unreadMessageCount > 0" class="unread-badge">{{
                 unreadMessageCount
               }}</span>

frontend_nuxt/components/MessageEditor.vue

@@ -147,7 +147,6 @@ export default {
 .message-editor-container {
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  margin-top: 20px;
 }
 
 .message-bottom-container {
@@ -180,4 +179,4 @@ export default {
 .message-submit:not(.disabled):hover {
   background-color: var(--primary-color-hover);
 }
-</style>
+</style>

frontend_nuxt/pages/message-box/[id].vue

@@ -22,7 +22,7 @@
               {{ TimeManager.format(item.createdAt) }}
             </div>
             <div class="message-content">
-              <div class="message-text" v-html="renderMarkdown(item.content)"></div>
+              <div class="info-content-text" v-html="renderMarkdown(item.content)"></div>
             </div>
           </template>
         </BaseTimeline>
@@ -335,21 +335,22 @@ onUnmounted(() => {
 .chat-container {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 80px); /* Adjust based on your header/footer height */
   margin: 0 auto;
-  border: 1px solid var(--border-color);
+  overflow: auto;
-  border-radius: 8px;
+  height: calc(100vh - var(--header-height));
-  overflow: hidden;
-  background-color: var(--bg-color);
   position: relative;
 }
 
 .chat-header {
   display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 100;
   align-items: center;
   padding: 10px 20px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--normal-border-color);
-  background-color: var(--bg-color-soft);
+  background-color: var(--background-color-blur);
+  backdrop-filter: var(--blur-10);
 }
 
 .back-button {
@@ -366,17 +367,13 @@ onUnmounted(() => {
 }
 
 .messages-list {
-  position: absolute;
-  top: 60px; /* Header height */
-  bottom: 250px; /* Increased space for input area */
-  left: 0;
-  right: 0;
   overflow-y: auto;
   padding: 20px;
-  padding-bottom: 40px; /* Extra padding at bottom */
+  padding-bottom: 100px;
   display: flex;
   flex-direction: column;
   gap: 20px;
+  margin-bottom: 10px;
 }
 
 .load-more-container {
@@ -415,16 +412,6 @@ onUnmounted(() => {
   flex-direction: column;
 }
 
-.message-text {
-  font-size: 15px;
-  line-height: 1.5;
-  word-wrap: break-word;
-}
-
-.message-text :deep(p) {
-  margin: 0;
-}
-
 .message-timestamp {
   font-size: 11px;
   color: var(--text-color-secondary);
@@ -432,7 +419,6 @@ onUnmounted(() => {
   opacity: 0.6;
 }
 
-/* Sent messages */
 .message-item.sent {
   align-self: flex-end;
   flex-direction: row-reverse;
@@ -458,17 +444,7 @@ onUnmounted(() => {
 }
 
 .message-input-area {
-  position: absolute;
+  margin-left: 20px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  min-height: 200px;
-  max-height: 400px;
-  padding: 10px 20px;
-  border-top: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-  box-sizing: border-box;
-  overflow: visible;
 }
 
 .loading-container,

frontend_nuxt/pages/message-box/index.vue

@@ -12,41 +12,39 @@
       <div class="empty-text">暂无会话</div>
     </div>
 
-    <div v-else class="conversations-list">
+    <div
-      <div
+      v-for="convo in conversations"
-        v-for="convo in conversations"
+      :key="convo.id"
-        :key="convo.id"
+      class="conversation-item"
-        class="conversation-item"
+      @click="goToConversation(convo.id)"
-        @click="goToConversation(convo.id)"
+    >
-      >
+      <div class="conversation-avatar">
-        <div class="conversation-avatar">
+        <img
-          <img
+          :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-            :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+          :alt="getOtherParticipant(convo)?.username || '用户'"
-            :alt="getOtherParticipant(convo)?.username || '用户'"
+          class="avatar-img"
-            class="avatar-img"
+          @error="handleAvatarError"
-            @error="handleAvatarError"
+        />
-          />
+      </div>
+
+      <div class="conversation-content">
+        <div class="conversation-header">
+          <div class="participant-name">
+            {{ getOtherParticipant(convo)?.username || '未知用户' }}
+          </div>
+          <div class="message-time">
+            {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
+          </div>
         </div>
 
-        <div class="conversation-content">
+        <div class="last-message-row">
-          <div class="conversation-header">
+          <div class="last-message">
-            <div class="participant-name">
+            {{
-              {{ getOtherParticipant(convo)?.username || '未知用户' }}
+              convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-            </div>
+            }}
-            <div class="message-time">
-              {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
-            </div>
           </div>
-
+          <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-          <div class="last-message-row">
+            {{ convo.unreadCount }}
-            <div class="last-message">
-              {{
-                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-              }}
-            </div>
-            <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-              {{ convo.unreadCount }}
-            </div>
           </div>
         </div>
       </div>
@@ -55,7 +53,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, onActivated } from 'vue'
+import { ref, onUnmounted, watch, onActivated } from 'vue'
 import { useRouter } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
@@ -244,13 +242,12 @@ function goToConversation(id) {
 .participant-name {
   font-size: 16px;
   font-weight: 600;
-  color: #2d3748;
+  color: var(--text-color);
-  truncate: true;
 }
 
 .message-time {
   font-size: 12px;
-  color: #a0aec0;
+  color: gray;
   flex-shrink: 0;
   margin-left: 12px;
 }
@@ -263,7 +260,7 @@ function goToConversation(id) {
 
 .last-message {
   font-size: 14px;
-  color: #4a5568;
+  color: gray;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;