122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<!-- EntityConfigPanel.vue - 实体配置面板组件 -->
|
|
<template>
|
|
<div class="entity-config-panel">
|
|
<div class="config-header">
|
|
<h3>实体配置</h3>
|
|
<el-button-group size="small">
|
|
<el-button @click="resetConfig">重置</el-button>
|
|
<el-button type="primary" @click="saveConfig">保存</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
|
|
<div class="config-content">
|
|
<el-form :model="config" label-width="80px" size="small">
|
|
<el-form-item label="实体类型">
|
|
<el-select v-model="config.type" placeholder="选择实体类型">
|
|
<el-option label="战斗机" value="fighter" />
|
|
<el-option label="无人机" value="drone" />
|
|
<el-option label="导弹" value="missile" />
|
|
<el-option label="军舰" value="ship" />
|
|
<el-option label="坦克" value="tank" />
|
|
<el-option label="雷达" value="radar" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="所属阵营">
|
|
<el-radio-group v-model="config.side">
|
|
<el-radio-button label="red">红方</el-radio-button>
|
|
<el-radio-button label="blue">蓝方</el-radio-button>
|
|
<el-radio-button label="neutral">中立</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="移动速度">
|
|
<el-slider v-model="config.speed" :min="0" :max="1000" show-input />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="武器系统">
|
|
<el-checkbox-group v-model="config.weapons">
|
|
<el-checkbox label="主炮">主炮</el-checkbox>
|
|
<el-checkbox label="导弹">导弹</el-checkbox>
|
|
<el-checkbox label="鱼雷">鱼雷</el-checkbox>
|
|
<el-checkbox label="防空">防空</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
|
|
// 配置数据
|
|
const config = reactive({
|
|
type: 'fighter',
|
|
side: 'red',
|
|
speed: 300,
|
|
weapons: ['主炮', '导弹']
|
|
})
|
|
|
|
// 事件定义
|
|
const emit = defineEmits<{
|
|
save: [config: typeof config]
|
|
reset: []
|
|
}>()
|
|
|
|
// 方法
|
|
function resetConfig() {
|
|
config.type = 'fighter'
|
|
config.side = 'red'
|
|
config.speed = 300
|
|
config.weapons = ['主炮', '导弹']
|
|
emit('reset')
|
|
}
|
|
|
|
function saveConfig() {
|
|
emit('save', { ...config })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use 'sass:color';
|
|
@import '@/styles/variables.scss';
|
|
|
|
.entity-config-panel {
|
|
padding: $spacing-base;
|
|
background: $bg-secondary;
|
|
border-radius: $border-radius-base;
|
|
border: 1px solid $border-light;
|
|
}
|
|
|
|
.config-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $spacing-base;
|
|
padding-bottom: $spacing-sm;
|
|
border-bottom: 1px solid $border-light;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
color: $text-primary;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
}
|
|
|
|
.config-content {
|
|
:deep(.el-form-item) {
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
:deep(.el-form-item__label) {
|
|
color: $text-regular;
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|