feat: 聊天页面

src/views/asistant/components/NoticeItem.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    class="chat-message"
+    :class="{ 'user-message': value.userId === '1', 'ai-message': value.userId !== '1' }"
+  >
+    <!-- AI消息显示头像 -->
+    <div v-if="value.userId !== '1'" class="chat-avatar">
+      <img :src="value.thumb" alt="AI Avatar" />
+    </div>
+
+    <!-- 消息内容 -->
+    <div class="message-content">
+      <div class="message-text">
+        {{ value.content }}
+      </div>
+      <!-- AI消息显示操作栏 -->
+      <div v-if="value.userId !== '1'" class="message-actions flex">
+        <SvgIcon
+          v-for="item in actionList"
+          :key="item.value"
+          :name="item.icon"
+          size="39"
+          @click.stop="handleClickAction(item.value)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
+
+// 定义操作项类型
+interface ActionItem {
+  value: string
+  icon: string
+}
+
+// 定义组件props类型
+interface NoticeItemProps {
+  value: ChatMessage
+}
+
+const props = defineProps<NoticeItemProps>()
+
+const handleClickAction = (value: string): void => {
+  console.log('click Action', value)
+}
+
+const actionList: ActionItem[] = [
+  {
+    value: 'thumbup',
+    icon: 'thumbup'
+  },
+  {
+    value: 'thumbdown',
+    icon: 'thumbdown'
+  },
+  {
+    value: 'refresh',
+    icon: 'refresh'
+  },
+  {
+    value: 'upload',
+    icon: 'upload'
+  },
+  {
+    value: 'more',
+    icon: 'more'
+  }
+]
+</script>
+
+<style lang="less" scoped>
+.chat-message {
+  display: flex;
+  margin-bottom: 16px;
+  align-items: flex-start;
+  .message-text {
+    font-size: 4.2rem;
+    font-family: 'robotoBold';
+    line-height: 121%;
+    font-weight: 400;
+    background-color: #efefef;
+    padding: 4.95rem 3.95rem;
+  }
+
+  &.user-message {
+    justify-content: flex-end;
+
+    .message-content {
+      align-items: flex-end;
+
+      .message-text {
+        border-radius: 2rem 2rem 0 2rem;
+      }
+    }
+  }
+
+  &.ai-message {
+    justify-content: flex-start;
+
+    .message-content {
+      align-items: flex-start;
+
+      .message-text {
+        color: #000;
+        border-radius: 0 2rem 2rem 2rem;
+      }
+    }
+  }
+}
+
+.chat-avatar {
+  width: 7.8rem;
+  height: 7.4rem;
+  border-radius: 50%;
+  margin-right: 1.88rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+.message-actions {
+  margin-top: 2.6rem;
+  color: #6b6b6b;
+  column-gap: 1.61rem;
+  .svg-icon {
+    cursor: pointer;
+  }
+}
+</style>