feat 搭建架构骨架

src/views/message/cpns/MessageList.vue

@@ -0,0 +1,44 @@
+<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>