Merge pull request #659 from xinnan-tech/web_Pop_Change

解决提示框遮挡问题，优化UserManagement和HeaderBar布局，导航栏重复点击警告，退出跳转页面的优化

main/manager-web/src/App.vue

@@ -27,6 +27,10 @@ nav {
   }
 }
 
+.el-message {
+  top: 45px !important;
+}
+
 </style>
 <script>
 </script>

main/manager-web/src/apis/httpRequest.js

@@ -110,7 +110,7 @@ function httpHandlerError(info, callBack) {
         }else if (info.data.code === 401) {
             console.log('触发 401，清除 Token 并跳转登录页');
             store.commit('clearAuth');
-            window.location.href = '/login';
+            goToPage(Constant.PAGE.LOGIN, true);
             return true
         } else {
             showDanger(info.data.msg)

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

@@ -47,7 +47,10 @@ export default {
         return;
       }
       userApi.addAgent(this.wisdomBodyName, (res) => {
-        this.$message.success('添加成功');
+        this.$message.success({
+            message: '添加成功',
+            showClose: true
+        });
         this.$emit('confirm', res);
         this.$emit('update:visible', false);
         this.wisdomBodyName = "";

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

@@ -20,12 +20,12 @@
       <div class="settings-btn" @click="handleConfigure">
         配置角色
       </div>
-      <div class="settings-btn">
+<!--      <div class="settings-btn">-->
-        声纹识别
+<!--        声纹识别-->
-      </div>
+<!--      </div>-->
-      <div class="settings-btn">
+<!--      <div class="settings-btn">-->
-        历史对话
+<!--        历史对话-->
-      </div>
+<!--      </div>-->
       <div class="settings-btn"  @click="handleDeviceManage">
         设备管理
       </div>

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

@@ -88,7 +88,7 @@ export default {
   methods: {
     goHome() {
       // 跳转到首页
-      this.$router.push('/')
+      this.$router.push('/home')
     },
     goUserManagement() {
       this.$router.push('/user-management')
@@ -135,13 +135,16 @@ export default {
       try {
         // 调用 Vuex 的 logout action
         await this.logout();
-
+        this.$message.success({
-        this.$message.success('退出登录成功');
+          message:'退出登录成功',
-
+          showClose:true
-        this.$router.push('/login');
+        });
       } catch (error) {
         console.error('退出登录失败:', error);
-        this.$message.error('退出登录失败，请重试');
+        this.$message.error({
+          message:'退出登录失败，请重试',
+          showClose:true
+        });
       }
     },
 
@@ -203,6 +206,7 @@ export default {
 }
 
 .equipment-management {
+  padding: 0 9px;
   width: 82px;
   height: 24px;
   border-radius: 12px;

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

@@ -76,6 +76,20 @@ const router = new VueRouter({
   routes
 })
 
+// 全局处理重复导航，改为刷新页面
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => {
+    if (err.name === 'NavigationDuplicated') {
+      // 如果是重复导航，刷新页面
+      window.location.reload()
+    } else {
+      // 其他错误正常抛出
+      throw err
+    }
+  })
+}
+
 // 需要登录才能访问的路由
 const protectedRoutes = ['home', 'RoleConfig', 'DeviceManagement', 'UserManagement', 'ModelConfig']
 

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

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import Constant from '../utils/constant'
+import {goToPage} from "@/utils";
 
 Vue.use(Vuex)
 
@@ -51,7 +52,8 @@ export default new Vuex.Store({
     logout({ commit }) {
       return new Promise((resolve) => {
         commit('clearAuth')
-        window.location.href = '/login';
+        goToPage(Constant.PAGE.LOGIN,true);
+        window.location.reload(); // 彻底重置状态
       })
     }
   },

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

@@ -1,62 +1,67 @@
 <template>
   <div class="welcome">
     <HeaderBar />
-    <el-main class="main" style="padding: 20px; display: flex; flex-direction: column;">
+
-      <div class="top-area">
+    <div class="operation-bar">
-        <div class="page-title">用户管理</div>
+      <h2 class="page-title">用户管理</h2>
-        <div class="page-search">
+      <div class="right-operations">
-          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" @keyup.enter.native="handleSearch"/>
+        <el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" @keyup.enter.native="handleSearch"/>
-          <el-button class="btn-search" @click="handleSearch">搜索</el-button>
+        <el-button class="btn-search" @click="handleSearch">搜索</el-button>
+      </div>
+    </div>
+
+    <div class="main-wrapper">
+      <div class="content-panel">
+        <div class="content-area">
+          <el-card class="user-card" shadow="never">
+            <el-table ref="userTable" :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
+              <el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
+              <el-table-column label="用户Id" prop="userid" align="center"></el-table-column>
+              <el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
+              <el-table-column label="设备数量" prop="deviceCount" align="center"></el-table-column>
+              <el-table-column label="状态" prop="status" align="center"></el-table-column>
+              <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
+                  <el-button size="mini" type="text"
+                    v-if="scope.row.status === '正常'"
+                    @click="disableUser(scope.row)">禁用账户</el-button>
+                  <el-button size="mini" type="text"
+                    v-if="scope.row.status === '禁用'"
+                    @click="restoreUser(scope.row)">恢复账号</el-button>
+                  <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="table_bottom">
+              <div class="ctrl_btn">
+                <el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">全选</el-button>
+                <el-button size="mini" type="success" icon="el-icon-circle-check" @click="batchEnable">启用</el-button>
+                <el-button size="mini" type="warning" @click="batchDisable"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
+              </div>
+              <div class="custom-pagination">
+                <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
+                <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
+
+                <button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
+                  {{ page }}
+                </button>
+
+                <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
+                <span class="total-text">共{{ total }}条记录</span>
+              </div>
+            </div>
+          </el-card>
         </div>
       </div>
+    </div>
 
-      <el-card class="user-card" shadow="never">
+    <div class="copyright">
-        <el-table ref="userTable" :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
+      ©2025 xiaozhi-esp32-server
-          <el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
+    </div>
-          <el-table-column label="用户Id" prop="userid" align="center"></el-table-column>
+    <view-password-dialog :visible.sync="showViewPassword" :password="currentPassword"/>
-          <el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
-          <el-table-column label="设备数量" prop="deviceCount" align="center"></el-table-column>
-          <el-table-column label="状态" prop="status" align="center"></el-table-column>
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-            <el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
-            <el-button size="mini" type="text"
-              v-if="scope.row.status === '正常'"
-              @click="disableUser(scope.row)">禁用账户</el-button>
-            <el-button size="mini" type="text"
-              v-if="scope.row.status === '禁用'"
-              @click="restoreUser(scope.row)">恢复账号</el-button>
-            <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div class="table_bottom">
-          <div class="ctrl_btn">
-            <el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">全选</el-button>
-            <el-button size="mini" type="success" icon="el-icon-circle-check" @click="batchEnable">启用</el-button>
-            <el-button size="mini" type="warning" @click="batchDisable"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
-            <el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
-          </div>
-          <div class="custom-pagination">
-            <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
-            <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
-
-            <button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
-              {{ page }}
-            </button>
-
-            <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
-            <span class="total-text">共{{ total }}条记录</span>
-          </div>
-        </div>
-      </el-card>
-
-      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
-        ©2025 xiaozhi-esp32-server
-      </div>
-        <view-password-dialog :visible.sync="showViewPassword" :password="currentPassword"/>
-    </el-main>
   </div>
 </template>
 
@@ -70,7 +75,7 @@ export default {
   data() {
     return {
       showViewPassword: false,
-      currentPassword: '', // 存储获取到的密码
+      currentPassword: '',
       searchPhone: '',
       userList: [],
       currentPage: 1,
@@ -102,7 +107,6 @@ export default {
     }
   },
   methods: {
-    // 获取用户列表
     fetchUsers() {
         adminApi.getUserList({
             page: this.currentPage,
@@ -118,19 +122,13 @@ export default {
             }
         });
     },
-
-    // 搜索
     handleSearch() {
         this.currentPage = 1;
         this.fetchUsers();
     },
-
-    // 全选
     handleSelectAll() {
       this.$refs.userTable.toggleAllSelection();
     },
-
-    // 批量删除用户
     batchDelete() {
       const selectedUsers = this.$refs.userTable.selection;
       if (selectedUsers.length === 0) {
@@ -186,8 +184,6 @@ export default {
         this.$message.info('已取消删除');
       });
     },
-
-    // 批量启用用户
     batchEnable() {
       const selectedUsers = this.$refs.userTable.selection;
       if (selectedUsers.length === 0) {
@@ -199,16 +195,12 @@ export default {
       });
       this.$message.success('启用操作成功');
     },
-
-    // 批量禁用用户
     batchDisable() {
       this.userList.forEach(user => {
       user.status = '禁用';
       });
       this.$message.success('状态已更新为禁用');
     },
-
-    // 重置密码
     resetPassword(row) {
       this.$confirm('重置后将会生成新密码，是否继续？', '提示', {
         confirmButtonText: '确定',
@@ -231,8 +223,6 @@ export default {
       row.status = '正常';
       console.log('恢复用户：', row);
     },
-
-    // 用户删除
     deleteUser(row) {
         this.$confirm('确定要删除该用户吗？', '警告', {
             confirmButtonText: '确定',
@@ -275,289 +265,155 @@ export default {
       this.currentPage = page;
       this.fetchUsers();
     },
-
   }
 };
 </script>
 
 <style lang="scss" scoped>
-
-$table-bg-color: #ecf1fd;
-
-.main {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
-}
-
-.top-area {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-
-  .page-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: #303133;
-    margin-left: 20px;
-  }
-
-  .page-search {
-    display: flex;
-    align-items: center;
-
-    .btn-search {
-      margin-left: 10px;
-      background: linear-gradient(to right, #5778ff, #c793f3);
-      width: 100px;
-      color: #fff;
-    }
-  }
-}
-
 .welcome {
   min-width: 900px;
   min-height: 506px;
   height: 100vh;
   display: flex;
+  position: relative;
   flex-direction: column;
-  background-image: url("@/assets/home/background.png");
   background-size: cover;
-  background-position: center;
+  background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
   -webkit-background-size: cover;
   -o-background-size: cover;
 }
 
-.user-search-operate {
+.main-wrapper {
-  margin-bottom: 20px;
+  margin: 5px 22px;
+  border-radius: 15px;
+  min-height: 600px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  background: rgba(237,242,255,0.5);
+}
+
+.operation-bar {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #ebeef5;
 }
 
-.user-search-operate > * {
+.page-title {
-  margin-right: 10px;
+  font-size: 24px;
+  margin: 0;
 }
 
-.el-table__header th {
+.right-operations {
-  background-color: #f5f7fa;
+  display: flex;
-  color: #606266;
+  gap: 10px;
+  margin-left: auto;
+}
+
+.search-input {
+  width: 240px;
+}
+
+.btn-search {
+  background: linear-gradient(135deg, #6B8CFF, #A966FF);
+  border: none;
+  color: white;
+}
+
+.content-panel {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  border-radius: 15px;
+  background: transparent;
+}
+
+.content-area {
+  flex: 1;
+  height: 100%;
+  min-width: 600px;
+  overflow-x: auto;
+  background-color: white;
 }
 
 .user-card {
   background: white;
-  border-radius: 12px;
+  border: none;
-  padding: 15px;
+  box-shadow: none;
-  margin: 15px;
 }
 
 .table_bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 10px;
+}
 
-  .ctrl_btn {
+.ctrl_btn {
-    display: flex;
+  display: flex;
-    align-items: center;
+  gap: 8px;
-    margin-left: 30px;
+  padding-left: 26px;
-    .el-button {
+  .el-button {
-      min-width: 72px;
+    min-width: 72px;
-      height: 32px;
+    height: 32px;
-      padding: 7px 12px;
+    padding: 7px 12px 7px 10px;
-      font-size: 12px;
+    font-size: 12px;
-      border-radius: 4px;
+    border-radius: 4px;
-      line-height: 1;
+    line-height: 1;
-      font-weight: 500;
+    font-weight: 500;
-      border: none;
+    border: none;
-      transition: all 0.3s ease;
+    transition: all 0.3s ease;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-      position: relative;
-      overflow: hidden;
 
-      &:hover {
+    &:hover {
-        transform: translateY(-1px);
+      transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      }
-
-      &:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 5px;
-        height: 5px;
-        background: rgba(255, 255, 255, 0.5);
-        opacity: 0;
-        border-radius: 100%;
-        transform: scale(1, 1) translate(-50%, -50%);
-        transform-origin: 50% 50%;
-      }
-
-      &:focus:not(:active)::after {
-        animation: ripple 0.6s ease-out;
-      }
-    }
-
-    /* 全选按钮 */
-    .el-button--primary {
-      background: #5f70f3;
-      box-shadow: 0 2px 6px rgba(95, 112, 243, 0.3);
-
-      &:hover {
-        background: #4d5fe1;
-        box-shadow: 0 4px 8px rgba(95, 112, 243, 0.4);
-      }
-
-      &:active {
-        background: #3a4bcf;
-        box-shadow: 0 2px 4px rgba(95, 112, 243, 0.2);
-      }
-    }
-
-    /* 启用按钮 */
-    .el-button--success {
-      background: #5bc98c;
-      box-shadow: 0 2px 6px rgba(91, 201, 140, 0.3);
-
-      &:hover {
-        background: #4ab57d;
-        box-shadow: 0 4px 8px rgba(91, 201, 140, 0.4);
-      }
-
-      &:active {
-        background: #3aa16e;
-        box-shadow: 0 2px 4px rgba(91, 201, 140, 0.2);
-      }
-    }
-
-    /* 禁用按钮 */
-    .el-button--warning {
-      background: #f6d075;
-      color: black;
-      box-shadow: 0 2px 6px rgba(246, 208, 117, 0.3);
-
-      &:hover {
-        background: #e4c068;
-        box-shadow: 0 4px 8px rgba(246, 208, 117, 0.4);
-      }
-
-      &:active {
-        background: #d2b05b;
-        box-shadow: 0 2px 4px rgba(246, 208, 117, 0.2);
-      }
-
-      .rotated-icon {
-        display: inline-block;
-        transform: rotate(45deg);
-        margin-right: 4px;
-        color: black;
-      }
-    }
-
-    /* 删除按钮 */
-    .el-button--danger {
-      background: #fd5b63;
-      box-shadow: 0 2px 6px rgba(253, 91, 99, 0.3);
-
-      &:hover {
-        background: #e44a52;
-        box-shadow: 0 4px 8px rgba(253, 91, 99, 0.4);
-      }
-
-      &:active {
-        background: #cb3941;
-        box-shadow: 0 2px 4px rgba(253, 91, 99, 0.2);
-      }
     }
   }
 
-  @keyframes ripple {
+  .el-button--primary {
-    0% {
+    background: #5f70f3;
-      transform: scale(0, 0);
+    color: white;
-      opacity: 0.5;
-    }
-    100% {
-      transform: scale(20, 20);
-      opacity: 0;
-    }
-  }
   }
 
-  .rotated-icon {
+  .el-button--success {
-    display: inline-block;
+    background: #5bc98c;
-    transform: rotate(45deg);
+    color: white;
-    margin-right: 4px;
+  }
+
+  .el-button--warning {
+    background: #f6d075;
     color: black;
   }
 
-  :deep(.el-table) {
+  .el-button--danger {
-    background: white;
+    background: #fd5b63;
-
+    color: white;
-    &.transparent-table {
-      .el-table__header th {
-        background: white !important;
-        color: black;
-      }
-
-      &::before {
-        display: none;
-      }
-
-      &:last-child td {
-          border-bottom: none !important;
-      }
-
-      .el-table__body tr {
-        background-color: white;
-        td {
-          border: {
-            top: 1px solid rgba(0, 0, 0, 0.04);
-            bottom: 1px solid rgba(0, 0, 0, 0.04);
-          }
-        }
-      }
-    }
   }
+}
 
-  .search-input {
+.rotated-icon {
-    width: 300px;
+  display: inline-block;
-    margin-right: 10px;
+  transform: rotate(45deg);
+  margin-right: 4px;
+  color: black;
+}
 
-    :deep(.el-input__inner) {
+.copyright {
-      background-color: transparent;
+  text-align: center;
-      border-color: #d3d6dc;
+  color: #979db1;
-
+  font-size: 12px;
-      &:focus {
+  font-weight: 400;
-        border-color: #409eff;
+  margin-top: auto;
-      }
+  padding: 30px 0 20px;
-
+  position: absolute;
-      &::placeholder {
+  bottom: 0;
-        color: #606266;
+  left: 50%;
-        opacity: 0.7;
+  transform: translateX(-50%);
-      }
+  width: 100%;
-    }
+}
-  }
-
-  :deep(.custom-selection-header) {
-    .el-checkbox {
-      display: none !important;
-    }
-
-    &::after {
-      content: '选择';
-      display: inline-block;
-      color: black;
-      font-weight: bold;
-      padding-bottom: 18px;
-    }
-  }
 
 .custom-pagination {
   display: flex;
@@ -565,7 +421,6 @@ $table-bg-color: #ecf1fd;
   gap: 8px;
   margin-top: 15px;
 
-  /* 导航按钮样式 (首页、上一页、下一页) */
   .pagination-btn:first-child,
   .pagination-btn:nth-child(2),
   .pagination-btn:nth-last-child(2) {
@@ -590,7 +445,6 @@ $table-bg-color: #ecf1fd;
     }
   }
 
-    /* 数字按钮样式 */
   .pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)) {
     min-width: 28px;
     height: 32px;
@@ -608,7 +462,6 @@ $table-bg-color: #ecf1fd;
     }
   }
 
-
   .pagination-btn.active {
     background: #5f70f3 !important;
     color: #ffffff !important;
@@ -626,6 +479,40 @@ $table-bg-color: #ecf1fd;
   }
 }
 
+:deep(.transparent-table) {
+  background: white;
+  .el-table__header th {
+    background: white !important;
+    color: black;
+  }
+
+  &::before {
+    display: none;
+  }
+
+  .el-table__body tr {
+    background-color: white;
+    td {
+      border-top: 1px solid rgba(0, 0, 0, 0.04);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+    }
+  }
+}
+
+:deep(.custom-selection-header) {
+  .el-checkbox {
+    display: none !important;
+  }
+
+  &::after {
+    content: '选择';
+    display: inline-block;
+    color: black;
+    font-weight: bold;
+    padding-bottom: 18px;
+  }
+}
+
 :deep(.el-checkbox__inner) {
   background-color: #eeeeee !important;
   border-color: #cccccc !important;
@@ -640,5 +527,24 @@ $table-bg-color: #ecf1fd;
   border-color: #5f70f3 !important;
 }
 
+@media (min-width: 1144px) {
+  .table_bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 40px;
+  }
+  :deep(.transparent-table) {
+    .el-table__body tr {
+      td {
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
+      & + tr {
+        margin-top: 10px;
+      }
+    }
+  }
+}
 
-</style>
+</style>

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

@@ -109,10 +109,16 @@ export default {
         import('@/apis/module/agent').then(({ default: userApi }) => {
           userApi.deleteAgent(agentId, (res) => {
             if (res.data.code === 0) {
-              this.$message.success('删除成功');
+              this.$message.success({
+                  message: '删除成功',
+                  showClose: true
+              });
               this.fetchAgentList(); // 刷新列表
             } else {
-              this.$message.error(res.data.msg || '删除失败');
+              this.$message.error({
+                  message: res.data.msg || '删除失败',
+                  showClose: true
+              });
             }
           });
         });