cb412544e9
Features: - Combat system with AP/EP hit calculation and three-layer defense - Auto-combat/farming mode - Item system with stacking support - Skill system with levels, milestones, and parent skill sync - Shop system with dynamic pricing - Inventory management with bulk selling - Event system - Game loop with offline earnings - Save/Load system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
148 lines
2.8 KiB
Vue
148 lines
2.8 KiB
Vue
<template>
|
||
<view class="event-drawer">
|
||
<view class="event-header">
|
||
<text class="event-title">{{ eventData.title }}</text>
|
||
<text class="event-close" @click="close">×</text>
|
||
</view>
|
||
|
||
<view class="event-content">
|
||
<!-- NPC信息 -->
|
||
<view v-if="eventData.npc" class="npc-info">
|
||
<text class="npc-name">{{ eventData.npc.name }}</text>
|
||
</view>
|
||
|
||
<!-- 对话文本 -->
|
||
<scroll-view class="dialogue-text" scroll-y>
|
||
<text class="dialogue-content">{{ eventData.text }}</text>
|
||
</scroll-view>
|
||
|
||
<!-- 选项按钮 -->
|
||
<view class="dialogue-choices">
|
||
<TextButton
|
||
v-for="choice in eventData.choices"
|
||
:key="choice.text"
|
||
:text="choice.text"
|
||
@click="selectChoice(choice)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useGameStore } from '@/store/game'
|
||
import { usePlayerStore } from '@/store/player'
|
||
import { handleDialogueChoice } from '@/utils/eventSystem'
|
||
import TextButton from '@/components/common/TextButton.vue'
|
||
|
||
const game = useGameStore()
|
||
const player = usePlayerStore()
|
||
|
||
const emit = defineEmits(['close'])
|
||
|
||
const eventData = computed(() => {
|
||
if (!game.currentEvent) {
|
||
return {
|
||
title: '事件',
|
||
npc: null,
|
||
text: '暂无事件',
|
||
choices: []
|
||
}
|
||
}
|
||
|
||
return {
|
||
title: game.currentEvent.npc?.name || '事件',
|
||
npc: game.currentEvent.npc,
|
||
text: game.currentEvent.text || '',
|
||
choices: game.currentEvent.choices || []
|
||
}
|
||
})
|
||
|
||
function close() {
|
||
emit('close')
|
||
}
|
||
|
||
function selectChoice(choice) {
|
||
const result = handleDialogueChoice(game, player, choice)
|
||
|
||
if (result.closeEvent) {
|
||
close()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.event-drawer {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: $bg-secondary;
|
||
}
|
||
|
||
.event-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid $border-color;
|
||
}
|
||
|
||
.event-title {
|
||
color: $text-primary;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.event-close {
|
||
color: $text-secondary;
|
||
font-size: 48rpx;
|
||
padding: 0 16rpx;
|
||
|
||
&:active {
|
||
color: $text-primary;
|
||
}
|
||
}
|
||
|
||
.event-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.npc-info {
|
||
padding: 16rpx;
|
||
background-color: $bg-primary;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.npc-name {
|
||
color: $accent;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dialogue-text {
|
||
flex: 1;
|
||
max-height: 400rpx;
|
||
margin-bottom: 24rpx;
|
||
padding: 16rpx;
|
||
background-color: $bg-primary;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.dialogue-content {
|
||
color: $text-primary;
|
||
font-size: 28rpx;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.dialogue-choices {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
</style>
|