emoon-portal/src/cards/DepartmentSelectionCard.vue

<template>
  <section class="business-card">
    <h2>推荐科室</h2>
    <article v-for="dept in departments" :key="dept.departmentId" class="option">
      <h3>{{ dept.name }}</h3>
      <p>{{ dept.reason }}</p>
      <button @click="$emit('action', 'select_department')">选择{{ dept.name }}</button>
    </article>
  </section>
</template>

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

const props = defineProps<{ card: CardInstance }>();
defineEmits<{ action: [actionName: string] }>();

interface DepartmentOption {
  departmentId: string;
  name: string;
  reason: string;
}

const departments = computed(() => (props.card.cardData.departments as DepartmentOption[]) ?? []);
</script>

<style scoped>
.business-card {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.option {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 10px;
  background: var(--soft-tint);
}

h3 {
  margin: 0;
  color: var(--brand-primary);
}

p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

button {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  background: var(--brand-primary);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}
</style>