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

2025-11-19 12:03:57 +08:00 · 2025-11-19 12:03:57 +08:00 · ec8be9ee95
commit ec8be9ee95
parent 41727d2e6b
5 changed files with 157 additions and 167 deletions
--- a/src/views/Agency/AgencyCenterView.vue
+++ b/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="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+          <div style="min-width: 0; flex: 1">
+            <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 } =
-  usePageInitializationWithConfig('AGENCY_CENTER', {
-    needsTeamInfo: true,
-    forceRefresh: true, // 强制刷新
-    onDataLoaded: () => {
-      fetchTeamMemberCount()
-      fetchTeamBillData() // 获取团队账单数据
-      fetchMemberWorkData() // 获取最新成员工作数据
-    },
-  })
+const { userInfo, salaryInfo, taskInfo } = usePageInitializationWithConfig('AGENCY_CENTER', {
+  needsTeamInfo: true,
+  forceRefresh: true, // 强制刷新
+  onDataLoaded: () => {
+    fetchTeamMemberCount()
+    fetchTeamBillData() // 获取团队账单数据
+    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;
--- a/src/views/BDCenter/availableIncome.vue
+++ b/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="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+              <div style="flex: 1; min-width: 0">
+                <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
--- a/src/views/BDCenter/inviteAgency.vue
+++ b/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"
-                  @error="(e) => (e.target.style.display = 'none')"
+                  style="
+                    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="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+              <div style="min-width: 0; flex: 1">
+                <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) {
--- a/src/views/RechargeAgency/SearchUser.vue
+++ b/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"
-                @error="(e) => (e.target.style.display = 'none')"
+                style="
+                  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="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+            <div style="min-width: 0; flex: 1">
+              <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 {
--- a/src/views/RechargeAgency/index.vue
+++ b/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;