提交

web-admin/src/views/system/user/index.vue

@@ -5,7 +5,7 @@
     <section class="panel">
       <div class="flex gap-4">
         <!-- 左侧：组织树 -->
-        <div class="w-[280px] shrink-0 border-r border-[var(--mint-border)] pr-4">
+        <div class="user-dept-aside w-[280px] shrink-0 border-r border-[var(--mint-border)] pr-4">
           <!-- 标题与搜索同处 panel-top：避免标题栏底边与独立输入框之间出现不可控的视觉断层 -->
           <div class="panel-top user-dept-aside__head">
             <h2>组织</h2>
@@ -27,14 +27,19 @@
         <!-- 右侧：用户列表 -->
         <div class="flex-1 min-w-0">
           <div class="panel-top">
-            <h2>用户列表</h2>
+            <h2 class="title-bar-heading">用户列表</h2>
           </div>
 
           <div class="filter-block">
             <el-form :model="searchForm" class="filter-form" @submit.prevent>
               <div class="filter-grid">
                 <el-form-item label="关键词">
-                  <el-input v-model="searchForm.keyword" placeholder="账号/姓名/手机号" clearable />
+                  <el-input
+                    v-model="searchForm.keyword"
+                    placeholder="账号/姓名/手机号"
+                    clearable
+                    @keyup.enter="handleSearch"
+                  />
                 </el-form-item>
                 <el-form-item label="状态">
                   <el-select v-model="searchForm.status" placeholder="请选择" clearable>
@@ -74,22 +79,6 @@
                 <el-icon><Key /></el-icon>
                 重置密码
               </el-button>
-              <el-button
-                class="btn-ghost"
-                :disabled="selectedRows.length !== 1"
-                @click="handleToolbarView"
-              >
-                <el-icon><View /></el-icon>
-                查看
-              </el-button>
-              <el-button
-                class="btn-ghost"
-                :disabled="selectedRows.length !== 1"
-                @click="handleToolbarEdit"
-              >
-                <el-icon><Edit /></el-icon>
-                编辑
-              </el-button>
               <el-button
                 class="btn-ghost"
                 type="danger"
@@ -97,7 +86,7 @@
                 @click="handleBatchDelete"
               >
                 <el-icon><Delete /></el-icon>
-                删除
+                批量删除
               </el-button>
             </div>
           </div>
@@ -177,6 +166,39 @@
                 align="center"
                 header-align="center"
               />
+              <el-table-column
+                label="操作"
+                min-width="260"
+                fixed="right"
+                align="center"
+                header-align="center"
+              >
+                <template #default="{ row }">
+                  <div style="display: flex; justify-content: center; gap: 8px">
+                    <el-button class="btn-op-item primary" @click="handleView(row)">
+                      <el-icon><View /></el-icon>查看
+                    </el-button>
+                    <el-dropdown trigger="hover" @command="(cmd: string) => handleDropdownCommand(cmd, row)">
+                      <el-button class="btn-op-item">
+                        <el-icon><More /></el-icon>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item command="edit">
+                            <el-icon><Edit /></el-icon>编辑
+                          </el-dropdown-item>
+                          <el-dropdown-item command="resetPwd">
+                            <el-icon><Key /></el-icon>重置密码
+                          </el-dropdown-item>
+                          <el-dropdown-item command="delete" divided>
+                            <el-icon><Delete /></el-icon>删除
+                          </el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </template>
+              </el-table-column>
             </el-table>
 
             <div class="pagination list-pager-bar">
@@ -305,7 +327,8 @@
     Search,
     Key,
     Edit,
-    Delete
+    Delete,
+    More
   } from '@element-plus/icons-vue'
   import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
   import {
@@ -546,22 +569,36 @@
     selectedRows.value = rows
   }
 
-  function requireSingleSelection(action: string): Api.User.UserItem | null {
-    if (selectedRows.value.length !== 1) {
-      ElMessage.warning(`请选择一个用户后再${action}`)
-      return null
+  async function handleRowDelete(row: Api.User.UserItem) {
+    await ElMessageBox.confirm(`确定删除用户「${row.nickName}」吗？`, '提示', { type: 'warning' })
+    await fetchDeleteUser(row.id)
+    ElMessage.success('删除成功')
+    selectedRows.value = selectedRows.value.filter((item) => item.id !== row.id)
+    await loadData()
+  }
+
+  async function handleRowResetPwd(row: Api.User.UserItem) {
+    await ElMessageBox.confirm(
+      `确定将用户「${row.nickName}」的密码重置为 111111 吗？`,
+      '提示',
+      { type: 'warning' }
+    )
+    await fetchResetPassword(row.id)
+    ElMessage.success('密码重置成功')
+  }
+
+  function handleDropdownCommand(command: string, row: Api.User.UserItem) {
+    switch (command) {
+      case 'edit':
+        handleEdit(row)
+        break
+      case 'resetPwd':
+        handleRowResetPwd(row)
+        break
+      case 'delete':
+        handleRowDelete(row)
+        break
     }
-    return selectedRows.value[0]
-  }
-
-  function handleToolbarView() {
-    const row = requireSingleSelection('查看')
-    if (row) handleView(row)
-  }
-
-  function handleToolbarEdit() {
-    const row = requireSingleSelection('编辑')
-    if (row) handleEdit(row)
   }
 
   async function handleBatchDelete() {
@@ -662,6 +699,19 @@
 </script>
 
 <style scoped lang="scss">
+  /* 左栏贴合 panel 左缘圆角，避免直角白底遮住面板左下/左上圆弧 */
+  .user-dept-aside {
+    border-radius: var(--mint-radius) 0 0 var(--mint-radius);
+    overflow: hidden;
+    background: var(--mint-surface);
+  }
+
+  /* 分栏布局下仅保留右下圆角，避免列表区左下角与侧栏交界处出现多余弧面 */
+  :deep(.list-wrap),
+  :deep(.pagination.list-pager-bar) {
+    border-radius: 0 0 var(--mint-radius) 0;
+  }
+
   /* 侧栏标题区纵向排布：与全局 panel-top 横排工具栏区分，收紧标题与搜索的间距节奏 */
   .user-dept-aside__head {
     flex-direction: column;