16223c89a5
核心系统: - combatSystem: 战斗逻辑、伤害计算、战斗状态管理 - skillSystem: 技能系统、技能解锁、经验值、里程碑 - taskSystem: 任务系统、任务类型、任务执行和完成 - eventSystem: 事件系统、随机事件处理 - environmentSystem: 环境系统、时间流逝、区域效果 - levelingSystem: 升级系统、属性成长 - soundSystem: 音效系统 配置文件: - enemies: 敌人配置、掉落表 - events: 事件配置、事件效果 - items: 物品配置、装备属性 - locations: 地点配置、探索事件 - skills: 技能配置、技能树 UI组件: - CraftingDrawer: 制造界面 - InventoryDrawer: 背包界面 - 其他UI优化和动画 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<template>
|
|
<view class="game-container">
|
|
<!-- 顶部标题栏 -->
|
|
<view class="game-header">
|
|
<text class="game-header__title">{{ currentTabName }}</text>
|
|
<text class="game-header__time">Day {{ gameTime.day }} {{ gameTimeText }}</text>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="game-content">
|
|
<StatusPanel v-show="game.currentTab === 'status'" />
|
|
<MapPanel v-show="game.currentTab === 'map'" />
|
|
<LogPanel v-show="game.currentTab === 'log'" />
|
|
</view>
|
|
|
|
<!-- 底部导航 -->
|
|
<TabBar
|
|
:tabs="tabs"
|
|
:modelValue="game.currentTab"
|
|
@update:modelValue="game.currentTab = $event"
|
|
/>
|
|
|
|
<!-- 背包抽屉 -->
|
|
<Drawer
|
|
:visible="game.drawerState.inventory"
|
|
@close="game.drawerState.inventory = false"
|
|
>
|
|
<InventoryDrawer @close="game.drawerState.inventory = false" />
|
|
</Drawer>
|
|
|
|
<!-- 事件抽屉 -->
|
|
<Drawer
|
|
:visible="game.drawerState.event"
|
|
@close="game.drawerState.event = false"
|
|
>
|
|
<EventDrawer @close="game.drawerState.event = false" />
|
|
</Drawer>
|
|
|
|
<!-- 商店抽屉 -->
|
|
<Drawer
|
|
:visible="game.drawerState.shop"
|
|
@close="game.drawerState.shop = false"
|
|
>
|
|
<ShopDrawer @close="game.drawerState.shop = false" />
|
|
</Drawer>
|
|
|
|
<!-- 制造抽屉 -->
|
|
<Drawer
|
|
:visible="game.drawerState.crafting"
|
|
@close="game.drawerState.crafting = false"
|
|
>
|
|
<CraftingDrawer @close="game.drawerState.crafting = false" />
|
|
</Drawer>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useGameStore } from '@/store/game'
|
|
import { usePlayerStore } from '@/store/player'
|
|
import TabBar from '@/components/layout/TabBar.vue'
|
|
import Drawer from '@/components/layout/Drawer.vue'
|
|
import StatusPanel from '@/components/panels/StatusPanel.vue'
|
|
import MapPanel from '@/components/panels/MapPanel.vue'
|
|
import LogPanel from '@/components/panels/LogPanel.vue'
|
|
import InventoryDrawer from '@/components/drawers/InventoryDrawer.vue'
|
|
import EventDrawer from '@/components/drawers/EventDrawer.vue'
|
|
import ShopDrawer from '@/components/drawers/ShopDrawer.vue'
|
|
import CraftingDrawer from '@/components/drawers/CraftingDrawer.vue'
|
|
|
|
const game = useGameStore()
|
|
const player = usePlayerStore()
|
|
|
|
const tabs = [
|
|
{ id: 'status', label: '状态', icon: '👤' },
|
|
{ id: 'map', label: '地图', icon: '🗺️' },
|
|
{ id: 'log', label: '日志', icon: '📜' }
|
|
]
|
|
|
|
const currentTabName = computed(() => {
|
|
return tabs.find(t => t.id === game.currentTab)?.label || ''
|
|
})
|
|
|
|
const gameTime = computed(() => game.gameTime)
|
|
|
|
const gameTimeText = computed(() => {
|
|
const h = String(gameTime.value.hour).padStart(2, '0')
|
|
const m = String(gameTime.value.minute).padStart(2, '0')
|
|
return `${h}:${m}`
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.game-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: $bg-primary;
|
|
}
|
|
|
|
.game-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16rpx 24rpx;
|
|
background-color: $bg-secondary;
|
|
border-bottom: 1rpx solid $border-color;
|
|
|
|
&__title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: $text-primary;
|
|
}
|
|
|
|
&__time {
|
|
color: $text-secondary;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.game-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|