Browse Source

refactor(editor): 优化 BayEditor 组件布局和样式

- 调整 bay-info 和 bay-empty 的布局结构
- 添加 bay-empty 样式,用于显示空状态提示
- 优化 level heights部分的样式
master
lizw-2015 6 months ago
parent
commit
f3d2a49ec5
  1. 55
      src/editor/propEditors/BayEditor.vue

55
src/editor/propEditors/BayEditor.vue

@ -152,28 +152,29 @@ export type {
</div>
</div>
</div>
<div class="flex-item-fill flex-column-container bay-editor-bay-info">
<template v-if="selectDay">
<div class="flex-item-fixed">
<ElFormItem label="Bay Width" :labelWidth="80">
<ElInputNumber :controls="false" :modelValue="selectDay.bayWidth"/>
</ElFormItem>
<div style="height: 8px;"/>
<ElFormItem label="Bay Offset" :labelWidth="80">
<ElInputNumber :controls="false" :modelValue="selectDay.offset"/>
</ElFormItem>
</div>
<div>Level Heights</div>
<div class="flex-item-fill bay-editor-bay-info-level-height">
<ElFormItem
v-for="(levelHeight, idx) in selectDay.levelHeight"
:label="`Level ${idx+1}`"
:labelWidth="64"
>
<ElInputNumber :controls="false" :modelValue="levelHeight"/>
</ElFormItem>
</div>
</template>
<div v-if="selectDay" class="flex-item-fill flex-column-container bay-editor-bay-info">
<div class="flex-item-fixed">
<ElFormItem label="Bay Width" :labelWidth="80">
<ElInputNumber :controls="false" :modelValue="selectDay.bayWidth"/>
</ElFormItem>
<div style="height: 8px;"/>
<ElFormItem label="Bay Offset" :labelWidth="80">
<ElInputNumber :controls="false" :modelValue="selectDay.offset"/>
</ElFormItem>
</div>
<div>Level Heights</div>
<div class="flex-item-fill bay-editor-bay-info-level-height">
<ElFormItem
v-for="(levelHeight, idx) in selectDay.levelHeight"
:label="`Level ${idx+1}`"
:labelWidth="64"
>
<ElInputNumber :controls="false" :modelValue="levelHeight"/>
</ElFormItem>
</div>
</div>
<div v-else class="flex-item-fill bay-editor-bay-empty">
Select One Bay
</div>
</div>
</div>
@ -299,4 +300,14 @@ export type {
.bay-editor-bay-info-level-height :deep(input[type=number].el-input__inner) {
text-align: left;
}
.bay-editor-bay-empty {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #595959;
background: #f5f5f5;
margin-left: 8px;
}
</style>

Loading…
Cancel
Save