share分享页面增加微信引导层

views/v2/share.ejs

@@ -164,6 +164,51 @@
       align-items: center;
       margin-top: 40px;
     }
+
+    /* MARK: 微信引导层样式 */
+    .wechat-guide-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.85); /* 半透明黑色背景 */
+      z-index: 9999; /* 确保在最上层 */
+      display: none; /* 默认隐藏 */
+      justify-content: center;
+      align-items: center;
+      color: white;
+      font-size: 1.5rem;
+      text-align: center;
+      padding: 20px;
+      box-sizing: border-box;
+      flex-direction: column;
+    }
+
+    .wechat-guide-overlay.active {
+      display: flex; /* 显示引导层 */
+    }
+
+    .wechat-guide-arrow {
+      position: absolute;
+      top: 10px; /* 箭头位置靠近右上角 */
+      right: 20px;
+      width: 80px;
+      height: 80px;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" transform="rotate(90 12 12)"/></svg>') no-repeat center center;
+      background-size: contain;
+      transform: rotate(90deg); /* 旋转箭头指向右下 */
+    }
+
+    .wechat-guide-text {
+      margin-top: 100px; /* 留出箭头空间 */
+      line-height: 1.8;
+    }
+
+    .wechat-guide-text strong {
+      color: var(--accent-color); /* 突出显示关键文字 */
+    }
+
   </style>
 </head>
 
@@ -190,6 +235,34 @@
       </div>
     </div>
   </div>
+
+  <!-- MARK: 微信引导层 -->
+  <div id="wechat-guide-overlay" class="wechat-guide-overlay">
+    <div class="wechat-guide-arrow"></div>
+    <p class="wechat-guide-text">
+      请点击右上角 <strong>“...”</strong> 菜单<br>
+      选择 <strong>“在浏览器中打开”</strong><br>
+      即可跳转到 App 或下载页面
+    </p>
+  </div>
+
+  <script>
+    // MARK: 微信环境检测
+    function isWeChatBrowser() {
+      const ua = window.navigator.userAgent.toLowerCase();
+      return ua.includes('micromessenger');
+    }
+
+    const wechatGuideOverlay = document.getElementById('wechat-guide-overlay');
+    if (isWeChatBrowser()) {
+      wechatGuideOverlay.classList.add('active');
+      console.log("检测到微信浏览器，显示引导层。");
+    } else {
+      // 不在微信中，执行自动拉起 App 逻辑
+      wechatGuideOverlay.classList.remove('active'); // 确保隐藏
+    }
+
+  </script>
 </body>
 
 </html>