关于-功能联调

src/layout/components/AboutDialog.vue

@@ -1,53 +1,138 @@
 <template>
-  <el-dialog
+  <div>
-    title="关于"
+    <el-dialog
-    :visible.sync="visible"
+      title="关于"
-    width="450px"
+      :visible.sync="visible"
-    :show-close="true"
+      width="450px"
-    @close="handleClose"
+      :show-close="true"
-    append-to-body
+      @close="handleClose"
-  >
+      append-to-body
-    <div class="about-content">
+    >
-      <div class="logo-section">
+      <div class="about-content">
-        <img src="@/assets/images/login-background.jpg" class="logo-circle" />
+        <div class="logo-section">
-        <div class="version">信联 RUS_V01.01.16</div>
+          <img src="@/assets/images/login-background.jpg" class="logo-circle" />
+          <div class="version">信联 RUS_{{ currentVersion }}</div>
+        </div>
+        <div class="version-info">
+          <div class="info-row">
+            <span class="label">当前版本：</span>
+            <span class="value">{{ currentVersion }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">最新版本：</span>
+            <span class="value" :class="{ 'new-version': hasNewVersion }">
+              {{ latestVersion || "检查中..." }}
+            </span>
+          </div>
+        </div>
+        <div class="copyright">
+          Copyright ©2025 青岛海信智能医疗技术有限公司。<br />
+          保留所有权利
+        </div>
+        <div class="button-group">
+          <el-button
+            v-if="!checkingUpdate"
+            type="primary"
+            class="green-btn"
+            @click="checkUpdate"
+            :disabled="isUpgrading"
+          >
+            {{ upgradeButtonText }}
+          </el-button>
+          <el-button
+            v-if="checkingUpdate"
+            type="primary"
+            class="green-btn"
+            disabled
+          >
+            <i class="el-icon-loading" /> 检查中...
+          </el-button>
+          <el-button type="primary" class="green-btn" @click="confirm">
+            确定
+          </el-button>
+        </div>
+        <div class="license">
+          此软件基于Qt GNU Lesser General Public License(LGPL)开发。
+        </div>
+        <div class="links">
+          <el-link
+            type="primary"
+            href="https://rus.hisense.com/utalk/用户协议.pdf"
+            target="_blank"
+            :underline="false"
+          >
+            服务协议
+          </el-link>
+          <el-link type="info">和</el-link>
+          <el-link
+            type="primary"
+            href="https://rus.hisense.com/utalk/隐私政策.pdf"
+            target="_blank"
+            :underline="false"
+          >
+            隐私政策
+          </el-link>
+        </div>
       </div>
-      <div class="copyright">
+    </el-dialog>
-        Copyright ©2025 青岛海信智能医疗技术有限公司。<br />
+
-        保留所有权利
+    <!-- 升级确认弹窗 -->
-      </div>
+    <el-dialog
-      <div class="button-group">
+      title="发现新版本"
-        <el-button type="primary" class="green-btn" @click="checkUpdate">
+      :visible.sync="upgradeConfirmVisible"
-          当前为最新版本
+      width="400px"
-        </el-button>
+      :show-footer="false"
-        <el-button type="primary" class="green-btn" @click="confirm">
+      :close-on-click-modal="false"
-          确定
+    >
-        </el-button>
+      <div class="upgrade-confirm-content">
-      </div>
+        <div class="icon-wrapper">
-      <div class="license">
+          <i class="el-icon-update" />
-        此软件基于Qt GNU Lesser General Public License(LGPL)开发。
+        </div>
+        <h3>发现新版本 {{ latestVersion }}</h3>
+        <p class="current-version">当前版本：{{ currentVersion }}</p>
+        <div class="release-notes">
+          <h4>更新说明：</h4>
+          <ul>
+            <li>优化系统性能，提升运行稳定性</li>
+            <li>修复已知问题，改善用户体验</li>
+            <li>新增功能特性，增强产品功能</li>
+          </ul>
+        </div>
+        <div class="upgrade-tips">
+          <i class="el-icon-info" />
+          <span>升级过程中请保持网络连接，升级后配置将自动保留</span>
+        </div>
+        <div class="confirm-buttons">
+          <el-button @click="cancelUpgrade">暂不升级</el-button>
+          <el-button type="primary" @click="startUpgrade">立即升级</el-button>
+        </div>
       </div>
-      <div class="links">
+    </el-dialog>
-        <el-link
+
-          type="primary"
+    <!-- 升级进度弹窗 -->
-          href="https://rus.hisense.com/utalk/用户协议.pdf"
+    <el-dialog
-          target="_blank"
+      title="正在升级"
-          :underline="false"
+      :visible.sync="upgradeProgressVisible"
-        >
+      width="400px"
-          服务协议
+      :show-footer="false"
-        </el-link>
+      :close-on-click-modal="false"
-        <el-link type="info">和</el-link>
+      :close-on-press-escape="false"
-        <el-link
+    >
-          type="primary"
+      <div class="upgrade-progress-content">
-          href="https://rus.hisense.com/utalk/隐私政策.pdf"
+        <div class="progress-icon">
-          target="_blank"
+          <i class="el-icon-download" />
-          :underline="false"
+        </div>
-        >
+        <div class="progress-text">正在下载并安装更新...</div>
-          隐私政策
+        <el-progress
-        </el-link>
+          :percentage="upgradePercent"
+          :status="upgradeStatus"
+          :stroke-width="26"
+          :show-text="true"
+        />
+        <div class="progress-detail">{{ upgradeDetailText }}</div>
       </div>
-    </div>
+    </el-dialog>
-  </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -57,20 +142,139 @@ export default {
   data() {
     return {
       visible: false,
+      currentVersion: "V01.01.16",
+      latestVersion: "",
+      checkingUpdate: false,
+      hasNewVersion: false,
+      upgradeConfirmVisible: false,
+      upgradeProgressVisible: false,
+      isUpgrading: false,
+      upgradePercent: 0,
+      upgradeStatus: "success",
+      upgradeDetailText: "",
     };
   },
+  computed: {
+    upgradeButtonText() {
+      if (this.hasNewVersion) {
+        return `升级到 ${this.latestVersion}`;
+      }
+      return "检查更新";
+    },
+  },
   methods: {
     show() {
       this.visible = true;
+      // 自动检查更新
+      this.checkUpdate();
+    },
+    async checkUpdate() {
+      this.checkingUpdate = true;
+      this.latestVersion = "";
+
+      try {
+        const res = await postCommonCheckVersion({
+          system: "",
+          version: this.currentVersion,
+        });
+
+        if (res && res.data) {
+          this.latestVersion = res.data.latest_version || this.currentVersion;
+          // 比较版本号
+          this.hasNewVersion = this.compareVersions(
+            this.latestVersion,
+            this.currentVersion
+          );
+
+          if (this.hasNewVersion) {
+            // 自动弹出升级提示框
+            this.upgradeConfirmVisible = true;
+          } else {
+            this.$message.success("当前版本为最新版本");
+          }
+        } else {
+          this.latestVersion = this.currentVersion;
+          this.hasNewVersion = false;
+          this.$message.success("当前版本为最新版本");
+        }
+      } catch (error) {
+        console.error("检查更新失败:", error);
+        this.latestVersion = this.currentVersion;
+        this.hasNewVersion = false;
+        this.$message.warning("检查更新失败，请稍后重试");
+      } finally {
+        this.checkingUpdate = false;
+      }
     },
-    checkUpdate() {
+    // 版本号比较
-      postCommonCheckVersion({
+    compareVersions(newVersion, currentVersion) {
-        system: "",
+      const parseVersion = (v) => {
-        version: "V01.01.16",
+        const match = v.match(/V(\d+)\.(\d+)\.(\d+)/);
-      }).then((res) => {
+        if (!match) return [0, 0, 0];
-        this.$message.success("当前版本为最新版本");
+        return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
-        this.visible = false;
+      };
-      });
+
+      const [n1, n2, n3] = parseVersion(newVersion);
+      const [c1, c2, c3] = parseVersion(currentVersion);
+
+      if (n1 > c1) return true;
+      if (n1 === c1 && n2 > c2) return true;
+      if (n1 === c1 && n2 === c2 && n3 > c3) return true;
+      return false;
+    },
+    cancelUpgrade() {
+      this.upgradeConfirmVisible = false;
+    },
+    async startUpgrade() {
+      this.upgradeConfirmVisible = false;
+      this.upgradeProgressVisible = true;
+      this.isUpgrading = true;
+      this.upgradePercent = 0;
+      this.upgradeStatus = "success";
+      this.upgradeDetailText = "准备升级...";
+
+      try {
+        // 模拟升级过程
+        await this.simulateUpgrade();
+
+        // 升级成功
+        this.upgradePercent = 100;
+        this.upgradeStatus = "success";
+        this.upgradeDetailText = "升级完成！";
+
+        setTimeout(() => {
+          this.upgradeProgressVisible = false;
+          this.currentVersion = this.latestVersion;
+          this.hasNewVersion = false;
+          this.isUpgrading = false;
+          this.$message.success("升级成功，应用功能无异常");
+          // 提示用户重启应用
+          this.$modal.msg(
+            "升级成功！建议重启应用以确保所有更新生效。您的配置已自动保留。"
+          );
+        }, 1000);
+      } catch (error) {
+        this.upgradeStatus = "exception";
+        this.upgradeDetailText = "升级失败：" + error.message;
+        this.isUpgrading = false;
+        this.$message.error("升级失败，请稍后重试");
+      }
+    },
+    // 模拟升级过程
+    async simulateUpgrade() {
+      const steps = [
+        { percent: 10, text: "正在连接服务器..." },
+        { percent: 30, text: "正在下载更新包..." },
+        { percent: 60, text: "正在验证更新包..." },
+        { percent: 80, text: "正在安装更新..." },
+        { percent: 95, text: "正在配置系统..." },
+      ];
+
+      for (const step of steps) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        this.upgradePercent = step.percent;
+        this.upgradeDetailText = step.text;
+      }
     },
     confirm() {
       this.visible = false;
@@ -78,6 +282,30 @@ export default {
     handleClose() {
       this.visible = false;
     },
+    // 供外部调用：登录后自动检查更新
+    async checkUpdateOnLogin() {
+      try {
+        const res = await postCommonCheckVersion({
+          system: "",
+          version: this.currentVersion,
+        });
+
+        if (res && res.data) {
+          this.latestVersion = res.data.latest_version || this.currentVersion;
+          this.hasNewVersion = this.compareVersions(
+            this.latestVersion,
+            this.currentVersion
+          );
+
+          if (this.hasNewVersion) {
+            // 显示升级提示框
+            this.upgradeConfirmVisible = true;
+          }
+        }
+      } catch (error) {
+        console.error("登录时检查更新失败:", error);
+      }
+    },
   },
 };
 </script>
@@ -89,12 +317,11 @@ export default {
 }
 
 .logo-section {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 
   .logo-circle {
     width: 80px;
     height: 80px;
-    // border-radius: 50%;
     background: linear-gradient(135deg, #00c4b6, #00897b);
     display: flex;
     align-items: center;
@@ -110,6 +337,41 @@ export default {
   }
 }
 
+.version-info {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  text-align: left;
+
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px dashed #e9ecef;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .label {
+      color: #666;
+      font-size: 14px;
+    }
+
+    .value {
+      color: #333;
+      font-weight: 500;
+      font-size: 14px;
+
+      &.new-version {
+        color: #67c23a;
+      }
+    }
+  }
+}
+
 .copyright {
   color: #666;
   font-size: 14px;
@@ -137,4 +399,110 @@ export default {
     margin: 0 4px;
   }
 }
+
+// 升级确认弹窗样式
+.upgrade-confirm-content {
+  padding: 20px;
+  text-align: center;
+
+  .icon-wrapper {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #67c23a, #85ce61);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px;
+    color: #fff;
+    font-size: 28px;
+  }
+
+  h3 {
+    color: #333;
+    margin-bottom: 8px;
+  }
+
+  .current-version {
+    color: #999;
+    font-size: 14px;
+    margin-bottom: 16px;
+  }
+
+  .release-notes {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 16px;
+    text-align: left;
+
+    h4 {
+      color: #333;
+      font-size: 14px;
+      margin-bottom: 12px;
+    }
+
+    ul {
+      margin: 0;
+      padding-left: 20px;
+
+      li {
+        color: #666;
+        font-size: 13px;
+        line-height: 1.8;
+      }
+    }
+  }
+
+  .upgrade-tips {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #f5a623;
+    font-size: 13px;
+    margin-bottom: 20px;
+
+    i {
+      font-size: 14px;
+    }
+  }
+
+  .confirm-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+  }
+}
+
+// 升级进度弹窗样式
+.upgrade-progress-content {
+  padding: 30px 20px;
+  text-align: center;
+
+  .progress-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #409eff, #67c23a);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 20px;
+    color: #fff;
+    font-size: 24px;
+  }
+
+  .progress-text {
+    color: #333;
+    font-size: 15px;
+    margin-bottom: 20px;
+  }
+
+  .progress-detail {
+    color: #999;
+    font-size: 13px;
+    margin-top: 16px;
+  }
+}
 </style>