88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
|
<template>
|
|||
|
|
<span class="username-display">
|
|||
|
|
<!-- 加载中状态 -->
|
|||
|
|
<template v-if="isLoading">
|
|||
|
|
<span class="loading-placeholder">加载中...</span>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 已加载完成 -->
|
|||
|
|
<template v-else>
|
|||
|
|
<!-- 存在用户信息 -->
|
|||
|
|
<span v-if="userInfo">{{ userInfo.nickName }}</span>
|
|||
|
|
|
|||
|
|
<!-- 不存在用户信息 -->
|
|||
|
|
<span v-else class="unknown-user">
|
|||
|
|
{{ userId ? `未知用户(${userId})` : '未指定用户' }}
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState, mapActions } from 'vuex'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'UsernameDisplay',
|
|||
|
|
props: {
|
|||
|
|
// 需要展示的用户ID
|
|||
|
|
userId: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
// 是否自动加载用户数据（默认自动加载）
|
|||
|
|
autoLoad: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState({
|
|||
|
|
userMap: state => state.userMap,
|
|||
|
|
userList: state => state.userList
|
|||
|
|
}),
|
|||
|
|
// 获取当前用户信息
|
|||
|
|
userInfo() {
|
|||
|
|
if (!this.userId) return null
|
|||
|
|
return this.userMap[this.userId]
|
|||
|
|
},
|
|||
|
|
// 判断是否处于加载中（用户列表为空且需要加载时）
|
|||
|
|
isLoading() {
|
|||
|
|
return this.autoLoad && this.userList.length === 0 && this.userId !== null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapActions(['setUser'])
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 自动加载用户数据（如果未加载且需要加载）
|
|||
|
|
if (this.autoLoad && this.userList.length === 0) {
|
|||
|
|
this.setUser()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 当userId变化时，如果需要自动加载且数据未加载，重新加载
|
|||
|
|
userId(newVal) {
|
|||
|
|
if (this.autoLoad && newVal !== null && this.userList.length === 0) {
|
|||
|
|
this.setUser()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.username-display {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unknown-user {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
</style>
|