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:
mediabot-pt
2026-07-06 17:51:46 +08:00
parent 2cdf502831
commit 6a41938671

View File

@@ -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({})