feat 搭建架构骨架

src/views/service/cpns/ChatMessageItem.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { ChatMessage } from '@/types/business/service'
+import ChatFileCard from './ChatFileCard.vue'
+
+interface Props {
+  message: ChatMessage
+  unread?: boolean
+}
+
+withDefaults(defineProps<Props>(), { unread: false })
+
+const emit = defineEmits<{ download: [] }>()
+</script>
+
+<template>
+  <div
+    class="chat-message-item"
+    :class="`chat-message-item--${message.role}`"
+  >
+    <span v-if="message.role === 'assistant'" class="chat-message-item__avatar">服</span>
+
+    <div class="chat-message-item__main">
+      <div class="chat-message-item__bubble">
+        <span v-if="unread" class="chat-message-item__unread">未读</span>
+        <ChatFileCard
+          v-if="message.file"
+          :file="message.file"
+          @download="emit('download')"
+        />
+        <template v-else>{{ message.content }}</template>
+      </div>
+      <span class="chat-message-item__time text-secondary">{{ message.time }}</span>
+    </div>
+
+    <span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">王</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.chat-message-item {
+  .flex(row, flex-start);
+  gap: @spacing-sm;
+
+  &__avatar {
+    flex-shrink: 0;
+    .flex(row, center);
+    width: 36px;
+    height: 36px;
+    border-radius: @radius-round;
+    background: @primary-light;
+    color: @primary-color;
+    font-size: @font-size-base;
+    font-weight: 600;
+
+    &--user {
+      background: fade(@success-color, 15%);
+      color: @success-color;
+    }
+  }
+
+  &__main {
+    .flex(column, flex-start);
+    gap: @spacing-xs;
+    max-width: 70%;
+  }
+
+  &__bubble {
+    position: relative;
+    padding: @spacing-sm @spacing-base;
+    border-radius: @radius-base;
+    background: @white;
+    box-shadow: @shadow-base;
+    color: @text-color;
+    font-size: @font-size-base;
+    line-height: 1.7;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  &__time {
+    font-size: @font-size-sm;
+  }
+
+  &__unread {
+    position: absolute;
+    top: -8px;
+    right: -6px;
+    padding: 0 6px;
+    border-radius: @radius-round;
+    background: @danger-color;
+    color: @white;
+    font-size: @font-size-sm;
+    line-height: 16px;
+  }
+
+  &--user {
+    .flex(row, flex-end);
+
+    .chat-message-item__main {
+      align-items: flex-end;
+    }
+
+    .chat-message-item__bubble {
+      background: @primary-color;
+      color: @white;
+    }
+  }
+}
+</style>