LQAdminFront/src/views/documents/Index.vue

<template>
  <div class="documents-container">
    <div class="header-section">
      <div class="title-info">
        <h2>{{ currentTitle }}</h2>
        <div class="statistics-bar">
          <span class="stat-item">
            <el-icon><Document /></el-icon>
            全部数据: <span class="stat-value">{{ statistics.allTotal }}</span>
          </span>
          <span class="stat-item">
            <el-icon><CircleCheck /></el-icon>
            已入库: <span class="stat-value success">{{ statistics.totalEntered }}</span>
          </span>
          <span class="stat-item" v-if="searchQuery.keyword || searchQuery.table_type || searchQuery.whether_to_enter !== null">
            <el-icon><Search /></el-icon>
            检索结果: <span class="stat-value">{{ total }}</span>
          </span>
        </div>
      </div>
      <div class="action-buttons">
        <el-button type="danger" :disabled="selectedIds.length === 0" @click="handleBatchDelete">
          <el-icon><Delete /></el-icon> 批量删除
        </el-button>
        <el-button type="warning" :disabled="selectedIds.length === 0" @click="handleBatchEnter">
          <el-icon><CircleCheck /></el-icon> 批量入库
        </el-button>
        <el-button type="success" class="upload-btn" @click="handleUpload">
          <el-icon><Upload /></el-icon> 上传文档
        </el-button>
      </div>
    </div>

    <!-- 板块切换 Tabs 移除，改为合并视图 -->

    <el-card class="search-card">
      <div class="search-bar">
        <el-input
          v-model="searchQuery.keyword"
          placeholder="搜索文档名称..."
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <div class="filter-group">
          <el-select v-model="searchQuery.table_type" placeholder="所属知识库" clearable class="filter-select">
            <el-option label="全部知识库" :value="null" />
            <el-option label="编制依据知识库" value="basis" />
            <el-option label="施工方案知识库" value="work" />
            <el-option label="办公制度知识库" value="job" />
          </el-select>

          <el-select v-model="searchQuery.whether_to_enter" placeholder="入库状态" clearable class="filter-select">
            <el-option label="全部状态" :value="null" />
            <el-option label="未入库" :value="0" />
            <el-option label="已入库" :value="1" />
          </el-select>

          <el-button type="primary" @click="handleSearch" class="search-btn">
            <el-icon><Filter /></el-icon> 检索
          </el-button>
        </div>
      </div>
    </el-card>

    <div class="content-section" v-loading="loading">
      <el-empty v-if="documents.length === 0" description="暂无文档数据" />
      <el-table 
        v-else 
        :data="documents" 
        style="width: 100%" 
        border 
        stripe 
        size="small"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="40" :selectable="canSelect" />
        
        <el-table-column prop="title" label="文档名称" min-width="280" show-overflow-tooltip>
          <template #default="scope">
            <div class="file-info-cell">
              <div class="file-icon-mini" :class="getFileIconClass(scope.row)">
                <el-icon v-if="getFileIcon(scope.row) === 'pdf'"><Document /></el-icon>
                <el-icon v-else-if="getFileIcon(scope.row) === 'word'"><Document /></el-icon>
                <el-icon v-else-if="getFileIcon(scope.row) === 'excel'"><Grid /></el-icon>
                <el-icon v-else-if="getFileIcon(scope.row) === 'ppt'"><DataAnalysis /></el-icon>
                <el-icon v-else><Document /></el-icon>
              </div>
              <div class="file-info-content">
                <span class="file-name-link" @click="handleView(scope.row)">
                  {{ scope.row.title }}{{ getFileExtension(scope.row) }}
                </span>
                <span v-if="scope.row.note" class="file-note">
                  {{ scope.row.note }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="转换状态" min-width="180">
          <template #default="scope">
            <div class="conversion-cell">
              <el-tag 
                :type="getConversionStatusTag(scope.row)"
                size="small"
                effect="light"
                class="status-tag"
              >
                {{ getConversionStatusText(scope.row) }}
              </el-tag>
              
              <div class="converted-file-links" v-if="scope.row.conversion_status === 2">
                 <div class="converted-file-name" v-if="scope.row.md_url">
                   <el-link type="primary" :underline="false" @click="handleDownloadConverted(scope.row)">
                     <el-icon><Link /></el-icon> {{ scope.row.md_display_name || '下载 Markdown' }}
                   </el-link>
                 </div>
                 <div class="converted-file-name" v-if="scope.row.json_url">
                   <el-link type="success" :underline="false" @click="handleDownloadJson(scope.row)">
                     <el-icon><Link /></el-icon> {{ scope.row.json_display_name || '下载 JSON' }}
                   </el-link>
                 </div>
               </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="知识库" min-width="120">
          <template #default="scope">
            <el-tag size="small" effect="plain" :type="getKBTagType(scope.row.source_type)">
              {{ getKnowledgeBaseShortName(scope.row.source_type) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="whether_to_enter" label="入库" width="80" align="center">
          <template #default="scope">
            <el-tooltip :content="isEntered(scope.row.whether_to_enter) ? '已入库' : '未入库'" placement="top">
              <el-icon :class="isEntered(scope.row.whether_to_enter) ? 'status-icon-success' : 'status-icon-info'">
                <CircleCheck v-if="isEntered(scope.row.whether_to_enter)" />
                <Warning v-else />
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="created_by" label="上传人" min-width="100" show-overflow-tooltip />

        <el-table-column label="上传时间" min-width="150" prop="created_time">
          <template #default="scope">
            {{ formatDate(scope.row.created_time) }}
          </template>
        </el-table-column>

        <el-table-column prop="updated_by" label="修改人" min-width="100" show-overflow-tooltip />

        <el-table-column label="修改时间" min-width="150" prop="updated_time">
          <template #default="scope">
            {{ formatDate(scope.row.updated_time) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="260" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-tooltip content="编辑" placement="top">
                <el-button 
                  link 
                  type="primary" 
                  @click="handleEdit(scope.row)"
                  class="action-btn-icon"
                >
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              
              <el-tooltip content="下载" placement="top" v-if="scope.row.file_url">
                <el-button 
                  link 
                  type="success" 
                  @click="handleDownload(scope.row)"
                  class="action-btn-icon"
                >
                  <el-icon><Download /></el-icon>
                </el-button>
              </el-tooltip>
              
              <el-tooltip 
                :content="scope.row.conversion_status === 1 ? '转换中' : (scope.row.conversion_status === 2 ? '重新转换' : '开始转换')" 
                placement="top"
              >
                <el-button 
                  link 
                  type="warning" 
                  @click="handleConvert(scope.row)"
                  :disabled="scope.row.conversion_status === 1"
                  class="action-btn-icon"
                >
                  <el-icon><Switch /></el-icon>
                </el-button>
              </el-tooltip>

              <el-tooltip content="删除" placement="top">
                <el-button 
                  link 
                  type="danger" 
                  @click="handleDelete(scope.row)"
                  class="action-btn-icon"
                >
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

    <!-- 文档预览对话框 -->
    <el-dialog v-model="previewVisible" :title="previewTitle" width="85%" top="5vh" custom-class="preview-dialog" @closed="previewUrl = ''">
      <template #header>
        <div class="dialog-header-custom">
          <span>{{ previewTitle }}</span>
          <div class="header-actions">
            <el-button type="primary" link @click="openInNewWindow">
              <el-icon><TopRight /></el-icon>在新窗口打开原链接
            </el-button>
          </div>
        </div>
      </template>
      <div v-loading="previewLoading" class="preview-content">
        <!-- Office 文档未转换提示 -->
        <div v-if="isOfficeDoc && previewDocType === 'original' && !previewLoading" class="unsupported-preview">
          <el-result
            icon="warning"
            title="该格式暂不支持直接预览"
            sub-title="Word/Excel/PPT 等 Office 文档需要转换后才能在浏览器中直接预览。"
          >
            <template #extra>
              <div class="unsupported-actions">
                <el-button type="primary" @click="handleConvert(currentDoc!)">
                  <el-icon><Switch /></el-icon> 立即转换
                </el-button>
                <el-button type="success" @click="handleDownload(currentDoc!)">
                  <el-icon><Download /></el-icon> 下载原文档
                </el-button>
              </div>
            </template>
          </el-result>
        </div>

        <div v-if="isHtmlPage && !previewLoading && !isOfficeDoc" class="preview-tip">
          <el-alert
            title="网页预览提示"
            type="info"
            description="由于外部网站的安全限制，某些网页可能无法在此处正常预览。如果显示异常，请点击右上角按钮在新窗口中查看。"
            show-icon
            :closable="false"
          />
        </div>
        <iframe 
          v-if="previewUrl && !(isOfficeDoc && previewDocType === 'original')" 
          :src="proxyPreviewUrl" 
          width="100%" 
          height="100%" 
          frameborder="0"
          allow="fullscreen"
          @load="previewLoading = false"
        ></iframe>
      </div>
    </el-dialog>

      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          v-model:current-page="searchQuery.page"
          v-model:page-size="searchQuery.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 上传文档对话框 -->
    <el-dialog v-model="uploadDialogVisible" title="上传文档" width="500px">
      <el-form :model="uploadForm" label-width="100px">
        <el-form-item label="所属知识库" required>
          <el-select v-model="uploadForm.table_type" placeholder="请选择知识库">
            <el-option label="编制依据知识库" value="basis" />
            <el-option label="施工方案知识库" value="work" />
            <el-option label="办公制度知识库" value="job" />
          </el-select>
        </el-form-item>
        <el-form-item label="文档标题" required>
          <el-input v-model="uploadForm.title" placeholder="请输入文档标题" />
        </el-form-item>
        <el-form-item label="文档链接" v-if="false">
          <el-input v-model="uploadForm.file_url" placeholder="请输入文档链接 (URL) 或通过下方上传文件" />
        </el-form-item>
        <el-form-item label="文件上传">
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="customUpload"
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持 PDF, Word, Excel, PPT, TXT 等文件，最大 50MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="文档备注">
          <el-input v-model="uploadForm.note" type="textarea" :rows="4" placeholder="请输入文档备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpload" :loading="submitting">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑文档对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑文档" width="700px">
      <el-form :model="editForm" label-width="120px">
        <el-divider content-position="left">基础信息</el-divider>
        <el-form-item label="所属知识库" required>
          <el-select v-model="editForm.table_type" disabled placeholder="请选择知识库" style="width: 100%">
            <el-option label="编制依据知识库" value="basis" />
            <el-option label="施工方案知识库" value="work" />
            <el-option label="办公制度知识库" value="job" />
          </el-select>
        </el-form-item>
        <el-form-item label="文档标题" required>
          <el-input v-model="editForm.title" placeholder="请输入文档标题" />
        </el-form-item>
        <el-form-item label="文档链接">
          <el-input v-model="editForm.file_url" placeholder="请输入文档链接 (URL)" />
        </el-form-item>
        
        <el-divider content-position="left">专业属性补全</el-divider>
        
        <!-- 编制依据特有字段 -->
        <template v-if="editForm.table_type === 'basis'">
          <el-form-item label="标准编号">
            <el-input v-model="editForm.standard_no" placeholder="如：GB/T 50001-2017" />
          </el-form-item>
          <el-form-item label="发布单位">
            <el-input v-model="editForm.issuing_authority" placeholder="请输入发布单位" />
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker v-model="editForm.release_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="文件类型">
                <el-input v-model="editForm.document_type" placeholder="如：国家标准" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时效性">
                <el-select v-model="editForm.validity" placeholder="请选择" style="width: 100%">
                  <el-option label="现行" value="现行" />
                  <el-option label="已废止" value="已废止" />
                  <el-option label="被替代" value="被替代" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="专业领域">
            <el-input v-model="editForm.professional_field" placeholder="如：建筑工程" />
          </el-form-item>
        </template>

        <!-- 施工方案特有字段 -->
        <template v-else-if="editForm.table_type === 'work'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工程名称">
                <el-input v-model="editForm.project_name" placeholder="请输入项目名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程标段">
                <el-input v-model="editForm.project_section" placeholder="请输入项目标段" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="方案类别">
                <el-select v-model="editForm.plan_category" placeholder="请选择方案类别" style="width: 100%">
                  <el-option v-for="item in planCategoryOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="一级分类">
                <el-input v-model="editForm.level_1_classification" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="二级分类">
                <el-select v-model="editForm.level_2_classification" placeholder="请选择二级分类" style="width: 100%">
                  <el-option v-for="item in level2Options" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三级分类">
                <el-select v-model="editForm.level_3_classification" placeholder="请选择三级分类" style="width: 100%">
                  <el-option v-for="item in level3Options" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="四级分类">
                <el-select v-model="editForm.level_4_classification" placeholder="请选择四级分类" style="width: 100%">
                  <el-option v-for="item in level4Options" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编制单位">
                <el-input v-model="editForm.issuing_authority" placeholder="请输入编制单位" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="编制日期">
                <el-date-picker v-model="editForm.release_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="方案摘要">
            <el-input v-model="editForm.plan_summary" type="textarea" :rows="3" placeholder="请输入方案摘要" />
          </el-form-item>
          <el-form-item label="编制依据">
            <el-input v-model="editForm.compilation_basis" type="textarea" :rows="3" placeholder="请输入编制依据，多个依据请用逗号分隔" />
          </el-form-item>
        </template>

        <!-- 办公制度特有字段 -->
        <template v-else-if="editForm.table_type === 'job'">
          <el-form-item label="发布部门">
            <el-input v-model="editForm.issuing_authority" placeholder="请输入发布部门" />
          </el-form-item>
          <el-form-item label="制度类型">
            <el-input v-model="editForm.document_type" placeholder="如：行政管理" />
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker v-model="editForm.release_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
        </template>

        <el-divider content-position="left">文档备注</el-divider>
        <el-form-item label="文档备注">
          <el-input v-model="editForm.note" type="textarea" :rows="6" placeholder="请输入文档备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit" :loading="submitting">确定保存</el-button>
      </template>
    </el-dialog>

    <!-- 文档详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="文档详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="名称">{{ currentDoc?.title }}</el-descriptions-item>
        <el-descriptions-item label="知识库">{{ getKnowledgeBaseName(currentDoc?.source_type) }}</el-descriptions-item>
        <el-descriptions-item label="上传人">{{ currentDoc?.created_by }}</el-descriptions-item>
        <el-descriptions-item label="上传时间">{{ formatDate(currentDoc?.created_time) }}</el-descriptions-item>
        <el-descriptions-item label="入库状态">
          <el-tag :type="isEntered(currentDoc?.whether_to_enter) ? 'success' : 'info'">
            {{ isEntered(currentDoc?.whether_to_enter) ? '已入库' : '未入库' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="文档备注">
          <div class="content-preview">{{ currentDoc?.note || '暂无备注' }}</div>
        </el-descriptions-item>
        
        <!-- 施工方案特有详情 -->
        <template v-if="currentDoc?.source_type === 'work'">
          <el-descriptions-item label="工程名称">{{ currentDoc?.project_name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="工程标段">{{ currentDoc?.project_section || '-' }}</el-descriptions-item>
          <el-descriptions-item label="方案类别">{{ currentDoc?.plan_category || '-' }}</el-descriptions-item>
          <el-descriptions-item label="一级分类">{{ currentDoc?.level_1_classification || '-' }}</el-descriptions-item>
          <el-descriptions-item label="二级分类">{{ currentDoc?.level_2_classification || '-' }}</el-descriptions-item>
          <el-descriptions-item label="三级分类">{{ currentDoc?.level_3_classification || '-' }}</el-descriptions-item>
          <el-descriptions-item label="四级分类">{{ currentDoc?.level_4_classification || '-' }}</el-descriptions-item>
          <el-descriptions-item label="编制单位">{{ currentDoc?.issuing_authority || '-' }}</el-descriptions-item>
          <el-descriptions-item label="编制日期">{{ formatDate(currentDoc?.release_date) }}</el-descriptions-item>
          <el-descriptions-item label="方案摘要">
            <div class="content-preview">{{ currentDoc?.plan_summary || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="编制依据">
            <div class="content-preview">{{ currentDoc?.compilation_basis || '-' }}</div>
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <template #footer>
        <div class="detail-footer">
          <div class="download-group" v-if="currentDoc">
            <el-button type="success" plain size="small" @click="handleDownload(currentDoc)" v-if="currentDoc.file_url">
              <el-icon><Download /></el-icon> 下载原文件
            </el-button>
            <el-button type="primary" plain size="small" @click="handleDownloadConverted(currentDoc)" v-if="currentDoc.md_url">
              <el-icon><Download /></el-icon> 下载 MD
            </el-button>
            <el-button type="warning" plain size="small" @click="handleDownloadJson(currentDoc)" v-if="currentDoc.json_url">
              <el-icon><Download /></el-icon> 下载 JSON
            </el-button>
          </div>
          <div class="action-group">
            <el-button @click="detailDialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="handleEditFromDetail" v-if="currentDoc">
              <el-icon><Edit /></el-icon> 编辑文档
            </el-button>
            <el-button type="success" @click="handleSingleEnter(currentDoc)" v-if="currentDoc && !isEntered(currentDoc.whether_to_enter)">加入知识库</el-button>
            <el-button type="primary" @click="handlePreview(currentDoc)" v-if="currentDoc?.file_url">预览原文档</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Filter, Upload, CircleCheck, Delete, Document, Warning, TopRight, Grid, DataAnalysis, Link, View, Switch, Edit, User, Download } from '@element-plus/icons-vue'
import request from '@/api/request'
import axios from 'axios'
import { downloadFile } from '@/utils/download'
import { useAuthStore } from '@/stores/auth'
import dayjs from 'dayjs'
import { documentApi, type DocumentItem } from '@/api/document'

// 接口定义已移至 @/api/document

// 状态变量
const loading = ref(false)
const submitting = ref(false)
const uploadDialogVisible = ref(false)
const editDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const previewVisible = ref(false)
const previewLoading = ref(false)
const previewTitle = ref('')
const previewUrl = ref('')
const previewDocType = ref('') // 'original' or 'md'
const isOfficeDoc = ref(false)
const total = ref(0)
const statistics = ref({
  allTotal: 0,
  totalEntered: 0
})
const authStore = useAuthStore()
const documents = ref<DocumentItem[]>([])
const currentDoc = ref<DocumentItem | null>(null)

const editForm = reactive({
  id: '',
  title: '',
  note: '',
  table_type: 'basis' as 'basis' | 'work' | 'job',
  year: new Date().getFullYear(),
  // 扩展字段 (子表特有属性)
  standard_no: '',
  issuing_authority: '',
  release_date: '',
  document_type: '',
  professional_field: '',
  validity: '',
  project_name: '',
  project_section: '',
  plan_category: '',
  level_1_classification: '施工方案',
  level_2_classification: '',
  level_3_classification: '',
  level_4_classification: '',
  plan_summary: '',
  compilation_basis: '',
  file_url: ''
})

const planCategoryOptions = ['超危大方案', '超危大方案较大II级', '超危大方案特大IV级', '超危大方案一般I级', '超危大方案重大III级', '危大方案', '一般方案']
const level2Options = ['临建工程', '路基工程', '其他', '桥梁工程', '隧道工程']
const level3Options = ['/', 'TBM施工', '拌和站安、拆施工', '不良地质隧道施工', '常规桥梁', '挡土墙工程类', '辅助坑道施工', '复杂洞口工程施工', '钢筋加工场安、拆', '钢栈桥施工', '拱桥', '涵洞工程类', '滑坡体处理类', '路堤', '路堑', '其他', '深基坑', '隧道总体施工', '特殊结构隧道', '斜拉桥', '悬索桥']
const level4Options = ['/', '挡土墙', '顶管', '断层破碎带及软弱围岩', '钢筋砼箱涵', '高填路堤', '抗滑桩', '其他', '软岩大变形隧道', '上部结构', '深基坑开挖与支护', '深挖路堑', '隧道TBM', '隧道进洞', '隧道竖井', '隧道斜井', '特种设备', '瓦斯隧道', '下部结构', '小净距隧道', '岩爆隧道', '岩溶隧道', '涌水突泥隧道', '桩基础']

const currentTitle = computed(() => {
  return '文档管理中心'
})
const selectedIds = ref<string[]>([])

const searchQuery = reactive({
  keyword: '',
  table_type: null as string | null,
  whether_to_enter: null as number | null,
  page: 1,
  size: 10
})

const uploadForm = reactive({
  title: '',
  note: '',
  file_url: '',
  table_type: 'basis' as 'basis' | 'work' | 'job',
  year: new Date().getFullYear()
})

// 计算属性
const proxyPreviewUrl = computed(() => {
  if (!previewUrl.value) return ''
  // 使用后端代理接口查看外部网页，附加 token 以通过认证
  const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'
  return `${baseUrl}/api/v1/sample/documents/proxy-view?url=${encodeURIComponent(previewUrl.value)}&token=${authStore.token}`
})

const isHtmlPage = computed(() => {
  if (!previewUrl.value) return false
  const url = previewUrl.value.toLowerCase()
  return url.includes('html') || url.includes('newgbinfo') || !url.split(/[?#]/)[0].includes('.')
})

// 方法
const formatSimpleDate = (date: string | null) => {
  if (!date) return '-'
  return dayjs(date).format('YYYY-MM-DD')
}

const formatDate = (date: string | undefined | null, formatStr: string = 'YYYY-MM-DD HH:mm:ss') => {
  return date ? dayjs(date).format(formatStr) : '-'
}



const getFileExtension = (row: DocumentItem) => {
  // 1. 优先使用数据库存储的后缀
  if (row.file_extension) {
    return row.file_extension.startsWith('.') ? row.file_extension : `.${row.file_extension}`
  }
  
  // 2. 如果数据库没有，再尝试从 URL 解析
  const url = row.file_url
  if (!url) return ''
  try {
    const path = new URL(url).pathname
    const lastDotIndex = path.lastIndexOf('.')
    if (lastDotIndex === -1) return ''
    const ext = path.slice(lastDotIndex).toLowerCase()
    if (ext.length > 6 || ext === '.') return ''
    return ext
  } catch (e) {
    const lastDotIndex = url.lastIndexOf('.')
    if (lastDotIndex === -1) return ''
    const ext = url.slice(lastDotIndex).split(/[?#]/)[0].toLowerCase()
    return ext.length <= 6 ? ext : ''
  }
}

const getFileIcon = (row: DocumentItem) => {
  const ext = getFileExtension(row).replace('.', '').toLowerCase()
  if (['pdf'].includes(ext)) return 'pdf'
  if (['doc', 'docx'].includes(ext)) return 'word'
  if (['xls', 'xlsx'].includes(ext)) return 'excel'
  if (['ppt', 'pptx'].includes(ext)) return 'ppt'
  if (['html', 'htm'].includes(ext)) return 'html'
  return 'file'
}

const getFileIconClass = (row: DocumentItem) => {
  return `icon-${getFileIcon(row)}`
}

const getKnowledgeBaseName = (sourceType: string | null | undefined) => {
  const names: Record<string, string> = {
    basis: '编制依据知识库',
    work: '施工方案知识库',
    job: '办公制度知识库'
  }
  return names[sourceType || ''] || '未知知识库'
}

const getKnowledgeBaseShortName = (sourceType: string | null | undefined) => {
  const names: Record<string, string> = {
    basis: '编制依据',
    work: '施工方案',
    job: '办公制度'
  }
  return names[sourceType || ''] || '未知'
}

const getKBTagType = (sourceType: string | null | undefined) => {
  const types: Record<string, string> = {
    basis: 'primary',
    work: 'success',
    job: 'warning'
  }
  return types[sourceType || ''] || 'info'
}

// 为已入库或未转化的行添加特定类名
const tableRowClassName = ({ row }: { row: DocumentItem }) => {
  return ''
}

// 判断是否可以勾选（所有文档均可勾选，用于批量删除等操作）
const canSelect = (row: DocumentItem) => {
  return true
}

const handleSelectionChange = (selection: DocumentItem[]) => {
  selectedIds.value = selection.map(item => item.id)
}

const handleBatchEnter = async () => {
  if (selectedIds.value.length === 0) return
  
  const ids = [...selectedIds.value]
  
  try {
    const res = await documentApi.batchEnter(ids)
    if (res.code === 0) {
      // 如果有详细详情（换行符标识），使用 MessageBox 显示
      if (res.message && res.message.includes('\n')) {
        ElMessageBox.alert(res.message, '入库结果', {
          confirmButtonText: '确定',
          customStyle: { 'white-space': 'pre-wrap' },
          type: res.message.includes('失败') || res.message.includes('跳过') ? 'warning' : 'success'
        })
      } else {
        ElMessage.success(res.message || '入库成功')
      }
      fetchDocuments()
    } else {
      ElMessageBox.alert(res.message || '入库失败', '操作失败', {
        confirmButtonText: '确定',
        type: 'error'
      })
    }
  } catch (error) {
    console.error('批量入库失败:', error)
    ElMessage.error('网络连接异常，请稍后重试')
  }
}

const handleSingleEnter = async (doc: DocumentItem | null) => {
  if (!doc) return
  
  try {
    const res = await documentApi.batchEnter([doc.id])
    if (res.code === 0) {
      if (res.message && res.message.includes('\n')) {
        ElMessageBox.alert(res.message, '入库结果', {
          confirmButtonText: '确定',
          customStyle: { 'white-space': 'pre-wrap' },
          type: res.message.includes('失败') || res.message.includes('跳过') ? 'warning' : 'success'
        })
      } else {
        ElMessage.success(res.message || '入库成功')
      }
      detailDialogVisible.value = false
      fetchDocuments()
    } else {
      ElMessage.error(res.message || '入库失败')
    }
  } catch (error) {
    console.error('入库失败:', error)
    ElMessage.error('入库异常')
  }
}

const handleDelete = async (row: DocumentItem) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除文档 "${row.title}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const res = await documentApi.batchDelete([row.id])
    
    if (res.code === 0) {
      ElMessage.success('删除成功')
      fetchDocuments()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除文档失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) return
  
  try {
    await ElMessageBox.confirm(
      `确定要批量删除选中的 ${selectedIds.value.length} 条文档吗？此操作不可恢复。`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const res = await documentApi.batchDelete(selectedIds.value)
    
    if (res.code === 0) {
      ElMessage.success(res.message || '批量删除成功')
      selectedIds.value = []
      fetchDocuments()
    } else {
      ElMessage.error(res.message || '批量删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('操作失败')
    }
  }
}

const isEntered = (val: any) => {
  return val === 1 || val === true
}

const getConversionStatusTag = (row: DocumentItem) => {
  switch (row.conversion_status) {
    case 1: return 'warning'   // 转换中
    case 2: return 'success'   // 成功
    case 3: return 'danger'    // 失败
    default: return 'info'     // 未转换 (0)
  }
}

const getConversionStatusText = (row: DocumentItem) => {
  switch (row.conversion_status) {
    case 1: return '转换中'
    case 2: return '转换成功'
    case 3: return '转换失败'
    default: return '未转换'
  }
}

const fetchDocuments = async () => {
  loading.value = true
  try {
    const res = await documentApi.getList(searchQuery)
    if (res.code === 0) {
      documents.value = res.data.items
      total.value = res.data.total
      statistics.value.allTotal = res.data.all_total || 0
      statistics.value.totalEntered = res.data.total_entered || 0
      
      // 自动检查是否需要开启轮询
      const hasConverting = documents.value.some(doc => doc.conversion_status === 1)
      if (hasConverting) {
        startPolling()
      } else {
        stopPolling()
      }
    }
  } catch (error) {
    console.error('获取文档列表失败:', error)
  } finally {
    loading.value = false
  }
}

const isRefreshing = ref(false)
const refreshTimer = ref<any>(null)

const startPolling = () => {
  if (refreshTimer.value === null) {
    refreshTimer.value = window.setTimeout(refreshDocumentsSilently, 5000)
  }
}

const stopPolling = () => {
  if (refreshTimer.value) {
    window.clearTimeout(refreshTimer.value)
    refreshTimer.value = null
  }
}

const refreshDocumentsSilently = async () => {
  if (isRefreshing.value) return
  isRefreshing.value = true
  try {
    const res = await documentApi.getList(searchQuery, true)
    if (res.code === 0) {
      documents.value = res.data.items
      total.value = res.data.total
      statistics.value.allTotal = res.data.all_total || 0
      statistics.value.totalEntered = res.data.total_entered || 0
    }
  } catch (error) {
    console.error('静默刷新失败:', error)
  } finally {
    isRefreshing.value = false
    // 如果没有手动停止，且组件未卸载，则安排下一次刷新
    if (refreshTimer.value !== null) {
      refreshTimer.value = window.setTimeout(refreshDocumentsSilently, 5000)
    }
  }
}

const handleSearch = () => {
  searchQuery.page = 1
  fetchDocuments()
}

const handleSizeChange = (val: number) => {
  searchQuery.size = val
  fetchDocuments()
}

const handleCurrentChange = (val: number) => {
  searchQuery.page = val
  fetchDocuments()
}

const beforeUpload = (file: File) => {
  const isLt50M = file.size / 1024 / 1024 < 50
  if (!isLt50M) {
    ElMessage.error('上传文件大小不能超过 50MB!')
    return false
  }
  return true
}

const handleExceed = () => {
  ElMessage.warning('只能上传一个文件，请先移除已上传的文件')
}

const customUpload = async (options: any) => {
  const { file, onSuccess, onError } = options
  try {
    // 1. 获取预签名 URL
    const res = await documentApi.getUploadUrl(file.name, file.type || 'application/octet-stream')

    if (res.code !== 0) {
      throw new Error(res.message || '获取上传链接失败')
    }

    const { upload_url, file_url } = res.data

    // 2. 直接上传到 MinIO (PUT 请求)
    await axios.put(upload_url, file, {
      headers: {
        'Content-Type': file.type || 'application/octet-stream'
      }
    })

    // 3. 上传成功，更新表单
    uploadForm.file_url = file_url
    if (!uploadForm.title) {
      // 如果标题为空，自动填充文件名（去掉后缀）
      uploadForm.title = file.name.replace(/\.[^/.]+$/, "")
    }
    
    ElMessage.success('文件上传成功')
    onSuccess(res.data)
  } catch (error: any) {
    console.error('文件上传失败:', error)
    ElMessage.error(error.message || '文件上传失败')
    onError(error)
  }
}

const handleUpload = () => {
  uploadForm.title = ''
  uploadForm.note = ''
  uploadForm.file_url = ''
  uploadDialogVisible.value = true
}

const submitUpload = async () => {
  if (!uploadForm.title) {
    return ElMessage.warning('请输入文档标题')
  }
  submitting.value = true
  try {
    const res = await documentApi.add(uploadForm)
    if (res.code === 0) {
      ElMessage.success('上传成功')
      uploadDialogVisible.value = false
      fetchDocuments()
    }
  } catch (error) {
    console.error('上传失败:', error)
  } finally {
    submitting.value = false
  }
}

const handleEdit = async (row: DocumentItem) => {
  try {
    const res = await documentApi.getDetail(row.id)
    if (res.code === 0 && res.data) {
      const data = res.data
      editForm.id = data.id
      editForm.title = data.title
      editForm.note = data.note || ''
      editForm.table_type = data.source_type
      
      // 填充扩展字段
      editForm.standard_no = data.standard_no || ''
      editForm.issuing_authority = data.issuing_authority || ''
      editForm.release_date = data.release_date || ''
      editForm.document_type = data.document_type || ''
      editForm.professional_field = data.professional_field || ''
      editForm.validity = data.validity || ''
      editForm.project_name = data.project_name || ''
      editForm.project_section = data.project_section || ''
      editForm.plan_category = data.plan_category || ''
      editForm.level_1_classification = data.level_1_classification || '施工方案'
      editForm.level_2_classification = data.level_2_classification || ''
      editForm.level_3_classification = data.level_3_classification || ''
      editForm.level_4_classification = data.level_4_classification || ''
      editForm.plan_summary = data.plan_summary || ''
      editForm.compilation_basis = data.compilation_basis || ''
      editForm.file_url = data.file_url || ''
      
      editDialogVisible.value = true
    } else {
      ElMessage.error(res.message || '获取文档详情失败')
    }
  } catch (error) {
    console.error('获取文档详情失败:', error)
    ElMessage.error('获取文档详情失败')
  }
}

const submitEdit = async () => {
  if (!editForm.title) {
    return ElMessage.warning('请输入文档标题')
  }
  submitting.value = true
  try {
    const res = await documentApi.edit(editForm)
    if (res.code === 0) {
      ElMessage.success('更新成功')
      editDialogVisible.value = false
      fetchDocuments()
    }
  } catch (error) {
    console.error('编辑失败:', error)
  } finally {
    submitting.value = false
  }
}

const handleView = (row: DocumentItem) => {
  if (row.file_url) {
    handlePreview(row)
  } else {
    currentDoc.value = row
    detailDialogVisible.value = true
  }
}

const handleEditFromDetail = () => {
  if (currentDoc.value) {
    const doc = currentDoc.value
    detailDialogVisible.value = false
    handleEdit(doc)
  }
}

const handlePreview = (row: DocumentItem | null) => {
  if (!row || !row.file_url) return
  currentDoc.value = row
  previewTitle.value = row.title
  
  const ext = getFileExtension(row).toLowerCase()
  const officeExtensions = ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx']
  isOfficeDoc.value = officeExtensions.includes(ext)
  
  // 如果是 Office 文档且有转换后的 MD，优先预览 MD
  if (isOfficeDoc.value && row.md_url) {
    previewUrl.value = row.md_url
    previewDocType.value = 'md'
    previewTitle.value = `${row.title} (转换预览)`
  } else {
    previewUrl.value = row.file_url
    previewDocType.value = 'original'
  }
  
  previewVisible.value = true
  // 如果是无法直接预览的 Office 文档，不需要等待 iframe 加载
  if (isOfficeDoc.value && previewDocType.value === 'original') {
    previewLoading.value = false
  } else {
    previewLoading.value = true
  }
}

const handleDownload = (row: DocumentItem) => {
  if (row.file_url) {
    const ext = getFileExtension(row)
    const filename = row.title.endsWith(ext) ? row.title : `${row.title}${ext}`
    downloadFile(row.file_url, filename)
  } else {
    ElMessage.warning('该文档暂无下载链接')
  }
}

const handleDownloadConverted = (row: DocumentItem) => {
  if (row.md_url) {
    const filename = row.md_display_name || `${row.title}.md`
    downloadFile(row.md_url, filename)
  } else {
    ElMessage.warning('该文档暂无转换后的文件')
  }
}

const handleDownloadJson = (row: DocumentItem) => {
  if (row.json_url) {
    const filename = row.json_display_name || `${row.title}.json`
    downloadFile(row.json_url, filename)
  } else {
    ElMessage.warning('该文档暂无转换后的 JSON 文件')
  }
}

const handleConvert = async (row: DocumentItem) => {
  // 如果已经转换成功（status 为 2），弹出确认框
  if (row.conversion_status === 2) {
    try {
      await ElMessageBox.confirm(
        '该数据已经转换，再次转换会覆盖数据',
        '再次转换确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
    } catch (error) {
      // 用户取消
      return
    }
  }

  try {
    // 乐观更新：设置状态为转换中
    row.conversion_status = 1
    row.conversion_error = undefined
    
    // 启动转换任务（静默刷新，不触发全局 loading）
    const res = await documentApi.convert(row.id)
    if (res.code === 0) {
      ElMessage.success(res.message || '转换任务已启动')
      // 触发一次静默刷新以更新状态
      refreshDocumentsSilently()
    } else {
      // 失败了恢复状态并刷新
      refreshDocumentsSilently()
    }
  } catch (error) {
    console.error('启动转换失败:', error)
    // 失败了恢复状态并刷新
    refreshDocumentsSilently()
  }
}

const openInNewWindow = () => {
  if (previewUrl.value) {
    // 优先尝试在新窗口打开代理后的链接，这有助于控制 Content-Disposition
    window.open(proxyPreviewUrl.value, '_blank')
  }
}

onMounted(() => {
  fetchDocuments()
  // 5秒后开始第一次静默刷新，之后递归调用
  refreshTimer.value = window.setTimeout(refreshDocumentsSilently, 5000)
})

onUnmounted(() => {
  if (refreshTimer.value) {
    window.clearTimeout(refreshTimer.value)
  }
  stopPolling()
})
</script>

<style scoped>
.documents-container {
  padding: 20px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-info h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.statistics-bar {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.conversion-progress-wrapper {
  width: 100%;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.error-msg-text {
  font-size: 12px;
  color: #f56c6c;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #606266;
}

.stat-item .el-icon {
  font-size: 16px;
  color: #909399;
}

.stat-value {
  font-weight: bold;
  color: #303133;
}

.stat-value.success {
  color: #67c23a;
}

.clickable-filename {
  color: #409eff;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.2s;
}

.clickable-filename:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.action-btn {
  padding: 4px 8px;
  height: auto;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn-icon {
  padding: 4px;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.action-btn-icon:hover {
  background-color: #f5f7fa;
}

.action-btn-icon .el-icon {
  font-size: 16px;
}

.action-btn .el-icon {
  font-size: 14px;
}

.file-info-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 14px;
}

.file-icon-mini.pdf { background-color: #fef0f0; color: #f56c6c; }
.file-icon-mini.word { background-color: #ecf5ff; color: #409eff; }
.file-icon-mini.excel { background-color: #f0f9eb; color: #67c23a; }
.file-icon-mini.ppt { background-color: #fff7e6; color: #e6a23c; }

.file-info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.file-note {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.file-name-link {
  color: #409eff;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-name-link:hover {
  text-decoration: underline;
}

.compact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
}

.info-row.secondary {
  color: #909399;
  font-size: 11px;
}

.date-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.time-mini {
  font-size: 11px;
  color: #909399;
}

.conversion-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 0;
}

.status-tag {
  font-weight: 500;
  margin-bottom: 2px;
}

.converted-file-links {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
}

.converted-file-name {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.converted-file-name :deep(.el-link) {
  font-size: 12px;
  justify-content: flex-start;
}

.converted-file-name :deep(.el-link .el-icon) {
  margin-right: 4px;
}

.file-name-mini {
  font-size: 11px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-icon-success { color: #67c23a; font-size: 18px; }
.status-icon-info { color: #909399; font-size: 18px; }

.upload-btn {
  background-color: #67c23a;
  border-color: #67c23a;
}

.search-card {
  margin-bottom: 20px;
  background-color: #f8f9fa;
}

.search-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-input :deep(.el-input__wrapper) {
  padding: 8px 12px;
  font-size: 16px;
}

.filter-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-select {
  width: 200px;
}

.filter-select-year {
  width: 140px;
}

.search-btn {
  padding: 0 30px;
  height: 40px;
  font-size: 15px;
  font-weight: bold;
  margin-left: auto;
}

.content-section {
  background: #fff;
  border-radius: 4px;
  min-height: 400px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 文件信息单元格布局 */
.file-info-cell {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.file-icon-wrapper {
  position: relative;
  width: 40px;
  height: 48px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.file-icon-wrapper:hover {
  transform: scale(1.05);
}

.file-icon-wrapper .el-icon {
  font-size: 24px;
  margin-bottom: 2px;
  color: #fff;
}

.file-type-label {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

/* 不同文件类型的背景色 */
.icon-pdf { background-color: #ff4d4f; }
.icon-word { background-color: #1890ff; }
.icon-excel { background-color: #52c41a; }
.icon-ppt { background-color: #fa8c16; }
.icon-html { background-color: #13c2c2; }
.icon-file { background-color: #8c8c8c; }

.file-text-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-name-title {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.file-name-title:hover {
  color: #409eff;
}

.file-description-subtitle {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.dialog-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 30px;
}

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

.preview-tip {
  margin-bottom: 15px;
}

.preview-content {
  height: 75vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  position: relative;
}

.unsupported-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.unsupported-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.preview-content iframe {
  flex: 1;
  display: block;
}

:deep(.preview-dialog) {
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
}

</style>