nuxt-app/app/components/character/CharacterDetailModal.vue

<script setup lang="ts">
interface CharacterDetail {
  slug?: string;
  name: string;
  avatar?: string | null;
  description?: string | null;
  personality?: string | null;
  scenario?: string | null;
  firstMessage?: string | null;
  exampleDialogue?: string | null;
  tags?: string[];
}

const show = defineModel<boolean>({ required: true });
defineProps<{ card: CharacterDetail | null }>();
const emit = defineEmits<{ start: [slug: string] }>();
</script>

<template>
  <BoDialog v-model:show="show" :mask-can-close="true">
    <div class="detail-dialog">
      <template v-if="card">
        <div class="detail-header">
          <div class="detail-avatar">
            <img v-if="card.avatar" :src="card.avatar" :alt="card.name" />
            <span v-else>{{ card.name.charAt(0) }}</span>
          </div>
          <div class="detail-title">
            <div class="detail-name">{{ card.name }}</div>
            <div v-if="card.tags && card.tags.length" class="detail-tags">
              <span v-for="t in card.tags" :key="t" class="tag">{{ t }}</span>
            </div>
          </div>
        </div>

        <p v-if="card.description" class="detail-desc">{{ card.description }}</p>

        <div v-if="card.personality" class="detail-section">
          <div class="section-label">性格</div>
          <p class="section-text">{{ card.personality }}</p>
        </div>

        <div v-if="card.scenario" class="detail-section">
          <div class="section-label">世界观 / 场景</div>
          <p class="section-text">{{ card.scenario }}</p>
        </div>

        <div v-if="card.exampleDialogue" class="detail-section">
          <div class="section-label">对话示例</div>
          <p class="section-text section-pre">{{ card.exampleDialogue }}</p>
        </div>

        <div v-if="card.firstMessage" class="detail-section">
          <div class="section-label">开场白</div>
          <p class="section-text section-italic">“{{ card.firstMessage }}”</p>
        </div>

        <button
          v-if="card.slug"
          class="start-btn"
          @click="emit('start', card.slug)"
        >
          开始对话
        </button>
      </template>
    </div>
  </BoDialog>
</template>

<style scoped>
.detail-dialog {
  width: 480px;
  max-width: calc(100vw - 48px);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-canvas);
  border-radius: 16px;
  padding: 24px;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 28px;
}

.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-title {
  min-width: 0;
  padding-top: 4px;
}

.detail-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-ink);
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tag {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-primary-active);
  background: rgba(204, 120, 92, 0.1);
}

.detail-desc {
  font-size: 14px;
  color: var(--color-body);
  line-height: 1.6;
  margin: 0 0 16px;
}

.detail-section {
  margin-bottom: 14px;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.section-text {
  font-size: 14px;
  color: var(--color-body);
  line-height: 1.6;
  margin: 0;
}

.section-pre {
  white-space: pre-wrap;
}

.section-italic {
  font-style: italic;
  color: var(--color-muted);
}

.start-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.start-btn:hover {
  background: var(--color-primary-active);
}
</style>