feat: 站点管理增加查看配置功能, 显示最新已审批配置内容

web/src/views/Sites.vue

@@ -15,9 +15,10 @@
           </template>
         </el-table-column>
         <el-table-column prop="schemaVersion" label="Schema版本" width="120" />
-        <el-table-column label="操作" width="150">
+        <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="small" @click="handleViewConfig(scope.row)">配置</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -49,6 +50,17 @@
         <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
       </template>
     </el-dialog>
+
+    <!-- 查看配置对话框 -->
+    <el-dialog v-model="configVisible" :title="'配置：' + configSiteId" width="700px" :close-on-click-modal="false">
+      <div v-if="configLoading" style="text-align:center;padding:40px">加载中...</div>
+      <div v-else-if="configError" style="color:#f56c6c;text-align:center;padding:20px">{{ configError }}</div>
+      <div v-else-if="!configContent" style="text-align:center;padding:40px;color:#909399">暂无配置</div>
+      <pre v-else class="config-json" v-html="highlightedJson"></pre>
+      <template #footer>
+        <el-button @click="configVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -71,6 +83,68 @@ const siteTypes = [
   { value: 'unknown', label: '未知' },
 ]
 
+// 配置查看
+const configVisible = ref(false)
+const configLoading = ref(false)
+const configError = ref('')
+const configContent = ref('')
+const configSiteId = ref('')
+
+const highlightedJson = computed(() => {
+  try {
+    const obj = JSON.parse(configContent.value)
+    return syntaxHighlight(JSON.stringify(obj, null, 2))
+  } catch {
+    return escapeHtml(configContent.value)
+  }
+})
+
+const handleViewConfig = async (row) => {
+  configVisible.value = true
+  configSiteId.value = row.siteId
+  configLoading.value = true
+  configError.value = ''
+  configContent.value = ''
+  try {
+    const res = await api.configs.bySite(row.siteId)
+    const configs = res.data || []
+    if (configs.length === 0) {
+      configContent.value = ''
+    } else {
+      const latest = configs[0]  // already sorted by created_at desc
+      const resp = await api.configs.content(latest.siteId, latest.version)
+      const content = resp.data
+      configContent.value = typeof content === 'string' ? content : JSON.stringify(content, null, 2)
+    }
+  } catch (e) {
+    configError.value = e.response?.data?.message || '获取配置失败'
+  } finally {
+    configLoading.value = false
+  }
+}
+
+// syntax highlighting (reused from Configs.vue)
+const syntaxHighlight = (json) => {
+  return escapeHtml(json).replace(
+    /("(\\u[a-fA-F0-9]{4}|\\[^u]|[^"\\])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+    (match) => {
+      let cls = 'number'
+      if (/^"/.test(match)) {
+        cls = /:$/.test(match) ? 'key' : 'string'
+      } else if (/true|false/.test(match)) {
+        cls = 'boolean'
+      } else if (/null/.test(match)) {
+        cls = 'null'
+      }
+      return `<span class="${cls}">${match}</span>`
+    }
+  )
+}
+
+const escapeHtml = (str) => {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
 const fetchSites = async () => {
   loading.value = true
   try {
@@ -120,3 +194,24 @@ const handleSave = async () => {
 
 onMounted(fetchSites)
 </script>
+
+<style scoped>
+.config-json {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 500px;
+  overflow: auto;
+}
+.config-json :deep(.key) { color: #9cdcfe; }
+.config-json :deep(.string) { color: #ce9178; }
+.config-json :deep(.number) { color: #b5cea8; }
+.config-json :deep(.boolean) { color: #569cd6; }
+.config-json :deep(.null) { color: #569cd6; }
+</style>