Tune result card towards medical Apple style
This commit is contained in:
Dualmind-Assistant
+125
-33
@@ -47,6 +47,20 @@ const painQuestion = computed(() =>
|
||||
questions.value.find((q) => q.code === 'pain_intensity') ?? null,
|
||||
)
|
||||
|
||||
const priorityClass = computed(() => {
|
||||
const level = result.value?.suggested_priority_level
|
||||
if (!level) return ''
|
||||
if (level === 'RED_OR_ORANGE') return 'priority-high'
|
||||
return 'priority-default'
|
||||
})
|
||||
|
||||
const priorityLabel = computed(() => {
|
||||
const level = result.value?.suggested_priority_level
|
||||
if (!level) return ''
|
||||
if (level === 'RED_OR_ORANGE') return 'Hohe Dringlichkeit'
|
||||
return 'Priorität'
|
||||
})
|
||||
|
||||
async function loadQuestions() {
|
||||
isLoadingConfig.value = true
|
||||
loadError.value = null
|
||||
@@ -118,8 +132,11 @@ async function startSession() {
|
||||
<main class="app">
|
||||
<section class="shell">
|
||||
<header class="header">
|
||||
<div class="header-icon">✚</div>
|
||||
<div>
|
||||
<h1>Triage-Fragen</h1>
|
||||
<p class="subtitle">Schnelle Vorab-Erfassung für die Notaufnahme</p>
|
||||
<p class="subtitle">Vorab-Erfassung für die Notaufnahme</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="block">
|
||||
@@ -135,7 +152,7 @@ async function startSession() {
|
||||
</section>
|
||||
|
||||
<template v-if="!isLoadingConfig && !loadError">
|
||||
<section v-if="chiefComplaintQuestion" class="block">
|
||||
<section v-if="chiefComplaintQuestion" class="block card">
|
||||
<SymptomSelector
|
||||
v-model="chiefComplaint"
|
||||
:title="chiefComplaintQuestion.title"
|
||||
@@ -143,7 +160,7 @@ async function startSession() {
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section v-if="chiefComplaint && painQuestion" class="block">
|
||||
<section v-if="chiefComplaint && painQuestion" class="block card">
|
||||
<PainSlider
|
||||
v-model="pain"
|
||||
:title="painQuestion.title"
|
||||
@@ -163,24 +180,31 @@ async function startSession() {
|
||||
{{ submitError }}
|
||||
</section>
|
||||
|
||||
<section v-if="result" class="result block">
|
||||
<section v-if="result" class="result block" :class="priorityClass">
|
||||
<div class="result-header">
|
||||
<div>
|
||||
<h2>Vorbereitung für MTS</h2>
|
||||
<p>
|
||||
Sitzungs-ID:
|
||||
<strong>{{ result.session_id }}</strong>
|
||||
<p class="result-subtitle">Automatisierte Einschätzung anhand der Antworten</p>
|
||||
</div>
|
||||
<p v-if="priorityLabel" class="priority-pill">
|
||||
{{ priorityLabel }}
|
||||
</p>
|
||||
<p v-if="result.proposed_presenting_flowchart">
|
||||
Vorgeschlagenes Flussdiagramm:
|
||||
<strong>{{ result.proposed_presenting_flowchart }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="result-body">
|
||||
<p class="result-line">
|
||||
<span class="label">Sitzungs-ID</span>
|
||||
<span class="value">{{ result.session_id }}</span>
|
||||
</p>
|
||||
<p v-if="result.red_flag_indicators.length">
|
||||
Red Flags:
|
||||
<strong>{{ result.red_flag_indicators.join(', ') }}</strong>
|
||||
<p v-if="result.proposed_presenting_flowchart" class="result-line">
|
||||
<span class="label">Flussdiagramm</span>
|
||||
<span class="value">{{ result.proposed_presenting_flowchart }}</span>
|
||||
</p>
|
||||
<p v-if="result.suggested_priority_level">
|
||||
Vorgeschlagene Priorität:
|
||||
<strong>{{ result.suggested_priority_level }}</strong>
|
||||
<p v-if="result.red_flag_indicators.length" class="result-line">
|
||||
<span class="label">Red Flags</span>
|
||||
<span class="value">{{ result.red_flag_indicators.join(', ') }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
@@ -195,7 +219,7 @@ async function startSession() {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background: #f5f5f7;
|
||||
background: #f2f2f7;
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
|
||||
color: #111827;
|
||||
}
|
||||
@@ -204,34 +228,54 @@ async function startSession() {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
|
||||
padding: 1.75rem 1.5rem 2rem;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
|
||||
padding: 1.75rem 1.5rem 2.1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, #ff3b30, #ff6b5b);
|
||||
color: #ffffff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.1rem 1rem 1rem;
|
||||
border-radius: 20px;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 2rem;
|
||||
margin-top: 1.9rem;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
@@ -275,19 +319,67 @@ button.primary:disabled {
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 2rem;
|
||||
padding: 1.25rem 1rem 1rem;
|
||||
margin-top: 1.8rem;
|
||||
padding: 1.2rem 1rem 1rem;
|
||||
border-radius: 20px;
|
||||
background: #f9fafb;
|
||||
border-left: 4px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.result h2 {
|
||||
font-size: 1.1rem;
|
||||
.result.priority-high {
|
||||
background: #fef2f2;
|
||||
border-left-color: #ff3b30;
|
||||
}
|
||||
|
||||
.result.priority-default {
|
||||
background: #eff6ff;
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.result p {
|
||||
.result h2 {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.result-subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.priority-pill {
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.result-body {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.result-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.result-line .label {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.result-line .value {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user