feat(OTA): 添加版本详情查看功能

- 新增版本详情对话框组件
- 实现版本详情展示功能
- 添加查看版本详情按钮
- 调整表格列宽度以适应新增按钮
- 优化操作按钮样式布局
- 增加滚动条样式用于长详情内容显示

frontend/src/views/OTA/index.vue

@@ -88,6 +88,10 @@ const downloadUpdate = () => {
 const updateVisible = ref( false)
 const updateResult = ref({})
 
+// 详情对话框相关
+const detailVisible = ref(false)
+const currentVersionDetail = ref('')
+
 const clientStore = client();
 const socketStore = socket()
 // 下载特定版本
@@ -134,6 +138,12 @@ const handlePageChange = (page) => {
   currentPage.value = page;
 };
 
+// 显示版本详情
+const showDetail = (row) => {
+  currentVersionDetail.value = row.detail || '暂无详情';
+  detailVisible.value = true;
+};
+
 onMounted(() => {
   fetchVersions();
 });
@@ -150,6 +160,14 @@ onMounted(() => {
     >
         <div class="desc line-30 fs-16">{{updateResult.desc}}</div>
     </el-dialog>
+
+    <el-dialog
+        v-model="detailVisible"
+        title="版本详情"
+        width="600px"
+    >
+        <div v-html="currentVersionDetail" class="version-detail-content te-l"></div>
+    </el-dialog>
     <el-main>
       <div class="version-check-container">
         <el-card class="current-version-card fs-14 te-l">
@@ -179,9 +197,11 @@ onMounted(() => {
                 {{row.overview}}
               </template>
             </el-table-column>
-            <el-table-column label="操作"  width="80">
+            <el-table-column label="操作" width="180">
               <template #default="{ row }">
-                <el-button size="small" @click="downloadSpecificVersion(row.attachment)" v-log="{ describe: { action: '点击下载历史版本', version: row.version, url: row.attachment } }">下载</el-button>
+                  <el-button style="width: 70px;" size="small" @click="downloadSpecificVersion(row.attachment)" v-log="{ describe: { action: '点击下载历史版本', version: row.version, url: row.attachment } }">下载</el-button>
+                  <el-button style="width: 70px;"  size="small" type="info" @click="showDetail(row)" v-log="{ describe: { action: '查看版本详情', version: row.version } }">版本详情</el-button>
+
               </template>
             </el-table-column>
           </el-table>
@@ -207,4 +227,20 @@ onMounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.operation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.operation-buttons .el-button {
+  width: 100%;
+}
+
+.version-detail-content {
+  max-height: 400px;
+  overflow-y: auto;
+  line-height: 1.6;
+}
 </style>