feat(users): implement user and permission management

2026-08-27 16:48:41 +08:00
parent 332fb53cfa
commit ac8eff5286
5 changed files with 574 additions and 15 deletions
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { UserStatus, UserTableRow } from '../types'
+
+defineProps<{
+  rows: UserTableRow[]
+  roleColors: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  edit: [row: UserTableRow]
+  resetPassword: [row: UserTableRow]
+}>()
+
+const statusLabels: Record<UserStatus, string> = {
+  enabled: '启用',
+  disabled: '停用',
+}
+</script>
+
+<template>
+  <div class="table-scroll">
+    <table class="user-table">
+      <thead>
+        <tr>
+          <th>用户</th>
+          <th>工号</th>
+          <th>院区</th>
+          <th>科室</th>
+          <th>角色</th>
+          <th>数据范围</th>
+          <th>状态</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row.id">
+          <td>
+            <div class="user-cell">
+              <span
+                class="user-avatar"
+                :style="{ backgroundColor: roleColors[row.role] ?? '#8a9aa3' }"
+                aria-hidden="true"
+              >
+                {{ row.name.slice(0, 1) }}
+              </span>
+              <strong>{{ row.name }}</strong>
+            </div>
+          </td>
+          <td>{{ row.employeeNo }}</td>
+          <td>{{ row.campus }}</td>
+          <td>{{ row.department }}</td>
+          <td>
+            <span
+              class="role-tag"
+              :style="{
+                color: roleColors[row.role] ?? '#8a9aa3',
+                backgroundColor: `${roleColors[row.role] ?? '#8a9aa3'}22`,
+              }"
+            >
+              {{ row.role }}
+            </span>
+          </td>
+          <td>{{ row.dataScope }}</td>
+          <td>
+            <span class="status-tag" :class="'status-' + row.status">
+              {{ statusLabels[row.status] }}
+            </span>
+          </td>
+          <td class="actions-cell">
+            <button type="button" class="table-button" @click="emit('edit', row)">编辑</button>
+            <button type="button" class="table-button" @click="emit('resetPassword', row)">
+              重置密码
+            </button>
+          </td>
+        </tr>
+        <tr v-if="!rows.length">
+          <td colspan="8" class="empty-cell">没有找到匹配的用户</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.user-table {
+  width: 100%;
+  min-width: 1040px;
+  font-size: 13px;
+  border-collapse: collapse;
+}
+
+.user-table th {
+  padding: 9px 12px;
+  color: var(--mut);
+  font-size: 12.5px;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  background: #f5f9fa;
+  border-bottom: 1px solid var(--line);
+}
+
+.user-table td {
+  padding: 9px 12px;
+  vertical-align: middle;
+  border-bottom: 1px solid #eef4f6;
+}
+
+.user-table tbody tr:hover td {
+  background: #f7fbfc;
+}
+
+.user-cell {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+}
+
+.user-avatar {
+  display: grid;
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  place-items: center;
+  border-radius: 50%;
+}
+
+.role-tag,
+.status-tag {
+  display: inline-block;
+  padding: 2px 10px;
+  font-size: 11.5px;
+  font-weight: 700;
+  white-space: nowrap;
+  border-radius: 20px;
+}
+
+.status-enabled {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.status-disabled {
+  color: #8a9aa3;
+  background: #eceef0;
+}
+
+.actions-cell {
+  white-space: nowrap;
+}
+
+.table-button {
+  padding: 4px 10px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.table-button + .table-button {
+  margin-left: 6px;
+}
+
+.table-button:hover {
+  background: var(--brand-l);
+}
+
+.empty-cell {
+  padding: 40px 12px !important;
+  color: var(--mut);
+  text-align: center;
+}
+</style>