文件比对标红显示

<!-- src/components/explorer/FileTreeItem.vue -->
<template>
  <div class="tree-node">
    <div 
      class="item-label"
      :class="{ 
        'selected': isSelected,
        'missing': isMissing // 🔴 关键样式：不存在标红
      }"
      :style="{ paddingLeft: `${depth * 16 + 8}px` }"
      @click.stop="handleClick"
      @contextmenu.stop="handleRightClick"
    >
      <!-- 图标：如果丢失显示警告，否则显示正常的文件夹/文件图标 -->
      <span class="icon">
        <template v-if="isMissing">⚠️</template>
        <template v-else>
            {{ node.type === 'directory' ? (isOpen ? '📂' : '📁') : '📄' }}
        </template>
      </span>
      
      <span class="name">{{ node.name }}</span>
      <span v-if="isMissing" class="missing-tag">(已删除)</span>
    </div>

    <!-- 递归渲染 -->
    <div v-if="node.type === 'directory' && isOpen">
      <FileTreeItem 
        v-for="child in node.children" 
        :key="child.path"
        :node="child"
        :depth="depth + 1"
        :selectedPath="selectedPath"
        :statusMap="statusMap" 
        @select="$emit('select', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  node: any
  depth: number
  selectedPath: string
  // 接收父组件传下来的状态表 { "path": true/false }
  statusMap: Record<string, boolean> 
}>()

const emit = defineEmits(['select'])

const isOpen = ref(false)

const isSelected = computed(() => props.selectedPath === props.node.path)

// ⚠️ 核心判断：如果 map 里显式记为 false，则视为丢失
// (如果 map 里没有这个 key，通常视作还没加载完，暂不标红，或者默认为 true)
const isMissing = computed(() => {
    return props.statusMap[props.node.path] === false
})

const handleClick = () => {
  // 🚫 核心逻辑：不存在则禁止点击（或者只能触发特定逻辑）
  if (isMissing.value) {
    console.warn('文件不存在，无法打开')
    return
  }

  if (props.node.type === 'directory') {
    isOpen.value = !isOpen.value
  }
  emit('select', props.node)
}

const handleRightClick = () => {
    // 即使文件不存在，通常也允许右键，以便用户选择 "从列表中删除"
}
</script>

<style scoped>
.item-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  color: #ccc;
  user-select: none;
}

/* 正常状态 hover */
.item-label:hover:not(.missing) { background-color: #2a2d2e; }
.item-label.selected { background-color: #37373d; color: white; }

/* 🔴 丢失文件样式 */
.item-label.missing {
  color: #e51400; /* 鲜艳的红 */
  opacity: 0.8;
  cursor: not-allowed; /* 禁止手势 */
}
.item-label.missing:hover {
  background-color: rgba(229, 20, 0, 0.1); /* 红色背景微光 */
}

.icon { margin-right: 6px; width: 16px; text-align: center; }
.missing-tag { font-size: 10px; margin-left: 8px; opacity: 0.7; }
</style>

<!-- src/components/explorer/ProjectExplorer.vue -->
<template>
  <div class="explorer">
    <div class="toolbar">
        <button @click="validateFiles">🔄 刷新状态</button>
    </div>
    
    <div class="tree-container">
      <FileTreeItem 
        v-for="node in projectData" 
        :key="node.path"
        :node="node"
        :depth="0"
        :selectedPath="selectedPath"
        :statusMap="fileStatusMap" 
        @select="handleSelect"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import FileTreeItem from './FileTreeItem.vue'

// 假设这是你从 project.config.json 读出来的原始数据
const projectData = ref<any[]>([
    // 示例数据
    { 
        name: 'src', path: 'D:/project/src', type: 'directory', 
        children: [
            { name: 'main.ts', path: 'D:/project/src/main.ts', type: 'file' },
            { name: 'deleted.ts', path: 'D:/project/src/deleted.ts', type: 'file' } // 假设这个文件被删了
        ]
    }
])

const selectedPath = ref('')
const fileStatusMap = ref<Record<string, boolean>>({})

// === 核心工具：拍平树结构获取所有路径 ===
const getAllPaths = (nodes: any[]): string[] => {
  let paths: string[] = []
  for (const node of nodes) {
    paths.push(node.path)
    if (node.children) {
      paths = paths.concat(getAllPaths(node.children))
    }
  }
  return paths
}

// === 核心逻辑：批量校验 ===
const validateFiles = async () => {
  if (projectData.value.length === 0) return

  // 1. 提取所有路径
  const allPaths = getAllPaths(projectData.value)
  
  // 2. 发送给主进程批量检查
  console.log('正在校验文件数量:', allPaths.length)
  const result = await window.fsAPI.checkPathsBatch(allPaths)
  
  // 3. 更新状态 Map
  fileStatusMap.value = result
}

// 初始化时校验一次
onMounted(() => {
  validateFiles()
})

// 监听数据变化（如果工程文件变了，重新校验）
watch(projectData, () => {
    validateFiles()
}, { deep: true })

const handleSelect = (node: any) => {
    selectedPath.value = node.path
    // 打开文件逻辑...
}
</script>