69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<template>
|
|
<div class="p-6 max-w-4xl mx-auto">
|
|
<div class="mb-5">
|
|
<h1 class="text-text-primary text-xl font-semibold mb-1">Diagnose</h1>
|
|
<p class="text-text-dim text-sm">
|
|
Quick: describe a symptom to surface log evidence.
|
|
Structured: tag a timestamped incident record.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tab toggle -->
|
|
<div class="flex gap-1 mb-6 border-b border-surface-border">
|
|
<button
|
|
v-for="t in tabs"
|
|
:key="t.key"
|
|
@click="activeTab = t.key"
|
|
:class="[
|
|
'px-4 py-2 text-sm transition-colors border-b-2 -mb-px',
|
|
activeTab === t.key
|
|
? 'border-accent text-accent'
|
|
: 'border-transparent text-text-muted hover:text-text-primary'
|
|
]"
|
|
>{{ t.label }}</button>
|
|
</div>
|
|
|
|
<!-- Quick tab -->
|
|
<QuickCapture v-if="activeTab === 'quick'" />
|
|
|
|
<!-- Structured tab -->
|
|
<template v-else>
|
|
<IncidentForm @created="onCreated" />
|
|
<div
|
|
v-if="createdLabel"
|
|
class="mt-4 p-3 rounded bg-green-900/30 border border-green-700/40 text-green-400 text-sm"
|
|
>
|
|
Incident "{{ createdLabel }}" saved —
|
|
<RouterLink to="/incidents" class="underline underline-offset-2">view in Incidents</RouterLink>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import { useRoute, RouterLink } from 'vue-router'
|
|
import QuickCapture from '@/components/QuickCapture.vue'
|
|
import IncidentForm from '@/components/IncidentForm.vue'
|
|
|
|
const route = useRoute()
|
|
const tabs: { key: 'quick' | 'structured'; label: string }[] = [
|
|
{ key: 'quick', label: 'Quick' },
|
|
{ key: 'structured', label: 'Structured' },
|
|
]
|
|
const activeTab = ref<'quick' | 'structured'>('quick')
|
|
const createdLabel = ref('')
|
|
|
|
onMounted(() => {
|
|
if (route.query.tab === 'structured') activeTab.value = 'structured'
|
|
})
|
|
|
|
watch(() => route.query.tab, (tab) => {
|
|
if (tab === 'structured' || tab === 'quick') activeTab.value = tab
|
|
})
|
|
|
|
function onCreated(label: string) {
|
|
createdLabel.value = label
|
|
setTimeout(() => { createdLabel.value = '' }, 4000)
|
|
}
|
|
</script>
|