重新整理 App.vue 整体页面各组件布局

[hexianWeb]

重新设计 App.vue 的整体布局，确保所有内容能在 100vw & 100vh 视窗内完整展示，同时保持所有功能基本不变。

当前问题

1. 使用固定高度 h-[calc(100vh-200px)] 可能导致在不同屏幕尺寸下布局不适配
2. 地图总览使用绝对定位和复杂 transform，在移动端体验不佳
3. 整体布局缺乏响应式设计，无法充分利用全屏空间

验收标准

1. 所有功能基本不变：保持现有所有交互逻辑、事件监听、状态管理等功能
2. 内容可在100vw & 100vh 视窗内展示：重新设计布局以适应全屏显示，确保在各种屏幕尺寸下都能完整展示所有组件

技术要求

• 使用 Tailwind CSS 响应式工具类优化布局
• 采用更灵活的布局方案替代固定高度计算
• 优化地图总览的显示方式，提升移动端体验
• 确保 GameCanvas 和其他组件在全屏模式下正确渲染

涉及组件

• RestorePrompt
• TopBar
• BuildingSidebar
• ModeIndicator
• SelectedIndicator
• BuildingDetails
• MapOverview
• DashboardFooter
• ToastContainer
• ConfirmDialog
• GameCanvas

[linear]

HX-48