feat: implement Phase 4 SvelteKit frontend + backend enhancements
Backend: - Add dashboard API (today stats, inbox count, law alerts, pipeline status) - Add /api/documents/tree endpoint for sidebar domain/sub_group tree - Migrate auth to HttpOnly cookie for refresh token (XSS defense) - Add /api/auth/logout endpoint (cookie cleanup) - Register dashboard router in main.py Frontend (SvelteKit + Tailwind CSS v4): - api.ts: fetch wrapper with refresh queue pattern, 401 single retry, forced logout on refresh failure - Auth store: login/logout/refresh with memory-based access token - UI store: toast system, sidebar state - Login page with TOTP support - Dashboard with 4 stat widgets + recent documents - Document list with hybrid search (debounce, URL query state, mode select) - Document detail with format-aware viewer (markdown/PDF/HWP/Synology/fallback) - Metadata panel (AI summary, tags, processing history) - Inbox triage UI (batch select, confirm dialog, domain override) - Settings page (password change, TOTP status) Infrastructure: - Enable frontend service in docker-compose - Caddy path routing (/api/* → fastapi, / → frontend) + gzip Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
181
frontend/src/routes/documents/+page.svelte
Normal file
181
frontend/src/routes/documents/+page.svelte
Normal file
@@ -0,0 +1,181 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
import { addToast } from '$lib/stores/ui';
|
||||
|
||||
let documents = [];
|
||||
let total = 0;
|
||||
let loading = true;
|
||||
let searchQuery = '';
|
||||
let searchMode = 'hybrid';
|
||||
let currentPage = 1;
|
||||
let searchResults = null;
|
||||
let debounceTimer;
|
||||
|
||||
// URL에서 초기 상태 복원
|
||||
onMount(() => {
|
||||
const params = $page.url.searchParams;
|
||||
searchQuery = params.get('q') || '';
|
||||
searchMode = params.get('mode') || 'hybrid';
|
||||
currentPage = parseInt(params.get('page') || '1');
|
||||
if (searchQuery) doSearch(); else loadDocuments();
|
||||
});
|
||||
|
||||
async function loadDocuments() {
|
||||
loading = true;
|
||||
searchResults = null;
|
||||
try {
|
||||
const data = await api(`/documents/?page=${currentPage}&page_size=20`);
|
||||
documents = data.items;
|
||||
total = data.total;
|
||||
} catch (err) {
|
||||
addToast('error', '문서 목록 로딩 실패');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearchInput() {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
if (searchQuery.trim()) {
|
||||
currentPage = 1;
|
||||
doSearch();
|
||||
} else {
|
||||
loadDocuments();
|
||||
updateUrl();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function doSearch() {
|
||||
loading = true;
|
||||
updateUrl();
|
||||
try {
|
||||
const data = await api(`/search/?q=${encodeURIComponent(searchQuery)}&mode=${searchMode}&limit=50`);
|
||||
searchResults = data.results;
|
||||
total = data.total;
|
||||
} catch (err) {
|
||||
addToast('error', '검색 실패');
|
||||
searchResults = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function updateUrl() {
|
||||
const params = new URLSearchParams();
|
||||
if (searchQuery) params.set('q', searchQuery);
|
||||
if (searchMode !== 'hybrid') params.set('mode', searchMode);
|
||||
if (currentPage > 1) params.set('page', String(currentPage));
|
||||
const qs = params.toString();
|
||||
goto(`/documents${qs ? '?' + qs : ''}`, { replaceState: true, noScroll: true });
|
||||
}
|
||||
|
||||
function changePage(p) {
|
||||
currentPage = p;
|
||||
if (searchQuery) doSearch(); else loadDocuments();
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
$: totalPages = Math.ceil(total / 20);
|
||||
$: items = searchResults || documents;
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen">
|
||||
<nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/" class="text-lg font-semibold hover:text-[var(--accent)]">PKM</a>
|
||||
<span class="text-[var(--text-dim)]">/</span>
|
||||
<span>문서</span>
|
||||
</div>
|
||||
<a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
|
||||
</nav>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-6">
|
||||
<!-- 검색바 -->
|
||||
<div class="flex gap-2 mb-6">
|
||||
<input
|
||||
data-search-input
|
||||
type="text"
|
||||
bind:value={searchQuery}
|
||||
oninput={handleSearchInput}
|
||||
placeholder="검색어 입력... (/ 키로 포커스)"
|
||||
class="flex-1 px-4 py-2.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] focus:border-[var(--accent)] outline-none"
|
||||
/>
|
||||
<select
|
||||
bind:value={searchMode}
|
||||
onchange={() => { if (searchQuery) doSearch(); }}
|
||||
class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
|
||||
>
|
||||
<option value="hybrid">하이브리드</option>
|
||||
<option value="fts">전문검색</option>
|
||||
<option value="trgm">부분매칭</option>
|
||||
<option value="vector">의미검색</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 결과 -->
|
||||
{#if loading}
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
<div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-20"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if items.length === 0}
|
||||
<div class="text-center py-20 text-[var(--text-dim)]">
|
||||
{#if searchQuery}
|
||||
<p class="text-lg mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
|
||||
<p class="text-sm">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
|
||||
{:else}
|
||||
<p class="text-lg">등록된 문서가 없습니다</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each items as doc}
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
class="flex items-center justify-between p-4 bg-[var(--surface)] border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition-colors"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="text-xs px-2 py-0.5 rounded bg-[var(--border)] text-[var(--text-dim)] uppercase shrink-0">{doc.file_format}</span>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium truncate">{doc.title || '제목 없음'}</p>
|
||||
{#if doc.ai_summary}
|
||||
<p class="text-xs text-[var(--text-dim)] truncate mt-0.5">{doc.ai_summary?.slice(0, 100)}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 shrink-0 ml-4">
|
||||
{#if doc.score !== undefined}
|
||||
<span class="text-xs text-[var(--accent)]">{(doc.score * 100).toFixed(0)}%</span>
|
||||
{/if}
|
||||
<span class="text-xs text-[var(--text-dim)]">{doc.ai_domain || ''}</span>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- 페이지네이션 -->
|
||||
{#if !searchResults && totalPages > 1}
|
||||
<div class="flex justify-center gap-2 mt-6">
|
||||
{#each Array(totalPages) as _, i}
|
||||
<button
|
||||
onclick={() => changePage(i + 1)}
|
||||
class="px-3 py-1 rounded text-sm"
|
||||
class:bg-[var(--accent)]={currentPage === i + 1}
|
||||
class:text-white={currentPage === i + 1}
|
||||
class:bg-[var(--surface)]={currentPage !== i + 1}
|
||||
class:text-[var(--text-dim)]={currentPage !== i + 1}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user