update：优化wifi

src/apis.js

@@ -592,6 +592,13 @@ export const connectDeviceWifiAPI = async (ssid, password) => {
     );
 };
 
+// 查询设备当前联网类型及已连接的 WiFi 名称。
+export const getDeviceWifiStatusAPI = async () => {
+    return request("GET", "/user/device/wifiStatus", {}, BASE_URL, [0], {
+        showErrorToast: false,
+    });
+};
+
 // 获取硬件盒子版本信息，用于判断当前设备是否需要 OTA 升级。
 export const getHardwareBoxVersionAPI = async () => {
     return request("GET", "/user/hardwareBox/version");

src/pages/device/ota-wifi.vue

@@ -1,12 +1,15 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
+import { storeToRefs } from "pinia";
 import Container from "@/components/Container.vue";
-import ScreenHint from "@/components/ScreenHint.vue";
 import ModalDialog from "@/components/ModalDialog.vue";
 import OtaModal from "@/components/OtaModal.vue";
+import useStore from "@/store";
+import { capsuleHeight } from "@/util";
 import {
   connectDeviceWifiAPI,
+  getDeviceWifiStatusAPI,
   getHardwareBoxVersionAPI,
 } from "@/apis";
 import { useOtaUpdate } from "@/composables/useOtaUpdate";
@@ -16,11 +19,17 @@ const STATES = {
   LIST: "LIST",
   CONNECTING: "CONNECTING",
   CONNECTED: "CONNECTED",
+  LOCATION_REQUIRED: "LOCATION_REQUIRED",
 };
 
 const isIOS = uni.getDeviceInfo().osName === "ios";
+const { deviceStatus } = storeToRefs(useStore());
 const currentState = ref(STATES.SCANNING);
 const connectedWifi = ref(null);
+const connectedWifiName = ref("");
+const isDeviceOnWifi = computed(
+  () => deviceStatus.value.online === true && deviceStatus.value.netType === "wifi"
+);
 const wifiList = ref([]);
 const showWifiBanner = ref(false);
 
@@ -46,9 +55,17 @@ const firmwareMessageVisible = ref(false);
 const firmwareMessage = ref("");
 let countdownTimer = null;
 let wifiConnectRequestId = 0;
+let wifiStatusRequestId = 0;
 const WIFI_CONNECT_FAILED_TEXT = "连接失败，请检查WiFi密码或WiFi状态";
-// 控制授权拒绝弹窗显示/隐藏
-const wifiAuthDeniedVisible = ref(false);
+// 与 Container 的可滚动区域保持一致，底部说明在长短屏上都能贴近安全区。
+const windowInfo = uni.getWindowInfo();
+const contentMinHeight = Math.max(
+  0,
+  Math.round(
+    (windowInfo.windowHeight - capsuleHeight - 50) *
+      (750 / windowInfo.windowWidth)
+  )
+);
 
 const {
   updating: otaUpdating,
@@ -73,20 +90,29 @@ const isWifiPermissionDenied = (err) => {
   return /auth den|authorize|permission denied|user denied|scope\.userLocation/i.test(errMsg);
 };
 
-// 显示授权拒绝弹窗，通过 ScreenHint 组件呈现。
-const showWifiPermissionDeniedModal = () => {
-  wifiAuthDeniedVisible.value = true;
+// Android 定位不可用时展示蓝湖中的独立引导状态。
+const showLocationPermission = () => {
+  currentState.value = STATES.LOCATION_REQUIRED;
+  isRefreshing.value = false;
 };
 
-// 用户点击「重新授权」时，打开小程序权限设置页，引导用户开启位置权限后重新扫描。
+// 已拒绝授权时进入小程序设置；首次授权则重新扫描以触发系统权限流程。
 const handleReauthorize = () => {
-  wifiAuthDeniedVisible.value = false;
-  uni.openSetting({
-    success(res) {
-      // 若用户在设置页开启了位置权限，则重新启动 WiFi 扫描
-      if (res.authSetting["scope.userLocation"]) {
-        startScanning();
+  if (uni.getSystemSetting().locationEnabled === false) {
+    uni.showToast({ title: "请先开启手机定位服务", icon: "none" });
+    return;
   }
+  uni.getSetting({
+    success(res) {
+      if (res.authSetting["scope.userLocation"] !== false) {
+        startScanning();
+        return;
+      }
+      uni.openSetting({
+        success(setting) {
+          if (setting.authSetting["scope.userLocation"]) startScanning();
+        },
+      });
     },
   });
 };
@@ -96,7 +122,7 @@ const applyIOSConnectedWifi = (wifi) => {
   const ssid = wifi?.SSID;
   if (!ssid) {
     wifiList.value = [];
-    currentState.value = STATES.LIST;
+    currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
     isRefreshing.value = false;
     return;
   }
@@ -109,7 +135,7 @@ const applyIOSConnectedWifi = (wifi) => {
       fromCurrentWifi: true,
     },
   ];
-  currentState.value = STATES.LIST;
+  currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
   isRefreshing.value = false;
 };
 
@@ -127,7 +153,7 @@ const syncIOSConnectedWifi = () => {
         err,
       });
       wifiList.value = [];
-      currentState.value = STATES.LIST;
+      currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
       isRefreshing.value = false;
     },
   });
@@ -147,7 +173,7 @@ const startIOSScanning = () => {
         err,
       });
       if (err.errCode === 12005) showWifiBanner.value = true;
-      currentState.value = STATES.LIST;
+      currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
       isRefreshing.value = false;
     },
   });
@@ -168,6 +194,11 @@ const startScanning = () => {
     return;
   }
 
+  if (uni.getSystemSetting().locationEnabled === false) {
+    showLocationPermission();
+    return;
+  }
+
   wx.startWifi({
     success(res) {
       console.log("[OTA WiFi] wx.startWifi success:", res);
@@ -181,7 +212,11 @@ const startScanning = () => {
             errMsg: err?.errMsg,
             err,
           });
-          if (isWifiPermissionDenied(err)) showWifiPermissionDeniedModal();
+          if (isWifiPermissionDenied(err)) {
+            showLocationPermission();
+          } else {
+            currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
+          }
           if (err.errCode === 12005) showWifiBanner.value = true;
           isRefreshing.value = false;
         },
@@ -193,13 +228,18 @@ const startScanning = () => {
         errMsg: err?.errMsg,
         err,
       });
-      if (isWifiPermissionDenied(err)) showWifiPermissionDeniedModal();
+      if (isWifiPermissionDenied(err)) {
+        showLocationPermission();
+      } else {
+        currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
+      }
       if (err.errCode === 12005) showWifiBanner.value = true;
       isRefreshing.value = false;
     },
   });
 
   wx.onGetWifiList((res) => {
+    if (currentState.value === STATES.LOCATION_REQUIRED) return;
     const realWifiList = res.wifiList || [];
     if (realWifiList.length) {
       console.log("[OTA WiFi] wx.onGetWifiList received wifiList:", realWifiList);
@@ -207,7 +247,7 @@ const startScanning = () => {
       console.warn("[OTA WiFi] wx.onGetWifiList received empty wifiList:", res);
     }
     wifiList.value = realWifiList;
-    currentState.value = STATES.LIST;
+    currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
     isRefreshing.value = false;
   });
 };
@@ -256,12 +296,31 @@ const joinDisabled = computed(() => {
   return false;
 });
 
-// 按当前页面状态限制 WiFi 列表高度，避免列表撑开整页。
+// 列表按实际条目收起；空间不足时由页面布局限制高度并在卡片内滚动。
 const wifiListScrollHeight = computed(() => {
-  if (currentState.value === STATES.SCANNING) return "auto";
   const itemCount = wifiList.value.length + 1;
-  const maxHeight = currentState.value === STATES.CONNECTED ? 276 : 420;
-  return `${Math.min(itemCount * 92, maxHeight)}rpx`;
+  return `${itemCount * 108}rpx`;
+});
+
+// 展示条件只取 WebSocket 设备状态；接口仅提供名称，过期请求不得覆盖新状态。
+const refreshConnectedWifiName = async () => {
+  const requestId = ++wifiStatusRequestId;
+  if (!isDeviceOnWifi.value) {
+    connectedWifiName.value = "";
+    return;
+  }
+  connectedWifiName.value = "";
+  try {
+    const status = await getDeviceWifiStatusAPI();
+    if (requestId !== wifiStatusRequestId || !isDeviceOnWifi.value) return;
+    connectedWifiName.value = String(status?.ssid ?? "").trim();
+  } catch (error) {
+    if (requestId === wifiStatusRequestId) connectedWifiName.value = "";
+  }
+};
+
+watch(isDeviceOnWifi, () => {
+  void refreshConnectedWifiName();
 });
 
 // 取消当前 WiFi 连接请求的页面等待状态，并忽略可能迟到的响应。
@@ -309,6 +368,7 @@ const submitDeviceWifiConfig = async ({ ssid, password }) => {
     };
     connectError.value = "";
     currentState.value = STATES.CONNECTED;
+    void refreshConnectedWifiName();
     if (fromFirmwareUpdate.value) {
       openFirmwareCountdown();
     }
@@ -388,7 +448,9 @@ const openFirmwareCountdown = () => {
 
 // 监听系统输入法高度，用于让底部弹窗避开键盘遮挡。
 const handleKeyboardHeightChange = (res) => {
-  keyboardHeight.value = res?.height || 0;
+  keyboardHeight.value = Math.round(
+    (res?.height || 0) * (750 / windowInfo.windowWidth)
+  );
 };
 
 // 切换密码显示状态前先收起键盘，避免安全键盘和普通输入法切换时复用旧高度产生黑条。
@@ -420,12 +482,24 @@ onMounted(() => {
 
 // iOS 从系统 WiFi 设置返回小程序后，同步当前手机连接的 WiFi。
 onShow(() => {
+  void refreshConnectedWifiName();
   if (isIOS && currentState.value === STATES.LIST) {
     syncIOSConnectedWifi();
+  } else if (
+    !isIOS &&
+    currentState.value === STATES.LOCATION_REQUIRED &&
+    uni.getSystemSetting().locationEnabled !== false
+  ) {
+    uni.getSetting({
+      success(res) {
+        if (res.authSetting["scope.userLocation"] !== false) startScanning();
+      },
+    });
   }
 });
 
 onUnmounted(() => {
+  wifiStatusRequestId += 1;
   if (typeof uni.offKeyboardHeightChange === "function") {
     uni.offKeyboardHeightChange(handleKeyboardHeightChange);
   }
@@ -436,79 +510,93 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Container title="连接无线网络">
+  <Container :scroll="false">
     <!-- WiFi 不可用 Banner -->
     <view v-if="showWifiBanner" class="wifi-banner">
       <text class="wifi-banner-text">请先开启 WiFi 后刷新重试</text>
     </view>
 
-    <!-- SCANNING / LIST / CONNECTED -->
+    <!-- 扫描、候选网络与设备已连接网络共用页面主体 -->
     <view
       v-if="currentState === 'SCANNING' || currentState === 'LIST' || currentState === 'CONNECTED'"
       class="wifi-page"
+      :style="{ height: contentMinHeight + 'rpx' }"
     >
-      <!-- Hero: wifi1.png 单图（已内含吉祥物） -->
       <view class="hero-area">
-        <image src="https://static.shelingxingqiu.com/shootmini/static/ota/wifi1.png" mode="aspectFit" style="width: 194rpx; height: 164rpx;" />
-      </view>
-
-      <text class="page-title" :class="{ 'connected-page-title': currentState === 'CONNECTED' }">
-        {{ currentState === 'CONNECTED' ? '连接成功' : '连接无线网络' }}
-      </text>
-      <text v-if="currentState !== 'CONNECTED'" class="page-subtitle">网络名称仅支持英文字符及数字</text>
-
-      <view v-if="isIOS && currentState !== 'CONNECTED'" class="ios-guide">
-        <text class="ios-guide-text">请先在系统 WiFi 设置中连接目标网络，返回后选择当前 WiFi 并填写密码</text>
-      </view>
-
-      <!-- 已连接网络卡片 -->
-      <view v-if="currentState === 'CONNECTED'" class="section-label-row connected-section-label-row">
-        <text class="section-label">连接网络</text>
-      </view>
-      <view v-if="currentState === 'CONNECTED'" class="wifi-list-card connected-wifi-card">
-        <view class="wifi-item connected-wifi-item">
-          <image class="check-icon" src="https://static.shelingxingqiu.com/shootmini/static/sicon/check.png" mode="aspectFit" />
-          <text class="wifi-ssid connected-wifi-ssid">{{ connectedWifi?.SSID }}</text>
-          <view class="wifi-icons connected-wifi-icons">
         <image
-              v-if="connectedWifi?.secure"
-              class="security-icon"
-              src="https://static.shelingxingqiu.com/shootmini/static/sicon/pwd.png"
+          class="hero-image"
+          src="https://static.shelingxingqiu.com/shootmini/static/ota/wifi1.png"
           mode="aspectFit"
         />
-            <image class="signal-icon" src="https://static.shelingxingqiu.com/shootmini/static/sicon/wifi.png" mode="aspectFit" />
       </view>
+      <text class="page-title">智能弓箭连接无线网络</text>
+      <text class="page-subtitle">提醒：本操作将为智能弓箭连接WIFI网络，不会影响手机自身连接的WIFI网络。</text>
+
+      <view class="network-sections">
+        <!-- 仅设备 WebSocket 状态为 WiFi 时显示；此卡片不触发密码输入。 -->
+        <view v-if="isDeviceOnWifi && connectedWifiName" class="network-section connected-section">
+          <text class="section-label">已连接</text>
+          <view class="connected-wifi-card">
+            <text class="wifi-ssid">{{ connectedWifiName }}</text>
+            <image
+              class="check-icon"
+              src="https://static.shelingxingqiu.com/shootmini/static/sicon/check.png"
+              mode="aspectFit"
+            />
           </view>
         </view>
 
-      <!-- 网络列表标题 -->
+        <view class="network-section">
           <view class="section-label-row">
-        <text class="section-label">网络</text>
+            <text class="section-label">选择网络</text>
             <image
+              class="refresh-icon"
               src="https://static.shelingxingqiu.com/shootmini/static/sicon/refresh.png"
               mode="aspectFit"
-          :style="{ width: '34rpx', height: '34rpx', marginLeft: '8rpx', opacity: isRefreshing ? 0.3 : 0.7 }"
+              :style="{ opacity: isRefreshing ? 0.3 : 0.6 }"
               @click="startScanning"
             />
           </view>
 
-      <!-- 网络列表卡片 -->
-      <scroll-view
-        scroll-y
-        class="wifi-list-card"
-        :class="{ 'wifi-list-scroll': currentState !== 'SCANNING' }"
-        :style="{ height: wifiListScrollHeight }"
+          <block v-if="isIOS">
+            <view
+              v-if="wifiList.length"
+              class="ios-network-card current-network-card"
+              @click="selectWifi(wifiList[0])"
             >
-        <block v-if="currentState === 'SCANNING'">
-          <view class="wifi-item" @click="selectOther">
-            <text class="wifi-ssid other-text">其他...</text>
+              <view class="network-copy">
+                <text class="wifi-ssid">{{ wifiList[0].SSID }}</text>
+                <text class="network-desc">手机当前连接的网络</text>
+              </view>
+              <image
+                class="signal-icon"
+                src="https://static.shelingxingqiu.com/shootmini/static/sicon/wifi.png"
+                mode="aspectFit"
+              />
+            </view>
+            <view class="ios-network-card manual-network-card" @click="selectOther">
+              <view class="network-copy">
+                <text class="wifi-ssid">手动连接其他网络</text>
+                <text class="network-desc">由于权限限制，无法获取附近网络列表，如需连接其他网络请手动输入网络名称与密码进行连接。</text>
+              </view>
+              <image
+                class="signal-icon"
+                src="https://static.shelingxingqiu.com/shootmini/static/sicon/wifi.png"
+                mode="aspectFit"
+              />
             </view>
           </block>
-        <block v-else>
+
+          <scroll-view
+            v-else
+            scroll-y
+            class="android-list-card"
+            :style="{ maxHeight: wifiListScrollHeight }"
+          >
             <view
-            v-for="(wifi, idx) in wifiList"
+              v-for="wifi in wifiList"
               :key="wifi.SSID"
-            class="wifi-item"
+              class="android-network-item"
               @click="selectWifi(wifi)"
             >
               <text class="wifi-ssid">{{ wifi.SSID }}</text>
@@ -519,20 +607,46 @@ onUnmounted(() => {
                   src="https://static.shelingxingqiu.com/shootmini/static/sicon/pwd.png"
                   mode="aspectFit"
                 />
-              <image class="signal-icon" src="https://static.shelingxingqiu.com/shootmini/static/sicon/wifi.png" mode="aspectFit" />
+                <image
+                  class="signal-icon"
+                  src="https://static.shelingxingqiu.com/shootmini/static/sicon/wifi.png"
+                  mode="aspectFit"
+                />
               </view>
             </view>
-          <view class="wifi-item" @click="selectOther">
-            <text class="wifi-ssid other-text">其他...</text>
+            <view class="android-network-item manual-network-item" @click="selectOther">
+              <text class="wifi-ssid">手动连接其他网络</text>
             </view>
-        </block>
           </scroll-view>
+        </view>
+      </view>
 
+      <text class="wifi-footer">智能弓箭目前仅支持保存一条网络信息，若连接新的网络将删除上一条网络信息。</text>
+    </view>
+
+    <!-- Android 定位权限不足时的整页引导状态 -->
+    <view
+      v-if="currentState === 'LOCATION_REQUIRED'"
+      class="location-page"
+      :style="{ minHeight: contentMinHeight + 'rpx' }"
+    >
+      <view class="location-image-wrap">
+        <image
+          class="location-image"
+          src="https://static.shelingxingqiu.com/shootmini/static/device-assets/wifi-location.png"
+          mode="aspectFit"
+        />
+        <view class="location-shadow"></view>
+      </view>
+      <text class="location-desc">请授权允许获取定位信息，并开启定位功能，以查找附近可用无线网络。</text>
+      <view class="location-button" @click="handleReauthorize">
+        <text>授权获取定位信息</text>
+      </view>
     </view>
 
     <!-- CONNECTING 底部弹窗 -->
     <view v-if="currentState === 'CONNECTING'" class="sheet-mask">
-      <view class="sheet" :style="{ marginBottom: keyboardHeight + 'px' }" @click.stop="">
+      <view class="sheet" :style="{ marginBottom: keyboardHeight + 'rpx' }" @click.stop="">
         <image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-bg.png" mode="aspectFill" class="sheet-bg" />
         <view class="sheet-inner">
 
@@ -646,21 +760,6 @@ onUnmounted(() => {
       </view>
     </view>
 
-    <!-- 授权拒绝弹窗 -->
-    <ScreenHint :show="wifiAuthDeniedVisible" :onClose="() => (wifiAuthDeniedVisible = false)">
-      <view class="wifi-auth-denied">
-        <text class="wifi-auth-denied-text">拒绝授权获取wifi列表失败，请重新授权或手动输入</text>
-        <view class="wifi-auth-denied-btns">
-          <view class="wifi-auth-denied-btn cancel-btn" @click="wifiAuthDeniedVisible = false">
-            <text>取消授权</text>
-          </view>
-          <view class="wifi-auth-denied-btn confirm-btn" @click="handleReauthorize">
-            <text>重新授权</text>
-          </view>
-        </view>
-      </view>
-    </ScreenHint>
-
     <ModalDialog
       :show="countdownVisible"
       title="WiFi连接成功"
@@ -704,45 +803,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.wifi-auth-denied {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 32rpx 40rpx 24rpx;
-  gap: 32rpx;
-}
-.wifi-auth-denied-text {
-  color: #fff;
-  font-size: 28rpx;
-  text-align: center;
-  line-height: 1.6;
-}
-.wifi-auth-denied-btns {
-  display: flex;
-  flex-direction: row;
-  gap: 24rpx;
-  width: 100%;
-  justify-content: center;
-}
-.wifi-auth-denied-btn {
-  flex: 1;
-  height: 72rpx;
-  border-radius: 36rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 28rpx;
-}
-.wifi-auth-denied-btn.cancel-btn {
-  background: rgba(255, 255, 255, 0.15);
-  color: #fff;
-}
-.wifi-auth-denied-btn.confirm-btn {
-  background: rgba(254, 216, 71, 1);
-  color: #1a1a2e;
-  font-weight: 600;
-}
-
 .wifi-banner {
   background-color: rgba(255, 200, 0, 0.12);
   border: 1rpx solid rgba(254, 216, 71, 0.5);
@@ -756,200 +816,239 @@ onUnmounted(() => {
 }
 
 .wifi-page {
-  padding: 0 67rpx 40rpx;
+  box-sizing: border-box;
+  padding: 0 40rpx 54rpx;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .hero-area {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 40rpx 0 24rpx;
+  margin-top: 12rpx;
+}
+.hero-image {
+  width: 164rpx;
+  height: 152rpx;
 }
 
 .page-title {
-  color: rgba(91, 196, 255, 1);
+  display: block;
+  color: #5fadff;
   font-size: 36rpx;
+  line-height: 50rpx;
   font-weight: 600;
   text-align: center;
-  margin-bottom: 8rpx;
-}
-.connected-page-title {
-  color: #4DD9C8;
+  margin-top: 22rpx;
 }
 .page-subtitle {
-  color: rgba(255, 255, 255, 0.5);
+  display: block;
+  align-self: center;
+  width: 552rpx;
+  max-width: 100%;
+  color: #fff;
   font-size: 24rpx;
+  line-height: 34rpx;
   text-align: center;
-  margin-bottom: 32rpx;
+  margin-top: 4rpx;
 }
-.fail-title {
-  color: rgba(255, 100, 100, 1);
+.network-sections {
+  margin-top: 60rpx;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
 }
-
-.ios-guide {
-  background-color: rgba(95, 173, 255, 0.12);
-  border-radius: 8rpx;
-  padding: 16rpx 24rpx;
-  margin-bottom: 20rpx;
+.network-section:last-child {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
 }
-.ios-guide-text {
-  color: rgba(95, 173, 255, 1);
+.connected-section {
+  margin-bottom: 60rpx;
+  flex-shrink: 0;
+}
+.section-label {
+  display: block;
+  color: rgba(255, 255, 255, 0.6);
   font-size: 26rpx;
+  line-height: 36rpx;
 }
-
 .section-label-row {
   display: flex;
   align-items: center;
-  margin-bottom: 24rpx;
-  padding: 0 22rpx;
-}
-.connected-section-label-row {
-  margin-top: 32rpx;
-}
-.section-label {
-  color: rgba(255, 255, 255, 0.56);
-  font-size: 28rpx;
-}
-
-.wifi-list-card {
-  background-color: rgba(30, 35, 50, 0.96);
-  border-radius: 24rpx;
-  overflow: hidden;
-  margin-bottom: 20rpx;
-}
-.wifi-list-scroll {
+  justify-content: space-between;
+  height: 36rpx;
+  margin: 0 40rpx 20rpx;
   flex-shrink: 0;
 }
-.connected-wifi-card {
-  background-color: rgba(35, 40, 56, 0.96);
-  margin-bottom: 44rpx;
+.connected-section > .section-label {
+  margin: 0 40rpx 20rpx;
 }
-.wifi-item {
-  position: relative;
+.refresh-icon {
+  width: 30rpx;
+  height: 30rpx;
+}
+.connected-wifi-card,
+.ios-network-card,
+.android-list-card {
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+.connected-wifi-card {
+  height: 104rpx;
+  padding: 0 40rpx;
   display: flex;
   align-items: center;
-  min-height: 92rpx;
-  padding: 0 26rpx 0 66rpx;
-}
-.wifi-item:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  left: 66rpx;
-  right: 26rpx;
-  bottom: 0;
-  height: 1rpx;
-  background-color: rgba(255, 255, 255, 0.08);
-}
-.connected-wifi-item {
-  min-height: 88rpx;
-  padding-left: 28rpx;
+  justify-content: space-between;
 }
 .wifi-ssid {
-  color: rgba(255, 255, 255, 1);
-  font-size: 28rpx;
-  line-height: 36rpx;
+  display: block;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  font-size: 32rpx;
+  line-height: 44rpx;
+  margin-bottom: 8rpx;
+}
+.ios-network-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40rpx;
+}
+.current-network-card {
+  height: 124rpx;
+}
+.manual-network-card {
+  height: 156rpx;
+  margin-top: 20rpx;
+}
+.network-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
   flex: 1;
 }
-.connected-wifi-ssid {
-  font-weight: 500;
+.network-desc {
+  display: block;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 22rpx;
+  line-height: 32rpx;
 }
-.other-text {
-  color: rgba(255, 255, 255, 0.86);
+.manual-network-card .network-desc {
+  max-width: 484rpx;
+}
+.android-list-card {
+  padding: 0 40rpx;
+  flex: 1;
+  height: 0;
+  min-height: 0;
+}
+.android-network-item {
+  box-sizing: border-box;
+  height: 108rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 2rpx solid rgba(255, 255, 255, 0.15);
+}
+.android-network-item:last-child {
+  border-bottom: none;
 }
 .wifi-icons {
   display: flex;
   align-items: center;
-  gap: 12rpx;
+  gap: 16rpx;
   flex-shrink: 0;
 }
-.connected-wifi-icons {
-  gap: 14rpx;
-}
 .check-icon {
-  width: 28rpx;
-  height: 24rpx;
-  margin-right: 16rpx;
+  width: 40rpx;
+  height: 32rpx;
   flex-shrink: 0;
 }
 .security-icon {
   width: 24rpx;
-  height: 30rpx;
+  height: 28rpx;
   flex-shrink: 0;
 }
 .signal-icon {
-  width: 36rpx;
+  width: 40rpx;
   height: 32rpx;
   flex-shrink: 0;
 }
-
-.bottom-btn-area {
-  margin-top: 24rpx;
-}
-.connected-bottom-btn-area {
-  display: flex;
-  justify-content: center;
-  margin-top: 20rpx;
-}
-
-.primary-btn {
-  background-color: rgba(254, 216, 71, 1);
-  border-radius: 50rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.update-btn {
-  width: 412rpx;
-}
-.primary-btn-text {
-  color: rgba(0, 0, 0, 1);
-  font-size: 30rpx;
-  font-weight: 500;
-}
-
-.center-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 80rpx 32rpx 40rpx;
-}
-.page-desc-white {
-  color: rgba(255, 255, 255, 1);
-  font-size: 28rpx;
-  line-height: 52rpx;
+.wifi-footer {
+  display: block;
+  flex-shrink: 0;
+  align-self: center;
+  width: 550rpx;
+  max-width: 100%;
+  margin-top: auto;
+  padding-top: 60rpx;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 22rpx;
+  line-height: 32rpx;
   text-align: center;
 }
-.done-btn {
-  width: 80%;
-}
-
-.progress-wrap {
-  width: 80%;
+.location-page {
+  box-sizing: border-box;
+  padding: 0 40rpx 54rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16rpx;
-  margin-top: 40rpx;
 }
-.progress-track {
-  width: 100%;
-  height: 10rpx;
-  background-color: rgba(255, 255, 255, 0.15);
-  border-radius: 5rpx;
-  overflow: hidden;
+.location-image-wrap {
+  position: relative;
+  width: 200rpx;
+  height: 266rpx;
+  margin-top: 212rpx;
 }
-.progress-fill {
-  height: 100%;
-  background-color: rgba(91, 196, 255, 1);
-  border-radius: 5rpx;
-  transition: width 0.4s ease;
+.location-image {
+  position: relative;
+  z-index: 1;
+  width: 200rpx;
+  height: 266rpx;
 }
-.progress-pct {
-  color: rgba(91, 196, 255, 1);
+.location-shadow {
+  position: absolute;
+  left: 34rpx;
+  bottom: -22rpx;
+  width: 132rpx;
+  height: 50rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.location-desc {
+  display: block;
+  width: 560rpx;
+  max-width: 100%;
+  margin-top: 48rpx;
+  color: #fff;
   font-size: 28rpx;
+  line-height: 40rpx;
+  text-align: center;
+}
+.location-button {
+  box-sizing: border-box;
+  width: 364rpx;
+  height: 74rpx;
+  margin-top: 38rpx;
+  border: 2rpx solid #ffd800;
+  border-radius: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fed847;
+  font-size: 26rpx;
   font-weight: 600;
 }