feat: 实现游戏核心系统和UI组件

核心系统:
- 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>

components/layout/Drawer.vue

@@ -1,5 +1,10 @@
 <template>
-  <view v-if="visible" class="drawer" @click="handleMaskClick">
+  <view
+    v-if="visible"
+    class="drawer"
+    :class="{ 'drawer--visible': visible }"
+    @click="handleMaskClick"
+  >
     <view class="drawer__content" :style="{ width }" @click.stop>
       <slot></slot>
     </view>
@@ -9,7 +14,8 @@
 <script setup>
 const props = defineProps({
   visible: Boolean,
-  width: { type: String, default: '600rpx' }
+  width: { type: String, default: '600rpx' },
+  position: { type: String, default: 'right' } // right, left, top, bottom
 })
 
 const emit = defineEmits(['close'])
@@ -26,9 +32,20 @@ function handleMaskClick() {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0,0,0,0.6);
   z-index: 999;
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    animation: fadeIn 0.3s ease forwards;
+  }
+
   &__content {
     position: absolute;
     top: 0;
@@ -36,14 +53,70 @@ function handleMaskClick() {
     bottom: 0;
     background-color: $bg-secondary;
     border-left: 1rpx solid $border-color;
-    animation: slideIn 0.3s ease;
     display: flex;
     flex-direction: column;
+    box-shadow: -4rpx 0 20rpx rgba(0, 0, 0, 0.3);
+    animation: slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 }
 
-@keyframes slideIn {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+// 不同的位置动画
+.drawer--left {
+  .drawer__content {
+    right: auto;
+    left: 0;
+    border-left: none;
+    border-right: 1rpx solid $border-color;
+    animation: slideInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow: 4rpx 0 20rpx rgba(0, 0, 0, 0.3);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+// 关闭动画 (需要配合Vue transition组件实现更复杂的动画)
+.drawer.drawer--closing {
+  &::before {
+    animation: fadeOut 0.2s ease forwards;
+  }
+
+  .drawer__content {
+    animation: slideOutRight 0.2s ease forwards;
+  }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
 }
 </style>