style(代理中心的信息页): 处理名称过长的问题

src/views/MessageView.vue

@@ -9,31 +9,82 @@
       style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
     />
 
-    <div class="content">
+    <div style="padding: 16px; position: relative; z-index: 2">
       <div v-if="loading" class="loading-state">
         <div class="loading-spinner"></div>
         <p>{{ t('loading') }}...</p>
       </div>
 
-      <div v-else class="message-list">
+      <div v-else style="display: flex; flex-direction: column; gap: 12px">
-        <div v-for="message in messages" :key="message.id" class="message-item">
+        <div
-          <div class="user-info">
+          v-for="message in messages"
-            <div class="user-avatar">
+          :key="message.id"
-              <img v-if="message.avatar" :src="message.avatar" :alt="message.name" />
+          style="
+            background-color: white;
+            padding: 12px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <div class="user-info" style="width: calc(100% - 110px)">
+            <div
+              class="user-avatar"
+              style="
+                width: 35px;
+                border-radius: 20px;
+                background-color: rgba(0, 0, 0, 0.1);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-weight: 600;
+                overflow: hidden;
+              "
+            >
+              <img
+                v-if="message.avatar"
+                :src="message.avatar"
+                :alt="message.name"
+                style="display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover"
+              />
               <div v-else>{{ message.name?.charAt(0) || 'U' }}</div>
             </div>
-            <div class="user-details">
+            <div style="width: 70%">
-              <h4>{{ message.name || t('unknown_user') }}</h4>
+              <h4
-              <p>
+                style="
-                <span style="display: flex; align-items: center">
+                  margin-bottom: 4px;
-                  <span>ID</span>
+                  font-weight: 700;
-                  <span style="margin: 0 2px">:</span>
+                  overflow: hidden;
-                  <span>{{ message.account || message.userId }}</span>
+                  text-overflow: ellipsis;
-                </span>
+                  white-space: nowrap;
-              </p>
+                "
+              >
+                {{ message.name || t('unknown_user') }}aaaaaaaaaaaaaaaaaaaaaa
+              </h4>
+              <div>
+                <div style="display: flex; align-items: center">
+                  <p style="font-size: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID</p>
+                  <p
+                    style="
+                      font-size: 0.8em;
+                      font-weight: 500;
+                      color: rgba(0, 0, 0, 0.4);
+                      margin: 0 2px;
+                    "
+                  >
+                    :
+                  </p>
+                  <p style="font-size: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+                    {{ message.account || message.userId }}
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="action-buttons">
+          <div class="action-buttons" style="display: flex; gap: 4px">
             <button class="agree-btn" @click="handleAgree(message)">{{ t('agree') }}</button>
             <button class="refuse-btn" @click="handleRefuse(message)">{{ t('refuse') }}</button>
           </div>
@@ -180,12 +231,6 @@ onMounted(() => {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
-.content {
-  padding: 16px;
-  position: relative;
-  z-index: 2;
-}
-
 /* 加载状态 */
 .loading-state {
   display: flex;
@@ -215,83 +260,20 @@ onMounted(() => {
   }
 }
 
-/* 消息列表 */
-.message-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.message-item {
-  background-color: white;
-  padding: 12px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .user-info {
   display: flex;
   align-items: center;
-  flex: 1;
 }
 
 .user-avatar {
-  width: 40px;
+  margin-right: 4px;
-  height: 40px;
-  border-radius: 20px;
-  background-color: rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  margin-right: 12px;
-  overflow: hidden;
-}
-
-.user-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.user-details h4 {
-  margin-bottom: 4px;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.user-details p {
-  font-size: 14px;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.country-info {
-  font-size: 12px !important;
-  color: #8b5cf6 !important;
-}
-
-.apply-time {
-  font-size: 12px !important;
-  color: #999 !important;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
 }
 
 .agree-btn,
 .refuse-btn {
-  padding: 4px 16px;
+  padding: 4px 8px;
   border: none;
   border-radius: 20px;
-  font-size: 12px;
   font-weight: 600;
 }
 
@@ -352,7 +334,7 @@ onMounted(() => {
 /* RTL支持 */
 [dir='rtl'] .user-avatar {
   margin-right: 0;
-  margin-left: 12px;
+  margin-left: 4px;
 }
 
 [dir='rtl'] .user-info {