make addition ui fixes for cramped features

2026-08-12 06:11:30 +08:00
parent 4c5aafe591
commit 53338906aa
18 changed files with 668 additions and 317 deletions
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="observation-card observation-card--readonly"
+    :class="{ 'observation-card--verified': checked }"
+    data-testid="verification-field-card"
+  >
+    <div class="observation-card__rail" aria-hidden="true">
+      <span class="observation-card__dot" />
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <div class="flex items-start justify-between gap-2">
+        <div class="min-w-0">
+          <div class="flex flex-wrap items-center gap-1.5">
+            <p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
+              {{ label }}
+            </p>
+            <OcrConfidenceBadge
+              v-if="ocrLabel"
+              :label="ocrLabel"
+              :level="ocrLevel"
+            />
+          </div>
+          <p
+            class="mt-0.5 text-base font-bold leading-snug text-ink-strong break-words"
+            :class="valueClass"
+          >
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <label
+          class="inline-flex shrink-0 items-center gap-1.5 rounded-input border px-2 py-1 text-xs font-semibold cursor-pointer transition-colors"
+          :class="checked
+            ? 'border-clinical-safe bg-clinical-safe-bg text-clinical-safe'
+            : 'border-line bg-surface text-ink-secondary hover:border-primary-300'"
+        >
+          <input
+            type="checkbox"
+            class="w-3.5 h-3.5 text-clinical-safe rounded"
+            :checked="checked"
+            @change="$emit('toggle', ($event.target as HTMLInputElement).checked)"
+          />
+          OK
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { OcrConfidenceLevel } from '../composables/useOcrFieldConfidence'
+import OcrConfidenceBadge from './OcrConfidenceBadge.vue'
+
+const props = defineProps<{
+  label: string
+  value: string | null | undefined
+  checked: boolean
+  valueClass?: string
+  ocrLabel?: string | null
+  ocrLevel?: OcrConfidenceLevel | null
+}>()
+
+defineEmits<{
+  (e: 'toggle', checked: boolean): void
+}>()
+
+const displayValue = computed(() => {
+  const raw = props.value
+  if (raw == null || String(raw).trim() === '') return '(empty)'
+  return String(raw)
+})
+</script>