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

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

frontend/src/apis/other.ts

@@ -64,4 +64,7 @@ export async function updateTemplateColumn(params: { id: string | number; templa
 // 获取版本公告
 export async function getVersionByRoleType(params: {  role_type: number }){
     return GET('/api/index/version_by_role_type', params)
-}
+}
+export async function getVersionDetailByVersion(params: {  role_type: number, version: string }){
+    return GET('/api/index/version_by_role_type_detail', params)
+}

frontend/src/views/Home/index.vue

@@ -22,6 +22,30 @@
       <img src="@/assets/images/home/right.png" alt="仅处理图像" class="zoom-on-hover" />
       <div class="overlay-text" style="line-height: 80px;">仅处理图像</div>
     </div>
+
+    <!-- 版本公告对话框 -->
+    <el-dialog
+      v-model="showAnnouncement"
+      title="版本公告"
+      width="600px"
+      :close-on-click-modal="false"
+      :show-close="false"
+    >
+      <div class="announcement-content te-l">
+        <div class="version-info">
+          <p><strong>当前版本：</strong>{{ announcementData?.version }}</p>
+        </div>
+        <div class="announcement-detail" v-if="announcementData?.detail" v-html="announcementData.detail"></div>
+        <div class="announcement-detail" v-else>
+          <p>暂无详细公告内容</p>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleAnnouncementConfirm">知道了</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -37,7 +61,7 @@ import packageJson from '@/../../package.json';
 import { getRouterUrl } from '@/utils/appfun';
 import useUserInfo from "@/stores/modules/user";
 import tokenInfo from "@/stores/modules/token";
-import { getVersionByRoleType } from '@/apis/other'
+import { getVersionByRoleType,getVersionDetailByVersion } from '@/apis/other'
 
 const router = useRouter();
 const loading = ref(true);
@@ -64,6 +88,10 @@ const currentVersion = ref(packageJson.version);
 const latestVersion = ref('');
 const isLatest = ref(true);
 
+// 版本公告相关
+const showAnnouncement = ref(false);
+const announcementData = ref(null);
+
 
 import socket from "@/stores/modules/socket";
 import {ElMessage} from "element-plus";
@@ -217,6 +245,47 @@ const compareVersions = (v1, v2) => {
   return 0;
 };
 
+// 本地缓存相关函数
+const getAnnouncedVersions = () => {
+  try {
+    const announced = localStorage.getItem('announcedVersions');
+    return announced ? JSON.parse(announced) : [];
+  } catch (error) {
+    console.error('获取已公告版本失败:', error);
+    return [];
+  }
+};
+
+const setAnnouncedVersion = (version) => {
+  try {
+    const announced = getAnnouncedVersions();
+    if (!announced.includes(version)) {
+      announced.push(version);
+      localStorage.setItem('announcedVersions', JSON.stringify(announced));
+    }
+  } catch (error) {
+    console.error('设置已公告版本失败:', error);
+  }
+};
+
+const isVersionAnnounced = (version) => {
+  const announced = getAnnouncedVersions();
+  return announced.includes(version);
+};
+
+// 处理知道了按钮点击
+const handleAnnouncementConfirm = () => {
+  if (announcementData.value) {
+    setAnnouncedVersion(announcementData.value.version);
+    showAnnouncement.value = false;
+
+    // 公告确认后，检查是否有版本更新
+    setTimeout(() => {
+      checkForUpdates();
+    }, 500);
+  }
+};
+
 // 打开OTA窗口
 const openOTA = () => {
   const { href } = router.resolve({
@@ -236,29 +305,48 @@ const openOTA = () => {
   clientStore.ipc.send(icpList.utils.openMain, params);
 };
 
-// 获取版本信息并检查更新
+// 检查当前版本的更新公告
+const checkCurrentVersionAnnouncement = async () => {
+  try {
+
+    console.log(
+        {
+          role_type: 6,
+          version: currentVersion.value
+        })
+    console.log('aaaaa')
+    const { data } = await getVersionDetailByVersion({
+      role_type: 6,
+      version: currentVersion.value
+    } as any);
+
+    // 如果有当前版本的公告数据且未查看过，则显示公告
+    if (data && data.id && !isVersionAnnounced(currentVersion.value)) {
+      announcementData.value = {
+        ...data,
+        version: currentVersion.value
+      };
+      showAnnouncement.value = true;
+      return true; // 返回true表示有公告需要显示
+    }
+    return false; // 没有公告或已查看过
+  } catch (error) {
+    console.error('检查当前版本公告失败:', error);
+    return false;
+  }
+};
+
+// 获取最新版本信息并检查更新
 const checkForUpdates = async () => {
   try {
-    // 添加时间戳避免缓存问题
-    // const timestamp = new Date().getTime();
-    // const response = await axios.get('https://ossimg.valimart.net/frontend/html/zhihuiyin/version.json', {
-    //   params: {
-    //     _t: timestamp
-    //   }
-    // });
-    const { data }  = await getVersionByRoleType({ role_type: 6 })
-    // 确保 response.data 是 JSON 数据
-    // let data;
-    // if (typeof response.data === 'string') {
-    //   data = JSON.parse(response.data);
-    // } else {
-    //   data = response.data;
-    // }
-    if (data.length > 0) {
+    const { data } = await getVersionByRoleType({ role_type: 6 });
+
+    if (data && data.length > 0) {
       const latest = data[0];
       latestVersion.value = latest.version;
       // 比较版本号
       isLatest.value = compareVersions(currentVersion.value, latest.version) >= 0;
+
       // 如果发现新版本，自动打开OTA窗口
       if (!isLatest.value) {
         openOTA();
@@ -274,6 +362,7 @@ const checkForUpdates = async () => {
 
 
 
+
 // 监听登录成功事件
 const handleLoginSuccess = () => {
   console.log('检测到登录成功，重新检查同步状态');
@@ -293,8 +382,14 @@ onMounted(() => {
 
   checkHealth();
   // 延迟执行版本检查，避免影响健康检查
-  setTimeout(() => {
-    checkForUpdates();
+  setTimeout(async () => {
+    // 首先检查当前版本的公告
+    const hasAnnouncement = await checkCurrentVersionAnnouncement();
+
+    // 如果没有公告需要显示，或者公告已确认，再检查版本更新
+    if (!hasAnnouncement) {
+      checkForUpdates();
+    }
   }, 1000);
 });
 
@@ -376,4 +471,43 @@ onUnmounted(() => {
   min-height: 80px;
   min-width: 250px;
 }
+
+.announcement-content {
+  .version-info {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #f0f9ff;
+    border: 1px solid #0ea5e9;
+    border-radius: 8px;
+
+    p {
+      margin: 5px 0;
+      font-size: 14px;
+      color: #0c4a6e;
+    }
+  }
+
+  .announcement-detail {
+    max-height: 300px;
+    overflow-y: auto;
+    line-height: 1.6;
+
+    :deep(p) {
+      margin: 10px 0;
+    }
+
+    :deep(ul), :deep(ol) {
+      margin: 10px 0;
+      padding-left: 20px;
+    }
+
+    :deep(li) {
+      margin: 5px 0;
+    }
+  }
+}
+
+.dialog-footer {
+  text-align: center;
+}
 </style>