From baaec4c4b39b99b1ac473ac0bd36f3db826a5e82 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Thu, 29 Jan 2026 21:01:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(config):=20=E6=B7=BB=E5=8A=A0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8E=86=E5=8F=B2=E7=89=88=E6=9C=AC=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增历史版本内容弹窗，支持查看配置详细内容
- JSON类型内容自动格式化为易读格式
- 操作时间使用formatTime方法格式化为可读格式
- 新增getTypeName方法展示配置类型名称
- 历史弹窗宽度从700px调整为900px以适配新内容
- 更新开发环境数据库连接配置
---
 web/src/views/config/ConfigList.vue | 55 +++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/web/src/views/config/ConfigList.vue b/web/src/views/config/ConfigList.vue
index 7d4a0ca..f170675 100644
--- a/web/src/views/config/ConfigList.vue
+++ b/web/src/views/config/ConfigList.vue
@@ -39,18 +39,38 @@
       layout="total, prev, pager, next"
     ></el-pagination>
 
-    <el-dialog title="配置历史" :visible.sync="historyVisible" width="700px">
+    <el-dialog title="配置历史" :visible.sync="historyVisible" width="900px">
       <el-table :data="historyList" border stripe>
         <el-table-column prop="id" label="ID" width="60"></el-table-column>
         <el-table-column prop="createdBy" label="操作人" width="100"></el-table-column>
-        <el-table-column prop="createdAt" label="操作时间" width="180"></el-table-column>
+        <el-table-column label="操作时间" width="180">
+          <template slot-scope="scope">
+            {{ formatTime(scope.row.createdAt) }}
+          </template>
+        </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
+            <el-button type="text" @click="viewHistoryContent(scope.row)">查看内容</el-button>
             <el-button type="text" @click="handleRollback(scope.row)">回滚到此版本</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-dialog>
+
+    <el-dialog title="历史版本内容" :visible.sync="contentVisible" width="800px" append-to-body>
+      <div style="margin-bottom: 10px">
+        <strong>配置名称：</strong>{{ currentHistory.name }} | 
+        <strong>版本：</strong>{{ currentHistory.version }} | 
+        <strong>类型：</strong>{{ getTypeName(currentHistory.type) }}
+      </div>
+      <el-input 
+        v-model="formattedContent" 
+        type="textarea" 
+        :rows="25" 
+        readonly
+        style="font-family: monospace"
+      ></el-input>
+    </el-dialog>
   </el-card>
 </template>
 
@@ -68,7 +88,10 @@ export default {
       profiles: [],
       historyVisible: false,
       historyList: [],
-      currentConfig: null
+      currentConfig: null,
+      contentVisible: false,
+      currentHistory: {},
+      formattedContent: ''
     }
   },
   created() {
@@ -112,6 +135,32 @@ export default {
         this.historyVisible = true
       } catch (e) {}
     },
+    viewHistoryContent(row) {
+      this.currentHistory = row
+      const content = row.contents || ''
+      if (row.type === 3) {
+        try {
+          this.formattedContent = JSON.stringify(JSON.parse(content), null, 2)
+        } catch (e) {
+          this.formattedContent = content
+        }
+      } else {
+        this.formattedContent = content
+      }
+      this.contentVisible = true
+    },
+    getTypeName(type) {
+      if (type === 1) return '文件'
+      if (type === 2) return '配置项'
+      if (type === 3) return 'JSON'
+      return '未知'
+    },
+    formatTime(time) {
+      if (!time) return ''
+      const d = new Date(time)
+      const pad = n => String(n).padStart(2, '0')
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+    },
     async handleRollback(row) {
       try {
         await this.$confirm('确定回滚到此版本？')