82 lines
4.2 KiB
Vue
82 lines
4.2 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-gray-900 text-white">
|
||
<!-- Header (Hidden on Login page) -->
|
||
<header v-if="!isLoginPage" class="bg-gray-800 border-b border-gray-700 fixed top-0 left-0 right-0 z-50">
|
||
<div class="container mx-auto px-4 py-3">
|
||
<div class="flex items-center justify-between">
|
||
<h1 class="text-2xl font-bold text-blue-400">Momentry Portal</h1>
|
||
<nav class="flex items-center space-x-6">
|
||
<router-link to="/home" class="hover:text-blue-400 transition">首頁</router-link>
|
||
<router-link to="/search" class="hover:text-blue-400 transition">搜尋</router-link>
|
||
<router-link to="/persons" class="hover:text-blue-400 transition">人物管理</router-link>
|
||
<router-link to="/traces" class="hover:text-blue-400 transition">Face Traces</router-link>
|
||
<router-link to="/files" class="hover:text-blue-400 transition">納管檔案</router-link>
|
||
<router-link to="/settings" class="hover:text-blue-400 transition">設定</router-link>
|
||
<router-link to="/jobs" class="hover:text-blue-400 transition">Pipeline</router-link>
|
||
<button @click="handleLogout" class="text-xs bg-red-800 hover:bg-red-700 px-2 py-1 rounded transition ml-4 text-red-100">登出</button>
|
||
<button @click="toggleDevMode" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2" :title="showApiDemo ? '隱藏 API Console' : '顯示 API Console'">
|
||
{{ showApiDemo ? '🔧' : '🛠️' }}
|
||
</button>
|
||
<button @click="openDevTools" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2">Console</button>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main :class="{ 'container mx-auto px-4 py-6 pt-20': !isLoginPage }">
|
||
<router-view />
|
||
</main>
|
||
|
||
<!-- API Demo (hidden by default, enable via localStorage devMode=true) -->
|
||
<div v-if="!isLoginPage && showApiDemo" class="container mx-auto px-4 pb-8 pt-4">
|
||
<ApiDemo />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import ApiDemo from './components/ApiDemo.vue'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const isLoginPage = computed(() => route.path === '/login')
|
||
const showApiDemo = ref(localStorage.getItem('devMode') === 'true')
|
||
|
||
const toggleDevMode = () => {
|
||
showApiDemo.value = !showApiDemo.value
|
||
localStorage.setItem('devMode', String(showApiDemo.value))
|
||
}
|
||
|
||
const openDevTools = () => {
|
||
console.clear()
|
||
console.log('%c🛠️ Momentry Console', 'font-size: 18px; font-weight: bold; color: #3b82f6;')
|
||
console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #3b82f6;')
|
||
console.log('%c點擊左側「Console」標籤查看輸出', 'color: #9ca3af;')
|
||
console.log('%c', '')
|
||
console.log('%c🔍 快速過濾:', 'color: #10b981; font-weight: bold;')
|
||
console.log('%c 在上方搜尋框輸入「Momentry」可只看本系統輸出', 'color: #6b7280;')
|
||
console.log('%c', '')
|
||
console.log('%c📋 操作提示:', 'color: #f59e0b; font-weight: bold;')
|
||
console.log('%c 1. 登入後點擊各功能頁面進行 API 呼叫', 'color: #d1d5db;')
|
||
console.log('%c 2. 每次呼叫會即時顯示於此 Console', 'color: #d1d5db;')
|
||
console.log('%c 3. 使用 F12 也可打開完整開發者工具', 'color: #d1d5db;')
|
||
console.log('%c', '')
|
||
console.log('%c⚡ 測試範例:', 'color: #ef4444; font-weight: bold;')
|
||
console.log('%c curl -X POST http://127.0.0.1:3003/api/v1/auth/login -H "Content-Type: application/json" -d \'{"username":"demo","password":"demo"}\'', 'color: #a78bfa; font-family: monospace;')
|
||
console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #3b82f6;')
|
||
|
||
alert('✅ Console 訊息已輸出！\n\n請按 F12 或 Cmd+Option+I 打開開發者工具查看')
|
||
}
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('momentry_user')
|
||
// Also clear config if you want to force re-login to setup API
|
||
localStorage.removeItem('portal_config')
|
||
router.push('/login')
|
||
}
|
||
</script>
|