feat(admin): account governance and user sync pages

Co-Authored-By: Claude Code <noreply@anthropic.com>

apps/admin/src/views/system/users/index.vue

@@ -0,0 +1,324 @@
+<!-- 账号管理页（P4a Task 8）：过滤（前缀+治理状态）+ 游标累积列表 + 行内治理
+     操作（编辑/重置密码/激活/停用/解锁）。自我保护双保险：UI 对自身行禁用
+     角色/锁定编辑，服务端 400 仍会经 http 层本地化弹出。 -->
+<template>
+  <div class="p-5">
+    <ElCard data-test="users-card">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>{{ $t('usersManage.list.title') }}</span>
+          <!-- 过滤栏：前缀查询（account/displayName）+ 治理状态单选 -->
+          <div class="flex flex-wrap items-center gap-2">
+            <ElInput
+              v-model="filters.query"
+              clearable
+              :placeholder="$t('usersManage.filter.queryPlaceholder')"
+              style="width: 220px"
+              data-test="users-query-input"
+              @keyup.enter="search"
+            />
+            <ElSelect v-model="filters.status" style="width: 160px" data-test="users-status-select">
+              <ElOption
+                v-for="opt in statusOptions"
+                :key="opt.value"
+                :value="opt.value"
+                :label="opt.label"
+                :data-test="`users-status-option-${opt.value || 'all'}`"
+              />
+            </ElSelect>
+            <ElButton type="primary" data-test="users-search-btn" @click="search">
+              {{ $t('usersManage.filter.search') }}
+            </ElButton>
+            <ElButton data-test="users-reset-btn" @click="resetFilters">
+              {{ $t('usersManage.filter.reset') }}
+            </ElButton>
+          </div>
+        </div>
+      </template>
+
+      <ElAlert
+        v-if="error && !items.length"
+        type="error"
+        :closable="false"
+        data-test="users-list-error"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ $t('usersManage.list.loadFailed') }}：{{ error.message }}</span>
+          <ElButton size="small" data-test="users-list-retry" @click="loadFirst()">
+            {{ $t('usersManage.list.retry') }}
+          </ElButton>
+        </div>
+      </ElAlert>
+
+      <ElTable v-else v-loading="loading" :data="items" data-test="users-table">
+        <ElTableColumn :label="$t('usersManage.list.colAccount')" min-width="140">
+          <template #default="{ row }">
+            <div class="flex items-center gap-2">
+              <span class="font-medium" data-test="user-account">{{ row.account }}</span>
+              <ElTag v-if="isSelf(row)" size="small" type="primary">
+                {{ $t('usersManage.list.selfTag') }}
+              </ElTag>
+            </div>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          :label="$t('usersManage.list.colDisplayName')"
+          min-width="140"
+          prop="displayName"
+        />
+        <ElTableColumn :label="$t('usersManage.list.colRole')" width="100">
+          <template #default="{ row }">
+            <ElTag :type="row.role === 'admin' ? 'warning' : 'info'" data-test="user-role-tag">
+              {{ $t(`usersManage.role.${row.role}`) }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colSourceStatus')" width="110">
+          <template #default="{ row }">
+            <ElTag
+              :type="sourceTagOf(row.sourceStatus)"
+              :effect="row.sourceStatus === 'local' ? 'plain' : 'light'"
+            >
+              {{ $t(`usersManage.source.${row.sourceStatus}`) }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colCredentialStatus')" width="110">
+          <template #default="{ row }">
+            <ElTag :type="row.credentialStatus === 'pending' ? 'warning' : 'success'">
+              {{ $t(`usersManage.credential.${row.credentialStatus}`) }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colLocalLocked')" width="100">
+          <template #default="{ row }">
+            <ElTag
+              :type="row.localLocked ? 'danger' : 'info'"
+              :effect="row.localLocked ? 'light' : 'plain'"
+            >
+              {{
+                row.localLocked ? $t('usersManage.list.locked') : $t('usersManage.list.unlocked')
+              }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colCreatedAt')" width="160">
+          <template #default="{ row }">
+            <span>{{ formatDateTime(row.createdAt) }}</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colActions')" width="280" fixed="right">
+          <template #default="{ row, $index }">
+            <ElButton link type="primary" data-test="user-edit-btn" @click="openEdit(row)">
+              {{ $t('usersManage.list.actionEdit') }}
+            </ElButton>
+            <ElButton link type="primary" data-test="user-reset-btn" @click="openReset(row)">
+              {{ $t('usersManage.list.actionResetPassword') }}
+            </ElButton>
+            <ElButton
+              v-if="row.credentialStatus === 'pending'"
+              link
+              type="success"
+              data-test="user-activate-btn"
+              @click="confirmActivate(row, $index)"
+            >
+              {{ $t('usersManage.list.actionActivate') }}
+            </ElButton>
+            <ElButton
+              v-if="row.localLocked"
+              link
+              type="success"
+              data-test="user-unlock-btn"
+              @click="confirmUnlock(row, $index)"
+            >
+              {{ $t('usersManage.list.actionUnlock') }}
+            </ElButton>
+            <ElButton
+              v-else
+              link
+              type="danger"
+              :disabled="isSelf(row)"
+              data-test="user-deactivate-btn"
+              @click="confirmDeactivate(row, $index)"
+            >
+              {{ $t('usersManage.list.actionDeactivate') }}
+            </ElButton>
+          </template>
+        </ElTableColumn>
+
+        <template #empty>
+          <ElEmpty v-if="!loading" :description="$t('usersManage.list.empty')" />
+        </template>
+      </ElTable>
+
+      <div v-if="items.length" class="mt-4 text-center">
+        <ElButton v-if="hasMore" :loading="loading" data-test="users-load-more" @click="loadMore()">
+          {{ $t('usersManage.list.loadMore') }}
+        </ElButton>
+        <span v-else class="text-gray-400 text-sm">{{ $t('usersManage.list.noMore') }}</span>
+      </div>
+    </ElCard>
+
+    <UserEditDialog v-model="editVisible" :user="editingUser" @saved="onSaved" />
+    <ResetPasswordDialog v-model="resetVisible" :user="resettingUser" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, reactive, ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import UserEditDialog from './UserEditDialog.vue'
+  import ResetPasswordDialog from './ResetPasswordDialog.vue'
+  import {
+    fetchActivateAdminUser,
+    fetchDeactivateAdminUser,
+    fetchUpdateAdminUser,
+    fetchAdminUsers
+  } from '@/api/adminUsers'
+  import { useCursorList } from '@/views/albums/composables/useCursorList'
+  import { formatDateTime } from '@/utils/albums/format'
+  import { useUserStore } from '@/store/modules/user'
+
+  defineOptions({ name: 'SystemUsers' })
+
+  const PAGE_SIZE = 20
+
+  const { t } = useI18n()
+  const userStore = useUserStore()
+
+  // ── 过滤（查询即整页重载：游标键集依赖过滤条件稳定） ──
+  const filters = reactive({ query: '', status: '' })
+  /** 过滤选项（computed：语言切换时标签随 i18n 响应式刷新） */
+  const statusOptions = computed(() => [
+    { value: '', label: t('usersManage.filter.statusAll') },
+    { value: 'active', label: t('usersManage.bucket.active') },
+    { value: 'pending', label: t('usersManage.bucket.pending') },
+    { value: 'disabled', label: t('usersManage.bucket.disabled') },
+    { value: 'locked', label: t('usersManage.bucket.locked') }
+  ])
+
+  const { items, hasMore, loading, error, loadFirst, loadMore, replaceItem } =
+    useCursorList<Api.AdminUser.Item>(
+      (cursor?: string) =>
+        fetchAdminUsers({
+          query: filters.query.trim() || undefined,
+          status: (filters.status || undefined) as Api.AdminUser.StatusFilter | undefined,
+          cursor,
+          limit: PAGE_SIZE
+        }),
+      (item) => item.id
+    )
+
+  function search(): void {
+    loadFirst()
+  }
+
+  function resetFilters(): void {
+    filters.query = ''
+    filters.status = ''
+    loadFirst()
+  }
+
+  /** 自身行判定：本地会话只存账号（无 /users/me 端点），按 account 对齐 */
+  function isSelf(row: Api.AdminUser.Item): boolean {
+    return row.account === (userStore.info?.userName ?? '')
+  }
+
+  const SOURCE_TAG_TYPE: Record<Api.AdminUser.SourceStatus, 'success' | 'danger' | 'info'> = {
+    local: 'info',
+    active: 'success',
+    disabled: 'danger'
+  }
+
+  /** 模板取值桥（ElTable 行槽位为 any，模板表达式不可写 as 断言） */
+  function sourceTagOf(sourceStatus: Api.AdminUser.SourceStatus): 'success' | 'danger' | 'info' {
+    return SOURCE_TAG_TYPE[sourceStatus]
+  }
+
+  // ── 编辑 ──
+  const editVisible = ref(false)
+  const editingUser = ref<Api.AdminUser.Item | null>(null)
+
+  function openEdit(row: Api.AdminUser.Item): void {
+    editingUser.value = row
+    editVisible.value = true
+  }
+
+  function onSaved(updated: Api.AdminUser.Item): void {
+    const index = items.value.findIndex((item) => item.id === updated.id)
+    if (index >= 0) replaceItem(index, updated)
+  }
+
+  // ── 重置密码 ──
+  const resetVisible = ref(false)
+  const resettingUser = ref<Api.AdminUser.Item | null>(null)
+
+  function openReset(row: Api.AdminUser.Item): void {
+    resettingUser.value = row
+    resetVisible.value = true
+  }
+
+  // ── 激活 / 停用 / 解锁（确认框 → 调用 → 行内回显） ──
+  async function confirmActivate(row: Api.AdminUser.Item, index: number): Promise<void> {
+    try {
+      await ElMessageBox.confirm(
+        t('usersManage.confirm.activateBody', { account: row.account }),
+        t('usersManage.list.actionActivate'),
+        {
+          type: 'info',
+          confirmButtonText: t('common.confirm'),
+          cancelButtonText: t('common.cancel')
+        }
+      )
+    } catch {
+      return
+    }
+    const updated = await fetchActivateAdminUser(row.id)
+    replaceItem(index, updated)
+    // §10 语义：激活不出凭据，初始密码经重置密码出具（闭环提示）
+    ElMessage.success(t('usersManage.toast.activated'))
+  }
+
+  async function confirmDeactivate(row: Api.AdminUser.Item, index: number): Promise<void> {
+    try {
+      await ElMessageBox.confirm(
+        t('usersManage.confirm.deactivateBody', { account: row.account }),
+        t('usersManage.list.actionDeactivate'),
+        {
+          type: 'warning',
+          confirmButtonText: t('common.confirm'),
+          cancelButtonText: t('common.cancel')
+        }
+      )
+    } catch {
+      return
+    }
+    const updated = await fetchDeactivateAdminUser(row.id)
+    replaceItem(index, updated)
+    ElMessage.success(t('usersManage.toast.deactivated'))
+  }
+
+  async function confirmUnlock(row: Api.AdminUser.Item, index: number): Promise<void> {
+    try {
+      await ElMessageBox.confirm(
+        t('usersManage.confirm.unlockBody', { account: row.account }),
+        t('usersManage.list.actionUnlock'),
+        {
+          type: 'info',
+          confirmButtonText: t('common.confirm'),
+          cancelButtonText: t('common.cancel')
+        }
+      )
+    } catch {
+      return
+    }
+    const updated = await fetchUpdateAdminUser(row.id, { localLocked: false })
+    replaceItem(index, updated)
+    ElMessage.success(t('usersManage.toast.unlocked'))
+  }
+
+  onMounted(() => {
+    loadFirst()
+  })
+</script>