feat(OTA): 添加版本详情展示功能

- 引入 reactive 和 ElMessageBox 依赖
- 将 latestVersion 改为 latest 对象以支持更多版本信息
- 更新版本比较逻辑使用新的 latest 对象
- 重构当前版本卡片布局增加更新日志展示
- 移除表格中的工具提示改用 overview 字段显示描述
- 调整界面样式和响应式布局优化

frontend/src/views/OTA/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed,reactive } from 'vue';
 import axios from 'axios';
 import packageJson from '@/../../package.json';
 import { ElMessage } from 'element-plus';
@@ -8,12 +8,12 @@ import  icpList from '@/utils/ipc'
 import socket from "@/stores/modules/socket";
 import UpdateDialog from '@/components/UpdateDialog'
 import { getVersionByRoleType } from '@/apis/other'
-
+import { ElMessageBox } from 'element-plus'
 
 
 
 const currentVersion = ref(packageJson.version);
-const latestVersion = ref('');
+const latest =  ref({});
 const isLatest = ref(true);
 const versions = ref([]); // 所有版本数据
 
@@ -51,10 +51,9 @@ const fetchVersions = async () => {
     // }
     versions.value = data;
     if (data.length > 0) {
-      const latest = data[0];
-      latestVersion.value = latest.version;
+      latest.value = data[0];
       // 比较版本号
-      isLatest.value = compareVersions(currentVersion.value, latest.version) >= 0;
+      isLatest.value = compareVersions(currentVersion.value, latest.value.version) >= 0;
     }
     // 初始化分页信息
     totalItems.value = versions.value.length;
@@ -153,12 +152,15 @@ onMounted(() => {
     </el-dialog>
     <el-main>
       <div class="version-check-container">
-        <el-card class="current-version-card">
-          <p>当前版本  <span class="fs-14">版本号: {{ currentVersion }}</span></p>
-
-          <p>状态: <span :class="{ 'text-green': isLatest, 'text-red': !isLatest }">{{ isLatest ? '您已经是最新版本' : '发现新版本' }}</span></p>
-          <p v-if="!isLatest">新版本: {{ latestVersion }}</p>
-          <el-button v-if="!isLatest" type="primary" @click="downloadUpdate" v-log="{ describe: { action: '点击下载最新版本', latestVersion } }">下载更新</el-button>
+        <el-card class="current-version-card fs-14 te-l">
+          <p>当前版本:<span class="fs-14"> {{ currentVersion }}</span></p>
+          <div class="flex left">
+            <p >状态: <span :class="{ 'text-green': isLatest, 'text-red': !isLatest }">{{ isLatest ? '您已经是最新版本' : '发现新版本' }}</span></p>
+            <p class="mar-left-10" v-if="!isLatest"> {{ latest.version }}</p>
+            <el-button v-if="!isLatest" class="mar-left-20" type="primary" @click="downloadUpdate" v-log="{ describe: { action: '点击下载最新版本'+ latest.version } }">下载更新</el-button>
+          </div>
+          <p>更新日志：</p>
+          <div v-html="latest.detail"></div>
         </el-card>
 
         <el-card class="history-versions-card mar-top-10">
@@ -174,12 +176,7 @@ onMounted(() => {
             </el-table-column>
             <el-table-column label="描述">
               <template #default="{ row }">
-                <el-tooltip placement="top" :show-when="hover" :width="500">
-                  <template #content >
-                    <div v-html="row.detail"></div>
-                  </template>
-                  <span class="version-describe" v-html="row.detail"></span>
-                </el-tooltip>
+                {{row.overview}}
               </template>
             </el-table-column>
             <el-table-column label="操作"  width="80">