fix: MapList el-dialog替换为v-show内联(同根因)

This commit is contained in:
Hermes CI Fix
2026-07-14 12:09:39 +08:00
parent cc9398cdcc
commit 17c7a35c77
+50 -17
View File
@@ -21,23 +21,36 @@
</el-table-column>
</el-table>
<!-- 新建/编辑弹窗 -->
<el-dialog v-model="showForm" :title="editingMap ? '编辑地图' : '新建战略地图'" width="500">
<el-form :model="form" label-width="100px">
<el-form-item label="地图名称"><el-input v-model="form.title" /></el-form-item>
<el-form-item label="版本号"><el-input v-model="form.version" placeholder="v1.0" /></el-form-item>
<el-form-item label="创建方式" v-if="!editingMap">
<el-radio-group v-model="createMode">
<el-radio value="blank">空白地图</el-radio>
<el-radio value="template">快速模板4维度+预设目标</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showForm=false">取消</el-button>
<el-button type="primary" @click="saveMap">保存</el-button>
</template>
</el-dialog>
<!-- 新建/编辑弹窗内联v-show -->
<div v-show="showForm" class="map-form-overlay" @click.self="showForm=false">
<div class="map-form-dialog">
<div class="map-form-header">
<span>{{ editingMap ? '编辑地图' : '新建战略地图' }}</span>
<button class="map-form-close" @click="showForm=false">×</button>
</div>
<div class="map-form-body">
<div class="map-form-field">
<label>地图名称</label>
<input v-model="form.title" class="map-input" placeholder="请输入地图名称" />
</div>
<div class="map-form-field">
<label>版本号</label>
<input v-model="form.version" class="map-input" placeholder="v1.0" />
</div>
<div class="map-form-field" v-if="!editingMap">
<label>创建方式</label>
<div class="map-radio-group">
<label class="map-radio"><input type="radio" v-model="createMode" value="blank" /> 空白地图</label>
<label class="map-radio"><input type="radio" v-model="createMode" value="template" /> 快速模板4维度+预设目标</label>
</div>
</div>
</div>
<div class="map-form-footer">
<button class="map-btn" @click="showForm=false">取消</button>
<button class="map-btn map-btn-primary" @click="saveMap">保存</button>
</div>
</div>
</div>
</div>
</template>
@@ -101,3 +114,23 @@ async function deleteMap(map: any) {
onMounted(load)
</script>
<style scoped>
.map-form-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
.map-form-dialog { background:#fff; border-radius:12px; width:520px; box-shadow:0 8px 32px rgba(0,0,0,0.18); overflow:hidden; }
.map-form-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #f0f0f0; font-weight:600; font-size:16px; }
.map-form-close { background:none; border:none; font-size:22px; color:#999; cursor:pointer; padding:0 4px; }
.map-form-close:hover { color:#333; }
.map-form-body { padding:20px; }
.map-form-field { margin-bottom:16px; }
.map-form-field label { display:block; font-size:13px; color:#666; margin-bottom:6px; font-weight:500; }
.map-input { width:100%; padding:8px 12px; border:1px solid #dcdfe6; border-radius:6px; font-size:14px; outline:none; box-sizing:border-box; }
.map-input:focus { border-color:#409eff; }
.map-radio-group { display:flex; flex-direction:column; gap:8px; }
.map-radio { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#666; cursor:pointer; }
.map-radio input { margin:0; }
.map-form-footer { display:flex; justify-content:flex-end; gap:10px; padding:12px 20px; border-top:1px solid #f0f0f0; }
.map-btn { padding:8px 20px; border:1px solid #dcdfe6; border-radius:6px; background:#fff; color:#333; font-size:14px; cursor:pointer; }
.map-btn-primary { background:#409eff; color:#fff; border-color:#409eff; }
.map-btn:hover { opacity:0.85; }
</style>