50 lines
960 B
Vue
50 lines
960 B
Vue
<script setup lang="ts">
|
|
import type { Message } from '@/types/business/message'
|
|
import MessageItem from './MessageItem.vue'
|
|
|
|
interface Props {
|
|
messages: Message[]
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const emit = defineEmits<{ view: [id: string] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="message-list">
|
|
<template v-if="messages.length > 0">
|
|
<MessageItem
|
|
v-for="item in messages"
|
|
:key="item.id"
|
|
:message="item"
|
|
@view="emit('view', $event)"
|
|
/>
|
|
</template>
|
|
<p v-else class="message-list__empty text-secondary">
|
|
暂无消息
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.message-list {
|
|
.flex(column, flex-start, stretch);
|
|
gap: 0;
|
|
padding: 0;
|
|
border-radius: @radius-base;
|
|
background: @white;
|
|
overflow: hidden;
|
|
|
|
.message-item + .message-item {
|
|
border-top: 1px solid @project-divider;
|
|
}
|
|
|
|
&__empty {
|
|
padding: 40px 0;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
</style>
|