Spaces:
Running
Running
File size: 1,651 Bytes
8b9f7d9 81046e2 8b9f7d9 81046e2 8b9f7d9 81046e2 8b9f7d9 81046e2 8b9f7d9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script setup lang="ts">
import { ref } from 'vue'
import type { Citation } from '../types'
import type { Lang } from '../i18n'
import { t } from '../i18n'
defineProps<{
citations: Citation[]
lang: Lang
}>()
const isOpen = ref(false)
function scoreColor(score: number): string {
if (score >= 0.8) return '#44aa44'
if (score >= 0.6) return '#aaaa44'
return '#aa7744'
}
function scoreBar(score: number): string {
return `${Math.round(score * 100)}%`
}
</script>
<template>
<div>
<button class="citations-toggle" @click="isOpen = !isOpen">
📜 {{ t('citations.sources', lang) }} ({{ citations.length }})
{{ isOpen ? '▲' : '▼' }}
</button>
<div v-if="isOpen" class="citations-panel">
<div
v-for="c in citations"
:key="c.rank"
class="citation-item"
>
<div class="citation-header">
<span>#{{ c.rank }}</span>
<span style="margin-left: 0.75rem;">
📄 {{ c.source }} — {{ t('citations.page', lang) }} {{ c.page_num }}
</span>
<span style="margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;">
<span
style="display: inline-block; height: 8px; border-radius: 2px;"
:style="{ width: scoreBar(c.score), background: scoreColor(c.score), minWidth: '20px' }"
></span>
<span style="font-size: 0.75rem; color: var(--wc3-text-dim);">
{{ (c.score * 100).toFixed(0) }}%
</span>
</span>
</div>
<div class="citation-text">{{ c.text }}</div>
</div>
</div>
</div>
</template>
|