style: 修复名称过长挤压其他内容的问题

src/views/Agency/AgencyCenterView.vue

@@ -50,15 +50,29 @@
         <div style="display: flex; align-items: center; margin-bottom: 12px">
           <div class="avatar">
             <img
-              v-if="userInfo.userAvatar"
+              :src="userInfo.userAvatar || ''"
-              :src="userInfo.userAvatar"
               :alt="userInfo.name"
-              @error="handleImageError"
+              style="
+                display: block;
+                object-fit: cover;
+                width: 100%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+              "
+              @error="defaultAvatarUrl"
             />
-            <span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
           </div>
-          <div style="flex: 1">
+          <div style="min-width: 0; flex: 1">
-            <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+            <div
+              style="
+                margin-bottom: 4px;
+                font-weight: 600;
+                color: #333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              "
+            >
               {{ userInfo.userNickname || userInfo.name }}
             </div>
             <div style="margin: 0; font-size: 14px; color: #666">
@@ -380,6 +394,12 @@ const underlineStyle = computed(() => {
   }
 })
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 // 获取最新成员工作数据和账单数据
 const fetchMemberWorkData = async () => {
   try {
@@ -574,16 +594,15 @@ const fetchTeamBillData = async () => {
   }
 }
 
-const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
+const { userInfo, salaryInfo, taskInfo } = usePageInitializationWithConfig('AGENCY_CENTER', {
-  usePageInitializationWithConfig('AGENCY_CENTER', {
+  needsTeamInfo: true,
-    needsTeamInfo: true,
+  forceRefresh: true, // 强制刷新
-    forceRefresh: true, // 强制刷新
+  onDataLoaded: () => {
-    onDataLoaded: () => {
+    fetchTeamMemberCount()
-      fetchTeamMemberCount()
+    fetchTeamBillData() // 获取团队账单数据
-      fetchTeamBillData() // 获取团队账单数据
+    fetchMemberWorkData() // 获取最新成员工作数据
-      fetchMemberWorkData() // 获取最新成员工作数据
+  },
-    },
+})
-  })
 
 onMounted(() => {
   underlineStyle.value // 触发计算属性更新
@@ -639,17 +658,10 @@ onMounted(() => {
 .avatar {
   width: 50px;
   height: 50px;
-  border-radius: 25px;
-  background-color: #8b5cf6;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 20px;
-  font-weight: 600;
   margin-right: 12px;
-  overflow: hidden;
-  position: relative;
 }
 
 .avatar img {
@@ -665,23 +677,6 @@ onMounted(() => {
   font-weight: 600;
 }
 
-.user-details {
-  flex: 1;
-}
-
-.user-details h3 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.user-details p {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
 .notification-btn {
   width: 32px;
   height: 32px;
@@ -1103,10 +1098,6 @@ onMounted(() => {
   margin-left: 12px;
 }
 
-[dir='rtl'] .user-details {
-  text-align: right;
-}
-
 [dir='rtl'] .notification-btn {
   margin-left: 0;
   margin-right: 12px;

src/views/BDCenter/availableIncome.vue

@@ -163,32 +163,40 @@
               <!-- 头像 -->
               <div
                 style="
-                  position: relative;
                   width: 50px;
                   height: 50px;
-                  border-radius: 25px;
-                  background-color: #8b5cf6;
-                  color: white;
                   margin-right: 12px;
-                  overflow: hidden;
-                  font-size: 20px;
-                  font-weight: 600;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                 "
               >
                 <img
-                  v-if="selectedPayee.avatar"
+                  :src="selectedPayee.avatar || ''"
-                  :src="selectedPayee.avatar"
                   :alt="selectedPayee.name"
-                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%"
+                  style="
+                    display: block;
+                    object-fit: cover;
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                  "
+                  @error="defaultAvatarUrl"
                 />
-                <span v-else>{{ selectedPayee.name.charAt(0) }}</span>
               </div>
               <!-- 个人信息 -->
-              <div style="flex: 1">
+              <div style="flex: 1; min-width: 0">
-                <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+                <div
+                  style="
+                    margin: 0 0 4px 0;
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: #333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
                   {{ selectedPayee.name }}
                 </div>
                 <div style="margin: 0; font-size: 14px; color: #666">
@@ -788,6 +796,12 @@ const maskLayerShow = computed(() => {
 
 const usedBankCard = ref(null) //正在使用的银行卡
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 const closedPopup = () => {
   exchangeTipShow.value = false
   cashOutTipShow.value = false

src/views/BDCenter/inviteAgency.vue

@@ -129,42 +129,44 @@
           <!-- 用户信息 -->
           <div style="font-weight: 600">{{ t('information') }}:</div>
           <div style="display: flex; align-items: center; justify-content: space-between">
-            <div style="display: flex; align-items: center; flex: 1">
+            <div style="display: flex; align-items: center; flex: 1; min-width: 0">
               <div
                 style="
                   width: 50px;
                   aspect-ratio: 1/1;
-                  border-radius: 25px;
-                  background-color: #f59e0b;
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  color: white;
-                  font-size: 18px;
-                  font-weight: 600;
                   margin-right: 12px;
-                  overflow: hidden;
-                  position: relative;
                 "
               >
                 <img
-                  v-if="user.userProfile.userAvatar"
+                  :src="user.userProfile.userAvatar || ''"
-                  :src="user.userProfile.userAvatar"
                   :alt="user.userProfile.userNickname"
-                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
+                  style="
-                  @error="(e) => (e.target.style.display = 'none')"
+                    display: block;
+                    object-fit: cover;
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                  "
+                  @error="defaultAvatarUrl"
                 />
-                <span
-                  v-if="!user.userProfile.userAvatar"
-                  style="color: white; font-size: 18px; font-weight: 600"
-                  >{{ user.userProfile.userNickname.charAt(0) }}</span
-                >
               </div>
-              <div>
+              <div style="min-width: 0; flex: 1">
-                <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+                <div
+                  style="
+                    margin-bottom: 4px;
+                    font-weight: 700;
+                    color: #333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
                   {{ user.userProfile.userNickname }}
                 </div>
-                <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 500">
                   ID: {{ user.userProfile.account }}
                 </div>
               </div>
@@ -224,6 +226,12 @@ const searchResults = ref([]) //搜索结果
 const disInvite = ref(true) //不可邀请
 const selectedUser = ref({}) //选中的用户
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 //展示的用户列表
 const showUserList = computed(() => {
   if (searchQuery.value) {

src/views/RechargeAgency/SearchUser.vue

@@ -71,16 +71,29 @@
           <div class="user-info">
             <div class="user-avatar">
               <img
-                v-if="user.userAvatar"
+                :src="user.userAvatar || ''"
-                :src="user.userAvatar"
                 :alt="user.name"
-                class="avatar-image"
+                style="
-                @error="(e) => (e.target.style.display = 'none')"
+                  display: block;
+                  object-fit: cover;
+                  width: 100%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                "
+                @error="defaultAvatarUrl"
               />
-              <span v-if="!user.userAvatar" class="avatar-text">{{ user.name.charAt(0) }}</span>
             </div>
-            <div class="user-details">
+            <div style="min-width: 0; flex: 1">
-              <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+              <div
+                style="
+                  margin-bottom: 4px;
+                  font-weight: 700;
+                  color: #333;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+              >
                 {{ user.name }}
               </div>
               <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
@@ -143,6 +156,12 @@ const isSearching = ref(false)
 const hasSearched = ref(false)
 const selectedUser = ref(null)
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 // Computed properties
 const hasValidSelection = computed(() => {
   return selectedUser.value !== null
@@ -384,32 +403,20 @@ input::placeholder {
 }
 
 .user-info {
+  flex: 1;
+  min-width: 0;
+
   display: flex;
   align-items: center;
-  flex: 1;
 }
 
 .user-avatar {
   width: 50px;
   height: 50px;
-  border-radius: 25px;
-  background-color: #f59e0b;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
   margin-right: 12px;
-  overflow: hidden;
-  position: relative;
-}
-
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 25px;
 }
 
 .avatar-text {

src/views/RechargeAgency/index.vue

@@ -48,7 +48,13 @@
             <img
               :src="userInfo.userAvatar || ''"
               alt=""
-              class="avatar-image"
+              style="
+                display: block;
+                object-fit: cover;
+                width: 100%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+              "
               @error="defaultAvatarUrl"
             />
           </div>
@@ -78,7 +84,7 @@
 
       <!-- 用户搜索部分 -->
       <div class="user-section">
-        <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
+        <div style="margin-bottom: 12px; font-weight: 600; color: #333">
           {{ t('user') }}
         </div>
         <!-- 有用户 -->
@@ -88,12 +94,20 @@
               <img
                 :src="selectedUser.userAvatar || ''"
                 alt=""
-                class="avatar-image"
+                style="
+                  display: block;
+                  object-fit: cover;
+                  width: 100%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                "
                 @error="defaultAvatarUrl"
               />
             </div>
             <div class="user-details">
-              <div class="user-name">{{ selectedUser.name }}</div>
+              <div class="user-name">
+                {{ selectedUser.name }}
+              </div>
               <div class="user-id">
                 <span style="display: flex; align-items: center">
                   <span>ID</span>
@@ -114,7 +128,7 @@
 
         <!-- 充值部分 -->
         <div v-if="selectedUser.id" style="margin-top: 12px">
-          <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
+          <div style="margin-bottom: 12px; font-weight: 600; color: #333">
             {{ t('recharge') }}
           </div>
           <!-- 输入金额 -->
@@ -130,6 +144,7 @@
             <input
               v-model="rechargeAmount"
               type="number"
+              min="1"
               :placeholder="t('enter_recharge_amount')"
               class="amount-input"
             />
@@ -378,6 +393,8 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
 }
 
 .user-info {
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   margin-bottom: 12px;
@@ -390,32 +407,22 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
   margin-right: 12px;
 }
 
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 25px;
-}
-
-.avatar-text {
-  color: white;
-  font-size: 20px;
-  font-weight: 600;
-}
-
 .user-details {
+  min-width: 0;
   flex: 1;
 }
 
 .user-details h3 {
   margin-bottom: 4px;
-  font-size: 16px;
   font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .user-details p {
   color: rgba(0, 0, 0, 0.4);
-  font-size: 14px;
+  font-size: 0.9em;
   font-weight: 500;
 }
 
@@ -424,7 +431,6 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
   height: 32px;
   border: none;
   background: none;
-  font-size: 16px;
   cursor: pointer;
 }
 
@@ -436,7 +442,7 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
 .tag {
   padding: 4px 12px;
   border-radius: 16px;
-  font-size: 12px;
+  font-size: 0.8em;
   font-weight: 600;
 }
 
@@ -445,44 +451,6 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
   color: #d97706;
 }
 
-/* 金币部分 */
-.coins-section {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.coins-section h3 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.coins-display {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.coin-icon {
-  font-size: 24px;
-}
-
-.coins-amount {
-  font-size: 20px;
-  font-weight: 600;
-  color: #f59e0b;
-}
-
-.coins-loading {
-  font-size: 16px;
-  color: #9ca3af;
-  font-style: italic;
-}
-
 /* 用户搜索部分 */
 .user-section {
   background-color: white;
@@ -510,7 +478,6 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
 .user-avatar {
   width: 40px;
   height: 40px;
-  border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -518,17 +485,21 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
 }
 
 .selected-user .user-details {
+  min-width: 0;
   flex: 1;
 }
 
 .user-name {
-  font-size: 14px;
+  font-size: 0.9em;
   font-weight: 700;
   margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .user-id {
-  font-size: 12px;
+  font-size: 0.8em;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.4);
 }
@@ -568,14 +539,14 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
 
 .search-placeholder span {
   color: #666;
-  font-size: 14px;
+  font-size: 0.9em;
   font-weight: 500;
 }
 
 .amount-input {
   width: 100%;
   border: none;
-  font-size: 14px;
+  font-size: 0.9em;
   box-sizing: border-box;
 }
 
@@ -584,7 +555,7 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
 }
 
 .amount-input::placeholder {
-  font-size: 12px;
+  font-size: 0.7em;
   color: rgba(0, 0, 0, 0.4);
   font-weight: 500;
 }
@@ -594,7 +565,7 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 12px;
+  font-size: 0.8em;
   color: #666;
 }
 
@@ -605,7 +576,6 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
   background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
   color: white;
   border: none;
-  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;