mky-vent-base/src/components/AIChat/MiniChat.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="btn" @click="showAIChat">
    <div style="display: flex; flex-direction: row" class="btn-header">
      <img src="@/assets/images/vent/home/wakeBtn.png" />
    </div>
  </div>
  <div class="mini-container">
    <div v-if="isShowChatBroad" class="mini-chat">
      <!-- 左侧折叠区域 -->
      <div class="left-side" :class="{ collapsed: isFold }" id="leftSide">
        <div
          class="addBtn"
          :style="{
            backgroundColor: isFold ? '' : '#2cb6ff',
            width: isFold ? '20px' : 'auto',
          }"
          @click="addNew"
        >
          <SvgIcon v-if="isFold" name="add" size="20" :color="''" />
          <span v-if="!isFold" class="btn-text">添加新对话</span>
        </div>
        <div v-if="isFold" class="historyBtn" @click="addNew">
          <SvgIcon v-if="isFold" name="history" size="20" :color="''" />
        </div>
        <div v-else class="historyBtn1">
          <span v-if="!isFold" class="btn-text">历史对话</span>
          <a-list style="width: 136px" :split="false" :data-source="sessionHistory" :scroll="190" class="custom-list">
            <template #renderItem="{ item }">
              <a-list-item
                class="session-item"
                :style="{
                  padding: '8px 10px 0 8px',
                  color: '#5e7081',
                  fontSize: '10px',
                  position: 'relative', // 新增定位
                }"
              >
                <!-- 新增flex布局容器 -->
                <div style="width: 100%">
                  <div v-if="editingId !== item.id" class="text-container">
                    <span class="edit-text" @click="sessionsHistory(item.id)">{{ item.name }}</span>
                    <div class="btn-container">
                      <EditOutlined class="edit-icon" @click="startEditing(item)" />
                      <DeleteOutlined class="delete-icon" @click="startDelete(item)" />
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <a-input
                    size="small"
                    v-else
                    v-model:value="editText"
                    v-focus
                    @blur="handleSave(item)"
                    @keyup.enter="handleSave(item)"
                    class="edit-input"
                  />
                </div>
              </a-list-item>
            </template>
          </a-list>
        </div>
        <div class="foldBtn" @click="fold">
          <SvgIcon v-if="isFold" name="Fold1" size="20" :color="''" />
          <SvgIcon v-else name="unfold" size="20" :color="''" />
        </div>
      </div>
      <!-- 右侧对话框 -->
      <div class="right-side">
        <div class="title"> 智能问答 </div>
        <!-- 对话区域 -->
        <div class="dialog-area" ref="dialogAreaRef">
          <div
            v-for="message in messageHistory"
            :key="message.id"
            class="flex items-center w-100%"
            :style="{ alignSelf: message.type === 'user' ? 'flex-end' : 'flex-start' }"
          >
            <template v-if="message.type === 'user'">
              <div class="flex-grow-1"></div>
              <div class="message-wrapper user-message-wrapper">
                <!-- <div class="ask-message" v-if="message.message_files && message.message_files.length > 0" @click="showPreview()">
                  <div class="img-preview" v-if="askFileType == 'image'">
                    <img :src="askFile.source_url" alt="" />
                  </div>
                  <div class="file-preview" v-else-if="askFileType !== 'image' && askFileType != ''">
                    <div class="file-info"> 📄{{ askFile.name }} (大小：{{ (askFile.size / 1024).toFixed(2) }}KB) </div>
                  </div>
                  <div>
                    {{ message.parsedContent }}
                  </div>
                </div>
                <div class="ask-message" v-else @click="showPreview()">
                  <div>
                    {{ message.parsedContent }}
                  </div>
                </div> -->
                <div class="ask-message">
                  <!-- 渲染当前消息的文件 -->
                  <div v-if="message.message_files && message.message_files.length > 0" @click="showPreview(message.message_files)">
                    <div v-for="(file, fIdx) in message.message_files" :key="fIdx">
                      <div class="img-preview" v-if="file.mime_type?.toLowerCase().includes('image')">
                        <img :src="file.source_url ? file.source_url : file.url" alt="" />
                      </div>
                      <div class="file-preview" v-else>
                        <div class="file-info"> 📄{{ file.name }} (大小：{{ (file.size / 1024).toFixed(2) }}KB) </div></div
                      >
                    </div>
                  </div>
                  <!-- 消息内容 -->
                  <div>{{ message.parsedContent }}</div>
                </div>
                <div class="copy-icon-container">
                  <CopyOutlined class="copy-icon" @click="copyToClipboard(message.parsedContent)" title="复制消息" />
                  <EditOutlined class="copy-icon" @click="editAsk(message.parsedContent)" title="重新编辑" />
                </div>
              </div>
            </template>
            <template v-else>
              <SvgIcon size="40" class="answerIcon" name="ai-logo" />
              <div class="message-wrapper ai-message-wrapper">
                <div class="answer-message">
                  <div v-if="message.parsedContentR1" class="thinking-section">
                    <div class="thinking-header" @click="isShow(message)">
                      <span class="thinking-title"
                        >思考过程：<RightOutlined v-if="!message.isShowThink" /> <DownOutlined v-if="message.isShowThink"
                      /></span>
                    </div>
                    <div v-show="message.isShowThink" class="color-gray font-size-12px" v-html="formatMessage(message.parsedContentR1)"></div>
                  </div>
                  <div v-if="message.parsedContent" v-html="formatMessage(message.parsedContent)"> </div>
                  <div
                    id="chart-target"
                    class="echarts-container"
                    style="width: 400px; height: 400px"
                    v-if="message.echartsOption && Object.keys(echartsOption).length > 0"
                  ></div>
                </div>
                <div class="copy-icon-container">
                  <CopyOutlined class="copy-icon" @click="copyToClipboard(message.parsedContent)" title="复制消息" />
                  <RedoOutlined class="copy-icon" @click="refresh()" title="重新生成" />
                </div>
              </div>
            </template>
          </div>
          <!-- 建议信息 -->
          <div v-for="(item, index) in suggestList" :key="index" class="suggestion-item" @click="handleSuggestClick(item)">
            <span class="suggestion-text">{{ item }}</span>
            <a-icon type="right" class="suggestion-arrow" />
          </div>
        </div>
        <!-- 底部输入区 -->
        <div class="input-area">
          <div class="img-preview" v-if="uploadfileType == 'image'">
            <img :src="uploadedFiles.source_url" alt="" />
          </div>
          <div class="file-preview" v-else-if="uploadedFiles.name && uploadedFiles.size && uploadfileType !== 'image'">
            <div class="file-info">
              📄{{ uploadedFiles.name }} (大小：{{ (uploadedFiles.size / 1024).toFixed(2) }}KB)
              <DeleteOutlined @click="deleteFile()" />
            </div>
          </div>
          <a-textarea
            auto-size
            v-model:value="inputText"
            placeholder="请输入你的问题"
            @keyup.enter="handleSend(inputText, uploadedFiles)"
            class="ant-input"
          />
          <div class="ctrl-btn">
            <div class="input-controls">
              <button class="control-btn" :class="{ active: isThinking }" @click="toggleThinking">深度思考</button>
              <button class="control-btn" @click="stopReq()">停止响应</button>
            </div>
            <div class="action-bar">
              <Space>
                <Button class="control-btn1" size="small" @mouseenter="showModal(true)">
                  <template #icon>
                    <SvgIcon name="send-file" />
                  </template>
                </Button>
                <Button class="control-btn2" size="small" @click="handleSend(inputText, uploadedFiles)">
                  <template #icon>
                    <SvgIcon name="send" />
                  </template>
                </Button>
              </Space>
            </div>
          </div>
          <!-- 右侧文件上传区 -->
          <div v-if="open" @mouseenter="showModal(true)" @mouseleave="showModal(false)" class="file-upload">
            <!-- 上传按钮 -->
            <a-upload
              class="custom-upload"
              name="file"
              :multiple="false"
              :before-upload="handleBeforeUpload"
              :file-list="fileList"
              :remove="handleRemove"
            >
              <a-button class="upload-btn">
                <UploadOutlined />
                从本地上传
              </a-button>
            </a-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="doc" v-if="isShowDoc">
      <div class="close"> <button class="closeBtn" @click="close">关闭</button></div>
      <!-- 预览内容 -->
      <div class="pre-container">
        <!-- PDF预览 -->
        <VueOfficePdf v-if="fileType === 'pdf'" :src="fileUrl" @rendered="handleRendered" @error="handleError" />
        <!-- Word文档预览 -->
        <VueOfficeDocx v-else-if="fileType === 'docx'" :src="fileUrl" @rendered="handleRendered" @error="handleError" />
        <!-- Excel预览 -->
        <VueOfficeExcel
          v-else-if="fileType === 'xlsx' || fileType === 'xls'"
          :options="{ xls: true }"
          :src="fileUrl"
          @rendered="handleRendered"
          @error="handleError"
        />
        <img
          class="img-container"
          v-else-if="
            fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png' || fileType === 'gjf' || fileType === 'webp' || fileType === 'svg'
          "
          :src="fileUrl"
          alt=""
        />
        <!-- 不支持的文件类型 -->
        <div v-else class="unsupported">
          <p>不支持预览该文件类型: {{ fileType }}</p>
        </div>
        <!-- 加载状态 -->
        <div v-if="loading" class="loading">
          <p>文件加载中...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, watch, onUnmounted, defineAsyncComponent } from 'vue';
  import { SvgIcon } from '../Icon';
  import { Space, Button, Modal, Input, message } from 'ant-design-vue';
  // import AIChat from './index.vue';
  import { useUserStore } from '/@/store/modules/user';
  import {
    EditOutlined,
    DeleteOutlined,
    UploadOutlined,
    CopyOutlined,
    RightOutlined,
    DownOutlined,
    FastForwardFilled,
    RedoOutlined,
  } from '@ant-design/icons-vue';
  import { createVNode } from 'vue';
  import { marked } from 'marked';
  import katex from 'katex';
  import 'katex/dist/katex.min.css';
  // [perf-base-v1] 卡2b: echarts 改按需动态导入（见 initChart），此处仅保留类型导入（编译期擦除，无运行时依赖）
  import type { EChartsType } from 'echarts';
  // [perf-base-v1] 卡6: v-html 消毒——marked/katex 输出经公共 DOMPurify 白名单消毒后再进 formatMessage
  import { sanitizeHtml } from '/@/utils/markdownSafe';
  // [perf-base-v1] 卡7: Dify 接口地址配置化，原硬编码 http://39.97.59.228:8000/v1 改走 VUE_APP_URL.difyUrl（开发经 vite proxy /dify 转发）
  import { difyBase, difyApiKey } from '/@/utils/aiChatApi';
  // [perf-base-v1] 卡2b: @vue-office 三组件改异步加载，仅 isShowDoc 预览时才会拉取 office-preview chunk
  const VueOfficePdf = defineAsyncComponent(() => import('@vue-office/pdf/lib/v3/vue-office-pdf.mjs'));
  const VueOfficeDocx = defineAsyncComponent(() => import('@vue-office/docx/lib/v3/vue-office-docx.mjs'));
  const VueOfficeExcel = defineAsyncComponent(() => import('@vue-office/excel/lib/v3/vue-office-excel.mjs'));
  const TextArea = Input.TextArea; // 直接导入TextArea组件使用时打包报错
  const inputText = ref(''); // 输入框内容
  const refreshText = ref(''); //重新生成文本
  const sessionHistory = ref([]);
  const isShowChatBroad = ref(false);
  const editingId = ref<number | null>(null);
  const editText = ref('');
  const currentSessionID = ref('');
  const taskID = ref('');
  const messageID = ref('');
  const open = ref<boolean>(false);
  const isThinking = ref(false); //深度思考是否开启
  const Thinking = ref(false);
  const isShowDoc = ref(false);
  const fileType = ref('');
  const fileUrl = ref('');
  // [perf-base-v1] 卡7: API Key 改从 config.js（VUE_APP_URL.difyApiKey）读取，生产环境应由后端代理下发，勿依赖前端硬编码兜底值
  const APIKEY = ref('Bearer ' + difyApiKey);
  interface ListItem {
    id: number;
    name?: string;
  }
  interface Message {
    id: string; // 唯一标识（可用时间戳生成）
    type: 'user' | 'system' | 'response';
    content: String; // 原始 Markdown 字符串（用于拼接）
    parsedContent: String; // 解析后的 HTML（用于渲染）
    contentR1: String; // 原始思考过程 Markdown
    parsedContentR1: String; // 解析后的思考过程 HTML
    timestamp: number; // 排序依据
    isShowThink: boolean; //深度思考展示
    message_files?: Array<[]>; //文件信息
    echartsOption?: Object; //echart图表
  }
  // 定义消息历史数组类型
  const messageHistory = ref<Message[]>([]);
  const isFold = ref(true); // 是否折叠
  const userid = useUserStore().getUserInfo.id as string;
  const uploadedFiles = ref({}); //接口获取文件信息
  const askFile = ref({});
  const uploadfileType = ref(''); //提问框文件展示
  const askFileType = ref(''); //回答区域文件展示
  const message_files = ref([]);
  const fileList = ref([]);
  const suggestList = ref([]); //建议列表
  const loading = ref(false);
  // const chartRef = ref(null);
  const validEchartsOption = ref(null);
  const optionTextRef = ref(null);
  const echartsOption = ref({});
  let myChart: EChartsType | null = null;
  const chartDom = ref<HTMLDivElement | null>(null);
  // 初始化图表
  const initChart = async () => {
    const targetNode = document.getElementById('chart-target');
    if (!targetNode) {
      console.error('目标插入节点不存在！');
      return;
    }

    // [perf-base-v1] 卡2b: 仅在真正需要渲染图表时才动态加载 echarts
    const echarts = await import('echarts');

    // 2. 创建 ECharts 容器（带唯一 id，方便后续清理）
    const chartContainer = document.createElement('div');
    chartContainer.id = 'dynamic-echarts-container';
    // 必须设置宽高（继承目标节点宽高，或自定义）
    chartContainer.style.width = '100%';
    chartContainer.style.height = '100%';
    chartContainer.style.border = '1px solid #eee';

    // 3. 初始化 ECharts 实例到新建容器
    myChart = echarts.init(chartContainer);
    myChart.setOption(echartsOption.value);

    // 4. 将容器插入目标节点（清空原有内容，可选）
    targetNode.innerHTML = ''; // 清空目标节点原有内容（如需保留可注释）
    targetNode.appendChild(chartContainer);

    // 5. 监听窗口resize，自适应图表
    window.addEventListener('resize', handleResize);
  };
  // 图表自适应方法
  const handleResize = () => {
    myChart?.resize();
  };
  // 监听配置变化，确保DOM更新后初始化
  watch(
    () => echartsOption.value,
    async (newOption) => {
      if (!newOption || Object.keys(newOption).length === 0) return;
      await nextTick(); // 等待 DOM 渲染
      await initChart(); // [perf-base-v1] initChart 已异步化（内部动态 import echarts）
    },
    { deep: true, immediate: true }
  );

  // 文件预览
  const handleRendered = () => {
    loading.value = false;
    console.log('文件渲染完成');
  };
  const handleError = (error) => {
    loading.value = false;
    console.error('文件预览错误:', error);
  };
  // function previewFile(data) {
  //   fileType.value = data.extension;
  //   fileUrl.value = data.source_url;
  // }
  //启用深度思考
  const toggleThinking = () => {
    isThinking.value = !isThinking.value;
    if (isThinking.value) {
      APIKEY.value = 'Bearer app-7iLQR9T77YtwDYUYGPk1PFbi';
    } else {
      APIKEY.value = 'Bearer app-tSFRUnv0Qkbtik1dwtlhnpkd';
    }
  };
  // 折叠思考过程
  const isShow = (message) => {
    message.isShowThink = !message.isShowThink;
  };
  const dialogAreaRef = ref(null);
  // 滚动到底部的方法
  const scrollToBottom = async () => {
    // 等待 DOM 更新（如消息渲染完成）
    await nextTick();
    if (dialogAreaRef.value) {
      const el = dialogAreaRef.value;
      // 关键：scrollTop = scrollHeight（滚动内容总高度）
      el.scrollTop = el.scrollHeight;
    }
  };

  // 点击建议项时的处理函数
  const handleSuggestClick = (text) => {
    // 将选中的建议填充到文本框
    inputText.value = text;
  };
  function showAIChat() {
    isShowChatBroad.value = !isShowChatBroad.value;
    if (isShowChatBroad.value) {
      isShowDoc.value = false;
    }
  }
  //复制消息
  function copyToClipboard(text) {
    if (!text || text.trim() === '') {
      message.warn('没有可复制的内容');
      return;
    }
    // 2. 创建临时textarea 元素
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.top = '-999px';
    textarea.style.left = '-999px';
    textarea.style.width = '200px';
    textarea.style.height = '200px';
    document.body.appendChild(textarea);
    try {
      textarea.select();
      textarea.setSelectionRange(0, text.length);
      const isSuccessful = document.execCommand('copy');
      if (isSuccessful) {
        message.success('复制成功！');
      } else {
        throw new Error('复制命令执行失败');
      }
    } catch (err) {
      console.error('复制失败:', err);
      message.error('复制失败，请手动复制');
    } finally {
      document.body.removeChild(textarea);
    }
  }
  const initMarked = () => {
    marked.setOptions({
      gfm: true, // 启用GitHub风格的Markdown，包含表格
      breaks: false, // 禁用换行符转换
    });
  };
  // LaTeX 公式渲染
  const renderLatexInHtml = (html) => {
    // 匹配块级公式（$$...$$）
    const blockRegex = /\$\$(.*?)\$\$/gs;
    // 匹配行内公式（$...$）
    const inlineRegex = /\$(.*?)\$/g;
    // // 替换块级公式（居中显示）
    html = html.replace(blockRegex, (match, formula) => {
      return katex.renderToString(formula.trim(), {
        displayMode: true,
        throwOnError: false,
        strict: false,
        trust: true,
      });
    });
    // 替换行内公式（行内显示）
    html = html.replace(inlineRegex, (match, formula) => {
      return katex.renderToString(formula.trim(), {
        displayMode: false,
        throwOnError: false,
        strict: false,
      });
    });
    return html;
  };
  // Markdown + LaTeX 解析
  const parseMarkdownWithLatex = (mdStr) => {
    if (!mdStr) return '';
    try {
      let html = marked.parse(mdStr); // Markdown → HTML
      html = renderLatexInHtml(html); // 替换公式
      // [perf-base-v1] 卡6: marked.parse 结果包 DOMPurify 消毒，防 v-html XSS
      return sanitizeHtml(html);
    } catch (error) {
      console.error('解析失败：', error);
      return mdStr; // 降级显示原始字符串
    }
  };
  // echart 数据解析
  const parseEchart = (data) => {
    const reg = /```[\s\S]*?\n([\s\S]*?)```/;
    const match = data.match(reg);

    if (match && match[1]) {
      // 提取匹配到的JSON部分并解析
      echartsOption.value = JSON.parse(match[1].trim());
    }
    return match;
  };
  const triggerChart = async () => {
    await nextTick();
    await initChart(); // [perf-base-v1] initChart 已异步化（内部动态 import echarts）
  };
  //重新生成
  const refresh = () => {
    handleSend(refreshText.value);
  };
  //重新编辑
  const editAsk = (data) => {
    inputText.value = data;
  };
  //获取消息列表
  async function handleSend(data, files?) {
    refreshText.value = data;
    inputText.value = '';
    if (files) {
      askFileType.value = files?.mime_type?.startsWith('image') ? 'image' : 'document';
    }
    // message_files.value.push(files);
    const fileList = files ? [files] : [];
    uploadfileType.value = '';
    if (isThinking.value) {
      const newMessage = {
        id: `user_${Date.now()}`,
        type: 'user',
        content: '',
        parsedContent: data,
        contentR1: '',
        parsedContentR1: '',
        timestamp: Date.now(),
        isShowThink: true,
        message_files: fileList,
      };
      messageHistory.value.push(newMessage);
      message_files.value.push(files);
    } else {
      const newMessage = {
        id: `user_${Date.now()}`,
        type: 'user',
        content: '',
        parsedContent: data,
        contentR1: '',
        parsedContentR1: '',
        timestamp: Date.now(),
        isShowThink: false,
        message_files: fileList,
      };
      messageHistory.value.push(newMessage);
      message_files.value.push(files);
    }
    try {
      const response = await fetch(`${difyBase}/v1/chat-messages`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: APIKEY.value,
        },
        body: JSON.stringify({
          conversation_id: currentSessionID.value ? currentSessionID.value : '',
          query: data,
          ...(askFile.value?.id
            ? {
                files: [
                  {
                    type: askFileType.value == 'image' ? 'image' : 'document',
                    transfer_method: 'local_file',
                    upload_file_id: askFile.value.id,
                    url: '',
                  },
                ],
              }
            : {}),
          response_mode: 'streaming',
          user: userid,
          inputs: {},
        }),
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      uploadedFiles.value = {};
      const decoder = new TextDecoder('utf-8');
      const reader = response.body.getReader();
      let textBuffer = ''; // 使用字符串缓冲区来累积数据
      // 在组件中定义
      const currentProcessingMessage = ref(null);
      if (isThinking.value) {
        const newMessage = {
          id: `response_${Date.now()}`,
          type: 'response',
          content: '',
          parsedContent: '',
          contentR1: '',
          parsedContentR1: '',
          timestamp: Date.now(),
          isShowThink: true,
        };
        messageHistory.value.push(newMessage);
        currentProcessingMessage.value = newMessage; // 保存引用
      } else {
        const newMessage = {
          id: `response_${Date.now()}`,
          type: 'response',
          content: '',
          parsedContent: '',
          contentR1: '',
          parsedContentR1: '',
          timestamp: Date.now(),
          isShowThink: false,
        };
        messageHistory.value.push(newMessage);
        currentProcessingMessage.value = newMessage; // 保存引用
      }
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          if (textBuffer) {
            processLine(textBuffer);
          }
          break;
        }
        textBuffer += decoder.decode(value, { stream: true });
        // 处理每一行数据
        let lineIndex;
        while ((lineIndex = textBuffer.indexOf('\n')) !== -1) {
          const line = textBuffer.substring(0, lineIndex).trim();
          textBuffer = textBuffer.substring(lineIndex + 1);

          if (line) {
            processLine(line);
          }
        }
      }
      function processLine(line) {
        if (line.startsWith('data: ')) {
          try {
            const jsonStr = line.substring('data: '.length);
            const data = JSON.parse(jsonStr);
            switch (data.event) {
              case 'message':
                if (data.answer) {
                  const targetMessage = messageHistory.value.find((msg) => msg.id === currentProcessingMessage.value.id);
                  if (!targetMessage) break;
                  let currentChunk = data.answer;

                  // 检查是否包含起始标签
                  const startIndex = currentChunk.indexOf('<think>');
                  if (startIndex !== -1) {
                    // 找到起始标签：将标签前的内容作为正文
                    if (startIndex > 0) {
                      targetMessage.content += currentChunk.substring(0, startIndex);
                      targetMessage.parsedContent = parseMarkdownWithLatex(targetMessage.content);
                    }
                    // 进入思考模式，将标签后的内容追加到contentR1
                    Thinking.value = true;
                    const remainingContent = currentChunk.substring(startIndex + '<think>'.length);
                    if (remainingContent) {
                      targetMessage.contentR1 += remainingContent;
                      targetMessage.parsedContentR1 = parseMarkdownWithLatex(targetMessage.contentR1);
                    }
                  } else if (Thinking.value) {
                    // 结束标签
                    const endIndex = currentChunk.indexOf('</think>');
                    if (endIndex !== -1) {
                      // 找到结束标签：标签前的内容追加到contentR1
                      if (endIndex > 0) {
                        targetMessage.contentR1 += currentChunk.substring(0, endIndex);
                        targetMessage.parsedContentR1 = parseMarkdownWithLatex(targetMessage.contentR1);
                      }
                      // 将标签后的内容作为正文
                      const remainingContent = currentChunk.substring(endIndex + '</think>'.length);
                      if (remainingContent) {
                        targetMessage.content += remainingContent;
                        targetMessage.parsedContent = parseMarkdownWithLatex(targetMessage.content);
                      }
                      targetMessage.content += currentChunk;
                      Thinking.value = false;
                      targetMessage.isShowThink = false;
                    } else {
                      // 没有结束标签，继续追加到contentR1
                      targetMessage.contentR1 += currentChunk;
                      targetMessage.parsedContentR1 = parseMarkdownWithLatex(targetMessage.contentR1);
                    }
                  } else {
                    targetMessage.content += currentChunk;
                    targetMessage.parsedContent = parseMarkdownWithLatex(targetMessage.content);
                  }
                  scrollToBottom(); // 每次接收消息都滚动
                }
                if (data.task_id && !taskID.value) taskID.value = data.task_id;
                if (data.conversation_id && !currentSessionID.value) currentSessionID.value = data.conversation_id;
                if (data.message_id && !messageID.value) {
                  messageID.value = data.message_id;
                }
                break;
            }
          } catch (error) {
            console.warn('Error parsing stream chunk:', error, 'Chunk:', line);
          }
        }
      }
      getNextSuggest();
    } catch (error) {
      console.error('Error in handleSend:', error);
      // 在 UI 上显示错误信息
      messageHistory.value.push({
        id: `system_${Date.now()}`,
        type: 'system',
        content: '',
        parsedContent: '请求错误',
        contentR1: '',
        parsedContentR1: '',
        timestamp: Date.now(),
        isShowThink: false,
      });
    }
  }
  //创建新对话
  async function addNew() {
    messageHistory.value = [];
    currentSessionID.value = '';
    taskID.value = '';
    messageID.value = '';
  }
  // 上传文件
  const showModal = (data) => {
    open.value = data;
  };
  const close = () => {
    isShowDoc.value = false;
  };
  const showPreview = (data) => {
    fileType.value = data[0].extension ? data[0].extension : data[0].filename.split('.').pop();
    fileUrl.value = data[0].source_url ? data[0].source_url : data[0].url;
    isShowDoc.value = true;
  };
  //删除文件
  const deleteFile = () => {
    uploadedFiles.value = {};
  };
  // 上传文件
  const handleBeforeUpload = async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('user', userid);

    try {
      const response = await fetch(`${difyBase}/v1/files/upload`, {
        method: 'POST',
        headers: {
          Authorization: APIKEY.value,
        },
        body: formData,
      });

      const result = await response.json();
      if (response.ok) {
        uploadedFiles.value = result;
        askFile.value = result;
        uploadfileType.value = result.mime_type.startsWith('image') ? 'image' : 'document';
        // previewFile(result);
      } else {
        message.error(`上传失败: ${result.message || '网络错误'}`);
      }
    } catch (error) {
      console.error('保存失败:', error);
      message.error('上传失败，请重试');
    }
    return false;
  };

  const handleRemove = (file) => {
    const index = fileList.value.findIndex((item) => item.uid === file.uid);
    if (index !== -1) {
      fileList.value.splice(index, 1);
    }
  };
  //停止响应
  async function stopReq() {
    try {
      let response = await fetch(`${difyBase}/v1/chat-messages/${taskID.value}/stop`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: APIKEY.value,
        },
        body: JSON.stringify({
          user: userid,
        }),
      });
      if (!response) {
        throw new Error('Network response was not ok');
      }
    } catch (error) {
      console.error('保存失败:', error);
    }
  }
  //获取具体会话记录
  async function sessionsHistory(id: string, retryCount = 0) {
    const API_KEYS = ['Bearer app-tSFRUnv0Qkbtik1dwtlhnpkd', 'Bearer app-7iLQR9T77YtwDYUYGPk1PFbi'];
    // 最大重试次数
    const maxRetries = API_KEYS.length - 1;
    try {
      let response = await fetch(`${difyBase}/v1/messages?conversation_id=${id}&user=${userid}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: API_KEYS[retryCount],
        },
      });
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      const data = await response.json();
      if (data.data.length > 0) {
        messageHistory.value = [];
        data.data.forEach((item: any) => {
          currentSessionID.value = item.conversation_id;
          messageHistory.value.push({
            id: `user_${Date.now()}`,
            type: 'user',
            content: '',
            parsedContent: item.query,
            contentR1: '',
            parsedContentR1: '',
            message_files: item.message_files,
            timestamp: Date.now(),
            isShowThink: false,
          });
          const answer = item.answer;
          // 查找<think>
          const startIndex = answer.indexOf('<think>');
          const endIndex = answer.indexOf('</think>');
          const isChart = answer.indexOf('echarts');
          let content = '';
          let contentR1 = '';
          // 根据标签判断
          if (startIndex !== -1 && endIndex !== -1) {
            content = answer.substring(0, startIndex) + answer.substring(endIndex + '</think>'.length);
            contentR1 = answer.substring(startIndex + '<think>'.length, endIndex);
          } else if (startIndex !== -1) {
            // 只有起始标签
            content = answer.substring(0, startIndex);
            contentR1 = answer.substring(startIndex + '<think>'.length);
          } else if (endIndex !== -1) {
            // 只有结束标签
            content = answer.substring(endIndex + '</think>'.length);
            contentR1 = answer.substring(0, endIndex);
          } else {
            // 没有标签
            content = answer;
          }
          if (isChart != -1) {
            // 添加到消息历史
            messageHistory.value.push({
              id: `system_${Date.now()}`,
              type: 'system',
              content: '',
              parsedContent: '',
              contentR1: '',
              parsedContentR1: parseMarkdownWithLatex(contentR1.trim()),
              timestamp: Date.now(),
              isShowThink: contentR1.length > 0, // 如果有思考内容则显示
              echartsOption: parseEchart(content.trim()),
            });
            triggerChart();
          } else {
            // 添加到消息历史
            messageHistory.value.push({
              id: `system_${Date.now()}`,
              type: 'system',
              content: '',
              parsedContent: parseMarkdownWithLatex(content.trim()),
              contentR1: '',
              parsedContentR1: parseMarkdownWithLatex(contentR1.trim()),
              timestamp: Date.now(),
              isShowThink: contentR1.length > 0, // 如果有思考内容则显示
            });
          }
        });
      }
    } catch (error) {
      // 判断是否达到最大重试次数
      if (retryCount < maxRetries) {
        console.warn(`请求失败，正在尝试第 ${retryCount + 2} 个 API Key...`);
        return sessionsHistory(id, retryCount + 1);
      } else {
        console.error('所有 API Key 均尝试失败:', error);
        throw error;
      }
    }
    editingId.value = null;
  }
  //获取下一轮建议问题列表
  //停止响应
  async function getNextSuggest() {
    try {
      let response = await fetch(`${difyBase}/v1/messages/${messageID.value}/suggested?user=${userid}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: APIKEY.value,
        },
      });
      const data = await response.json();
      suggestList.value = data.data;
      if (!response) {
        throw new Error('Network response was not ok');
      }
    } catch (error) {
      console.error('保存失败:', error);
    }
  }
  //编辑标题
  const startEditing = (item: ListItem) => {
    editingId.value = item.id;
    editText.value = item.name || '';
  };
  // 保存修改
  const handleSave = async (item: ListItem) => {
    try {
      let response = await fetch(`${difyBase}/v1/conversations/${item.id}/name`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: APIKEY.value,
        },
        body: JSON.stringify({
          name: editText.value,
          user: userid,
        }),
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      item.name = editText.value;
    } catch (error) {
      console.error('保存失败:', error);
    }
    editingId.value = null;
  };
  // 删除会话
  const startDelete = async (item: ListItem) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除会话 "${item.name || '新会话'}" 吗？此操作不可撤销。`,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        // 原有删除逻辑不变
        try {
          let response = await fetch(`${difyBase}/v1/conversations/${item.id}`, {
            method: 'DELETE',
            headers: {
              'Content-Type': 'application/json',
              Authorization: APIKEY.value,
            },
            body: JSON.stringify({
              user: userid,
            }),
          });
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          getHistoryList();
        } catch (error) {
          console.error('删除失败:', error);
          Modal.error({
            title: '删除失败',
            content: '删除会话时出现错误，请稍后重试。',
          });
        }
      },
    });
  };
  const fold = () => {
    isFold.value = !isFold.value;
    if (!isFold.value) {
      getHistoryList();
    }
  };
  // 获取历史会话列表
  async function getHistoryList() {
    sessionHistory.value = [];
    try {
      const fetch1 = fetch(`${difyBase}/v1/conversations?user=${userid}`, {
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer app-tSFRUnv0Qkbtik1dwtlhnpkd',
        },
      })
        .then((res) => {
          return res.json();
        })
        .catch((err) => {
          console.error('第一个请求错误:', err);
          return { data: [] }; // 失败时返回空数组
        });

      const fetch2 = fetch(`${difyBase}/v1/conversations?user=${userid}`, {
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer app-7iLQR9T77YtwDYUYGPk1PFbi',
        },
      })
        .then((res) => {
          return res.json();
        })
        .catch((err) => {
          console.error('第二个请求错误:', err);
          return { data: [] }; // 失败时返回空数组
        });

      // 等待两个请求完成
      const [data1, data2] = await Promise.all([fetch1, fetch2]);
      // 合并两个数组（确保是数组）
      const list1 = Array.isArray(data1.data) ? data1.data : [];
      const list2 = Array.isArray(data2.data) ? data2.data : [];
      // 合并数组并赋值给 sessionHistory
      sessionHistory.value = [...list1, ...list2];
      // 设置当前会话ID（如果有数据）
      if (sessionHistory.value.length > 0) {
        currentSessionID.value = sessionHistory.value[0].id;
      }
    } catch (error) {
      console.error('获取历史数据失败：', error);
      // 错误处理（比如提示用户）
    }
  }
  //格式化消息
  const formatMessage = (text) => {
    if (!text) return '';
    let formatted = text
      // 处理换行
      .replace(/\n\n/g, '<br>')
      .replace(/\n###/g, '<br>')
      .replace(/###/g, '')
      .replace(/---/g, '')
      .replace(/^- /gm, '<br> - ')
      // 处理粗体
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      // 处理斜体
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      // 处理行内代码
      .replace(/`([^`]+)`/g, '<code>$1</code>');
    return formatted;
  };
  // 初始化按钮定位
  onMounted(() => {
    getHistoryList();
    // 初始化（仅执行一次）
    initMarked();
    triggerChart();
  });
  onUnmounted(() => {
    // 卸载时销毁实例，清理 DOM
    if (myChart) {
      myChart.dispose();
      myChart = null;
    }
    const chartContainer = document.getElementById('dynamic-echarts-container');
    if (chartContainer && chartContainer.parentNode) {
      chartContainer.parentNode.removeChild(chartContainer);
    }
    window.removeEventListener('resize', handleResize);
  });
</script>

<style lang="less" scoped>
  .btn-header {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .mini-container {
    display: flex;
    flex-direction: row;
  }
  .mini-chat {
    display: flex;
    min-width: none;
    width: 950px;
    height: 85%;
    border-radius: 4px;
    position: fixed;
    top: 50px;
    right: 20px;
    padding: 10px;
    background-color: #0a1a2f;
    background-image:
      linear-gradient(to bottom, #0b69b6 1%, #0a1a2f 100%), linear-gradient(to left, #0b69b6, #0a1a2f), linear-gradient(to top, #0b69b6, #0a1a2f),
      linear-gradient(to right, #0b69b6, #0a1a2f);
    background-size:
      100% 5px,
      5px 100%,
      100% 5px,
      5px 100%;
    background-position:
      top left,
      top right,
      bottom right,
      bottom left;
    background-repeat: no-repeat;
    z-index: 9999999;
    color: #fff;
  }
  .doc {
    display: flex;
    flex-direction: column;
    min-width: 600px;
    height: 85%;
    border-radius: 4px;
    position: fixed;
    top: 50px;
    right: 51%;
    padding: 10px;
    background-color: #0a1a2f;
    background-image:
      linear-gradient(to bottom, #0b69b6 1%, #0a1a2f 100%), linear-gradient(to left, #0b69b6, #0a1a2f), linear-gradient(to top, #0b69b6, #0a1a2f),
      linear-gradient(to right, #0b69b6, #0a1a2f);
    background-size:
      100% 5px,
      5px 100%,
      100% 5px,
      5px 100%;
    background-position:
      top left,
      top right,
      bottom right,
      bottom left;
    background-repeat: no-repeat;
    z-index: 9999999;
    color: #fff;
  }

  .close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 1px;
    border-radius: 8px;
  }

  .closeBtn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .closeBtn:hover {
    background-color: #0056b3;
  }
  .left-side {
    background: #0c2842;
    transition: width 0.5s ease; /* 平滑过渡动画 */
    width: 140px; /* 展开时宽度 */
    position: relative; /* 用于按钮定位 */
  }
  .left-side.collapsed {
    width: 40px; /* 折叠时宽度 */
  }

  .addBtn {
    height: 30px;
    position: absolute;
    background-size: 100% 100%;
    background-position: center;
    padding: 2px;
    right: 10px;
    bottom: 40px;
    left: 10px;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
  }
  .custom-list {
    height: 650px;
    overflow-y: auto;
  }
  .text-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
  }
  .btn-container {
    display: flex;
  }
  .jeecg-layout-header-action span[role='img'] {
    padding: 0;
  }
  .text-ellipsis {
    flex: 1;
  }
  .edit-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
  }
  .edit-icon {
    flex-shrink: 0;
    margin-left: auto;
    line-height: 23px;
  }
  .delete-icon {
    flex-shrink: 0;
    margin-left: auto;
    line-height: 23px;
  }
  .edit-icon:hover {
    color: #1890ff !important;
    cursor: pointer;
  }
  .delete-icon:hover {
    color: #1890ff !important;
    cursor: pointer;
  }
  .edit-input {
    font-size: 10px;
  }
  .btn-text-bg {
    width: 14px;
    height: 14px;
    position: absolute;
    background-size: 100% 100%;
    right: 10px;
    top: 10px;
    left: 10px;
    bottom: 10px;
  }
  .btn-text {
    margin-left: 3px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    margin-left: 30px;
    line-height: 29px;
  }
  .historyBtn {
    width: 20px;
    height: 20px;
    position: absolute;
    background-size: 100% 100%;
    background-position: center;
    padding: 2px;
    right: 10px;
    top: 10px;
  }
  .historyBtn1 {
    width: 20px;
    height: 20px;
    position: absolute;
    background-size: 100% 100%;
    background-position: center;
    left: 3px;
  }
  .divider0 {
    border-bottom: 1px solid #1074c1;
    width: auto;
    margin: 0 10px;
    height: 13%;
    display: block;
    background: transparent;
  }
  .foldBtn {
    width: 20px;
    height: 20px;
    position: absolute;
    background-size: 100% 100%;
    background-position: center;
    padding: 2px;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
  }

  .right-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 134px) !important;
    .title {
      text-align: center;
      font-size: 14px;
      padding: 5px;
    }
    .dialog-area {
      flex: 1;
      gap: 30px;
      overflow-y: auto;
      padding: 5px;
      display: flex;
      flex-direction: column;
      color: #fff;

      .ask-message {
        padding: 10px;
        border-radius: 5px;
        background: #0c2842;
        max-width: 300px;
        min-width: 50px;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: auto;
        line-height: 1.5;
      }
      .answer-message {
        padding: 10px;
        border-radius: 5px;
        background: #0c2842;
        max-width: 90%;
      }
    }

    .input-area {
      padding: 5px;
      background-color: #043256;
      border: 1px solid #2cb6ff;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 5px;
      min-height: 170px;
      height: auto;
      margin: 5px;
      position: relative;
    }
    /* 文件展示区域 */
    .img-preview {
      position: relative;
      width: 50px;
      height: 50px;
    }
    .img-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .file-preview {
      position: relative;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      background: #f9fafb;
      box-sizing: border-box;
    }
    .file-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #333;
    }
    .clear-btn {
      border: none;
      background: #ff4d4f;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      cursor: pointer;
      font-size: 12px;
    }
    .file-content {
      margin-top: 6px;
      font-size: 13px;
      color: #666;
      line-height: 1.4;
    }
    /* 文件列表容器 */
    .uploaded-files {
      padding: 8px;
      background-color: #f5f5f5;
      border-radius: 4px;
      min-height: 40px;
    }

    /* 单个文件项 */
    .file-item {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      margin-right: 8px;
      margin-bottom: 8px;
      background-color: #fff;
      border: 1px solid #e9e9e9;
      border-radius: 4px;
    }

    /* 文件名 */
    .file-name {
      margin-left: 8px;
      margin-right: 8px;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ant-input {
      border: none;
      background-color: rgba(255, 255, 255, 0) !important;
      color: #fff;
    }
    .ant-input:focus {
      border: none; /* 聚焦时无边框 */
      outline: none; /* 聚焦时无轮廓 */
      box-shadow: none; /* 移除可能存在的阴影效果 */
    }
    .ctrl-btn {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .question-input {
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #e2e8f0 !important;
      border-radius: 8px !important;
      padding: 12px 16px !important;
      font-size: 14px !important;
    }

    .question-input::placeholder {
      color: #64748b !important;
    }

    .control-btn {
      height: 25px;
      background-color: #043256;
      border: 1px solid #2cb6ff;
      color: #fff;
      font-size: 10px;
      margin-right: 10px;
      cursor: pointer;
      transition: background-color 0.2s ease; /* 平滑过渡效果 */
    }
    /* 激活状态样式（点击后） */
    .control-btn.active {
      background-color: #2cb6ff; /* 蓝色背景（Ant Design 主色） */
      color: white; /* 白色文字 */
    }
    .control-btn1 {
      height: 20px;
      background-color: #234a6b;
      border: 1px solid #234a6b;
      color: #fff;
      font-size: 10px;
      margin-right: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .control-btn2 {
      height: 20px;
      background-color: #2cb6ff;
      border: 1px solid #2cb6ff;
      color: #fff;
      font-size: 10px;
      margin-right: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }
    /* 文件上传区 */
    .file-upload {
      position: absolute;
      right: 20px;
      bottom: 70px;
      width: 180px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border: 1px solid #2cb6ff;
      background-color: #234a6b;
      border-radius: 6px;
      padding: 10px;
    }

    .input-container {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .file-input {
      flex: 1;
      background-color: #234a6b;
      border-color: #2cb6ff !important;
      color: #e2e8f0 !important;
      border-radius: 6px !important;
      font-size: 10px !important;
      padding-right: 70px !important;
      height: 36px !important;
      width: 100% !important;
    }

    .confirm-btn {
      position: absolute;
      right: 5px;
      background-color: #2cb6ff;
      border: none;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      padding: 4px 10px;
      cursor: pointer;
      transition: all 0.2s;
      height: 28px;
    }

    .confirm-btn:hover {
      background-color: #2cb6ff;
    }

    .custom-upload {
      width: 100%;
      padding: 0 !important;
    }

    .upload-btn {
      background-color: #234a6b !important;
      border: 1px solid #2188c3 !important;
      color: #dbeafe !important;
      border-radius: 6px !important;
      font-size: 12px !important;
      cursor: pointer;
      transition: all 0.2s;
      padding: 8px 0 !important;
      width: 190% !important;
      height: 36px !important;
      box-sizing: border-box !important;
    }
    .upload-btn:hover {
      background-color: #1f84bd !important;
      color: #fff !important;
    }
    .custom-upload .ant-upload-select:hover .ant-btn {
      border-color: #1f84bd !important;
    }
    .message-wrapper.ai-message-wrapper {
      display: flex;
      align-items: flex-start;
    }
    .answerIcon {
      flex: 0 0 45px;
    }

    .suggestion-item {
      height: 30px;
      margin-left: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      border: 1px solid #1890ff;
      color: white;
      border-radius: 4px;
      cursor: pointer;
      width: 33%;
      font-size: 12px;
    }
    .thinking-section {
      border-left: 3px solid #e5e7eb;
      padding-left: 12px;
      margin-bottom: 16px;
    }

    .thinking-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      cursor: pointer;
      user-select: none;
    }

    .thinking-title {
      font-size: 14px;
      font-weight: 500;
      color: #6b7280;
    }
  }
</style>
<style scoped>
  .zxm-popover-inner-content {
    padding: 1px;
  }
  .message-wrapper {
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .user-message-wrapper {
    flex-direction: row-reverse;
  }
  .ai-message-wrapper {
    flex-direction: row;
  }
  /* 鼠标滑过 .message-wrapper 时，显示图标 */
  .ai-message-wrapper:hover .copy-icon-container {
    opacity: 1;
    visibility: visible;
  }
  .user-message-wrapper:hover .copy-icon-container {
    opacity: 1;
    visibility: visible;
  }
  .copy-icon {
    font-size: 16px;
    color: #666;
    cursor: pointer;
  }
  /* 默认隐藏，hover 时显示 */
  .copy-icon-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    bottom: -20px;
    right: 15%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
  }
  /* 复制图标样式 */
  .copy-icon {
    font-size: 16px;
    cursor: pointer;
    margin-right: 20%;
    float: right;
    color: #fff;
  }
  .message-wrapper:hover .copy-icon {
    opacity: 1;
  }
  .copy-icon:hover {
    color: #1890ff;
  }
  ::v-deep table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    border: 1px solid #333;
  }
  ::v-deep th {
    border: 1px solid #333;
    background-color: #234a6b;
    padding: 5px;
    text-align: center;
  }
  ::v-deep td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: center;
  }
</style>
<style scoped>
  /* 已上传文件列表 */
  .file-list {
    margin-top: 20px;
  }
  .pre-container {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .img-container {
  }
  .vue-office-excel {
    background: #fff !important;
  }

  .file-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: background-color 0.2s ease;
  }

  .file-item:hover {
    background-color: #f0f2f5;
  }

  .file-info {
    flex: 1;
    overflow: hidden;
  }

  .file-name {
    font-size: 15px;
    color: #1d2129;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
  }

  .file-actions {
    display: flex;
    gap: 10px;
  }

  .btn {
    padding: 0px 15px;
    margin-left: 10px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-preview {
    background-color: #165dff;
    color: white;
  }

  .btn-preview:hover {
    background-color: #0d47a1;
  }

  .btn-delete {
    background-color: #f2f3f5;
    color: #4e5969;
  }

  .btn-delete:hover {
    background-color: #e5e6eb;
    color: #1d2129;
  }
</style>