Industrial-image-management-system---web/src/views/bussiness-data/bussiness.vue

<template>
  <a-layout class="knowledge-container">
    <!-- 侧边栏 -->
    <a-layout-sider 
      width="260"
      :collapsed-width="80"
      theme="light" 
      class="folder-sidebar"
      :collapsed="sidebarCollapsed"
      collapsible
      @collapse="handleSidebarCollapse"
      @expand="handleSidebarExpand"
    >
      <div class="sidebar-header">
        <a-space direction="vertical" size="medium" v-if="!sidebarCollapsed">
          <a-button 
            type="primary" 
            size="large" 
            long 
            @click="handleCreateFolder"
            class="create-folder-btn"
          >
            <template #icon><icon-plus /></template>
            新建文件夹
          </a-button>
          <a-input-search 
            placeholder="搜索文件夹..." 
            allow-clear 
            v-model="searchKeyword"
            @search="handleFolderSearch"
            @input="handleSearchInput"
            @clear="handleSearchClear"
            class="search-input"
          />
        </a-space>
      </div>

      <div class="folder-content">
        <!-- 加载状态 -->
        <a-skeleton :loading="loading && folderList.length === 0" :rows="5" v-if="loading" animation="pulse">
          <template #skeleton>
            <div class="skeleton-item flex items-center px-4 py-3" v-for="i in 5" :key="i">
              <div class="w-6 h-6 rounded bg-gray-200 mr-3"></div>
              <div class="flex-1 h-4 bg-gray-200 rounded"></div>
            </div>
          </template>
        </a-skeleton>
        
        <!-- 搜索结果提示 -->
        <div v-if="searchKeyword && !loading" class="search-result-tip">
          <a-typography-text type="secondary">
            搜索 "{{ searchKeyword }}" 的结果：共 {{ totalFolders }} 个文件夹
          </a-typography-text>
        </div>
        
        <a-empty v-if="!loading && folderList.length === 0" :description="searchKeyword ? '未找到匹配的文件夹' : '暂无文件夹'" />
        
        <a-list v-if="!loading && folderList.length > 0" class="folder-list">
          <!-- 文件夹列表 -->
          <a-list-item 
            v-for="folder in folderList" 
            :key="folder.id"
            :class="['folder-list-item', { 'active': currentFolderId === folder.id }]"
            @click="handleFolderClick(folder.id)"
            :tooltip="sidebarCollapsed ? folder.name : ''"  
          >
            <!-- 第一行：文件夹图标和名称 -->
            <div class="folder-main-info">
              <div class="folder-icon-wrapper">
                <IconFolder class="folder-icon" :style="{ color: folderColor }" />
              </div>
              <span v-if="!sidebarCollapsed" class="folder-name">{{ folder.name }}</span>
            </div>
            
            <!-- 第二行：文件夹操作按钮 -->
            <div v-if="!sidebarCollapsed" class="folder-actions-row">
              <a-button 
                type="text" 
                shape="circle" 
                size="small" 
                @click.stop="handleRenameFolder(folder, folder.id, folder.name)"
                tooltip="重命名"
                class="action-btn"
              >
                <icon-edit />
              </a-button>
              <a-button 
                type="text" 
                shape="circle" 
                size="small" 
                @click.stop="handleDeleteFolder(folder)"
                tooltip="删除"
                status="danger"
                class="action-btn"
              >
                <icon-delete />
              </a-button>
            </div>
          </a-list-item>
        </a-list>
      </div>

      <!-- 侧边栏底部分页控件 -->
      <div class="sidebar-footer" v-if="!sidebarCollapsed && folderList.length > 0">
        <div class="pagination-info">
          <a-typography-text type="secondary" size="small">
            共 {{ totalFolders }} 个文件夹
          </a-typography-text>
        </div>
        
        <div class="pagination-controls">
          <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            :total="totalFolders"
            :show-size-changer="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="handlePageChange"
            @showSizeChange="handlePageSizeChange"
            size="small"
            show-total
          />
        </div>
      </div>
    </a-layout-sider>

    <a-layout>
      <a-layout-header class="file-header">
        <div class="breadcrumbs">
          <a-breadcrumb>
            <a-breadcrumb-item>知识库</a-breadcrumb-item>
            <a-breadcrumb-item>{{ currentFolderName }}</a-breadcrumb-item>
          </a-breadcrumb>
          <a-button 
            type="text" 
            shape="circle" 
            @click="refreshData"
            :loading="refreshing" 
            tooltip="刷新数据"
          >
            <template #icon>
              <icon-refresh :spin="refreshing" />
            </template>
          </a-button>
        </div>
        <a-space>
          <a-button type="outline" @click="handleUploadFile">
            <template #icon><icon-upload /></template>
            上传文件
          </a-button>
          <a-button type="primary" @click="handleCreateFolder">
            <template #icon><icon-plus /></template>
            新建文件夹
          </a-button>
        </a-space>
      </a-layout-header>

      <a-layout-content class="file-content">
        <a-card :bordered="false" class="file-card">
          <a-descriptions :title="`文件列表 (${fileList.length})`" v-if="currentFolderId" />
          
          <!-- 文件搜索功能 -->
          <div v-if="currentFolderId" class="file-search-container">
            <a-input-search
              v-model="fileSearchKeyword"
              placeholder="搜索文件名..."
              class="file-search-input"
              @search="handleFileSearch"
              @input="handleFileSearchInput"
              @clear="handleFileSearchClear"
              allow-clear
            />
          </div>
          
          <a-divider size="small" v-if="currentFolderId" />

          <template v-if="!currentFolderId">
            <div class="initial-state">
              <icon-folder-add class="initial-icon" />
              <div class="initial-text">请从左侧选择一个文件夹</div>
            </div>
          </template>

          <!-- 文件列表加载状态 -->
          <a-skeleton 
            :loading="loading && currentFolderId" 
            :rows="8" 
            v-if="loading && currentFolderId"
            animation="pulse"
          >
            <template #skeleton>
              <a-row class="table-data-row" v-for="i in 8" :key="i">
                <!-- 文件名列 -->
                <a-col :span="10" class="table-column name-column">
                  <div class="file-main">
                    <div class="w-8 h-8 rounded bg-gray-200 mr-3"></div>
                    <div class="file-name-wrap">
                      <div class="h-5 bg-gray-200 rounded w-1/2 mb-1"></div>
                      <div class="h-4 bg-gray-200 rounded w-1/3"></div>
                    </div>
                  </div>
                </a-col>

                <!-- 类型列 -->
                <a-col :span="4" class="table-column type-column">
                  <div class="h-4 bg-gray-200 rounded w-1/3"></div>
                </a-col>

                <!-- 大小列 -->
                <a-col :span="3" class="table-column size-column">
                  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                </a-col>

                <!-- 时间列 -->
                <a-col :span="5" class="table-column time-column">
                  <div class="h-4 bg-gray-200 rounded w-2/3"></div>
                </a-col>

                <!-- 操作列 -->
                <a-col :span="2" class="table-column action-column">
                  <div class="flex gap-2">
                    <div class="w-6 h-6 rounded bg-gray-200"></div>
                    <div class="w-6 h-6 rounded bg-gray-200"></div>
                    <div class="w-6 h-6 rounded bg-gray-200"></div>
                    <div class="w-6 h-6 rounded bg-gray-200"></div>
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-skeleton>

          <!-- 文件表格 -->
          <div class="file-grid-container" v-if="currentFolderId && !loading">
            <!-- 表头行 -->
            <a-row class="table-header-row">
              <a-col :span="10" class="table-column name-column">文件名</a-col>
              <a-col :span="4" class="table-column type-column">类型</a-col>
              <a-col :span="3" class="table-column size-column">大小</a-col>
              <a-col :span="5" class="table-column time-column">修改时间</a-col>
              <a-col :span="2" class="table-column action-column">操作</a-col>
            </a-row>

            <!-- 数据行 -->
            <a-row 
              v-for="file in fileList" 
              :key="file.fileId" 
              class="table-data-row"
            >
              <!-- 文件名列 -->
              <a-col :span="10" class="table-column name-column">
                <div class="file-main">
                  <icon-file :style="{ color: fileColor(getFileExtension(file.fileName || file.name)) }" class="file-icon-large" />
                  <div class="file-name-wrap">
                    <a-typography-title :heading="6" class="file-name">{{ file.fileName || file.name }}</a-typography-title>
                    <div class="file-name-small">{{ file.fileName || file.name }}</div>
                  </div>
                </div>
              </a-col>

              <!-- 类型列 -->
              <a-col :span="4" class="table-column type-column">
                <div class="cell-content">{{ fileTypeText(getFileExtension(file.fileName || file.name)) }}</div>
              </a-col>

              <!-- 大小列 -->
              <a-col :span="3" class="table-column size-column">
                <div class="cell-content">{{ formatFileSize(file.fileSize || file.size) }}</div>
              </a-col>

              <!-- 时间列 -->
              <a-col :span="5" class="table-column time-column">
                <div class="cell-content">{{ formatUploadTime(file.uploadTime || file.uploadTime) }}</div>
              </a-col>

              <!-- 操作列 -->
              <a-col :span="2" class="table-column action-column">
                <div class="file-actions">
                  <a-button 
                    type="text" 
                    shape="circle" 
                    size="small" 
                    tooltip="预览"
                    @click="handlePreview(file)"
                  >
                    <icon-eye />
                  </a-button>
                  <a-button 
                    type="text" 
                    shape="circle" 
                    size="small" 
                    tooltip="下载"
                    @click="handleDownload(file)"
                  >
                    <icon-download />
                  </a-button>
                  <a-button 
                    type="text" 
                    shape="circle" 
                    size="small" 
                    tooltip="重命名"
                    @click="handleEditFile(file)"
                  >
                    <icon-edit />
                  </a-button>
                  <a-button 
                    type="text" 
                    shape="circle" 
                    size="small" 
                    tooltip="删除"
                    @click="handleDelete(file)"
                    class="action-btn delete-btn"
                  >
                    <icon-delete />
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 文件分页 -->
          <div v-if="currentFolderId && !loading && totalFiles > 0" class="file-pagination">
            <a-pagination
              :total="totalFiles"
              :current="fileCurrentPage"
              :page-size="filePageSize"
              :show-total="true"
              :show-page-size="true"
              :page-size-options="[10, 20, 50, 100]"
              :show-jumper="true"
              @change="handleFilePageChange"
              @page-size-change="handleFilePageSizeChange"
            />
          </div>

          <!-- 空状态 -->
          <a-empty 
            v-if="!loading && currentFolderId && fileList.length === 0" 
            description="暂无文件"
            class="empty-state"
          >
            <template #image><icon-file /></template>
            <template #actions>
              <a-button type="primary" @click="handleUploadFile">
                <template #icon><icon-upload /></template>
                上传文件
              </a-button>
            </template>
          </a-empty>
        </a-card>
      </a-layout-content>
    </a-layout>

    <!-- 新建/编辑文件夹对话框 -->
    <a-modal
      v-model:visible="folderDialogVisible"
      :title="folderForm.id ? '编辑文件夹' : '新建文件夹'"
      width="520px"
      @ok="submitFolderForm"
      @cancel="folderDialogVisible = false"
      :confirm-loading="folderSubmitting"  
    >
      <a-form 
        :model="folderForm" 
        ref="folderFormRef" 
        layout="vertical"
        :validate-trigger="['change', 'blur']"  
      >
        <a-form-item label="文件夹名称" field="name" :rules="folderRules.name">
          <a-input v-model="folderForm.name" placeholder="输入文件夹名称" max-length="50" />
        </a-form-item>
        <a-form-item label="父级目录" field="parentId" :rules="folderRules.parentId">
          <a-select
            v-model="folderForm.parentId"
            placeholder="请选择父级目录"
          >
            <a-option value="0">根目录</a-option>
            <a-option 
              v-for="folder in folderList" 
              :key="folder.id" 
              :value="folder.id"
              v-if="!folderForm.id || folder.id !== folderForm.id"
            >
              {{ folder.name }}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    
    <!-- 上传文件对话框 -->
    <a-modal
      v-model:visible="uploadDialogVisible"
      title="上传文件"
      width="620px"
      :mask-closable="false"
      @ok="handleUploadSubmit"
      @cancel="resetUpload"
      :confirm-loading="uploading"
      :ok-disabled="!canUpload"
    >
      <a-form :model="uploadForm" ref="uploadFormRef" layout="vertical">
        <!-- 选择文件 -->
        <a-form-item 
          label="选择文件" 
          :validate-status="!hasFiles ? 'error' : ''"
          :help="!hasFiles ? '请选择需要上传的文件' : ''"
        >
          <div class="upload-container">
            <!-- 上传按钮 -->
            <a-upload
              ref="uploadRef"
              :auto-upload="false"
              :show-file-list="false"
              @change="handleFileChange"
              :accept="allowedFileTypes"
            >
              <a-button type="primary" class="upload-btn">
                <icon-upload />
                点击选择文件
              </a-button>
            </a-upload>
            
            <!-- 文件类型提示 -->
            <div class="upload-hint">
              支持 {{ allowedFileTypesText }} 等格式，单个文件不超过 {{ maxFileSizeText }}
            </div>
          </div>
          
          <!-- 文件列表 -->
          <div class="upload-file-list" v-if="fileListTemp.length > 0">
            <div 
              class="upload-file-item" 
              v-for="file in fileListTemp" 
              :key="file.uid"
              :class="{ 'file-error': file.error }"
            >
              <div class="file-info">
                <icon-file 
                  :style="{ color: fileColor(getFileExtension(file.name)) }" 
                  class="file-icon" 
                />
                <div class="file-details">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-meta">
                    {{ formatFileSize(file.size) }}
                    <span v-if="file.error" class="error-text">{{ file.error }}</span>
                  </div>
                </div>
              </div>
              
              <!-- 进度条 -->
              <div class="file-progress" v-if="file.status === 'uploading'">
                <a-progress 
                  :percent="file.percent || 0" 
                  size="small"
                  :status="file.percent === 100 ? 'success' : 'processing'"
                />
              </div>
              
              <!-- 操作按钮 -->
              <div class="file-actions">
                <a-button 
                  v-if="file.status !== 'uploading'"
                  type="text" 
                  shape="circle" 
                  size="small" 
                  @click="removeFile(file)"
                  class="remove-btn"
                >
                  <icon-delete />
                </a-button>
                <a-button 
                  v-else
                  type="text" 
                  shape="circle" 
                  size="small" 
                  @click="cancelUpload(file)"
                  class="cancel-btn"
                >
                  <icon-stop />
                </a-button>
              </div>
            </div>
          </div>
        </a-form-item>

        <!-- 目标文件夹选择 -->
        <a-form-item 
          label="上传至目录" 
          field="folderId"
          :rules="[{ required: true, message: '请选择目标文件夹' }]"
        >
          <a-select
            v-model="uploadForm.folderId"
            placeholder="请选择目标文件夹"
            allow-clear
          >
            <a-option value="0">根目录</a-option>
            <a-option 
              v-for="folder in folderList" 
              :key="folder.id" 
              :value="folder.id"
            >
              {{ folder.name }}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    
    <!-- 重命名文件夹对话框 -->
    <a-modal
      v-model:visible="renameModalVisible"
      :title="renameForm.isRoot ? '重命名根目录' : '重命名文件夹'"
      width="520px"
      @ok="confirmRename"
      @cancel="renameModalVisible = false"
    >
      <a-form layout="vertical">
        <a-form-item label="文件夹名称">
          <a-input 
            v-model="renameForm.newName" 
            placeholder="请输入新的文件夹名称" 
            max-length="50"
            @keyup.enter="confirmRename"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 重命名文件对话框 -->
    <a-modal
      v-model:visible="renameFileModalVisible"
      title="重命名文件"
      width="520px"
      @ok="confirmRenameFile"
      @cancel="renameFileModalVisible = false"
    >
      <a-form layout="vertical">
        <a-form-item label="新文件名">
          <a-input 
            v-model="renameFileForm.newName" 
            placeholder="请输入新的文件名称（不含扩展名）" 
            max-length="100"
            @keyup.enter="confirmRenameFile"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout>
</template>

<script setup>
// 导入核心依赖
import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
import {
  IconFolder,
  IconFile,
  IconPlus,
  IconUpload,
  IconMenuFold,
  IconMenuUnfold,
  IconEye,
  IconDownload,
  IconDelete,
  IconRefresh,
  IconEdit,
  IconFolderAdd,
  IconStop
} from '@arco-design/web-vue/es/icon';
import { Message, Modal } from '@arco-design/web-vue';
import axios from 'axios';

// 导入API
import {
  getFolderListApi,
  getFilesApi,
  createFolderApi,
  updateFolderApi,
  deleteFolderApi,
  deleteFileApi,
  downloadFileApi,
  uploadFileApi,
  updateFileNameApi,
  renameFileApi,
  previewFileApi
} from '@/apis/bussiness'

// 状态管理
const folderList = ref([]);
const fileList = ref([]);
const currentFolderId = ref('');
const currentFolderName = ref('');
const loading = ref(false);
const folderDialogVisible = ref(false);
const uploadDialogVisible = ref(false);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalFolders = ref(0);
const fileCurrentPage = ref(1);
const filePageSize = ref(10);
const totalFiles = ref(0);

// 表单数据
const folderForm = reactive({
  id: '',
  name: '',
  parentId: '0'
});

const folderRules = {
  name: [
    { required: true, message: '请输入文件夹名称' },
    { maxLength: 50, message: '文件夹名称不能超过50个字符' }
  ],
  parentId: [
    { required: true, message: '请选择父级目录' }
  ]
};

// 上传相关状态
const uploadForm = reactive({
  folderId: ''
});
const fileListTemp = ref([]);
const folderFormRef = ref(null);
const uploadFormRef = ref(null);
const uploadRef = ref(null);
const folderColor = '#165DFF';
const refreshing = ref(false);
const folderSubmitting = ref(false);
const uploading = ref(false);
const allowedFileTypes = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.txt,.jpg,.jpeg,.png,.gif,.bmp,.webp';
const allowedFileTypesText = 'PDF, Word, Excel, PPT, 压缩文件, 文本文件, 图片文件';
const maxFileSize = 1000 * 1024 * 1024; // 1000MB
const maxFileSizeText = '1000MB';
const cancelTokens = ref({});

// 计算属性：是否有文件可上传
const hasFiles = computed(() => {
  console.log('=== hasFiles计算属性执行 ===');
  console.log('原始fileListTemp:', fileListTemp.value);
  console.log('fileListTemp长度:', fileListTemp.value.length);
  
  const validFiles = fileListTemp.value.filter(file => {
    const isValid = !file.error && file.status !== 'removed' && file.status !== 'canceled';
    console.log(`文件 ${file.name}: error=${file.error}, status=${file.status}, isValid=${isValid}`);
    return isValid;
  });
  
  console.log('过滤后的有效文件:', validFiles);
  console.log('有效文件数量:', validFiles.length);
  console.log('hasFiles结果:', validFiles.length > 0);
  
  return validFiles.length > 0;
});

// 计算属性：是否可以上传
const canUpload = computed(() => {
  return hasFiles.value && !uploading.value && uploadForm.folderId;
});

// 搜索相关
const searchKeyword = ref(''); // 文件夹搜索关键词
const fileSearchKeyword = ref(''); // 文件搜索关键词
const searchTimeout = ref(null);

// 初始化文件夹数据
const initData = async () => {
  try {
    loading.value = true;
    console.log('=== 开始初始化数据 ===');
    console.log('搜索关键词:', searchKeyword.value);
    console.log('搜索关键词类型:', typeof searchKeyword.value);
    console.log('搜索关键词长度:', searchKeyword.value?.length);
    console.log('当前页码:', currentPage.value);
    console.log('页面大小:', pageSize.value);
    
    const apiParams = {
      page: currentPage.value,
      pageSize: pageSize.value,
      folderName: searchKeyword.value.trim() || undefined
    };
    
    console.log('API参数:', apiParams);
    
    const folderRes = await getFolderListApi(apiParams);
    
    console.log('=== API响应详情 ===');
    console.log('完整响应:', folderRes);
    console.log('响应状态码:', folderRes.code);
    console.log('响应数据:', folderRes.data);
    console.log('rows数据:', folderRes.data?.rows);
    console.log('rows数据类型:', typeof folderRes.data?.rows);
    console.log('rows数据长度:', folderRes.data?.rows?.length);
    console.log('total数据:', folderRes.data?.total);
    
    // 根据后端返回的数据结构处理
    if (folderRes.code === 200 && folderRes.data) {
      const processedFolders = folderRes.data.rows.map(folder => ({
        id: String(folder.folderId),
        name: folder.folderName,
        parentId: String(folder.parentId || 0)
      }));
      
      folderList.value = processedFolders;
      totalFolders.value = Number(folderRes.data.total) || 0;
      
      console.log('=== 处理后的数据 ===');
      console.log('处理后的文件夹列表:', folderList.value);
      console.log('文件夹列表长度:', folderList.value.length);
      console.log('总文件夹数:', totalFolders.value);
      console.log('当前folderList.value:', folderList.value);
    } else {
      folderList.value = [];
      totalFolders.value = 0;
      console.log('API响应异常，清空列表');
      console.log('响应码不是200或数据为空');
    }
  } catch (error) {
    console.error('初始化文件夹数据失败:', error);
    console.error('错误详情:', error.response?.data);
    Message.error('加载文件夹失败，请重试');
    folderList.value = [];
    totalFolders.value = 0;
  } finally {
    loading.value = false;
    console.log('=== 初始化完成 ===');
    console.log('最终folderList.value:', folderList.value);
    console.log('最终loading.value:', loading.value);
  }
};

// 分页事件处理
const handlePageChange = (page) => {
  currentPage.value = page;
  initData();
};

const handlePageSizeChange = (current, size) => {
  pageSize.value = size;
  currentPage.value = 1;
  initData();
};

const handleFolderSearch = () => {
  console.log('=== 执行搜索 ===');
  console.log('搜索关键词:', searchKeyword.value);
  // 重置到第一页并搜索
  currentPage.value = 1;
  console.log('重置页码为:', currentPage.value);
  initData();
};

const handleSearchInput = (value) => {
  console.log('=== 搜索输入 ===');
  console.log('输入值:', value);
  searchKeyword.value = value;
  console.log('设置搜索关键词为:', searchKeyword.value);
  // 防抖搜索：300ms后自动搜索
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value);
    console.log('清除之前的搜索定时器');
  }
  searchTimeout.value = setTimeout(() => {
    console.log('=== 防抖搜索执行 ===');
    currentPage.value = 1;
    console.log('重置页码为:', currentPage.value);
    initData();
  }, 300);
};

const handleSearchClear = () => {
  console.log('=== 清除搜索 ===');
  searchKeyword.value = '';
  console.log('清空搜索关键词');
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value);
    console.log('清除搜索定时器');
  }
  currentPage.value = 1;
  console.log('重置页码为:', currentPage.value);
  initData();
};

// 文件搜索相关函数
const handleFileSearch = () => {
  console.log('=== 执行文件搜索 ===');
  console.log('文件搜索关键词:', fileSearchKeyword.value);
  // 重置到第一页并搜索
  fileCurrentPage.value = 1;
  console.log('重置文件页码为:', fileCurrentPage.value);
  if (currentFolderId.value) {
    loadFiles(currentFolderId.value);
  }
};

const handleFileSearchInput = (value) => {
  console.log('=== 文件搜索输入 ===');
  console.log('输入值:', value);
  fileSearchKeyword.value = value;
  console.log('设置文件搜索关键词为:', fileSearchKeyword.value);
  // 防抖搜索：300ms后自动搜索
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value);
    console.log('清除之前的文件搜索定时器');
  }
  searchTimeout.value = setTimeout(() => {
    console.log('=== 防抖文件搜索执行 ===');
    fileCurrentPage.value = 1;
    console.log('重置文件页码为:', fileCurrentPage.value);
    if (currentFolderId.value) {
      loadFiles(currentFolderId.value);
    }
  }, 300);
};

const handleFileSearchClear = () => {
  console.log('=== 清除文件搜索 ===');
  fileSearchKeyword.value = '';
  console.log('清空文件搜索关键词');
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value);
    console.log('清除文件搜索定时器');
  }
  fileCurrentPage.value = 1;
  console.log('重置文件页码为:', fileCurrentPage.value);
  if (currentFolderId.value) {
    loadFiles(currentFolderId.value);
  }
};

const loadFiles = async (folderId) => {
  try {
    loading.value = true;
    const res = await getFilesApi({
      folderId: folderId,
      page: fileCurrentPage.value,
      pageSize: filePageSize.value,
      fileName: fileSearchKeyword.value || undefined
    });
    
    // 根据后端返回的数据结构处理
    if (res.code === 200 && res.data) {
      fileList.value = res.data.rows || []; 
      totalFiles.value = res.data.total || 0;
    } else {
      fileList.value = [];
      totalFiles.value = 0;
    }
    
    currentFolderId.value = folderId;

    if (folderId === '0') {
      currentFolderName.value = '根目录';
    } else {
      const folder = folderList.value.find(f => f.id === folderId);
      currentFolderName.value = folder ? folder.name : '未知文件夹';
    }
  } catch (error) {
    console.error('加载文件失败:', error);
    Message.error('服务开小差，请稍后再试');
    fileList.value = [];
    totalFiles.value = 0;
  } finally {
    loading.value = false;
  }
};


// 文件夹点击事件
const handleFolderClick = (folderId) => {
  const id = String(folderId);
  if (currentFolderId.value !== id) {
    fileCurrentPage.value = 1;
    // 切换文件夹时清空文件搜索关键词
    fileSearchKeyword.value = '';
  }
  currentFolderId.value = id;
};

// 重命名对话框状态
const renameModalVisible = ref(false);
const renameForm = reactive({
  folderId: '',
  currentName: '',
  newName: '',
  isRoot: false
});

// 重命名文件对话框状态
const renameFileModalVisible = ref(false);
const renameFileForm = reactive({
  fileId: '',
  newName: '',
  fileExtension: ''
});

// 文件夹重命名处理函数
const handleRenameFolder = (folder, folderId, currentName) => {
  console.log('handleRenameFolder 被调用:', { folder, folderId, currentName });
  
  // 验证参数
  if (!folderId) {
    console.error('folderId 为空');
    Message.error('文件夹ID不能为空');
    return;
  }
  
  if (!currentName) {
    console.error('currentName 为空');
    Message.error('当前文件夹名称不能为空');
    return;
  }
  
  // 先显示一个简单的提示，确认函数被调用
  Message.info('重命名功能被触发');
  
  // 设置重命名对话框数据
  renameForm.folderId = folderId;
  renameForm.currentName = currentName;
  renameForm.newName = currentName;
  renameForm.isRoot = folderId === '0';
  
  console.log('重命名表单数据已设置:', renameForm);
  
  // 显示重命名对话框
  renameModalVisible.value = true;
  console.log('重命名对话框已显示');
};

// 确认重命名
const confirmRename = async () => {
  const { folderId, newName, currentName, isRoot } = renameForm;
  
  console.log('确认重命名:', { folderId, newName, currentName, isRoot });
  
  if (!newName || newName.trim() === '') {
    Message.warning('文件夹名称不能为空');
    return;
  }
  
  if (newName.trim() === currentName) {
    renameModalVisible.value = false;
    return;
  }
  
  try {
    console.log('开始调用重命名API...');
    console.log('API参数:', { folderId, newName: newName.trim() });
    
    // 调用重命名API
    const result = await updateFolderApi(folderId, newName.trim());
    console.log('重命名API响应:', result);
    
    // 检查API响应
    if (result && result.code === 200) {
      if (isRoot) {
        Message.success('根目录重命名成功');
        currentFolderName.value = newName.trim();
      } else {
        Message.success('文件夹重命名成功');
        // 如果重命名的是当前选中的文件夹，更新显示名称
        if (currentFolderId.value === folderId) {
          currentFolderName.value = newName.trim();
        }
      }
      
      initData(); // 刷新文件夹列表
      renameModalVisible.value = false;
    } else {
      // API返回错误
      const errorMsg = result?.msg || '重命名失败，请检查网络连接';
      console.error('重命名API返回错误:', result);
      Message.error(errorMsg);
    }
  } catch (error) {
    console.error('重命名失败 - 详细错误信息:', error);
    console.error('错误响应数据:', error.response?.data);
    console.error('错误状态码:', error.response?.status);
    
    // 显示更详细的错误信息
    let errorMessage = '重命名失败';
    if (error.response?.data?.msg) {
      errorMessage = error.response.data.msg;
    } else if (error.message) {
      errorMessage = `重命名失败: ${error.message}`;
    }
    
    Message.error(errorMessage);
  }
};

// 文件分页事件
const handleFilePageChange = (page) => {
  fileCurrentPage.value = page;
  if (currentFolderId.value) {
    loadFiles(currentFolderId.value);
  }
};

const handleFilePageSizeChange = (current, size) => {
  filePageSize.value = size;
  fileCurrentPage.value = 1;
  if (currentFolderId.value) {
    loadFiles(currentFolderId.value);
  }
};

// 刷新数据
const refreshData = async () => {
  refreshing.value = true;
  try {
    await initData();
    if (currentFolderId.value) {
      await loadFiles(currentFolderId.value);
    }
    Message.success('数据已刷新');
  } catch (error) {
    Message.error('刷新失败');
  } finally {
    refreshing.value = false;
  }
};

// 新建/编辑文件夹提交
const submitFolderForm = async () => {
  folderSubmitting.value = true;
  try {
    if (folderForm.id) {
      await updateFolderApi(folderForm.id, folderForm.name);
      Message.success('文件夹重命名成功');
    } else {
      await createFolderApi({
        name: folderForm.name,
        parentId: folderForm.parentId
      });
      Message.success('文件夹创建成功');
    }
    folderDialogVisible.value = false;
    initData();
  } catch (error) {
    console.error('文件夹操作失败:', error);
    Message.error(folderForm.id ? '重命名失败' : '创建失败');
  } finally {
    folderSubmitting.value = false;
  }
};

// 格式化上传时间
const formatUploadTime = (timeStr) => {
  if (!timeStr) return '未知时间';
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
};

// 文件变化处理
const handleFileChange = (info) => {
  console.log('=== 文件变化事件 ===');
  console.log('完整info对象:', info);
  
  // 安全检查：确保 info 存在且是数组
  if (!info || !Array.isArray(info)) {
    console.log('❌ info 不存在或不是数组，跳过处理');
    return;
  }
  
  const fileList = info;
  console.log('文件列表:', fileList);
  console.log('文件列表长度:', fileList.length);
  
  // 每次选择文件时，强制清空所有状态
  fileListTemp.value = [];
  console.log('已清空之前的文件列表');
  
  // 强制重置上传组件状态
  if (uploadRef.value) {
    try {
      uploadRef.value.reset();
      console.log('已强制重置上传组件');
    } catch (error) {
      console.log('重置上传组件时出错:', error);
    }
  }
  
  // 处理新选择的文件 - 只处理当前选择的文件
  fileList.forEach((file, index) => {
    console.log(`处理第${index + 1}个文件:`, file);
    console.log('文件名称:', file.name);
    console.log('文件大小:', file.size);
    console.log('文件UID:', file.uid);
    console.log('文件对象结构:', Object.keys(file));
    
    // 确保文件对象有正确的属性
    const fileObj = {
      uid: file.uid,
      name: file.name,
      size: file.size || file.file?.size || 0,
      type: file.type || file.file?.type || '',
      status: 'ready',
      error: '',
      originFileObj: file.file || file // 保存原始File对象
    };
    
    console.log('开始验证新文件...');
    
    // 验证文件
    const isValid = validateFile(fileObj);
    console.log('文件验证结果:', isValid);
    
    if (isValid) {
      // 确保只添加当前选择的文件
      fileListTemp.value = [fileObj]; // 只保留当前文件
      console.log('✅ 成功设置文件到列表:', fileObj.name);
    } else {
      console.log('❌ 文件验证失败:', fileObj.name, '错误:', fileObj.error);
    }
  });
  
  // 文件列表已在上方清空并重新填充，无需额外清理
  
  console.log('=== 当前文件列表状态 ===');
  console.log('fileListTemp长度:', fileListTemp.value.length);
  console.log('fileListTemp内容:', fileListTemp.value);
  console.log('hasFiles计算结果:', hasFiles.value);
};

// 文件验证
const validateFile = (file) => {
  console.log('=== 开始验证文件 ===');
  console.log('验证文件:', file.name);
  console.log('文件大小:', file.size);
  
  // 清除之前的错误
  file.error = '';
  
  // 验证文件类型
  const ext = getFileExtension(file.name).toLowerCase();
  console.log('文件扩展名:', ext);
  
  const allowedExts = allowedFileTypes
    .split(',')
    .map(type => type.toLowerCase().replace(/^\./, ''));
  
  console.log('允许的扩展名:', allowedExts);
  console.log('扩展名是否匹配:', allowedExts.includes(ext));
  
  if (!allowedExts.includes(ext)) {
    file.error = `不支持的文件类型，支持: ${allowedFileTypesText}`;
    console.log('❌ 文件类型验证失败:', file.error);
    return false;
  }
  
  // 验证文件大小
  console.log('文件大小验证:', file.size, '<=', maxFileSize);
  if (file.size > maxFileSize) {
    file.error = `文件过大，最大支持 ${maxFileSizeText}`;
    console.log('❌ 文件大小验证失败:', file.error);
    return false;
  }
  
  console.log('✅ 文件验证通过');
  return true;
};

// 获取文件扩展名
const getFileExtension = (fileName) => {
  const lastDotIndex = fileName.lastIndexOf('.');
  return lastDotIndex > 0 ? fileName.slice(lastDotIndex + 1) : '';
};

// 获取文件图标颜色
const fileColor = (extension) => {
  const colorMap = {
    pdf: '#ff4d4f',
    doc: '#1890ff',
    docx: '#1890ff',
    xls: '#52c41a',
    xlsx: '#52c41a',
    ppt: '#faad14',
    pptx: '#faad14',
    zip: '#722ed1',
    txt: '#8c8c8c',
    // 图片格式颜色
    jpg: '#52c41a',
    jpeg: '#52c41a',
    png: '#1890ff',
    gif: '#faad14',
    bmp: '#722ed1',
    webp: '#13c2c2'
  };
  return colorMap[extension.toLowerCase()] || '#8c8c8c';
};



// 移除文件
const removeFile = (file) => {
  fileListTemp.value = fileListTemp.value.filter(f => f.uid !== file.uid);
  
  // 如果是正在上传的文件，取消请求
  if (file.status === 'uploading' && cancelTokens.value[file.uid]) {
    cancelTokens.value[file.uid].cancel('上传已取消');
    delete cancelTokens.value[file.uid];
  }
};

// 取消上传
const cancelUpload = (file) => {
  if (cancelTokens.value[file.uid]) {
    cancelTokens.value[file.uid].cancel('上传已取消');
    file.status = 'canceled';
  }
};

// 提交上传
const handleUploadSubmit = async () => {
  // 过滤有效文件
  const validFiles = fileListTemp.value.filter(file => 
    !file.error && file.status !== 'removed' && file.status !== 'canceled'
  );
  
  if (validFiles.length === 0) {
    Message.warning('请选择有效的文件');
    return;
  }
  
  // 验证文件夹ID
  if (!uploadForm.folderId) {
    Message.warning('请选择目标文件夹');
    return;
  }
  
  uploading.value = true;
  let hasError = false;
  let hasFileExists = false;
  
  for (const fileItem of validFiles) {
      // 获取原始File对象
      const realFile = fileItem.originFileObj || fileItem;
      
      if (!realFile) {
        hasError = true;
        continue;
      }
      
      fileItem.status = 'uploading';
      fileItem.percent = 0;
      
      // 创建取消令牌
      const source = axios.CancelToken.source();
      cancelTokens.value[fileItem.uid] = source;
      
      // 调用API
      const result = await uploadFileApi(
        realFile,
        Number(uploadForm.folderId),
        (progressEvent) => {
          if (progressEvent.lengthComputable) {
            fileItem.percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
          }
        },
        source.token
      );
      
      // 检查上传结果
      if (result.code === 200) {
        fileItem.status = 'success';
        fileItem.percent = 100;
      } else if (result.code === 400 && result.msg && result.msg.includes('已存在')) {
        // 文件已存在的情况
        fileItem.status = 'error';
        fileItem.error = '文件已存在';
        hasFileExists = true;
      } else {
        fileItem.status = 'error';
        fileItem.error = result.msg || '上传失败';
        hasError = true;
      }
  }
  
  // 根据结果显示相应的消息
  if (hasFileExists && !hasError) {
    Message.warning('文件已存在');
  } else if (hasError) {
    Message.error('上传失败');
  } else {
    Message.success('上传成功');
    // 刷新当前文件夹文件列表
    if (currentFolderId.value === uploadForm.folderId) {
      loadFiles(currentFolderId.value);
    }
  }
  
  resetUpload();
};

// 重置上传表单
const resetUpload = () => {
  console.log('=== 重置上传表单 ===');
  
  // 取消所有正在进行的上传
  Object.values(cancelTokens.value).forEach(source => {
    source.cancel('上传已取消');
  });
  
  // 重置所有状态
  uploadDialogVisible.value = false;
  uploadForm.folderId = currentFolderId.value || '';
  fileListTemp.value = [];
  cancelTokens.value = {};
  uploading.value = false;
  
  // 清空上传组件
  if (uploadRef.value) {
    uploadRef.value.reset();
    console.log('已重置上传组件');
  }
  
  console.log('上传表单重置完成');
};

// 预览文件
const handlePreview = async (file) => {
  try {
    console.log('开始预览文件:', file);
    Message.loading('正在加载预览...', 0); // 显示加载提示
    
    const blob = await previewFileApi(file.fileId);
    Message.clear(); // 清除加载提示
    
    if (!blob) {
      Message.error('无法获取文件数据');
      return;
    }
    
    const url = URL.createObjectURL(blob);
    const fileName = file.fileName || file.name;
    const ext = getFileExtension(fileName).toLowerCase();
    
    console.log('文件扩展名:', ext);
    
    // 根据文件类型决定预览方式
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
      // 图片预览 - 使用更好的图片预览组件
      showImagePreview(url, fileName);
    } else if (ext === 'pdf') {
      // PDF预览（在新窗口打开）
      window.open(url, '_blank');
      Message.success('PDF文件已在新窗口打开');
    } else if (['txt', 'md', 'json', 'xml', 'csv', 'log'].includes(ext)) {
      // 文本文件预览
      showTextPreview(blob, fileName);
    } else if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
      // 视频预览
      showVideoPreview(url, fileName);
    } else if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
      // 音频预览
      showAudioPreview(url, fileName);
    } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
      // Office文档预览提示
      Modal.confirm({
        title: '文件预览',
        content: `${fileName} 是Office文档格式，您可以选择：`,
        okText: '下载查看',
        cancelText: '取消',
        onOk: () => {
          handleDownload(file);
        }
      });
    } else {
      // 其他类型询问是否下载
      Modal.confirm({
        title: '文件预览',
        content: `文件类型 ${ext.toUpperCase()} 暂不支持在线预览，是否下载查看？`,
        okText: '下载',
        cancelText: '取消',
        onOk: () => {
          handleDownload(file);
        }
      });
    }
    
    // 延迟释放URL，确保预览组件有足够时间加载
    setTimeout(() => {
      URL.revokeObjectURL(url);
    }, 10000);
    
  } catch (error) {
    Message.clear(); // 清除加载提示
    console.error('预览失败:', error);
    
    // 更详细的错误处理
    if (error.response?.status === 404) {
      Message.error('文件不存在或已被删除');
    } else if (error.response?.status === 403) {
      Message.error('没有权限访问该文件');
    } else if (error.response?.status === 500) {
      Message.error('服务器内部错误，请稍后重试');
    } else {
      Message.error('预览文件失败，请检查网络连接');
    }
  }
};

// 显示图片预览
const showImagePreview = (url, fileName) => {
  const imageScale = ref(1);
  const imageRotation = ref(0);
  
  const container = h('div', {
    style: {
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '24px',
      boxSizing: 'border-box',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: '16px',
      position: 'relative',
      overflow: 'hidden'
    }
  }, [
    // 背景装饰
    h('div', {
      style: {
        position: 'absolute',
        top: '-50%',
        left: '-50%',
        width: '200%',
        height: '200%',
        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
        animation: 'float 6s ease-in-out infinite'
      }
    }),
    
    // 顶部工具栏
    h('div', {
      style: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '16px',
        marginBottom: '24px',
        padding: '16px 24px',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderRadius: '16px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.2)',
        position: 'relative',
        zIndex: 10
      }
    }, [
      h('button', {
        onClick: () => imageScale.value = Math.max(0.3, imageScale.value - 0.2),
        style: {
          padding: '10px 16px',
          border: 'none',
          borderRadius: '12px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          transition: 'all 0.3s ease',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        },
        onMouseenter: (e) => {
          e.target.style.transform = 'translateY(-2px)';
          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
        },
        onMouseleave: (e) => {
          e.target.style.transform = 'translateY(0)';
          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
        }
      }, [
        h('span', { style: { fontSize: '18px' } }, '🔍'),
        '缩小'
      ]),
      h('button', {
        onClick: () => imageScale.value = Math.min(4, imageScale.value + 0.2),
        style: {
          padding: '10px 16px',
          border: 'none',
          borderRadius: '12px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          transition: 'all 0.3s ease',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        },
        onMouseenter: (e) => {
          e.target.style.transform = 'translateY(-2px)';
          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
        },
        onMouseleave: (e) => {
          e.target.style.transform = 'translateY(0)';
          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
        }
      }, [
        h('span', { style: { fontSize: '18px' } }, '🔍'),
        '放大'
      ]),
      h('button', {
        onClick: () => imageRotation.value += 90,
        style: {
          padding: '10px 16px',
          border: 'none',
          borderRadius: '12px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          transition: 'all 0.3s ease',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        },
        onMouseenter: (e) => {
          e.target.style.transform = 'translateY(-2px)';
          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
        },
        onMouseleave: (e) => {
          e.target.style.transform = 'translateY(0)';
          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
        }
      }, [
        h('span', { style: { fontSize: '18px' } }, '🔄'),
        '旋转'
      ]),
      h('button', {
        onClick: () => {
          imageScale.value = 1;
          imageRotation.value = 0;
        },
        style: {
          padding: '10px 16px',
          border: 'none',
          borderRadius: '12px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          transition: 'all 0.3s ease',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        },
        onMouseenter: (e) => {
          e.target.style.transform = 'translateY(-2px)';
          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
        },
        onMouseleave: (e) => {
          e.target.style.transform = 'translateY(0)';
          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
        }
      }, [
        h('span', { style: { fontSize: '18px' } }, '🏠'),
        '重置'
      ])
    ]),
    
    // 图片容器
    h('div', {
      style: {
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'auto',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderRadius: '20px',
        padding: '32px',
        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
        minHeight: '500px',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.3)',
        position: 'relative',
        zIndex: 5
      }
    }, [
      h('img', {
        src: url,
        style: {
          maxWidth: '100%',
          maxHeight: '100%',
          objectFit: 'contain',
          borderRadius: '16px',
          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
          transform: `scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
          boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
          border: '2px solid rgba(255,255,255,0.8)'
        }
      })
    ]),
    
    // 文件名
    h('div', {
      style: {
        marginTop: '20px',
        fontSize: '16px',
        color: 'white',
        textAlign: 'center',
        wordBreak: 'break-all',
        padding: '12px 24px',
        backgroundColor: 'rgba(255, 255, 255, 0.15)',
        borderRadius: '12px',
        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.2)',
        fontWeight: '500',
        position: 'relative',
        zIndex: 5
      }
    }, fileName)
  ]);

  Modal.info({
    title: h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        fontSize: '20px',
        fontWeight: '600',
        color: '#2c3e50',
        textAlign: 'center',
        width: '100%',
        justifyContent: 'center'
      }
    }, [
      h('span', { style: { fontSize: '24px' } }, '🖼️'),
      '图片预览'
    ]),
    content: container,
    width: '95%',
    style: { 
      maxWidth: '1600px',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '20px',
      overflow: 'hidden',
      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
      border: '3px solid rgba(255,255,255,0.2)'
    },
    mask: true,
    maskClosable: true,
    footer: null,
    closable: true,
    okText: null,
    cancelText: null
  });
};

// 显示文本预览
const showTextPreview = async (blob, fileName) => {
  try {
    const text = await blob.text();
    const fontSize = ref(16);
    
    const container = h('div', {
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        padding: '24px',
        boxSizing: 'border-box',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        borderRadius: '16px',
        position: 'relative',
        overflow: 'hidden'
      }
    }, [
      // 背景装饰
      h('div', {
        style: {
          position: 'absolute',
          top: '-50%',
          left: '-50%',
          width: '200%',
          height: '200%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
          animation: 'float 6s ease-in-out infinite'
        }
      }),
      
      // 顶部工具栏
      h('div', {
        style: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          gap: '16px',
          marginBottom: '24px',
          padding: '16px 24px',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderRadius: '16px',
          boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255,255,255,0.2)',
          position: 'relative',
          zIndex: 10
        }
      }, [
        h('button', {
          onClick: () => fontSize.value = Math.max(12, fontSize.value - 2),
          style: {
            padding: '10px 16px',
            border: 'none',
            borderRadius: '12px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            cursor: 'pointer',
            fontSize: '14px',
            fontWeight: '500',
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            transition: 'all 0.3s ease',
            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
          },
          onMouseenter: (e) => {
            e.target.style.transform = 'translateY(-2px)';
            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
          },
          onMouseleave: (e) => {
            e.target.style.transform = 'translateY(0)';
            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
          }
        }, [
          h('span', { style: { fontSize: '18px' } }, '🔍'),
          '缩小字体'
        ]),
        h('button', {
          onClick: () => fontSize.value = Math.min(28, fontSize.value + 2),
          style: {
            padding: '10px 16px',
            border: 'none',
            borderRadius: '12px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            cursor: 'pointer',
            fontSize: '14px',
            fontWeight: '500',
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            transition: 'all 0.3s ease',
            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
          },
          onMouseenter: (e) => {
            e.target.style.transform = 'translateY(-2px)';
            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
          },
          onMouseleave: (e) => {
            e.target.style.transform = 'translateY(0)';
            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
          }
        }, [
          h('span', { style: { fontSize: '18px' } }, '🔍'),
          '放大字体'
        ]),
        h('button', {
          onClick: () => {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            Message.success('文本已复制到剪贴板');
          },
          style: {
            padding: '10px 16px',
            border: 'none',
            borderRadius: '12px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            cursor: 'pointer',
            fontSize: '14px',
            fontWeight: '500',
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            transition: 'all 0.3s ease',
            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
          },
          onMouseenter: (e) => {
            e.target.style.transform = 'translateY(-2px)';
            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
          },
          onMouseleave: (e) => {
            e.target.style.transform = 'translateY(0)';
            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
          }
        }, [
          h('span', { style: { fontSize: '18px' } }, '📋'),
          '复制文本'
        ])
      ]),
      
      // 文本内容
      h('div', {
        style: {
          flex: 1,
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderRadius: '20px',
          padding: '32px',
          boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
          overflow: 'auto',
          fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', 'Monaco', 'Menlo', monospace",
          fontSize: `${fontSize.value}px`,
          lineHeight: '1.8',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-word',
          color: '#2c3e50',
          border: '1px solid rgba(255,255,255,0.3)',
          backdropFilter: 'blur(10px)',
          position: 'relative',
          zIndex: 5
        }
      }, text)
    ]);

    Modal.info({
      title: h('div', {
        style: {
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
          fontSize: '20px',
          fontWeight: '600',
          color: '#2c3e50',
          textAlign: 'center',
          width: '100%',
          justifyContent: 'center'
        }
      }, [
        h('span', { style: { fontSize: '24px' } }, '📄'),
        `文本预览 - ${fileName}`
      ]),
      content: container,
      width: '90%',
      style: { 
        maxWidth: '1400px',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        borderRadius: '20px',
        overflow: 'hidden',
        boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
        border: '3px solid rgba(255,255,255,0.2)'
      },
      mask: true,
      maskClosable: true,
      footer: null,
      closable: true,
      okText: null,
      cancelText: null
    });
  } catch (error) {
    console.error('文本预览失败:', error);
    Message.error('无法读取文本内容');
  }
};

// 显示视频预览
const showVideoPreview = (url, fileName) => {
  const container = h('div', {
    style: {
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '24px',
      boxSizing: 'border-box',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: '16px',
      position: 'relative',
      overflow: 'hidden'
    }
  }, [
    // 背景装饰
    h('div', {
      style: {
        position: 'absolute',
        top: '-50%',
        left: '-50%',
        width: '200%',
        height: '200%',
        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
        animation: 'float 6s ease-in-out infinite'
      }
    }),
    
    // 视频容器
    h('div', {
      style: {
        width: '100%',
        maxWidth: '1000px',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderRadius: '20px',
        padding: '32px',
        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.3)',
        position: 'relative',
        zIndex: 5
      }
    }, [
      h('video', {
        src: url,
        controls: true,
        style: {
          width: '100%',
          maxHeight: '70vh',
          borderRadius: '16px',
          background: '#000',
          boxShadow: '0 12px 32px rgba(0,0,0,0.3)',
          border: '3px solid rgba(255,255,255,0.8)',
          transition: 'all 0.3s ease'
        }
      })
    ]),
    
    // 文件名
    h('div', {
      style: {
        marginTop: '20px',
        fontSize: '16px',
        color: 'white',
        wordBreak: 'break-all',
        textAlign: 'center',
        padding: '12px 24px',
        backgroundColor: 'rgba(255, 255, 255, 0.15)',
        borderRadius: '12px',
        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.2)',
        fontWeight: '500',
        position: 'relative',
        zIndex: 5
      }
    }, fileName)
  ]);

  Modal.info({
    title: h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        fontSize: '20px',
        fontWeight: '600',
        color: '#2c3e50',
        textAlign: 'center',
        width: '100%',
        justifyContent: 'center'
      }
    }, [
      h('span', { style: { fontSize: '24px' } }, '🎬'),
      '视频预览'
    ]),
    content: container,
    width: '90%',
    style: { 
      maxWidth: '1400px',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '20px',
      overflow: 'hidden',
      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
      border: '3px solid rgba(255,255,255,0.2)'
    },
    mask: true,
    maskClosable: true,
    footer: null,
    closable: true,
    okText: null,
    cancelText: null
  });
};

// 显示音频预览
const showAudioPreview = (url, fileName) => {
  const container = h('div', {
    style: {
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '24px',
      boxSizing: 'border-box',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: '16px',
      position: 'relative',
      overflow: 'hidden'
    }
  }, [
    // 背景装饰
    h('div', {
      style: {
        position: 'absolute',
        top: '-50%',
        left: '-50%',
        width: '200%',
        height: '200%',
        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
        animation: 'float 6s ease-in-out infinite'
      }
    }),
    
    // 音频容器
    h('div', {
      style: {
        width: '100%',
        maxWidth: '500px',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderRadius: '20px',
        padding: '40px',
        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.3)',
        position: 'relative',
        zIndex: 5,
        textAlign: 'center'
      }
    }, [
      // 音频图标
      h('div', {
        style: {
          fontSize: '64px',
          marginBottom: '24px',
          animation: 'pulse 2s ease-in-out infinite'
        }
      }, '🎵'),
      
      // 音频播放器
      h('audio', {
        src: url,
        controls: true,
        style: {
          width: '100%',
          height: '50px',
          borderRadius: '12px',
          marginBottom: '20px'
        }
      }),
      
      // 文件名
      h('div', {
        style: {
          fontSize: '16px',
          color: '#2c3e50',
          wordBreak: 'break-all',
          textAlign: 'center',
          padding: '12px 16px',
          backgroundColor: 'rgba(102, 126, 234, 0.1)',
          borderRadius: '12px',
          fontWeight: '500',
          border: '1px solid rgba(102, 126, 234, 0.2)'
        }
      }, fileName)
    ])
  ]);

  Modal.info({
    title: h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        fontSize: '20px',
        fontWeight: '600',
        color: '#2c3e50',
        textAlign: 'center',
        width: '100%',
        justifyContent: 'center'
      }
    }, [
      h('span', { style: { fontSize: '24px' } }, '🎵'),
      '音频预览'
    ]),
    content: container,
    width: '70%',
    style: { 
      maxWidth: '800px',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '20px',
      overflow: 'hidden',
      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
      border: '3px solid rgba(255,255,255,0.2)'
    },
    mask: true,
    maskClosable: true,
    footer: null,
    closable: true,
    okText: null,
    cancelText: null
  });
};

// 下载文件
const handleDownload = async (file) => {
  try {
    const blob = await downloadFileApi(file.fileId);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = file.fileName || file.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    Message.success('开始下载');
  } catch (error) {
    console.error('下载失败:', error);
    Message.error('下载文件失败');
  }
};

// 重命名文件
const handleEditFile = (file) => {
  console.log('=== 重命名文件函数被调用 ===');
  console.log('重命名文件 - 文件对象:', file);
  console.log('文件对象的所有属性:', Object.keys(file));
  console.log('文件属性详情:', {
    fileId: file.fileId,
    fileName: file.fileName,
    name: file.name,
    originalName: file.originalName,
    displayName: file.displayName,
    title: file.title
  });
  
  // 尝试多种可能的文件名字段
  let fileName = '';
  if (file.fileName) {
    fileName = file.fileName;
    console.log('使用 fileName 字段:', fileName);
  } else if (file.name) {
    fileName = file.name;
    console.log('使用 name 字段:', fileName);
  } else if (file.originalName) {
    fileName = file.originalName;
    console.log('使用 originalName 字段:', fileName);
  } else if (file.displayName) {
    fileName = file.displayName;
    console.log('使用 displayName 字段:', fileName);
  } else if (file.title) {
    fileName = file.title;
    console.log('使用 title 字段:', fileName);
  }
  
  console.log('最终获取到的文件名:', fileName);
  
  if (!fileName) {
    console.error('无法获取文件名，文件对象:', file);
    Message.error('无法获取文件名，请检查文件数据');
    return;
  }
  
  const fileExtension = getFileExtension(fileName);
  const fileNameWithoutExtension = fileExtension ? fileName.substring(0, fileName.lastIndexOf('.')) : fileName;
  
  console.log('处理后的文件名信息:', {
    originalName: fileName,
    extension: fileExtension,
    nameWithoutExtension: fileNameWithoutExtension
  });
  
  // 设置重命名表单数据
  renameFileForm.fileId = file.fileId;
  renameFileForm.newName = fileNameWithoutExtension;
  renameFileForm.fileExtension = fileExtension;
  
  console.log('设置的重命名表单数据:', renameFileForm);
  
  // 显示重命名弹窗
  renameFileModalVisible.value = true;
};

// 确认重命名文件
const confirmRenameFile = async () => {
  if (!renameFileForm.newName.trim()) {
    Message.warning('请输入文件名称');
    return;
  }
  
  // 使用用户输入的文件名，不添加任何扩展名
  const newFileName = renameFileForm.newName.trim();
  
  try {
    await renameFileApi(renameFileForm.fileId, newFileName);
    Message.success('文件重命名成功');
    renameFileModalVisible.value = false;
    // 刷新当前文件夹的文件列表
    if (currentFolderId.value) {
      loadFiles(currentFolderId.value);
    }
  } catch (error) {
    console.error('重命名文件失败:', error);
    Message.error('重命名失败');
  }
};

// 删除文件夹
const handleDeleteFolder = (folder) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除文件夹「${folder.name}」吗？删除后无法恢复，文件夹内的所有文件也将被删除。`,
    onOk: async () => {
      try {
        const result = await deleteFolderApi(folder.id);
        if (result.code === 200) {
          Message.success('文件夹删除成功');
          // 如果删除的是当前选中的文件夹，切换到根目录
          if (currentFolderId.value === folder.id) {
            currentFolderId.value = '0';
            currentFolderName.value = '根目录';
            fileList.value = [];
            totalFiles.value = 0;
          }
          // 刷新文件夹列表
          initData();
        } else {
          Message.error(result.msg || '删除失败');
        }
      } catch (error) {
        console.error('删除文件夹失败:', error);
        Message.error('删除失败');
      }
    }
  });
};

// 删除文件
const handleDelete = (file) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除 ${file.fileName || file.name} 吗？`,
    onOk: async () => {
      try {
        const result = await deleteFileApi(file.fileId);
        if (result.code === 200) {
          Message.success('删除成功');
          loadFiles(currentFolderId.value);
        } else {
          Message.error(result.msg || '删除失败');
        }
      } catch (error) {
        console.error('删除失败:', error);
        Message.error('删除失败');
      }
    }
  });
};

// 格式化文件大小
const formatFileSize = (fileSize) => {
  const size = Number(fileSize);
  if (isNaN(size) || size < 0) return '未知';
  
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
  if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
  return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
};



const fileTypeText = (type) => {
  const types = {
    pdf: 'PDF文档',
    doc: 'Word文档',
    docx: 'Word文档',
    xls: 'Excel表格',
    xlsx: 'Excel表格',
    ppt: 'PPT演示',
    pptx: 'PPT演示',
    zip: '压缩文件',
    txt: '文本文件',
    // 图片格式
    jpg: 'JPG图片',
    jpeg: 'JPEG图片',
    png: 'PNG图片',
    gif: 'GIF图片',
    bmp: 'BMP图片',
    webp: 'WebP图片',
    unknown: '未知类型'
  };
  
  return types[type] || type;
};

// 侧边栏控制
const sidebarCollapsed = ref(false);

// 打开新建文件夹对话框
const handleCreateFolder = () => {
  folderForm.id = '';
  folderForm.name = '';
  folderForm.parentId = currentFolderId.value || '0';
  folderDialogVisible.value = true;
};

// 打开上传文件对话框
const handleUploadFile = () => {
  uploadForm.folderId = currentFolderId.value || '';
  uploadDialogVisible.value = true;
};

// 侧边栏控制函数
const handleSidebarCollapse = (collapsed) => {
  sidebarCollapsed.value = collapsed;
};

const handleSidebarExpand = (collapsed) => {
  sidebarCollapsed.value = collapsed;
};

// 监听文件夹ID变化，自动加载文件
watch(currentFolderId, (newId) => {
  if (newId) {
    loadFiles(newId);
  }
});

// 初始化加载
onMounted(() => {
  initData();
});
</script>

<style scoped>
.knowledge-container {
  height: 100vh;
  background-color: var(--color-bg-2);
}

/* 侧边栏样式 */
.folder-sidebar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-right: 1px solid var(--color-border);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-border) 50%, transparent 100%);
  }
}

.folder-content {
  padding: 16px 0;
  height: calc(100vh - 320px); /* 为底部分页控件留出更多空间，因为文件夹项现在更高 */
  overflow-y: auto;
  scrollbar-width: thin;
  background: rgba(255, 255, 255, 0.6);
}

.folder-content::-webkit-scrollbar {
  width: 8px;
}

.folder-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.folder-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-primary-light-2) 0%, var(--color-primary) 100%);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  &:hover {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark-1) 100%);
  }
}

.folder-list {
  border: none;
  background: transparent;
  padding: 0 16px;
}

/* 文件夹列表项样式 */
.folder-list-item {
  padding: 12px 16px;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid transparent;
  
  &:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: var(--color-primary-light-2);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  &.active {
    background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
    color: var(--color-primary);
    font-weight: 500;
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(var(--color-primary-6), 0.2);
  }
}

/* 文件夹主要信息样式 */
.folder-main-info {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.folder-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 500;
}

/* 文件夹操作按钮样式 */
.folder-actions-row {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.folder-list-item:hover .folder-actions-row {
  opacity: 1;
}

.folder-actions .action-btn {
  width: 28px;
  height: 28px;
  color: var(--color-text-3);
  border-radius: 6px;
  transition: all 0.2s ease;
  
  &:hover {
    color: var(--color-primary);
    background: var(--color-fill-3);
    transform: scale(1.1);
  }
}

/* 删除旧的span样式，因为现在使用.folder-name */

/* 顶部导航样式 */
.file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
  height: 64px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 文件内容区域样式 */
.file-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: auto;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background: var(--color-bg-2);
}

.file-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

/* 表格容器 */
.file-grid-container {
  flex: 1;
  width: 100%;
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow-y: auto;
  background-color: var(--color-bg-1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding-bottom: 80px; /* 为分页留出空间 */
}

/* 表头行样式 */
.table-header-row {
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
  background-color: var(--color-fill-1);
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-3);
  font-weight: 500;
}

/* 数据行样式 */
.table-data-row {
  display: flex;
  padding: 0 16px;
  height: 64px;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  transition: all 0.25s ease;
  cursor: pointer;
  background-color: var(--color-bg-1);
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    background-color: rgba(22, 93, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
}

/* 通用列样式 */
.table-column {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 8px;
}

.cell-content {
  display: inline-block;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.name-column {
  padding: 0 14px;
  justify-content: flex-start !important;
}

.file-info {
  display: flex;
  align-items: center;
  width: 100%;
}

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

.folder-icon {
  color: #165DFF;
  background-color: #E8F3FF;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.table-data-row:hover .file-name {
  color: #165DFF;
}

.type-column, .size-column, .time-column {
  color: var(--color-text-3);
  font-size: 14px;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.action-column {
  justify-content: center;
}

.file-main {
  display: flex;
  align-items: center;
  width: 100%;
}

.file-icon-large {
  font-size: 24px;
  margin-right: 12px;
  flex-shrink: 0;
}

.file-name-wrap {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.file-name {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-1);
  transition: color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  .table-data-row:hover & {
    color: #165DFF;
  }
}

.file-name-small {
  font-size: 14px;
  color: var(--color-text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 操作按钮区域 */
.file-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-3);
  
  &:hover {
    background: var(--color-fill-3);
    color: var(--color-primary);
  }
}

.delete-btn {
  &:hover {
    color: var(--color-danger);
    background-color: rgba(255, 77, 77, 0.05);
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .name-column { 
    flex: 0 0 35% !important; 
    max-width: 35% !important; 
  }
  .time-column { 
    flex: 0 0 20% !important; 
    max-width: 20% !important; 
  }
}

@media (max-width: 992px) {
  .name-column { 
    flex: 0 0 45% !important; 
    max-width: 45% !important; 
  }
  .type-column { 
    flex: 0 0 20% !important; 
    max-width: 20% !important; 
  }
  .time-column { 
    display: none; 
  }
  .action-column { 
    flex: 0 0 35% !important; 
    max-width: 35% !important; 
  }
  .file-actions { 
    justify-content: flex-end; 
  }
}

@media (max-width: 768px) {
  .size-column, .time-column { 
    display: none; 
  }
  .type-column { 
    flex: 0 0 25% !important; 
    max-width: 25% !important; 
  }
  .name-column { 
    flex: 0 0 45% !important; 
    max-width: 45% !important; 
  }
  .action-column { 
    flex: 0 0 30% !important; 
    max-width: 30% !important; 
  }
  .file-content { 
    padding: 12px; 
  }
  .file-grid-container { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }
}

@media (max-width: 576px) {
  .type-column { 
    display: none; 
  }
  .name-column { 
    flex: 0 0 60% !important; 
    max-width: 60% !important; 
  }
  .action-column { 
    flex: 0 0 40% !important; 
    max-width: 40% !important; 
  }
  .file-header { 
    padding: 0 12px; 
    flex-wrap: wrap; 
  }
  .breadcrumbs { 
    margin-bottom: 8px; 
    width: 100%; 
  }
  .file-card { 
    min-height: auto; 
  }
}

/* 空状态样式 */
.initial-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
  color: var(--color-text-3);
  background-color: #fafafa;
  border-radius: 8px;
  text-align: center;
}

.initial-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--color-text-4);
}

:deep(.empty-state .arco-btn) {
  margin-top: 16px;
  padding: 8px 16px;
  background-color: #165DFF;
  color: white;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

:deep(.empty-state .arco-btn:hover) {
  background-color: #0E42D2;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.empty-state .arco-btn:active) {
  transform: translateY(0);
}

/* 上传区域样式 */
.upload-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 140px;
  border: 1px dashed var(--color-border);
  border-radius: 4px;
  background-color: var(--color-fill-1);
  transition: all 0.2s;
  cursor: pointer;
  
  &:hover {
    border-color: rgb(var(--primary-6));
    background-color: var(--color-primary-light-1);
  }
}

.upload-icon {
  text-align: center;
}

.upload-text {
  margin-top: 8px;
  color: var(--color-text-3);
}

.upload-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-4);
}

/* 上传相关样式 */
.upload-file-list {
  margin-top: 16px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.upload-file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    background-color: var(--color-fill-1);
  }
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.file-icon {
  font-size: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.file-name {
  flex: 1;
  min-width: 0;
}

.name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.file-meta {
  font-size: 12px;
  color: var(--color-text-4);
  margin-top: 4px;
}

.file-error {
  color: var(--color-danger);
  margin-left: 8px;
}

.file-progress {
  flex: 1;
  margin: 0 16px;
}

.file-actions {
  flex-shrink: 0;
}

/* 分页样式 */
.pagination-container, .file-pagination {
  margin-top: 16px;
  text-align: right;
  padding: 0 16px 16px;
}

.file-pagination {
  border-top: 1px solid var(--color-border);
}

/* 侧边栏底部分页样式 */
.sidebar-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-top: 1px solid var(--color-border);
  padding: 20px 16px;
  z-index: 10;
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.pagination-info {
  margin-bottom: 16px;
  text-align: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.pagination-controls {
  display: flex;
  justify-content: center;
  
  :deep(.arco-pagination) {
    .arco-pagination-item {
      border-radius: 6px;
      transition: all 0.2s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

/* 确保文件夹内容区域不被底部分页遮挡 */
.folder-content {
  /* 高度已调整，无需额外padding */
}

/* 动画效果 */
:deep(.arco-icon-refresh.spin) {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 预览弹窗动画效果 */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
  75% { transform: translateY(-15px) rotate(0.5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 预览弹窗样式增强 */
:deep(.arco-modal) {
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.arco-modal-mask) {
  animation: fadeIn 0.3s ease;
  backdrop-filter: blur(8px);
}

:deep(.arco-modal-content) {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,0.3) !important;
  border: 3px solid rgba(255,255,255,0.2) !important;
}

:deep(.arco-modal-header) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 20px 24px;
}

:deep(.arco-modal-title) {
  font-weight: 600;
  color: #2c3e50;
}

:deep(.arco-modal-close) {
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  &:hover {
    background: rgba(255,255,255,1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

/* 按钮悬停效果增强 */
:deep(.arco-btn) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 骨架屏样式 */
.skeleton-item {
  height: 36px;
  margin: 4px 16px;
  border-radius: 4px;
  background-color: var(--color-fill-2);
}

.file-skeleton-item {
  height: 60px;
  margin: 8px 0;
  border-radius: 4px;
  background-color: var(--color-fill-2);
}

/** 文件夹样式 **/
.folder-icon-wrapper {
  margin-right: 12px;
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
  justify-content: center;
  transition: all 0.3s ease;
}

.folder-icon {
  font-size: 14px;
  color: var(--color-primary);
  transition: all 0.3s ease;
}

.folder-list-item:hover .folder-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(var(--color-primary-6), 0.2);
}

.folder-list-item.active .folder-icon-wrapper {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark-1) 100%);
  box-shadow: 0 2px 8px rgba(var(--color-primary-6), 0.3);
}

.folder-list-item.active .folder-icon {
  color: white;
}

/* 文件夹操作按钮样式 */
.folder-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.folder-list-item:hover .folder-actions {
  opacity: 1;
}

.action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background-color: var(--color-fill-3);
}

/* 确保在折叠状态下不显示操作按钮 */
:deep(.folder-sidebar.collapsed) .folder-actions-row {
  display: none;
}

/* 新建文件夹按钮美化 */
.create-folder-btn {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 搜索输入框美化 */
.search-input {
  :deep(.arco-input-wrapper) {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    
    &:hover {
      border-color: var(--color-primary-light-2);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    &:focus-within {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(var(--color-primary-6), 0.1);
    }
  }
}

/* 搜索结果提示样式 */
.search-result-tip {
  padding: 12px 16px;
  margin: 12px 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 2s infinite;
  }
}

/* 上传文件相关样式 */
.upload-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-btn {
  align-self: flex-start;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  }
}

.upload-hint {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  background: var(--color-fill-2);
  border-radius: 6px;
  border-left: 3px solid var(--color-primary-light-3);
}

.upload-file-list {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-2);
  max-height: 300px;
  overflow-y: auto;
}

.upload-file-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: all 0.2s ease;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    background: var(--color-fill-1);
  }
  
  &.file-error {
    background: rgba(255, 77, 79, 0.05);
    border-left: 3px solid #ff4d4f;
  }
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
  min-width: 0;
}

.file-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: var(--color-text-1);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  font-size: 12px;
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-text {
  color: #ff4d4f;
  font-weight: 500;
}

.file-progress {
  margin: 0 16px;
  min-width: 120px;
}

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

.remove-btn {
  color: var(--color-text-3);
  
  &:hover {
    color: #ff4d4f;
    background: rgba(255, 77, 79, 0.1);
  }
}

.cancel-btn {
  color: var(--color-text-3);
  
  &:hover {
    color: #faad14;
    background: rgba(250, 173, 20, 0.1);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 文件搜索样式 */
.file-search-container {
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-search-input {
  max-width: 300px;
  transition: all 0.3s ease;
  
  &:focus-within {
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
  }
}

/* 文件分页样式 */
.file-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 0;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-1);
  
  .arco-pagination {
    .arco-pagination-total {
      color: var(--color-text-2);
      font-size: 14px;
    }
    
    .arco-pagination-item {
      border-radius: 6px;
      transition: all 0.2s ease;
      
      &:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
      
      &.arco-pagination-item-active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: white;
      }
    }
    
    .arco-pagination-prev,
    .arco-pagination-next {
      border-radius: 6px;
      transition: all 0.2s ease;
      
      &:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
    }
  }
}
</style>