src/views/ai/dashboard/components/message/HistoryMessageList.vue

@@ -43,7 +43,7 @@
          <div>
            <el-text class="time">{{ formatDate(item.createTime) }}</el-text>
          </div>
          <div class="right-text-container">
          <div class="right-text-container question" @click="gotoManual(item)">
            <div class="right-text">{{ item.content }}</div>
          </div>
          <div class="right-btns">
@@ -71,15 +71,12 @@
import { ArrowDownBold } from '@element-plus/icons-vue'
import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
import { ChatConversationVO } from '@/api/ai/chat/conversation'
import { useUserStore } from '@/store/modules/user'
import userAvatarDefaultImg from '@/assets/ai/zhuanlu/user.png'
import roleAvatarDefaultImg from '@/assets/ai/zhuanlu/assistant.png'

const dialogVisible = ref(false) // 弹窗的是否展示

const message = useMessage() // 消息弹窗
const { copy } = useClipboard() // 初始化 copy 到粘贴板
const userStore = useUserStore()

// 判断“消息列表”滚动的位置(用于判断是否需要滚动到消息最下方)
const messageContainer: any = ref(null)
@@ -87,6 +84,7 @@

const userAvatar = computed(() => userAvatarDefaultImg)
const roleAvatar = computed(() => props.conversation.roleAvatar ?? roleAvatarDefaultImg)


// 定义 props
const props = defineProps({
@@ -97,7 +95,9 @@
  list: {
    type: Array as PropType<ChatMessageVO[]>,
    required: true
  }
  },

  gotoManualMethod: Function
})

const { list } = toRefs(props) // 消息列表
@@ -146,6 +146,12 @@

// ============ 处理消息操作 ==============

const gotoManual = async (item: ChatMessageVO) => {
  if(props.gotoManualMethod) {
    props.gotoManualMethod(item)
  }
}

/** 复制 */
const copyContent = async (content) => {
  await copy(content)
@@ -192,6 +198,11 @@
    flex-direction: column;
    text-align: left;
    margin: 0 15px;

    .question:hover {
      cursor: pointer;
      background: rgba(40, 139, 255, 0.3);
    }

    .time {
      text-align: left;
@@ -282,9 +293,15 @@
  bottom: 0;
  right: 50%;
  .el-button {
    background: rgba(255,215,0,0.2);
    border: solid 1px rgba(255,215,0,0.8);
    color: rgba(255,215,0,0.8);
    background: rgba(255,255,255,0.1);
    border: solid 1px rgba(255,215,0,0.6);
    color: rgba(255,215,0,0.5);
  }
  .el-button:hover {
    cursor: pointer;
    background-color: rgba(255,255,255,0.4);
    border: solid 2px rgba(255,215,0);
    color: rgba(255,215,0);
  }
}
</style>