From e295922209fb87c6dcd68ea1560fd16c3e6d808c Mon Sep 17 00:00:00 2001
From: dongyukun <1208714201@qq.com>
Date: 星期五, 27 六月 2025 09:36:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/feature/ai'
---
src/views/ai/dashboard/components/suggest/ScheduleSuggestList.vue | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 307 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/dashboard/components/suggest/ScheduleSuggestList.vue b/src/views/ai/dashboard/components/suggest/ScheduleSuggestList.vue
new file mode 100644
index 0000000..b4ebf44
--- /dev/null
+++ b/src/views/ai/dashboard/components/suggest/ScheduleSuggestList.vue
@@ -0,0 +1,307 @@
+<template>
+ <div ref="messageContainer" class="h-100% overflow-y-auto relative">
+ <div class="chat-list" v-for="(item, index) in list" :key="index">
+ <!-- 靠左 message：system、assistant 类型 -->
+ <div class="left-message message-item" v-if="item.type !== 'user'">
+ <div class="avatar">
+ <el-avatar :src="roleAvatar" />
+ </div>
+ <div class="message">
+ <div>
+ <el-text class="time">{{ formatDate(item.createTime) }}</el-text>
+ </div>
+ <div v-if="item.thinkingFlag" class="left-text-container-thinking" ref="markdownViewRef">
+ <MarkdownView v-if="item.thinking" class="left-text thinking" :content="item.thinking" />
+ <MarkdownView v-else class="left-text thinking" :content="item.content" />
+ </div>
+ <div v-else-if="item.thinking" class="left-text-container-thinking" ref="markdownViewRef">
+ <MarkdownView class="left-text thinking" :content="item.thinking" />
+ </div>
+ <div v-else class="left-text-container-conclusion" ref="markdownViewRef">
+ <MarkdownView class="left-text" :content="item.content" />
+ </div>
+ <div class="left-text-container-conclusion" ref="markdownViewRef">
+ <MarkdownView class="left-text" :content="item.conclusion" />
+ </div>
+ <div class="right-btns">
+ <el-button class="btn-cus" link @click="copyContent(item.content)">
+ <img class="btn-image" src="@/assets/ai/zhuanlu/copy.png" />
+ </el-button>
+ <!-- 暂时不能删除，随意删除会影响首页echarts图表展示 -->
+<!-- <el-button v-if="item.id > 0" class="btn-cus" link @click="onDelete(item.id)">-->
+<!-- <img class="btn-image h-17px" src="@/assets/ai/zhuanlu/delete.png" />-->
+<!-- </el-button>-->
+ </div>
+ </div>
+ </div>
+ <!-- 靠右 message：user 类型 -->
+ <div class="left-message message-item" v-if="item.type === 'user'">
+ <div class="avatar">
+ <el-avatar :src="userAvatar" />
+ </div>
+ <div class="message">
+ <div>
+ <el-text class="time">{{ formatDate(item.createTime) }}</el-text>
+ </div>
+ <div class="right-text-container question" @click="gotoManual(item)">
+ <div class="right-text">{{ item.content }}</div>
+ </div>
+ <div class="right-btns">
+ <el-button class="btn-cus" link @click="copyContent(item.content)">
+ <img class="btn-image" src="@/assets/ai/zhuanlu/copy.png" />
+ </el-button>
+ <el-button class="btn-cus" link @click="onDelete(item.id)">
+ <img class="btn-image h-17px mr-12px" src="@/assets/ai/zhuanlu/delete.png" />
+ </el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 回到底部 -->
+ <div v-if="isScrolling" class="to-bottom" @click="handleGoBottom">
+ <el-button :icon="ArrowDownBold" circle />
+ </div>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { formatDate } from '@/utils/formatTime'
+import MarkdownView from '@/components/MarkdownView/index.vue'
+import { useClipboard } from '@vueuse/core'
+import { ArrowDownBold } from '@element-plus/icons-vue'
+import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
+import { ChatConversationVO } from '@/api/ai/chat/conversation'
+import userAvatarDefaultImg from '@/assets/ai/zhuanlu/user.png'
+import roleAvatarDefaultImg from '@/assets/ai/zhuanlu/assistant.png'
+
+
+const message = useMessage() // 消息弹窗
+const { copy } = useClipboard() // 初始化 copy 到粘贴板
+
+// 判断“消息列表”滚动的位置(用于判断是否需要滚动到消息最下方)
+const messageContainer: any = ref(null)
+const isScrolling = ref(false) //用于判断用户是否在滚动
+
+const userAvatar = computed(() => userAvatarDefaultImg)
+const roleAvatar = computed(() => props.conversation.roleAvatar ?? roleAvatarDefaultImg)
+
+
+// 定义 props
+const props = defineProps({
+ conversation: {
+ type: Object as PropType<ChatConversationVO>,
+ required: true
+ },
+ list: {
+ type: Array as PropType<ChatMessageVO[]>,
+ required: true
+ },
+
+ gotoManualMethod: Function
+})
+
+const { list } = toRefs(props) // 消息列表
+
+const emits = defineEmits(['onDeleteSuccess']) // 定义 emits
+
+// ============ 处理对话滚动 ==============
+
+/** 滚动到底部 */
+const scrollToBottom = async (isIgnore?: boolean) => {
+ // 注意要使用 nextTick 以免获取不到 dom
+ await nextTick()
+ if (isIgnore || !isScrolling.value) {
+ messageContainer.value.scrollTop =
+ messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
+ }
+}
+
+function handleScroll() {
+ const scrollContainer = messageContainer.value
+ const scrollTop = scrollContainer.scrollTop
+ const scrollHeight = scrollContainer.scrollHeight
+ const offsetHeight = scrollContainer.offsetHeight
+ if (scrollTop + offsetHeight < scrollHeight - 100) {
+ // 用户开始滚动并在最底部之上，取消保持在最底部的效果
+ isScrolling.value = true
+ } else {
+ // 用户停止滚动并滚动到最底部，开启保持到最底部的效果
+ isScrolling.value = false
+ }
+}
+
+/** 回到底部 */
+const handleGoBottom = async () => {
+ const scrollContainer = messageContainer.value
+ scrollContainer.scrollTop = scrollContainer.scrollHeight
+}
+
+/** 回到顶部 */
+const handlerGoTop = async () => {
+ const scrollContainer = messageContainer.value
+ scrollContainer.scrollTop = 0
+}
+
+defineExpose({ scrollToBottom, handlerGoTop, handleGoBottom }) // 提供方法给 parent 调用
+
+// ============ 处理消息操作 ==============
+
+const gotoManual = async (item: ChatMessageVO) => {
+ if(props.gotoManualMethod) {
+ props.gotoManualMethod(item)
+ }
+}
+
+/** 复制 */
+const copyContent = async (content) => {
+ await copy(content)
+ message.success('复制成功！')
+}
+
+/** 删除 */
+const onDelete = async (id) => {
+ // 删除 message
+ await ChatMessageApi.deleteChatMessage(id)
+ message.success('删除成功！')
+ // 回调
+ emits('onDeleteSuccess')
+}
+
+/** 初始化 */
+onMounted(async () => {
+ messageContainer.value.addEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped lang="scss">
+/* 添加或修改以下样式 */
+div[ref="messageContainer"] {
+ height: 100%; /* 继承父容器高度 */
+ overflow-y: auto; /* 启用垂直滚动 */
+ max-height: 720px; /* 或根据实际需求调整 */
+ padding-bottom: 20px; /* 避免底部内容被截断 */
+}
+// 中间
+.chat-list {
+ display: flex;
+ flex-direction: column;
+ height: auto;
+ padding: 0 20px;
+
+ .left-message {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .message {
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+ margin: 0 15px;
+
+ .question:hover {
+ cursor: pointer;
+ background: rgba(40, 139, 255, 0.3);
+ }
+
+ .time {
+ text-align: left;
+ line-height: 30px;
+ }
+
+ .left-text-container-thinking {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow-wrap: break-word;
+ background: rgba(115,196,255,0.05);
+ border-radius: 4px 4px 4px 4px;
+ border-left: 1px solid #73C4FF;
+ padding: 10px 10px 5px 10px;
+ .left-text {
+ color: rgba(219,238,255,0.5);
+ font-size: 0.85rem;
+ }
+ }
+
+ .left-text-container-conclusion {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow-wrap: break-word;
+ background: rgba(115,196,255,0);
+ border-radius: 4px 4px 4px 4px;
+ padding: 0 10px 5px 0;
+ .left-text {
+ color: rgba(219,238,255,0.8);
+ font-size: 1rem;
+ }
+ }
+
+ .right-text-container {
+ display: flex;
+ flex-direction: row-reverse;
+
+ .right-text {
+ font-size: 0.95rem;
+ color: #DBEEFF;
+ display: inline;
+ background: rgba(40,139,255,0.1);
+ box-shadow: 0 0 0 0 rgba(40,139,255,0.3);
+ border-radius: 10px;
+ padding: 10px;
+ width: auto;
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ }
+ }
+
+ .left-btns {
+ display: flex;
+ flex-direction: row;
+ margin-top: 8px;
+ }
+
+ .right-btns {
+ display: flex;
+ flex-direction: row-reverse;
+ margin-top: 8px;
+ }
+ }
+
+ // 复制、删除按钮
+ .btn-cus {
+ display: flex;
+ background-color: transparent;
+ align-items: center;
+
+ .btn-image {
+ height: 20px;
+ }
+ }
+
+ .btn-cus:hover {
+ cursor: pointer;
+ background-color: #f6f6f6;
+ }
+}
+
+// 回到底部
+.to-bottom {
+ position: absolute;
+ z-index: 1000;
+ bottom: 0;
+ right: 50%;
+ .el-button {
+ 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>
--
Gitblit v1.9.3