fix: restore left JSON editor + right card layout for risk rules editor
- Left pane: fixed 400px CodeEditor for JSON editing - Right pane: card-based visual editor with natural language, drag-and-drop, presets - Remove JSON toggle button, always show both panes
This commit is contained in:
@@ -35,10 +35,6 @@
|
||||
<el-tag size="small" type="info">{{ parsed.length }} 条规则</el-tag>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<el-button size="small" @click="showJson = !showJson">
|
||||
<el-icon style="margin-right:4px"><component :is="showJson ? 'Hide' : 'View'"/></el-icon>
|
||||
{{ showJson ? '收起' : 'JSON' }}
|
||||
</el-button>
|
||||
<el-button size="small" @click="showPresets = true">模板</el-button>
|
||||
<el-button size="small" type="primary" @click="saveRules" :loading="saving">保存</el-button>
|
||||
<el-button size="small" @click="uploadRules" :loading="uploading">上传</el-button>
|
||||
@@ -46,10 +42,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体:卡片列表 + JSON(可选展开) -->
|
||||
<!-- 主体:左侧 JSON 编辑器 + 右侧卡片式可视化 -->
|
||||
<div style="display:flex;gap:12px;flex:1;min-height:0">
|
||||
<!-- 左侧:规则卡片列表 -->
|
||||
<div :style="{flex:showJson?'0 0 60%':'1',overflow:'auto',minHeight:0,paddingRight:'4px'}">
|
||||
<!-- 左侧:JSON 编辑器 -->
|
||||
<div style="flex:0 0 400px;display:flex;flex-direction:column;min-height:0">
|
||||
<div style="font-size:13px;font-weight:500;margin-bottom:4px">JSON 配置</div>
|
||||
<div style="flex:1;min-height:0;border-radius:4px;overflow:hidden">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧:卡片式可视化编辑 -->
|
||||
<div style="flex:1;overflow:auto;min-height:0">
|
||||
<!-- 添加按钮 + 快速模板 -->
|
||||
<div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap">
|
||||
<el-button size="small" type="primary" @click="addRule">
|
||||
@@ -124,14 +128,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧:JSON 编辑器(可折叠) -->
|
||||
<div v-if="showJson" style="flex:0 0 38%;display:flex;flex-direction:column;min-height:0">
|
||||
<div style="font-size:13px;font-weight:500;margin-bottom:4px">JSON 配置</div>
|
||||
<div style="flex:1;min-height:0;border-radius:4px;overflow:hidden">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预设规则对话框 -->
|
||||
@@ -156,7 +152,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { Plus, ArrowDown, Rank, Delete, View, Hide } from '@element-plus/icons-vue'
|
||||
import { Plus, ArrowDown, Rank, Delete } from '@element-plus/icons-vue'
|
||||
import api from '../api'
|
||||
|
||||
// 选项配置
|
||||
@@ -197,7 +193,6 @@ const presetDesc = (p) => `当 ${p.metric} ${condOptions.find(c=>c.value===p.con
|
||||
const loading = ref(false), saving = ref(false), uploading = ref(false)
|
||||
const sites = ref([]), rulesMap = ref({})
|
||||
const editType = ref(''), editorJson = ref('[]')
|
||||
const showJson = ref(false)
|
||||
const showPresets = ref(false)
|
||||
const selectedPresets = ref([])
|
||||
const showDesc = ref({})
|
||||
|
||||
Reference in New Issue
Block a user