refactor: 查看默认模板改用CodeEditor替代pre/alert

web/src/views/RiskRules.vue

@@ -9,10 +9,7 @@
           <div style="font-weight:500;margin-bottom:4px"><el-tag size="small">{{ dt.type }}</el-tag></div>
           <div style="font-size:12px;color:#909399;margin-bottom:8px">{{ dt.ruleCount }} 条规则</div>
           <div style="display:flex;gap:4px">
-            <el-popover trigger="click" width="500" placement="bottom">
-              <pre style="font-size:11px;max-height:300px;overflow:auto">{{ JSON.stringify(dt.rules, null, 2) }}</pre>
-              <template #reference><el-button size="small">查看</el-button></template>
-            </el-popover>
+            <el-button size="small" @click="viewDefault(dt)">查看</el-button>
             <el-button size="small" type="primary" @click="editDefault(dt)">编辑默认</el-button>
           </div>
         </div>
@@ -84,13 +81,19 @@
         </div>
       </div>
     </el-card>
+
+    <el-dialog v-model="viewVisible" :title="'默认规则: '+viewType" width="700px">
+      <div style="height:400px;border-radius:4px;overflow:hidden">
+        <CodeEditor v-model="viewJson" language="json" readonly />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import api from '../api'
 
-const loading = ref(false), saving = ref(false)
+const loading = ref(false), saving = ref(false), viewVisible = ref(false), viewType = ref(''), viewJson = ref('')
 const sites = ref([]), rulesMap = ref({})
 const editSiteId = ref(''), editSiteType = ref(''), editorMode = ref('table'), editorJson = ref('')
 const editingRules = ref([])
@@ -152,6 +155,12 @@ const fetchAll = async () => {
   } finally { loading.value = false }
 }
 
+const viewDefault = (dt) => {
+  viewType.value = dt.type
+  viewJson.value = JSON.stringify(dt.rules, null, 2)
+  viewVisible.value = true
+}
+
 const editDefault = (dt) => {
   editSiteId.value = dt.type
   editSiteType.value = dt.type