72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const statMap = new Map([
|
|
['approve', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
|
|
['true', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
|
|
['pass', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
|
|
['pass', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
|
|
['reject', { state: 'reject', icon: 'gt-plane-Fail', color: 'var(--color-danger,#F2050D)' }] // 叉
|
|
// ['optional', { state: 'optional', icon: '' }] // 未操作状态 空
|
|
]);
|
|
|
|
// 审查，审视 对钩列表
|
|
defineOptions({ name: 'GuardiansLs' });
|
|
import { pickNickName } from '@/utils';
|
|
interface IItem {
|
|
username: string;
|
|
nick_name?: string;
|
|
nickname?: string;
|
|
disabled?: boolean;
|
|
state: 'approve' | 'pass' | 'reject' ;
|
|
};
|
|
|
|
withDefaults(defineProps<{
|
|
data: IItem[];
|
|
}>(), {
|
|
data() { return []; }
|
|
});
|
|
defineEmits<{
|
|
'agree': [IItem];
|
|
'reject': [IItem];
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<ul class="g-guardians-ls">
|
|
<li v-for="(item, index) in data" :key="item.id + index" class="g-guardians-ls-item"
|
|
:class="{ disabled: item.disabled }">
|
|
<g-avatar :width="18" :height="18" style="vertical-align: middle;" :name="pickNickName(item)" :src="item.avatar || item.avatar_url" />
|
|
<span class="username">
|
|
<GLink :to="{ name: 'homepage', params: { namespace: item.username } }">{{ pickNickName(item) }}</GLink>
|
|
</span>
|
|
<GIcon v-if="statMap.get(item.state)" :name="statMap.get(item.state).icon" :color="statMap.get(item.state).color"></GIcon>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.g-guardians-ls {
|
|
@apply text-ellipsis overflow-hidden whitespace-nowrap flex flex-col gap-[8px];
|
|
|
|
&-item {
|
|
@apply flex leading-[18px] items-center align-middle gap-[8px] overflow-hidden text-ellipsis;
|
|
|
|
.username {
|
|
@apply overflow-hidden text-ellipsis flex-1;
|
|
}
|
|
|
|
.icon {
|
|
min-width: 1em;
|
|
// cursor: pointer;
|
|
}
|
|
|
|
.disabled {
|
|
filter: opacity(60%);
|
|
// @apply cursor-not-allowed;
|
|
|
|
// .icon {
|
|
// @apply cursor-not-allowed;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</style>
|