UI升级

src/components/chat/MessageList.vue

@@ -7,18 +7,30 @@
       @drop.prevent
       @scroll="handleScroll"
   >
-    <!-- 加载历史消息提示 -->
-    <div v-if="loadingHistory" class="flex justify-center items-center py-4">
-      <div class="flex items-center gap-2 text-gray-400 text-sm">
-        <i class="fas fa-spinner fa-spin"></i>
-        <span>正在加载历史消息...</span>
-      </div>
+    <!-- 顶部加载状态提示区 -->
+    <div class="w-full flex justify-center py-2 min-h-[40px] items-center">
+
+      <!-- 1. 加载中 -->
+      <div v-if="loadingHistory" class="flex items-center gap-2 text-primary/80 text-xs bg-black/20 px-3 py-1.5 rounded-full backdrop-blur-sm">
+        <i class="fas fa-circle-notch fa-spin"></i>
+        <span>加载历史记录...</span>
       </div>
 
-    <!-- 已经到顶提示 -->
-    <div v-else-if="!hasMoreHistory && messages.length > 0" class="flex justify-center items-center py-4">
-      <div class="text-gray-500 text-sm">
-        <span>已经到顶啦~</span>
+      <!-- 2. 点击加载 (还有更多消息但未触发自动加载时显示) -->
+      <button
+          v-else-if="hasMoreHistory"
+          class="flex items-center gap-2 text-gray-500 hover:text-primary text-xs bg-black/10 hover:bg-white/10 px-3 py-1.5 rounded-full transition-all duration-200 cursor-pointer"
+          @click="$emit('load-more')"
+      >
+        <i class="fas fa-history"></i>
+        <span>点击加载历史消息</span>
+      </button>
+
+      <!-- 3. 已经到顶 -->
+      <div v-else-if="messages.length > 0" class="flex items-center gap-2 text-gray-600 text-[10px] opacity-50">
+        <span class="w-8 h-px bg-gray-700"></span>
+        <span>已经到顶了</span>
+        <span class="w-8 h-px bg-gray-700"></span>
       </div>
     </div>
 
@@ -36,7 +48,7 @@
           :color="msg.isSelf ? generateColor(currentUser.id) : target.color"
           size="sm"
           rounded="lg"
-        class="cursor-pointer hover:opacity-80 transition self-start mt-1"
+          class="cursor-pointer hover:opacity-80 transition self-start mt-1 shadow-md"
           @click="$emit('avatar-click', msg.isSelf ? currentUser : target)"
       />
 
@@ -109,3 +121,19 @@ defineExpose({
 })
 </script>
 
+<style scoped>
+/* 隐藏滚动条但保留功能 */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 4px;
+}
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: transparent;
+}
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+}
+.overflow-y-auto:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+</style>

src/views/chat/ChatView.vue

@@ -220,13 +220,8 @@
         <!-- 好友通知视图 -->
         <FriendNotifyView v-else-if="contactStore.leftPanelMode === 'friend-notify'" />
 
-        <!-- 群通知视图（预留） -->
-        <div v-else-if="contactStore.leftPanelMode === 'group-notify'" class="flex-1 flex items-center justify-center text-gray-400">
-          <div class="text-center">
-            <i class="fas fa-users text-6xl mb-4 opacity-50"></i>
-            <p class="text-sm">群通知功能开发中</p>
-          </div>
-        </div>
+        <!-- 群通知视图 -->
+        <GroupNotifyView v-else-if="contactStore.leftPanelMode === 'group-notify'" />
       </div>
     </div>
     <ContextMenu />
@@ -280,6 +275,7 @@ import ContactView from '@/views/contact/ContactView.vue'
 import ContactCircle from '@/views/contact/ContactCircle.vue'
 import ContactDetailCard from '@/views/contact/ContactDetailCard.vue'
 import FriendNotifyView from '@/views/contact/FriendNotifyView.vue'
+import GroupNotifyView from '@/views/contact/GroupNotifyView.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()

src/views/contact/GroupNotifyView.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex-1 flex flex-col bg-panel h-full">
+    <!-- 头部 -->
+    <div class="p-6 border-b border-gray-800/50 flex justify-between items-center">
+      <h2 class="text-xl font-bold text-white">群通知</h2>
+      <button class="text-gray-400 hover:text-white transition" title="刷新">
+        <i class="fas fa-sync-alt"></i>
+      </button>
+    </div>
+
+    <!-- 列表区域 -->
+    <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
+      <!-- 空状态 -->
+      <div class="text-center py-20 text-gray-600">
+        <i class="fas fa-users-slash text-5xl mb-4 opacity-50"></i>
+        <p class="text-sm">暂无群通知</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 暂时保留为空，后续在此处对接群通知 API
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { @apply bg-gray-700 rounded-full; }
+</style>