From 4c9c53d7c82d88d44da01b076765b215c35f4372 Mon Sep 17 00:00:00 2001
From: mediabot-pt <295750538+mediabot-pt@users.noreply.github.com>
Date: Mon, 29 Jun 2026 23:37:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E5=AE=A1=E6=A0=B8?=
 =?UTF-8?q?=E9=A1=B5=E5=B1=95=E7=A4=BA=E5=B7=B2=E5=AE=A1=E6=89=B9=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E7=89=88=E6=9C=AC=EF=BC=8C=E6=94=AF=E6=8C=81=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=AF=B9=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/index.js      |  1 +
 web/src/views/Configs.vue | 50 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/web/src/api/index.js b/web/src/api/index.js
index e508618..0e023c8 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -39,6 +39,7 @@ export default {
   configs: {
     list: () => api.get('/configs'),
     pending: () => api.get('/configs/pending'),
+    bySite: (siteId) => api.get(`/configs/${siteId}`),
     download: (siteId, version) => api.get(`/configs/${siteId}/${version}`),
     approve: (id, comment) => api.post(`/admin/reviews/${id}/approve`, null, { params: { comment } }),
     reject: (id, comment) => api.post(`/admin/reviews/${id}/reject`, null, { params: { comment } })
diff --git a/web/src/views/Configs.vue b/web/src/views/Configs.vue
index c50ef35..106326c 100644
--- a/web/src/views/Configs.vue
+++ b/web/src/views/Configs.vue
@@ -21,14 +21,27 @@
       </el-table>
     </el-card>
 
-    <el-dialog v-model="viewVisible" title="配置详情" width="700px" :close-on-click-modal="false">
+    <el-dialog v-model="viewVisible" title="配置详情" width="900px" :close-on-click-modal="false">
       <div class="config-info">
         <span class="label">站点:</span> {{ viewing.siteId }} &nbsp;
         <span class="label">版本:</span> {{ viewing.version }} &nbsp;
         <span class="label">提交者:</span> {{ viewing.submitterId || '-' }}
+        <span style="margin-left: 16px">
+          <el-button size="small" @click="toggleHistory">历史版本 ({{ historyConfigs.length }})</el-button>
+        </span>
       </div>
-      <div style="margin-top: 12px; max-height: 500px; overflow: auto">
-        <pre class="config-json" v-html="highlightedJson"></pre>
+      <div style="display: flex; gap: 12px; margin-top: 12px; max-height: 500px">
+        <div :style="{ flex: showHistory ? '1' : '1' }" style="overflow: auto">
+          <div class="section-title">待审核配置</div>
+          <pre class="config-json" v-html="highlightedJson"></pre>
+        </div>
+        <div v-if="showHistory && historyConfigs.length" style="flex: none; width: 280px; overflow: auto; border-left: 1px solid #ebeef5; padding-left: 12px">
+          <div class="section-title">已审批版本</div>
+          <div v-for="h in historyConfigs" :key="h.id" class="history-item" @click="loadHistoryConfig(h)">
+            <span class="history-version">v{{ h.version }}</span>
+            <span class="history-time">{{ h.createdAt }}</span>
+          </div>
+        </div>
       </div>
       <template #footer>
         <el-button @click="viewVisible = false">关闭</el-button>
@@ -45,6 +58,9 @@ const loading = ref(false)
 const viewVisible = ref(false)
 const viewing = ref({})
 const configContent = ref('')
+const historyConfigs = ref([])
+const showHistory = ref(false)
+const loadingHistory = ref(false)
 
 const fetchPending = async () => {
   loading.value = true
@@ -61,6 +77,8 @@ const fetchPending = async () => {
 const handleView = async (row) => {
   viewing.value = row
   configContent.value = ''
+  historyConfigs.value = []
+  showHistory.value = false
   viewVisible.value = true
   try {
     const res = await api.configs.download(row.siteId, row.version)
@@ -70,6 +88,27 @@ const handleView = async (row) => {
   }
 }
 
+const loadHistoryConfig = async (h) => {
+  try {
+    const res = await api.configs.download(h.siteId, h.version)
+    configContent.value = typeof res === 'string' ? res : JSON.stringify(res, null, 2)
+  } catch {
+    configContent.value = '(加载失败)'
+  }
+}
+
+const toggleHistory = async () => {
+  showHistory.value = !showHistory.value
+  if (showHistory.value && historyConfigs.value.length === 0 && viewing.value.siteId) {
+    loadingHistory.value = true
+    try {
+      const res = await api.configs.bySite(viewing.value.siteId)
+      historyConfigs.value = (res.data || []).filter(c => c.status === 'approved').reverse()
+    } catch {}
+    loadingHistory.value = false
+  }
+}
+
 const highlightedJson = computed(() => {
   try {
     const obj = JSON.parse(configContent.value)
@@ -154,4 +193,9 @@ onMounted(fetchPending)
 .config-json :deep(.number) { color: #b5cea8; }
 .config-json :deep(.boolean) { color: #569cd6; }
 .config-json :deep(.null) { color: #569cd6; }
+.section-title { font-size: 12px; font-weight: bold; color: #303133; margin-bottom: 8px; }
+.history-item { padding: 6px 8px; cursor: pointer; border-radius: 4px; margin-bottom: 4px; }
+.history-item:hover { background: #f0f5ff; }
+.history-version { font-size: 12px; font-weight: bold; color: #409EFF; }
+.history-time { font-size: 11px; color: #909399; margin-left: 8px; }
 </style>