jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-16 17:10:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: base avatar 重构

Browse Source
This commit is contained in:
tim
2025-09-24 00:43:57 +08:00
parent 779264623c
commit 6e4fbc3c42
3 changed files with 7 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend_nuxt/components/BaseUserAvatar.vue
View File

@@ -1,28 +1,19 @@
<template> <template>
<NuxtLink <NuxtLink
v-if="isLink"
:to="resolvedLink" :to="resolvedLink"
class="base-user-avatar" class="base-user-avatar"
:class="wrapperClass" :class="wrapperClass"
:style="wrapperStyle" :style="wrapperStyle"
v-bind="wrapperAttrs" v-bind="wrapperAttrs"
> >
<img :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" /> <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
</NuxtLink> </NuxtLink>
<div
v-else
class="base-user-avatar"
:class="wrapperClass"
:style="wrapperStyle"
v-bind="wrapperAttrs"
>
<img :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
</div>
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { useAttrs } from 'vue' import { useAttrs } from 'vue'
import BaseImage from './BaseImage.vue'
const DEFAULT_AVATAR = '/default-avatar.svg' const DEFAULT_AVATAR = '/default-avatar.svg'
@@ -76,8 +67,6 @@ const resolvedLink = computed(() => {
return null return null
}) })
const isLink = computed(() => !props.disableLink && Boolean(resolvedLink.value))
const altText = computed(() => props.alt || '用户头像') const altText = computed(() => props.alt || '用户头像')
const sizeStyle = computed(() => { const sizeStyle = computed(() => {

2
frontend_nuxt/components/UserList.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="user-list"> <div class="user-list">
<BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="inbox" /> <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="inbox" />
<div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)"> <div v-for="u in users" :key="u.id" class="user-item">
<BaseUserAvatar :src="u.avatar" :user-id="u.id" alt="avatar" class="user-avatar" /> <BaseUserAvatar :src="u.avatar" :user-id="u.id" alt="avatar" class="user-avatar" />
<div class="user-info"> <div class="user-info">
<div class="user-name">{{ u.username }}</div> <div class="user-name">{{ u.username }}</div>

18
frontend_nuxt/pages/index.vue
View File

@@ -85,20 +85,16 @@
</div> </div>
<div class="article-member-avatars-container"> <div class="article-member-avatars-container">
<NuxtLink <div v-for="member in article.members">
v-for="member in article.members"
:key="`${article.id}-${member.id}`"
class="article-member-avatar-item"
:to="`/users/${member.id}`"
>
<BaseUserAvatar <BaseUserAvatar
class="article-member-avatar-item-img" class="article-member-avatar-item-img"
:src="member.avatar" :src="member.avatar"
:user-id="member.id" :user-id="member.id"
alt="avatar" alt="avatar"
:disable-link="true" :disable-link="true"
:width="25"
/> />
</NuxtLink> </div>
</div> </div>
<div class="article-comments main-info-text"> <div class="article-comments main-info-text">
@@ -634,13 +630,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
margin-left: 20px; margin-left: 20px;
} }
.article-member-avatar-item {
width: 25px;
height: 25px;
border-radius: 50%;
overflow: hidden;
}
.article-member-avatar-item-img { .article-member-avatar-item-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -703,6 +692,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
margin-left: 0px; margin-left: 0px;
gap: 0px; gap: 0px;
} }
.article-main-container, .article-main-container,
.header-item.main-item { .header-item.main-item {
width: calc(70% - 20px); width: calc(70% - 20px);