u-desk/web/src/components/FileSystem/index-simple.vue

<template>
  <div class="file-system-container">
    <div class="debug-info">
      <h3>FileSystem Debug Info</h3>
      <p>filePath: {{ filePath }}</p>
      <p>fileList length: {{ fileList.length }}</p>
      <p>showSidebar: {{ showSidebar }}</p>
      <p>hasSelectedFile: {{ hasSelectedFile }}</p>
      <button @click="testClick">测试点击</button>
    </div>

    <!-- 顶部工具栏 -->
    <Toolbar
      :config="toolbarConfig"
      @update:file-path="handleFilePathUpdate"
      @update:show-sidebar="handleSidebarToggle"
      @refresh="handleRefresh"
      @exit-zip="handleExitZip"
      @go-to-path="handleGoToPath"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { sortFileList } from '@/utils/fileUtils'

// 导入子组件
import Toolbar from './components/Toolbar.vue'

// 导入 Composables
import { useFileOperations } from './composables/useFileOperations'
import { useFavorites } from './composables/useFavorites'
import { usePathNavigation } from './composables/usePathNavigation'

// 定义组件名称
defineOptions({
  name: 'FileSystem'
})

console.log('FileSystem component setup started')

// ========== 状态管理 ==========

const fileList = ref([])
const fileLoading = ref(false)
const selectedFileItem = ref(null)

const showSidebar = ref(true)
const panelWidth = ref({ left: 50, right: 50 })

// ========== Composables 初始化 ==========

// 文件操作
const { listDirectory, readFile } = useFileOperations({
  onSuccess: (operation, data) => {
    console.log('Operation success:', operation, data)
  },
  onError: (operation, error) => {
    console.error('Operation error:', operation, error)
    Message.error(`${operation} 失败: ${error.message}`)
  }
})

// 收藏夹
const { favorites, draggingState } = useFavorites()

// 路径导航
const { filePath, history, navigate, onPathSelect, onPathEnter, browseDirectory } =
  usePathNavigation({
    onListDirectory: async (path) => {
      await loadDirectory(path)
    },
    initialPath: 'C:\\'
  })

console.log('Composables initialized')
console.log('Initial filePath:', filePath.value)

// ========== 计算属性 ==========

const hasSelectedFile = computed(() => selectedFileItem.value !== null)

const toolbarConfig = computed(() => ({
  filePath: filePath.value || '',
  pathHistory: history.value?.paths?.slice(-10) || [],
  commonPaths: [
    { name: '📁 桌面', path: 'C:\\Users\\Public\\Desktop' },
    { name: '📁 文档', path: 'C:\\Users\\Public\\Documents' },
    { name: '📁 下载', path: 'C:\\Users\\Public\\Downloads' }
  ],
  isBrowsingZip: false,
  displayPath: filePath.value || '',
  fileLoading: fileLoading.value,
  showSidebar: showSidebar.value
}))

// ========== 事件处理 ==========

const handleFilePathUpdate = (path: string) => {
  console.log('handleFilePathUpdate:', path)
  filePath.value = path
}

const handleSidebarToggle = (show: boolean) => {
  console.log('handleSidebarToggle:', show)
  showSidebar.value = show
}

const handleRefresh = async () => {
  console.log('handleRefresh')
  await loadDirectory(filePath.value)
}

const handleExitZip = () => {
  console.log('handleExitZip')
}

const handleGoToPath = async (path: string) => {
  console.log('handleGoToPath:', path)
  await navigate(path)
}

const testClick = () => {
  console.log('Test button clicked')
  Message.success('测试成功！')
  console.log('Current state:', {
    filePath: filePath.value,
    fileList: fileList.value,
    favorites: favorites.value
  })
}

// ========== 工具函数 ==========

const loadDirectory = async (path: string) => {
  console.log('loadDirectory:', path)
  fileLoading.value = true
  try {
    fileList.value = await listDirectory(path)
    fileList.value = sortFileList(fileList.value)
    console.log('Files loaded:', fileList.value.length)
  } catch (error) {
    console.error('Load directory error:', error)
    Message.error(`加载目录失败: ${error}`)
  } finally {
    fileLoading.value = false
  }
}

// ========== 生命周期 ==========

onMounted(() => {
  console.log('FileSystem mounted')
  console.log('Loading initial directory:', filePath.value)

  // 加载默认目录
  loadDirectory(filePath.value)
})
</script>

<style scoped>
.file-system-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.debug-info {
  padding: 20px;
  background: #f0f0f0;
  margin: 10px;
  border-radius: 8px;
}

.debug-info h3 {
  margin-top: 0;
}

.debug-info p {
  margin: 5px 0;
  font-family: 'Consolas', monospace;
}

.debug-info button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.debug-info button:hover {
  background: #40a9ff;
}
</style>