<template>
  <div class="fe-detached-shell">
    <!-- 等待 projectId 参数加载 -->
    <div v-if="!projectId" class="fe-detached-loading">
      <span class="spinner"></span>
    </div>
    <FileExplorer v-else :project-id="projectId" />
  </div>
</template>

<script setup lang="ts">
/**
 * 文件浏览器分离窗口视图(Batch 12)。
 * 作为独立 Tauri 窗口的全屏内容,通过 URL query `?projectId=xxx` 接收参数。
 */
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import FileExplorer from '@/components/project/FileExplorer.vue'

const route = useRoute()
const projectId = computed(() => (route.query.projectId as string) || '')
</script>

<style scoped>
.fe-detached-shell {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--df-bg);
}

.fe-detached-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--df-text-dim);
  font-size: 14px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--df-border, #444);
  border-top-color: var(--df-accent, #3a8);
  border-radius: 50%;
  animation: df-spin 0.8s linear infinite;
  display: inline-block;
  margin-right: 8px;
}

@keyframes df-spin {
  to { transform: rotate(360deg); }
}
</style>
