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

<template>
  <a-layout class="knowledge-container">
    <!-- 侧边栏 -->
    <a-layout-sider 
      :width="sidebarWidth"
      :collapsed-width="80"
      theme="dark" 
      class="folder-sidebar"
      :collapsed="sidebarCollapsed"
      @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="true">
          <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 ? '未找到匹配的文件夹' : '暂无文件夹'" />
        
                <!-- 树形文件夹结构 -->
        <div v-if="!loading && folderList.length > 0" class="folder-tree-container">

          <a-tree
            :data="folderTreeData"
            :selected-keys="currentFolderId ? [currentFolderId] : []"
            :field-names="{ key: 'key', title: 'title', children: 'children' }"
            :show-line="!sidebarCollapsed"
            :block-node="true"
            :default-expand-all="true"
            @select="handleFolderSelect"
            @dblclick="handleFolderDoubleClick"
            class="folder-tree"
            :class="{ 'collapsed': sidebarCollapsed }"
          />
          
          <!-- 文件夹操作按钮 -->
          <div v-if="currentFolderId && currentFolderId !== '0'" class="folder-actions-bar" style="padding: 8px; border-top: 1px solid #e5e6eb; margin-top: 8px;">
            <a-space>
              <a-button 
                type="text" 
                size="small" 
                @click="handleRenameCurrentFolder"
                tooltip="重命名"
              >
                <template #icon><icon-edit /></template>
                重命名
              </a-button>
              <a-button 
                type="text" 
                size="small" 
                @click="handleDeleteCurrentFolder"
                tooltip="删除"
                status="danger"
              >
                <template #icon><icon-delete /></template>
                删除
              </a-button>
            </a-space>
          </div>
          

        </div>
      </div>

              <!-- 拖拽分隔线 -->
      <div 
        v-if="!sidebarCollapsed"
        class="sidebar-resizer"
        @mousedown="startResize"
        @touchstart="startResize"
        :title="`当前宽度: ${sidebarWidth}px (拖拽调整)`"
      >
        <div class="resizer-handle"></div>
      </div>
    </a-layout-sider>

    <a-layout>
      <a-layout-header>
        <FileHeader
          :breadcrumb-path="breadcrumbPath"
          :refreshing="refreshing"
          @breadcrumb-click="handleBreadcrumbClick"
          @refresh="refreshData"
          @upload="handleUploadFile"
          @create-folder="handleCreateFolder"
        />
      </a-layout-header>

      <a-layout-content class="file-content">
        <a-card :bordered="false" class="file-card">
          <FileList
            :files="fileList"
            :loading="loading"
            :current-folder-id="currentFolderId"
            :sort-field="sortField"
            :sort-order="sortOrder"
            @file-search="handleFileSearch"
            @file-search-input="handleFileSearchInput"
            @file-search-clear="handleFileSearchClear"
            @sort-change="handleSortChange"
            @file-preview="handlePreview"
            @file-download="handleDownload"
            @file-edit="handleEditFile"
            @file-delete="handleDelete"
            @upload="handleUploadFile"
          />

          <!-- 文件分页 -->
          <FilePagination
            :total="totalFiles"
            :current="fileCurrentPage"
            :page-size="filePageSize"
            :visible="currentFolderId && !loading && totalFiles > 0"
            @page-change="handleFilePageChange"
            @page-size-change="handleFilePageSizeChange"
          />
        </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-tree-select
            v-model="folderForm.parentId"
            placeholder="请选择父级目录"
            :data="folderTreeSelectData"
            :field-names="{ key: 'id', title: 'name', children: 'children' }"
            allow-clear
            :tree-props="{ showLine: true }"
          >
            <template #title="{ node }">
              <span>{{ node?.title || node?.name }}</span>
            </template>
          </a-tree-select>
        </a-form-item>
      </a-form>
    </a-modal>
    
    <!-- 文件上传组件 -->
    <FileUpload
      v-model:visible="uploadDialogVisible"
      :folder-list="folderList"
      :current-folder-id="currentFolderId"
      @upload-success="handleUploadSuccess"
    />
    
    <!-- 重命名文件夹对话框 -->
    <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 FilePagination from './components/FilePagination.vue';
import FileHeader from './components/FileHeader.vue';
import FileList from './components/FileList.vue';
import FileUpload from './components/FileUpload.vue';
import {
  IconFolder,
  IconFile,
  IconPlus,

  IconMenuFold,
  IconMenuUnfold,
  IconEye,
  IconDownload,
  IconDelete,
  IconRefresh,
  IconEdit,
  IconFolderAdd,

} from '@arco-design/web-vue/es/icon';
import { Message, Modal } from '@arco-design/web-vue';


// 导入API
import {
  getFolderListApi,
  getFilesApi,
  createFolderApi,
  updateFolderApi,
  deleteFolderApi,
  deleteFileApi,
  downloadFileApi,

  updateFileNameApi,
  renameFileApi,
  previewFileApi
} from '@/apis/bussiness'

// 状态管理
const folderList = ref([]);
const fileList = ref([]);
const currentFolderId = ref('');
// 移除currentFolderName，现在使用面包屑导航
// 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 sortField = ref('');
const sortOrder = ref('');

// 排序字段映射（前端显示名 -> 后端字段名）
const sortFieldMap = {
  'fileName': 'file_name',
  'fileType': 'file_type', 
  'fileSize': 'file_size',
  'uploadTime': 'upload_time'
};

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

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

const folderFormRef = ref(null);
const folderColor = 'var(--color-primary)';
const refreshing = ref(false);
const folderSubmitting = ref(false);

// 计算属性：将平铺的文件夹数据转换为树形结构
const folderTreeData = computed(() => {
  console.log('=== folderTreeData计算属性执行 ===');
  console.log('folderList.value:', folderList.value);
  console.log('folderList.value.length:', folderList.value?.length);
  
  if (!folderList.value || folderList.value.length === 0) {
    console.log('folderList为空，返回空数组');
    return [];
  }

  // 创建文件夹映射表
  const folderMap = new Map();
  const rootFolders = [];

  console.log('=== 开始创建文件夹映射 ===');
  // 首先创建所有文件夹的映射
  folderList.value.forEach((folder, index) => {
    console.log(`处理第${index + 1}个文件夹:`, folder);
    // 确保文件夹数据完整
    if (folder && folder.id && folder.name) {
      const node = {
        key: folder.id,        // Tree组件需要的key字段
        title: folder.name,    // Tree组件需要的title字段
        children: [],          // Tree组件需要的children字段
        // 保留原始字段用于其他功能
        id: folder.id,
        name: folder.name,
        parentId: folder.parentId
      };
      folderMap.set(folder.id, node);
      console.log(`✅ 成功添加文件夹到映射: ${folder.name} (ID: ${folder.id})`);
    } else {
      console.warn('❌ 跳过不完整的文件夹数据:', folder);
    }
  });

  console.log('=== 开始构建树形结构 ===');
  console.log('文件夹映射表大小:', folderMap.size);
  
  // 构建树形结构
  folderList.value.forEach((folder, index) => {
    console.log(`构建第${index + 1}个文件夹的树形结构:`, folder);
    // 确保文件夹数据完整
    if (!folder || !folder.id || !folder.name) {
      console.warn('❌ 跳过不完整的文件夹数据:', folder);
      return;
    }
    
    const node = folderMap.get(folder.id);
    if (!node) {
      console.warn('❌ 找不到文件夹节点:', folder.id);
      return;
    }
    
    console.log(`处理文件夹: ${folder.name} (ID: ${folder.id}, ParentID: ${folder.parentId})`);
    
    if (folder.parentId === '0' || folder.parentId === 0) {
      // 根文件夹
      rootFolders.push(node);
      console.log(`✅ 添加为根文件夹: ${folder.name}`);
    } else {
      // 子文件夹
      const parent = folderMap.get(folder.parentId);
      if (parent) {
        parent.children.push(node);
        console.log(`✅ 添加为子文件夹: ${folder.name} -> ${parent.name}`);
      } else {
        // 如果找不到父文件夹，当作根文件夹处理
        console.warn('⚠️ 找不到父文件夹，将文件夹作为根文件夹:', folder.name, folder.parentId);
        rootFolders.push(node);
      }
    }
  });

  console.log('=== 树形结构构建完成 ===');
  console.log('根文件夹数量:', rootFolders.length);
  console.log('构建的树形结构:', rootFolders);
  
  // 验证树形结构中的节点数据
  rootFolders.forEach((root, index) => {
    console.log(`根文件夹${index + 1}:`, {
      id: root.id,
      name: root.name,
      childrenCount: root.children?.length || 0
    });
  });
  
  return rootFolders;
});

// 计算属性：树形选择器数据（包含根目录选项）
const folderTreeSelectData = computed(() => {
  const rootOption = {
    key: '0',        // Tree组件需要的key字段
    title: '根目录',  // Tree组件需要的title字段
    children: [],    // Tree组件需要的children字段
    // 保留原始字段用于其他功能
    id: '0',
    name: '根目录'
  };
  
  return [rootOption, ...folderTreeData.value];
});

// 搜索相关
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: 1000, // 修改为足够大的值，确保获取所有文件夹
      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) {
      console.log('=== 开始处理数据 ===');
      console.log('folderRes.data:', folderRes.data);
      console.log('folderRes.data.rows:', folderRes.data.rows);
      console.log('folderRes.data.rows类型:', typeof folderRes.data.rows);
      console.log('folderRes.data.rows长度:', folderRes.data.rows?.length);
      
      // 检查数据结构
      if (!folderRes.data.rows || !Array.isArray(folderRes.data.rows)) {
        console.error('API返回的数据结构不正确，rows字段不存在或不是数组');
        console.log('可用的字段:', Object.keys(folderRes.data));
        folderList.value = [];
        totalFolders.value = 0;
        return;
      }
      
      const processedFolders = folderRes.data.rows.map((folder, index) => {
        console.log(`处理第${index + 1}个原始文件夹数据:`, folder);
        console.log(`原始数据字段:`, Object.keys(folder));
        console.log(`folderId:`, folder.folderId);
        console.log(`folderName:`, folder.folderName);
        console.log(`parentId:`, folder.parentId);
        
        // 确保所有必需字段都存在
        if (!folder.folderId || !folder.folderName) {
          console.warn('❌ 跳过不完整的文件夹数据:', folder);
          return null;
        }
        
        const processedFolder = {
          id: String(folder.folderId),
          name: String(folder.folderName),
          parentId: String(folder.parentId || 0)
        };
        
        console.log(`✅ 处理后的文件夹数据:`, processedFolder);
        return processedFolder;
      }).filter(Boolean); // 过滤掉null值
      
      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或数据为空');
      console.log('folderRes.code:', folderRes.code);
      console.log('folderRes.data:', folderRes.data);
    }
  } 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;
  // 搜索时重置排序状态
  sortField.value = '';
  sortOrder.value = '';
  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;
    // 搜索时重置排序状态
    sortField.value = '';
    sortOrder.value = '';
    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;
  // 清除搜索时重置排序状态
  sortField.value = '';
  sortOrder.value = '';
  console.log('重置文件页码为:', fileCurrentPage.value);
  if (currentFolderId.value) {
    loadFiles(currentFolderId.value);
  }
};

const loadFiles = async (folderId) => {
  try {
    loading.value = true;
    const apiParams = {
      folderId: folderId,
      page: fileCurrentPage.value,
      pageSize: filePageSize.value,
      fileName: fileSearchKeyword.value || undefined
    };
    
    // 添加排序参数
    if (sortField.value && sortOrder.value) {
      apiParams.sortField = sortField.value;
      apiParams.sortOrder = sortOrder.value;
      console.log('📤 发送排序参数:', apiParams.sortField, apiParams.sortOrder);
    } else {
      console.log('📤 未发送排序参数');
    }
    
    console.log('📤 发送API参数:', apiParams);
    const res = await getFilesApi(apiParams);
    
    // 根据后端返回的数据结构处理
    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;
  } catch (error) {
    console.error('加载文件失败:', error);
    Message.error('服务开小差，请稍后再试');
    fileList.value = [];
    totalFiles.value = 0;
  } finally {
    loading.value = false;
  }
};

// 排序处理函数
const handleSortChange = (field) => {
  console.log('=== 排序处理函数被调用 ===');
  console.log('传入的字段:', field);
  
  const backendField = sortFieldMap[field];
  console.log('映射后的后端字段:', backendField);
  
  if (!backendField) {
    console.log('❌ 找不到对应的后端字段，退出');
    return;
  }
  
  console.log('当前排序字段:', sortField.value);
  console.log('当前排序方向:', sortOrder.value);
  
  // 切换排序方向
  if (sortField.value === backendField) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
    console.log('✅ 切换排序方向为:', sortOrder.value);
  } else {
    // 新字段，默认降序
    sortField.value = backendField;
    sortOrder.value = 'desc';
    console.log('✅ 设置新排序字段:', sortField.value, '排序方向:', sortOrder.value);
  }
  
  // 重新加载文件列表
  if (currentFolderId.value) {
    console.log('🔄 重新加载文件列表，文件夹ID:', currentFolderId.value);
    loadFiles(currentFolderId.value);
  }
};

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

// 树形文件夹选择事件
const handleFolderSelect = (selectedKeys, info) => {
  if (selectedKeys.length > 0) {
    const folderId = selectedKeys[0];
    if (currentFolderId.value !== folderId) {
      fileCurrentPage.value = 1;
      // 切换文件夹时清空文件搜索关键词和排序状态
      fileSearchKeyword.value = '';
      sortField.value = '';
      sortOrder.value = '';
    }
    currentFolderId.value = folderId;
    loadFiles(folderId);
  }
};

// 文件夹双击处理
const handleFolderDoubleClick = (info) => {
  console.log('文件夹双击:', info);
  
  const { node } = info;
  if (!node) return;
  
  // 显示操作选项
  Modal.confirm({
    title: '文件夹操作',
    content: `请选择对文件夹"${node.title}"的操作`,
    okText: '重命名',
    cancelText: '删除',
    onOk: () => handleRenameFolder(node),
    onCancel: () => handleDeleteFolder(node)
  });
};

// 重命名当前选中的文件夹
const handleRenameCurrentFolder = () => {
  if (!currentFolderId.value || currentFolderId.value === '0') {
    Message.warning('请先选择一个文件夹');
    return;
  }
  
  // 从folderList中找到当前选中的文件夹
  const currentFolder = folderList.value.find(folder => folder.id === currentFolderId.value);
  if (!currentFolder) {
    Message.error('找不到当前文件夹信息');
    return;
  }
  
  // 构造node对象
  const node = {
    key: currentFolder.id,
    title: currentFolder.name,
    id: currentFolder.id,
    name: currentFolder.name
  };
  
  handleRenameFolder(node);
};

// 删除当前选中的文件夹
const handleDeleteCurrentFolder = () => {
  if (!currentFolderId.value || currentFolderId.value === '0') {
    Message.warning('请先选择一个文件夹');
    return;
  }
  
  // 从folderList中找到当前选中的文件夹
  const currentFolder = folderList.value.find(folder => folder.id === currentFolderId.value);
  if (!currentFolder) {
    Message.error('找不到当前文件夹信息');
    return;
  }
  
  // 构造node对象
  const node = {
    key: currentFolder.id,
    title: currentFolder.name,
    id: currentFolder.id,
    name: currentFolder.name
  };
  
  handleDeleteFolder(node);
};



// 计算属性：面包屑导航路径
const breadcrumbPath = computed(() => {
  if (!currentFolderId.value || currentFolderId.value === '0') {
    return ['知识库', '根目录'];
  }

  const path = ['知识库'];
  let currentId = currentFolderId.value;
  
  // 从当前文件夹向上查找父级路径
  while (currentId && currentId !== '0') {
    const folder = folderList.value.find(f => f.id === currentId);
    if (folder) {
      path.unshift(folder.name);
      currentId = folder.parentId;
    } else {
      break;
    }
  }
  
  return path;
});

// 面包屑点击事件处理
const handleBreadcrumbClick = (index) => {
  if (index === 0) {
    // 点击"知识库"，回到根目录
    currentFolderId.value = '0';
    // 重置排序状态
    sortField.value = '';
    sortOrder.value = '';
    loadFiles('0');
  } else {
    // 点击其他路径项，需要找到对应的文件夹ID
    const targetPath = breadcrumbPath.value.slice(0, index + 1);
    const targetFolderName = targetPath[targetPath.length - 1];
    
    // 查找对应的文件夹
    const targetFolder = folderList.value.find(folder => folder.name === targetFolderName);
    if (targetFolder) {
      currentFolderId.value = targetFolder.id;
      // 重置排序状态
      sortField.value = '';
      sortOrder.value = '';
      loadFiles(targetFolder.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) => {
  console.log('重命名文件夹:', folder);
  
  if (!folder) {
    Message.error('文件夹信息不能为空');
    return;
  }
  
  const folderId = folder.key || folder.id;
  let currentName = folder.title || folder.name;
  
  if (!folderId) {
    Message.error('文件夹ID不能为空');
    return;
  }
  
  if (!currentName) {
    Message.error('文件夹名称不能为空');
    return;
  }
  
  if (!currentName) {
    console.error('❌ currentName 为空');
    console.error('尝试从folder对象获取名称...');
    const fallbackName = folder?.title || folder?.name;
    console.error('fallbackName:', fallbackName);
    
    if (!fallbackName) {
      Message.error('当前文件夹名称不能为空');
      return;
    } else {
      console.log('✅ 使用fallbackName:', fallbackName);
      currentName = fallbackName;
    }
  }
  
  // 先显示一个简单的提示，确认函数被调用
  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的设置，现在使用面包屑导航
        // currentFolderName.value = newName.trim();
      } else {
        Message.success('文件夹重命名成功');
        // 移除对currentFolderName的设置，现在使用面包屑导航
        // 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 {
    // 强制清空搜索关键词，确保显示所有文件夹
    searchKeyword.value = '';
    currentPage.value = 1;
    // 刷新时重置排序状态
    sortField.value = '';
    sortOrder.value = '';
    
    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 {
      const result = await createFolderApi({
        name: folderForm.name,
        parentId: folderForm.parentId
      });
      Message.success('文件夹创建成功');
      
      // 新建文件夹后，刷新数据并自动选中新建的文件夹
      await initData();
      
      // 如果有返回新建文件夹的ID，自动选中它
      if (result.data && result.data.folderId) {
        currentFolderId.value = String(result.data.folderId);
        loadFiles(currentFolderId.value);
      }
    }
    folderDialogVisible.value = false;
  } catch (error) {
    console.error('文件夹操作失败:', error);
    Message.error(folderForm.id ? '重命名失败' : '创建失败');
  } finally {
    folderSubmitting.value = false;
  }
};





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

// 预览文件
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) => {
  Modal.info({
    title: '图片预览',
    content: h('div', {
      style: {
        textAlign: 'center',
        padding: '20px'
      }
    }, [
      h('img', {
        src: url,
        style: {
          maxWidth: '100%',
          maxHeight: '70vh',
          objectFit: 'contain'
        }
      })
    ]),
    width: '80%',
    footer: null,
    closable: true
  });
};

// 显示文本预览
const showTextPreview = async (blob, fileName) => {
  try {
    const text = await blob.text();
    
    Modal.info({
      title: '文本预览',
      content: h('div', {
        style: {
          textAlign: 'center',
          padding: '20px'
        }
      }, [
        h('div', {
          style: {
            maxWidth: '100%',
            maxHeight: '70vh',
            overflow: 'auto',
            backgroundColor: 'var(--color-fill-1)',
            border: '1px solid var(--color-border)',
            borderRadius: '8px',
            padding: '20px',
            fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
            fontSize: '14px',
            lineHeight: '1.6',
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word',
            color: 'var(--color-text-1)',
            textAlign: 'left'
          }
        }, text)
      ]),
      width: '80%',
      footer: null,
      closable: true
    });
  } catch (error) {
    console.error('文本预览失败:', error);
    Message.error('无法读取文本内容');
  }
};

// 显示视频预览
const showVideoPreview = (url, fileName) => {
  const container = h('div', {
    class: 'preview-container',
    style: {
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '20px',
      boxSizing: 'border-box',
      background: '#f8fafc !important'
    }
  }, [
    // 视频容器
    h('div', {
      style: {
        width: '100%',
        maxWidth: '1000px',
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        border: '1px solid #e2e8f0',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
      }
    }, [
      h('video', {
        src: url,
        controls: true,
        style: {
          width: '100%',
          maxHeight: '70vh',
          borderRadius: '8px',
          background: '#000',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          border: '1px solid #e2e8f0'
        }
      })
    ]),
    
    // 文件信息栏
    h('div', {
      style: {
        marginTop: '16px',
        padding: '12px 16px',
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        border: '1px solid #e2e8f0',
        width: '100%',
        maxWidth: '1000px',
        display: 'flex',
        alignItems: 'center',
        gap: '16px',
        fontSize: '14px',
        color: '#2c3e50'
      }
    }, [
      h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
        h('span', { style: { fontSize: '16px' } }, '🎬'),
        fileName
      ]),
      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
      h('span', { style: { color: '#666', fontSize: '13px' } }, '视频文件'),
      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
      h('span', { style: { color: '#666', fontSize: '13px' } }, new Date().toLocaleString('zh-CN'))
    ])
  ]);

  Modal.info({
    title: h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        fontSize: '16px',
        fontWeight: '600',
        color: '#2c3e50'
      }
    }, [
      h('span', { style: { fontSize: '18px' } }, '🎬'),
      '视频预览'
    ]),
    content: container,
    width: '90%',
    style: { 
      maxWidth: '1200px',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '8px',
      overflow: 'hidden',
      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
      border: '1px solid #e2e8f0',
      zIndex: 10000
    },
    mask: true,
    maskClosable: true,
    maskStyle: {
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      width: '100vw',
      height: '100vh',
      zIndex: 9999
    },
    footer: null,
    closable: true,
    okText: null,
    cancelText: null
  });
};

// 显示音频预览
const showAudioPreview = (url, fileName) => {
  const container = h('div', {
    class: 'preview-container',
    style: {
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '20px',
      boxSizing: 'border-box',
      background: '#f8fafc !important'
    }
  }, [
    // 音频容器
    h('div', {
      style: {
        width: '100%',
        maxWidth: '500px',
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        padding: '32px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        border: '1px solid #e2e8f0',
        textAlign: 'center'
      }
    }, [
      // 音频图标
      h('div', {
        style: {
          fontSize: '48px',
          marginBottom: '20px',
          color: '#165DFF'
        }
      }, '<27><>'),
      
      // 音频播放器
      h('audio', {
        src: url,
        controls: true,
        style: {
          width: '100%',
          height: '40px',
          borderRadius: '6px',
          marginBottom: '16px'
        }
      }),
      
      // 文件名
      h('div', {
        style: {
          fontSize: '14px',
          color: '#2c3e50',
          wordBreak: 'break-all',
          textAlign: 'center',
          padding: '8px 12px',
          backgroundColor: '#f8fafc',
          borderRadius: '6px',
          fontWeight: '500',
          border: '1px solid #e2e8f0'
        }
      }, fileName)
    ]),
    
    // 文件信息栏
    h('div', {
      style: {
        marginTop: '16px',
        padding: '12px 16px',
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        border: '1px solid #e2e8f0',
        width: '100%',
        maxWidth: '500px',
        display: 'flex',
        alignItems: 'center',
        gap: '16px',
        fontSize: '14px',
        color: '#2c3e50'
      }
    }, [
      h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
        h('span', { style: { fontSize: '16px' } }, '🎵'),
        fileName
      ]),
      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
      h('span', { style: { color: '#666', fontSize: '13px' } }, '音频文件'),
      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
      h('span', { style: { color: '#666', fontSize: '13px' } }, new Date().toLocaleString('zh-CN'))
    ])
  ]);

  Modal.info({
    title: h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        fontSize: '16px',
        fontWeight: '600',
        color: '#2c3e50'
      }
    }, [
      h('span', { style: { fontSize: '18px' } }, '🎵'),
      '音频预览'
    ]),
    content: container,
    width: '70%',
    style: { 
      maxWidth: '800px',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '8px',
      overflow: 'hidden',
      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
      border: '1px solid #e2e8f0',
      zIndex: 10000
    },
    mask: true,
    maskClosable: true,
    maskStyle: {
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      width: '100vw',
      height: '100vh',
      zIndex: 9999
    },
    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.title || folder.name}」吗？删除后无法恢复，文件夹内的所有文件也将被删除。`,
    onOk: async () => {
      try {
        const result = await deleteFolderApi(folder.key || folder.id);
        if (result.code === 200) {
          Message.success('文件夹删除成功');
          // 如果删除的是当前选中的文件夹，切换到根目录
          if (currentFolderId.value === (folder.key || folder.id)) {
            currentFolderId.value = '0';
            // 移除对currentFolderName的设置，现在使用面包屑导航
            // 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 sidebarCollapsed = ref(false);

// 侧边栏宽度控制
const sidebarWidth = ref(260); // 默认宽度
const isResizing = ref(false);
const startX = ref(0);
const startWidth = ref(0);

// 从localStorage加载保存的宽度
const loadSavedWidth = () => {
  try {
    const savedWidth = localStorage.getItem('bussiness-sidebar-width');
    if (savedWidth) {
      const width = parseInt(savedWidth);
      if (width >= 200 && width <= 500) {
        sidebarWidth.value = width;
      }
    }
  } catch (error) {
    console.warn('加载侧边栏宽度失败:', error);
  }
};

// 保存宽度到localStorage
const saveWidth = (width) => {
  try {
    localStorage.setItem('bussiness-sidebar-width', width.toString());
  } catch (error) {
    console.warn('保存侧边栏宽度失败:', error);
  }
};



// 开始拖拽调整大小
const startResize = (event) => {
  event.preventDefault();
  isResizing.value = true;
  startX.value = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
  startWidth.value = sidebarWidth.value;
  
  // 添加事件监听器
  if (event.type === 'mousedown') {
    document.addEventListener('mousemove', handleResize);
    document.addEventListener('mouseup', stopResize);
  } else {
    document.addEventListener('touchmove', handleResize);
    document.addEventListener('touchend', stopResize);
  }
  
  // 添加样式
  document.body.classList.add('resizing');
};

// 处理拖拽调整
const handleResize = (event) => {
  if (!isResizing.value) return;
  
  const currentX = event.type === 'mousemove' ? event.clientX : event.touches[0].clientX;
  const deltaX = currentX - startX.value;
  const newWidth = Math.max(200, Math.min(500, startWidth.value + deltaX));
  
  sidebarWidth.value = newWidth;
};

// 停止拖拽调整
const stopResize = () => {
  isResizing.value = false;
  
  // 移除事件监听器
  document.removeEventListener('mousemove', handleResize);
  document.removeEventListener('mouseup', stopResize);
  document.removeEventListener('touchmove', handleResize);
  document.removeEventListener('touchend', stopResize);
  
  // 移除样式
  document.body.classList.remove('resizing');
  
  // 保存宽度
  saveWidth(sidebarWidth.value);
};

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

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

// 上传成功回调
const handleUploadSuccess = () => {
  // 刷新当前文件夹文件列表
  if (currentFolderId.value) {
    loadFiles(currentFolderId.value);
  }
};

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

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

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





// 初始化加载
onMounted(() => {
  loadSavedWidth(); // 加载保存的侧边栏宽度
  initData();
});
</script>

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

/* 侧边栏样式 */
.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: var(--color-bg-1);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-1);
  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;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--color-bg-1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 200px);
}



.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, var(--color-fill-2) 0%, var(--color-fill-3) 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-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background: var(--color-bg-1);
  min-height: 0;
  max-height: calc(100vh - 120px);
  position: relative;
}

.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%;
  overflow: hidden;
  padding-bottom: 80px; /* 为分页器留出空间 */
}









/* 上传区域样式 */
.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);
}







/* 动画效果 */
: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.2s ease-out;
  z-index: 10000 !important;
}

/* 确保遮罩覆盖整个屏幕 */
:deep(.arco-modal-mask) {
  animation: fadeIn 0.2s ease;
  background-color: rgba(0, 0, 0, 0.6) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

:deep(.arco-modal-content) {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

:deep(.arco-modal-body) {
  background: #f8fafc !important;
  padding: 0 !important;
}

/* 强制覆盖所有可能的背景样式 */
:deep(.arco-modal-body > div) {
  background: #f8fafc !important;
}

:deep(.arco-modal-body > div > div) {
  background: #f8fafc !important;
}

/* 确保预览弹窗内容区域使用正确的背景 */
:deep(.arco-modal-body .preview-container) {
  background: #f8fafc !important;
}

/* 强制覆盖所有预览弹窗的背景 */
:deep(.arco-modal-body) {
  background: #f8fafc !important;
}

:deep(.arco-modal-body > *) {
  background: #f8fafc !important;
}

/* 确保没有渐变背景 */
:deep(.arco-modal-body *[style*="linear-gradient"]) {
  background: #f8fafc !important;
}

:deep(.arco-modal-header) {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 20px;
}

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

:deep(.arco-modal-close) {
  background: #f8fafc;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
  
  &:hover {
    background: var(--color-fill-2);
    color: var(--color-primary);
  }
}

/* 按钮悬停效果增强 */
:deep(.arco-btn) {
  transition: all 0.2s ease;
  
  &:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  
  &: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(var(--color-bg-1-rgb), 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, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 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(var(--color-bg-1-rgb), 0.1) 50%, transparent 70%);
    animation: shimmer 2s infinite;
  }
}



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





/* 树形文件夹结构 */
.folder-tree-container {
  padding: 8px;
  background: var(--color-bg-1);
  border-radius: 6px;
  margin: 8px;
  overflow: hidden;
}

.tree-node-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.folder-name {
  flex: 1;
  margin-left: 4px;
  font-size: 14px;
  color: var(--color-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tree-node-content:hover .folder-actions {
  opacity: 1;
}

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

.folder-tree {
  :deep(.arco-tree-node-content) {
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    
    &:hover {
      background-color: var(--color-fill-2);
    }
  }
  
  :deep(.arco-tree-node-selected .arco-tree-node-content) {
    background-color: var(--color-primary-light-1);
    color: var(--color-primary);
  }
  
  :deep(.arco-tree-node-indent) {
    padding-left: 8px;
  }
  
  &.collapsed {
    :deep(.arco-tree-node-content) {
      padding: 8px 4px;
      justify-content: center;
    }
    
    :deep(.arco-tree-node-title) {
      display: none;
    }
    
    :deep(.arco-tree-node-switcher) {
      display: none;
    }
    
    :deep(.arco-tree-node-indent) {
      display: none;
    }
  }
}

/* 面包屑导航样式 */
.breadcrumbs {
  .clickable {
    cursor: pointer;
    color: var(--color-primary);
    transition: color 0.2s ease;
    
    &:hover {
      color: var(--color-primary-light-1);
      text-decoration: underline;
    }
  }
}

/* 拖拽分隔线样式 */
.sidebar-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  transition: background-color 0.2s ease;
  z-index: 10;
  
  &:hover {
    background: rgba(var(--color-primary-6), 0.1);
  }
  
  &:active {
    background: rgba(var(--color-primary-6), 0.2);
  }
}

.resizer-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 1px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.sidebar-resizer:hover .resizer-handle {
  opacity: 1;
}

/* 拖拽时的全局样式 */
body.resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.resizing * {
  cursor: col-resize !important;
}
</style>