44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<!-- Author: fruit.com.cn -->
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
/**
|
|
* 后台各列表共用的「用户」单元格。
|
|
*
|
|
* 口径：已登录显示昵称 + `UID xxx`；未登录显示「游客」标签 + `设备 xxx`。
|
|
* 两行都带标签，避免一串随机字母看不出是什么。平台由独立的「系统」列展示。
|
|
*/
|
|
const props = defineProps({
|
|
row: { type: Object, required: true }
|
|
})
|
|
|
|
const isGuest = computed(() => props.row?.userId == null)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-user-meta">
|
|
<template v-if="isGuest">
|
|
<el-tag type="info" size="small">游客</el-tag>
|
|
<span class="app-user-uid app-user-device" :title="row.deviceId || ''">
|
|
设备: {{ row.deviceId || '—' }}
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="app-user-name" :title="row.nickname || ''">
|
|
昵称: {{ row.nickname || '未设置昵称' }}
|
|
</span>
|
|
<span class="app-user-uid">UID: {{ row.uid || `#${row.userId}` }}</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-user-device {
|
|
max-width: 150px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|