<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-icon-wrapper">
              <IconFolder class="folder-icon" :style="{ color: folderColor }" />
            </div>
            <span v-if="!sidebarCollapsed">{{ folder.name }}</span>
            
            <!-- 文件夹操作按钮 -->
            <div v-if="!sidebarCollapsed" class="folder-actions">
                          <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" />
          <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>

          <!-- 空状态 -->
          <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"
              multiple
            >
              <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-layout>
</template>

<script setup>
// 导入核心依赖
import { ref, reactive, onMounted, computed, watch, nextTick } 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,
  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';
const allowedFileTypesText = 'PDF, Word, Excel, PPT, 压缩文件, 文本文件';
const maxFileSize = 100 * 1024 * 1024; // 100MB
const maxFileSizeText = '100MB';
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 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 searchKeyword = ref('');
const searchTimeout = ref(null);

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 loadFiles = async (folderId) => {
  try {
    loading.value = true;
    const res = await getFilesApi({
      folderId: folderId,
      page: fileCurrentPage.value,
      pageSize: filePageSize.value
    });
    
    // 根据后端返回的数据结构处理
    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;
  }
  currentFolderId.value = id;
};

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

// 文件夹重命名处理函数
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);
  
  // 处理新选择的文件
  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对象
    };
    
    // 只处理新选择的文件，避免重复添加
    if (!fileListTemp.value.find(f => f.uid === fileObj.uid)) {
      console.log('这是新文件，开始验证...');
      
      // 验证文件
      const isValid = validateFile(fileObj);
      console.log('文件验证结果:', isValid);
      
      if (isValid) {
        fileListTemp.value.push(fileObj);
        console.log('✅ 成功添加文件到列表:', fileObj.name);
      } else {
        console.log('❌ 文件验证失败:', fileObj.name, '错误:', fileObj.error);
      }
    } else {
      console.log('文件已存在，跳过:', fileObj.name);
    }
  });
  
  // 清理已移除的文件
  const beforeCleanCount = fileListTemp.value.length;
  fileListTemp.value = fileListTemp.value.filter(file => 
    fileList.some(f => f.uid === file.uid)
  );
  const afterCleanCount = fileListTemp.value.length;
  
  if (beforeCleanCount !== afterCleanCount) {
    console.log(`清理了 ${beforeCleanCount - afterCleanCount} 个已移除的文件`);
  }
  
  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'
  };
  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'
  );
  
  console.log('提交上传 - 所有文件:', fileListTemp.value);
  console.log('提交上传 - 有效文件:', validFiles);
  
  if (validFiles.length === 0) {
    Message.warning('请选择有效的文件');
    return;
  }
  
  // 验证文件夹ID
  if (!uploadForm.folderId) {
    Message.warning('请选择目标文件夹');
    return;
  }
  
  uploading.value = true;
  let successCount = 0;
  let totalFiles = validFiles.length;
  
  try {
    for (const fileItem of validFiles) {
      // 获取原始File对象
      const realFile = fileItem.originFileObj || fileItem;
      
      if (!realFile) {
        fileItem.error = '文件数据无效';
        continue;
      }
      
      fileItem.status = 'uploading';
      fileItem.percent = 0;
      
      // 创建取消令牌
      const source = axios.CancelToken.source();
      cancelTokens.value[fileItem.uid] = source;
      
      try {
        // 调用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 === 0 && result.success) {
          fileItem.status = 'success';
          fileItem.percent = 100;
          successCount++;
        } else {
          fileItem.status = 'error';
          fileItem.error = result.msg || '上传失败';
        }
      } catch (error) {
        if (!axios.isCancel(error)) {
          fileItem.status = 'error';
          fileItem.error = error.message || '上传失败';
        }
      }
    }
    
    // 显示结果
    if (successCount === totalFiles) {
      Message.success('所有文件上传成功');
      resetUpload();
      // 刷新当前文件夹文件列表
      if (currentFolderId.value === uploadForm.folderId) {
        loadFiles(currentFolderId.value);
      }
    } else if (successCount >= 0) {
      Message.warning(`${successCount}/${totalFiles} 个文件上传成功`);
      resetUpload();
    } else {
      Message.error('所有文件上传失败');
    }
  } catch (error) {
    console.error('上传过程出错:', error);
    Message.error('上传过程出错');
  } finally {
    uploading.value = false;
  }
};

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

// 预览文件
const handlePreview = async (file) => {
  try {
    const blob = await previewFileApi(file.fileId);
    const url = URL.createObjectURL(blob);
    
    // 根据文件类型决定预览方式
    const ext = getFileExtension(file.fileName || file.name).toLowerCase();
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext)) {
      // 图片预览
      const img = new Image();
      img.src = url;
      Modal.info({
        title: '图片预览',
        content: img,
        width: '80%'
      });
    } else if (ext === 'pdf') {
      // PDF预览（在新窗口打开）
      window.open(url, '_blank');
    } else {
      // 其他类型提示下载
      Message.info(`该文件类型不支持预览，将为您下载文件: ${file.fileName || file.name}`);
      handleDownload(file);
    }
  } catch (error) {
    console.error('预览失败:', error);
    Message.error('预览文件失败');
  }
};

// 下载文件
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) => {
  Modal.warning({
    title: '功能提示',
    content: '后端暂不支持文件重命名功能，如需重命名请先删除文件再重新上传。',
    okText: '知道了'
  });
};

// 删除文件夹
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: '文本文件',
    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 - 280px); /* 为底部分页控件留出空间 */
  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;
  align-items: center;
  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-actions {
  display: none;
  gap: 6px;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.folder-list-item:hover .folder-actions {
  display: flex;
  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);
  }
}

.folder-list-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

/* 顶部导航样式 */
.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;
}

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

/* 表头行样式 */
.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); }
}

/* 骨架屏样式 */
.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 {
  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%); }
}


</style>
