feat: 重构移动端 H5 页面视觉设计

基于移动优先原则优化布局、排版、颜色和间距，提升设计感和专业度。

- 重构全局设计系统：颜色、阴影、间距、圆角、排版
- 优化 UserInfoCard：更大的头像和状态徽章设计
- 优化 DeviceStatusCard：信息层级和指标网格
- 优化 TrafficCard：进度条和数字排版
- 优化 FunctionCard：4列布局和触摸反馈
- 优化 WifiCard：列表设计和信息层次
- 优化 FloatingButton：去除渐变，纯色设计

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/WifiCard.vue

@@ -1,25 +1,29 @@
 <template>
-	<view class="card wifi-card">
-		<view class="card-header flex-row-sb">
-			<view class="title">WiFi配置</view>
-			<view class="btn-group">
-				<button class="btn-apple btn-primary btn-mini" @tap="$emit('modify')">修改</button>
-			</view>
+	<view class="wifi-card">
+		<view class="card-header">
+			<text class="text-heading">WiFi配置</text>
+			<button class="btn btn-mini btn-primary" @tap="$emit('modify')">修改</button>
 		</view>
-		<view class="wifi-info flex-col-g16 mt-30">
-			<view class="wifi-item flex-row-sb">
-				<view class="wifi-details flex-col-g8">
-					<view class="caption">网络名称</view>
-					<view class="subtitle">{{ deviceInfo.ssidName }}</view>
+		<view class="wifi-list">
+			<view class="wifi-item">
+				<view class="wifi-icon-wrap">
+					<text class="wifi-icon-text">📶</text>
 				</view>
-				<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidName)">复制</button>
+				<view class="wifi-content">
+					<text class="wifi-label">网络名称</text>
+					<text class="wifi-value">{{ deviceInfo.ssidName }}</text>
+				</view>
+				<button class="btn-copy" @tap="$emit('copy', deviceInfo.ssidName)">复制</button>
 			</view>
-			<view class="wifi-item flex-row-sb">
-				<view class="wifi-details flex-col-g8">
-					<view class="caption">连接密码</view>
-					<view class="subtitle">{{ deviceInfo.ssidPwd }}</view>
+			<view class="wifi-item">
+				<view class="wifi-icon-wrap">
+					<text class="wifi-icon-text">🔑</text>
 				</view>
-				<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidPwd)">复制</button>
+				<view class="wifi-content">
+					<text class="wifi-label">连接密码</text>
+					<text class="wifi-value">{{ deviceInfo.ssidPwd }}</text>
+				</view>
+				<button class="btn-copy" @tap="$emit('copy', deviceInfo.ssidPwd)">复制</button>
 			</view>
 		</view>
 	</view>
@@ -35,13 +39,86 @@
 
 <style scoped lang="scss">
 	.wifi-card {
-		.wifi-item {
-			padding: var(--space-md);
-			background: var(--gray-100);
-			border-radius: var(--radius-medium);
-			margin-bottom: var(--space-sm);
-			&:last-child { margin-bottom: 0; }
-			.wifi-details { flex: 1; }
+		background: var(--bg-surface);
+		border-radius: var(--radius-xl);
+		padding: var(--space-5);
+		box-shadow: var(--shadow-sm);
+	}
+
+	.card-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: var(--space-4);
+		border-bottom: 1rpx solid var(--gray-100);
+		margin-bottom: var(--space-4);
+	}
+
+	.wifi-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	.wifi-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-4);
+		padding: var(--space-4);
+		background: var(--gray-50);
+		border-radius: var(--radius-md);
+	}
+
+	.wifi-icon-wrap {
+		width: 64rpx;
+		height: 64rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-surface);
+		border-radius: var(--radius-sm);
+		flex-shrink: 0;
+	}
+
+	.wifi-icon-text {
+		font-size: 32rpx;
+	}
+
+	.wifi-content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2rpx;
+	}
+
+	.wifi-label {
+		font-size: 22rpx;
+		color: var(--text-tertiary);
+	}
+
+	.wifi-value {
+		font-size: 28rpx;
+		font-weight: 600;
+		color: var(--text-primary);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.btn-copy {
+		padding: var(--space-2) var(--space-4);
+		background: var(--bg-surface);
+		color: var(--primary);
+		font-size: 24rpx;
+		font-weight: 600;
+		border: none;
+		border-radius: var(--radius-full);
+		line-height: 1.5;
+		flex-shrink: 0;
+
+		&::after {
+			border: none;
 		}
 	}
-</style>
+</style>