feat:消息中心和案例库

src/pages/message-center/customer-service/components/ChatMessage.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { ChatMessage } from '@/types/customer-service'
+
+defineProps<{
+  message: ChatMessage
+}>()
+</script>
+
+<template>
+  <view
+    class="chat-message"
+    :class="`chat-message--${message.role}`"
+  >
+    <image
+      class="chat-message__avatar"
+      :src="message.avatar"
+      mode="aspectFill"
+    />
+
+    <view class="chat-message__body">
+      <text class="chat-message__nickname">
+        {{ message.nickname }}
+      </text>
+      <view
+        class="chat-message__bubble"
+        :class="`chat-message__bubble--${message.role}`"
+      >
+        <text class="chat-message__text">
+          {{ message.content }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.chat-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 32rpx;
+
+  &--user {
+    flex-direction: row-reverse;
+
+    .chat-message__body {
+      align-items: flex-end;
+    }
+
+    .chat-message__nickname {
+      text-align: right;
+    }
+  }
+
+  &--service {
+    flex-direction: row;
+
+    .chat-message__body {
+      align-items: flex-start;
+    }
+  }
+}
+
+.chat-message__avatar {
+  flex-shrink: 0;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: #fff7e6;
+}
+
+.chat-message__body {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 96rpx);
+  margin: 0 16rpx;
+}
+
+.chat-message__nickname {
+  margin-bottom: 8rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.chat-message__bubble {
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+
+  &--user {
+    background: $color-primary;
+  }
+
+  &--service {
+    background: #f2f3f5;
+  }
+}
+
+.chat-message__text {
+  font-size: 28rpx;
+  line-height: 1.5;
+  word-break: break-all;
+
+  .chat-message__bubble--user & {
+    color: #ffffff;
+  }
+
+  .chat-message__bubble--service & {
+    color: $color-text-primary;
+  }
+}
+</style>