fix:修复已知问题

frontend/web/src/components/user/UserHoverCard.vue

@@ -0,0 +1,195 @@
+<template>
+  <teleport to="body">
+    <transition name="fade">
+      <div 
+        v-if="isVisible" 
+        class="im-hover-card"
+        :style="cardStyle"
+        @mouseenter="clearTimer"
+        @mouseleave="hide"
+      >
+        <div class="card-inner">
+          <div class="user-profile">
+            <div class="info-text">
+              <h4 class="nickname">{{ currentUser.name }}</h4>
+              <p class="detail-item">
+                <span class="label">微信号：</span>
+                <span class="value">{{ currentUser.id }}</span>
+              </p>
+              <p class="detail-item">
+                <span class="label">地　区：</span>
+                <span class="value">{{ currentUser.region || '未知' }}</span>
+              </p>
+            </div>
+            <img :src="currentUser.avatar" class="avatar-square" />
+          </div>
+
+          <div class="user-bio">
+            <p class="bio-text">{{ currentUser.bio || '暂无签名' }}</p>
+          </div>
+
+          <div class="card-footer">
+            <button class="action-btn primary" @click="onChat">发消息</button>
+            <button v-if="!currentUser.isFriend" class="action-btn secondary" @click="onAdd">添加好友</button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+
+const isVisible = ref(false);
+const currentUser = ref({});
+const cardStyle = reactive({
+  position: 'fixed',
+  top: '0px',
+  left: '0px'
+});
+
+let timer = null;
+
+const show = (el, data) => {
+  clearTimer();
+  currentUser.value = data;
+  
+  const rect = el.getBoundingClientRect();
+  // IM 习惯：通常在头像右侧或下方弹出
+  // 这里设置为在头像中心水平对齐，下方弹出
+  cardStyle.top = `${rect.bottom + 8}px`;
+  cardStyle.left = `${rect.left}px`;
+  
+  isVisible.value = true;
+};
+
+const hide = () => {
+  timer = setTimeout(() => {
+    isVisible.value = false;
+  }, 300);
+};
+
+const clearTimer = () => {
+  if (timer) clearTimeout(timer);
+};
+
+const onAdd = () => {
+  console.log('申请添加好友:', currentUser.value.id);
+  // 这里写你的逻辑
+};
+
+const onChat = () => {
+  console.log('跳转聊天窗口:', currentUser.value.id);
+  isVisible.value = false;
+};
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.im-hover-card {
+  z-index: 9999;
+  width: 280px;
+  background: #ffffff;
+  border-radius: 4px; /* IM 通常是小圆角或直角 */
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebeef5;
+  color: #333;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+.card-inner {
+  padding: 20px;
+}
+
+/* 头部布局：文字在左，头像在右（典型微信名片风） */
+.user-profile {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.nickname {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #000;
+}
+
+.detail-item {
+  margin: 4px 0;
+  font-size: 13px;
+  display: flex;
+}
+
+.detail-item .label {
+  color: #999;
+  width: 55px;
+}
+
+.detail-item .value {
+  color: #555;
+}
+
+.avatar-square {
+  width: 60px;
+  height: 60px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+/* 签名区 */
+.user-bio {
+  padding: 15px 0;
+  border-top: 1px solid #f2f2f2;
+  margin-bottom: 10px;
+}
+
+.bio-text {
+  margin: 0;
+  font-size: 13px;
+  color: #888;
+  line-height: 1.6;
+}
+
+/* 底部按钮：去掉花哨渐变，改用纯色或文字链接感 */
+.card-footer {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 10px;
+  border-top: 1px solid #f2f2f2;
+}
+
+.action-btn {
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 12px;
+  transition: color 0.2s;
+}
+
+.action-btn.primary {
+  color: #576b95; /* 经典的微信蓝/链接色 */
+}
+
+.action-btn.primary:hover {
+  color: #3e4d6d;
+}
+
+.action-btn.secondary {
+  color: #576b95;
+}
+
+/* 动画：简单的淡入 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>