ROOG
20c759150a
- 角色管理：CRUD API + 卡片网格UI，每个角色约200字描述 - 世界观设定：单篇长文编辑器，建议500字以上 - 章节管理：CRUD + 排序 API，左右分栏编辑器，单章5000字上限 - AI工具调用：支持工具审批流程和结构化工具调用 - 小说详情页新增章节、角色、世界观入口按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
107 lines
2.5 KiB
Vue
107 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { Character } from '@/types/character'
|
|
|
|
defineProps<{
|
|
character: Character
|
|
}>()
|
|
|
|
defineEmits<{
|
|
edit: [character: Character]
|
|
delete: [character: Character]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="character-card">
|
|
<div class="card-header">
|
|
<h3 class="card-name">{{ character.name }}</h3>
|
|
<div class="card-actions">
|
|
<button class="action-btn" title="编辑" @click="$emit('edit', character)">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M10.5 1.5l2 2-8 8H2.5v-2z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
<button class="action-btn action-btn--danger" title="删除" @click="$emit('delete', character)">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M2 4h10M5 4V2.5h4V4M3.5 4v8h7V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="card-desc">{{ character.description || '暂无描述' }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.character-card {
|
|
background: var(--paper-50);
|
|
border: 1px solid var(--paper-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-lg);
|
|
transition: transform var(--duration-fast) var(--ease-out-smooth),
|
|
box-shadow var(--duration-fast) var(--ease-out-smooth);
|
|
}
|
|
|
|
.character-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 24px rgba(26, 26, 46, 0.08);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
.card-name {
|
|
font-family: var(--font-display);
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--ink-900);
|
|
}
|
|
|
|
.card-actions {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
opacity: 0;
|
|
transition: opacity var(--duration-fast) ease;
|
|
}
|
|
|
|
.character-card:hover .card-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--paper-100);
|
|
color: var(--ink-400);
|
|
cursor: pointer;
|
|
transition: all var(--duration-fast) ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--paper-200);
|
|
color: var(--ink-700);
|
|
}
|
|
|
|
.action-btn--danger:hover {
|
|
background: #fef2f2;
|
|
color: var(--vermilion);
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: 0.9rem;
|
|
color: var(--ink-500);
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
</style>
|