修改分组管理

src/api/modules/index.js

@@ -79,3 +79,36 @@ export function obtainUserInformationApi(groupId, userid) {
     method: "get",
   });
 }
+
+// 获取用户工资配置
+export function getUserSalaryConfig(userid) {
+  return service({
+    url: `/user/salary/config/${userid}`,
+    method: "get",
+  });
+}
+
+// 更新用户工资配置
+export function updateUserSalaryConfig(data) {
+  return service({
+    url: "/user/salary/config",
+    method: "put",
+    data,
+  });
+}
+
+// 添加用户到组
+export function addUserToGroup(groupId, userid, role) {
+  return service({
+    url: `/group/${groupId}/user/${userid}/role/${role}`,
+    method: 'post'
+  });
+}
+
+// 同步钉钉成员
+export function syncUsers() {
+  return service({
+    url: "/user/sync",
+    method: "post"
+  });
+}

src/views/groupManagement/index.vue

@@ -5,30 +5,46 @@
       <el-card>
         <template #header>
           <div class="card-header">
-            <span>组别管理</span>
+            <span class="title">组别管理</span>
-            <el-button type="primary" @click="handleAdd">添加组别</el-button>
+            <div class="header-right">
+              <el-input
+                v-model="groupSearchKeyword"
+                placeholder="请输入组别名称搜索"
+                clearable
+                @input="handleGroupSearch"
+                style="width: 200px; margin-right: 8px;"
+              >
+                <template #prefix>
+                  <el-icon><Search /></el-icon>
+                </template>
+              </el-input>
+              <el-button type="primary" size="small" @click="handleAdd">添加组别</el-button>
+            </div>
           </div>
         </template>
         <el-table
           :data="groupList"
           style="width: 100%"
           @row-click="handleGroupSelect"
+          :row-class-name="tableRowClassName"
+          height="calc(100vh - 280px)"
         >
-          <el-table-column prop="groupId" label="组别ID" width="180" />
+          <el-table-column prop="groupId" label="组别" width="100" align="center" />
-          <el-table-column prop="groupName" label="组别名称" />
+          <el-table-column prop="groupName" label="组别名称" min-width="150" show-overflow-tooltip />
-          <el-table-column prop="createTime" label="创建时间">
+          <el-table-column prop="createTime" label="创建时间" width="180" align="center" show-overflow-tooltip>
             <template #default="scope">
               {{ scope.row.createTime || "暂无" }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="180">
+          <el-table-column label="操作" width="180" fixed="right" align="center">
             <template #default="scope">
-              <el-button type="primary" link @click.stop="handleEdit(scope.row)"
+              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)"
                 >编辑</el-button
               >
               <el-button
                 type="danger"
                 link
+                size="small"
                 @click.stop="handleDelete(scope.row)"
                 >删除</el-button
               >
@@ -43,26 +59,46 @@
       <el-card v-if="currentGroup">
         <template #header>
           <div class="card-header">
-            <span>{{ currentGroup.groupName }} - 成员管理</span>
+            <span class="title">{{ currentGroup.groupName }} - 成员管理</span>
+            <div class="header-right">
+              <el-input
+                v-model="memberSearchKeyword"
+                placeholder="请输入姓名搜索"
+                clearable
+                @input="handleMemberSearch"
+                style="width: 200px; margin-right: 8px;"
+              >
+                <template #prefix>
+                  <el-icon><Search /></el-icon>
+                </template>
+              </el-input>
+              <el-button type="primary" size="small" @click="handleAddUser">添加成员</el-button>
+            </div>
           </div>
         </template>
         <div class="user-management">
           <div class="user-container">
             <!-- 组内人员列表 -->
             <div class="user-section">
-              <h3>组内成员</h3>
+              <el-table 
-              <el-table :data="groupUsers" style="width: 100%" height="500">
+                :data="groupUsers" 
-                <el-table-column label="头像" width="80">
+                style="width: 100%" 
+                height="calc(100vh - 280px)"
+                border
+                stripe
+              >
+                <el-table-column label="头像" width="100" align="center">
                   <template #default="scope">
                     <el-avatar :size="40" :src="scope.row.avatar" />
                   </template>
                 </el-table-column>
-                <el-table-column prop="name" label="姓名" />
+                <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip />
-                <el-table-column label="角色" width="120">
+                <el-table-column label="角色" align="center">
                   <template #default="scope">
                     <el-select
                       v-model="scope.row.role"
                       placeholder="选择角色"
+                      size="small"
                       @change="(value) => handleRoleChange(scope.row, value)"
                     >
                       <el-option label="普通员工" :value="0" />
@@ -72,46 +108,21 @@
                     </el-select>
                   </template>
                 </el-table-column>
-                <el-table-column label="操作" width="100">
+                <el-table-column label="操作" width="220" fixed="right" align="center">
                   <template #default="scope">
-                    <el-button
-                      type="danger"
-                      link
-                      @click="handleRemoveUser(scope.row)"
-                      >移除</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-
-            <!-- 未分组人员列表 -->
-            <div class="user-section">
-              <h3>未分组人员</h3>
-              <el-table :data="nonGroupUsers" style="width: 100%" height="500">
-                <el-table-column label="头像" width="80">
-                  <template #default="scope">
-                    <el-avatar :size="40" :src="scope.row.avatar" />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="name" label="姓名" />
-                <el-table-column label="操作" width="200">
-                  <template #default="scope">
-                    <el-select
-                      v-model="scope.row.selectedRole"
-                      placeholder="选择角色"
-                      style="width: 120px"
-                    >
-                      <el-option label="普通员工" :value="0" />
-                      <el-option label="部门主管" :value="1" />
-                      <el-option label="综合部" :value="2" />
-                      <el-option label="财务部" :value="3" />
-                    </el-select>
                     <el-button
                       type="primary"
                       link
-                      @click="handleAddUser(scope.row)"
+                      size="small"
-                      >添加</el-button
+                      @click="handleViewSalary(scope.row)"
+                      >查看工资配置</el-button
+                    >
+                    <el-button
+                      type="danger"
+                      link
+                      size="small"
+                      @click="handleRemoveUser(scope.row)"
+                      >移除</el-button
                     >
                   </template>
                 </el-table-column>
@@ -129,8 +140,13 @@
       :title="dialogType === 'add' ? '添加组别' : '编辑组别'"
       width="500px"
     >
-      <el-form :model="groupForm" label-width="80px">
+      <el-form 
-        <el-form-item label="组别名称" required>
+        :model="groupForm" 
+        :rules="groupRules"
+        ref="groupFormRef"
+        label-width="80px"
+      >
+        <el-form-item label="组别名称" prop="groupName" required>
           <el-input
             v-model="groupForm.groupName"
             placeholder="请输入组别名称"
@@ -144,6 +160,155 @@
         </span>
       </template>
     </el-dialog>
+
+    <!-- 工资配置对话框 -->
+    <el-dialog
+      v-model="salaryDialogVisible"
+      title="工资配置"
+      width="600px"
+    >
+      <el-form 
+        :model="salaryForm" 
+        :rules="salaryRules"
+        ref="salaryFormRef"
+        label-width="140px"
+      >
+        <el-form-item label="基本工资" prop="baseSalary" required>
+          <el-input-number
+            v-model="salaryForm.baseSalary"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="总经理补贴" prop="managerAllowance" required>
+          <el-input-number
+            v-model="salaryForm.managerAllowance"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="交通补贴" prop="transportationAllowance" required>
+          <el-input-number
+            v-model="salaryForm.transportationAllowance"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="其他补贴" prop="otherAllowance" required>
+          <el-input-number
+            v-model="salaryForm.otherAllowance"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="工龄工资" prop="senioritySalary" required>
+          <el-input-number
+            v-model="salaryForm.senioritySalary"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="年度绩效奖金" prop="annualPerformanceBonus" required>
+          <el-input-number
+            v-model="salaryForm.annualPerformanceBonus"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="月度绩效奖金" prop="monthlyPerformanceBonus" required>
+          <el-input-number
+            v-model="salaryForm.monthlyPerformanceBonus"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="其他奖金" prop="otherBonus" required>
+          <el-input-number
+            v-model="salaryForm.otherBonus"
+            :min="0"
+            :precision="2"
+            :step="100"
+            style="width: 200px"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="salaryDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSalarySubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 添加成员对话框 -->
+    <el-dialog
+      v-model="addUserDialogVisible"
+      title="添加成员"
+      width="800px"
+    >
+      <div class="dialog-header">
+        <div class="left">
+          <el-button type="primary" @click="handleSyncUsers">
+            <el-icon><Refresh /></el-icon>
+            同步钉钉成员
+          </el-button>
+        </div>
+        <div class="right">
+          <el-input
+            v-model="searchKeyword"
+            placeholder="请输入姓名搜索"
+            clearable
+            @input="handleSearch"
+            style="width: 200px"
+          >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+        </div>
+      </div>
+      <el-table
+        :data="nonGroupUsers"
+        style="width: 100%"
+        height="400px"
+        border
+        stripe
+      >
+        <el-table-column label="头像" width="80" align="center">
+          <template #default="scope">
+            <el-avatar :size="40" :src="scope.row.avatar" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" min-width="100" />
+        <el-table-column label="操作" width="100" fixed="right" align="center">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click="handleAddToGroup(scope.row)"
+            >
+              <el-icon><Plus /></el-icon>
+              添加
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -155,33 +320,98 @@ import {
   addGroup,
   updateGroup,
   deleteGroup,
-  getNonGroupUsers,
   updateGroupUserRole,
   getGroupUsers,
   deleteGroupUser,
+  getUserSalaryConfig,
+  updateUserSalaryConfig,
+  getNonGroupUsers,
+  addUserToGroup,
+  syncUsers,
 } from "../../api/modules/index";
+import { Refresh, Search, Plus } from '@element-plus/icons-vue';
 
 // 组别列表数据
 const groupList = ref([]);
 const currentGroup = ref(null);
+const groupSearchKeyword = ref('');
+const originalGroupList = ref([]); // 用于存储原始数据
 
 // 对话框相关
 const dialogVisible = ref(false);
 const dialogType = ref("add"); // add 或 edit
+const groupFormRef = ref(null);
 const groupForm = ref({
   groupId: null,
   groupName: "",
 });
 
 // 成员管理相关
-const nonGroupUsers = ref([]);
 const groupUsers = ref([]);
+const memberSearchKeyword = ref('');
+const originalGroupUsers = ref([]); // 用于存储原始数据
+
+// 工资配置相关
+const salaryDialogVisible = ref(false);
+const salaryFormRef = ref(null);
+const salaryForm = ref({
+  userid: '',
+  baseSalary: 0,
+  managerAllowance: 0,
+  transportationAllowance: 0,
+  otherAllowance: 0,
+  senioritySalary: 0,
+  annualPerformanceBonus: 0,
+  monthlyPerformanceBonus: 0,
+  otherBonus: 0
+});
+
+// 添加成员相关
+const addUserDialogVisible = ref(false);
+const nonGroupUsers = ref([]);
+const searchKeyword = ref('');
+
+// 表单校验规则
+const salaryRules = {
+  baseSalary: [
+    { required: true, message: '请输入基本工资', trigger: 'blur' }
+  ],
+  managerAllowance: [
+    { required: true, message: '请输入总经理补贴', trigger: 'blur' }
+  ],
+  transportationAllowance: [
+    { required: true, message: '请输入交通补贴', trigger: 'blur' }
+  ],
+  otherAllowance: [
+    { required: true, message: '请输入其他补贴', trigger: 'blur' }
+  ],
+  senioritySalary: [
+    { required: true, message: '请输入工龄工资', trigger: 'blur' }
+  ],
+  annualPerformanceBonus: [
+    { required: true, message: '请输入年度绩效奖金', trigger: 'blur' }
+  ],
+  monthlyPerformanceBonus: [
+    { required: true, message: '请输入月度绩效奖金', trigger: 'blur' }
+  ],
+  otherBonus: [
+    { required: true, message: '请输入其他奖金', trigger: 'blur' }
+  ]
+};
+
+// 组别表单校验规则
+const groupRules = {
+  groupName: [
+    { required: true, message: '请输入组别名称', trigger: 'blur' }
+  ]
+};
 
 // 获取组别列表
 const fetchGroupList = async () => {
   try {
     const res = await getGroupList();
     if (res.errcode === 0) {
+      originalGroupList.value = res.result;
       groupList.value = res.result;
       if (groupList.value && groupList.value.length) {
         handleGroupSelect(groupList.value[0]);
@@ -192,25 +422,21 @@ const fetchGroupList = async () => {
   }
 };
 
+// 搜索组别
+const handleGroupSearch = () => {
+  if (!groupSearchKeyword.value) {
+    groupList.value = originalGroupList.value;
+    return;
+  }
+  groupList.value = originalGroupList.value.filter(group => 
+    group.groupName.toLowerCase().includes(groupSearchKeyword.value.toLowerCase())
+  );
+};
+
 // 选择组别
 const handleGroupSelect = async (row) => {
   currentGroup.value = row;
-  await Promise.all([fetchNonGroupUsers(), fetchGroupUsers(row.groupId)]);
+  await fetchGroupUsers(row.groupId);
-};
-
-// 获取未分组人员列表
-const fetchNonGroupUsers = async () => {
-  try {
-    const res = await getNonGroupUsers();
-    if (res.errcode === 0) {
-      nonGroupUsers.value = res.result.map((user) => ({
-        ...user,
-        selectedRole: 0,
-      }));
-    }
-  } catch (error) {
-    ElMessage.error("获取未分组人员列表失败");
-  }
 };
 
 // 获取组内人员列表
@@ -218,6 +444,7 @@ const fetchGroupUsers = async (groupId) => {
   try {
     const res = await getGroupUsers(groupId);
     if (res.errcode === 0) {
+      originalGroupUsers.value = res.result;
       groupUsers.value = res.result;
     }
   } catch (error) {
@@ -225,24 +452,15 @@ const fetchGroupUsers = async (groupId) => {
   }
 };
 
-// 添加成员
+// 搜索成员
-const handleAddUser = async (user) => {
+const handleMemberSearch = () => {
-  try {
+  if (!memberSearchKeyword.value) {
-    const res = await updateGroupUserRole(
+    groupUsers.value = originalGroupUsers.value;
-      currentGroup.value.groupId,
+    return;
-      user.userid,
-      user.selectedRole
-    );
-    if (res.errcode === 0) {
-      ElMessage.success("添加成功");
-      await Promise.all([
-        fetchNonGroupUsers(),
-        fetchGroupUsers(currentGroup.value.groupId),
-      ]);
-    }
-  } catch (error) {
-    ElMessage.error("添加失败");
   }
+  groupUsers.value = originalGroupUsers.value.filter(user => 
+    user.name.toLowerCase().includes(memberSearchKeyword.value.toLowerCase())
+  );
 };
 
 // 修改成员角色
@@ -267,10 +485,7 @@ const handleRemoveUser = async (user) => {
     const res = await deleteGroupUser(currentGroup.value.groupId, user.userid);
     if (res.errcode === 0) {
       ElMessage.success("移除成功");
-      await Promise.all([
+      fetchGroupUsers(currentGroup.value.groupId);
-        fetchNonGroupUsers(),
-        fetchGroupUsers(currentGroup.value.groupId),
-      ]);
     }
   } catch (error) {
     ElMessage.error("移除失败");
@@ -321,35 +536,163 @@ const handleDelete = (row) => {
 
 // 提交表单
 const handleSubmit = async () => {
-  if (!groupForm.value.groupName) {
+  if (!groupFormRef.value) return;
-    ElMessage.warning("请输入组别名称");
+  
-    return;
+  await groupFormRef.value.validate(async (valid) => {
-  }
+    if (valid) {
-
+      try {
-  try {
+        if (dialogType.value === "add") {
-    if (dialogType.value === "add") {
+          const res = await addGroup({ groupName: groupForm.value.groupName });
-      const res = await addGroup({ groupName: groupForm.value.groupName });
+          if (res.errcode === 0) {
-      if (res.errcode === 0) {
+            ElMessage.success("添加成功");
-        ElMessage.success("添加成功");
+            dialogVisible.value = false;
-        dialogVisible.value = false;
+            fetchGroupList();
-        fetchGroupList();
+          }
-      }
+        } else {
-    } else {
+          const res = await updateGroup({
-      const res = await updateGroup({
+            groupId: groupForm.value.groupId,
-        groupId: groupForm.value.groupId,
+            groupName: groupForm.value.groupName,
-        groupName: groupForm.value.groupName,
+          });
-      });
+          if (res.errcode === 0) {
-      if (res.errcode === 0) {
+            ElMessage.success("修改成功");
-        ElMessage.success("修改成功");
+            dialogVisible.value = false;
-        dialogVisible.value = false;
+            fetchGroupList();
-        fetchGroupList();
+          }
+        }
+      } catch (error) {
+        ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
       }
     }
+  });
+};
+
+// 查看工资配置
+const handleViewSalary = async (user) => {
+  try {
+    const res = await getUserSalaryConfig(user.userid);
+    if (res.errcode === 0) {
+      const result = res.result;
+      salaryForm.value = {
+        userid: user.userid,
+        baseSalary: result.baseSalary,
+        managerAllowance: result.managerAllowance,
+        transportationAllowance: result.transportationAllowance,
+        otherAllowance: result.otherAllowance,
+        senioritySalary: result.senioritySalary,
+        annualPerformanceBonus: result.annualPerformanceBonus,
+        monthlyPerformanceBonus: result.monthlyPerformanceBonus,
+        otherBonus: result.otherBonus
+      };
+      salaryDialogVisible.value = true;
+    } else {
+      ElMessage.error('获取工资配置失败');
+    }
   } catch (error) {
-    ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
+    ElMessage.error('获取工资配置失败');
+    console.error(error);
   }
 };
 
+// 提交工资配置
+const handleSalarySubmit = async () => {
+  if (!salaryFormRef.value) return;
+  
+  await salaryFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const data = {
+          userid: salaryForm.value.userid,
+          baseSalary: salaryForm.value.baseSalary,
+          managerAllowance: salaryForm.value.managerAllowance,
+          transportationAllowance: salaryForm.value.transportationAllowance,
+          otherAllowance: salaryForm.value.otherAllowance,
+          senioritySalary: salaryForm.value.senioritySalary,
+          annualPerformanceBonus: salaryForm.value.annualPerformanceBonus,
+          monthlyPerformanceBonus: salaryForm.value.monthlyPerformanceBonus,
+          otherBonus: salaryForm.value.otherBonus
+        };
+        const res = await updateUserSalaryConfig(data);
+        if (res.errcode === 0) {
+          ElMessage.success('保存成功');
+          salaryDialogVisible.value = false;
+        } else {
+          ElMessage.error('保存失败');
+        }
+      } catch (error) {
+        ElMessage.error('保存失败');
+        console.error(error);
+      }
+    }
+  });
+};
+
+// 表格行样式
+const tableRowClassName = ({ row }) => {
+  if (currentGroup.value && row.groupId === currentGroup.value.groupId) {
+    return 'selected-row';
+  }
+  return '';
+};
+
+// 打开添加成员对话框
+const handleAddUser = async () => {
+  addUserDialogVisible.value = true;
+  await fetchNonGroupUsers();
+};
+
+// 获取不在组内的用户列表
+const fetchNonGroupUsers = async () => {
+  try {
+    const res = await getNonGroupUsers();
+    if (res.errcode === 0) {
+      nonGroupUsers.value = res.result;
+    }
+  } catch (error) {
+    ElMessage.error("获取用户列表失败");
+  }
+};
+
+// 添加用户到组
+const handleAddToGroup = async (user) => {
+  try {
+    const res = await addUserToGroup(currentGroup.value.groupId, user.userid, 0); // 默认角色为普通员工
+    if (res.errcode === 0) {
+      ElMessage.success("添加成功");
+      addUserDialogVisible.value = false;
+      fetchGroupUsers(currentGroup.value.groupId);
+    }
+  } catch (error) {
+    ElMessage.error("添加失败");
+  }
+};
+
+// 同步钉钉成员
+const handleSyncUsers = async () => {
+  try {
+    const res = await syncUsers();
+    if (res.errcode === 0) {
+      ElMessage.success("同步成功");
+      await fetchNonGroupUsers(); // 重新获取未加入成员列表
+    } else {
+      ElMessage.error("同步失败");
+    }
+  } catch (error) {
+    ElMessage.error("同步失败");
+    console.error(error);
+  }
+};
+
+// 搜索用户
+const handleSearch = () => {
+  if (!searchKeyword.value) {
+    fetchNonGroupUsers();
+    return;
+  }
+  nonGroupUsers.value = nonGroupUsers.value.filter(user => 
+    user.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+  );
+};
+
 // 页面加载时获取组别列表
 onMounted(() => {
   fetchGroupList();
@@ -362,21 +705,121 @@ onMounted(() => {
   gap: 20px;
   height: calc(100vh - 120px);
   padding: 20px;
+  background-color: var(--el-bg-color-page);
 
   .left-panel {
     width: 40%;
     min-width: 500px;
+
+    :deep(.el-card) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      box-shadow: var(--el-box-shadow-light);
+
+      .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    :deep(.el-table) {
+      flex: 1;
+      
+      .el-table__body-wrapper {
+        height: 100%;
+      }
+
+      .el-table__cell {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+
+      .el-table__header {
+        th {
+          background-color: var(--el-bg-color);
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+          height: 48px;
+        }
+      }
+
+      .el-table__row {
+        height: 56px;
+      }
+    }
   }
 
   .right-panel {
     flex: 1;
     min-width: 600px;
+
+    :deep(.el-card) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      box-shadow: var(--el-box-shadow-light);
+
+      .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    :deep(.el-table) {
+      flex: 1;
+      
+      .el-table__body-wrapper {
+        height: 100%;
+      }
+
+      .el-table__cell {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+
+      .el-table__header {
+        th {
+          background-color: var(--el-bg-color);
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+          height: 48px;
+        }
+      }
+
+      .el-table__row {
+        height: 56px;
+      }
+    }
   }
 
   .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--el-border-color-light);
+    background-color: var(--el-bg-color);
+
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
   }
 }
 
@@ -384,17 +827,103 @@ onMounted(() => {
   .user-container {
     display: flex;
     gap: 20px;
+    height: 100%;
+    padding: 20px;
   }
 
   .user-section {
     flex: 1;
-    min-width: 0; // 防止flex子项溢出
+    min-width: 0;
-
-    h3 {
-      margin-bottom: 10px;
-      font-size: 16px;
-      font-weight: 500;
-    }
   }
 }
+
+:deep(.selected-row) {
+  background-color: #f1f1f1 !important;
+}
+
+:deep(.el-table__row .current-row) {
+  background-color: #f1f1f1 !important;
+}
+
+:deep(.el-table__row:hover) {
+  background-color: #f1f1f1 !important;
+}
+
+:deep(.el-table) {
+  .el-button {
+    padding: 4px 8px;
+  }
+  
+  .el-select {
+    width: 120px;
+  }
+
+  .el-avatar {
+    border: 1px solid var(--el-border-color-light);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 0 20px;
+
+  .left {
+    display: flex;
+    gap: 8px;
+  }
+
+  .right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+:deep(.el-button) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+
+  &.el-button--primary {
+    --el-button-hover-bg-color: var(--el-color-primary-light-3);
+    --el-button-hover-border-color: var(--el-color-primary-light-3);
+  }
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  
+  &:hover {
+    box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
+  }
+  
+  &.is-focus {
+    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+  }
+}
+
+:deep(.el-dialog__body) {
+  padding: 20px;
+}
+
+:deep(.el-dialog__header) {
+  margin: 0;
+  padding: 20px;
+  border-bottom: 1px solid var(--el-border-color-light);
+  background-color: var(--el-bg-color);
+}
+
+:deep(.el-dialog__footer) {
+  padding: 20px;
+  border-top: 1px solid var(--el-border-color-light);
+  background-color: var(--el-bg-color);
+}
+
+:deep(.el-dialog) {
+  border-radius: 8px;
+  overflow: hidden;
+}
 </style>