From 93eb6b470773bc49ea6e1a9d4cbd914eb95d525b Mon Sep 17 00:00:00 2001 From: lrj <owen.stl@gmail.com> Date: 星期二, 30 九月 2025 17:38:04 +0800 Subject: [PATCH] feat: 完善比赛晋级功能并清理测试文件 --- web/src/components/PlayerInfoCard.vue | 40 +++++++++++++++++++++++++++++++++++++--- 1 files changed, 37 insertions(+), 3 deletions(-) diff --git a/web/src/components/PlayerInfoCard.vue b/web/src/components/PlayerInfoCard.vue index 88f82e4..8e9765d 100644 --- a/web/src/components/PlayerInfoCard.vue +++ b/web/src/components/PlayerInfoCard.vue @@ -9,6 +9,8 @@ :size="80" :src="playerInfo.avatarUrl" :style="{ backgroundColor: avatarBgColor }" + class="clickable-avatar" + @click="handleAvatarClick" > {{ playerInfo.name ? playerInfo.name.charAt(0) : '?' }} </el-avatar> @@ -35,13 +37,35 @@ <p>{{ playerInfo.description }}</p> </div> </div> + + <!-- 澶村儚棰勮瀵硅瘽妗� --> + <el-dialog + v-model="previewVisible" + title="澶村儚棰勮" + width="500px" + :show-close="true" + center + > + <div class="avatar-preview-container"> + <img + v-if="playerInfo.avatarUrl" + :src="playerInfo.avatarUrl" + class="preview-image" + alt="澶村儚棰勮" + /> + <div v-else class="no-avatar"> + <el-icon size="80"><Picture /></el-icon> + <p>鏆傛棤澶村儚</p> + </div> + </div> + </el-dialog> </div> </template> <script setup> -import { computed } from 'vue' -import { ElAvatar, ElIcon } from 'element-plus' -import { Phone } from '@element-plus/icons-vue' +import { computed, ref } from 'vue' +import { ElAvatar, ElIcon, ElDialog } from 'element-plus' +import { Phone, Picture } from '@element-plus/icons-vue' const props = defineProps({ playerInfo: { @@ -56,6 +80,16 @@ } }) +// 鍝嶅簲寮忔暟鎹� +const previewVisible = ref(false) + +// 澶村儚鐐瑰嚮澶勭悊 +const handleAvatarClick = () => { + if (props.playerInfo.avatarUrl) { + previewVisible.value = true + } +} + // 鏍规嵁濮撳悕鐢熸垚澶村儚鑳屾櫙鑹� const avatarBgColor = computed(() => { if (!props.playerInfo.name) return '#409EFF' -- Gitblit v1.8.0