r2r_pbl/src/components/pages/knowledge/folderFileBox.vue

<template>
  <div class="f_box" @dragover.prevent @drop="handleDrop">
    <div class="f_box_top">
      <div class="f_box_top_left">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item style="color: #000; font-weight: 600"
            ><span @click="goBackPage">{{
              lang.rootDirectory
            }}</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ data.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- <div class="f_box_top_title">文件</div> -->
      </div>
      <div class="f_box_top_center">
        <span :class="{ active: fileType == 1 }" @click="checkType(1)">{{
          lang.fileData
        }}</span>
        <span :class="{ active: fileType == 2 }" @click="checkType(2)">{{
          lang.backTest
        }}</span>
      </div>
    </div>
    <div class="f_box_container" v-if="fileType == 1">
      <div class="f_box_top_right">
        <div class="input">
          <input
            type="text"
            v-model="fileName"
            :placeholder="lang.selectFileName"
            @input="debouncedSearch"
          />
          <div class="serch"></div>
        </div>
        <!-- <el-button type="primary" size="small" @click="resetGraphs">
          重置文件夹
        </el-button>
        <el-button type="primary" size="small" @click="getGraph">
          获取文件夹图谱
        </el-button> -->
        <el-button type="primary" size="small" @click="serchFile">
          <img
            style="
              vertical-align: middle;
              transform: scale(1.1);
              padding-bottom: 2px;
              box-sizing: border-box;
            " src="../../../assets/shuax.svg" alt=""/>
          {{ lang.flushed }}
        </el-button>
        <el-button v-if="userid == data.userid" type="primary" icon="el-icon-plus" size="small"
                   @click="addImg($event)">{{ lang.uploadFile }}
          <input type="file" accept="*" style="display: none" multiple="multiple"
                 @change="beforeUpload($event)"/></el-button>
        <el-button v-if="userid == data.userid" type="primary" icon="el-icon-plus" size="small"
                   @click="importFromWebpage($event)">{{ lang.importFromWebpage }}
          <!--          <input-->
          <!--            type="file"-->
          <!--            accept="*"-->
          <!--            style="display: none"-->
          <!--            multiple="multiple"-->
          <!--            @change="importFromWebpage($event)"-->
          <!--            />-->
        </el-button>
        <el-button type="primary" size="small" @click="openG" v-if="userid == data.userid && data.isMo == '2'">
          <img style="vertical-align: middle" src="../../../assets/ETL.svg" alt=""/>
          {{ lang.associatedFiles }}
        </el-button>

        <el-button
          type="primary"
          v-if="checkArray.length && userid == data.userid"
          size="small"
          @click="batchRemove"
        >
          <img
            style="vertical-align: middle; padding-bottom: 3px"
            src="../../../assets/yichuBtn.svg"
            alt=""
          />
          {{ lang.remove }}</el-button
        >
        <el-button
          type="danger"
          style="background: #f56c6c"
          v-if="checkArray.length && userid == data.userid"
          size="small"
          @click="batchDelete"
        >
          <img
            style="vertical-align: middle; padding-bottom: 3px"
            src="../../../assets/delBtn.svg"
            alt=""
          />
          {{ lang.delete }}</el-button
        >
        <div
          v-if="checkArray.length"
          style="
            margin-left: 12px;
            color: #b0b0b0;
            font-size: 14px;
            flex-shrink: 0;
            line-height: 35px;
          "
        >
            <span v-if="checkArray.length == 1">{{ lang.x_items_selected.replace("${x}",checkArray.length) }}</span>
            <span v-if="checkArray.length > 1">{{ lang.x_items_selected2.replace("${x}",checkArray.length) }}</span>
        <!-- {{ lang.x_items_selected.replace("${x}",checkArray.length) }} -->
          <!-- {{ lang.selectedFiles }}&nbsp;{{ checkArray.length }}&nbsp;{{
            lang.piece
          }} -->
        </div>

        <!-- <div class="btn" @click="serchFile">刷新</div>
      <div class="btn" @click="addImg($event)">
        上传文件
        <input
          type="file"
          accept="*"
          style="display: none"
          multiple="multiple"
          @change="beforeUpload($event)"
        />
      </div> -->
        <!-- <div class="btn" @click="openG" v-if="userid == data.userid && data.isMo == '2'">关联文件</div>
      <div class="btn" @click="batchRemove">移除</div>
      <div class="btn delBtn" @click="batchDelete">删除</div> -->
      </div>
      <!-- <div class="f_box_top">
      <div class="f_box_top_left"></div>
      <div class="f_box_top_right">

      </div>
    </div> -->
      <!-- <div class="none_box" v-if="fileArray.length == 0">暂无上传文件</div> -->
      <!-- v-else-if="stype == '2' && fileArray.length" -->

      <div
        v-show="fileType == 1"
        class="f_box_file_list"
        v-loading.body="isLoading"
      >
        <div class="list_file_box">
          <el-table
            :data="fileArray"
            border
            style="width: 100%; cursor: pointer"
            max-height="800px"
            @selection-change="handleSelectionChange"
            ref="myTable"
            :row-key="(row) => row.id"
            @row-click="checkFile"
          >
            <template #empty>
              <div class="customC">
                <div style="height: 50px; line-height: 50px; width: 47.4px">
                  <img
                    style="width: 100%"
                    src="../../../assets/flieKong.svg"
                    alt=""
                  />
                </div>
                <div style="height: 50px; line-height: 40px">
                  {{ lang.noDataContent }}
                </div>
              </div>
            </template>
            <el-table-column
              type="selection"
              width="50px"
              :reserve-selection="true"
              fixed
            ></el-table-column>
            <el-table-column
              prop="name"
              :label="lang.fileName"
              show-overflow-tooltip
              min-width="150px"
            ></el-table-column>
            <el-table-column
              prop="folderName"
              :label="lang.folderBelongs"
              show-overflow-tooltip
              min-width="150px"
            ></el-table-column>
            <el-table-column
              prop="username"
              :label="lang.owner"
              show-overflow-tooltip
              width="100px"
            ></el-table-column>

            <el-table-column :label="lang.sliceClassification" width="100px">
              <template slot-scope="scope">
                {{ getState(scope.row.ingestionStatus) }}
              </template>
            </el-table-column>
            <!-- <el-table-column :label="lang.graphExtraction" width="100px">
              <template slot-scope="scope">
                {{ getState2(scope.row.extractionStatus) }}
              </template>
            </el-table-column> -->
            <el-table-column
              :label="lang.fileType"
              show-overflow-tooltip
              width="100px"
            >
              <template slot-scope="scope">
                {{ scope.row.documentType ? scope.row.documentType : "-" }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="公开状态" show-overflow-tooltip width="80px"></el-table-column> -->
            <el-table-column
              prop="time"
              :label="lang.uploadTime"
              show-overflow-tooltip
              width="100px"
            >
              <template slot-scope="scope">
                {{ scope.row.time }}
              </template>
            </el-table-column>
            <el-table-column :label="lang.operate" width="100px" fixed="right">
              <template slot-scope="scope">
                <el-popover
                  placement="bottom-end"
                  trigger="hover"
                  visible-arrow
                  popper-class="custom-popover"
                  width="100px"
                >
                  <div class="BtnHP">
                    <div class="BtnHPDel1">
                      <!-- <el-button
                        type="primary"
                        size="small"
                        @click="extractFile(scope.row)"
                        v-if="userid == data.userid "
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        >提取</el-button
                      > -->
                      <div
                        class="btnBh"
                        v-show="false"
                        @click="extractFile(scope.row)"
                        @mouseover="isHover = true"
                        v-if="userid == data.userid"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        @mouseleave="isHover = false"
                      >
                        <img
                          style="width: 14px"
                          :src="isHover ? tqList2 : tqList"
                          alt=""
                        />
                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">{{
                          lang.extract
                        }}</span>
                      </div>
                      <!-- <el-button
                        type="primary"
                        size="small"
                        @click="checkFile(scope.row)"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        >查看</el-button
                      > -->
                      <div
                        class="btnBh"
                        @click="checkFile(scope.row)"
                        @mouseover="isHover2 = true"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        @mouseleave="isHover2 = false"
                      >
                        <img :src="isHover2 ? look2 : look1" alt="" />
                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">{{
                          lang.view
                        }}</span>
                      </div>
                    </div>

                    <div
                      class="btnBh"
                      @click="removeFile(scope.row.id, scope.row.documentid)"
                      @mouseover="isHover3 = true"
                      v-if="userid == data.userid && data.isMo == '2'"
                      @mouseleave="isHover3 = false"
                    >
                      <img
                        style="width: 14px"
                        :src="isHover3 ? yichu2 : yichu"
                        alt=""
                      />
                      <span :class="isHover3 ? 'lookHp2' : 'lookHp1'">{{
                        lang.remove
                      }}</span>
                    </div>
                    <div
                      class="btnBh"
                      @click="downloadFile(scope.row)"
                      @mouseover="isHover4 = true"
                      :disabled="scope.row.ingestionStatus == 'failed'"
                      @mouseleave="isHover4 = false"
                    >
                      <img :src="isHover4 ? download2 : download" alt="" />
                      <span :class="isHover4 ? 'lookHp2' : 'lookHp1'">{{
                        lang.download
                      }}</span>
                    </div>
                    <!-- <el-button
                      type="primary"
                      size="small"
                      v-if="userid == data.userid && data.isMo == '2'"
                      @click="removeFile(scope.row.id, scope.row.documentid)"
                      >移除</el-button
                    > -->

                    <!-- <el-button
                      type="danger"
                      size="small"
                      v-if="userid == scope.row.userid"
                      @click="deleteFile(scope.row.id, scope.row.documentid)"
                      >删除</el-button
                    > -->
                    <div
                      style="
                        background-color: #e7e7e7;
                        width: 100%;
                        height: 0.5px;
                        margin: 5px 0;
                      "
                    ></div>
                    <div class="BtnHPDel">
                      <div
                        class="btnBh2"
                        @click="deleteFile(scope.row.id, scope.row.documentid)"
                        v-if="scope.row.userid == userid"
                      >
                        <img src="../../../assets/listdel.svg" alt="" />
                        <span style="color: #de4c41">{{ lang.delete }}</span>
                      </div>
                    </div>
                  </div>
                  <el-button
                    slot="reference"
                    class="BtnH"
                    style="border: none; padding: 5px"
                    @click.stop=""
                  >
                    <i class="el-icon-more"></i>
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationArea">
          <span>{{ lang.a_total_of_x_items.replace("${x}", total) }}</span>
          <el-pagination
            class="pageBox"
            style="margin-top: 10px"
            layout="prev, pager, next, slot"
            :page-size="limit"
            :total="total"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
            ><el-select
              v-model="limit"
              @change="handleSizeChange"
              class="file_mySelect"
            >
              <el-option
                v-for="item in [10, 20, 50, 100]"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-pagination>
        </div>

        <div v-if="proVisible" class="mask">
          <div class="progressBox">
            <div class="lbox">
              {{ lang.uploadWait }}<img src="../../../assets/KekeLoading.gif" />
            </div>
            <div class="lbox_count" v-if="!webUrlDialogVisible">{{ pcount }} / {{ ptotal }}</div>
          </div>
        </div>
      </div>
    </div>
    <testBox
      v-if="fileType == 2"
      :userid="userid"
      :folderid="folderid"
    ></testBox>
    <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
    <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
    <wOffice
      :dialogVisibleOffice.sync="dialogVisibleOffice"
      :url="wurl"
    ></wOffice>
    <relateFiles ref="relateFiles"></relateFiles>
    <checkDialog ref="checkDialog"></checkDialog>
    <WebCrawlDialog :visible.sync="webUrlDialogVisible" :input-url.sync="webInputUrl" @confirm="handleWebUrlConfirm"/>
    <el-dialog
      :title="lang.prompt2"
      :visible.sync="promptDialog"
      class="fileDialogBlock"
      :close-on-click-modal="false"
      :before-close="handleClose" 
    >
      <span class="promptBox" v-loading="promptLoading">
        <!-- <el-input v-model="prompt" :placeholder="lang.promptPlaceholder" class="promptInput"></el-input> -->
        <el-input type="textarea" v-model="prompt" :placeholder="lang.promptPlaceholder" rows="5"></el-input>
        <div class="btnbox">
          <el-button type="primary" @click="handleExtract">{{ lang.confirm }}</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import officeImg from "../../../assets/icon/sourceFile/office.png";
import pdfImg from "../../../assets/icon/sourceFile/pdf.png";
import videoImg from "../../../assets/icon/sourceFile/video.png";
import otherImg from "../../../assets/icon/sourceFile/other.png";
import checkImg from "../../../assets/icon/sourceFile/check.png";
import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
// 导入SVG组件
import look1 from "../../../assets/look1.svg";
import look2 from "../../../assets/look2.svg";
import tqList2 from "../../../assets/tqList2.svg";
import tqList from "../../../assets/tqList.svg";
import yichu from "../../../assets/yichu.svg";
import yichu2 from "../../../assets/yichu2.svg";
import download from "../../../assets/download.svg";
import download2 from "../../../assets/download2.svg";

import wVideo from "../test/file/wVideo.vue";
import wpdf from "../test/file/wPdf2.vue";
import wOffice from "../test/file/wOffice.vue";

import { v4 as uuidv4 } from "uuid";
import relateFiles from "./components/relateFiles";
import checkDialog from "./components/checkDialog";
import testBox from "./components/testBox";
import WebCrawlDialog from "./WebCrawlDialog.vue";


// 音频格式转换：将非MP3音频转换为真正的MP3格式（使用@breezystack/lamejs库）
const convertAudioToMp3 = async (file) => {
  let lamejs;
  let Mp3Encoder;
  let audioContext = null;
  
  try {
    // 确保传入的是 File 对象
    let fileObj = file;
    
    // 如果不是 File 对象，尝试从可能的属性中获取
    if (!(fileObj instanceof File) && !(fileObj instanceof Blob)) {
      // 尝试从 raw 属性获取
      if (fileObj.raw && (fileObj.raw instanceof File || fileObj.raw instanceof Blob)) {
        fileObj = fileObj.raw;
      } else {
        throw new Error('传入的不是有效的 File 或 Blob 对象');
      }
    }
    
    // 检查文件大小（限制为50MB）
    if (fileObj.size > 50 * 1024 * 1024) {
      throw new Error('音频文件过大（超过50MB），无法转换');
    }
    
    // 导入修复版本的lamejs
    console.log('开始加载lamejs库...');
    const lamejsModule = await import('@breezystack/lamejs');
    
    // 获取Mp3Encoder
    if (lamejsModule.default && lamejsModule.default.Mp3Encoder) {
      Mp3Encoder = lamejsModule.default.Mp3Encoder;
      lamejs = lamejsModule.default;
    } else if (lamejsModule.Mp3Encoder) {
      Mp3Encoder = lamejsModule.Mp3Encoder;
      lamejs = lamejsModule;
    } else if (lamejsModule.default) {
      // 检查是否是命名空间导出
      lamejs = lamejsModule.default;
      if (lamejs.Mp3Encoder) {
        Mp3Encoder = lamejs.Mp3Encoder;
      } else {
        throw new Error('lamejs库结构异常：无法找到Mp3Encoder');
      }
    } else {
      throw new Error('lamejs库结构异常：无法找到Mp3Encoder');
    }
    
    if (!Mp3Encoder || typeof Mp3Encoder !== 'function') {
      throw new Error('lamejs库加载失败：Mp3Encoder未找到或不是构造函数');
    }
    
    console.log('lamejs加载成功，Mp3Encoder类型:', typeof Mp3Encoder);
    
    // 创建AudioContext
    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
    if (!AudioContextClass) {
      throw new Error('浏览器不支持Web Audio API');
    }
    
    audioContext = new AudioContextClass();
    
    // 读取文件为ArrayBuffer
    console.log('开始读取音频文件，大小:', fileObj.size, 'bytes');
    
    // 读取文件为ArrayBuffer
    let arrayBuffer;
    if (typeof fileObj.arrayBuffer === 'function') {
      // 使用 File/Blob 的 arrayBuffer 方法
      arrayBuffer = await fileObj.arrayBuffer();
    } else {
      // 如果没有 arrayBuffer 方法，使用 FileReader
      arrayBuffer = await new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.onerror = reject;
        reader.readAsArrayBuffer(fileObj);
      });
    }
    console.log('文件读取完成，ArrayBuffer大小:', arrayBuffer.byteLength);
    
    // 解码音频文件
    console.log('开始解码音频数据...');
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer.slice(0));
    console.log('音频解码完成，采样率:', audioBuffer.sampleRate, '声道数:', audioBuffer.numberOfChannels, '时长:', audioBuffer.duration, '秒');
    
    // 获取音频数据
    const sampleRate = audioBuffer.sampleRate;
    const numberOfChannels = audioBuffer.numberOfChannels;
    const samples = audioBuffer.getChannelData(0); // 使用第一个声道
    
    // 处理音频声道：如果是立体声，保持立体声；如果是多声道，混合为单声道
    let audioData;
    let channels = numberOfChannels;
    
    if (numberOfChannels === 1) {
      // 单声道，直接使用
      audioData = samples;
      channels = 1;
    } else if (numberOfChannels === 2) {
      // 立体声，保持立体声（交错存储）
      console.log('检测到立体声音频，保持立体声格式...');
      const leftChannel = audioBuffer.getChannelData(0);
      const rightChannel = audioBuffer.getChannelData(1);
      audioData = new Float32Array(leftChannel.length * 2);
      for (let i = 0; i < leftChannel.length; i++) {
        audioData[i * 2] = leftChannel[i];
        audioData[i * 2 + 1] = rightChannel[i];
      }
      channels = 2;
    } else {
      // 多声道（超过2个），混合为单声道
      console.log('检测到多声道音频（超过2个），正在混合为单声道...');
      audioData = new Float32Array(samples.length);
      for (let i = 0; i < samples.length; i++) {
        let sum = samples[i];
        for (let ch = 1; ch < numberOfChannels; ch++) {
          const channelData = audioBuffer.getChannelData(ch);
          sum += channelData[i];
        }
        audioData[i] = sum / numberOfChannels;
      }
      channels = 1;
    }
    
    // 转换为16位PCM
    console.log('开始转换为16位PCM...');
    const pcm16 = new Int16Array(audioData.length);
    for (let i = 0; i < audioData.length; i++) {
      const s = Math.max(-1, Math.min(1, audioData[i]));
      pcm16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
    }
    console.log('PCM转换完成，样本数:', pcm16.length, '声道数:', channels);
    
    // 创建MP3编码器
    // 参数：声道数(1=单声道, 2=立体声), 采样率, 比特率(kbps)
    console.log('创建MP3编码器，声道数:', channels, '采样率:', sampleRate, '比特率: 128kbps');
    const mp3Encoder = new Mp3Encoder(channels, sampleRate, 128);
    const sampleBlockSize = 1152; // MP3编码的块大小
    const mp3Data = [];
    
    // 编码音频数据
    console.log('开始MP3编码...');
    let processedSamples = 0;
    const totalSamples = pcm16.length;
    
    for (let i = 0; i < pcm16.length; i += sampleBlockSize) {
      const sampleChunk = pcm16.subarray(i, i + sampleBlockSize);
      const mp3buf = mp3Encoder.encodeBuffer(sampleChunk);
      if (mp3buf.length > 0) {
        mp3Data.push(mp3buf);
      }
      
      processedSamples += sampleChunk.length;
      // 每处理10%的数据输出一次进度
      if (processedSamples % Math.max(1, Math.floor(totalSamples / 10)) < sampleBlockSize) {
        const progress = Math.round((processedSamples / totalSamples) * 100);
        console.log(`MP3编码进度: ${progress}%`);
      }
    }
    
    // 完成编码
    console.log('完成MP3编码，正在刷新缓冲区...');
    const mp3buf = mp3Encoder.flush();
    if (mp3buf.length > 0) {
      mp3Data.push(mp3buf);
    }
    
    // 计算总大小
    const totalSize = mp3Data.reduce((sum, buf) => sum + buf.length, 0);
    console.log('MP3编码完成，总大小:', totalSize, 'bytes');
    
    // 检查是否有数据
    if (totalSize === 0) {
      throw new Error('MP3编码失败：生成的MP3文件为空');
    }
    
    // 创建Blob
    const mp3Blob = new Blob(mp3Data, { type: 'audio/mpeg' });
    
    // 创建新的File对象
    const originalFileName = fileObj.name || (file && file.name) || 'audio';
    const baseName = originalFileName.replace(/\.[^/.]+$/, ""); // 移除扩展名
    const mp3File = new File([mp3Blob], `${baseName}.mp3`, { type: 'audio/mpeg' });
    
    console.log('音频转换成功，输出文件:', mp3File.name, '大小:', mp3File.size, 'bytes', '格式: MP3');
    
    return mp3File;
  } catch (error) {
    console.error('音频转换失败，详细错误:', error);
    console.error('错误堆栈:', error.stack);
    
    // 提供更详细的错误信息
    let errorMessage = '音频转换失败';
    if (error.message) {
      errorMessage += `: ${error.message}`;
    } else {
      errorMessage += `: ${error}`;
    }
    
    // 根据错误类型提供建议
    if (error.name === 'EncodingError' || error.message.includes('decode')) {
      errorMessage += '。可能是音频文件格式不支持或文件已损坏';
    } else if (error.message.includes('AudioContext')) {
      errorMessage += '。浏览器不支持音频处理功能';
    } else if (error.message.includes('大小') || error.message.includes('size')) {
      errorMessage += '。请尝试使用较小的音频文件';
    } else if (error.message.includes('lamejs') || error.message.includes('Mp3Encoder')) {
      errorMessage += '。请确保已安装 @breezystack/lamejs：npm install @breezystack/lamejs';
    }
    
    throw new Error(errorMessage);
  } finally {
    // 确保清理AudioContext
    if (audioContext && audioContext.state !== 'closed') {
      try {
        await audioContext.close();
        console.log('AudioContext已关闭');
      } catch (closeError) {
        console.warn('关闭AudioContext时出错:', closeError);
      }
    }
  }
};

export default {
  components: {
    wVideo,
    wpdf,
    wOffice,
    relateFiles,
    checkDialog,
    testBox,
    WebCrawlDialog,
  },
  props: {
    userid: {
      type: String,
    },
    typeArray: {
      type: Array,
    },
    pid: {
      type: String,
    },
    folderid: {
      type: String,
    },
    moFolderid: {
      type: String,
    },
    data: {
      type: Object,
    },
  },
  watch: {
    pid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.fileArray = [];
        this.checkArray = [];
        this.fileName = "";
        this.proVisible = false;
        this.page = 1;
        this.getData();
      },
    },
  },
  data() {
    return {
      look1: look1,
      look2: look2,
      tqList2: tqList2,
      tqList: tqList,
      yichu: yichu,
      yichu2: yichu2,
      download: download,
      download2: download2,
      isHover: false,
      isHover2: false,
      isHover3: false,
      isHover4: false,

      isLoading: false,
      proVisible: false,
      stype: 2,
      fileArray: [],
      officeImg: officeImg,
      pdfImg: pdfImg,
      videoImg: videoImg,
      otherImg: otherImg,
      checkImg: checkImg,
      checkIsImg: checkIsImg,
      checkArray: [],
      checkArray2: [],
      dialogVisiblePdf: false,
      dialogVisibleVideo: false,
      dialogVisibleOffice: false,
      wurl: "",
      moveBox: false,
      checkTypeArray: [],
      moveChild: "",
      fileName: "",
      limit: 10,
      total: 0,
      page: 1,
      debounceTimeout: null,
      pcount: 0,
      ptotal: 0,
      fileType: 1,
      webUrlDialogVisible: false,
      webInputUrl: '',
      row: {},
      promptDialog: false,
      promptLoading: false,
      prompt: "",
    };
  },
  computed: {
    getState() {
      return function (item) {
        if (item == "success") {
          return this.lang.success;
        } else if (item == "failed") {
          return this.lang.fail;
        } else if (item == "augmenting") {
          return this.lang.sliced;
        } else if (item == "pending") {
          return this.lang.pending;
        } else if (item == "enriched") {
          return "enriched";
        } else if (!item) {
          return this.lang.sliced;
        } else {
          return this.lang.sliced;
        }
      };
    },
    getState2() {
      return function (item) {
        if (item == "success") {
          return this.lang.success;
        } else if (item == "failed") {
          return this.lang.fail;
        } else if (item == "pending") {
          return this.lang.pending;
        } else if (item == "processing") {
          return this.lang.processing;
        } else if (item == "enriched") {
          return "enriched";
        } else if (!item) {
          return this.lang.uploading;
        } else {
          return this.lang.processing;
        }
      };
    },
  },
  methods: {
    getGraph(){
      let params = {
        collectionId: this.folderid
      };

      this.ajax
        .post(this.$store.state.fileApi + "getRelationshipsGraphs", [params])
        .then(res => {
          console.log('getRelationshipsGraphs',res);
        })
        .catch(err => {
          console.error(err);
        });
    },
    resetGraphs(){
      let params = {
        collectionId: this.folderid
      };

      this.ajax
        .post(this.$store.state.fileApi + "resetGraphs", [params])
        .then(res => {
          console.log('resetGraphs',res);
        })
        .catch(err => {
          console.error(err);
        });
    },
    goBackPage() {
      this.$emit("goCheckType", this.pid.split("/")[0]);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.getData();
    },
    getData() {
      this.isLoading = true;
      let params = {
        uid: this.userid,
        folderid: this.folderid,
        n: this.fileName.trim(),
        page: this.page,
        num: this.limit,
      };
      this.ajax
        .post(this.$store.state.fileApi + "getFileD", [params])
        .then((res) => {
          this.isLoading = false;
          console.log(res.data);
          this.total = res.data.result.length ? res.data.result[0].num : 0;
          let _fileArray = res.data.result;
          _fileArray.forEach(i => {
              if (i.folderName && i.folderName.includes('默认文件夹')) {
                i.folderName = (i.folderName || "").replace(/默认文件夹/g, this.lang.defaultFolder);
              }
              if (i.folderName && i.folderName.includes('Default Folder')) {
                i.folderName = (i.folderName || "").replace(/Default Folder/g, this.lang.defaultFolder);
              }
              if (i.folderName && i.folderName.includes('默認文件夾')) {
                i.folderName = (i.folderName || "").replace(/默認文件夾/g, this.lang.defaultFolder);
              }
          });
          this.fileArray = _fileArray;
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    handleSelectionChange(selectedRows) {
      this.checkArray = selectedRows.map((row) => row.id);
      this.checkArray2 = selectedRows.map((row) => ({
        id: row.id,
        documentid: row.documentid,
      }));
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
      e.target.value = "";
    },
    handleDrop(event) {
      event.preventDefault(); // 阻止默认的浏览器下载行为
      const files = event.dataTransfer.files;
      if (files.length) {
        this.beforeUpload({ target: { files } });
      }
    },
    debouncedSearch() {
      clearTimeout(this.debounceTimeout);
      this.debounceTimeout = setTimeout(() => {
        this.serchFile();
      }, 300);
    },
    serchFile() {
      this.page = 1;
      this.getData();
    },
    async beforeUpload(event) {
      let file = "";
      let cfindex2 = 0;
      this.proVisible = true;
      const allowedExtensions = [
        "csv",
        "xls",
        "xlsx",
        "md",
        "pdf",
        "txt",
        "ppt",
        "pptx",
        "docx",
        "doc",
        "jpg",
        "jpeg",
        "png",
        "gif",
        "bmp",
        "mp3",
      ];
      //     let uuid = uuidv4();
      // let res = window.uploadFile({ file: event.target.files[0], uuid, userid:this.userid, folderid:this.folderid, moFolderid: this.moFolderid })
      // console.log(res);
      const audioExtensions = ["wav", "m4a", "aac", "ogg", "flac", "wma"];

      // return
      const uploadFiles = async (files) => {
        this.pcount = 0;
        this.ptotal = files.length;
        for (let cfindex = 0; cfindex < files.length; cfindex++) {
          file = files[cfindex];
          let fileExtension = file.name.split(".").pop().toLowerCase();

          if (audioExtensions.includes(fileExtension)) {
            try {
              console.log(this.lang.converting_audio);
              const convertingMsg = this.lang.converting_audio.replace('{format}', fileExtension.toUpperCase());
              this.$message.info(convertingMsg);
              // 使用原生 File 对象进行转换
              file = await convertAudioToMp3(file);
              fileExtension = file.name.split(".").pop().toLowerCase();
              const successMsg = this.lang.convert_success.replace('{filename}', file.name);
              this.$message.success(successMsg);
            } catch (error) {
              console.error('音频转换失败:', error);
              const errorMsg = error.message || error.toString();
              const failMsg = this.lang.convert_fail.replace('{error}', errorMsg);
              this.$message.error({
                message: failMsg,
                duration: 5000,
                showClose: true
              });
              // 转换失败时移除文件并跳过
              await new Promise((resolve) => setTimeout(resolve, 1000));
              continue;
            }
          }

          if (!allowedExtensions.includes(fileExtension)) {
            this.$message.error(`${this.lang.unsupFileformats}: ${file.name}`);
            await new Promise((resolve) => setTimeout(resolve, 1000)); // 延迟1秒再跳过
            continue; // 跳过不支持的文件
          }

          let uuid = uuidv4();
          let formData = new FormData();
          const timestamp = Date.now();
          const baseName = file.name.slice(0, -(fileExtension.length + 1));
          let string = [this.folderid, this.moFolderid].filter((id) => id);
          formData.append(
            "file",
            new File([file], `${baseName}${timestamp}.${fileExtension}`)
          );
          formData.append("collection_ids", JSON.stringify(string));
          formData.append("id", uuid);
          formData.append(
            "metadata",
            JSON.stringify({ title: file.name, collection_ids: string })
          );
          formData.append("ingestion_mode", "fast");
          formData.append("run_with_orchestration", "false");

          // 使用同步方式上传文件
          await this.uploadFile(formData, file.name, uuid);
          this.pcount = cfindex + 1;

          // 每5秒上传一次
          if (cfindex < files.length - 1) {
            await new Promise((resolve) => setTimeout(resolve, 5000));
          }
        }
        setTimeout(() => {
          this.proVisible = false;
          this.$message.success(this.lang.operComplete);
          this.getData(); // 在上传完所有文件后再调用getData
        }, 1000);
      };

      await uploadFiles(event.target.files);
    },
    async importFromWebpage(event) {
      console.log('importFromWebpage');
      this.webUrlDialogVisible = true;
    },
    handleWebUrlConfirm(dataFromForm) {
      if (!dataFromForm) return;
      this.proVisible = true;
      let uuid = uuidv4();
      let formData = new FormData();
      let string = [this.folderid, this.moFolderid].filter((id) => id);
      formData.append("url", dataFromForm.url)
      formData.append("collection_ids", JSON.stringify(string));
      formData.append("id", uuid);
      formData.append(
        "metadata",
        JSON.stringify({url: dataFromForm.url, collection_ids: string})
      );
      formData.append("ingestion_mode", "fast");
      formData.append("run_with_orchestration", "false");
      debugger
      const html2mdApi = process.env.VUE_APP_HTML2MD_API || 'http://localhost:7004';
      const url = html2mdApi + '/file/knowledge-base/html-to-markdown';
      const headers = {'Content-Type': 'multipart/form-data'};
      this.ajax.post(url, formData, {headers})
        .then(async (response) => {
          if (response && response.data && response.data.results) {
            this.$message.success('文件上传成功');
            const fileName = response.data.title;
            const documentId = response.data.results && response.data.results.document_id;
            const status = response && response.status === 200 ? "success" : "failed";
            const msg = response && response.status === 200 ? "切片成功" : "切片失败";
            this.$message({ message: msg, type: status == "success" ? status : "error" });
            this.getData();
            setTimeout(() => {
              this.fileArray.forEach((e) => {
                if (e.documentid === uuid) {
                  e.ingestionStatus = status;
                }
              });
            }, 1000);
            if (documentId) {
              await this.bindFileAndFolder(
                fileName,
                documentId,
                this.userid,
                this.folderid,
                this.moFolderid
              );
            }
            // 受控组件写法，直接清空 input
            this.webInputUrl = '';
            // 关闭弹窗
            this.webUrlDialogVisible = false;
            this.getData();
          } else {
            this.$message.error(response && response.data && response.data.msg ? response.data.msg : '文件上传失败');
          }
          this.proVisible = false;
        })
        .catch((error) => {
          this.$message.error('服务器繁忙');
          if (this.fileNames) this.fileNames.pop && this.fileNames.pop();
          if (this.fileUrls) this.fileUrls.pop && this.fileUrls.pop();
          console.log(error);
          if (this.loadingInstance) {
            this.$nextTick(() => {
              this.loadingInstance.close();
            });
          }
          this.proVisible = false;
        });
    },
    async bindFileAndFolder(name, docid, uid, folder_id, mofid = '') {
      try {
        let params = {
          n: name,
          did: docid,
          uid: this.userid,
          fid: this.folderid,
          mofid: this.moFolderid != this.folderid ? this.moFolderid : "",
        };
        const res2 = await this.ajax.post(this.$store.state.api + "addFile", [
          params,
        ]);
        // 如果成功，关闭对话框
        if (res2 && res2.status === 200) {
          // this.handleClose && this.handleClose();
          this.webUrlDialogVisible = false;
          this.getData();
        }

        console.log(res2);
      } catch (err) {
        console.error(err);
        this.$message.error(this.lang.uploadFail);
      }
      this.proVisible = false;

    },
    async uploadFile(formData, name, uuid) {
      try {
        this.ajax
          .post("https://r2rserver.cocorobo.cn/v3/documents", formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => {
            console.log(res, formData);
            const message = res.data.results && res.data.results.message;
            const status =
              message === "Document created and ingested successfully."
                ? "success"
                : "failed";
            const msg =
              message === "Document created and ingested successfully."
                ? "切片成功"
                : "切片失败";
            this.$message({
              message: msg,
              type: status == "success" ? status : "error",
            });
            // setTimeout(() => {
            this.getData();
            // }, 1000)
            setTimeout(() => {
              this.fileArray.forEach((e) => {
                if (e.documentid === uuid) {
                  e.ingestionStatus = status;
                }
              });
            }, 1000);
          })
          .catch((err) => {
            this.$message.error(this.lang.uploadFail);
            this.fileArray.forEach((e) => {
              if (e.documentid === uuid) {
                e.ingestionStatus = "failed";
              }
            });
            console.error(err);
          });

        let docid = uuid;
        let params = {
          n: name,
          did: docid,
          uid: this.userid,
          fid: this.folderid,
          mofid: this.moFolderid != this.folderid ? this.moFolderid : "",
        };
        const res2 = await this.ajax.post(this.$store.state.api + "addFile", [
          params,
        ]);

        console.log(res2);
      } catch (err) {
        console.error(err);
        this.$message.error(this.lang.uploadFail);
      }
    },
    formatFileSize(bytes) {
      if (bytes < 1024) {
        return bytes + "B";
      } else if (bytes < 1048576) {
        return (bytes / 1024).toFixed(2) + "KB";
      } else if (bytes < 1073741824) {
        return (bytes / 1048576).toFixed(2) + "MB";
      } else {
        return (bytes / 1073741824).toFixed(2) + "GB";
      }
    },
    deleteFile(fileid, documentid) {
      this.$confirm(this.lang.deleteFile, this.lang.prompt, {
        confirmButtonText: this.lang.confirm,
        cancelButtonText: this.lang.cancel,
        type: "warning",
      })
        .then(() => {
          let params = [
            {
              ids: fileid,
              documentids: documentid,
            },
          ];
          this.ajax //deleteFileByFilter
            .post(this.$store.state.fileApi + "deleteFile", params)
            .then((res) => {
              this.$message({
                message: this.lang.deleteSuccess,
                type: "success",
              });
              this.checkArray = [];
              this.checkArray2 = [];
              this.$refs.myTable.clearSelection();
              this.getData();
            })
            .catch((err) => {
              this.$message.error(this.lang.deleteFail);
              console.error(err);
            });
        })
        .catch(() => {});
    },
    batchDelete() {
      if (!this.checkArray.length) {
        this.$message.warning(this.lang.selectDeFile);
        return;
      }
      let array = this.checkArray2.map((item) => item.id);
      let array2 = this.checkArray2.map((item) => item.documentid);
      this.deleteFile(array.join(","), array2.join(","));
    },
    removeFile(fileid, documentid) {
      this.$confirm(this.lang.sureRemove, this.lang.prompt, {
        confirmButtonText: this.lang.confirm,
        cancelButtonText: this.lang.cancel,
        type: "warning",
      })
        .then(() => {
          let params = [
            {
              ids: fileid,
              documentids: documentid,
              folderid: this.folderid,
            },
          ];
          this.ajax
            .post(this.$store.state.fileApi + "removeFile", params)
            .then((res) => {
              this.$message({
                message: this.lang.removeSuccess,
                type: "success",
              });
              this.checkArray = [];
              this.checkArray2 = [];
              this.$refs.myTable.clearSelection();
              this.getData();
            })
            .catch((err) => {
              this.$message.error(this.lang.removeFail);
              console.error(err);
            });
        })
        .catch(() => {});
    },
    batchRemove() {
      if (!this.checkArray.length) {
        this.$message.warning(this.lang.seReFile);
        return;
      }
      let array = this.checkArray2.map((item) => item.id);
      let array2 = this.checkArray2.map((item) => item.documentid);
      this.removeFile(array.join(","), array2.join(","));
    },
    isSelectable(row) {
      return row.isMo !== "2";
    },
    openG() {
      this.$refs.relateFiles.openG(this.userid, this.folderid, this.moFolderid);
    },
    checkFile(row) {
      if (row.ingestionStatus != "success")
        return this.$message.info(this.lang.fileUploadFail);

      this.$refs.checkDialog.openG(row.documentid);
    },
    handleClose(done) {
      done();
    },
    downloadFile(row) {
      let params = {
        documentid: row.documentid,
        filename: row.name,
      };
      // 使用axios发送GET请求下载文件
      this.ajax
        .post(`${this.$store.state.fileApi}downloadFile2`, [params], {
          responseType: "blob",
        })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", row.name); // 设置下载文件名
          document.body.appendChild(link);
          link.click();
          link.remove();
          this.$message({
            message: this.lang.downloadSuccess,
            type: "success",
          });
        })
        .catch((err) => {
          this.$message.error(this.lang.downloadFail);
          console.error(err);
        });
    },

    // extractFile(row) {
    //   if (row.ingestionStatus != "success")
    //     return this.$message.info(this.lang.fileUploadFail);

    //   let params = {
    //     documentid: row.documentid,
    //   };
    //   // 获取切片
    //   try {
    //     const res = this.ajax
    //       .post(this.$store.state.fileApi + "extractFile2", [params])
    //       .then((res) => {
    //         console.log(res, row);
    //         const message = res.data.result && res.data.result.message;
    //         // const status = message === 'Document entities and relationships extracted successfully.' ? 'success' : 'failed';
    //         // const msg = message === 'Document entities and relationships extracted successfully.' ? '提取成功' : '提取失败';
    //         // this.$message({
    //         //   message: msg,
    //         //   type: status == 'success' ? status : 'error'
    //         // })
    //         // this.fileArray.forEach(e => {
    //         //   if (e.documentid === row.documentid) {
    //         //     e.extractionStatus = status;
    //         //   }
    //         // });
    //         setTimeout(() => {
    //           this.getData();
    //         }, 1000);
    //       })
    //       .catch((err) => {
    //         this.$message.error(this.lang.extrFailed);
    //         this.fileArray.forEach((e) => {
    //           if (e.documentid === row.documentid) {
    //             e.extractionStatus = "failed";
    //           }
    //         });
    //         console.error(err);
    //       });

    //     console.log(res.data);
    //     this.$message.success(this.lang.extractingFile);
    //   } catch (err) {
    //     console.error(err);
    //   }
    // },
    checkType(type) {
      this.fileType = type;
    },
    extractFile(row) {
      if (row.ingestionStatus != "success") return this.$message.info(this.lang.fileUploadFail)
      this.row = row
      this.promptDialog = true;
    },
    handleExtract() {
      this.promptLoading = true
      let params = {
        documentid: this.row.documentid,
        prompt: this.prompt
      };
      // 获取切片
      try {
        const res = this.ajax.post(this.$store.state.fileApi + "extractFile2", [
          params
        ]).then(res => {
          console.log(res, this.row);
          const message = res.data.result && res.data.result.message;
          // const status = message === 'Document entities and relationships extracted successfully.' ? 'success' : 'failed';
          // const msg = message === 'Document entities and relationships extracted successfully.' ? '提取成功' : '提取失败';
          // this.$message({
          //   message: msg,
          //   type: status == 'success' ? status : 'error'
          // })
          // this.fileArray.forEach(e => {
          //   if (e.documentid === row.documentid) {
          //     e.extractionStatus = status;
          //   }
          // });
          setTimeout(() => {
            this.promptLoading = false
            this.promptDialog = false
            this.getData();
          }, 1000)
        }).catch(err => {
          this.promptLoading = false
          this.$message.error(this.lang.extrFailed)
          this.fileArray.forEach(e => {
            if (e.documentid === this.row.documentid) {
              e.extractionStatus = 'failed';
            }
          });
          console.error(err);
        });
        console.log(res.data);
        this.$message.success(this.lang.extractingFile);
        this.getData();
      } catch (err) {
        this.promptLoading = false
        
        console.error(err);
      } 
    },
  },
  mounted() {
    // this.getData();
    //  const script = document.createElement('script');
    // script.src = 'https://beta.cloud.cocorobo.cn/js/Common/uploadR2R.js';
    // script.type = 'text/javascript';
    // script.defer = true;  // 或者 async，根据需要
    // script.onload = () => {
    //   console.log('上传脚本加载成功');
    //   // 你可以在这里使用上传文件的功能了
    // };
    // script.onerror = () => {
    //   console.error('上传脚本加载失败');
    // };
    // document.head.appendChild(script);
  },
};
</script>

<style scoped>
.f_box {
  width: 100%;
  /* height: 100%; */
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.f_box_top {
  display: flex;
  align-items: center;
  padding: 10px 0 0;
  padding-top: 0px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  height: 50px;
  min-height: 50px;
  border-bottom: 1px solid #e8ebf0;
  padding: 0 24px;
}

.f_box_top_left {
  display: flex;
  align-items: center;
}

.f_box_top_title {
  font-size: 16px;
  color: rgba(8, 13, 30, 0.9);
  /* font-weight: bold; */
}

.btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  background: rgb(0, 97, 255);
  color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
}

.btn2 {
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  background: #fff;
  color: rgb(0, 97, 255);
  border: 1px solid rgb(0, 97, 255);
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
}

.f_box_top .delBtn {
  background: rgb(255, 0, 13);
}

.btn + .btn2,
.btn + .btn,
.btn2 + .btn2,
.btn2 + .delBtn {
  margin-left: 15px;
}

.f_box_container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow: auto;
}

.f_box_container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow: auto;
}

.f_box_top_right {
  margin-left: auto;
  /* max-width: calc(100% - 280px); */
  overflow: hidden;
  display: flex;
  /* align-items: center; */
  padding: 0 24px;
  /* min-height: fit-content; */
  height: 36px;
  min-height: 36px;
}

.f_box_top_right > .input {
  position: relative;
  /* height: 40px; */
}

.f_box_top_right >>> .el-button {
  height: 35px !important;
  font-size: 12.8px;
  background-color: #3370ff;
  border-radius: 6px;
  margin-left: 12px;
}

.f_box_top_right >>> .el-button--primary:focus,
.f_box_top_right >>> .el-button--primary:hover {
  filter: brightness(120%);
}

.f_box_top_right >>> .el-icon-plus:before {
  font-size: 14px;
  font-weight: 600;
  /* vertical-align: middle;  */
}

.f_box_top_right > .input > input {
  width: 100%;
  height: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 0 15px 0 45px;
  box-sizing: border-box;
  font-size: 14px;
  width: 250px;
  height: 36px;
  font-size: 12.8px;
  border-radius: 6px;
  outline: none;
}

.f_box_top_right > .input > .serch {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/icon/sourceFile/search.png");
  background-size: 100% 100%;
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.f_box_top_right > .tab {
  height: 30px;
  width: 80px;
  margin-left: 15px;
  background: #e7e7e7;
  border: 2px solid #d9d9d9;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.f_box_top_right > .tab > .table,
.f_box_top_right > .tab > .list {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.f_box_top_right > .tab > .list::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/icon/sourceFile/list.png");
  background-size: 100% 100%;
}

.f_box_top_right > .tab > .list.active,
.f_box_top_right > .tab > .table.active {
  background: #fff;
}

.f_box_top_right > .tab > .table::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/icon/sourceFile/table.png");
  background-size: 100% 100%;
}

.mask {
  /* background-color: rgb(0 0 0 / 30%); */
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressBox {
  width: 300px;
  height: 100px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: #6c6c6c;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.progressBox .lbox {
  height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  color: #747474;
}

.progressBox .lbox img {
  width: 50px;
  margin-right: 0px;
}

.closeCss {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.closeCss > img {
  width: 100%;
  height: 100%;
}

.f_box_file_square {
  height: calc(100% - 55px);
  overflow: auto;
  width: 100%;
  padding: 55px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: relative;
}

.f_box_file_square > .f_box_file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  cursor: pointer;
  margin: 0 36px 36px 0;
  border-radius: 20px;
  position: relative;
}

.f_box_file_square > .f_box_file:hover {
  background: #f0f2f5;
}

.f_box_file_square > .f_box_file:hover > .check {
  display: block;
}

.f_box_file_square > .f_box_file.check {
  background: #e0eafb;
}

.f_box_file_square > .f_box_file.check > .check {
  display: block;
}

.f_box_file_square > .f_box_file > .check {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 16px;
  height: 16px;
  background-size: 100%;
  display: none;
}

.f_box_file_square > .f_box_file > .check > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f_box_file_square > .f_box_file > img {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.f_box_file_square > .f_box_file > .name {
  white-space: nowrap;
  font-size: 14px;
  max-width: 80%;
  overflow: hidden;
  margin: 4px auto 0;
  text-overflow: ellipsis;
  text-align: center;
}

.f_box_file_list {
  /* height: calc(100% - 55px); */
  /* overflow: auto; */
  width: 100%;
  /* padding: 10px 0; */
  padding-top: 0;
  box-sizing: border-box;
  position: relative;
  padding: 0 24px;
}

.f_box_file_list > .f_box_file {
}

.f_box_file_list >>> .el-table-column--selection .cell {
  display: flex !important;
  align-items: center !important;
}

.f_box_file_allCheck {
  display: flex;
  align-items: center;
  position: absolute;
  font-size: 14px;
  top: 20px;
  left: 10px;
  cursor: pointer;
}

.f_box_file_allCheck > img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  margin-right: 5px;
}

.el-dialogClass >>> .el-dialog {
  border-radius: 8px;
}

.dialog >>> .el-dialog__body {
  padding: 10px 20px;
}

.type_nav_box {
}

.type_nav_box > .nav {
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
  color: #000;
}

.type_nav_box > .nav > .down {
  min-width: 14px;
  height: 14px;
  background-image: url("../../../assets/icon/sourceFile/icon_arrow.png");
  background-size: 100% 100%;
  margin-right: 10px;
  transition: all 0.3s;
  transform: rotate(-90deg);
}

.type_nav_box > .nav.active > .down {
  transform: rotate(0deg);
}

.type_nav_box > .nav > .file {
  min-width: 18px;
  height: 18px;
  background-image: url("../../../assets/icon/sourceFile/file.png");
  background-size: 100% 100%;
  margin-right: 10px;
}

.type_nav_box > .nav > .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type_nav_box > .child {
}

.type_nav_box > .child > .nav {
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px 0 50px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
  color: #000;
}

.type_nav_box > .child > .nav.active {
  background: #e0eafb;
}

.type_nav_box > .child > .nav > .file {
  min-width: 18px;
  height: 18px;
  background-image: url("../../../assets/icon/sourceFile/file.png");
  background-size: 100% 100%;
  margin-right: 10px;
}

.type_nav_box > .child > .nav > .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.none_box {
  height: calc(100% - 55px);
  overflow: auto;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list_file_box {
  width: 100%;
}

.list_file_box >>> .el-table__empty-block {
  height: 300px !important;
  display: flex;
  align-items: center;
}

.list_file_box >>> .el-table__empty-block div {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

.customC {
  /* height: 300px; */

  /* width: 100px; */
  /* height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  margin-top: .5rem;
  color: #667085; */
}

.list_file_box >>> table th {
  border: none !important;
  background-color: #f0f2f5 !important;
  /* 浅灰色背景 */
  color: #00000099 !important;
}

.list_file_box >>> table tr td {
  border: none !important;
  border-bottom: 1px solid #ebeef5 !important;
}

.list_file_box >>> table tr {
  border: 1px #000 solid !important;
}

.list_file_box >>> .el-table__header-wrapper {
  /* margin-bottom: 10px !important; */
}

.list_file_box >>> .el-table__row {
  border: 1px #ccc solid;
}

.list_file_box >>> table tr td:nth-child(1) {
  border-radius: 10px 0 0 10px !important;
}

.list_file_box >>> table tr td:nth-last-child(1) {
  border-radius: 0 10px 10px 0 !important;
}

.list_file_box >>> table tr th:nth-child(1) {
  border-radius: 10px 0 0 10px;
}

.list_file_box >>> table tr th:nth-last-child(2) {
  border-radius: 0 10px 10px 0 !important;
}

.list_file_box >>> .el-table::before {
  background-color: #fff;
}

.list_file_box >>> .el-table--border::after {
  background-color: #fff;
}

.list_file_box >>> .el-table--border {
  border: none;
  border-bottom: 1px solid #ebeef5;
}

.BtnH >>> .el-button {
  padding: 5px !important;
  width: 30px !important;
  color: #4c5567;
}

.BtnH >>> .el-button:focus,
.BtnH >>> .el-button:hover {
  background: #e8ebf0 !important;
  color: #487fff !important;
}

.BtnH >>> .el-button--small,
.el-button--small.is-round {
  border: none;
  padding: 0;
}

.BtnHP {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.BtnHP >>> .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}

.BtnHP >>> .el-button--text {
  color: #667095;
}

.BtnHP img {
  width: 16px;
}

.BtnHPDel {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}

.BtnHPDel >>> .el-button + .el-button {
  padding: 0;
}

.BtnHPDel >>> .el-button:focus,
.BtnHPDel >>> .el-button:hover {
  background: #e8ebf0 !important;
}

/* .BtnHPDel >>> .el-button:hover .lookHp{

} */
.lookHp2 {
  color: #6c6c6c;
}

.lookHp2 {
  color: #487fff;
}

/* .btnBh{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 28px;
  border-radius: 5px;
}
.btnBh:hover{
  background: #F0F4FF;
}
.btnBh img{
  margin-right: 5px;
} */

.btnBh2 img {
  width: 17px;
  margin-right: 5px;
  padding: 1.5px;
  box-sizing: border-box;
}

.btnBh2:hover {
  background: #fbeae8;
}

.list_file_name {
  display: flex;
  align-items: center;
}

.list_file_name > img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  margin-right: 5px;
}

.list_file_name > div {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pageBox {
  display: flex;
}

/* .pageBox>>>.el-pagination__total {
  margin-right: auto;
} */

.btnBh2 {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  box-sizing: border-box;
}

.btnBh {
  display: flex;
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 8px;
}
</style>

<style>
.custom-popover {
  min-width: 70px !important;
  width: auto !important;
  padding: 8px 10px;
  border-radius: 8px;
}

/* .custom-popover2 {
  min-width: 88px !important;
  width: auto !important;
  padding: 8px;
  top: 414px !important;
  text-align: center;
} */
.BtnH >>> .el-button {
  padding: 5px !important;
  width: 30px !important;
  color: #4c5567;
}

.BtnH >>> .el-button:focus,
.BtnH >>> .el-button:hover {
  background: #e8ebf0 !important;
  color: #487fff !important;
}

.BtnHPDel1 >>> .el-button:focus,
.BtnHPDel1 >>> .el-button:hover {
  background: #f0f4ff;
  color: #082e86 !important;
}

.BtnHPDel >>> .el-button:focus,
.BtnHPDel >>> .el-button:hover {
  background: #fbeae8 !important;
  color: #de4c41 !important;
}

.BtnH >>> .el-button--small,
.el-button--small.is-round {
  border: none;
  padding: 0;
}

.BtnHP {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.BtnHPDel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.BtnHPDel1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.BtnHP >>> .el-button {
  color: #4c5567;
  margin-left: 0 !important;
}

.BtnHP >>> .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}

.btnBh {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  cursor: pointer;
  /* height: 28px; */
  border-radius: 6px;
  padding: 6px 9px;
}

.btnBh:hover {
  background: #f0f4ff;
}

.btnBh img {
  margin-right: 5px;
  width: 17px;
}

.btnBh2 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
}

.btnBh2 img {
  width: 14px;
  margin-right: 5px;
}

.btnBh2:hover {
  background: #fbeae8;
}

.lookHp2 {
  color: #6c6c6c;
}

.lookHp2 {
  color: #487fff;
}

.list_file_box >>> .el-table__empty-text {
  display: flex;
  justify-content: center;
  line-height: 22px !important;
}

.list_file_box >>> .el-table-column--selection .cell {
  display: flex !important;
  align-items: center !important;
}

.f_box_top_center {
  margin: auto;
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.f_box_top_center > span {
  font-size: 16px;
  cursor: pointer;
  padding: 6px 8px;
  color: #1a202c;
}

.f_box_top_center > span:hover {
  background: rgb(242, 243, 243);
  border-radius: 5px;
}

.f_box_top_center > span.active {
  color: #2b5fd9;
}

.paginationArea {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paginationArea > span {
  font-size: 13px;
  color: #606266;
}

.promptBox{
  display: block;
}

.btnbox{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>