优化界面与细节

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

@@ -1,46 +1,68 @@
 <template>
   <div class="welcome">
     <HeaderBar />
-    <el-main style="padding: 20px; display: flex; flex-direction: column;">
+    <el-main class="main" style="padding: 20px; display: flex; flex-direction: column;">
-      <el-card class="user-card" shadow="always" >
+      <div class="top-area">
-      <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
+        <div class="page-title">用户管理</div>
-        <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
+        <div class="page-search">
-        <el-button @click="handleSearch">查询</el-button>
+          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
-        <el-button type="danger" @click="batchDelete">批量删除</el-button>
+          <el-button class="btn-search" @click="handleSearch">搜索</el-button>
-        <el-button type="danger" @click="batchDisable">批量禁用</el-button>
+          <!-- <el-button type="danger" @click="batchDelete">批量删除</el-button>
+          <el-button type="danger" @click="batchDisable">批量禁用</el-button> -->
+        </div>
       </div>
       
-      <el-table :data="userList" style="width: 100%;" border stripe>
+      <el-card class="user-card" shadow="never">
-        <el-table-column label="用户Id" prop="userId"></el-table-column>
+        <!-- <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
-        <el-table-column label="手机号码" prop="phone"></el-table-column>
+          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
-        <el-table-column label="Status" prop="status"></el-table-column>
+          <el-button @click="handleSearch">查询</el-button>
-        <el-table-column label="设备数量" prop="deviceCount"></el-table-column>
+          <el-button type="danger" @click="batchDelete">批量删除</el-button>
-        <el-table-column label="操作">
+          <el-button type="danger" @click="batchDisable">批量禁用</el-button>
-          <template slot-scope="scope">
+        </div> -->
-            <el-button size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
+        <el-table :data="userList" style="width: 100%;">
-            <el-button size="mini"
+          <el-table-column label="选择"
+            type="selection"
+            width="55">
+            </el-table-column>
+          <el-table-column label="用户Id" prop="userId"></el-table-column>
+          <el-table-column label="手机号码" prop="phone"></el-table-column>
+          <el-table-column label="设备数量" prop="deviceCount"></el-table-column>
+          <el-table-column label="状态" prop="status"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
+            <el-button size="mini" type="text"
               v-if="scope.row.status === '正常'"
               @click="disableUser(scope.row)">禁用</el-button>
-            <el-button size="mini"
+            <el-button size="mini" type="text"
               v-if="scope.row.status === '禁用'"
               @click="restoreUser(scope.row)">恢复</el-button>
-            <el-button size="mini" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
+            <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
-          </template>
+            </template>
-        </el-table-column>
+          </el-table-column>
-      </el-table>
+        </el-table>
+		  
+        <div class="table_bottom">
+          <div class="ctrl_btn">
+            <el-button size="mini" type="primary">全选</el-button>
+            <el-button size="mini" type="success" icon="el-icon-circle-check">启用</el-button>
+            <el-button size="mini" type="warning" icon="el-icon-circle-close">禁用</el-button>
+            <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
+          </div>
+          <div class="pagination-container">
+            <el-pagination
+              background
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 15]"
+            :page-size="pageSize"
+            layout="prev, pager, next"
+            :total="total"
+            />
+          </div>
+        </div>
       </el-card>
 
-      <div class="pagination-container">
-        <el-pagination
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[5, 10, 15]"
-          :page-size="pageSize"
-          layout="prev, pager, next"
-          :total="total"
-        />
-      </div>
-
       <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
         ©2025 xiaozhi-esp32-server
       </div>
@@ -100,7 +122,32 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.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: 20px;
+  .page-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+  }
+  .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;
@@ -133,11 +180,22 @@ export default {
   background: #fff;
   border-radius: 12px;
   padding: 20px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  opacity: 0.9;
+  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.table_bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  .ctrl_btn {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .pagination-container {
-  margin-top: 20px;
   display: flex;
   justify-content: flex-end;
 }