feat:图像分析页面文件；

src/views/visualAnalysis/index.vue

@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+import { Button, Spin, UploadDragger, message } from 'ant-design-vue'
+import type { UploadChangeParam } from 'ant-design-vue'
+import DefaultImage from '@/assets/images/conversation/default_img3.png'
+import { SvgIcon } from '@/components/SvgIcon'
+import { AppContainerBox } from '@/components/AppContainerBox'
+import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
+import { AppSubMenuList } from '@/components/AppSubMenuList'
+import { AppConversationDefault } from '@/components/AppConversationDefault'
+import { AppUserInfo } from '@/components/AppUserInfo'
+import { SubMenuActionEnum } from '@/components/AppSubMenuList/index.d'
+import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
+
+import { AppMessage } from '@/components/AppMessage'
+import type { MessageItem } from '@/components/AppMessage/index.d'
+import { useMessageStore } from '@/store/moules/messageStore/index'
+import { MenuTypeEnum } from '@/enums/menuEnum'
+import { MessageStatusEnum, MessageTypeEnum } from '@/enums/messageEnum'
+import { addMessage, conversationList, historyMessage, removeMessage, sendRepository, updateMessage } from '@/api/base/message'
+import { uploadApi } from '@/api/base/file'
+import { useMqtt } from '@/hooks/useMqtt'
+import { useMessage } from '@/hooks/useMessage'
+
+const { createConfirm } = useMessage()
+
+const messageStore = useMessageStore()
+
+const sendBtnLoading = ref(false)
+const subMenuActiveIndex = ref(0) // 当前会话索引
+const subMenuActionIndex = ref(-1) // 会话操作索引
+const subMenuList = ref<SubMenuItem[]>([])
+const subMenuInputValue = ref<string>('')
+const appMessageRef = ref()
+const messageList = computed(() => messageStore.getMessageList)
+const messageStatus = computed(() => messageStore.getMessageStatus)
+const conversationData = computed(() => messageStore.getConversationData)
+const historyMessageParams = ref({
+  conversationId: '',
+  current: 1,
+  size: 10,
+  total: 0,
+})
+const leadData = ref({
+  title: '你好，我是青鸟语言大模型-同聪~',
+  subTitles: [
+    '我可以自由的跟你对话～陪你聊天～帮你想方案～答疑解惑。',
+    '上传图像至下方，我可以帮你分析哦',
+  ],
+  image: DefaultImage,
+})
+
+const conversationDefaultShow = ref(false)
+const appMessageShow = ref(true)
+const spinning = ref(true)
+
+const fileList = ref([])
+
+watch(
+  () => messageStatus.value,
+  (val) => {
+    if (val === MessageStatusEnum.END) {
+      sendBtnLoading.value = false
+    }
+  },
+)
+
+/**
+ * @description: 点击会话操作项
+ */
+function handlesubMenuActionIndex(type: SubMenuActionEnum, item: SubMenuItem, index: number) {
+  subMenuActionIndex.value = index
+  if (type === SubMenuActionEnum.EDIT) {
+    subMenuList.value.forEach((item) => {
+      item.actionType = SubMenuActionEnum.NOT
+    })
+    subMenuList.value[index].actionType = SubMenuActionEnum.EDIT
+    subMenuInputValue.value = item.title
+  }
+
+  if (type === SubMenuActionEnum.DELETE) {
+    createConfirm({
+      title: '删除',
+      content: `确定要删除${item.title}会话吗？`,
+      iconType: 'warning',
+      onOk: () => {
+        removeMessage(item.id).then(() => {
+          message.success('删除成功')
+          getConversationList()
+        })
+      },
+    })
+  }
+}
+
+/**
+ * @description: 切换会话
+ */
+async function handleSubMenuChange(index: number) {
+  if (messageStatus.value !== MessageStatusEnum.END) {
+    message.warn('请先结束对话')
+    return
+  }
+  subMenuActiveIndex.value = index
+  historyMessageParams.value.current = 1
+  historyMessageParams.value.total = 0
+  messageStore.setConversationData(subMenuList.value[subMenuActiveIndex.value])
+  messageStore.setMessageClear()
+  useMqtt().end()
+  useMqtt().connect()
+  getHistoryMessage()
+
+  // 因为会话切换时滚动底部有问题，所以重新加载下
+  appMessageShow.value = false
+  setTimeout(() => {
+    appMessageShow.value = true
+  }, 0)
+}
+
+/**
+ * @description: 发送消息
+ */
+async function handleSend(value: string) {
+  sendBtnLoading.value = true
+  conversationDefaultShow.value = false
+  if (!conversationData.value) {
+    return
+  }
+
+  if (subMenuActiveIndex.value === -1) {
+    try {
+      await addMessage({ type: MenuTypeEnum.VISUAL_ANALYSIS, title: '新的对话' })
+      await getConversationList()
+      await nextTick()
+      sendMessage(conversationData.value.id, value)
+    }
+    catch (error) {
+      message.error('新建对话失败，请稍后重试！')
+    }
+  }
+  else {
+    sendMessage(conversationData.value.id, value)
+  }
+}
+
+/**
+ * @description: 获取会话列表
+ */
+async function getConversationList() {
+  const res = await conversationList(MenuTypeEnum.VISUAL_ANALYSIS)
+  res.forEach((item: SubMenuItem) => {
+    item.actionType = SubMenuActionEnum.NOT
+  })
+  subMenuList.value = res
+  subMenuActiveIndex.value = 0
+  if (subMenuList.value.length) {
+    await handleSubMenuChange(0)
+  }
+}
+
+/**
+ * @description: 获取历史对话记录
+ */
+async function getHistoryMessage() {
+  if (!conversationData.value) {
+    return
+  }
+  spinning.value = true
+  historyMessageParams.value.conversationId = conversationData.value.id
+  const res = await historyMessage(historyMessageParams.value)
+  spinning.value = false
+
+  if (!res || !res.records || !res.records.length) {
+    conversationDefaultShow.value = true
+    return
+  }
+  console.log(res)
+
+  res.records.forEach((item: any) => {
+    const itemData: MessageItem = {
+      messageType: item.roleType === MessageTypeEnum.USER ? MessageTypeEnum.USER : MessageTypeEnum.AI,
+      content: item.messageContent,
+      time: item.messageTime,
+      avatar: '',
+      messageStatus: MessageStatusEnum.END,
+    }
+    historyMessageParams.value.total = res.total
+    messageStore.setMessageUnshiftItem(itemData)
+  })
+
+  conversationDefaultShow.value = false
+}
+
+/**
+ * @description: 滚动监听
+ */
+async function onScrollTop(scrollTop: number) {
+  if (scrollTop !== 0) {
+    return
+  }
+
+  if (historyMessageParams.value.current * historyMessageParams.value.size > historyMessageParams.value.total) {
+    return
+  }
+
+  if (historyMessageParams.value.current < historyMessageParams.value.total) {
+    historyMessageParams.value.current++
+    await getHistoryMessage()
+
+    // 无缝滚动
+    appMessageRef.value.seamlessScrollToTop()
+  }
+}
+
+/**
+ * @description: 发送消息hook
+ */
+async function sendMessage(conversationId: string, question: string): Promise<void> {
+  conversationDefaultShow.value = false
+  messageStore.setMessageStatus(MessageStatusEnum.LOADING)
+  messageStore.setMessagePushItem({
+    messageType: MessageTypeEnum.USER,
+    content: question,
+    time: String(new Date().getTime()),
+    avatar: '',
+  })
+  messageStore.setMessagePushItem({
+    messageType: MessageTypeEnum.AI,
+    content: '正在思考中...',
+    time: String(new Date().getTime()),
+    avatar: '',
+    messageStatus: MessageStatusEnum.LOADING,
+  })
+  if (!messageStore.getConversationData) {
+    return
+  }
+
+  sendRepository({
+    conversationId,
+    question,
+  }).catch(() => {
+    messageStore.getMessageList.splice(-2)
+    messageStore.setMessageStatus(MessageStatusEnum.END)
+  })
+}
+
+/**
+ * @description: 重新回答
+ */
+function reloadMessage() {
+  if (!conversationData.value) {
+    return
+  }
+  const question = messageList.value[messageList.value.length - 2]?.content
+  sendMessage(conversationData.value.id, question)
+}
+
+/**
+ * @description: 点击新建会话按钮
+ */
+function handleAddMessage() {
+  if (messageStatus.value !== MessageStatusEnum.END) {
+    message.warn('请先结束对话')
+    return
+  }
+  conversationDefaultShow.value = true
+  subMenuActiveIndex.value = -1
+}
+
+function handleUploadChange(info: UploadChangeParam) {
+  const status = info.file.status
+  if (status !== 'uploading') {
+    console.log(info.file, info.fileList)
+  }
+  if (status === 'done') {
+    message.success(`${info.file.name} file uploaded successfully.`)
+  }
+  else if (status === 'error') {
+    message.error(`${info.file.name} file upload failed.`)
+  }
+}
+
+function handleUploadDrop(e: DragEvent) {
+  console.log('drop', e)
+}
+
+async function handleCustomRequest(option: any) {
+  console.log(option)
+  const { file } = option
+  // uploadApi(file, handleUploadDrop()=>{
+  //   console.log(111);
+
+  // })
+}
+
+// 下面是子菜单操作项
+function handleSubMenuInputAffirm(index: number, item: SubMenuItem, inputValue: string) {
+  updateMessage({ ...item, title: inputValue }).then(() => {
+    message.success('修改成功')
+    subMenuList.value[index].title = inputValue
+    subMenuList.value[index].actionType = SubMenuActionEnum.NOT
+  })
+}
+function handleSubMenuInputClose(index: number) {
+  subMenuList.value[index].actionType = SubMenuActionEnum.NOT
+}
+function handleSubMenuInputBlur(index: number, item: SubMenuItem, inputValue: string) {
+  subMenuActionIndex.value = -1
+  handleSubMenuInputAffirm(index, item, inputValue)
+}
+
+onMounted(() => {
+  getConversationList()
+})
+
+onUnmounted(() => {
+  useMqtt().end()
+})
+
+// 路由离开时的操作
+onBeforeRouteLeave(() => {
+  if (messageStatus.value !== MessageStatusEnum.END) {
+    message.warn('请先结束对话')
+    return false
+  }
+})
+</script>
+
+<template>
+  <AppContainerBox>
+    <template #subMenu>
+      <!-- 标题 -->
+      <AppSubMenuTitle title="图像分析"></AppSubMenuTitle>
+
+      <!-- 按钮 -->
+      <div class="px-5 mb-5">
+        <Button type="primary" class="w-full" @click="handleAddMessage">
+          新建会话
+        </Button>
+      </div>
+
+      <!-- 会话列表 -->
+      <AppSubMenuList
+        v-model:input-value="subMenuInputValue"
+        :list="subMenuList"
+        :active-index="subMenuActiveIndex"
+        :action-index="subMenuActionIndex"
+        @change="handleSubMenuChange"
+        @handle-action="handlesubMenuActionIndex"
+        @input-affirm="handleSubMenuInputAffirm"
+        @input-close="handleSubMenuInputClose"
+        @input-blur="handleSubMenuInputBlur"
+      >
+      </AppSubMenuList>
+      <AppUserInfo />
+    </template>
+    <template #content>
+      <Spin :spinning="spinning" wrapper-class-name="app-content-spin">
+        <!-- 默认导语 -->
+        <AppConversationDefault
+          v-if="conversationDefaultShow"
+          height="calc(100% - 160px)"
+          :lead-data="leadData"
+        >
+        </AppConversationDefault>
+
+        <!-- 消息列表 -->
+        <AppMessage
+          v-if="!conversationDefaultShow && appMessageShow"
+          ref="appMessageRef"
+          class="pl-27 pr-5"
+          :list="messageList"
+          @on-scroll-top="onScrollTop"
+          @reload-message="reloadMessage"
+        >
+        </AppMessage>
+      </Spin>
+
+      <!-- 发送框 -->
+      <div class="upload-box absolute right-0 bottom-5 pl-52 pr-32 mt-10s w-full">
+        <UploadDragger
+          v-model:fileList="fileList"
+          name="file"
+          :multiple="true"
+          :max-count="1"
+          :custom-request="handleCustomRequest"
+          @change="handleUploadChange"
+          @drop="handleUploadDrop"
+        >
+          <SvgIcon class="upload-icon" name="image"></SvgIcon>
+          <p class="ant-upload-text">
+            拖拽图片到这里，或者点击添加
+          </p>
+          <p class="ant-upload-hint">
+            图片格式支持jpg、jpeg、png、gif、webp
+          </p>
+        </UploadDragger>
+      </div>
+    </template>
+  </AppContainerBox>
+</template>
+
+<style lang="scss" scoped>
+.upload-box {
+  .upload-icon {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>