feat(users): implement user and permission management

clinical-web/src/views/management/users/index.vue

@@ -1,12 +1,196 @@
 <script setup lang="ts">
-import PagePlaceholder from '@/components/PagePlaceholder.vue'
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import RoleSummaryCards from './components/RoleSummaryCards.vue'
+import UserTable from './components/UserTable.vue'
+import { roleColors, roleSummaries, users } from './mock'
+import type { RoleSummary, UserTableRow } from './types'
+
+const loading = ref(true)
+const keyword = ref('')
+const roleRows = ref<RoleSummary[]>([])
+const userRows = ref<UserTableRow[]>([])
+
+const visibleUsers = computed(() => {
+  const normalizedKeyword = keyword.value.trim().toLowerCase()
+
+  return userRows.value.filter((user) => {
+    const matchesCampus = user.campus === '本部院区'
+    const matchesKeyword =
+      !normalizedKeyword ||
+      [user.name, user.employeeNo].join(' ').toLowerCase().includes(normalizedKeyword)
+
+    return matchesCampus && matchesKeyword
+  })
+})
+
+async function loadUsers() {
+  loading.value = true
+  await Promise.resolve()
+  roleRows.value = roleSummaries.map((role) => ({ ...role }))
+  userRows.value = users.map((user) => ({ ...user }))
+  loading.value = false
+}
+
+function showAddUserMessage() {
+  ElMessage.info('原型演示：新增用户')
+}
+
+function showImportMessage() {
+  ElMessage.info('原型演示：批量导入')
+}
+
+function editUser(user: UserTableRow) {
+  ElMessage.info(`原型演示：编辑用户《${user.name}》`)
+}
+
+function resetPassword(user: UserTableRow) {
+  ElMessage.success(`已重置${user.name}的密码`)
+}
+
+onMounted(loadUsers)
 </script>
 
 <template>
-  <PagePlaceholder
-    group="管理"
-    title="用户与权限"
-    icon="◉"
-    description="用户与权限页面占位，待根据 Web 端需求实现。"
-  />
+  <section class="users-page">
+    <div v-if="loading" class="loading-card" aria-label="正在加载用户与角色">
+      <span v-for="index in 4" :key="index" />
+    </div>
+
+    <template v-else>
+      <RoleSummaryCards :rows="roleRows" />
+
+      <section class="page-card">
+        <div class="card-heading">
+          <h2>用户列表</h2>
+          <span class="heading-spacer" />
+          <input
+            v-model="keyword"
+            class="user-search"
+            type="search"
+            placeholder="搜索姓名 / 工号"
+            aria-label="搜索姓名或工号"
+          />
+          <button type="button" class="table-button" @click="showAddUserMessage">＋新增用户</button>
+          <button type="button" class="table-button" @click="showImportMessage">批量导入</button>
+        </div>
+        <UserTable
+          :rows="visibleUsers"
+          :role-colors="roleColors"
+          @edit="editUser"
+          @reset-password="resetPassword"
+        />
+      </section>
+    </template>
+  </section>
 </template>
+
+<style scoped>
+.users-page {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.page-card {
+  padding: 16px 18px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.card-heading {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.card-heading h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 14.5px;
+  line-height: 1.4;
+}
+
+.heading-spacer {
+  flex: 1;
+}
+
+.user-search {
+  width: 180px;
+  padding: 6px 10px;
+  color: var(--ink);
+  font-size: 12.5px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.user-search:focus {
+  outline: none;
+  border-color: var(--brand);
+}
+
+.table-button {
+  padding: 4px 10px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.table-button:hover {
+  background: var(--brand-l);
+}
+
+.loading-card {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.loading-card span {
+  display: block;
+  height: 116px;
+  background: linear-gradient(90deg, #edf3f5 25%, #f7fafb 37%, #edf3f5 63%);
+  background-size: 400% 100%;
+  border-radius: 10px;
+  box-shadow: var(--sh);
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@media (max-width: 900px) {
+  .card-heading {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .heading-spacer {
+    display: none;
+  }
+
+  .user-search {
+    flex: 1;
+    min-width: 180px;
+  }
+}
+
+@media (max-width: 600px) {
+  .loading-card {
+    grid-template-columns: 1fr;
+  }
+}
+</style>