emoon-portal/src/cards/DoctorSelectionCard.vue

<template>
  <section class="doc-list">
    <div
      v-for="(doc, idx) in doctors"
      :key="doc.doctorId"
      :class="['doc-card', { rec: idx === 0 }]"
      @click="select(doc)"
    >
      <div class="doc-av">{{ doc.name.charAt(0) }}</div>
      <div class="doc-info">
        <div class="doc-name">{{ doc.name }}</div>
        <div class="doc-dept">{{ doc.title }}</div>
        <div v-if="doc.specialty" class="doc-skill">擅长：{{ doc.specialty }}</div>
      </div>
      <span v-if="idx === 0" class="doc-rec-badge">推荐</span>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useTerminalStore } from '../state/terminalStore';
import type { CardInstance } from '../api/types';

const props = defineProps<{ card: CardInstance }>();
const emit = defineEmits<{ action: [data: { actionName: string; payload: Record<string, unknown> }] }>();
const store = useTerminalStore();

interface DoctorOption {
  doctorId: string;
  name: string;
  title: string;
  specialty?: string;
  room?: string;
}

const doctors = computed(() => (props.card.cardData.doctors as DoctorOption[]) ?? []);

function select(doc: DoctorOption) {
  if (store.cardActionSubmitting) return;
  emit('action', {
    actionName: 'select_doctor',
    payload: { doctorId: doc.doctorId, doctorName: doc.name, doctorTitle: doc.title },
  });
}
</script>

<style scoped>
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.doc-card:hover {
  border-color: var(--accent);
}

.doc-card.rec {
  border-color: var(--accent);
  background: var(--accent-faint);
}

.doc-av {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
  font-family: var(--font-display);
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-name {
  font-size: var(--fs-body);
  font-weight: 500;
}

.doc-dept {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.doc-skill {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.doc-rec-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--surface);
  font-weight: 500;
  white-space: nowrap;
}
</style>