76 lines
3.3 KiB
Vue
76 lines
3.3 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-2xl font-bold">身分管理</h2>
|
|
<button @click="loadPersons" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">重新整理</button>
|
|
</div>
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<input v-model="filterQuery" @keyup.enter="loadPersons" placeholder="搜尋身分..."
|
|
class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500" />
|
|
</div>
|
|
|
|
<div v-if="persons.length > 0" class="grid gap-4">
|
|
<div v-for="person in persons" :key="person.id" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<div class="flex items-start gap-6">
|
|
<div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<h3 class="text-xl font-semibold text-blue-400">{{ person.name || '未命名' }}</h3>
|
|
<span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">{{ person.source || 'system' }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 text-sm text-gray-400 mb-3">
|
|
<div>ID: {{ person.id }}</div>
|
|
<div v-if="person.metadata?.tmdb_movie_title">電影: {{ person.metadata.tmdb_movie_title }}</div>
|
|
<div v-if="person.metadata?.tmdb_character">角色: {{ person.metadata.tmdb_character }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col space-y-2">
|
|
<button @click="viewDetails(person)" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition">查看詳情</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="loading" class="text-center py-12 text-gray-500">載入中...</div>
|
|
<div v-else class="text-center py-12 text-gray-500">尚無身分資料</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { httpFetch, getCurrentConfig } from '@/api/client'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const persons = ref<any[]>([])
|
|
const loading = ref(false)
|
|
const filterQuery = ref('')
|
|
const router = useRouter()
|
|
|
|
const loadPersons = async () => {
|
|
loading.value = true
|
|
try {
|
|
const config = getCurrentConfig()
|
|
const params = new URLSearchParams({ page: '1', page_size: '50' })
|
|
if (filterQuery.value.trim()) params.set('query', filterQuery.value.trim())
|
|
const result = await httpFetch<any>(`${config.api_base_url}/api/v1/identities?${params}`)
|
|
persons.value = result.identities || []
|
|
} catch (error) {
|
|
console.error('Failed to load identities:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const viewDetails = (person: any) => {
|
|
router.push({
|
|
name: 'identity-detail',
|
|
params: { identity_uuid: person.id }
|
|
})
|
|
}
|
|
|
|
onMounted(() => { loadPersons() })
|
|
</script>
|