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>
123 lines
2.2 KiB
Vue
123 lines
2.2 KiB
Vue
<template>
|
|
<view
|
|
v-if="visible"
|
|
class="drawer"
|
|
:class="{ 'drawer--visible': visible }"
|
|
@click="handleMaskClick"
|
|
>
|
|
<view class="drawer__content" :style="{ width }" @click.stop>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
visible: Boolean,
|
|
width: { type: String, default: '600rpx' },
|
|
position: { type: String, default: 'right' } // right, left, top, bottom
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
function handleMaskClick() {
|
|
emit('close')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
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;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: $bg-secondary;
|
|
border-left: 1rpx solid $border-color;
|
|
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);
|
|
}
|
|
}
|
|
|
|
// 不同的位置动画
|
|
.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>
|