feat：新增登录验证

src/pages/environment/index.vue

@@ -10,7 +10,7 @@
       <!-- 环境参数详情 -->
       <view class="parameter-details">
       <!-- 温度卡片 -->
-          <view class="detail-card temperature-detail-card">
+      <view class="detail-card temperature-detail-card" @click="navigateToParameterRecord">
         <view class="detail-header">
           <view class="detail-icon-container">
             <view class="detail-icon temperature-icon">🌡️</view>
@@ -30,7 +30,7 @@
       </view>
       
       <!-- 湿度卡片 -->
-          <view class="detail-card humidity-detail-card">
+      <view class="detail-card humidity-detail-card" @click="navigateToParameterRecord">
         <view class="detail-header">
           <view class="detail-icon-container">
             <view class="detail-icon humidity-icon">💧</view>
@@ -50,7 +50,7 @@
       </view>
       
       <!-- 洁净度卡片 -->
-          <view class="detail-card cleanliness-detail-card">
+      <view class="detail-card cleanliness-detail-card" @click="navigateToParameterRecord">
         <view class="detail-header">
           <view class="detail-icon-container">
             <view class="detail-icon cleanliness-icon">✨</view>
@@ -385,6 +385,13 @@ export default {
       this.loadWsdSettings()
       // 注意：定时器在 onShow 中启动，避免重复启动
     },
+    navigateToParameterRecord() {
+      try {
+        uni.switchTab({ url: '/pages/parameter/index' })
+      } catch (e) {
+        uni.showToast({ title: '页面跳转失败', icon: 'none' })
+      }
+    },
     // 首次进入系统时创建启动事件
     async createStartupEventIfNeeded() {
       // 检查是否已经创建过启动事件

src/pages/index/index.vue

@@ -17,14 +17,31 @@
         </view>
       </view>
 
-      <!-- 下部区域：按钮和版本号 -->
+      <!-- 登录表单：账号、密码 -->
-      <view class="bottom-section">
+      <view class="form-section">
-        <!-- 进入系统按钮 -->
+        <!-- <view class="form-item">
+          <text class="form-label">账号</text>
+          <input class="form-input" v-model="username" placeholder="请输入账号" placeholder-class="placeholder" confirm-type="next" />
+        </view> -->
+        <view class="form-item">
+          <text class="form-label">密码</text>
+          <input class="form-input" v-model="password" password placeholder="请输入密码" placeholder-class="placeholder" confirm-type="done" />
+        </view>
         <view class="action-container">
           <button class="enter-button" @click="navigateToTabBar">
             <text class="button-text">进入系统 →</text>
           </button>
         </view>
+      </view>
+      
+      <!-- 下部区域：按钮和版本号 -->
+      <view class="bottom-section">
+        <!-- 进入系统按钮 -->
+        <!-- <view class="action-container">
+          <button class="enter-button" @click="navigateToTabBar">
+            <text class="button-text">进入系统 →</text>
+          </button>
+        </view> -->
         
         <!-- 版本号 -->
         <view class="version-container">
@@ -37,18 +54,55 @@
 
 <script>
 import { manualReconnect } from '@/utils/sendMqtt.js'
+import { authApi } from '@/utils/api.js'
 
 export default {
   data() {
     return {
       title: 'Hello',
+      username: '',
+      password: '',
+    }
+  },
+  computed: {
+    canLogin() {
+      // return this.username && this.username.trim().length > 0 && this.password && this.password.trim().length > 0
+      return this.password && this.password.trim().length > 0
     }
   },
   onLoad() {},
   methods: {
-    navigateToTabBar() {
+    async navigateToTabBar() {
-      console.log('🔧 用户点击进入系统，开始MQTT重连...')
+      if (!this.canLogin) {
+        uni.showToast({
+          title: '请输入密码',
+          icon: 'none',
+          duration: 1200
+        })
+        return
+      }
+      console.log('🔒 开始登录...')
 
+      // 先登录
+      try {
+        uni.showLoading({ title: '正在登录...' })
+        const loginRes = await authApi.login({
+          username: this.username || 'admin',
+          password: this.password
+        })
+
+        console.log('🔒 登录结果:', loginRes)
+        if (loginRes.success) {
+          // 可选：如果返回 token，保存以备后续请求使用
+          if (loginRes && loginRes.token) {
+            const token = loginRes.token;
+            try {
+              uni.setStorageSync('auth_token', token)
+            } catch (e) {}
+          }
+
+          uni.hideLoading()
+          uni.showToast({ title: '登录成功', icon: 'success', duration: 800 })
           // 立即显示连接提示
           uni.showLoading({
             title: '正在连接MQTT...',
@@ -115,6 +169,26 @@ export default {
               duration: 1000
             })
           }
+        } else {
+          uni.hideLoading()
+          uni.showToast({
+            title: loginRes?.message || '登录失败',
+            icon: 'none',
+            duration: 1500
+          })
+          return
+        }
+      } catch (e) {
+        uni.hideLoading()
+        uni.showToast({
+          title: e?.message || '登录失败',
+          icon: 'none',
+          duration: 1500
+        })
+        return
+      }
+
+      console.log('🔧 用户点击进入系统，开始MQTT重连...')
     }
   },
 }
@@ -193,6 +267,7 @@ export default {
 /* 进入系统按钮 */
 .action-container {
   margin-bottom: 40rpx;
+  margin-top: 40px;
 }
 
 .enter-button {
@@ -210,6 +285,42 @@ export default {
   font-weight: 500;
 }
 
+/* 表单样式 */
+.form-section {
+  width: 100%;
+  max-width: 640rpx;
+  margin-top: 40rpx;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  background: #f7f8fa;
+  border-radius: 12rpx;
+  padding: 20rpx 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.form-label {
+  width: 120rpx;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.form-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #111111;
+}
+
+.placeholder {
+  color: #999999;
+}
+
+.enter-button:disabled {
+  opacity: 0.5;
+}
+
 /* 版本号 */
 
 .version-text {

src/utils/api.js

@@ -5,6 +5,15 @@
 
 import httpService from './http.js'
 
+// 认证接口
+export const authApi = {
+  // 登录
+  login(data) {
+    // 约定字段：username、password
+    return httpService.post('/api/auth/login', data)
+  }
+}
+
 // 数据历史接口
 export const dataHistoryApi = {
   // 获取历史数据

src/utils/sendMqtt.js

@@ -282,11 +282,11 @@ const sendMqttData = (data) => {
 				});
 			} else {
 				console.log('✅ MQTT数据发送成功');
-				uni.showToast({
+				// uni.showToast({
-					title: '数据发送成功',
+				// 	title: '数据发送成功',
-					icon: 'success',
+				// 	icon: 'success',
-					duration: 1500
+				// 	duration: 1500
-				});
+				// });
 			}
 		});
 		
@@ -334,11 +334,11 @@ const sendMqttDataRecall = (data) => {
 					duration: 2000
 				});
 			} else {
-				uni.showToast({
+				// uni.showToast({
-					title: '数据发送成功',
+				// 	title: '数据发送成功',
-					icon: 'success',
+				// 	icon: 'success',
-					duration: 1500
+				// 	duration: 1500
-				});
+				// });
 			}
 		});