fix: Search mode select dropdown + People debug log

This commit is contained in:
2026-06-14 16:42:29 +08:00
parent cad70974b8
commit 8af1f0408d
2 changed files with 7 additions and 16 deletions

View File

@@ -144,6 +144,7 @@ const filteredPeople = computed(() => {
onMounted(async () => {
try {
const result: any = await invoke('get_people', { page: 1, per_page: 1000 })
console.log('get_people result:', result, Array.isArray(result), result?.length)
people.value = Array.isArray(result) ? result : []
} catch (e) {
console.error('Failed to load people:', e)

View File

@@ -1,20 +1,14 @@
<template>
<div class="search-view">
<div class="search-header">
<h1>Search</h1>
<div class="mode-selector">
<button v-for="m in modes" :key="m.value"
:class="['mode-btn', { active: mode === m.value }]"
@click="mode = m.value">
{{ m.label }}
</button>
</div>
</div>
<h1>Search</h1>
<div class="search-bar">
<input v-model="query" @keyup.enter="search"
placeholder="Enter search query..."
:disabled="loading" />
<select v-model="mode" class="mode-select">
<option v-for="m in modes" :key="m.value" :value="m.value">{{ m.label }}</option>
</select>
<button class="ms-fm-btn ms-fm-btn-primary" @click="search" :disabled="loading || !query">
<span v-if="loading" class="spinner"></span>
{{ loading ? 'Searching...' : 'Search' }}
@@ -120,16 +114,12 @@ function playVideo(r: any) {
<style scoped>
.search-view { max-width: 900px; }
.search-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
h1 { font-size: 1.5rem; }
.mode-selector { display: flex; gap: 8px; }
.mode-btn { padding: 8px 16px; border: 1.5px solid #d1d5db; background: #fff; border-radius: 10px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.15s; }
.mode-btn:hover { background: #f3f4f6; }
.mode-btn.active { background: #202124; color: #fff; border-color: #202124; }
h1 { font-size: 1.5rem; margin-bottom: 24px; }
.search-bar { display: flex; gap: 10px; margin-bottom: 24px; }
.search-bar input { flex: 1; padding: 12px 16px; border: 1.5px solid #d1d5db; border-radius: 10px; font-size: 1rem; outline: none; transition: border-color 0.15s; }
.search-bar input:focus { border-color: #202124; }
.search-bar input:disabled { background: #f3f4f6; }
.mode-select { padding: 12px 16px; border: 1.5px solid #d1d5db; border-radius: 10px; font-size: 0.9rem; background: #fff; cursor: pointer; outline: none; }
.result-card { display: flex; gap: 16px; background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.result-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.result-thumb { width: 120px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #e8eaed; }