更新

frontend/src/views/distribution/DownloadPage.vue

@@ -1,8 +1,5 @@
 <template>
-  <div class="download-page" :class="{ 'has-wechat-tip': isWeChat }">
-    <div v-if="isWeChat" class="wechat-tip">
-      <p>如果使用手机微信浏览器打开，请很清晰的点右上角三个点，用外部浏览器打开本网页</p>
-    </div>
+  <div class="download-page">
     <div v-loading="loading" class="card">
       <template v-if="data">
         <div class="app-info">
@@ -44,6 +41,25 @@
         <el-result icon="error" title="未找到" sub-title="该分发不存在或已被删除" />
       </template>
     </div>
+
+    <el-dialog
+      v-model="wechatTipVisible"
+      title="请在外部浏览器中打开"
+      width="340px"
+      align-center
+      :close-on-click-modal="true"
+    >
+      <div class="wechat-tip-content">
+        <div class="wechat-step">
+          <span class="step-text"><span class="step-num">1.</span>点击右上角三个点</span>
+          <img src="/wx_three_point.png" alt="三个点" class="step-img" />
+        </div>
+        <div class="wechat-step">
+          <span class="step-text"><span class="step-num">2.</span>选择在浏览器中打开</span>
+          <img src="/wx_out_browser.png" alt="在浏览器中打开" class="step-img" />
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -59,6 +75,7 @@ const isWeChat = /MicroMessenger/i.test(navigator.userAgent)
 const data = ref<DistributionPublicResponse | null>(null)
 const loading = ref(true)
 const error = ref(false)
+const wechatTipVisible = ref(false)
 
 const formatSize = (bytes: number) => {
   if (bytes < 1024) return bytes + ' B'
@@ -69,7 +86,11 @@ const formatSize = (bytes: number) => {
 const handleDownload = () => {
   const v = data.value?.latest_version
   if (!v?.download_url) return
-  window.open(v.download_url, '_blank')
+  if (isWeChat) {
+    wechatTipVisible.value = true
+  } else {
+    window.open(v.download_url, '_blank')
+  }
 }
 
 onMounted(async () => {
@@ -99,24 +120,30 @@ onMounted(async () => {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 20px;
 }
-.wechat-tip {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: #ff9800;
-  color: #fff;
-  padding: 16px 20px;
-  text-align: center;
-  z-index: 1000;
+.wechat-tip-content {
+  padding: 8px 0;
+}
+.wechat-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
   font-size: 15px;
-  line-height: 1.6;
 }
-.wechat-tip p {
-  margin: 0;
+.wechat-step:last-child {
+  margin-bottom: 0;
+}
+.step-text {
+  margin-bottom: 8px;
+}
+.step-num {
+  font-weight: 600;
 }
-.download-page.has-wechat-tip {
-  padding-top: 70px;
+.step-img {
+  width: 120px;
+  height: auto;
+  margin-top: 8px;
+  border-radius: 8px;
 }
 .card {
   background: #fff;