admin/momentry_studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: bind/unbind by id, video streaming proxy, unmute default, library refresh, hamburger click-outside

Browse Source 
- Core API: bind/unbind accept id (integer PK) when face_id is null
- Tauri proxy: stream video responses instead of buffering for seek bar
- VideoPlayer: remove muted attribute, unmute by default
- LibraryView: call invalidateFiles() before ensureFiles() on register/unregister
- PeopleView: close sort panel on click-outside, not just hamburger toggle
- bind_face: prefer face_id, fallback to id when face_id is null
This commit is contained in:
Momentry Studio
2026-06-18 22:24:03 +08:00
parent 97af4da331
commit 7855983dc1
19 changed files with 5321 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

427
src/views/LibraryView.vue
View File

@@ -1,97 +1,131 @@
<template>
<div id="ms-files-page">
<section class="mp-panel is-active">
<div class="mp-toolbar">
<div class="mp-toolbar-left">
<button class="mp-btn mp-btn-primary" type="button" @click="addToPeople">Register</button>
<button class="mp-btn mp-btn-icon" type="button" title="Refresh" @click="loadFiles">
<span class="mp-refresh-icon">⟳</span>
</button>
<label class="mp-radio-row">
<input type="radio" name="mp-display-filter" value="all" v-model="displayFilter"> All
<section class="ms-fm-panel">
<div class="ms-fm-toolbar">
<div class="ms-fm-toolbar-left">
<button class="ms-fm-icon-btn" type="button" title="Refresh" @click="loadFiles">⟳</button>
<label class="ms-fm-radio-label">
<input type="radio" name="ms-display-filter" value="all" v-model="displayFilter"> All
</label>
<label class="mp-radio-row">
<input type="radio" name="mp-display-filter" value="video" v-model="displayFilter"> All Videos
<label class="ms-fm-radio-label">
<input type="radio" name="ms-display-filter" value="video" v-model="displayFilter"> Videos
</label>
<label class="mp-radio-row">
<input type="radio" name="mp-display-filter" value="photo" v-model="displayFilter"> All Photos
<label class="ms-fm-radio-label">
<input type="radio" name="ms-display-filter" value="photo" v-model="displayFilter"> Photos
</label>
</div>
<div class="mp-toolbar-right">
<div class="mp-search-wrap">
<input type="text" class="mp-search" v-model="filterText" placeholder="Search files / docs / videos">
<div class="ms-fm-toolbar-right">
<div class="ms-fm-search-wrap">
<input type="text" class="ms-fm-search" v-model="filterText" placeholder="Search files / docs / videos">
</div>
<button class="mp-filter-btn" type="button" @click="showFilter = !showFilter">☰</button>
<button class="ms-fm-icon-btn" type="button" @click="showFilter = !showFilter">☰</button>
</div>
</div>
<!-- Filter Popup -->
<div class="mp-filter-pop" :class="{ show: showFilter }">
<div class="mp-filter-title">排序方式</div>
<label class="mp-radio-row"><input type="radio" name="mp-sort" value="time_desc" v-model="sortBy" checked> 依時間・由近到遠</label>
<label class="mp-radio-row"><input type="radio" name="mp-sort" value="time_asc" v-model="sortBy"> 依時間・由遠到近</label>
<label class="mp-radio-row"><input type="radio" name="mp-sort" value="size_desc" v-model="sortBy"> 依大小・由大到小</label>
<label class="mp-radio-row"><input type="radio" name="mp-sort" value="size_asc" v-model="sortBy"> 依大小・由小到大</label>
<label class="mp-radio-row"><input type="radio" name="mp-sort" value="name_asc" v-model="sortBy"> 依檔名・由 A 到 Z</label>
<label class="mp-radio-row"><input type="radio" name="mp-sort" value="name_desc" v-model="sortBy"> 依檔名・由 Z 到 A</label>
<div class="mp-filter-title">過濾方式</div>
<label class="mp-check-row"><input type="checkbox" v-model="filterUnregistered"> 未註冊</label>
<label class="mp-check-row"><input type="checkbox" v-model="filterRegistered"> 已註冊</label>
<label class="mp-check-row"><input type="checkbox" v-model="onlyVideos"> 僅顯示影片</label>
<label class="mp-check-row"><input type="checkbox" v-model="onlyPhotos"> 僅顯示照片</label>
<div class="mp-filter-title">大小</div>
<div class="mp-range-row">
<input type="number" class="mp-filter-number" v-model.number="sizeMin" min="0" placeholder="最小 MB">
<span>—</span>
<input type="number" class="mp-filter-number" v-model.number="sizeMax" min="0" placeholder="最大 MB">
<div class="ms-fm-sort-panel" :class="{ show: showFilter }">
<div class="ms-fm-sort-section">
<div class="ms-fm-sort-title">排序方式</div>
<label class="ms-fm-radio-label"><input type="radio" name="ms-sort" value="time_desc" v-model="sortBy"> 依時間・由近到遠</label>
<label class="ms-fm-radio-label"><input type="radio" name="ms-sort" value="time_asc" v-model="sortBy"> 依時間・由遠到近</label>
<label class="ms-fm-radio-label"><input type="radio" name="ms-sort" value="size_desc" v-model="sortBy"> 依大小・由大到小</label>
<label class="ms-fm-radio-label"><input type="radio" name="ms-sort" value="size_asc" v-model="sortBy"> 依大小・由小到大</label>
<label class="ms-fm-radio-label"><input type="radio" name="ms-sort" value="name_asc" v-model="sortBy"> 依檔名・由 A 到 Z</label>
<label class="ms-fm-radio-label"><input type="radio" name="ms-sort" value="name_desc" v-model="sortBy"> 依檔名・由 Z 到 A</label>
</div>
<div class="mp-filter-title">影片時長</div>
<div class="mp-range-row">
<input type="number" class="mp-filter-number" v-model.number="durationMin" min="0" placeholder="最小分鐘">
<span>—</span>
<input type="number" class="mp-filter-number" v-model.number="durationMax" min="0" placeholder="最大分鐘">
<div class="ms-fm-sort-section">
<div class="ms-fm-sort-title">過濾方式</div>
<label class="ms-fm-radio-label"><input type="checkbox" v-model="filterUnregistered"> 未註冊</label>
<label class="ms-fm-radio-label"><input type="checkbox" v-model="filterRegistered"> 已註冊</label>
<label class="ms-fm-radio-label"><input type="checkbox" v-model="filterPending"> 待處理</label>
<label class="ms-fm-radio-label"><input type="checkbox" v-model="filterCompleted"> 已完成</label>
<label class="ms-fm-radio-label"><input type="checkbox" v-model="onlyVideos"> 僅顯示影片</label>
<label class="ms-fm-radio-label"><input type="checkbox" v-model="onlyPhotos"> 僅顯示照片</label>
</div>
<button type="button" class="mp-filter-reset" @click="resetFilters">清除篩選</button>
<div class="ms-fm-sort-section">
<div class="ms-fm-sort-title">大小</div>
<div style="display:flex;align-items:center;gap:8px;">
<input type="number" class="ms-fm-edit-input" v-model.number="sizeMin" min="0" placeholder="最小 MB" style="width:100%;">
<span>—</span>
<input type="number" class="ms-fm-edit-input" v-model.number="sizeMax" min="0" placeholder="最大 MB" style="width:100%;">
</div>
</div>
<div class="ms-fm-sort-section">
<div class="ms-fm-sort-title">影片時長</div>
<div style="display:flex;align-items:center;gap:8px;">
<input type="number" class="ms-fm-edit-input" v-model.number="durationMin" min="0" placeholder="最小分鐘" style="width:100%;">
<span>—</span>
<input type="number" class="ms-fm-edit-input" v-model.number="durationMax" min="0" placeholder="最大分鐘" style="width:100%;">
</div>
</div>
<button type="button" class="ms-fm-btn" style="width:100%;margin-top:8px;" @click="resetFilters">清除篩選</button>
</div>
<div class="mp-status" :class="{ show: loading || statusText }">{{ statusText }}</div>
<div class="ms-fm-status">{{ statusText }}<span v-if="actionMsg" class="ms-fm-action-msg">{{ actionMsg }}</span></div>
<div class="mp-grid">
<div v-for="f in sortedFilteredFiles" :key="f.file_uuid" class="mp-file-card" :class="{ 'is-completed': f.isRegistered, 'is-selected': selectedFiles.includes(f.file_uuid) }" @click="toggleSelect(f)">
<div class="mp-thumb-wrap">
<div class="mp-badge-type">{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}</div>
<img v-if="isPhoto(f) || isVideo(f)" v-show="thumbnails[f.file_uuid]" class="lt-thumb" :src="thumbnails[f.file_uuid]" alt="" @error="handleThumbError" @vue:mounted="loadThumbnail(f.file_uuid)">
<div v-if="(isPhoto(f) || isVideo(f)) && !thumbnails[f.file_uuid]" class="mp-thumb-loading">⟳</div>
<div v-else class="mp-doc-thumb">
<span class="mp-doc-icon">📄</span>
<span class="mp-doc-ext">{{ getFileExt(f.file_name) }}</span>
<div class="ms-fm-grid">
<div v-for="f in sortedFilteredFiles" :key="f.file_uuid" class="ms-fm-card" :class="{ 'is-completed': f.isRegistered, 'is-selected': selectedFiles.includes(f.file_uuid) }" @click="toggleSelect(f)" @contextmenu.prevent="openContextMenu($event, f)">
<div class="ms-fm-thumb-wrap" v-observe="() => { if (isPhoto(f) || isVideo(f)) loadThumbnailLocal(f.file_uuid) }">
<div class="ms-fm-badge">{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}</div>
<img v-if="isPhoto(f) || isVideo(f)" v-show="thumbnails[thumbKey(f.file_uuid)]" class="ms-fm-thumb" :src="thumbnails[thumbKey(f.file_uuid)]" alt="" @error="handleThumbError">
<div v-if="(isPhoto(f) || isVideo(f)) && !thumbnails[thumbKey(f.file_uuid)]" class="ms-fm-thumb-loading">⟳</div>
<div v-else class="ms-fm-doc-thumb">
<span class="ms-fm-doc-icon">📄</span>
<span class="ms-fm-doc-ext">{{ getFileExt(f.file_name) }}</span>
</div>
<button v-if="isVideo(f)" class="mp-play-btn" @click.stop="playVideo(f)">▶</button>
<div class="mp-complete-mark" v-if="f.isRegistered">✓</div>
<button v-if="isVideo(f)" class="ms-fm-play-btn" @click.stop="playVideo(f)">▶</button>
<div class="ms-fm-check" v-if="f.isRegistered">✓</div>
<div class="ms-fm-status-badge" v-if="f.status === 'completed'" style="background:#1e8e3e;color:#fff;">完成</div>
<div class="ms-fm-status-badge" v-else-if="f.status === 'registered'" style="background:#f9ab00;color:#202124;">待處理</div>
</div>
<div class="mp-meta">
<div class="mp-name">{{ f.file_name }}</div>
<div class="mp-source">{{ formatSize(f.file_size) }} · {{ formatDate(f.modified_time) }}</div>
<div class="ms-fm-meta">
<div class="ms-fm-name">{{ f.file_name }}</div>
<div class="ms-fm-source">{{ formatSize(f.file_size) }} · {{ formatDate(f.modified_time) }}</div>
</div>
</div>
</div>
</section>
<VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
<!-- Context Menu -->
<div v-if="ctxMenu.show" class="ms-ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px', display: 'block' }">
<div class="ms-ctx-header">
<div class="ms-ctx-filename">{{ ctxMenu.file?.file_name }}</div>
<div class="ms-ctx-info">{{ formatSize(ctxMenu.file?.file_size || 0) }} · {{ formatDate(ctxMenu.file?.modified_time || '') }}</div>
<div class="ms-ctx-info">狀態：<span :class="ctxMenu.file?.status === 'completed' ? 'ms-ctx-done' : ctxMenu.file?.status === 'registered' ? 'ms-ctx-pending' : 'ms-ctx-none'">{{ statusLabel(ctxMenu.file) }}</span></div>
<div v-if="ctxMenu.file?.isRegistered && ctxMenu.file?.file_uuid" class="ms-ctx-info">UUID：{{ ctxMenu.file.file_uuid?.slice(0, 12) }}...</div>
</div>
<hr class="ms-ctx-divider">
<button v-if="!ctxMenu.file?.isRegistered" class="ms-ctx-item" @click="ctxRegister(ctxMenu.file)">📥 註冊此檔案</button>
<button v-if="ctxMenu.file?.isRegistered && ctxMenu.file?.status !== 'completed'" class="ms-ctx-item" @click="ctxProcess(ctxMenu.file)">⚙️ 處理此檔案</button>
<button v-if="ctxMenu.file?.isRegistered && ctxMenu.file?.status === 'completed'" class="ms-ctx-item" @click="ctxProcess(ctxMenu.file)">⚙️ 重新處理</button>
<button v-if="ctxMenu.file?.isRegistered" class="ms-ctx-item ms-ctx-danger" @click="ctxUnregister(ctxMenu.file)">🗑️ 移除註冊</button>
<button v-if="isVideo(ctxMenu.file) && ctxMenu.file?.isRegistered" class="ms-ctx-item" @click="playVideo(ctxMenu.file); closeContextMenu()">▶ 播放影片</button>
<template v-if="ctxMenu.file?.isRegistered">
<hr class="ms-ctx-divider">
<div class="ms-ctx-procs">
<div class="ms-ctx-procs-title">處理器選擇</div>
<label class="ms-fm-check-label"><input type="checkbox" v-model="procAsr"> ASR</label>
<label class="ms-fm-check-label"><input type="checkbox" v-model="procYolo"> YOLO</label>
<label class="ms-fm-check-label"><input type="checkbox" v-model="procFace"> Face</label>
<label class="ms-fm-check-label"><input type="checkbox" v-model="procOcr"> OCR</label>
<label class="ms-fm-check-label"><input type="checkbox" v-model="procPose"> Pose</label>
<label class="ms-fm-check-label"><input type="checkbox" v-model="procCut"> CUT</label>
</div>
</template>
</div>
<VideoPlayer v-if="playing" simple :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { apiCall } from '@/api'
import { ensureFiles, filesCache, filesLoaded, thumbnailsCache, loadThumbnail, invalidateFiles } from '@/store'
import VideoPlayer from '../components/VideoPlayer.vue'
const files = ref<any[]>([])
const loading = ref(false)
const files = computed(() => filesCache.value)
const loading = computed(() => !filesLoaded.value)
const statusText = ref('')
const filterText = ref('')
const displayFilter = ref('all')
@@ -100,12 +134,14 @@ const selectedFiles = ref<string[]>([])
const playing = ref(false)
const currentVideo = ref({ fileUuid: '', startTime: 0, endTime: 0, title: '' })
const thumbnails = ref<Record<string, string>>({})
const thumbnailLoading = ref<Set<string>>(new Set())
const thumbnails = computed(() => thumbnailsCache.value)
const thumbKey = (uuid: string) => `${uuid}:30`
const sortBy = ref('time_desc')
const filterUnregistered = ref(false)
const filterRegistered = ref(true)
const filterPending = ref(false)
const filterCompleted = ref(false)
const onlyVideos = ref(false)
const onlyPhotos = ref(false)
const sizeMin = ref<number | null>(null)
@@ -130,7 +166,8 @@ const sortedFilteredFiles = computed(() => {
// Checkbox filters
if (filterUnregistered.value && !filterRegistered.value) result = result.filter((f: any) => !f.isRegistered)
else if (filterRegistered.value && !filterUnregistered.value) result = result.filter((f: any) => f.isRegistered)
// 兩者都不勾選或都勾選：顯示全部
if (filterPending.value) result = result.filter((f: any) => f.status === 'registered')
if (filterCompleted.value) result = result.filter((f: any) => f.status === 'completed')
if (onlyVideos.value) result = result.filter(isVideo)
if (onlyPhotos.value) result = result.filter(isPhoto)
@@ -166,25 +203,21 @@ const sortedFilteredFiles = computed(() => {
return result
})
onMounted(() => loadFiles())
onMounted(() => { loadFiles(); document.addEventListener('click', docClickClose) })
onUnmounted(() => { document.removeEventListener('click', docClickClose) })
function docClickClose(e: MouseEvent) {
if (e.target instanceof Element && e.target.closest('.ms-ctx-menu')) return
if (ctxMenu.value.show) ctxMenu.value.show = false
}
async function loadFiles() {
loading.value = true
statusText.value = 'Loading...'
try {
console.log('Calling get_files...')
files.value = await invoke('get_files', { args: { pageSize: 500 } })
console.log('Files loaded:', files.value.length); console.log('First file:', JSON.stringify(files.value[0]))
if (files.value.length > 0) {
console.log('First file:', files.value[0])
console.log('is_registered sample:', files.value.slice(0,5).map((f:any) => ({ name: f.file_name?.slice(0,20), is_registered: f.is_registered, type: typeof f.is_registered })))
}
statusText.value = `${files.value.length} files`
} catch (e: any) {
console.error('Failed to load files:', e)
statusText.value = 'Failed: ' + (e.message || e)
} finally {
loading.value = false
invalidateFiles()
await ensureFiles()
statusText.value = `${files.value.length} files`
for (const f of files.value.slice(0, 6)) {
if ((isPhoto(f) || isVideo(f)) && f.file_uuid) loadThumbnail(f.file_uuid)
}
}
@@ -210,16 +243,8 @@ function formatDate(date: string) {
return new Date(date).toISOString().slice(0, 10)
}
async function loadThumbnail(uuid: string) {
if (!uuid || thumbnails.value[uuid] || thumbnailLoading.value.has(uuid)) return
thumbnailLoading.value.add(uuid)
try {
thumbnails.value[uuid] = await invoke('get_thumbnail', { uuid, frame: 30 })
} catch (e: any) {
console.error('Thumbnail load failed:', e)
} finally {
thumbnailLoading.value.delete(uuid)
}
async function loadThumbnailLocal(uuid: string) {
loadThumbnail(uuid, 30)
}
function handleThumbError(e: Event) {
@@ -238,15 +263,137 @@ function playVideo(f: any) {
playing.value = true
}
function addToPeople() {
if (!selectedFiles.value.length) { alert('Please select files first') }
alert(`Register ${selectedFiles.value.length} file(s)`)
const registering = ref(false)
const processing = ref(false)
const unregistering = ref(false)
const actionMsg = ref('')
const procAsr = ref(true)
const procYolo = ref(true)
const procFace = ref(true)
const procOcr = ref(false)
const procPose = ref(false)
const procCut = ref(true)
const ctxMenu = ref<{ show: boolean; x: number; y: number; file: any }>({ show: false, x: 0, y: 0, file: null })
function selectedProcessors(): string[] {
const procs: string[] = []
if (procAsr.value) procs.push('asr')
if (procYolo.value) procs.push('yolo')
if (procFace.value) procs.push('face')
if (procOcr.value) procs.push('ocr')
if (procPose.value) procs.push('pose')
if (procCut.value) procs.push('cut')
return procs
}
function statusLabel(f: any): string {
if (!f) return ''
if (f.status === 'completed') return '已完成'
if (f.status === 'registered') return '已註冊・待處理'
if (f.status === 'processing') return '處理中'
if (f.isRegistered) return '已註冊'
return '未註冊'
}
function openContextMenu(e: MouseEvent, f: any) {
e.preventDefault()
e.stopPropagation()
ctxMenu.value = {
show: true,
x: Math.min(e.clientX, window.innerWidth - 280),
y: Math.min(e.clientY, window.innerHeight - 320),
file: f
}
}
function closeContextMenu() {
ctxMenu.value.show = false
}
async function ctxRegister(f: any) {
closeContextMenu()
if (registering.value) return
const procs = selectedProcessors()
if (!procs.length) { actionMsg.value = '請至少選擇一個處理器'; return }
registering.value = true
actionMsg.value = '註冊中...'
const filePath = f.file_path || f.relative_path || f.file_name
if (!filePath) { registering.value = false; actionMsg.value = '缺少檔案路徑'; return }
try {
const result: any = await apiCall('register_file', { filePath })
if (result.success) {
actionMsg.value = `註冊成功：${f.file_name}`
if (result.file_uuid) {
try {
const pResult: any = await apiCall('process_file', { fileUuid: result.file_uuid, processors: procs })
if (pResult.success) actionMsg.value += ' → 處理已觸發'
} catch (e: any) { console.error('[process]', e) }
}
} else {
actionMsg.value = `註冊失敗：${result.message}`
}
} catch (e: any) {
actionMsg.value = `註冊錯誤：${e}`
console.error('[register]', e)
}
registering.value = false
await loadFiles()
setTimeout(() => { actionMsg.value = '' }, 8000)
}
async function ctxProcess(f: any) {
closeContextMenu()
if (processing.value) return
if (!f.isRegistered) { actionMsg.value = '檔案尚未註冊'; return }
const procs = selectedProcessors()
if (!procs.length) { actionMsg.value = '請至少選擇一個處理器'; return }
processing.value = true
actionMsg.value = '處理中...'
try {
const result: any = await apiCall('process_file', { fileUuid: f.file_uuid, processors: procs })
if (result.success) {
actionMsg.value = `處理已觸發：${f.file_name}`
} else {
actionMsg.value = `處理失敗：${result.message}`
}
} catch (e: any) {
actionMsg.value = `處理錯誤：${e}`
console.error('[process]', e)
}
processing.value = false
await loadFiles()
setTimeout(() => { actionMsg.value = '' }, 8000)
}
async function ctxUnregister(f: any) {
closeContextMenu()
if (unregistering.value) return
if (!f.isRegistered) { actionMsg.value = '檔案尚未註冊'; return }
unregistering.value = true
actionMsg.value = '移除中...'
try {
const result: any = await apiCall('unregister_file', { fileUuid: f.file_uuid, deleteOutputFiles: true })
if (result.success) {
actionMsg.value = `移除成功：${f.file_name}`
} else {
actionMsg.value = `移除失敗：${result.message}`
}
} catch (e: any) {
actionMsg.value = `移除錯誤：${e}`
console.error('[unregister]', e)
}
unregistering.value = false
await loadFiles()
setTimeout(() => { actionMsg.value = '' }, 8000)
}
function resetFilters() {
sortBy.value = 'time_desc'
filterUnregistered.value = false
filterRegistered.value = false
filterPending.value = false
filterCompleted.value = false
onlyVideos.value = false
onlyPhotos.value = false
sizeMin.value = null
@@ -261,43 +408,53 @@ function resetFilters() {
<style scoped>
#ms-files-page { width: 100%; max-width: 1200px; margin: 0 auto; color: #202124; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans TC', sans-serif; position: relative; }
#ms-files-page * { box-sizing: border-box; }
.mp-panel { display: block; position: relative; overflow: visible; }
.mp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; position: relative; z-index: 2; }
.mp-toolbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mp-toolbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mp-btn { border: 1px solid #d8dce3; background: #fff; color: #202124; border-radius: 18px; font-size: 14px; padding: 10px 18px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.04); font-family: inherit; }
.mp-btn-primary { font-weight: 600; background: #1967d2; color: #fff; border-color: #1967d2; }
.mp-btn-icon { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.mp-refresh-icon { font-size: 22px; line-height: 1; font-weight: 500; transform: translateY(-1px); }
.mp-filter-btn { width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #d8dce3; background: #fff; cursor: pointer; font-size: 16px; }
.mp-radio-row, .mp-check-row { font-size: 13px; color: #5f6368; display: flex; align-items: center; gap: 6px; cursor: pointer; min-height: 24px; margin-bottom: 4px; }
.mp-search-wrap { width: 240px; }
.mp-search { width: 100%; height: 42px; border: 1px solid #e1e5ea; border-radius: 14px; padding: 0 14px; font-size: 14px; background: #fff; outline: none; font-family: inherit; }
.mp-status { font-size: 13px; color: #7a7f87; margin: 4px 0 14px; }
.mp-status.show { display: block; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mp-file-card { border-radius: 14px; cursor: pointer; position: relative; }
.mp-thumb-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #eef2f7; aspect-ratio: 4 / 3; border: 1px solid #e6ebf1; box-shadow: 0 0 0 2px #d9dde3 inset; }
.lt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-thumb-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #9aa0a6; animation: spin 1s linear infinite; }
.ms-fm-panel { display: block; position: relative; overflow: visible; }
.ms-fm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; position: relative; z-index: 2; }
.ms-fm-toolbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ms-fm-processor-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin-bottom: 12px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e8eaed; flex-wrap: wrap; }
.ms-fm-processor-label { font-size: 12px; color: #5f6368; font-weight: 600; margin-right: 2px; }
.ms-fm-toolbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ms-fm-radio-label { font-size: 13px; color: #5f6368; display: flex; align-items: center; gap: 6px; cursor: pointer; min-height: 24px; margin-bottom: 4px; }
.ms-fm-processor-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 8px; border-left: 1.5px solid #e8eaed; }
.ms-fm-check-label { font-size: 12px; color: #5f6368; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ms-fm-check-label input { margin: 0; accent-color: #202124; }
.ms-fm-status-badge { position: absolute; bottom: 4px; right: 4px; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 600; letter-spacing: 0.3px; }
.ms-fm-search-wrap { width: 240px; }
.ms-fm-search { width: 100%; height: 42px; border: 1px solid #e1e5ea; border-radius: 14px; padding: 0 14px; font-size: 14px; background: #fff; outline: none; font-family: inherit; }
.ms-fm-status { font-size: 13px; color: #7a7f87; margin: 4px 0 14px; }
.ms-fm-action-msg { margin-left: 12px; color: #1e8e3e; font-weight: 600; }
.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }
.ms-fm-btn-danger:hover:not(:disabled) { background: #c5221f; }
.ms-ctx-menu { position: fixed !important; z-index: 99999 !important; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 220px; max-width: 320px; font-size: 13px; color: #222; }
.ms-ctx-header { padding: 8px 10px 4px; }
.ms-ctx-filename { font-weight: 600; font-size: 13px; color: #202124; word-break: break-all; }
.ms-ctx-info { font-size: 11px; color: #7a7f87; margin-top: 2px; }
.ms-ctx-done { color: #1e8e3e; font-weight: 600; }
.ms-ctx-pending { color: #e37400; font-weight: 600; }
.ms-ctx-none { color: #9aa0a6; }
.ms-ctx-divider { height: 1px; background: #eee; margin: 4px 8px; border: none; }
.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 7px 12px; cursor: pointer; font-size: 13px; color: #3c4043; border: none; background: none; border-radius: 6px; font-weight: 500; }
.ms-ctx-item:hover { background: #f1f3f4; }
.ms-ctx-danger { color: #d93025 !important; }
.ms-ctx-danger:hover { background: #fce8e6 !important; }
.ms-ctx-procs { padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ms-ctx-procs-title { width: 100%; font-size: 11px; color: #7a7f87; font-weight: 600; margin-bottom: 2px; }
.ms-fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.ms-fm-card { border-radius: 14px; cursor: pointer; position: relative; }
.ms-fm-thumb-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #eef2f7; aspect-ratio: 4 / 3; border: 1px solid #e6ebf1; box-shadow: 0 0 0 2px #d9dde3 inset; }
.ms-fm-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-fm-thumb-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #9aa0a6; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mp-doc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #f7f9fc, #eef2f7); color: #6b7280; text-align: center; padding: 14px; }
.mp-doc-icon { font-size: 38px; line-height: 1; }
.mp-doc-ext { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #7a818c; text-transform: uppercase; }
.mp-badge-type { position: absolute; top: 8px; left: 8px; font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 999px; background: rgba(17,24,39,.75); color: #fff; letter-spacing: .3px; }
.mp-complete-mark { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(17,24,39,.78); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: 9; }
.mp-file-card.is-selected .mp-thumb-wrap { border-color: #7db9ff !important; background: #eaf4ff !important; box-shadow: 0 0 0 3px rgba(125,185,255,.55) inset !important; }
.mp-file-card.is-selected .mp-doc-thumb { background: linear-gradient(180deg, #eef7ff, #dceeff) !important; }
.mp-meta { padding-top: 6px; }
.mp-source { font-size: 11px; color: #8a919c; margin-bottom: 2px; }
.mp-name { font-size: 12px; color: #42474f; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,.58); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 8; }
.mp-filter-pop { position: absolute; top: 64px; right: 0; width: 250px; background: #fff; border: 1px solid #eceff3; border-radius: 24px; box-shadow: 0 16px 36px rgba(0,0,0,.08); padding: 18px 18px 16px; z-index: 999; display: none; max-height: 560px; overflow-y: auto; }
.mp-filter-pop.show { display: block; }
.mp-filter-title { font-size: 15px; font-weight: 700; color: #202124; margin: 10px 0 10px; }
.mp-filter-title:first-child { margin-top: 0; }
.mp-range-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.mp-filter-number { width: 100%; height: 32px; border: 1px solid #e1e5ea; border-radius: 10px; padding: 0 9px; font-size: 12px; color: #42474f; background: #fff; outline: none; font-family: inherit; }
.mp-filter-reset { width: 100%; height: 34px; margin-top: 8px; border: 1px solid #d8dce3; background: #fff; color: #5f6368; border-radius: 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.mp-filter-reset:hover { background: #f6f7f9; }
.ms-fm-doc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #f7f9fc, #eef2f7); color: #6b7280; text-align: center; padding: 14px; }
.ms-fm-doc-icon { font-size: 38px; line-height: 1; }
.ms-fm-doc-ext { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #7a818c; text-transform: uppercase; }
.ms-fm-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 999px; background: rgba(17,24,39,.75); color: #fff; letter-spacing: .3px; }
.ms-fm-check { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(17,24,39,.78); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: 9; }
.ms-fm-card.is-selected .ms-fm-thumb-wrap { border-color: #7db9ff !important; background: #eaf4ff !important; box-shadow: 0 0 0 3px rgba(125,185,255,.55) inset !important; }
.ms-fm-card.is-selected .ms-fm-doc-thumb { background: linear-gradient(180deg, #eef7ff, #dceeff) !important; }
.ms-fm-meta { padding-top: 6px; }
.ms-fm-source { font-size: 11px; color: #8a919c; margin-bottom: 2px; }
.ms-fm-name { font-size: 12px; color: #42474f; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-fm-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,.58); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 8; }
.ms-fm-edit-input { width: 100%; height: 32px; border: 1px solid #e1e5ea; border-radius: 10px; padding: 0 9px; font-size: 12px; color: #42474f; background: #fff; outline: none; font-family: inherit; }
</style>

725
src/views/PeopleView.vue
View File

@@ -1,11 +1,21 @@
<template>
<div class="people-view">
<div class="ms-ppl-toolbar">
<h1 class="ms-ppl-section-title">People</h1>
<div class="ms-ppl-search-wrap">
<span class="ms-ppl-search-icon">🔍</span>
<input v-model="searchQuery" class="ms-ppl-search-input" placeholder="Search people..." @input="onSearch" />
</div>
<button class="ms-fm-btn ms-ppl-star-toggle-btn" @click="starFilter = !starFilter">
<span class="ms-ppl-star-icon" :class="{ starred: starFilter }">★</span>
<span>{{ starFilter ? '查看所有人物' : '查看重要人物' }}</span>
</button>
<button class="ms-fm-icon-btn" @click="refresh" title="重新整理" style="margin-left:8px;">⟳</button>
<div style="flex:1;"></div>
<button class="ms-ppl-section-toggle-btn" :class="{ active: showPending }" @click="showPending = !showPending">
待定人物 <span class="ms-ppl-toggle-dot" :class="{ on: showPending }"></span>
</button>
<button class="ms-ppl-section-toggle-btn" :class="{ active: showSkipped }" @click="showSkipped = !showSkipped">
已略過 <span class="ms-ppl-toggle-dot" :class="{ on: showSkipped }"></span>
</button>
<button class="ms-ppl-section-toggle-btn" :class="{ active: showUface }" @click="showUface = !showUface">
待定人臉 <span class="ms-ppl-toggle-dot" :class="{ on: showUface }"></span>
</button>
</div>
<div v-if="loading" class="loading-state">
@@ -13,234 +23,422 @@
<p>Loading...</p>
</div>
<div v-else-if="confirmedPeople.length === 0 && pendingPeople.length === 0 && skippedPeople.length === 0" class="empty">
No people found. people.value.length = {{ people.length }}
No people found.
</div>
<template v-else>
<!-- 已知人物 -->
<div v-if="confirmedPeople.length" class="ms-ppl-section">
<div class="ms-ppl-section-toolbar">
<div class="ms-ppl-section-title">已知人物：</div>
<div class="ms-ppl-section-title">已知人物： <span class="ms-ppl-section-count">({{ confirmedPeople.length }})</span></div>
<div style="flex:1;"></div>
<div class="ms-ppl-search-wrap">
<input v-model="knownSearch" class="ms-ppl-search-input" placeholder="搜尋已知人物">
</div>
<div style="position:relative;">
<button class="ms-fm-icon-btn" @click.prevent="showKnownSort = !showKnownSort; showPendingSort = false" title="排序與記錄">☰</button>
<div v-if="showKnownSort" class="ms-fm-sort-panel" @click.stop>
<div class="ms-fm-sort-section" v-if="lastCtxUuid">
<div class="ms-fm-sort-title">操作記錄 · {{ lastName }}</div>
<div class="ms-undo-row" style="margin-bottom:6px;">
<button class="ms-undo-btn" :disabled="!canUndoPerson" @click="doUndo" title="復原 (Ctrl+Z)">↩ 全部復原</button>
<button class="ms-undo-btn" :disabled="!canRedoPerson" @click="doRedo" title="重做 (Ctrl+Shift+Z)">↪ 全部重做</button>
<button class="ms-undo-btn ms-undo-btn-danger" @click="deleteFromMenu" title="刪除此人物">🗑</button>
</div>
<div v-if="actionHistory.length" class="ms-history-list">
<div v-for="a in actionHistory.slice(0, 8)" :key="a.timestamp + a.type" class="ms-history-item" :class="{ 'ms-history-item-undone': a.canRedo }">
<span class="ms-history-label">{{ a.label }}</span>
<span class="ms-history-time">{{ formatHistoryTime(a.timestamp) }}</span>
<span class="ms-history-actions">
<button v-if="a.canUndo && (a.type === 'patch' || a.type === 'bind')" class="ms-history-act-btn" @click="doUndoAction(a.type as 'patch' | 'bind')" title="復原此操作">↩</button>
<button v-if="a.canRedo && (a.type === 'patch' || a.type === 'bind')" class="ms-history-act-btn ms-history-act-redo" @click="doRedoAction(a.type as 'patch' | 'bind')" title="重做此操作">↪</button>
</span>
</div>
</div>
<div v-else class="ms-history-empty">尚無操作記錄</div>
</div>
<div class="ms-fm-sort-section">
<div class="ms-fm-sort-title">排序方式</div>
<label><input type="radio" v-model="knownSort" value="recent"> 最近瀏覽</label>
<label><input type="radio" v-model="knownSort" value="name_az"> 依檔名・由 A 到 Z</label>
<label><input type="radio" v-model="knownSort" value="name_za"> 依檔名・由 Z 到 A</label>
<label><input type="radio" v-model="knownSort" value="time_desc"> 依時間・由近到遠</label>
<label><input type="radio" v-model="knownSort" value="time_asc"> 依時間・由遠到近</label>
</div>
</div>
</div>
</div>
<div class="ms-ppl-face-grid">
<div v-for="p in confirmedPeople" :key="p.identityUuid" class="ms-ppl-face-card" @click="selectPerson(p)" @contextmenu.prevent="showContextMenu($event, p)">
<div v-for="p in confirmedPeople" :key="p.identity_uuid" class="ms-ppl-face-card" :class="{ starred: p.starred }" @click="selectPerson(p)" @contextmenu.prevent="showContextMenu($event, p)" v-observe="() => enqueueProfileLoad(p.identity_uuid)">
<div class="ms-ppl-face-img-wrap">
<img v-if="profiles[p.identityUuid]" :src="profiles[p.identityUuid]" alt="" @vue:mounted="loadProfile(p.identityUuid)">
<svg v-else class="ms-silhouette" @vue:mounted="loadProfile(p.identityUuid)" viewBox="0 0 120 120" fill="none">
<img v-if="profiles[p.identity_uuid]" :src="profiles[p.identity_uuid]" alt="">
<svg v-else class="ms-silhouette" viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="45" r="25" fill="#d1d5db"/>
<ellipse cx="60" cy="105" rx="40" ry="25" fill="#d1d5db"/>
</svg>
<span class="ms-ppl-card-star" :class="{ starred: p.starred }">⭐</span>
<span class="ms-ppl-card-star">⭐</span>
</div>
<span class="ms-ppl-face-name">{{ p.name }}</span>
</div>
</div>
</div>
<hr class="ms-ppl-hr">
<hr v-if="confirmedPeople.length" class="ms-ppl-hr">
<!-- 待定人物 -->
<div v-if="pendingPeople.length" class="ms-ppl-section">
<div v-if="showPending && pendingPeople.length" class="ms-ppl-section">
<div class="ms-ppl-section-toolbar">
<div class="ms-ppl-section-title">待定人物：</div>
<div class="ms-ppl-section-title">待定人物： <span class="ms-ppl-section-count">({{ pendingPeople.length }})</span></div>
<div style="flex:1;"></div>
<div class="ms-ppl-search-wrap">
<input v-model="pendingSearch" class="ms-ppl-search-input" placeholder="搜尋待定人物">
</div>
<div style="position:relative;">
<button class="ms-fm-icon-btn" @click.prevent="showPendingSort = !showPendingSort; showKnownSort = false" title="排序與記錄">☰</button>
<div v-if="showPendingSort" class="ms-fm-sort-panel" @click.stop>
<div class="ms-fm-sort-section" v-if="lastCtxUuid">
<div class="ms-fm-sort-title">操作記錄 · {{ lastName }}</div>
<div class="ms-undo-row" style="margin-bottom:6px;">
<button class="ms-undo-btn" :disabled="!canUndoPerson" @click="doUndo" title="復原 (Ctrl+Z)">↩ 全部復原</button>
<button class="ms-undo-btn" :disabled="!canRedoPerson" @click="doRedo" title="重做 (Ctrl+Shift+Z)">↪ 全部重做</button>
<button class="ms-undo-btn ms-undo-btn-danger" @click="deleteFromMenu" title="刪除此人物">🗑</button>
</div>
<div v-if="actionHistory.length" class="ms-history-list">
<div v-for="a in actionHistory.slice(0, 8)" :key="a.timestamp + a.type" class="ms-history-item" :class="{ 'ms-history-item-undone': a.canRedo }">
<span class="ms-history-label">{{ a.label }}</span>
<span class="ms-history-time">{{ formatHistoryTime(a.timestamp) }}</span>
<span class="ms-history-actions">
<button v-if="a.canUndo && (a.type === 'patch' || a.type === 'bind')" class="ms-history-act-btn" @click="doUndoAction(a.type as 'patch' | 'bind')" title="復原此操作">↩</button>
<button v-if="a.canRedo && (a.type === 'patch' || a.type === 'bind')" class="ms-history-act-btn ms-history-act-redo" @click="doRedoAction(a.type as 'patch' | 'bind')" title="重做此操作">↪</button>
</span>
</div>
</div>
<div v-else class="ms-history-empty">尚無操作記錄</div>
</div>
<div class="ms-fm-sort-section">
<div class="ms-fm-sort-title">排序方式</div>
<label><input type="radio" v-model="pendingSort" value="recent"> 最近瀏覽</label>
<label><input type="radio" v-model="pendingSort" value="name_az"> 依檔名・由 A 到 Z</label>
<label><input type="radio" v-model="pendingSort" value="name_za"> 依檔名・由 Z 到 A</label>
<label><input type="radio" v-model="pendingSort" value="time_desc"> 依時間・由近到遠</label>
<label><input type="radio" v-model="pendingSort" value="time_asc"> 依時間・由遠到近</label>
</div>
</div>
</div>
</div>
<div class="ms-ppl-face-grid">
<div v-for="p in pendingPeople" :key="p.identityUuid" class="ms-ppl-face-card" @click="selectPerson(p)" @contextmenu.prevent="showContextMenu($event, p)">
<div v-for="p in pendingPeople" :key="p.identity_uuid" class="ms-ppl-face-card" :class="{ starred: p.starred }" @click="selectPerson(p)" @contextmenu.prevent="showContextMenu($event, p)" v-observe="() => enqueueProfileLoad(p.identity_uuid)">
<div class="ms-ppl-face-img-wrap">
<img v-if="profiles[p.identityUuid]" :src="profiles[p.identityUuid]" alt="" @vue:mounted="loadProfile(p.identityUuid)">
<svg v-else class="ms-silhouette" @vue:mounted="loadProfile(p.identityUuid)" viewBox="0 0 120 120" fill="none">
<img v-if="profiles[p.identity_uuid]" :src="profiles[p.identity_uuid]" alt="">
<svg v-else class="ms-silhouette" viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="45" r="25" fill="#d1d5db"/>
<ellipse cx="60" cy="105" rx="40" ry="25" fill="#d1d5db"/>
</svg>
<span class="ms-ppl-card-star" :class="{ starred: p.starred }">⭐</span>
<span class="ms-ppl-card-star">⭐</span>
</div>
<span class="ms-ppl-face-name">{{ p.name }}</span>
</div>
</div>
</div>
<hr class="ms-ppl-hr">
<hr v-if="showPending && pendingPeople.length" class="ms-ppl-hr">
<!-- 已略過 -->
<div v-if="skippedPeople.length" class="ms-ppl-section">
<div v-if="showSkipped && skippedPeople.length" class="ms-ppl-section">
<div class="ms-ppl-section-toolbar">
<div class="ms-ppl-section-title skipped-title">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="flex-shrink:0;">
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"></circle>
<path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
</svg>
已略過：
已略過： <span class="ms-ppl-section-count">({{ skippedPeople.length }})</span>
</div>
</div>
<div class="ms-ppl-face-grid">
<div v-for="p in skippedPeople" :key="p.identityUuid" class="ms-ppl-face-card skipped-card" @click="selectPerson(p)" @contextmenu.prevent="showContextMenu($event, p)">
<div v-for="p in skippedPeople" :key="p.identity_uuid" class="ms-ppl-face-card ms-ppl-card-skipped" :class="{ starred: p.starred }" @click="selectPerson(p)" @contextmenu.prevent="showContextMenu($event, p)" v-observe="() => enqueueProfileLoad(p.identity_uuid)">
<div class="ms-ppl-face-img-wrap">
<img v-if="profiles[p.identityUuid]" :src="profiles[p.identityUuid]" alt="" @vue:mounted="loadProfile(p.identityUuid)">
<svg v-else class="ms-silhouette" @vue:mounted="loadProfile(p.identityUuid)" viewBox="0 0 120 120" fill="none">
<img v-if="profiles[p.identity_uuid]" :src="profiles[p.identity_uuid]" alt="">
<svg v-else class="ms-silhouette" viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="45" r="25" fill="#d1d5db"/>
<ellipse cx="60" cy="105" rx="40" ry="25" fill="#d1d5db"/>
</svg>
<span class="ms-ppl-card-star" :class="{ starred: p.starred }">⭐</span>
<span class="ms-ppl-card-star">⭐</span>
</div>
<span class="ms-ppl-face-name">{{ p.name }}</span>
</div>
</div>
</div>
<hr class="ms-ppl-hr">
<hr v-if="(showSkipped && skippedPeople.length) || (showPending && pendingPeople.length) || confirmedPeople.length" class="ms-ppl-hr">
<!-- 待定人臉 -->
<div v-if="faceCandidates.length" class="ms-ppl-section">
<div v-if="showUface && faceCandidates.length" class="ms-ppl-section">
<div class="ms-ppl-section-toolbar">
<div class="ms-ppl-section-title">待定人臉：</div>
</div>
<div class="ms-ppl-face-grid ms-uface-grid">
<div v-for="c in faceCandidates.slice(0, 50)" :key="c.id" class="ms-ppl-face-card" @click="showAssignModal(c)">
<div v-for="c in faceCandidates.slice(0, 50)" :key="c.id" class="ms-ppl-face-card" @click="openAssignModal(c)" @contextmenu.prevent="showFaceCtxMenu($event, c)" v-observe="() => loadCandidateThumb(c)">
<div class="ms-ppl-face-img-wrap">
<img v-if="candidateThumbs[c.file_uuid]" :src="candidateThumbs[c.file_uuid]" alt="" @vue:mounted="loadCandidateThumb(c.file_uuid)">
<div v-else class="face-placeholder" @vue:mounted="loadCandidateThumb(c.file_uuid)">{{ Math.round(c.confidence * 100) }}%</div>
<img v-if="candidateThumbs[c.id]" :src="candidateThumbs[c.id]" alt="">
<div v-else class="face-placeholder">{{ Math.round(c.confidence * 100) }}%</div>
</div>
<span class="ms-ppl-face-name">{{ c.file_uuid.slice(0, 8) }}... #{{ c.frame_number }}</span>
<span class="ms-ppl-face-name">{{ (c.file_uuid || '').slice(0, 8) }}... #{{ c.frame_number }}</span>
</div>
</div>
</div>
</template>
<!-- Person context menu -->
<div v-if="ctxMenu.show" class="ms-ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px', display: 'block' }">
<button class="ms-ctx-item" @click="ctxAction('star')">{{ ctxMenu.person?.starred ? '☆ 取消重要人物' : '★ 標為重要人物' }}</button>
<hr class="ms-ctx-menu-divider">
<button class="ms-ctx-item" @click="ctxAction('confirm')" v-if="ctxMenu.person?.status !== 'confirmed'">✓ 確認人物</button>
<button class="ms-ctx-item" @click="ctxAction('pending')" v-if="ctxMenu.person?.status !== 'pending'">待定</button>
<button class="ms-ctx-item" @click="ctxAction('rename')">✎ 編輯名稱</button>
<button class="ms-ctx-item" @click="ctxAction('merge')">⇄ 已有此人物</button>
<button class="ms-ctx-item ms-ctx-danger" @click="ctxAction('skip')">✕ 略過此人物</button>
<hr class="ms-ctx-menu-divider" v-if="ctxMenu.person">
<button class="ms-ctx-item ms-ctx-undo" :disabled="!canUndoPerson" @click="ctxAction('undo')">↩ 復原<template v-if="undoCounts[ctxMenu.person?.identity_uuid]?.patchUndo || undoCounts[ctxMenu.person?.identity_uuid]?.bindUndo"> ({{ (undoCounts[ctxMenu.person?.identity_uuid]?.patchUndo || 0) + (undoCounts[ctxMenu.person?.identity_uuid]?.bindUndo || 0) }})</template></button>
<button class="ms-ctx-item ms-ctx-redo" :disabled="!canRedoPerson" @click="ctxAction('redo')">↪ 重做<template v-if="undoCounts[ctxMenu.person?.identity_uuid]?.patchRedo || undoCounts[ctxMenu.person?.identity_uuid]?.bindRedo"> ({{ (undoCounts[ctxMenu.person?.identity_uuid]?.patchRedo || 0) + (undoCounts[ctxMenu.person?.identity_uuid]?.bindRedo || 0) }})</template></button>
<template v-if="ctxHistory.length">
<hr class="ms-ctx-menu-divider">
<div v-for="a in ctxHistory.slice(0, 5)" :key="a.timestamp + a.type" class="ms-ctx-history-item">
<span class="ms-ctx-history-label">{{ a.label }}</span>
<span class="ms-ctx-history-time">{{ formatHistoryTime(a.timestamp) }}</span>
<button v-if="a.canUndo && (a.type === 'patch' || a.type === 'bind')" class="ms-ctx-item ms-ctx-undo ms-ctx-history-btn" @click="ctxAction('undoAction', a.type)">↩</button>
<button v-if="a.canRedo && (a.type === 'patch' || a.type === 'bind')" class="ms-ctx-item ms-ctx-redo ms-ctx-history-btn" @click="ctxAction('redoAction', a.type)">↪</button>
</div>
</template>
<hr class="ms-ctx-menu-divider">
<button class="ms-ctx-item ms-ctx-danger" @click="ctxAction('delete')">🗑 刪除此人物</button>
</div>
<VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
<!-- Face candidate context menu -->
<div v-if="faceCtxMenu.show" class="ms-ctx-menu" :style="{ left: faceCtxMenu.x + 'px', top: faceCtxMenu.y + 'px', display: 'block' }">
<button class="ms-ctx-item" @click="faceCtxAction('assign')">⇄ 指派給現有人物</button>
<button class="ms-ctx-item ms-ctx-danger" @click="faceCtxAction('skip')">✕ 略過此人臉</button>
</div>
<!-- Assign modal -->
<div v-if="assignModal.show" class="ms-modal-overlay show" @click.self="assignModal.show = false">
<div class="ms-modal ms-modal-assign">
<button class="ms-fm-icon-btn close-btn" @click="assignModal.show = false">×</button>
<div class="ms-assign-header">
<div class="ms-assign-trigger-face">
<img v-if="candidateThumbs[assignModal.candidate?.id]" :src="candidateThumbs[assignModal.candidate?.id]" alt="">
<div v-else class="face-placeholder">{{ Math.round(assignModal.candidate?.confidence * 100 || 0) }}%</div>
</div>
<div class="ms-assign-info">
<div class="ms-assign-title">指派給現有人物</div>
<div class="ms-assign-sub">{{ assignModal.candidate?.file_uuid?.slice(0,8) }}... #{{ assignModal.candidate?.frame_number }}</div>
</div>
</div>
<div class="ms-assign-search-wrap">
<span class="ms-assign-search-icon">🔍</span>
<input v-model="assignSearchQuery" class="ms-assign-search-input" placeholder="搜尋人物名稱...">
</div>
<div class="ms-assign-grid">
<div v-for="p in assignSearchResults" :key="p.identity_uuid" class="ms-assign-face-card" :class="{ selected: assignSelected?.identity_uuid === p.identity_uuid }" @click="assignSelected = p">
<div class="ms-assign-face-img">
<img v-if="profiles[p.identity_uuid]" :src="profiles[p.identity_uuid]" alt="">
<svg v-else class="ms-silhouette" viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="45" r="25" fill="#d1d5db"/>
<ellipse cx="60" cy="105" rx="40" ry="25" fill="#d1d5db"/>
</svg>
</div>
<span class="ms-assign-face-name">{{ p.name }}</span>
</div>
<div v-if="!assignSearchResults.length && assignSearchQuery" class="ms-assign-empty">沒有找到符合的人物</div>
</div>
<div class="ms-assign-footer">
<button class="ms-fm-btn" @click="assignModal.show = false">取消</button>
<button class="ms-fm-btn ms-fm-btn-primary" @click="confirmAssign" :disabled="!assignSelected">確認指派</button>
</div>
</div>
</div>
<VideoPlayer v-if="playing" simple :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { invoke } from '@tauri-apps/api/core'
console.log('PeopleView script loaded')
import { apiCall } from '@/api'
import { ensurePeople, peopleCache, peopleLoaded, ensureFaceCandidates, faceCandidatesCache, faceCandidatesLoaded, profilesCache, loadProfile, faceThumbsCache, loadFaceThumb, invalidatePeople } from '@/store'
import { useUndoRedo } from '@/composables/useUndoRedo'
const router = useRouter()
import VideoPlayer from '../components/VideoPlayer.vue'
const people = ref<any[]>([])
const loading = ref(true)
const searchQuery = ref('')
const searchResults = ref<any[]>([])
const isSearching = ref(false)
const { counts: undoCounts, refreshCounts: refreshUndoCounts, undo, redo, bindUndo, bindRedo, canUndo, canRedo, refreshActionHistory, recentActions: actionHistory, undoAction, redoAction } = useUndoRedo()
const people = peopleCache
const loading = computed(() => !peopleLoaded.value)
const selected = ref<any>(null)
const faces = ref<any[]>([])
const traces = ref<any[]>([])
const playing = ref(false)
const currentVideo = ref({ fileUuid: '', startTime: 0, endTime: 0, title: '' })
const profiles = ref<Record<string, string>>({})
const profiles = profilesCache
const showCandidates = ref(false)
const showMerge = ref(false)
const mergeTarget = ref('')
const candidates = ref<any[]>([])
const candidateThumbs = ref<Record<string, string>>({})
const faceCandidates = ref<any[]>([])
const candidateThumbs = faceThumbsCache
const faceCandidates = faceCandidatesCache
const ctxMenu = ref({ show: false, x: 0, y: 0, person: null as any })
const faceCtxMenu = ref({ show: false, x: 0, y: 0, candidate: null as any })
const assignModal = ref({ show: false, candidate: null as any })
const assignSearchQuery = ref('')
const assignSelected = ref<any>(null)
// Section visibility toggles
const showPending = ref(true)
const showSkipped = ref(false)
const showUface = ref(true)
const starFilter = ref(false)
// Per-section search
const knownSearch = ref('')
const pendingSearch = ref('')
// Per-section sort
const knownSort = ref('recent')
const pendingSort = ref('name_az')
const showKnownSort = ref(false)
const showPendingSort = ref(false)
const lastCtxUuid = ref('')
const lastName = ref('')
const canUndoPerson = computed(() => canUndo(lastCtxUuid.value))
const canRedoPerson = computed(() => canRedo(lastCtxUuid.value))
const ctxHistory = computed(() => actionHistory.filter((a: any) => a.uuid === lastCtxUuid.value))
async function doUndoAction(type: 'patch' | 'bind') {
if (!lastCtxUuid.value) return
try {
await undoAction(lastCtxUuid.value, type)
} catch (e) { console.error('Undo action failed:', e) }
}
async function doRedoAction(type: 'patch' | 'bind') {
if (!lastCtxUuid.value) return
try {
await redoAction(lastCtxUuid.value, type)
} catch (e) { console.error('Redo action failed:', e) }
}
async function doUndo() {
if (!lastCtxUuid.value || !canUndoPerson.value) return
try {
await undo(lastCtxUuid.value)
} catch (e) { console.error('Undo failed:', e) }
}
async function doRedo() {
if (!lastCtxUuid.value || !canRedoPerson.value) return
try {
await redo(lastCtxUuid.value)
} catch (e) { console.error('Redo failed:', e) }
}
function sortPeople(list: any[], sortKey: string): any[] {
if (sortKey === 'name_az') return [...list].sort((a, b) => a.name.localeCompare(b.name))
if (sortKey === 'name_za') return [...list].sort((a, b) => b.name.localeCompare(a.name))
return list
}
const confirmedPeople = computed(() => {
const base = isSearching.value && searchResults.value.length ? searchResults.value : people.value
const filtered = searchQuery.value ? base.filter((p: any) => p.name.toLowerCase().includes(searchQuery.value.toLowerCase())) : base
return filtered.filter((p: any) => p.status === 'confirmed')
let base = people.value.filter((p: any) => p.status === 'confirmed')
if (starFilter.value) base = base.filter((p: any) => p.starred)
if (knownSearch.value) base = base.filter((p: any) => p.name.toLowerCase().includes(knownSearch.value.toLowerCase()))
return sortPeople(base, knownSort.value)
})
const pendingPeople = computed(() => {
const base = isSearching.value && searchResults.value.length ? searchResults.value : people.value
const filtered = searchQuery.value ? base.filter((p: any) => p.name.toLowerCase().includes(searchQuery.value.toLowerCase())) : base
return filtered.filter((p: any) => p.status === 'pending')
let base = people.value.filter((p: any) => p.status === 'pending')
if (starFilter.value) base = base.filter((p: any) => p.starred)
if (pendingSearch.value) base = base.filter((p: any) => p.name.toLowerCase().includes(pendingSearch.value.toLowerCase()))
return sortPeople(base, pendingSort.value)
})
const skippedPeople = computed(() => {
const base = isSearching.value && searchResults.value.length ? searchResults.value : people.value
const filtered = searchQuery.value ? base.filter((p: any) => p.name.toLowerCase().includes(searchQuery.value.toLowerCase())) : base
return filtered.filter((p: any) => p.status === 'skipped')
let base = people.value.filter((p: any) => p.status === 'skipped')
if (starFilter.value) base = base.filter((p: any) => p.starred)
return base
})
onMounted(async () => {
// Wait for Tauri to be ready
let tauri = (window as any).__TAURI_INTERNALS__ || (window as any).__TAURI__
let retries = 0
while (!tauri && retries < 20) {
await new Promise(r => setTimeout(r, 100))
tauri = (window as any).__TAURI_INTERNALS__ || (window as any).__TAURI__
retries++
const assignSearchResults = computed(() => {
let base = people.value.filter((p: any) => p.status === 'confirmed' || p.status === 'pending')
if (assignSearchQuery.value) {
base = base.filter((p: any) => p.name.toLowerCase().includes(assignSearchQuery.value.toLowerCase()))
}
if (!tauri) {
console.error('Tauri not available after waiting')
loading.value = false
return
}
try {
console.log('PeopleView: Tauri available, calling getPeople...')
const result = await invoke('get_people', { page: 1, perPage: 1000 })
console.log('PeopleView: getPeople raw result type:', typeof result)
console.log('PeopleView: getPeople raw result:', result)
console.log('PeopleView: isArray?', Array.isArray(result))
people.value = Array.isArray(result) ? result : []
console.log('PeopleView: people.value.length:', people.value.length)
if (people.value.length > 0) {
console.log('PeopleView: first person:', people.value[0])
return base.slice(0, 30)
})
async function refresh() {
ensurePeople().then(() => {
for (const p of people.value.slice(0, 30)) {
if (p.identity_uuid) loadProfile(p.identity_uuid)
}
} catch (e: any) {
console.error('Failed to load people:', e)
console.error('Error message:', e.message)
console.error('Error stack:', e.stack)
} finally {
loading.value = false
}
try {
const fc: any = await invoke('get_face_candidates', { page: 1, perPage: 100 })
faceCandidates.value = Array.isArray(fc) ? fc : []
} catch (e) {
console.error('Failed to load face candidates:', e)
}
})
ensureFaceCandidates().then(() => {
for (const c of faceCandidates.value.slice(0, 20)) {
if (c.file_uuid) loadFaceThumb(String(c.id), c.file_uuid, c.frame_number || 0, c.bbox)
}
})
}
onMounted(async () => {
await refresh()
document.addEventListener('click', closeCtxMenu)
document.addEventListener('click', closeFaceCtxMenu)
document.addEventListener('click', closeSortPanels)
document.addEventListener('keydown', handleKeydown)
})
onUnmounted(() => {
document.removeEventListener('click', closeCtxMenu)
document.removeEventListener('click', closeFaceCtxMenu)
document.removeEventListener('click', closeSortPanels)
document.removeEventListener('keydown', handleKeydown)
})
let searchTimer: any
function onSearch() {
clearTimeout(searchTimer)
searchTimer = setTimeout(async () => {
if (!searchQuery.value.trim()) { isSearching.value = false; return }
try {
const results: any = await invoke('search_identities', { query: searchQuery.value, limit: 50 })
searchResults.value = Array.isArray(results) ? results : []
isSearching.value = true
} catch (e) { console.error('Search failed:', e) }
}, 300)
function closeSortPanels(e?: Event) {
const target = e?.target as HTMLElement | null
if (target?.closest('.ms-fm-icon-btn')) return
if (target?.closest('.ms-fm-sort-panel')) return
showKnownSort.value = false
showPendingSort.value = false
}
async function loadProfile(uuid: string) {
if (profiles.value[uuid]) return
try {
const result: string = await invoke('get_identity_profile', { uuid })
console.log('Profile loaded for:', uuid, result ? 'success' : 'empty')
profiles.value[uuid] = result
} catch (e) {
console.error('Profile load failed for:', uuid, e)
function handleKeydown(e: KeyboardEvent) {
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
if (lastCtxUuid.value && canUndoPerson.value) {
e.preventDefault()
doUndo()
}
} else if ((e.ctrlKey || e.metaKey) && (e.key === 'Z' || (e.key === 'z' && e.shiftKey))) {
if (lastCtxUuid.value && canRedoPerson.value) {
e.preventDefault()
doRedo()
}
}
}
async function loadCandidateThumb(uuid: string) {
if (!uuid || candidateThumbs.value[uuid]) return
try { candidateThumbs.value[uuid] = await invoke('get_thumbnail', { uuid, frame: 30 }) } catch {}
function enqueueProfileLoad(uuid: string) {
loadProfile(uuid)
}
async function loadCandidateThumb(c: any) {
if (!c?.file_uuid || candidateThumbs.value[c.id]) return
loadFaceThumb(String(c.id), c.file_uuid, c.frame_number || 0, c.bbox)
}
function selectPerson(p: any) {
const uuid = p.identityUuid || p.identityUuid
console.log('selectPerson called:', uuid, p.name)
const uuid = p.identity_uuid
router.push({ name: 'PersonDetail', params: { uuid } })
.catch(e => console.error('Router push failed:', e))
}
@@ -255,15 +453,15 @@ async function toggleStar() {
async function confirmDelete() {
if (!confirm(`Delete "${selected.value.name}"?`)) return
try {
await invoke('delete_identity', { uuid: selected.value.identity_uuid })
people.value = people.value.filter((p: any) => p.identityUuid !== selected.value.identity_uuid)
await apiCall('delete_identity', { uuid: selected.value.identity_uuid })
people.value = people.value.filter((p: any) => p.identity_uuid !== selected.value.identity_uuid)
selected.value = null
} catch (e) { console.error('Failed to delete:', e) }
}
async function loadCandidates() {
try {
const result: any = await invoke('get_face_candidates', { page: 1, perPage: 50 })
const result: any = await apiCall('get_face_candidates', { page: 1, perPage: 50 })
candidates.value = Array.isArray(result) ? result : []
} catch (e) { console.error('Failed to load candidates:', e) }
}
@@ -271,7 +469,7 @@ async function loadCandidates() {
async function bindCandidate(c: any) {
if (!selected.value) return
try {
await invoke('bind_face', { uuid: selected.value.identity_uuid, faceId: String(c.id), fileUuid: c.file_uuid })
await apiCall('bind_face', { uuid: selected.value.identity_uuid, faceId: c.face_id || String(c.id), faceRowId: c.face_id ? undefined : c.id, fileUuid: c.file_uuid })
showCandidates.value = false
if (selected.value) selectPerson(selected.value)
} catch (e) { console.error('Bind failed:', e) }
@@ -280,53 +478,106 @@ async function bindCandidate(c: any) {
async function confirmMerge() {
if (!selected.value || !mergeTarget.value) return
try {
await invoke('merge_identities', { uuid: selected.value.identity_uuid, intoUuid: mergeTarget.value })
await apiCall('merge_identities', { uuid: selected.value.identity_uuid, intoUuid: mergeTarget.value })
showMerge.value = false
people.value = people.value.filter((p: any) => p.identityUuid !== selected.value.identity_uuid)
people.value = people.value.filter((p: any) => p.identity_uuid !== selected.value.identity_uuid)
selected.value = null
} catch (e) { console.error('Merge failed:', e) }
}
function showAssignModal(c: any) {
alert(`Assign face ${c.id} to existing person - not yet implemented`)
}
function formatTime(sec: number): string {
const m = Math.floor(sec / 60); const s = Math.floor(sec % 60)
return `${m}:${s.toString().padStart(2, '0')}`
}
function playTrace(t: any) {
currentVideo.value = { fileUuid: t.file_uuid, startTime: t.first_sec, endTime: t.last_sec, title: `${selected.value?.name} - ${formatTime(t.first_sec)}-${formatTime(t.last_sec)}` }
playing.value = true
}
function formatTime(sec: number): string {
const m = Math.floor(sec / 60); const s = Math.floor(sec % 60)
return `${m}:${s.toString().padStart(2, '0')}`
}
function formatHistoryTime(ts: string): string {
if (!ts) return ''
const d = new Date(ts)
const now = new Date()
const diff = now.getTime() - d.getTime()
if (diff < 60000) return '剛剛'
if (diff < 3600000) return `${Math.floor(diff / 60000)}分鐘前`
if (diff < 86400000) return `${Math.floor(diff / 3600000)}小時前`
return `${d.getMonth() + 1}/${d.getDate()} ${d.getHours()}:${d.getMinutes().toString().padStart(2, '0')}`
}
async function deleteFromMenu() {
if (!lastCtxUuid.value) return
const p = people.value.find((x: any) => x.identity_uuid === lastCtxUuid.value)
if (!p) return
if (!confirm(`刪除「${p.name}」？此操作無法復原。`)) return
try {
await apiCall('delete_identity', { uuid: lastCtxUuid.value })
people.value = people.value.filter((x: any) => x.identity_uuid !== lastCtxUuid.value)
invalidatePeople()
} catch (e) { console.error('Delete failed:', e) }
}
function showContextMenu(e: MouseEvent, p: any) {
e.preventDefault()
e.stopPropagation()
lastCtxUuid.value = p.identity_uuid
lastName.value = p.name
ctxMenu.value = { show: true, x: e.clientX, y: e.clientY, person: p }
refreshUndoCounts(p.identity_uuid)
refreshActionHistory(p.identity_uuid)
}
function ctxAction(action: string) {
async function ctxAction(action: string, extra?: any) {
const p = ctxMenu.value.person
if (!p) return
ctxMenu.value.show = false
const uuid = p.identity_uuid
lastCtxUuid.value = uuid
lastName.value = p.name
if (action === 'star') {
p.starred = !p.starred
const idx = people.value.findIndex((x: any) => x.identity_uuid === p.identityUuid)
if (idx >= 0) people.value[idx].starred = p.starred
const newVal = !p.starred
apiCall('update_identity_starred', { uuid, starred: newVal }).then(() => {
p.starred = newVal
const idx = people.value.findIndex((x: any) => x.identity_uuid === uuid)
if (idx >= 0) people.value[idx].starred = newVal
refreshUndoCounts(uuid)
}).catch(e => console.error('Star failed:', e))
} else if (action === 'skip') {
invoke('update_identity_status', { uuid: p.identityUuid, status: 'skipped' }).then(() => {
const idx = people.value.findIndex((x: any) => x.identity_uuid === p.identityUuid)
apiCall('update_identity_status', { uuid, status: 'skipped' }).then(() => {
const idx = people.value.findIndex((x: any) => x.identity_uuid === uuid)
if (idx >= 0) people.value[idx].status = 'skipped'
refreshUndoCounts(uuid)
}).catch(e => console.error('Skip failed:', e))
} else if (action === 'confirm') {
invoke('update_identity_status', { uuid: p.identityUuid, status: 'confirmed' }).then(() => {
const idx = people.value.findIndex((x: any) => x.identity_uuid === p.identityUuid)
apiCall('update_identity_status', { uuid, status: 'confirmed' }).then(() => {
const idx = people.value.findIndex((x: any) => x.identity_uuid === uuid)
if (idx >= 0) people.value[idx].status = 'confirmed'
refreshUndoCounts(uuid)
}).catch(e => console.error('Confirm failed:', e))
} else if (action === 'pending') {
apiCall('update_identity_status', { uuid, status: 'pending' }).then(() => {
const idx = people.value.findIndex((x: any) => x.identity_uuid === uuid)
if (idx >= 0) people.value[idx].status = 'pending'
refreshUndoCounts(uuid)
}).catch(e => console.error('Pending failed:', e))
} else if (action === 'rename' || action === 'merge') {
selectPerson(p)
} else if (action === 'undo') {
doUndo()
} else if (action === 'redo') {
doRedo()
} else if (action === 'undoAction') {
doUndoAction(extra as 'patch' | 'bind')
} else if (action === 'redoAction') {
doRedoAction(extra as 'patch' | 'bind')
} else if (action === 'delete') {
if (!confirm(`刪除「${p.name}」？此操作無法復原。`)) return
try {
await apiCall('delete_identity', { uuid })
people.value = people.value.filter((x: any) => x.identity_uuid !== uuid)
invalidatePeople()
} catch (e) { console.error('Delete failed:', e) }
}
}
@@ -335,80 +586,168 @@ function closeCtxMenu(e?: MouseEvent) {
ctxMenu.value.show = false
}
function showFaceCtxMenu(e: MouseEvent, c: any) {
e.preventDefault()
e.stopPropagation()
faceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, candidate: c }
}
function closeFaceCtxMenu(e?: MouseEvent) {
if (e && e.target instanceof Element && e.target.closest('.ms-ctx-menu')) return
faceCtxMenu.value.show = false
}
function faceCtxAction(action: string) {
const c = faceCtxMenu.value.candidate
if (!c) return
faceCtxMenu.value.show = false
if (action === 'assign') {
openAssignModal(c)
} else if (action === 'skip') {
faceCandidates.value = faceCandidates.value.filter((fc: any) => fc.id !== c.id)
}
}
function openAssignModal(c: any) {
assignModal.value = { show: true, candidate: c }
assignSearchQuery.value = ''
assignSelected.value = null
loadCandidateThumb(c)
}
async function confirmAssign() {
const c = assignModal.value.candidate
if (!c || !assignSelected.value) return
try {
await apiCall('bind_face', {
uuid: assignSelected.value.identity_uuid,
faceId: c.face_id || String(c.id),
faceRowId: c.face_id ? undefined : c.id,
fileUuid: c.file_uuid
})
faceCandidates.value = faceCandidates.value.filter((fc: any) => fc.id !== c.id)
assignModal.value.show = false
} catch (e) {
console.error('Bind failed:', e)
alert('指派失敗：' + e)
}
}
watch(showCandidates, (v) => { if (v) loadCandidates() })
</script>
<style scoped>
.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }
.ms-ppl-face-card.starred .ms-ppl-card-star, .ms-ppl-card-star.starred { display: block; }
.people-view { max-width: 1200px; }
h1 { margin: 0; }
.loading-state, .empty { text-align: center; padding: 60px 0; color: #5f6368; }
.spinner-lg { width: 24px; height: 24px; border: 3px solid #e8eaed; border-top-color: #202124; border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ms-ppl-detail-view { display: none; }
.ms-ppl-detail-view.show { display: block; }
.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }
.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }
.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }
.ms-ppl-star-btn.starred { color: #f59e0b; }
.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }
.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }
.ms-ppl-edit-label { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }
.ms-ppl-view-box { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }
.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; cursor: pointer; }
.ms-ppl-view-name-box:hover { text-decoration: underline; }
.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }
.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }
.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }
.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }
.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }
.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }
.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }
.ms-ppl-toolbar { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.ms-ppl-star-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1.5px solid #d1d5db; border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; font-family: inherit; color: #202124; transition: border-color .15s; }
.ms-ppl-star-toggle-btn:hover { border-color: #202124; }
.ms-ppl-star-icon { font-size: 16px; color: #d1d5db; transition: color .15s; }
.ms-ppl-star-icon.starred { color: #f59e0b; }
.ms-fm-icon-btn { width: 34px; height: 34px; border: 1.5px solid #d1d5db; border-radius: 10px; background: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; color: #5f6368; transition: border-color .15s, color .15s; }
.ms-fm-icon-btn:hover { border-color: #202124; color: #202124; }
.ms-ppl-section-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid #d1d5db; border-radius: 10px; background: #fff; cursor: pointer; font-size: 12.5px; font-family: inherit; color: #5f6368; transition: border-color .15s, color .15s, background .15s; }
.ms-ppl-section-toggle-btn.active { border-color: #202124; color: #202124; background: #f8f9fa; }
.ms-ppl-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; transition: background .15s; }
.ms-ppl-toggle-dot.on { background: #1a56db; }
.ms-ppl-section { margin-bottom: 8px; }
.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ms-ppl-section-title { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0; display: flex; align-items: center; gap: 6px; }
.ms-ppl-section-count { font-weight: 400; color: #9aa0a6; font-size: 13px; }
.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 24px 0; }
.skipped-title { color: #9aa0a6; }
.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }
.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }
.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.ms-ppl-face-card { width: 120px; cursor: pointer; border-radius: 12px; transition: transform .15s, box-shadow .15s; }
.ms-ppl-face-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }
.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; background: #e8eaed; overflow: hidden; position: relative; }
.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ms-ppl-card-star { display: none; position: absolute; top: 4px; right: 4px; font-size: 14px; line-height: 1; }
.ms-silhouette { width: 100%; height: 100%; }
.ms-ppl-face-name { display: block; text-align: center; font-size: 12px; color: #202124; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-uface-grid .ms-ppl-face-card { width: 120px; }
.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }
.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }
.close-btn { position: absolute; top: 16px; right: 16px; }
.detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.detail-avatar { width: 80px; height: 80px; border-radius: 16px; flex-shrink: 0; }
.detail-info { flex: 1; }
.name-row { display: flex; align-items: center; gap: 8px; }
.name-row h2 { margin: 0; cursor: pointer; font-size: 1.25rem; }
.name-row h2:hover { text-decoration: underline; }
.name-input { font-size: 1.25rem; font-weight: 700; border: 1.5px solid #d1d5db; border-radius: 8px; padding: 4px 8px; width: 200px; outline: none; }
.edit-btn { width: 28px; height: 28px; }
.uuid { color: #9aa0a6; font-size: 0.8rem; font-family: monospace; margin: 4px 0 8px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { padding: 8px 16px; border: 1.5px solid #d1d5db; background: #fff; border-radius: 10px; cursor: pointer; font-size: 0.85rem; }
.tab.active { background: #202124; color: #fff; border-color: #202124; }
.face-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.face-thumb { width: 52px; height: 52px; border-radius: 8px; background: #e8eaed; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.face-placeholder { font-size: 0.6rem; color: #5f6368; }
.ms-ppl-media-item { cursor: pointer; }
.ms-ppl-media-thumb { position: relative; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; }
.thumb-play { color: #fff; font-size: 1.2rem; opacity: 0.8; }
.merge-input { width: 100%; padding: 10px 14px; border: 1.5px solid #d1d5db; border-radius: 10px; margin-bottom: 16px; font-size: 0.9rem; outline: none; }
.merge-input:focus { border-color: #202124; }
.ms-modal-actions { display: flex; justify-content: flex-end; }
h2 { margin: 0 0 16px; font-size: 1rem; }
.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; max-height: 50vh; overflow-y: auto; }
/* Search input */
.ms-ppl-search-wrap { position: relative; }
.ms-ppl-search-input { padding: 6px 12px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 12.5px; outline: none; width: 160px; font-family: inherit; transition: border-color .15s; }
.ms-ppl-search-input:focus { border-color: #202124; }
/* Sort panel */
.ms-fm-sort-panel { position: absolute; top: 100%; right: 0; z-index: 999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 12px 16px; min-width: 180px; margin-top: 4px; }
.ms-fm-sort-section { }
.ms-fm-sort-title { font-size: 11.5px; font-weight: 600; color: #9aa0a6; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ms-undo-row { display: flex; gap: 8px; }
.ms-undo-btn { display: flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1.5px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; font-family: inherit; color: #1a56db; transition: border-color .15s, background .15s; }
.ms-undo-btn:hover:not(:disabled) { border-color: #1a56db; background: #e8f0fe; }
.ms-undo-btn:disabled { color: #bdc1c6; cursor: not-allowed; opacity: 0.6; }
.ms-undo-btn-danger { color: #d93025; border-color: #f1c0b8; }
.ms-undo-btn-danger:hover:not(:disabled) { border-color: #d93025; background: #fce8e6; }
.ms-history-list { margin-top: 8px; max-height: 200px; overflow-y: auto; }
.ms-history-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; color: #5f6368; border-bottom: 1px solid #f0f0f0; }
.ms-history-item:last-child { border-bottom: none; }
.ms-history-item-undone { opacity: 0.5; text-decoration: line-through; }
.ms-history-label { color: #3c4043; }
.ms-history-time { color: #9aa0a6; font-size: 11px; white-space: nowrap; margin-left: 8px; }
.ms-history-actions { display: flex; gap: 2px; margin-left: 4px; }
.ms-history-act-btn { background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 1px 5px; font-size: 12px; cursor: pointer; color: #1a56db; line-height: 1; }
.ms-history-act-btn:hover { background: #e8f0fe; border-color: #1a56db; }
.ms-history-act-redo { color: #1a56db; }
.ms-history-empty { font-size: 12px; color: #9aa0a6; padding: 4px 0; }
.ms-fm-sort-section label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #3c4043; cursor: pointer; }
.ms-fm-sort-section input[type="radio"] { margin: 0; accent-color: #202124; }
/* Context menu */
.ms-ctx-menu { position: fixed; z-index: 99999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 160px; font-size: 13px; color: #222; }
.ms-ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; border: none; background: transparent; width: 100%; text-align: left; font-size: 13px; color: #222; font-family: inherit; }
.ms-ctx-item:hover { background: #f3f4f6; }
.ms-ctx-item.ms-ctx-danger { color: #d93025; }
.ms-ctx-item.ms-ctx-danger:hover { background: #fce8e6; }
.ms-ctx-item.ms-ctx-undo { color: #1a56db; }
.ms-ctx-item.ms-ctx-redo { color: #1a56db; }
.ms-ctx-item.ms-ctx-undo:disabled, .ms-ctx-item.ms-ctx-redo:disabled { color: #bdc1c6; cursor: default; }
.ms-ctx-item.ms-ctx-undo:disabled:hover, .ms-ctx-item.ms-ctx-redo:disabled:hover { background: transparent; }
.ms-ctx-menu-divider { height: 1px; background: #eee; margin: 4px 8px; }
.ms-ppl-section { margin-bottom: 8px; }
.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ms-ppl-section-title { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0; display: flex; align-items: center; gap: 6px; }
.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 24px 0; }
.skipped-title { color: #9aa0a6; }
.skipped-card .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }
.skipped-card .ms-ppl-face-name { color: #bdc1c6; }
.ms-ctx-history-item { display: flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 12px; color: #5f6368; }
.ms-ctx-history-label { flex: 1; color: #3c4043; font-size: 12px; }
.ms-ctx-history-time { color: #9aa0a6; font-size: 10px; white-space: nowrap; }
.ms-ctx-history-btn { padding: 2px 6px !important; font-size: 12px !important; min-width: 24px; }
/* Modal overlay */
.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998; align-items: center; justify-content: center; }
.ms-modal-overlay.show { display: flex; }
.close-btn { position: absolute; top: 16px; right: 16px; }
/* Assign modal */
.ms-modal-assign { max-width: 560px; width: 92%; padding: 28px 32px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.2); position: relative; }
.ms-assign-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ms-assign-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }
.ms-assign-trigger-face img { width: 100%; height: 100%; object-fit: cover; }
.ms-assign-info { flex: 1; min-width: 0; }
.ms-assign-title { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 16px; font-weight: 600; color: #202124; margin: 0 0 4px; }
.ms-assign-sub { font-size: 12px; color: #9aa0a6; }
.ms-assign-search-wrap { position: relative; margin-bottom: 16px; }
.ms-assign-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #9aa0a6; }
.ms-assign-search-input { width: 100%; padding: 10px 14px 10px 36px; border: 1.5px solid #d1d5db; border-radius: 10px; font-size: 13px; outline: none; font-family: inherit; transition: border-color .15s; }
.ms-assign-search-input:focus { border-color: #202124; }
.ms-assign-grid { display: flex; flex-wrap: wrap; gap: 12px; min-height: 120px; max-height: 45vh; overflow-y: auto; padding: 4px 0; }
.ms-assign-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 80px; padding: 8px; border-radius: 12px; transition: background .15s; }
.ms-assign-face-card:hover { background: #f3f4f6; }
.ms-assign-face-card.selected { background: #e8f0fe; }
.ms-assign-face-img { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #e8eaed; border: 2px solid transparent; transition: border-color .15s; }
.ms-assign-face-card.selected .ms-assign-face-img { border-color: #1a56db; }
.ms-assign-face-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-assign-face-name { font-size: 11px; color: #202124; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; }
.ms-assign-empty { width: 100%; padding: 32px 0; text-align: center; color: #9aa0a6; font-size: 13px; }
.ms-assign-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }
.ms-fm-btn-primary:hover { background: #3c4043; }
.ms-fm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
</style>

661
src/views/PersonDetailView.vue
View File

@@ -7,6 +7,13 @@
</svg>
返回
</button>
<button v-if="!isEditing" class="ms-ppl-edit-text-btn" @click="startEditing">
編輯
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" style="margin-left:4px;">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div v-if="loading" class="loading-state">
@@ -16,18 +23,26 @@
<template v-else-if="person">
<div class="ms-ppl-detail-header">
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;">
<div class="ms-ppl-detail-avatar">
<img v-if="profile" :src="profile" alt="">
<div class="ms-ppl-detail-avatar" :class="{ 'ms-ppl-avatar-editable': isEditing }" @click="isEditing && triggerAvatarUpload()">
<img v-if="profile" :src="profile" alt="" style="width:100%;height:100%;object-fit:cover;">
<svg v-else class="ms-silhouette" viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="45" r="25" fill="#d1d5db"/>
<ellipse cx="60" cy="105" rx="40" ry="25" fill="#d1d5db"/>
</svg>
<div v-if="isEditing" class="ms-ppl-avatar-upload-hint">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="13" r="4" stroke="currentColor" stroke-width="1.5"/>
</svg>
</div>
</div>
<input ref="fileInput" type="file" accept="image/jpeg,image/png" style="display:none" @change="handleAvatarUpload">
</div>
<div style="flex:1;min-width:0;">
<div id="msPplInfoView">
<!-- View mode -->
<div v-if="!isEditing" id="msPplInfoView">
<div class="ms-ppl-detail-name-row">
<button class="ms-ppl-star-btn" :class="{ starred: person.starred }" @click="toggleStar">☆</button>
<button class="ms-ppl-star-btn" :class="{ starred: person.starred }" @click="toggleStar">{{ person.starred ? '★' : '☆' }}</button>
<div class="ms-ppl-view-box ms-ppl-view-name-box">{{ person.name || '—' }}</div>
</div>
<div class="ms-ppl-detail-aliases" v-if="person.metadata?.aliases?.length">
@@ -44,49 +59,129 @@
</div>
</div>
</div>
<!-- Edit mode -->
<div v-else id="msPplInfoEdit">
<div class="ms-ppl-edit-row ms-ppl-edit-name-row">
<button class="ms-ppl-star-btn" :class="{ starred: person.starred }" @click="toggleStar">{{ person.starred ? '★' : '☆' }}</button>
<input v-model="editName" class="ms-ppl-edit-input ms-ppl-edit-name-input" placeholder="加入人名">
</div>
<div class="ms-ppl-edit-row ms-ppl-edit-alias-row">
<div class="ms-ppl-alias-wrap-inner">
<span v-for="(a, i) in editAliases" :key="i" class="ms-ppl-alias-tag">
{{ a.name }}
<button @click="removeAlias(i)">×</button>
</span>
</div>
<template v-if="showAliasInput">
<select v-model="aliasLocale" class="ms-ppl-alias-locale-select">
<option value="en">English</option>
<option value="zh-TW">繁體中文</option>
<option value="zh-CN">简体中文</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
</select>
<input v-model="aliasName" class="ms-ppl-alias-inline-input" placeholder="輸入別名後按 Enter" @keyup.enter="addAlias">
</template>
<button v-if="!showAliasInput" class="ms-ppl-alias-add-btn" @click="showAliasInput = true; aliasName = ''">＋ 別名</button>
<button v-else class="ms-ppl-alias-add-btn" @click="showAliasInput = false">收起</button>
</div>
<div class="ms-ppl-edit-fields">
<div class="ms-ppl-edit-field-row">
<label class="ms-ppl-edit-label">角色</label>
<input v-model="editRole" class="ms-ppl-edit-input ms-ppl-edit-field-input" placeholder="角色名稱">
</div>
<div class="ms-ppl-edit-field-row ms-ppl-edit-field-row--top">
<label class="ms-ppl-edit-label">描述</label>
<textarea v-model="editNotes" class="ms-ppl-edit-textarea ms-ppl-edit-field-input" placeholder="自訂描述"></textarea>
</div>
</div>
<div class="ms-ppl-edit-actions">
<button class="ms-fm-btn ms-fm-btn-primary" @click="saveEdit" :disabled="saving">{{ saving ? '儲存中...' : '✓ 儲存更改' }}</button>
<button class="ms-fm-btn" @click="cancelEditing">取消</button>
</div>
</div>
</div>
</div>
<div class="ms-ppl-strip-wrap">
<div class="ms-ppl-strip-wrap" :class="{ 'ms-ppl-edit-mode': isEditing }">
<button class="ms-ppl-strip-add-btn" @click="showCandidates = true" title="加入相同人物">＋</button>
<div class="ms-ppl-face-strip">
<div v-for="f in faces.slice(0, 30)" :key="f.id" class="ms-ppl-strip-face">
<div v-if="loadingFaces" style="padding:10px;color:#999;font-size:12px;">Loading faces...</div>
<div v-else-if="faces.length === 0" style="padding:10px;color:#999;font-size:12px;">No faces found</div>
<div v-for="f in faces.slice(0, showAllFaces ? faces.length : 30)" :key="f.id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: selectedFace?.id === f.id }" @click="selectFace(f)" @contextmenu.prevent="showFaceCtxMenu($event, f)">
<div class="ms-ppl-strip-face-img">
<img v-if="f.thumbUrl" :src="f.thumbUrl" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
<img v-if="faceThumbs[f.id]" :src="faceThumbs[f.id]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
<div v-else style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#6366f1;font-size:14px;font-weight:600;border-radius:8px;">{{ Math.round(f.confidence * 100) }}%</div>
</div>
<button v-if="isEditing" class="ms-ppl-strip-remove-btn" @click="unbindFace(f)">×</button>
</div>
</div>
<button v-if="faces.length > 30" class="ms-ppl-strip-arrow" @click="showAllFaces = !showAllFaces">›</button>
</div>
<div class="ms-ppl-media-label" v-if="mergedTraces.length">{{ mergedTraces.length }} segments</div>
<div class="ms-ppl-media-grid">
<div v-for="(m, i) in mergedTraces.slice(0, 20)" :key="i" class="ms-ppl-media-item" @click="playVideo(m.file_uuid, m.start, m.end)">
<div class="ms-ppl-media-thumb">
<img v-if="m.thumbUrl" :src="m.thumbUrl" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;" @error="handleThumbError">
<div class="ms-thumb-play-circle">
<svg width="20" height="20" viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" fill="white"/></svg>
</div>
<span class="ms-ppl-media-dur">{{ (m.end - m.start).toFixed(1) }}s</span>
</div>
<div class="ms-ppl-media-info">
<div class="ms-ppl-media-title">{{ m.count > 1 ? 'Merged ' + m.count + ' segments' : 'Segment' }}</div>
<div class="ms-ppl-media-sub">{{ m.start.toFixed(1) }}s - {{ m.end.toFixed(1) }}s</div>
<!-- Face detail card -->
<div v-if="selectedFace" class="ms-ppl-face-card-detail">
<button class="ms-ppl-face-card-close" @click="selectedFace = null">×</button>
<div class="ms-ppl-face-card-img-wrap">
<img v-if="faceThumbs[selectedFace.id]" :src="faceThumbs[selectedFace.id]" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:12px;">
<div v-else class="face-placeholder">?</div>
</div>
<div class="ms-ppl-face-card-info">
<div class="ms-ppl-face-card-file">{{ (selectedFace.file_uuid || '').slice(0, 12) }}...</div>
<div class="ms-ppl-face-card-frame">Frame #{{ selectedFace.frame_number }}</div>
<div v-if="selectedFace.confidence" class="ms-ppl-face-card-conf">Confidence: {{ (selectedFace.confidence * 100).toFixed(1) }}%</div>
<div class="ms-ppl-face-card-actions">
<button class="ms-fm-btn" @click="playFaceTrace(selectedFace)">▶ 播放片段</button>
<button v-if="isEditing" class="ms-fm-btn ms-fm-btn-danger" @click="unbindFace(selectedFace); selectedFace = null">✕ 解綁</button>
</div>
</div>
</div>
<div class="ms-ppl-delete-zone">
<hr class="ms-ppl-delete-hr">
<button class="ms-fm-btn ms-ppl-delete-zone-btn" @click="confirmDelete">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
<polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>
<path d="M19 6l-1 14H6L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
刪除此人物
</button>
<!-- Segment card -->
<div v-if="mergedSegments.length" class="ms-ppl-media-item segment-card" @click="playMerged(mergedSegments[0])">
<div class="ms-ppl-media-thumb">
<img v-if="thumbs[mergedSegments[0].thumbKey]" :src="thumbs[mergedSegments[0].thumbKey]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
<div class="ms-thumb-play-circle">
<svg width="20" height="20" viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" fill="white"/></svg>
</div>
<span class="ms-ppl-media-dur">{{ (mergedSegments[0].end - mergedSegments[0].start).toFixed(1) }}s</span>
<span v-if="mergedSegments[0].avg_confidence" class="ms-ppl-media-badge-conf">{{ (mergedSegments[0].avg_confidence * 100).toFixed(0) }}%</span>
</div>
<div class="ms-ppl-media-info">
<div class="ms-ppl-media-title">{{ mergedSegments[0].count > 1 ? 'Merged ' + mergedSegments[0].count + ' segments' : 'Segment' }} · {{ mergedSegments[0].file_uuid.slice(0,8) }}...</div>
<div class="ms-ppl-media-sub">#{{ mergedSegments[0].start_frame }} — #{{ mergedSegments[0].end_frame }} · {{ formatTime(mergedSegments[0].start) }}</div>
</div>
</div>
<div v-if="loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">Loading segments...</div>
<div v-else-if="!mergedSegments.length" class="ms-ppl-media-label" style="margin-bottom:20px;">No trace segments available for this person</div>
<!-- Tabs -->
<div v-show="activeTab === 'actions'">
<div class="ms-ppl-actions-section">
<div class="ms-ppl-actions-status">
<span class="ms-ppl-actions-label">狀態：</span>
<span class="ms-ppl-actions-value">{{ person.status || 'confirmed' }}</span>
<button v-if="person.status !== 'confirmed'" class="ms-fm-btn ms-fm-btn-primary" @click="updateStatus('confirmed')">✓ 確認</button>
<button v-if="person.status !== 'pending'" class="ms-fm-btn" @click="updateStatus('pending')">待定</button>
<button v-if="person.status !== 'skipped'" class="ms-fm-btn" @click="updateStatus('skipped')">略過</button>
</div>
</div>
<div class="ms-ppl-actions-section" style="margin-top:16px;">
<button class="ms-fm-btn ms-fm-btn-primary" @click="showCandidates = true" style="margin-bottom:8px;">+ 綁定人臉</button>
<button class="ms-fm-btn ms-fm-btn-blue" @click="showMerge = true" style="margin-bottom:8px;">⇄ 合併到其他人物</button>
</div>
<div class="ms-ppl-delete-zone">
<hr class="ms-ppl-delete-hr">
<button class="ms-fm-btn ms-ppl-delete-zone-btn" @click="confirmDelete">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
<polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>
<path d="M19 6l-1 14H6L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
刪除此人物
</button>
</div>
</div>
</template>
<div v-else class="empty">
@@ -102,7 +197,7 @@
<div class="ms-merge-grid">
<div v-for="c in candidates" :key="c.id" class="ms-merge-face-card" @click="bindCandidate(c)">
<div class="ms-merge-face-img">
<img v-if="c.thumbUrl" :src="c.thumbUrl" alt="">
<img v-if="faceThumbs[c.thumbKey]" :src="faceThumbs[c.thumbKey]" alt="">
<div v-else class="face-placeholder">{{ Math.round(c.confidence * 100) }}%</div>
</div>
<span class="ms-merge-face-name">{{ c.file_uuid?.slice(0, 8) }}... #{{ c.frame_number }}</span>
@@ -112,63 +207,101 @@
</div>
<div v-if="showMerge" class="ms-modal-overlay show" @click.self="showMerge = false">
<div class="ms-modal">
<div class="ms-modal ms-modal-merge">
<button class="ms-fm-icon-btn close-btn" @click="showMerge = false">×</button>
<h2 class="ms-ppl-section-title">Merge Identity</h2>
<input v-model="mergeTarget" class="merge-input" placeholder="Target identity UUID" />
<div class="ms-modal-actions">
<button class="ms-fm-btn ms-fm-btn-blue" :disabled="!mergeTarget" @click="confirmMerge">Merge</button>
<h2 class="ms-ppl-section-title">⇄ 合併到其他人物</h2>
<div class="ms-merge-search-wrap">
<span class="ms-merge-search-icon">🔍</span>
<input v-model="mergeSearchQuery" class="ms-merge-search-input" placeholder="搜尋人物名稱..." @input="onMergeSearch" />
</div>
<div class="ms-merge-grid">
<div v-for="r in mergeSearchResults" :key="r.identity_id" class="ms-merge-face-card" @click="confirmMergeTarget(r)">
<div class="ms-merge-face-img">
<svg viewBox="0 0 120 120" fill="none" style="width:100%;height:100%;">
<circle cx="60" cy="45" r="25" fill="#d1d5db"/>
<ellipse cx="60" cy="105" rx="40" ry="25" fill="#d1d5db"/>
</svg>
</div>
<span class="ms-merge-face-name">{{ r.name }}</span>
</div>
<div v-if="!mergeSearchResults.length && mergeSearchQuery" class="ms-merge-face-card" style="opacity:0.5;cursor:default;width:100%;padding:20px;text-align:center;">
No results found
</div>
</div>
<div class="ms-merge-footer">
<button class="ms-fm-btn" @click="showMerge = false">取消</button>
</div>
</div>
</div>
<VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
<VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :all-traces="allTraces" :initial-trace-idx="currentVideo.traceIdx" :title="currentVideo.title" @close="playing = false" />
<!-- Face strip context menu -->
<div v-if="faceCtxMenu.show" class="ms-ctx-menu" :style="{ left: faceCtxMenu.x + 'px', top: faceCtxMenu.y + 'px', display: 'block' }" @click.stop @mousedown.stop @pointerdown.stop>
<button class="ms-ctx-item ms-ctx-danger" @click="faceCtxAction('unbind')">不是此人物</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { invoke } from '@tauri-apps/api/core'
import VideoPlayer from '../components/VideoPlayer.vue'
import { apiCall } from '@/api'
import { isTauri } from '@/api/config'
import { ensurePeople, peopleCache, peopleLoaded, profilesCache, loadProfile as storeLoadProfile, faceThumbsCache, loadFaceThumb as storeLoadFaceThumb, thumbnailsCache, invalidatePeople, invalidateProfile } from '@/store'
import VideoPlayer from '@/components/VideoPlayer.vue'
const route = useRoute()
const router = useRouter()
const person = ref<any>(null)
const loading = ref(true)
const loadingFaces = ref(true)
const loadingTraces = ref(true)
const profile = ref('')
const profileUuid = ref('')
const peopleCount = ref(0)
const allPeople = ref<any[]>([])
const faces = ref<any[]>([])
const traces = ref<any[]>([])
const mergedTraces = ref<any[]>([])
const allTraces = ref<any[]>([])
const mergedSegments = ref<any[]>([])
const playing = ref(false)
const currentVideo = ref({ fileUuid: '', startTime: 0, endTime: 0, title: '' })
const currentVideo = ref({ fileUuid: '', startTime: 0, endTime: 0, traceIdx: 0, title: '' })
const showCandidates = ref(false)
const showMerge = ref(false)
const mergeTarget = ref('')
const mergeSearchQuery = ref('')
const mergeSearchResults = ref<any[]>([])
const candidates = ref<any[]>([])
const showAllFaces = ref(false)
const CORE_API = 'http://localhost:3002'
const API_KEY = 'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69'
const thumbs = thumbnailsCache
const faceThumbs = faceThumbsCache
const isEditing = ref(false)
const editName = ref('')
const editRole = ref('')
const editNotes = ref('')
const editAliases = ref<{name: string, locale: string}[]>([])
const showAliasInput = ref(false)
const aliasLocale = ref('zh-TW')
const aliasName = ref('')
const saving = ref(false)
const avatarUploading = ref(false)
const activeTab = ref<'faces' | 'actions'>('faces')
const faceCtxMenu = ref({ show: false, x: 0, y: 0, face: null as any })
const selectedFace = ref<any>(null)
const fileInput = ref<HTMLInputElement | null>(null)
onMounted(async () => {
const uuid = route.params.uuid as string
console.log('PersonDetailView mounted, uuid:', uuid)
try {
console.log('Calling getPeople with uuid:', uuid)
const people: any = await invoke('get_people', { page: 1, perPage: 1000 })
console.log('getPeople raw result:', JSON.stringify(people).slice(0, 200))
console.log('getPeople result count:', Array.isArray(people) ? people.length : 'not array')
peopleCount.value = Array.isArray(people) ? people.length : 0
const found = (Array.isArray(people) ? people : []).find((p: any) => p.identityUuid === uuid)
console.log('Person found:', !!found, found?.name)
await ensurePeople()
peopleCount.value = peopleCache.value.length
allPeople.value = peopleCache.value
const found = allPeople.value.find((p: any) => p.identity_uuid === uuid)
if (found) {
person.value = { ...found, status: found.status || 'confirmed' }
await loadProfile(uuid)
await loadFaces(uuid)
await loadMedia(uuid)
loadProfile(uuid)
loadFaces(uuid)
loadMedia(uuid)
}
} catch (e) {
console.error('Failed to load person:', e)
@@ -176,99 +309,335 @@ onMounted(async () => {
loading.value = false
}
loadCandidates()
document.addEventListener('click', closeFaceCtxMenu)
})
async function loadProfile(uuid: string) {
try { profile.value = await invoke('get_identity_profile', { uuid }) } catch {}
onUnmounted(() => {
document.removeEventListener('click', closeFaceCtxMenu)
})
function loadProfile(uuid: string) {
profileUuid.value = uuid
if (profilesCache.value[uuid]) {
profile.value = profilesCache.value[uuid]
} else {
storeLoadProfile(uuid)
}
}
watch(() => profileUuid.value && profilesCache.value[profileUuid.value], (val) => {
if (val && !profile.value) profile.value = val
})
function thumbKey(uuid: string, frame: number): string {
return `${uuid}:${frame}`
}
async function loadFaces(uuid: string) {
loadingFaces.value = true
try {
const result: any = await invoke('getFaces', { uuid, perPage: 1000 })
const result: any = await apiCall('get_faces', { uuid, perPage: 20 })
const items = Array.isArray(result) ? result : []
faces.value = items.map((f: any) => ({
...f,
thumbUrl: f.file_uuid ? `${CORE_API}/api/v1/file/${f.file_uuid}/thumbnail?api_key=${API_KEY}&frame=${f.frame_number || 0}` : ''
}))
faces.value = items
items.forEach((f: any) => {
const fu = f.file_uuid || f.fileUuid || ''
const fn = f.frame_number ?? f.frameNumber ?? 0
const fid = f.id
const bbox = f.bbox
storeLoadFaceThumb(fid, fu, fn, bbox)
})
} catch (e) { console.error('Failed to load faces:', e) }
finally { loadingFaces.value = false }
}
function selectFace(f: any) {
selectedFace.value = f
}
function playFaceTrace(f: any) {
const fu = f.file_uuid || f.fileUuid || ''
const frame = f.frame_number ?? f.frameNumber ?? 0
const trace = allTraces.value.find((t: any) => t.file_uuid === fu && frame >= (t.first_frame || t.start_frame || 0) && frame <= (t.last_frame || t.end_frame || 0))
if (trace) {
currentVideo.value = {
fileUuid: fu,
startTime: trace.first_sec || trace.start_time || 0,
endTime: trace.last_sec || trace.end_time || 0,
traceIdx: allTraces.value.indexOf(trace),
title: `${person.value?.name} · Face #${frame}`,
}
} else {
currentVideo.value = {
fileUuid: fu,
startTime: Math.max(0, (frame / 30) - 5),
endTime: (frame / 30) + 5,
traceIdx: 0,
title: `${person.value?.name} · Face #${frame}`,
}
}
playing.value = true
}
function showFaceCtxMenu(e: MouseEvent, f: any) {
e.preventDefault()
e.stopPropagation()
faceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, face: { ...f } }
}
function closeFaceCtxMenu(e?: MouseEvent) {
faceCtxMenu.value.show = false
}
function faceCtxAction(action: string) {
const f = faceCtxMenu.value.face
faceCtxMenu.value = { show: false, x: 0, y: 0, face: null }
if (!f) {
console.error('faceCtxAction: no face data')
return
}
if (!person.value) {
console.error('faceCtxAction: no person data')
return
}
if (action === 'unbind') {
unbindFace(f)
}
}
async function loadMedia(uuid: string) {
loadingTraces.value = true
try {
const result: any = await invoke('getTraces', { uuid, perPage: 1000 })
const result: any = await apiCall('get_traces', { uuid, perPage: 50 })
const rawItems = Array.isArray(result) ? result : []
rawItems.sort((a: any, b: any) => (a.first_sec || 0) - (b.first_sec || 0))
if (!rawItems.length) { mergedSegments.value = []; return }
rawItems.sort((a: any, b: any) => (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0))
allTraces.value = rawItems
const merged: any[] = []
let cur: any = null
rawItems.forEach((item: any) => {
const st = item.first_sec || 0
const en = item.last_sec || 0
rawItems.forEach((item: any, idx: number) => {
const st = item.first_sec || item.start_time || 0
const en = item.last_sec || item.end_time || 0
const fu = item.file_uuid || ''
if (cur && fu === cur.file_uuid && (st - cur.end) < 30) {
cur.end = Math.max(cur.end, en)
cur.end_frame = Math.max(cur.end_frame, item.last_frame || 0)
cur.count++
cur._endIdx = idx
cur.total_confidence += item.avg_confidence || 0
} else {
if (cur) merged.push(cur)
cur = { file_uuid: fu, start: st, end: en, count: 1, first_frame: item.first_frame || 0 }
cur = {
file_uuid: fu,
start_frame: item.first_frame || 0,
end_frame: item.last_frame || 0,
start: st,
end: en,
count: 1,
total_confidence: item.avg_confidence || 0,
_startIdx: idx,
_endIdx: idx,
thumbKey: thumbKey(fu, item.first_frame || 0),
}
}
})
if (cur) merged.push(cur)
mergedTraces.value = merged.map((m: any) => ({
...m,
thumbUrl: m.file_uuid ? `${CORE_API}/api/v1/file/${m.file_uuid}/thumbnail?api_key=${API_KEY}&frame=${m.first_frame || Math.floor(m.start * 24)}` : ''
}))
merged.forEach((m: any) => {
m.avg_confidence = m.count > 1 ? m.total_confidence / m.count : m.total_confidence
delete m.total_confidence
})
mergedSegments.value = merged.slice(0, 1)
merged.forEach((m: any) => loadThumb(m.file_uuid, m.start_frame))
} catch (e) { console.error('Failed to load media:', e) }
finally { loadingTraces.value = false }
}
function loadThumb(uuid: string, frame: number) {
const key = thumbKey(uuid, frame)
if (thumbnailsCache.value[key]) return
apiCall('get_thumbnail', { uuid, frame }).then((url: any) => {
if (url) thumbnailsCache.value[key] = url
}).catch(() => {})
}
async function loadCandidates() {
try {
const result: any = await invoke('get_face_candidates', { page: 1, perPage: 100 })
const result: any = await apiCall('get_face_candidates', { page: 1, perPage: 20 })
candidates.value = (Array.isArray(result) ? result : []).map((c: any) => ({
...c,
thumbUrl: c.file_uuid ? `${CORE_API}/api/v1/file/${c.file_uuid}/thumbnail?api_key=${API_KEY}&frame=${c.frame_number || 0}` : ''
thumbKey: `cand_${c.id}`
}))
;(Array.isArray(result) ? result : []).forEach((c: any) => loadFaceCandidateThumb(c))
} catch (e) { console.error('Failed to load candidates:', e) }
}
function handleThumbError(e: Event) {
const img = e.target as HTMLImageElement
img.style.display = 'none'
async function loadFaceCandidateThumb(c: any) {
if (!c?.file_uuid) return
storeLoadFaceThumb(`cand_${c.id}`, c.file_uuid, c.frame_number || 0, c.bbox)
}
async function toggleStar() {
if (!person.value) return
person.value.starred = !person.value.starred
const newVal = !person.value.starred
try {
await apiCall('update_identity_starred', { uuid: person.value.identity_uuid, starred: newVal })
person.value.starred = newVal
invalidatePeople()
} catch (e) {
console.error('Failed to update star:', e)
}
}
async function confirmDelete() {
if (!person.value || !confirm(`Delete "${person.value.name}"?`)) return
try {
await invoke('delete_identity', { uuid: person.value.identityUuid })
await apiCall('delete_identity', { uuid: person.value.identity_uuid })
router.back()
} catch (e) { console.error('Failed to delete:', e) }
}
async function bindCandidate(c: any) {
if (!person.value) return
const fid = c.face_id || String(c.id)
try {
await invoke('bind_face', { uuid: person.value.identityUuid, faceId: String(c.id), fileUuid: c.file_uuid })
await apiCall('bind_face', { uuid: person.value.identity_uuid, faceId: fid, faceRowId: c.face_id ? undefined : c.id, fileUuid: c.file_uuid })
showCandidates.value = false
await loadFaces(person.value.identityUuid)
await refreshPerson()
} catch (e) { console.error('Bind failed:', e) }
}
async function confirmMerge() {
if (!person.value || !mergeTarget.value) return
try {
await invoke('merge_identities', { uuid: person.value.identityUuid, intoUuid: mergeTarget.value })
router.back()
} catch (e) { console.error('Merge failed:', e) }
function startEditing() {
if (!person.value) return
editName.value = person.value.name || ''
const meta = person.value.metadata || {}
editRole.value = meta.role || ''
editNotes.value = meta.notes || ''
editAliases.value = JSON.parse(JSON.stringify(meta.aliases || []))
isEditing.value = true
}
function playVideo(fileUuid: string, start: number, end: number) {
currentVideo.value = { fileUuid, startTime: start, endTime: end, title: `${person.value?.name} - ${start.toFixed(1)}s-${end.toFixed(1)}s` }
function cancelEditing() {
isEditing.value = false
}
async function saveEdit() {
if (!person.value || saving.value) return
saving.value = true
try {
const cleanAliases = editAliases.value.filter(a => a.name?.trim()).map(a => ({ name: a.name.trim(), locale: a.locale }))
const metadata = {
...(person.value.metadata || {}),
name: editName.value.trim(),
role: editRole.value.trim(),
notes: editNotes.value.trim(),
starred: person.value.starred,
aliases: cleanAliases,
}
await apiCall('update_identity', {
uuid: person.value.identity_uuid,
name: editName.value.trim(),
metadataJson: JSON.stringify(metadata),
})
isEditing.value = false
invalidatePeople()
await refreshPerson()
} catch (e) {
console.error('Failed to save:', e)
} finally {
saving.value = false
}
}
function addAlias() {
const name = aliasName.value.trim()
if (!name) return
editAliases.value.push({ name, locale: aliasLocale.value })
aliasName.value = ''
}
function removeAlias(index: number) {
editAliases.value.splice(index, 1)
}
async function handleAvatarUpload(event: Event) {
const target = event.target as HTMLInputElement
const file = target.files?.[0]
if (!file || !person.value) return
avatarUploading.value = true
try {
if (isTauri) {
const path = (file as any).path || file.name
await (window as any).__TAURI__.invoke('upload_profile_image', {
uuid: person.value.identity_uuid,
filePath: path,
})
} else {
await apiCall('upload_profile_image', {
uuid: person.value.identity_uuid,
file: file,
})
}
invalidateProfile(person.value.identity_uuid)
loadProfile(person.value.identity_uuid)
} catch (e) {
console.error('Avatar upload failed:', e)
} finally {
avatarUploading.value = false
target.value = ''
}
}
function triggerAvatarUpload() {
fileInput.value?.click()
}
async function unbindFace(f: any) {
if (!person.value) return
const uuid = person.value.identity_uuid
if (!confirm('解綁此人臉？')) return
try {
await apiCall('unbind_face', {
uuid,
faceId: f.face_id || f.faceId || null,
faceRowId: f.id || null,
fileUuid: f.file_uuid || f.fileUuid || '',
frameNumber: f.frame_number ?? f.frameNumber ?? null,
})
await loadFaces(uuid)
invalidatePeople()
await ensurePeople()
allPeople.value = peopleCache.value
const found = allPeople.value.find((p: any) => p.identity_uuid === uuid)
if (found) {
person.value = { ...found, status: found.status || 'confirmed' }
}
} catch (e) {
console.error('Unbind failed:', e)
alert('解綁失敗：' + (e instanceof Error ? e.message : String(e)))
}
}
async function updateStatus(status: string) {
if (!person.value) return
try {
await apiCall('update_identity_status', { uuid: person.value.identity_uuid, status })
person.value.status = status
await refreshPerson()
} catch (e) { console.error('Failed to update status:', e) }
}
function playMerged(m: any) {
const t = allTraces.value[m._startIdx]
if (!t) return
currentVideo.value = {
fileUuid: t.file_uuid || '',
startTime: t.first_sec || t.start_time || 0,
endTime: t.last_sec || t.end_time || 0,
traceIdx: m._startIdx,
title: `${person.value?.name} · #${m.start_frame}–#${m.end_frame}`,
}
playing.value = true
}
@@ -276,27 +645,87 @@ function formatTime(sec: number): string {
const m = Math.floor(sec / 60); const s = Math.floor(sec % 60)
return `${m}:${s.toString().padStart(2, '0')}`
}
async function refreshPerson() {
invalidatePeople()
await ensurePeople()
allPeople.value = peopleCache.value
const uuid = person.value?.identity_uuid || (route.params.uuid as string)
const found = allPeople.value.find((p: any) => p.identity_uuid === uuid)
if (found) {
person.value = { ...found, status: found.status || 'confirmed' }
}
}
async function onMergeSearch() {
clearTimeout(mergeSearchTimer)
if (!mergeSearchQuery.value.trim()) { mergeSearchResults.value = []; return }
mergeSearchTimer = setTimeout(() => {
const q = mergeSearchQuery.value.toLowerCase()
mergeSearchResults.value = allPeople.value
.filter((p: any) => p.identity_uuid !== person.value?.identity_uuid && p.name.toLowerCase().includes(q))
.slice(0, 20)
}, 200)
}
async function confirmMergeTarget(target: any) {
if (!person.value) return
if (!confirm(`合併「${person.value.name}」到「${target.name}」？`)) return
try {
await apiCall('merge_identities', { uuid: person.value.identity_uuid, intoUuid: target.identity_uuid })
showMerge.value = false
router.back()
} catch (e) { console.error('Merge failed:', e) }
}
let mergeSearchTimer: any
</script>
<style scoped>
.people-view { max-width: 1200px; padding-top: 20px; }
.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }
.ms-ppl-edit-text-btn { border: none; background: transparent; font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 13px; color: #5f6368; cursor: pointer; outline: none; padding: 4px 10px; display: flex; align-items: center; gap: 4px; transition: color .15s; }
.ms-ppl-edit-text-btn:hover { color: #202124; }
.loading-state, .empty { text-align: center; padding: 60px 0; color: #5f6368; }
.spinner-lg { width: 24px; height: 24px; border: 3px solid #e8eaed; border-top-color: #202124; border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.close-btn { position: absolute; top: 16px; right: 16px; }
.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }
.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }
.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; position: relative; }
.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.ms-ppl-avatar-editable { cursor: pointer; }
.ms-ppl-avatar-upload-hint { position: absolute; inset: 0; border-radius: 20px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.ms-ppl-avatar-editable:hover .ms-ppl-avatar-upload-hint { opacity: 1; }
.ms-ppl-avatar-upload-hint svg { color: #fff; }
.ms-silhouette { width: 100%; height: 100%; }
.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }
.ms-ppl-star-btn.starred { color: #f59e0b; }
.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }
.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ms-ppl-edit-name-row { margin-bottom: 8px; }
.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }
.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }
.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }
.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }
.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }
.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }
.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }
.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }
.ms-ppl-alias-locale-select { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 10px; font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 12px; color: #202124; background: #fff; outline: none; cursor: pointer; height: 30px; }
.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }
.ms-ppl-edit-field-row--top { align-items: flex-start; }
.ms-ppl-edit-label { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }
.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }
.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }
.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }
.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }
.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }
.ms-ppl-edit-field-input { flex: 1; min-width: 0; }
.ms-ppl-view-box { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }
.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }
.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }
@@ -306,17 +735,27 @@ function formatTime(sec: number): string {
.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }
.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }
.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }
.ms-ppl-strip-face-clickable.selected { outline: 2px solid #1a56db; outline-offset: 2px; border-radius: 14px; }
.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }
.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }
.ms-ppl-face-card-detail { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 16px; margin: 12px 0; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ms-ppl-face-card-close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer; color: #9aa0a6; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.ms-ppl-face-card-close:hover { background: #f3f4f6; color: #202124; }
.ms-ppl-face-card-img-wrap { width: 120px; height: 120px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #e8eaed; }
.ms-ppl-face-card-info { flex: 1; min-width: 0; }
.ms-ppl-face-card-file { font-size: 13px; color: #5f6368; font-family: monospace; }
.ms-ppl-face-card-frame { font-size: 13px; color: #3c4043; margin-top: 2px; }
.ms-ppl-face-card-conf { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
.ms-ppl-face-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }
.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }
.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }
.ms-ppl-media-item { cursor: pointer; border-radius: 12px; overflow: visible; background: #f0f0f0; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }
.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.ms-ppl-media-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }
.ms-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }
.ms-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }
.ms-ppl-media-item:hover .ms-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }
.ms-ppl-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }
.ms-ppl-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }
.ms-ppl-media-item:hover .ms-ppl-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }
.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }
.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
@@ -326,10 +765,22 @@ function formatTime(sec: number): string {
.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }
.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }
.face-placeholder { font-size: 0.6rem; color: #5f6368; }
.merge-input { width: 100%; padding: 10px 14px; border: 1.5px solid #d1d5db; border-radius: 10px; margin-bottom: 16px; font-size: 0.9rem; outline: none; }
.merge-input:focus { border-color: #202124; }
.ms-modal-actions { display: flex; justify-content: flex-end; }
h2 { margin: 0 0 16px; font-size: 1rem; }
.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; max-height: 50vh; overflow-y: auto; }
.ms-silhouette { width: 100%; height: 100%; }
</style>
.ms-ppl-actions-section { display: flex; flex-direction: column; gap: 8px; }
.ms-ppl-actions-status { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f8f9fa; border-radius: 10px; font-size: 13px; }
.ms-ppl-actions-label { color: #5f6368; font-weight: 500; }
.ms-ppl-actions-value { color: #202124; font-weight: 600; text-transform: capitalize; }
.ms-ppl-media-badge-conf { position: absolute; top: 5px; left: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.segment-card { max-width: 320px; margin-bottom: 20px; }
/* Context menu */
.ms-ctx-menu { position: fixed; z-index: 99999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 140px; font-size: 13px; color: #222; }
.ms-ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; border: none; background: transparent; width: 100%; text-align: left; font-size: 13px; color: #222; font-family: inherit; }
.ms-ctx-item:hover { background: #f3f4f6; }
.ms-ctx-item.ms-ctx-danger { color: #d93025; }
.ms-ctx-item.ms-ctx-danger:hover { background: #fce8e6; }
.ms-ctx-item-disabled { padding: 8px 12px; font-size: 12px; color: #9aa0a6; cursor: default; }
/* Remove button for face strip */
.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }
.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }
</style>

1193
src/views/SearchView.vue
View File

File diff suppressed because it is too large Load Diff