AIchat/src/pages/index/index.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarHidden: true,
  },
}
</route>

<template>
  <div class="flex flex-col h-screen bg-#ffffff tops">
    <!-- Navigation Bar -->
    <div
      class="flex-none flex items-center justify-between px-5 py-3 bg-white shadow-md h-20 pt-10 z-999 fixed top-0 w-full box-border"
    >
      <image src="/static/aichat/black.png" class="w-3 h-4" @click="goBack" />
      <div class="text-lg font-medium ml-12">小墨</div>
      <div class="flex items-center space-x-3">
        <!-- v-if="rawList.length > 0" -->
        <image src="/static/aichat/time.png" class="w-5 h-5 mr-4" @click="openPopup" />
        <image src="/static/aichat/new.png" class="w-5 h-5" @click="newChat" />
      </div>
    </div>

    <!-- 消息区 -->
    <div
      :class="[
        'flex fixed top-0 w-full  p-b-10 box-border mt-20',
        showActions ? (uploadList.length ? 'h-118' : 'h-151') : 'h-171',
      ]"
    >
      <!-- 背景层 -->
      <div
        v-if="!messages.length"
        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none bg-#ffffff"
      >
        <image src="/static/aichat/logo.png" class="w-20 h-24 mb-4" @click="newChat" />
        <view class="text-xl font-medium mb-1">嗨！ 我是小墨</view>
        <view class="text-gray-400">开启新的聊天吧</view>
      </div>

      <div
        ref="scrollEl"
        class="flex-1 overflow-y-auto bg-#ffffff"
        :class="showActions ? 'pb-44' : 'pb-16'"
      >
        <div :class="['relative z-10 px-4 py-6', showActions ? 'mb--11 h-105' : 'mb--21 h-135']">
          <template v-for="(msg, idx) in messages" :key="idx">
            <view v-if="shouldShowTimestamp(idx)" class="text-center text-xs text-gray-500 mt--3">
              {{ formatDayGroup(msg.timestamp) }}
            </view>
            <view
              class="flex items-start"
              :class="msg.role === 'assistant' ? 'justify-start  mt-0.3' : 'justify-end  mt-2 '"
            >
              <image
                v-if="msg.role === 'assistant'"
                src="/static/aichat/logo-message.png"
                class="w-8 h-8 rounded-full mr-2 mt-1"
              />
              <view
                class="relative max-w-[76.5%] mt-5"
                :class="idx === messages.length - 1 ? 'mb-20' : 'mb-3'"
              >
                <view
                  :class="[
                    'absolute -top-5 text-xs text-gray-400 w-20 text-right ',
                    msg.role === 'assistant' ? 'left--4' : 'right-0',
                  ]"
                >
                  {{ formatTimeShort(msg.timestamp) }}
                </view>
                <view
                  :class="[
                    'py-3 pl-3 rounded-md break-words mb-3 tracking-[2rpx] min-w-10 min-h-2 ',
                    msg.role === 'assistant'
                      ? 'bg-[#f9f8fd] text-black shadow '
                      : 'bg-[#45299e] text-white ',
                    msg.type === 'text' ? 'pr-0' : 'pr-3',
                  ]"
                >
                  <wd-loading
                    v-show="msg.role === 'assistant' && msgLoading && idx === messages.length - 1"
                    :size="20"
                    color="#e3e3e3"
                    custom-class="loading-black"
                    :class="[
                      'absolute top-1.5 text-xs text-gray-400 w-20 text-right',
                      msg.role === 'assistant' ? 'left-1' : 'right-0',
                    ]"
                  />
                  <!-- 图片消息 -->
                  <scroll-view
                    scroll-x
                    v-if="msg.type === uploadFileTypeEm.image"
                    @scroll="onScroll"
                  >
                    <view class="flex pr-1" @click="previewMoreImg(msg.content)">
                      <view
                        v-for="(file, fileIdx) in msg.content.slice(0, 4)"
                        :key="fileIdx"
                        class="relative rounded-md overflow-hidden ml-2"
                        :class="{
                          'w-60 h-60': msg.content.length == 1,
                          'w-15 h-15': msg.content.length == 2,
                          'w-30 h-15 ': msg.content.length == 3,
                          'w-80 h-15 ': msg.content.length >= 4,
                        }"
                      >
                        <view
                          v-if="fileIdx >= 3"
                          class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70 z-80"
                        >
                          + {{ msg.content.length - 4 }}
                        </view>

                        <image
                          v-if="file.uploadFileType === uploadFileTypeEm.image"
                          :src="file.url || file.tempFilePath"
                          class="w-full h-full object-cover"
                        />
                      </view>
                    </view>
                  </scroll-view>

                  <!-- 文件消息 -->
                  <scroll-view
                    scroll-x
                    v-else-if="msg.type === uploadFileTypeEm.file"
                    @scroll="onScroll"
                  >
                    <view class="flex pr-1">
                      <view
                        v-for="(file, fileIdx) in msg.content"
                        :key="fileIdx"
                        style="flex: 0 0 6rem"
                        class="relative text-xs h-12 px-2 py-2 rounded-md overflow-hidden mr-1 bg-white c-black"
                        :class="{
                          'w-25 h-15': msg.content.length == 1,
                          'w-50 h-15': msg.content.length == 2,
                          'w-30 h-15 ': msg.content.length == 3,
                          'h-15 flex-grow-0 flex-shrink-0 basis-10 mr-1': msg.content.length >= 4,
                        }"
                        @click="previewFile(file.url)"
                      >
                        <view>{{ file.name }}</view>
                        <view>{{ file.size }}</view>
                      </view>
                    </view>
                  </scroll-view>

                  <!-- 视频 -->
                  <view v-else-if="msg.type === uploadFileTypeEm.video">
                    <view
                      v-for="(file, fileIdx) in msg.content"
                      :key="fileIdx"
                      style="flex: 0 0 6rem"
                      class="relative text-xs h-12 px-2 py-2 rounded-md overflow-hidden mr-1 bg-white c-black"
                      @click="previewVideo(msg.content)"
                    >
                      <img
                        v-if="file.uploadFileType === uploadFileTypeEm.image"
                        :src="file.url || file.tempFilePath"
                        class="w-full h-full object-cover"
                      />
                    </view>
                  </view>

                  <!-- 文本消息 -->
                  <view v-else class="pr-2">
                    {{ msg.content }}
                  </view>
                </view>
                <view
                  v-if="msg.role === 'assistant' && msg.type === 'text'"
                  class="absolute bottom--3.5 flex space-x-3 ml-1"
                >
                  <image src="/static/aichat/copy.png" class="w-4 h-4" @click="copyText(msg)" />
                  <image src="/static/aichat/resect.png" class="w-4.3 h-4" @click="refreshText()" />
                </view>
              </view>
              <image
                v-if="msg.role === 'user'"
                :src="userAvatar"
                class="w-8 h-8 rounded-full ml-2 mt-1"
              />
            </view>
          </template>
        </div>
      </div>
    </div>

    <!-- 底部上传预览 + 输入区 -->
    <div
      :class="[
        'fixed bottom-0 left-0 right-0 bg-white z-[80] overflow-hidden transition-all duration-300',
        showActions ? (uploadList.length ? 'h-40' : 'h-40') : 'h-20',
      ]"
    >
      <!-- 上传列表 -->
      <div
        v-if="uploadList.length"
        :class="[
          'flex px-4 py-2 overflow-x-auto space-x-3 bg-transparent',
          showActions
            ? uploadList.length
              ? ' fixed bottom-40'
              : 'fixed bottom-19'
            : 'fixed bottom-19',
        ]"
        :style="{
          transform: `rotate(0deg)`,
          transition: 'transform 0.3s ease',
        }"
      >
        <div class="flex overflow-x-auto space-x-3 py-2 w-88 flex-nowrap">
          <div
            v-for="item in uploadList"
            :key="item.id"
            class="relative w-16 h-16 rounded overflow-hidden flex-shrink-0"
          >
            <!-- 预览图，成功后用后端返回的 URL；上传中可以先用本地预览 -->
            <img
              v-if="item.uploadFileType !== uploadFileTypeEm.file"
              :src="item.url || item.tempFilePath"
              class="w-full h-full object-cover"
              @click="previewImage(item.url)"
            />

            <view v-else class="text-xs text-gray-400 mt-1" @click="previewFile(item.url)">
              {{ item.name }}
            </view>

            <!-- 关闭按钮 -->
            <div
              class="absolute top-1 right-1 w-4 h-4 rounded-full bg-black bg-opacity-50 flex items-center justify-center cursor-pointer text-white text-xs z-5"
              @click="removeImage(item.id)"
            >
              ×
            </div>

            <!-- 重试 -->
            <span
              v-if="item.status === 'error'"
              class="absolute w-full h-full bg-black bg-opacity-40 pt-1 left-0 top-0 text-center color-white text-3xl"
              @click.stop="retry(item)"
            >
              ↻
            </span>

            <!-- 进度 / 成功 / 失败 -->
            <div
              class="absolute bottom-0 left-0 w-full text-xs text-center py-1 bg-black bg-opacity-50"
              :class="{
                'text-black': item.status === 'uploading',
                'text-green': item.status === 'success',
                'text-red': item.status === 'error',
              }"
            >
              <template v-if="item.status === 'uploading'">
                <view class="text-white">{{ item.progress }}%</view>
              </template>
              <template v-else-if="item.status === 'success'">✔ 成功</template>
              <template v-else>✖ 失败</template>
            </div>
          </div>
        </div>
      </div>

      <!-- 知识库-->
      <div
        @click="toggleKnowledge"
        v-if="!uploadList.length"
        class="fixed left-[32rpx] right-0 z-[90] h-8 w-23 flex items-center justify-between px-3 box-border rounded-1 transition-all duration-300"
        :class="[
          knowledgeOpen ? 'bg-#eee9f8' : 'bg-[#F9F9F9]',
          showActions ? (uploadList.length ? 'bottom-31' : 'bottom-41') : 'bottom-21',
        ]"
      >
        <image
          :src="
            knowledgeOpen
              ? '/static/aichat/Knowledge-open.png'
              : '/static/aichat/Knowledge-close.png'
          "
          class="w-4 h-3.5 mt-1"
        />
        <div
          :class="['text-[26rpx] transition-colors', knowledgeOpen ? 'text-#46299D' : 'text-black']"
        >
          知识库
        </div>
      </div>

      <!-- 输入 + 切换 -->
      <view class="flex items-center px-4 py-2.5 border-t border-t-solid border-[#E7E7E7]">
        <input
          v-model="inputText"
          @focus="onFocus"
          @keyup.enter="sendText('')"
          placeholder="想对我说点什么～"
          class="flex-1 h-10 px-3 border border-gray-100 bg-[#f9f9f9] rounded-1 focus:outline-none"
        />
        <image
          v-show="!knowledgeOpen"
          src="/static/aichat/add-circle.png"
          class="w-7 h-7 mx-3"
          @click="toggleActions"
          :style="{
            transform: `rotate(${rotation}deg)`,
            transition: 'transform 0.3s ease',
          }"
        />
        <image
          src="/static/aichat/enter.png"
          class="w-7 h-7"
          @click="sendText('')"
          :disabled="loading"
          :class="[knowledgeOpen ? 'ml-2' : 'ml-0']"
        />
      </view>

      <!-- 操作面板 -->
      <transition name="slide-up">
        <view
          v-show="showActions"
          :class="[
            'flex justify-around items-center h-10 bg-white border-t border-t-solid border-[#E7E7E7]',
            showActions ? (uploadList.length ? 'pt-10' : 'pt-10') : 'pt-0',
          ]"
        >
          <view class="flex flex-col items-center">
            <image src="/static/aichat/phone-img.png" class="w-13 h-13" @click="onPickImage" />
            <span class="text-xs mt-1 text-gray-500">照片</span>
          </view>
          <view class="flex flex-col items-center">
            <image src="/static/aichat/photo.png" class="w-13 h-13" @click="onPickVideo" />
            <span class="text-xs mt-1 text-gray-500">视频</span>
          </view>
          <view class="flex flex-col items-center">
            <image src="/static/aichat/files.png" class="w-13 h-13" @click="onPickFile" />
            <span class="text-xs mt-1 text-gray-500">文件</span>
          </view>
        </view>
      </transition>
    </div>

    <!-- 弹窗遮罩 + 容器 -->
    <view v-if="showPopup" class="overlay" @click.self="closePopup">
      <view :class="['popup', { fullscreen }]">
        <!-- Header -->
        <view class="popup-header">
          <view>
            <image src="/static/aichat/close.png" class="w4 h4" @click="closePopup" />
            <image
              :src="fullscreen ? '/static/aichat/shirk-cl.png' : '/static/aichat/shrink.png'"
              class="w5 h5 ml-4"
              @click="toggleFullscreen"
            />
          </view>

          <text class="title ml--14">历史记录</text>
        </view>
        <!-- 内容区 -->
        <view v-if="!rawList.length" class="flex-1 flex flex-col items-center justify-center">
          <image
            src="/static/aichat/empty.png"
            class="w-[400rpx] h-[400rpx] mb-[20rpx] opacity-50"
            mode="widthFix"
          />
          <text class="text-[28rpx] text-gray-500">暂无数据</text>
        </view>
        <scroll-view v-else scroll-y class="popup-body">
          <template v-for="group in groups" :key="group.date">
            <view class="date-label">{{ group.label }}</view>
            <view
              v-for="item in group.items"
              :key="item.id"
              class="history-item"
              @click="goChat(item.listUuid)"
            >
              <text class="history-text">{{ item.title }}</text>
            </view>
          </template>
        </scroll-view>
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, watchEffect } from 'vue'
import dayjs from 'dayjs'
import { useUserStore } from '@/store'
import { getEnvBaseUrl } from '@/utils'
import guid from '@/utils/guid.js'
import type { IGptRequestBody } from '@/service/index/foo'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

interface UploadFile {
  id: string
  formName: string
  name: string
  size: number
  type: string
  progress: number // 上传进度 0-100
  status: 'uploading' | 'success' | 'error'
  tempFilePath: string // 本地临时路径，用于预览
  url?: string // 本地预览URL或服务器返回的URL
  uploadFileType: 'image' | 'video' | 'file'
}

interface IMessage {
  role: 'user' | 'assistant'
  type: 'text' | 'image' | 'video' | 'file'
  content: string | any[]
  timestamp: Date
}
const userAvatar = ref('')
const chatMode = ref('qwen-vl-plus')

const baseUrl = getEnvBaseUrl()
const messages = reactive<IMessage[]>([])
//获取用户上下文
const historyUserMsgs = reactive<any[]>([])
const inputText = ref('')
const loading = ref(false)
const showActions = ref(false)
const scrollEl = ref<HTMLElement>()
//显示图片更多遮罩层
const showImageMask = ref(false)
//已上传文件列表
const uploadList = reactive<UploadFile[]>([])
// 上传队列
const uploadQueue = reactive([])
// 上传中文件数量
const uploadingCount = ref(0)
// 最大并行上传数
const MAX_CONCURRENT_UPLOADS = 6

// ------------------
// 控制弹窗显隐 & 全屏/底部模式
// ------------------
const showPopup = ref(false)
const fullscreen = ref(false)

async function openPopup() {
  await fetchHistoryList()
  showPopup.value = true
}
function closePopup() {
  showPopup.value = false
}
function toggleFullscreen() {
  fullscreen.value = !fullscreen.value
}

// ------------------
// 历史记录数据 & 分组逻辑
// ------------------
interface HistoryRecord {
  id: number
  listUuid: string
  title: string
  createdAt: number // Unix 时间戳（秒）
}
const rawList = ref<HistoryRecord[]>([])

const groups = computed(() => {
  const map: Record<string, HistoryRecord[]> = {}
  rawList.value.length > 0 &&
    rawList.value.forEach((item) => {
      const key = dayjs.unix(item.createdAt).format('YYYY-MM-DD')
      ;(map[key] ||= []).push(item)
    })
  return Object.keys(map)
    .sort((a, b) => dayjs(b).valueOf() - dayjs(a).valueOf())
    .map((key) => {
      const today = dayjs().format('YYYY-MM-DD')
      const yesterday = dayjs().add(-1, 'day').format('YYYY-MM-DD')
      let label = ''
      if (key === today) label = '今天'
      else if (key === yesterday) label = '昨天'
      else label = dayjs(key).format('YYYY/MM/DD')
      return { date: key, label, items: map[key] }
    })
})

// 点击历史记录条目，跳转聊天页面
async function goChat(listUuid: string) {
  await fetchHistoryDiets(listUuid)
  showPopup.value = false
}
// qwen-vl-plus
/** 1. 创建聊天会话 */
const listUuid = ref('')

async function createChatSession() {
  try {
    const createResp: any = await uni.request({
      url: `${baseUrl}/chat/create`,
      method: 'POST',
      data: {
        gptModel: chatMode.value,
      },
      header: {
        Authorization: token.value,
      },
    })
    // 如果后台返回新的会话信息，可以在这里处理，比如拿到 listUuid 等
    listUuid.value = createResp.data.data.listUuid
  } catch (err) {}
}
// ------------------
// 拉取历史记录接口（替换为你自己的 API）
// ------------------

/** 2. 拉取历史记录列表 */
async function fetchHistoryList() {
  try {
    const resp: any = await uni.request({
      url: `${baseUrl}/chat/list`,
      method: 'POST',
      data: {
        page: 1,
        pageSize: 9990,
      },
      header: {
        Authorization: token.value,
      },
    })
    if (resp.data && resp.data.data) {
      rawList.value = resp.data.data.data
      console.log('fetchHistoryList →', rawList.value)
    }
  } catch (err) {}
}
/** 3. 拉取历史记录详情 */

async function fetchHistoryDiets(value) {
  try {
    const resp: any = await uni.request({
      url: `${baseUrl}/chat/detail`,
      method: 'POST',
      data: {
        listUuid: value,
        gptModel: chatMode.value,
      },
      header: {
        Authorization: token.value,
      },
    })

    if (resp && resp.data) {
      const rawList = resp.data.data // 假设后端直接返回消息数组
      listUuid.value = resp.data.data[0].listUuid

      const newMessages = parseBackendMessages(rawList)
      // 用解析后的消息替换当前消息列表
      messages.splice(0, messages.length, ...newMessages)
    }
  } catch (err) {}
}

function parseBackendMessages(rawList: any[]): IMessage[] {
  const messageList: IMessage[] = []

  rawList.forEach((item) => {
    const rawContent: string = item.text ?? item.content ?? item.message ?? ''
    // 先尝试 map[...] 的老逻辑
    let parts: ParsedPart[] | null = tryParseMapFormat(rawContent)

    // 如果没命中 map[...]，再看看是不是一个标准的 JSON 数组字符串
    if (!parts && rawContent.startsWith('[') && rawContent.endsWith(']')) {
      try {
        const arr = JSON.parse(rawContent) as Array<{ text: string; type: string }>
        if (Array.isArray(arr)) {
          parts = arr.map((el) => {
            if (el.type === 'file_url') {
              return {
                type: 'video',
                content: [{ url: el.text, uploadFileType: 'video' }],
              }
            } else if (el.type === 'image_url' || el.type === 'image') {
              return {
                type: 'image',
                content: [{ url: el.text, uploadFileType: 'image' }],
              }
            } else if (el.type === 'text') {
              return { type: 'text', content: el.text }
            }

            // 其他类型按需扩展
            return { type: el.type, content: el.text }
          })
        }
      } catch {
        // 解析失败就继续下面的 fallback
      }
    }

    if (parts) {
      // 拆分成多条消息推入
      parts.forEach((part) => {
        messageList.push({
          role: item.role,
          type: part.type as any, // 'text' 或 'image'
          content: part.content,
          timestamp: (item.CreatedAt ?? 0) * 1000,
        })
      })
    } else {
      // 你原来的 fallback 分支（单条，直接塞 content，type 也补成 'text'）
      messageList.push({
        role: item.role,
        type: 'text',
        content: rawContent,
        timestamp: (item.CreatedAt ?? 0) * 1000,
      })
    }
  })

  return messageList
}
interface ParsedPart {
  type: string
  content: string | UploadFile[]
}

function tryParseMapFormat(str: string): ParsedPart[] | null {
  if (!str || !str.startsWith('[') || !str.endsWith(']') || !str.includes('map[')) {
    return null // 不符合 [map[...] ...] 格式
  }

  const result: ParsedPart[] = []
  // 提取所有 map[...] 子串
  const pattern = /map\[([^\]]+)\]/g
  let match: RegExpExecArray | null
  while ((match = pattern.exec(str)) !== null) {
    const contentBlock = match[1] // 如 "text:这种 type:text"
    const typeIndex = contentBlock.indexOf(' type:')
    if (typeIndex === -1) {
      continue // 安全检查，正常情况下一定有 ' type:' 分隔
    }
    // 拆分内容部分和类型部分
    const contentPart = contentBlock.substring(0, typeIndex).trim() // "text:这种"
    const typeValue = contentBlock.substring(typeIndex + 6).trim() // 跳过 " type:" 得到 "text" 或 "image_url"
    // 解析内容键和值
    const colonIndex = contentPart.indexOf(':')
    if (colonIndex === -1) {
      continue
    }
    const key = contentPart.substring(0, colonIndex).trim() // 键，比如 "text" 或 "image_url"
    let value = contentPart.substring(colonIndex + 1).trim() // 值，比如 "这种" 或 "https://cdn.xx/xxx.jpg"
    // 去掉包裹在值两端的引号（如果有的话）
    if (
      (value.startsWith('"') && value.endsWith('"')) ||
      (value.startsWith("'") && value.endsWith("'"))
    ) {
      value = value.substring(1, value.length - 1)
    }

    // 根据类型构造 ParsedPart 对象
    if (typeValue === 'text' && key === 'text') {
      result.push({
        type: 'text',
        content: value,
      })
    } else if (typeValue === 'image_url' && key === 'image_url') {
      // 将图片URL封装为 UploadFile 对象数组
      result.push({
        type: 'image', // 前端统一用 'image' 作为图片消息类型
        content: [{ url: value, uploadFileType: 'image' }],
      })
    } else {
      // 其他类型的内容，可根据需要扩展处理
      result.push({
        type: typeValue,
        content: value,
      })
    }
  }

  // 如果成功解析出至少一个片段，则返回数组；否则返回 null
  return result.length > 0 ? result : null
}

const token = ref<string>(
  '79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941ca1430937103230a1e32a1715f569f3efdbe6f8cb8b7b8642bd679668081b9b08f693d1b5be6002d936ec51e1e3e0c4927de9e32ac99a109b326e5d2bda27ec87624bb416ec70d2a95a2e190feeba9f0d6bae8571b3dfe89c824712344759a8f2bff9d70747c52525cf6a5614f9c770bca461a9b9c247b6dca97bcf83bbaf99bb726752c4fe1e9a4aa7de5c4cf3e88a3e480801280d45cdc124f9d8221105d852945dc6ce10bc1647e4f09dff4d52ffdfc878a18b3738809e20de39acfd5430450f2bc3741057dd4ce71ccf64ea02f6a91fd001fa7bde90187008f19e848c70a002c37df28be05b4790e962f001a1361e90f1423dfc5b018ca9fac85ad2fafaef6',
)
const userInfo = ref<any>({})
const refreshToken = ref<string>('')
const statusBarHeight = ref<number>(0)
const mask = ref('')
// ---- 页面初始化 ----

onMounted(() => {
  // 1. 定义一个 init 函数，拿 Extras 并依次调用接口
  const init = async () => {
    const wv = plus.webview.currentWebview()
    // token.value = wv.token || uni.getStorageSync('token') || import.meta.env.VITE_DEV_TOKEN
    userInfo.value = JSON.parse(wv.userInfo) || {}
    refreshToken.value = wv.refreshToken || uni.getStorageSync('refreshToken')
    statusBarHeight.value = wv.statusBarHeight || uni.getSystemInfoSync().statusBarHeight
    userAvatar.value = userInfo.value.Avatar
    mask.value = userInfo.value.ID
    await createChatSession()
    await fetchHistoryList()
  }
  init()
})

function scrollToBottom() {
  const el = scrollEl.value!
  nextTick(() => {
    // el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
  })
}

//图片滚动事件
const onScroll = (e) => {
  showImageMask.value = e.detail.scrollLeft <= 0
}

//查看更多图片
const previewMoreImg = (files) => {
  uni.removeStorageSync('previewImages')
  uni.removeStorageSync('previewVideos')

  uni.setStorageSync('previewImages', files)

  uni.navigateTo({
    url: `/pages/preview/index`,
  })
}

//查看视频
const previewVideo = (files) => {
  uni.removeStorageSync('previewVideos')
  uni.removeStorageSync('previewImages')

  uni.setStorageSync('previewVideos', files)

  uni.navigateTo({
    url: `/pages/preview/index`,
  })
}

function addMessage(msg: IMessage) {
  messages.push(msg)
  scrollToBottom()
}

const shouldShowTimestamp = (i: number) => {
  if (i === 0) return true
  return !dayjs(messages[i].timestamp).isSame(messages[i - 1].timestamp, 'day')
}
const formatDayGroup = (d: Date) => dayjs(d).format('YYYY/MM/DD HH:mm')
const formatTimeShort = (d: Date) => dayjs(d).format('MM/DD HH:mm')

function goBack() {
  const wv = plus.webview.currentWebview()
  wv.close('slide-out-right', 300) // 或者直接 wv.close()
}
function viewHistory() {
  uni.navigateTo({ url: '/pages/history/history' })
}
async function newChat() {
  messages.splice(0)
  await createChatSession()
  inputText.value = ''
}
const rotation = ref(0)
function toggleActions() {
  uni.hideKeyboard()

  rotation.value += 45

  console.log(rotation.value, '2')
  showActions.value = !showActions.value

  scrollToBottom()
}

// 上传文件formData类型
const uploadFileTypeEm = {
  image: 'image',
  video: 'video',
  file: 'file',
  text: 'text',
}
// const url=baseUrl
// 上传配置
const uploadConfig = reactive({
  url: `${baseUrl}/upload/img`,
  formData: {
    source: 'chat',
    mask: mask.value,
    type: uploadFileTypeEm.image,
  },
  image: {
    maxSize: 10 * 1024 * 1024, // 图片最大10MB
    limitMsg: '图片大小不能超过10MB',
    supportType: ['.jpeg', '.png', '.jpg'],
  },
  video: {
    maxSize: 100 * 1024 * 1024, // 视频最大100MB
    limitMsg: '视频大小不能超过100MB',
    supportType: ['.mp4', '.mov', '.wmv'],
  },
  file: {
    maxSize: 300 * 1024 * 1024, // 文件最大300MB
    limitMsg: '文件大小不能超过300MB',
    supportType: ['.pdf', '.doc', '.xlsx', '.txt'],
  },
})

//监听上传文件状态更新loading
watchEffect(() => {
  const allSuccess = uploadList.every((item) => item.status === 'success')
  loading.value = !allSuccess
})

//添加上传队列
const addUploadQueue = (tempFiles: any[], uploadFileType: string) => {
  // 添加到上传队列
  const files = tempFiles.map((item: any, index: number) => ({
    id: guid.getGuid(),
    tempFilePath: item.path,
    progress: 0,
    status: 'pending',
    name: item.name,
    size: item.size,
    type: item.type,
    uploadFileType: uploadFileType,
    formName: 'file',
  }))

  //剔除掉大小超过限制的文件
  const _files = []
  files.forEach((file: any) => {
    const size = file.size
    const fileMaxSize = uploadConfig[uploadFileType].maxSize
    const fileLimitMsg = uploadConfig[uploadFileType].limitMsg

    if (size > fileMaxSize) {
      uni.showToast({
        title: fileLimitMsg,
        icon: 'none',
      })
      return
    }

    _files.push(file)
  })

  // 添加到上传文件列表
  uploadList.push(..._files)

  // 添加到队列
  uploadQueue.push(..._files)

  // 更新上传文件类型
  uploadConfig.formData.type = uploadFileType

  // 开始上传
  startUploads()
}

// 开始上传文件
const startUploads = () => {
  // 获取待上传文件
  const pendingFiles = uploadQueue.filter((file) => file.status === 'pending')

  // 限制最大并行上传数
  const filesToUpload = pendingFiles.slice(0, MAX_CONCURRENT_UPLOADS - uploadingCount.value)

  filesToUpload.forEach((file) => {
    uploadFile(file)
  })
}

// 上传单个文件
const uploadFile = (file: UploadFile) => {
  // 更新状态为上传中
  file.status = 'uploading'
  uploadingCount.value++

  // 创建上传任务
  const uploadTask = uni.uploadFile({
    url: uploadConfig.url,
    filePath: file.tempFilePath,
    name: file.formName,
    formData: uploadConfig.formData,
    success: (res) => {
      const result = JSON.parse(res.data)

      if (res.statusCode === 200 && result.code === 0) {
        // 更新文件状态
        file.status = 'success'
        file.progress = 100
        file.url = result.data.cover_url || result.data.ori_url || file.tempFilePath
      } else {
        file.status = 'error'
      }
    },
    fail: (err) => {
      file.status = 'error'
    },
    complete: () => {
      // 更新上传文件列表状态
      uploadList.forEach((item) => {
        if (item.id === file.id) {
          item.status = file.status
          item.url = file.url
          item.progress = file.progress
        }
      })

      uploadingCount.value--

      // 检查是否还有待上传的文件
      const remainingPendingFiles = uploadQueue.filter((file) => file.status === 'pending')
      if (remainingPendingFiles.length > 0) {
        startUploads()
      } else if (uploadingCount.value === 0) {
        // 所有文件上传完成
        // uni.showToast({
        //   title: '全部上传完成',
        //   icon: 'success',
        // })
        loading.value = false
      }
    },
  })

  // 监听上传进度
  uploadTask.onProgressUpdate((res) => {
    uploadList.forEach((item) => {
      if (item.id === file.id) {
        item.progress = res.progress === 100 ? 99 : res.progress
      }
    })
  })
}

// 照片
const onPickImage = () => {
  loading.value = true
  uni.chooseImage({
    count: 10, // 最多选择9张
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    extension: uploadConfig.image.supportType,
    success: (res: any) => {
      console.log(res)

      // 开始上传
      addUploadQueue(res.tempFiles, uploadFileTypeEm.image)
    },
    fail: (err) => {
      uni.showToast({
        title: '选择照片失败',
        icon: 'none',
      })
      loading.value = false
    },
  })
}

// 视频
const onPickVideo = () => {
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    compressed: true,
    extension: uploadConfig.video.supportType,
    success: (res: any) => {
      console.log(res)
      const tempFile = res.tempFile
      tempFile.path = res.tempFilePath

      // 开始上传
      addUploadQueue([tempFile], uploadFileTypeEm.video)
    },
    fail: (err) => {
      uni.showToast({
        title: '选取视频失败',
        icon: 'none',
      })
    },
  })
}

// 文件
const onPickFile = () => {
  uni.chooseFile({
    count: 10,
    type: uploadConfig.file.supportType,
    success: (res: any) => {
      console.log(res)
      // 开始上传
      addUploadQueue(res.tempFiles, uploadFileTypeEm.file)
    },
    fail: (err) => {
      uni.showToast({
        title: '选择文件失败',
      })
    },
  })
}

// 点击重试
function retry(item: UploadFile) {
  item.status = 'uploading'
  item.progress = 0
  uploadFile(item) // 如果需要 detail，可缓存后传入
}

// 删除
function removeImage(id: string) {
  const findIndex = uploadList.findIndex((item) => item.id === id)
  if (findIndex > -1) {
    uploadList.splice(findIndex, 1)
  }
}

// 预览（可自行实现 uni.previewImage 等）
function previewImage(url: string) {
  uni.previewImage({ urls: [url] })
}

// 预览文件
// 统一替换掉原来的 previewFile
const previewFile = (url: string) => {
  if (typeof plus !== 'undefined') {
    // 在 App 里直接用原生下载 + 打开
    downloadAndOpenFile(url)
  } else {
    // H5 或者调试环境回退到 WebView
    uni.navigateTo({
      url: '/pages/webview/index?link=' + encodeURIComponent(url),
    })
  }
}

const downloadAndOpenFile = (downloadUrl: string) => {
  uni.showLoading({ title: '加载中...', mask: true })

  if (!downloadUrl) {
    uni.hideLoading()
    return uni.showToast({ title: '文件路径无效', icon: 'none' })
  }

  // 将文件存放到应用私有下载目录，保证权限可读可写
  const options = {
    // “_downloads/” 会自动映射到应用的 Documents/download 目录
    filename: '_downloads/',
  }

  const dtask = plus.downloader.createDownload(downloadUrl, options, (d, status) => {
    uni.hideLoading()
    if (status === 200) {
      const savedPath = d.filename
      if (savedPath) {
        // 用系统默认的方式打开任意类型文件（PDF/Word/Excel/图片/视频 都通用）
        plus.runtime.openFile(savedPath, {}, () => {
          // 打开失败的回调可选
        })
      } else {
        uni.showToast({ title: '文件保存失败', icon: 'none' })
      }
    } else {
      uni.showToast({ title: '下载失败', icon: 'error' })
    }
  })

  dtask.start()
}
const msgLoading = ref(true)
// 发送消息
async function sendText(msgData) {
  msgLoading.value = true
  const text = inputText.value.trim()
  const dataBlo = toRaw(msgData)
  console.log(dataBlo)
  if (!text && dataBlo == '') {
    msgLoading.value = false

    uni.showToast({ title: '请输入信息', icon: 'error' })

    return
  }
  if (loading.value) return

  //获取本次发送的消息和文件
  const tempUploadList = Object.assign([], uploadList)
  let fileList: any[] = []
  if (tempUploadList.length > 0) {
    fileList = tempUploadList.map((item: UploadFile) => {
      const fileType = `${item.uploadFileType}_url`
      return {
        type: fileType,
        [fileType]: item.url,
      }
    })
  }

  // 添加用户文本消息
  addMessage(
    msgData || {
      role: 'user',
      type: 'text',
      content: text,
      timestamp: new Date(),
    },
  )

  //图片、视频、文件分开发送
  if (tempUploadList.length > 0) {
    Object.values(uploadFileTypeEm).forEach((item: any) => {
      if (tempUploadList.find((v: UploadFile) => v.uploadFileType === item)) {
        addMessage({
          role: 'user',
          type: item,
          content: tempUploadList.filter((v) => v.uploadFileType === item),
          timestamp: new Date(),
        })
      }
    })

    //更新上下文消息
    historyUserMsgs.push({
      role: 'user',
      content: [{ type: 'text', text }, ...fileList],
      timestamp: new Date(),
    })

    //显示更多图片遮罩
    const showMoreImgMask =
      tempUploadList.filter((v: UploadFile) => v.uploadFileType === uploadFileTypeEm.image).length >
      4
    showImageMask.value = showMoreImgMask
  } else {
    //更新上下文消息
    !msgData &&
      historyUserMsgs.push({
        role: 'user',
        content: text,
        timestamp: new Date(),
      })
  }

  inputText.value = ''
  loading.value = true

  // AI消息
  const aiMsg: IMessage = {
    role: 'assistant',
    type: 'text',
    content: text,
    timestamp: new Date(),
  }
  addMessage(aiMsg)

  //清除上传列表
  uploadList.splice(0, uploadList.length)

  const body: IGptRequestBody = {
    model: chatMode.value,
    max_tokens: 1000,
    temperature: 1,
    listUuid: listUuid.value,
    top_p: 1,
    presence_penalty: 0,
    frequency_penalty: 0,
    messages: msgData ? [msgData] : historyUserMsgs,
    stream: true,
  }

  try {
    aiMsg.content = ''

    const resp = await fetch(baseUrl + '/chat/completion', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Authorization: token.value },
      body: JSON.stringify(body),
    })

    const reader = resp.body!.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    let done = false

    while (!done) {
      const { value, done: streamDone } = await reader.read()
      done = streamDone
      if (value) {
        buffer += decoder.decode(value, { stream: true })
        const lines = buffer.split(/\r?\n/)
        buffer = lines.pop()!

        for (const line of lines) {
          // 只处理以 "data: " 开头的行
          if (!line.startsWith('data: ')) continue
          const chunk = line.slice(6).trim()

          if (chunk === '[DONE]') {
            done = true
            console.log('sss')
            break
          }
          try {
            const json = JSON.parse(chunk)
            const delta = json.choices?.[0]?.delta?.content

            if (delta) {
              msgLoading.value = false
              aiMsg.content += delta
              //每次更新messages消息，实现流式输出
              messages[messages.length - 1] = { ...aiMsg }
              scrollToBottom()
              console.log('2')
            }
          } catch {}
        }

        //更新上下文消息
        done && historyUserMsgs.push(aiMsg)
      }
    }
    scrollToBottom()
  } catch (err) {
    aiMsg.content = '请重新发送'
    //更新messages消息
    messages[messages.length - 1] = { ...aiMsg }
    console.error(err)
  } finally {
    loading.value = false
    showActions.value = false
  }
}

function copyText(msg: IMessage) {
  if (typeof msg.content === 'string') {
    uni.setClipboardData({
      data: msg.content,
      success() {
        uni.showToast({ title: '已复制', icon: 'success' })
      },
      fail(err) {
        console.error('复制失败', err)
        uni.showToast({ title: '复制失败', icon: 'error' })
      },
    })
  }
}

// 重新发送逻辑
function refreshText() {
  // 获取最后一条用户消息（保留在消息列表中的）
  const lastUserMsg = messages.findLast((msg) => msg.role === 'user')
  if (!lastUserMsg) return

  // 克隆消息避免污染原始数据
  const clonedMsg = {
    ...lastUserMsg,
    timestamp: new Date(),
  }

  // 发送克隆后的消息
  sendText(clonedMsg)
  //   // 获取最后一条用户消息（保留在消息列表中的）
  //   const lastUserMsg = messages.findLast((msg) => msg.role === 'user')
  // if (!lastUserMsg) return

  // // 克隆消息避免污染原始数据
  // const newUserMsg = {
  //   ...lastUserMsg,
  //   timestamp: new Date(),
  // }
  // const historyToSend = [...messages, newUserMsg]
  // // 发送克隆后的消息
  // sendText(historyToSend)
}

const knowledgeOpen = ref(false)
function toggleKnowledge() {
  console.error('44444', chatMode.value)
  if (chatMode.value == 'qwen-vl-plus') {
    chatMode.value = 'tongyi-app'
  } else {
    chatMode.value = 'qwen-vl-plus'
  }
  knowledgeOpen.value = !knowledgeOpen.value
  showActions.value = false
  rotation.value = 0
}

//收起键盘
const closeKeyboard = () => {
  uni.hideKeyboard()
  rotation.value = 0
}

//输入框聚焦事件
const onFocus = () => {
  showActions.value = false
  rotation.value = 0
}
</script>

<style lang="scss" scoped>
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease-out;
}
.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}
.slide-up-enter-to,
.slide-up-leave-from {
  transform: translateY(0%);
}
.font-pf {
  font-family: PingFangSC-Medium, sans-serif;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}
/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: #fff;
}
.nav-title {
  font-size: 32rpx;
  color: #333;
}
.nav-icon {
  width: 40rpx;
  height: 40rpx;
}
/* 遮罩 */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
/* 弹窗容器 */
.popup {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 60%;
  overflow: hidden;
  background: #fff;
  border-radius: 12rpx 12rpx 0 0;
}
.popup.fullscreen {
  height: 90%;
  border-radius: 0;
}
/* Header */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.popup-header .icon {
  width: 32rpx;
  height: 32rpx;
}
.popup-header .title {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  text-align: center;
}
/* 内容区 */
.popup-body {
  flex: 1;
  padding: 24rpx 0;
}
.date-label {
  padding: 0 32rpx;
  margin-top: 24rpx;
  font-size: 24rpx;
  color: #999;
}
.history-item {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.history-text {
  font-size: 28rpx;
  color: #333;
}

.tops {
  padding-top: var(--status-bar-height);
}
.flex-i {
  display: flex !important;
}
</style>