70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="character-list">
|
||
|
|
<div class="list-header">
|
||
|
|
<h3>登场角色</h3>
|
||
|
|
<span class="count-badge">{{ characters.length }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="list-body">
|
||
|
|
<CharacterCard
|
||
|
|
v-for="char in characters"
|
||
|
|
:key="char.id"
|
||
|
|
:character="char"
|
||
|
|
:is-selected="char.id === selectedId"
|
||
|
|
@select="$emit('select-character', char.id)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { Character } from '../../types/character'
|
||
|
|
import CharacterCard from './CharacterCard.vue'
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
characters: Character[]
|
||
|
|
selectedId: string | null
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
'select-character': [id: string]
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.character-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-header h3 {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.count-badge {
|
||
|
|
font-size: 0.7rem;
|
||
|
|
padding: 0.15rem 0.5rem;
|
||
|
|
border-radius: 10px;
|
||
|
|
background: var(--accent-primary);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-body {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 0.5rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
</style>
|