[AI Generated]: feat(Views): 新增连接WiFi页五态状态机及跳转完善个人信息

.idea/claudeCodeTabState.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ClaudeCodeTabState">
-    <option name="tabCount" value="3" />
-  </component>
-</project>

miniprogram/pages/connectedWifi/connectedWifi.js

@@ -1,43 +1,104 @@
-// 是否 mock 配网成功,false 则走失败态
+// 是否 mock 能搜索到 WiFi,false 则走空状态
-const MOCK_CONFIG_SUCCESS = true
+const MOCK_HAS_WIFI = true
 
-// 模拟配网耗时(毫秒)
+// 模拟搜索耗时(毫秒)
-const MOCK_CONFIG_DURATION = 2000
+const MOCK_SEARCH_DURATION = 600
 
 Page({
     data: {
         /**
          * 页面状态
-         *  - idle:        未配网(进入页面默认态)
+         *  - idle:      未搜索(进入页面默认态,onLoad 立即流转)
-         *  - configuring: 配网中
+         *  - searching: 搜索中
-         *  - success:     配网成功
+         *  - list:      搜索完成且有 WiFi
-         *  - failed:      配网失败
+         *  - empty:     搜索完成但无 WiFi
+         *  - password:  从列表选中某项后进入密码输入态
          */
         status: 'idle',
 
-        /* 配网表单 */
+        /* 当前已连接的设备(从上一页带过来的固定卡片信息) */
+        currentDevice: {
+            id: 'mock-device',
+            name: '智能体重秤 Pro',
+        },
+
+        /* WiFi 列表(connected: true 表示已通过本页配网成功的网络) */
+        wifiList: [],
+
+        /* 是否已有任一 WiFi 配网成功,决定底部「确认」按钮是否可点击 */
+        hasConnected: false,
+
+        /* 当前在密码态选中的 WiFi */
+        selectedWifi: {
+            id: '',
+            name: '',
+        },
+
+        /* 密码表单 */
         form: {
-            ssid: '',        // WiFi 名称
+            password: '',
-            password: '',    // WiFi 密码
+            showPwd: false,
-            showPwd: false,  // 是否明文显示密码
         },
     },
 
     onLoad() {
-
+        /* 设计稿表达"进入页面立即搜索",但状态机仍由 idle 起步,
+         * 此处手动调用按钮事件,避免"自动逻辑"与"按钮逻辑"分叉 */
+        this.onStartSearch()
     },
 
     onUnload() {
-        /* 清除配网定时器,防止页面卸载后还触发 setData */
+        /* 清除搜索定时器,防止页面卸载后还触发 setData */
-        if (this._configTimer) {
+        if (this._searchTimer) {
-            clearTimeout(this._configTimer)
+            clearTimeout(this._searchTimer)
-            this._configTimer = null
+            this._searchTimer = null
         }
     },
 
-    /* 输入 WiFi 名称 */
+    /* 开始搜索 / 重新搜索 WiFi */
-    onInputSsid(e) {
+    onStartSearch() {
-        this.setData({ 'form.ssid': e.detail.value })
+        this.setData({
+            status: 'searching',
+            wifiList: [],
+            hasConnected: false,
+        })
+        wx.setNavigationBarTitle({ title: 'WiFi连接' })
+
+        /* 模拟搜索,后续接入真实 WiFi 扫描 API 时删除 */
+        this._searchTimer = setTimeout(() => {
+            if (MOCK_HAS_WIFI) {
+                this.setData({
+                    status: 'list',
+                    wifiList: [
+                        { id: 'wifi-1', name: 'HomeWiFi_5G', connected: false },
+                        { id: 'wifi-2', name: 'Office_2.4G', connected: false },
+                        { id: 'wifi-3', name: 'Guest_WiFi', connected: false },
+                        { id: 'wifi-4', name: 'HUAWEI-4009AV', connected: false },
+                    ],
+                })
+            } else {
+                this.setData({ status: 'empty' })
+            }
+        }, MOCK_SEARCH_DURATION)
+    },
+
+    /* 点击「刷新」按钮:重新搜索 */
+    onRefresh() {
+        this.onStartSearch()
+    },
+
+    /* 点击 WiFi 列表项:跳转密码输入态 */
+    onTapWifi(e) {
+        const { id } = e.currentTarget.dataset
+        const wifi = this.data.wifiList.find(item => item.id === id)
+        if (!wifi) return
+
+        this.setData({
+            status: 'password',
+            selectedWifi: { id: wifi.id, name: wifi.name },
+            form: { password: '', showPwd: false },
+        })
+        wx.setNavigationBarTitle({ title: '输入WiFi密码' })
     },
 
     /* 输入 WiFi 密码 */
@@ -50,47 +111,45 @@ Page({
         this.setData({ 'form.showPwd': !this.data.form.showPwd })
     },
 
-    /* 主按钮:根据 status 路由到不同动作 */
+    /* 取消密码输入:回到列表态 */
-    onSubmit() {
+    onCancelPwd() {
-        const { status } = this.data
+        this.setData({
-        if (status === 'configuring') return
+            status: 'list',
-        if (status === 'success') {
+            selectedWifi: { id: '', name: '' },
-            this.onFinish()
+            form: { password: '', showPwd: false },
-            return
+        })
-        }
+        wx.setNavigationBarTitle({ title: 'WiFi连接' })
-        /* idle / failed 均触发开始配网 */
-        this.onStartConfig()
     },
 
-    /* 开始配网 / 重新配网 */
+    /* 确认密码,提交连接 */
-    onStartConfig() {
+    onConfirmPwd() {
-        const { ssid, password } = this.data.form
+        const { password } = this.data.form
-        if (!ssid) {
-            wx.showToast({ title: '请输入 WiFi 名称', icon: 'none' })
-            return
-        }
         if (!password) {
             wx.showToast({ title: '请输入 WiFi 密码', icon: 'none' })
             return
         }
 
-        this.setData({ status: 'configuring' })
+        /* TODO: 接入真实 WiFi 配网 API,这里直接 mock 成功并回到列表 */
+        const { id: selectedId } = this.data.selectedWifi
+        const wifiList = this.data.wifiList.map(item => ({
+            ...item,
+            connected: item.id === selectedId,
+        }))
 
-        /* 模拟配网,后续接入真实配网 API 时删除 */
+        this.setData({
-        this._configTimer = setTimeout(() => {
+            status: 'list',
-            this.setData({ status: MOCK_CONFIG_SUCCESS ? 'success' : 'failed' })
+            wifiList,
-        }, MOCK_CONFIG_DURATION)
+            hasConnected: true,
+            selectedWifi: { id: '', name: '' },
+            form: { password: '', showPwd: false },
+        })
+        wx.setNavigationBarTitle({ title: 'WiFi连接' })
+        wx.showToast({ title: '连接成功', icon: 'success' })
     },
 
-    /* 配网成功后点击完成 */
+    /* 点击底部「确认」:连接成功后跳转完善个人信息页 */
-    onFinish() {
+    onConfirm() {
-        /* TODO: 接入真实跳转逻辑,例如回到设备首页 */
+        if (!this.data.hasConnected) return
-        wx.navigateBack({ delta: 1 })
+        wx.navigateTo({ url: '/pages/supplementPersonal/supplementPersonal' })
-    },
-
-    /* 查看帮助 */
-    onOpenHelp() {
-        console.log('查看帮助')
-        /* TODO: 跳帮助页 */
     },
 })

miniprogram/pages/connectedWifi/connectedWifi.json

@@ -1,3 +1,4 @@
 {
+  "navigationBarTitleText": "WiFi连接",
   "usingComponents": {}
 }

miniprogram/pages/connectedWifi/connectedWifi.less

@@ -1,121 +1,239 @@
-/* WiFi 配网页 —— 四态(idle / configuring / success / failed)共用 */
+/* WiFi 配网页 —— 五态(idle / searching / list / empty / password)共用 */
 .connected-wifi {
 	width: 100%;
 	height: 100%;
-	padding: 48rpx 30rpx 0;
+	padding: 30rpx 30rpx 0;
 	box-sizing: border-box;
+	background-color: #FFFFFF;
 
-	.ripple {
+	/* 顶部已连接设备卡:沿用 connectedDevice 的 device-card 规范 */
-		width: 300rpx;
+	.device-card {
-		height: 300rpx;
-		border-radius: 50%;
-		margin: 0 auto 48rpx;
-		background-color: red;
-	}
-
-	.hero {
-		width: 300rpx;
-		height: 300rpx;
-		border-radius: 50%;
-		margin: 0 auto 48rpx;
-		background-color: rgba(19, 133, 250, 0.1);
-	}
-
-	.title {
-		color: #252535;
-		width: 100%;
-		height: 36rpx;
-		font-size: 36rpx;
-		font-weight: bold;
-		line-height: 36rpx;
-		text-align: center;
-		margin-bottom: 22rpx;
-	}
-
-	.sub-title {
-		color: #808080;
-		width: 100%;
-		font-size: 30rpx;
-		text-align: center;
-		line-height: 42rpx;
-		margin-bottom: 40rpx;
-	}
-
-	.wifi-form {
 		width: 100%;
+		height: 150rpx;
+		display: flex;
+		align-items: center;
+		padding: 0 30rpx;
 		background-color: #FFFFFF;
 		border: 2rpx solid #E6E6EA;
 		border-radius: 16rpx;
 		box-sizing: border-box;
-		padding: 0 30rpx;
+		margin-bottom: 47rpx;
-		margin-bottom: 32rpx;
 
-		.form-row {
+		.card-icon {
-			width: 100%;
+			width: 90rpx;
-			height: 100rpx;
+			height: 90rpx;
+			overflow: hidden;
+			margin-right: 24rpx;
+			border-radius: 24rpx;
+			background-color: red;
+		}
+
+		.card-info {
+			flex: 1;
 			display: flex;
-			align-items: center;
+			flex-direction: column;
-			border-bottom: 2rpx solid #F5F5F5;
+			justify-content: center;
 
-			&:last-child {
+			.card-name {
-				border-bottom: none;
-			}
-
-			.form-label {
 				color: #252535;
-				width: 160rpx;
+				height: 32rpx;
-				font-size: 30rpx;
+				font-size: 32rpx;
-				font-weight: 500;
+				font-weight: bold;
-				line-height: 30rpx;
+				line-height: 32rpx;
-				flex-shrink: 0;
+				margin-bottom: 16rpx;
 			}
 
-			.form-input {
+			.card-status {
-				flex: 1;
+				display: flex;
-				color: #252535;
+				align-items: center;
-				font-size: 30rpx;
-				line-height: 30rpx;
-			}
 
-			.form-placeholder {
+				.card-dot {
-				color: #B0B0B0;
+					width: 12rpx;
-				font-size: 30rpx;
+					height: 12rpx;
-			}
+					border-radius: 50%;
+					margin-right: 14rpx;
+					background-color: #2AC79F;
+				}
 
-			.form-eye {
+				.card-status-text {
-				color: #1385FA;
+					color: #2AC79F;
-				font-size: 28rpx;
+					height: 28rpx;
-				line-height: 28rpx;
+					font-size: 28rpx;
-				padding-left: 24rpx;
+					font-weight: 500;
-				flex-shrink: 0;
+					line-height: 28rpx;
+				}
 			}
 		}
 	}
 
-	.result-success {
+	/* 附近WiFi 标题行 */
+	.wifi-header {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+
+		.wifi-title {
+			color: #252535;
+			height: 36rpx;
+			font-size: 36rpx;
+			font-weight: bold;
+			line-height: 36rpx;
+		}
+
+		.wifi-refresh {
+			height: 36rpx;
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: center;
+
+			.wifi-refresh-icon {
+				width: 30rpx;
+				height: 30rpx;
+				margin-right: 10rpx;
+			}
+
+			.wifi-refresh-text {
+				color: #1385FA;
+				height: 36rpx;
+				font-size: 28rpx;
+				font-weight: 500;
+				line-height: 36rpx;
+			}
+		}
+	}
+
+	/* 副标题:网络列表(请选择一个网络进行连接) */
+	.wifi-subtitle {
+		width: 100%;
+		height: 30rpx;
+		line-height: 30rpx;
+		margin-top: 40rpx;
+
+		.wifi-subtitle-text {
+			color: #B6B6B6;
+			font-size: 30rpx;
+		}
+
+		.wifi-subtitle-tip {
+			color: #B6B6B6;
+			font-size: 28rpx;
+			padding: 0 10rpx;
+		}
+	}
+
+	/* WiFi 列表 */
+	.wifi-list {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+
+		/* 列表项通用骨架 */
+		.wifi-item {
+			width: 100%;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
+			margin-bottom: 32rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			/* 普通项左侧:80rpx 灰底圆形 + 内嵌信号图标占位 */
+			.wifi-item-icon {
+				width: 80rpx;
+				height: 80rpx;
+				overflow: hidden;
+				margin-right: 24rpx;
+				border-radius: 50%;
+				background-color: #F7F7F7;
+			}
+
+			.wifi-item-name {
+				flex: 1;
+				color: #252535;
+				height: 32rpx;
+				font-size: 32rpx;
+				font-weight: 500;
+				line-height: 32rpx;
+			}
+
+			.wifi-item-arrow {
+				width: 10rpx;
+				height: 18rpx;
+				background-color: #B6B6B6;
+				flex-shrink: 0;
+			}
+		}
+
+		/* 已连接项:蓝色文字 + 右侧已连接勾 */
+		.wifi-item-connected {
+			.wifi-item-icon-connected {
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 50%;
+				background-color: rgba(19, 133, 250, 0.1);
+			}
+
+			.wifi-item-name-connected {
+				flex: 1;
+				color: #1385FA;
+				font-size: 32rpx;
+				font-weight: 500;
+				line-height: 32rpx;
+				margin-left: 24rpx;
+			}
+
+			.wifi-item-tag {
+				display: flex;
+				align-items: center;
+				flex-shrink: 0;
+
+				.wifi-item-tag-text {
+					color: #2AC79F;
+					font-size: 24rpx;
+					font-weight: 500;
+					line-height: 24rpx;
+					margin-right: 5rpx;
+				}
+
+				.wifi-item-tag-check {
+					width: 24rpx;
+					height: 24rpx;
+					border-radius: 50%;
+					background-color: #2AC79F;
+				}
+			}
+		}
+	}
+
+	/* 空态 */
+	.empty {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-bottom: 40rpx;
+		margin-top: 39rpx;
 
-		.result-icon-success {
+		.empty-image {
-			width: 120rpx;
+			width: 566rpx;
-			height: 120rpx;
+			height: 499rpx;
-			border-radius: 50%;
+			border-radius: 16rpx;
-			background-color: rgba(42, 199, 159, 0.1);
+			background-color: #F5F8FF;
-			margin-bottom: 24rpx;
 		}
 
-		.result-text {
+		.empty-text {
-			color: #2AC79F;
+			color: #1385FA;
-			font-size: 30rpx;
+			font-size: 36rpx;
-			font-weight: 500;
+			font-weight: bold;
-			line-height: 30rpx;
+			line-height: 36rpx;
+			margin-top: 8rpx;
 		}
 	}
 
-	.submit-btn {
+	/* 底部「确认」按钮:连接成功后才可点击 */
+	.confirm-btn {
 		color: #FFFFFF;
 		width: 580rpx;
 		height: 88rpx;
@@ -124,31 +242,137 @@
 		text-align: center;
 		line-height: 88rpx;
 		border-radius: 44rpx;
-		margin: 0 auto 32rpx;
+		margin: 60rpx auto 32rpx;
 		background-color: #1385FA;
 	}
 
-	.submit-btn-disabled {
+	.confirm-btn-disabled {
 		background-color: #A8C9F0;
 	}
 
-	.help {
+	/* 密码输入态:整页独立布局 */
+	.password-page {
 		width: 100%;
-		height: 30rpx;
+		padding-top: 29rpx;
-		text-align: center;
-		line-height: 30rpx;
-		margin-bottom: 60rpx;
 
-		.help-text {
+		.password-title {
-			color: #808080;
+			color: #252535;
-			font-size: 30rpx;
+			font-size: 36rpx;
-			line-height: 30rpx;
+			font-weight: bold;
+			line-height: 36rpx;
+			padding-left: 11rpx;
 		}
 
-		.help-link {
+		/* 已选 WiFi 行:灰底 16rpx 圆角 */
-			color: #1385FA;
+		.password-ssid {
-			font-size: 30rpx;
+			width: 100%;
-			line-height: 30rpx;
+			height: 96rpx;
+			display: flex;
+			align-items: center;
+			background-color: #F6F6F6;
+			border-radius: 16rpx;
+			padding: 0 21rpx 0 32rpx;
+			box-sizing: border-box;
+			margin-top: 39rpx;
+
+			.password-ssid-icon {
+				width: 45rpx;
+				height: 31rpx;
+				background-color: #B6B6B6;
+				border-radius: 4rpx;
+				flex-shrink: 0;
+			}
+
+			.password-ssid-name {
+				flex: 1;
+				color: #252535;
+				font-size: 32rpx;
+				line-height: 32rpx;
+				margin-left: 49rpx;
+			}
+
+			.password-ssid-close {
+				width: 56rpx;
+				height: 56rpx;
+				border-radius: 50%;
+				background-color: #E6E6EA;
+				flex-shrink: 0;
+			}
+		}
+
+		/* 密码输入行:灰底 16rpx 圆角 */
+		.password-input-row {
+			width: 100%;
+			height: 96rpx;
+			display: flex;
+			align-items: center;
+			background-color: #F6F6F6;
+			border-radius: 16rpx;
+			padding: 0 21rpx 0 24rpx;
+			box-sizing: border-box;
+			margin-top: 32rpx;
+
+			.password-label {
+				color: #252535;
+				font-size: 32rpx;
+				font-weight: 500;
+				line-height: 32rpx;
+				margin-right: 41rpx;
+				flex-shrink: 0;
+			}
+
+			.password-input {
+				flex: 1;
+				color: #252535;
+				font-size: 32rpx;
+				line-height: 32rpx;
+			}
+
+			.password-placeholder {
+				color: #B6B6B6;
+				font-size: 32rpx;
+			}
+
+			.password-eye {
+				width: 56rpx;
+				height: 56rpx;
+				border-radius: 50%;
+				background-color: #E6E6EA;
+				margin-left: 24rpx;
+				flex-shrink: 0;
+			}
+		}
+
+		/* 取消 / 连接 双按钮 */
+		.password-actions {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			margin-top: 48rpx;
+
+			.btn-ghost {
+				width: 300rpx;
+				height: 88rpx;
+				line-height: 84rpx;
+				text-align: center;
+				color: #1385FA;
+				font-size: 32rpx;
+				border: 2rpx solid #1385FA;
+				border-radius: 44rpx;
+				box-sizing: border-box;
+			}
+
+			.btn-primary {
+				width: 300rpx;
+				height: 88rpx;
+				line-height: 88rpx;
+				text-align: center;
+				color: #FFFFFF;
+				font-size: 32rpx;
+				font-weight: bold;
+				background-color: #1385FA;
+				border-radius: 44rpx;
+			}
 		}
 	}
 }

miniprogram/pages/connectedWifi/connectedWifi.wxml

@@ -1,91 +1,111 @@
 <view class="connected-wifi">
 
-	<!-- 顶部装饰:configuring 显示三层同心圆动画;其余状态显示静态占位图 -->
+	<!-- 密码输入态:整页覆盖,独立布局 -->
-	<block wx:if="{{ status === 'configuring' }}">
+	<block wx:if="{{ status === 'password' }}">
-		<view class="ripple"></view>
+		<view class="password-page">
-	</block>
+			<view class="password-title">输入WiFi密码</view>
-	<block wx:else>
-		<view class="hero"></view>
-	</block>
 
-	<!-- 主标题:随状态切换 -->
+			<!-- 已选 WiFi 行 -->
-	<view class="title">
+			<view class="password-ssid">
-		{{
+				<view class="password-ssid-icon"></view>
-			status === 'idle' ? '为设备配置 WiFi' :
+				<text class="password-ssid-name">{{ selectedWifi.name }}</text>
-			status === 'configuring' ? '正在配网中...' :
+				<view class="password-ssid-close" bind:tap="onCancelPwd"></view>
-			status === 'success' ? '配网成功' : '配网失败'
-		}}
-	</view>
-
-	<!-- 副标题:随状态切换 -->
-	<view class="sub-title">
-		{{
-			status === 'idle' ? '请输入 2.4G WiFi 名称和密码,确保设备处于配网状态' :
-			status === 'configuring' ? '请保持设备与手机靠近,正在传输配网信息' :
-			status === 'success' ? '设备已成功连入 WiFi 网络,可正常使用' : '请检查 WiFi 密码或设备状态后重试'
-		}}
-	</view>
-
-	<!-- 配网表单:idle / configuring / failed 时显示 -->
-	<block wx:if="{{ status !== 'success' }}">
-		<view class="wifi-form">
-
-			<!-- WiFi 名称行 -->
-			<view class="form-row">
-				<text class="form-label">WiFi 名称</text>
-				<input
-					class="form-input"
-					type="text"
-					placeholder="请输入 WiFi 名称"
-					placeholder-class="form-placeholder"
-					value="{{ form.ssid }}"
-					disabled="{{ status === 'configuring' }}"
-					bindinput="onInputSsid"
-				/>
 			</view>
 
-			<!-- WiFi 密码行 -->
+			<!-- 密码输入行 -->
-			<view class="form-row">
+			<view class="password-input-row">
-				<text class="form-label">WiFi 密码</text>
+				<text class="password-label">密码</text>
 				<input
-					class="form-input"
+					class="password-input"
 					password="{{ !form.showPwd }}"
-					placeholder="请输入 WiFi 密码"
+					placeholder="输入您的wifi密码"
-					placeholder-class="form-placeholder"
+					placeholder-class="password-placeholder"
 					value="{{ form.password }}"
-					disabled="{{ status === 'configuring' }}"
 					bindinput="onInputPwd"
 				/>
-				<view class="form-eye" bind:tap="onTogglePwd">
+				<view class="password-eye" bind:tap="onTogglePwd"></view>
-					{{ form.showPwd ? '隐藏' : '显示' }}
+			</view>
+
+			<!-- 取消 / 连接 双按钮 -->
+			<view class="password-actions">
+				<view class="btn-ghost" bind:tap="onCancelPwd">取消</view>
+				<view class="btn-primary" bind:tap="onConfirmPwd">连接</view>
+			</view>
+		</view>
+	</block>
+
+	<!-- 列表 / 空态:共用顶部设备卡 + 标题行 -->
+	<block wx:if="{{ status === 'list' || status === 'empty' }}">
+
+		<!-- 顶部设备卡:始终显示"已连接" -->
+		<view class="device-card">
+			<view class="card-icon"></view>
+			<view class="card-info">
+				<view class="card-name">{{ currentDevice.name }}</view>
+				<view class="card-status">
+					<view class="card-dot"></view>
+					<text class="card-status-text">已连接</text>
 				</view>
 			</view>
 		</view>
-	</block>
 
-	<!-- 成功结果区:仅 success 显示 -->
+		<!-- 附近WiFi 标题行 + 右侧「刷新」 -->
-	<block wx:if="{{ status === 'success' }}">
+		<view class="wifi-header">
-		<view class="result-success">
+			<text class="wifi-title">附近WiFi</text>
-			<view class="result-icon-success"></view>
+			<view class="wifi-refresh" bind:tap="onRefresh">
-			<view class="result-text">设备已成功连接到 {{ form.ssid || '当前 WiFi' }}</view>
+				<view class="wifi-refresh-icon"></view>
+				<text class="wifi-refresh-text">刷新</text>
+			</view>
+		</view>
+
+		<!-- 副标题 -->
+		<view class="wifi-subtitle">
+			<text class="wifi-subtitle-text">网络列表(</text>
+			<text class="wifi-subtitle-tip">请选择一个网络进行连接</text>
+			<text class="wifi-subtitle-text">)</text>
+		</view>
+
+		<!-- 列表态 -->
+		<block wx:if="{{ status === 'list' }}">
+			<view class="wifi-list">
+				<block wx:for="{{ wifiList }}" wx:key="id">
+					<!-- 已连接项:蓝色文字 + 右侧已连接勾 -->
+					<block wx:if="{{ item.connected }}">
+						<view class="wifi-item wifi-item-connected" data-id="{{ item.id }}" bind:tap="onTapWifi">
+							<view class="wifi-item-icon-connected"></view>
+							<text class="wifi-item-name-connected">{{ item.name }}</text>
+							<view class="wifi-item-tag">
+								<text class="wifi-item-tag-text">已连接</text>
+								<view class="wifi-item-tag-check"></view>
+							</view>
+						</view>
+					</block>
+					<!-- 普通项:灰底圆形图标 + 右箭头 -->
+					<block wx:else>
+						<view class="wifi-item" data-id="{{ item.id }}" bind:tap="onTapWifi">
+							<view class="wifi-item-icon"></view>
+							<text class="wifi-item-name">{{ item.name }}</text>
+							<view class="wifi-item-arrow"></view>
+						</view>
+					</block>
+				</block>
+			</view>
+		</block>
+
+		<!-- 空态 -->
+		<block wx:if="{{ status === 'empty' }}">
+			<view class="empty">
+				<view class="empty-image"></view>
+				<view class="empty-text">未查找到可用wifi,请重试</view>
+			</view>
+		</block>
+
+		<!-- 底部「确认」按钮:必须连接成功一个 WiFi 后才可点击 -->
+		<view
+			class="confirm-btn {{ hasConnected ? '' : 'confirm-btn-disabled' }}"
+			bind:tap="onConfirm"
+		>
+			确认
 		</view>
 	</block>
-
-	<!-- 主按钮:文案与可用状态随 status 切换 -->
-	<view
-		class="submit-btn {{ status === 'configuring' ? 'submit-btn-disabled' : '' }}"
-		bind:tap="onSubmit"
-	>
-		{{
-			status === 'idle' ? '开始配网' :
-			status === 'configuring' ? '配网中...' :
-			status === 'success' ? '完成' : '重新配网'
-		}}
-	</view>
-
-	<!-- 帮助文案 -->
-	<view class="help">
-		<text class="help-text">设备无法连接 WiFi?</text>
-		<text class="help-link" bind:tap="onOpenHelp">查看帮助</text>
-	</view>
 </view>