text-adventure-game/pages/index/index.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>