[AI Generated]: refactor(Views): 重构连接设备页设备列表为统一循环并补全卡片样式

2026-05-11 16:25:35 +08:00
parent 8b91edcef7
commit 640966ae61
5 changed files with 310 additions and 74 deletions
@@ -1 +1,91 @@
-<view class="page">connectedWifi 占位</view>
+<view class="connected-wifi">
+
+	<!-- 顶部装饰:configuring 显示三层同心圆动画;其余状态显示静态占位图 -->
+	<block wx:if="{{ status === 'configuring' }}">
+		<view class="ripple"></view>
+	</block>
+	<block wx:else>
+		<view class="hero"></view>
+	</block>
+
+	<!-- 主标题:随状态切换 -->
+	<view class="title">
+		{{
+			status === 'idle' ? '为设备配置 WiFi' :
+			status === 'configuring' ? '正在配网中...' :
+			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">
+				<text class="form-label">WiFi 密码</text>
+				<input
+					class="form-input"
+					password="{{ !form.showPwd }}"
+					placeholder="请输入 WiFi 密码"
+					placeholder-class="form-placeholder"
+					value="{{ form.password }}"
+					disabled="{{ status === 'configuring' }}"
+					bindinput="onInputPwd"
+				/>
+				<view class="form-eye" bind:tap="onTogglePwd">
+					{{ form.showPwd ? '隐藏' : '显示' }}
+				</view>
+			</view>
+		</view>
+	</block>
+
+	<!-- 成功结果区:仅 success 显示 -->
+	<block wx:if="{{ status === 'success' }}">
+		<view class="result-success">
+			<view class="result-icon-success"></view>
+			<view class="result-text">设备已成功连接到 {{ form.ssid || '当前 WiFi' }}</view>
+		</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>