Add: 用户头像右下角添加绿色在线状态圆点

src/views/MeetPandaFirstPageView.vue

@@ -7,7 +7,10 @@
     <div class="main-content">
       <div class="user-avatars-section">
         <div v-for="user in topUsers" :key="user.id" class="user-avatar-item">
-          <img :src="user.avatar" :alt="user.name" class="top-user-avatar" />
+          <div class="avatar-wrapper">
+            <img :src="user.avatar" :alt="user.name" class="top-user-avatar" />
+            <div class="online-indicator"></div>
+          </div>
           <div class="top-user-nickname">{{ user.nickname }}</div>
         </div>
       </div>
@@ -285,6 +288,12 @@ const showComments = (dynamic) => {
   gap: 8px;
 }
 
+.avatar-wrapper {
+  position: relative;
+  width: 60px;
+  height: 60px;
+}
+
 .top-user-avatar {
   width: 60px;
   height: 60px;
@@ -293,6 +302,17 @@ const showComments = (dynamic) => {
   border: 2px solid #42b883;
 }
 
+.online-indicator {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+  background-color: #42b883;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+
 .top-user-nickname {
   font-size: 14px;
   font-weight: 600;