Enhance: 加强附近用户板块显示

src/views/CityIntroductionView.vue

@@ -42,12 +42,35 @@
       <div class="nearby-users-section">
         <h2 class="section-title">附近的用户</h2>
         <div class="users-list">
-          <div v-for="user in nearbyUsers" :key="user.id" class="user-card">
+          <div v-for="user in nearbyUsers" :key="user.id" class="user-card" @click="viewUserProfile(user)">
+            <div class="user-avatar-container">
               <img :src="user.avatar" :alt="user.name" class="user-avatar" />
+              <span class="status-dot" :class="user.status"></span>
+            </div>
             <div class="user-info">
+              <div class="user-header">
                 <h4 class="user-name">{{ user.name }}</h4>
-              <p class="user-location">{{ user.location }}</p>
-              <span class="user-status" :class="user.status">{{ user.statusText }}</span>
+                <span class="user-level">{{ user.level }}</span>
+              </div>
+              <p class="user-location">📍 {{ user.location }}</p>
+              <div class="user-stats">
+                <span class="stat-item">
+                  <span class="stat-icon">👥</span>
+                  <span class="stat-value">{{ user.followers }}</span>
+                </span>
+                <span class="stat-item">
+                  <span class="stat-icon">❤️</span>
+                  <span class="stat-value">{{ user.likes }}</span>
+                </span>
+              </div>
+              <div class="user-actions">
+                <button class="follow-btn" @click.stop="followUser(user)">
+                  {{ user.isFollowing ? '已关注' : '+ 关注' }}
+                </button>
+                <button class="message-btn" @click.stop="sendMessage(user)">
+                  💬
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -147,7 +170,10 @@ const nearbyUsers = ref([
     avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
     location: '距离您 500m',
     status: 'online',
-    statusText: '在线'
+    level: 'Lv.5',
+    followers: 128,
+    likes: 456,
+    isFollowing: false
   },
   {
     id: 2,
@@ -155,7 +181,10 @@ const nearbyUsers = ref([
     avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
     location: '距离您 1.2km',
     status: 'traveling',
-    statusText: '旅行中'
+    level: 'Lv.8',
+    followers: 256,
+    likes: 892,
+    isFollowing: true
   },
   {
     id: 3,
@@ -163,7 +192,10 @@ const nearbyUsers = ref([
     avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
     location: '距离您 2.5km',
     status: 'offline',
-    statusText: '离线'
+    level: 'Lv.3',
+    followers: 64,
+    likes: 234,
+    isFollowing: false
   },
   {
     id: 4,
@@ -171,7 +203,32 @@ const nearbyUsers = ref([
     avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop',
     location: '距离您 3.8km',
     status: 'online',
-    statusText: '在线'
+    level: 'Lv.6',
+    followers: 189,
+    likes: 567,
+    isFollowing: false
+  },
+  {
+    id: 5,
+    name: '钱七',
+    avatar: 'https://images.unsplash.com/photo-1506794778202-c84b822d673?w=100&h=100&fit=crop',
+    location: '距离您 4.2km',
+    status: 'online',
+    level: 'Lv.7',
+    followers: 312,
+    likes: 723,
+    isFollowing: true
+  },
+  {
+    id: 6,
+    name: '孙八',
+    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffbb8115?w=100&h=100&fit=crop',
+    location: '距离您 5.5km',
+    status: 'traveling',
+    level: 'Lv.4',
+    followers: 98,
+    likes: 345,
+    isFollowing: false
   }
 ])
 
@@ -243,6 +300,19 @@ const foods = ref([
 const goBack = () => {
   router.back()
 }
+
+const viewUserProfile = (user) => {
+  console.log('查看用户资料：', user.name)
+}
+
+const followUser = (user) => {
+  user.isFollowing = !user.isFollowing
+  console.log(user.isFollowing ? '已关注' : '关注', user.name)
+}
+
+const sendMessage = (user) => {
+  console.log('发送消息给：', user.name)
+}
 </script>
 
 <style scoped>
@@ -405,53 +475,157 @@ const goBack = () => {
   padding: 12px;
   background-color: #f8f8f8;
   border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.user-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: white;
+}
+
+.user-avatar-container {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
 }
 
 .user-avatar {
-  width: 50px;
-  height: 50px;
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
   object-fit: cover;
+  border: 2px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.status-dot {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+
+.status-dot.online {
+  background-color: #4caf50;
+}
+
+.status-dot.traveling {
+  background-color: #2196f3;
+}
+
+.status-dot.offline {
+  background-color: #9e9e9e;
 }
 
 .user-info {
   flex: 1;
 }
 
+.user-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
 .user-name {
   font-size: 16px;
   font-weight: 600;
   color: #333;
-  margin: 0 0 4px 0;
+  margin: 0;
+}
+
+.user-level {
+  font-size: 12px;
+  color: #42b883;
+  background-color: #e8f5e9;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 500;
 }
 
 .user-location {
   font-size: 13px;
   color: #999;
-  margin: 0 0 4px 0;
+  margin: 0 0 8px 0;
 }
 
-.user-status {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
+.user-stats {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: #666;
+}
+
+.stat-icon {
+  font-size: 16px;
+}
+
+.stat-value {
+  font-weight: 600;
+  color: #333;
+}
+
+.user-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.follow-btn {
+  flex: 1;
+  padding: 6px 12px;
+  border: 1px solid #42b883;
+  background-color: white;
+  color: #42b883;
+  border-radius: 16px;
+  font-size: 13px;
   font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-.user-status.online {
-  background-color: #e8f5e9;
-  color: #4caf50;
+.follow-btn:hover {
+  background-color: #42b883;
+  color: white;
 }
 
-.user-status.traveling {
-  background-color: #e3f2fd;
-  color: #2196f3;
+.follow-btn.following {
+  background-color: #e0e0e0;
+  color: #999;
+  border-color: #e0e0e0;
 }
 
-.user-status.offline {
-  background-color: #f5f5f5;
-  color: #9e9e9e;
+.message-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e0e0e0;
+  background-color: white;
+  border-radius: 50%;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.message-btn:hover {
+  background-color: #42b883;
+  border-color: #42b883;
 }
 
 .dynamics-list {