sentinel-home-ai/fam-ui/src/App.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { api, fmtDateTime } from './api.js'
import { navItems } from './router.js'

const route = useRoute()
const sync = ref(null)

async function refreshStatus() {
  try {
    const data = await api.status()
    sync.value = data.sync
  } catch {
    sync.value = null
  }
}

let timer = null
onMounted(() => {
  refreshStatus()
  timer = setInterval(refreshStatus, 30000)
})
onUnmounted(() => clearInterval(timer))
</script>

<template>
  <div class="flex min-h-screen flex-col lg:flex-row">
    <!-- 桌面端左侧栏：品牌 + 同步状态。lg 以下隐藏，改用下面的移动端顶栏 -->
    <aside class="hidden w-64 shrink-0 border-r border-border bg-[#090c12] px-4 py-6 lg:block">
      <div class="mb-6">
        <div class="text-[17px] font-bold text-[#f7f9fc]">🏠 家庭智能监控</div>
        <div class="mt-1 text-[11px] text-text-mute">SENTINEL HOME AI · 管理后台</div>
      </div>
      <div v-if="sync" class="rounded-xl border border-border bg-panel-2 px-4 py-3 text-xs leading-loose text-text-dim">
        <b class="text-[#f7f9fc]">同步状态</b><br />
        状态 <span :class="sync.running ? 'font-semibold text-ok' : 'font-semibold text-danger'">{{ sync.running ? '同步中' : '未运行' }}</span><br />
        最近 <b class="text-[#ccd5e1]">{{ sync.last_sync_at ? fmtDateTime(sync.last_sync_at) : '—' }}</b><br />
        本次增量 {{ sync.last_count ? `视频+${sync.last_count[0]} / 事件+${sync.last_count[1]} / 人物+${sync.last_count[2]}` : '—' }}<br />
        游标 {{ sync.cursor ? fmtDateTime(sync.cursor) : '（全量）' }}
        <div v-if="sync.last_error" class="font-semibold text-danger">⚠ {{ sync.last_error }}</div>
      </div>
    </aside>

    <!-- 移动端顶栏：品牌 + 简要同步指示灯，lg 以上隐藏（用左侧栏代替） -->
    <header class="flex items-center justify-between border-b border-border bg-[#090c12] px-4 py-3 lg:hidden">
      <div class="text-[15px] font-bold text-[#f7f9fc]">🏠 家庭智能监控</div>
      <span v-if="sync" class="flex items-center gap-1.5 text-xs font-medium" :class="sync.running ? 'text-ok' : 'text-danger'">
        <span class="h-1.5 w-1.5 rounded-full bg-current"></span>{{ sync.running ? '同步中' : '未运行' }}
      </span>
    </header>

    <div class="min-w-0 flex-1 px-4 py-4 sm:px-8 sm:py-6">
      <!-- 导航：宽屏时换行排列的胶囊组；窄屏时横向可滑动，避免每个按钮被挤到文字逐字换行 -->
      <nav class="mb-6 flex gap-1.5 overflow-x-auto rounded-2xl border border-border bg-panel-2 p-1.5 lg:mb-7 lg:flex-wrap lg:overflow-visible">
        <router-link v-for="item in navItems" :key="item.name" :to="item.path"
          class="shrink-0 whitespace-nowrap rounded-xl px-3.5 py-2 text-sm font-medium text-text-dim transition-colors hover:text-text"
          :class="route.name === item.name ? 'bg-gradient-to-br from-accent to-accent-2 text-white shadow-[0_4px_16px_-4px_rgba(91,140,255,.45)]' : ''">
          {{ item.meta.icon }} {{ item.meta.label }}
        </router-link>
      </nav>
      <router-view />
    </div>
  </div>
</template>