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

web/src/views/AccessResults.vue

@@ -26,7 +26,9 @@
       </el-dialog>
 
       <el-dialog v-model="defaultViewVisible" :title="'默认脚本: '+viewingDefaultType" width="800px">
-        <pre style="background:#1e1e1e;color:#d4d4d4;padding:12px;border-radius:4px;max-height:500px;overflow:auto;font-size:12px;white-space:pre-wrap">{{ viewingDefaultScript }}</pre>
+        <div style="height:500px;border-radius:4px;overflow:hidden">
+          <CodeEditor v-model="viewingDefaultScript" language="groovy" readonly />
+        </div>
       </el-dialog>
     </el-card>
 

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">
+            <el-button size="small" @click="viewDefault(dt)">查看</el-button>
-              <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" 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

web/src/views/SitePages.vue

@@ -74,6 +74,12 @@
         </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>
 
@@ -165,8 +171,12 @@ const editDefault = (dt) => {
   window.scrollTo({top: document.body.scrollHeight, behavior:'smooth'})
 }
 
+const viewVisible = ref(false), viewType = ref(''), viewJson = ref('')
+
 const previewDefault = (dt) => {
-  ElMessageBox.alert(JSON.stringify(dt.entries, null, 2), dt.type + ' 默认模板')
+  viewType.value = dt.type
+  viewJson.value = JSON.stringify(dt.entries, null, 2)
+  viewVisible.value = true
 }
 
 const toggleEdit = (row) => {