From 6a4193867158eb5ec60c0947c59137af90f245a8 Mon Sep 17 00:00:00 2001
From: mediabot-pt <295750538+mediabot-pt@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:51:46 +0800
Subject: [PATCH] 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
---
 web/src/views/RiskRules.vue | 29 ++++++++++++-----------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/web/src/views/RiskRules.vue b/web/src/views/RiskRules.vue
index 47df22d..866d70f 100644
--- a/web/src/views/RiskRules.vue
+++ b/web/src/views/RiskRules.vue
@@ -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({})