完成用户管理页面

main/manager-web/src/components/HeaderBar.vue

@@ -8,13 +8,11 @@
           <img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
           智能体管理
         </div>
-        <div class="console">
-          <i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
-          控制台
+        <div class="equipment-management2" @click="goUserManagement">
+          用户管理
         </div>
         <div class="equipment-management2">
-          设备管理
-          <img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
+          模型配置
         </div>
       </div>
       <div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
@@ -55,6 +53,9 @@ export default {
       // 跳转到首页
       this.$router.push('/')
     },
+    goUserManagement() {
+      this.$router.push('/user-management')
+    },
     // 获取用户信息
     fetchUserInfo() {
       userApi.getUserInfo(({data}) => {
@@ -108,17 +109,17 @@ export default {
 }
 
 .equipment-management2 {
-  width: 87px;
-  height: 22px;
-  border-radius: 11px;
+  width: 82px;
+  height: 24px;
+  border-radius: 12px;
   background: #fff;
   display: flex;
   justify-content: center;
-  font-size: 9px;
-  font-weight: 400;
+  font-size: 10px;
+  font-weight: 500;
   gap: 7px;
   color: #3d4566;
-  margin-left: 2px;
+  margin-left: 1px;
   align-items: center;
 }
 
@@ -158,18 +159,4 @@ export default {
   text-align: left;
   color: #3d4566;
 }
-.console {
-  width: 90px;
-  height: 22px;
-  border-radius: 11px;
-  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  color: #979db1;
-  font-weight: 400;
-  gap: 7px;
-  margin-left: 15px;
-}
 </style>

main/manager-web/src/router/index.js

@@ -39,13 +39,21 @@ const routes = [
       return import('../views/register.vue')
     }
   },
-      // 新增设备管理页面路由
+  // 设备管理页面路由
   {
     path: '/device-management',
     name: 'DeviceManagement',
     component: function () {
       return import('../views/DeviceManagement.vue')
     }
+  },
+  // 添加用户管理路由
+  {
+    path: '/user-management',
+    name: 'UserManagement',
+    component: function () {
+      return import('../views/UserManagement.vue')
+    }
 
   }
 ]

main/manager-web/src/views/DeviceManagement.vue

@@ -9,11 +9,11 @@
         </el-button>
         <el-table :data="deviceList" style="width: 100%; margin-top: 20px" border stripe>
           <el-table-column label="设备型号" prop="model" flex></el-table-column>
-          <el-table-column label="固件版本" prop="firmwareVersion" width="140"></el-table-column>
-          <el-table-column label="Mac地址" prop="macAddress" width="220"></el-table-column>
-          <el-table-column label="绑定时间" prop="bindTime" width="260"></el-table-column>
-          <el-table-column label="最近对话" prop="lastConversation" width="100"></el-table-column>
-          <el-table-column label="备注" width="220">
+          <el-table-column label="固件版本" prop="firmwareVersion" width="120"></el-table-column>
+          <el-table-column label="Mac地址" prop="macAddress"></el-table-column>
+          <el-table-column label="绑定时间" prop="bindTime" width="200"></el-table-column>
+          <el-table-column label="最近对话" prop="lastConversation" width="140"></el-table-column>
+          <el-table-column label="备注" width="180">
              <template slot-scope="scope">
               <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini" @blur="stopEditRemark(scope.$index)"></el-input>
               <span v-else>
@@ -85,7 +85,7 @@ export default {
         remark: '生产环境设备',
         isEdit: false,
         otaSwitch: false
-      }
+      },
       ]
     };
   },

main/manager-web/src/views/UserManagement.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="welcome">
+    <HeaderBar />
+    <el-main style="padding: 20px; display: flex; flex-direction: column;">
+      <el-card class="user-card" shadow="always">
+      <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
+        <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
+        <el-button @click="handleSearch">查询</el-button>
+        <el-button type="danger" @click="batchDelete">批量删除</el-button>
+        <el-button type="danger" @click="batchDisable">批量禁用</el-button>
+      </div>
+      
+      <el-table :data="userList" style="width: 100%;" border stripe>
+        <el-table-column label="用户Id" prop="userId"></el-table-column>
+        <el-table-column label="手机号码" prop="phone"></el-table-column>
+        <el-table-column label="Status" prop="status"></el-table-column>
+        <el-table-column label="设备数量" prop="deviceCount"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
+            <el-button size="mini"
+              v-if="scope.row.status === '正常'"
+              @click="disableUser(scope.row)">禁用</el-button>
+            <el-button size="mini"
+              v-if="scope.row.status === '禁用'"
+              @click="restoreUser(scope.row)">恢复</el-button>
+            <el-button size="mini" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      </el-card>
+
+      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
+        ©2025 xiaozhi-esp32-server
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import HeaderBar from "@/components/HeaderBar.vue";
+
+export default {
+  components: { HeaderBar },
+  data() {
+    return {
+      searchPhone: '',
+      userList: [
+        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 10 },
+        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 9 },
+        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 7 },
+        { userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
+      ]
+    };
+  },
+  methods: {
+    handleSearch() {
+      // 模拟搜索逻辑
+      console.log('执行查询，搜索号码：', this.searchPhone);
+    },
+    batchDelete() {
+      console.log('执行批量删除操作');
+    },
+    batchDisable() {
+      console.log('执行批量禁用操作');
+    },
+    resetPassword(row) {
+      console.log('重置用户密码，用户：', row);
+    },
+    disableUser(row) {
+      row.status = '禁用';
+      console.log('禁用用户：', row);
+    },
+    restoreUser(row) {
+      row.status = '正常';
+      console.log('恢复用户：', row);
+    },
+    deleteUser(row) {
+      console.log('删除用户：', row);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.welcome {
+  min-width: 900px;
+  min-height: 506px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-image: url("@/assets/home/background.png");
+  background-size: cover;
+  background-position: center;
+  -webkit-background-size: cover;
+  -o-background-size: cover;
+}
+
+.user-search-operate {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.user-search-operate > * {
+  margin-right: 10px;
+}
+
+.el-table__header th {
+  background-color: #f5f7fa;
+  color: #606266;
+}
+
+.user-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>