45 lines
888 B
Vue
45 lines
888 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);
|
|
gap: @spacing-sm;
|
|
padding: @spacing-sm;
|
|
border-radius: @radius-lg;
|
|
background: @bg-color;
|
|
|
|
&__empty {
|
|
padding: @spacing-xxl 0;
|
|
text-align: center;
|
|
font-size: @font-size-base;
|
|
}
|
|
}
|
|
</style>
|