feat(admin): account governance and user sync pages
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -0,0 +1,135 @@
|
||||
<!-- 重置密码对话框：生成随机（默认）或指定新密码 → 提交后一次性展示结果密码
|
||||
（复制转交；关闭即焚——契约 newPassword 仅响应返回一次）。 -->
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="visible"
|
||||
:title="$t('usersManage.reset.title', { account: user?.account ?? '' })"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
data-test="user-reset-dialog"
|
||||
@closed="flow.dismiss()"
|
||||
>
|
||||
<!-- 步骤一：选择方式（生成 / 指定） -->
|
||||
<template v-if="flow.step.value === 'form'">
|
||||
<ElAlert
|
||||
type="warning"
|
||||
:closable="false"
|
||||
:title="$t('usersManage.reset.revokeHint')"
|
||||
data-test="user-reset-revoke-hint"
|
||||
/>
|
||||
<ElForm label-width="120px" class="mt-4">
|
||||
<ElFormItem :label="$t('usersManage.reset.modeLabel')">
|
||||
<ElRadioGroup v-model="mode" data-test="user-reset-mode">
|
||||
<ElRadio value="generate" data-test="user-reset-mode-generate">
|
||||
{{ $t('usersManage.reset.modeGenerate') }}
|
||||
</ElRadio>
|
||||
<ElRadio value="custom" data-test="user-reset-mode-custom">
|
||||
{{ $t('usersManage.reset.modeCustom') }}
|
||||
</ElRadio>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="mode === 'custom'"
|
||||
:label="$t('usersManage.reset.customLabel')"
|
||||
:error="fieldError"
|
||||
>
|
||||
<ElInput
|
||||
v-model="customPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="$t('usersManage.reset.customPlaceholder')"
|
||||
data-test="user-reset-custom-input"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</template>
|
||||
|
||||
<!-- 步骤二：结果（一次性展示 + 复制） -->
|
||||
<template v-else>
|
||||
<ElAlert
|
||||
type="warning"
|
||||
:closable="false"
|
||||
:title="$t('usersManage.reset.onceWarning')"
|
||||
data-test="user-reset-once-warning"
|
||||
/>
|
||||
<div class="flex items-center gap-2 mt-4" data-test="user-reset-result">
|
||||
<code
|
||||
class="bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded text-base font-mono break-all"
|
||||
data-test="user-reset-password"
|
||||
>
|
||||
{{ flow.password.value }}
|
||||
</code>
|
||||
<ElButton type="primary" data-test="user-reset-copy" @click="copyPassword">
|
||||
{{ $t('usersManage.reset.copy') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<template v-if="flow.step.value === 'form'">
|
||||
<ElButton data-test="user-reset-cancel" @click="visible = false">
|
||||
{{ $t('common.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
:loading="flow.submitting.value"
|
||||
data-test="user-reset-submit"
|
||||
@click="submit"
|
||||
>
|
||||
{{ $t('usersManage.reset.submit') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
<ElButton v-else type="primary" data-test="user-reset-close" @click="visible = false">
|
||||
{{ $t('usersManage.reset.handedOver') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useResetPassword } from './composables/useResetPassword'
|
||||
import type { ResetPasswordMode } from '@/utils/system/userAdmin'
|
||||
|
||||
const props = defineProps<{
|
||||
/** 重置目标（null 时对话框不应打开） */
|
||||
user: Api.AdminUser.Item | null
|
||||
}>()
|
||||
|
||||
const visible = defineModel<boolean>({ default: false })
|
||||
const { t } = useI18n()
|
||||
|
||||
const flow = useResetPassword()
|
||||
const mode = ref<ResetPasswordMode>('generate')
|
||||
const customPassword = ref('')
|
||||
const fieldError = ref('')
|
||||
|
||||
// 关闭即焚由 @closed → dismiss() 负责；打开时重置方式选择
|
||||
watch(visible, (open) => {
|
||||
if (open) {
|
||||
mode.value = 'generate'
|
||||
customPassword.value = ''
|
||||
fieldError.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
if (!props.user) return
|
||||
fieldError.value = ''
|
||||
const ok = await flow.submit(props.user.id, mode.value, customPassword.value)
|
||||
if (!ok) {
|
||||
// 指定密码为空/越界（契约 8..128）——表单内联提示，不发请求
|
||||
fieldError.value =
|
||||
customPassword.value.trim() === ''
|
||||
? t('usersManage.reset.errors.required')
|
||||
: t('usersManage.reset.errors.length')
|
||||
}
|
||||
}
|
||||
|
||||
async function copyPassword(): Promise<void> {
|
||||
await navigator.clipboard.writeText(flow.password.value)
|
||||
ElMessage.success(t('usersManage.reset.copied'))
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!-- 编辑用户治理属性对话框：role/localLocked/displayName（sourceStatus 只读展示）。
|
||||
自我保护：自身行禁用角色与锁定编辑（服务端 400 双保险——http 层已本地化）。 -->
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="visible"
|
||||
:title="$t('usersManage.edit.title', { account: user?.account ?? '' })"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
data-test="user-edit-dialog"
|
||||
>
|
||||
<ElForm :model="form" label-width="120px">
|
||||
<ElFormItem :label="$t('usersManage.list.colAccount')">
|
||||
<span class="text-gray-500">{{ user?.account }}</span>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('usersManage.list.colRole')">
|
||||
<ElSelect
|
||||
v-model="form.role"
|
||||
:disabled="isSelf"
|
||||
style="width: 200px"
|
||||
data-test="user-edit-role"
|
||||
>
|
||||
<ElOption value="staff" :label="$t('usersManage.role.staff')" />
|
||||
<ElOption value="admin" :label="$t('usersManage.role.admin')" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('usersManage.list.colDisplayName')" :error="fieldErrors.displayName">
|
||||
<ElInput
|
||||
v-model="form.displayName"
|
||||
:placeholder="$t('usersManage.edit.displayNamePlaceholder')"
|
||||
data-test="user-edit-name"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('usersManage.list.colLocalLocked')">
|
||||
<div class="flex flex-col gap-1">
|
||||
<ElSwitch v-model="form.localLocked" :disabled="isSelf" data-test="user-edit-locked" />
|
||||
<span class="text-gray-400 text-xs">{{ $t('usersManage.edit.lockedHint') }}</span>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<ElAlert
|
||||
v-if="isSelf"
|
||||
type="info"
|
||||
:closable="false"
|
||||
:title="$t('usersManage.edit.selfGuardHint')"
|
||||
data-test="user-edit-self-hint"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<ElButton data-test="user-edit-cancel" @click="visible = false">
|
||||
{{ $t('common.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton type="primary" :loading="submitting" data-test="user-edit-submit" @click="submit">
|
||||
{{ $t('usersManage.edit.submit') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchUpdateAdminUser } from '@/api/adminUsers'
|
||||
import { buildUserUpdatePayload } from '@/utils/system/userAdmin'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
const props = defineProps<{
|
||||
/** 编辑目标（null 时对话框不应打开） */
|
||||
user: Api.AdminUser.Item | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'saved', user: Api.AdminUser.Item): void
|
||||
}>()
|
||||
|
||||
const visible = defineModel<boolean>({ default: false })
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const form = reactive({
|
||||
role: 'staff' as Api.AdminUser.Role,
|
||||
displayName: '',
|
||||
localLocked: false
|
||||
})
|
||||
const fieldErrors = reactive({ displayName: '' })
|
||||
const submitting = ref(false)
|
||||
|
||||
/** 自身行：角色/锁定禁改（服务端同口径 400；displayName 自改放行） */
|
||||
const isSelf = computed(
|
||||
() => props.user !== null && props.user.account === (userStore.info?.userName ?? '')
|
||||
)
|
||||
|
||||
watch(visible, (open) => {
|
||||
if (!open || !props.user) return
|
||||
form.role = props.user.role
|
||||
form.displayName = props.user.displayName
|
||||
form.localLocked = props.user.localLocked
|
||||
fieldErrors.displayName = ''
|
||||
})
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
if (!props.user) return
|
||||
fieldErrors.displayName = ''
|
||||
const payload = buildUserUpdatePayload(props.user, {
|
||||
role: form.role,
|
||||
displayName: form.displayName,
|
||||
localLocked: form.localLocked
|
||||
})
|
||||
if (Object.keys(payload).length === 0) {
|
||||
// 无变更：不制造服务端 no-op（幂等返回也不落审计，前端直接收口）
|
||||
ElMessage.info(t('usersManage.edit.noChanges'))
|
||||
visible.value = false
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
const updated = await fetchUpdateAdminUser(props.user.id, payload)
|
||||
ElMessage.success(t('usersManage.edit.success'))
|
||||
emit('saved', updated)
|
||||
visible.value = false
|
||||
} catch {
|
||||
// 错误已由 http 层统一弹出（ElMessage），此处仅吸收避免未处理拒绝
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { useResetPassword } from './useResetPassword'
|
||||
|
||||
describe('useResetPassword 生成密码一次性展示', () => {
|
||||
it('generate 提交成功 → step=result，password 为服务端返回值', async () => {
|
||||
const reset = vi.fn().mockResolvedValue({ newPassword: 'Gen-Random-Pass' })
|
||||
const flow = useResetPassword({ reset })
|
||||
const ok = await flow.submit('u1', 'generate', '')
|
||||
expect(ok).toBe(true)
|
||||
expect(reset).toHaveBeenCalledWith('u1', {})
|
||||
expect(flow.step.value).toBe('result')
|
||||
expect(flow.password.value).toBe('Gen-Random-Pass')
|
||||
})
|
||||
|
||||
it('dismiss 即焚：回到 form 且 password 清空（关闭后不再可见）', async () => {
|
||||
const reset = vi.fn().mockResolvedValue({ newPassword: 'Once-Only-Pass' })
|
||||
const flow = useResetPassword({ reset })
|
||||
await flow.submit('u1', 'generate', '')
|
||||
flow.dismiss()
|
||||
expect(flow.step.value).toBe('form')
|
||||
expect(flow.password.value).toBe('')
|
||||
})
|
||||
|
||||
it('custom 非法（空/长度越界）→ false 且停留 form，不发请求', async () => {
|
||||
const reset = vi.fn()
|
||||
const flow = useResetPassword({ reset })
|
||||
expect(await flow.submit('u1', 'custom', ' ')).toBe(false)
|
||||
expect(await flow.submit('u1', 'custom', 'short')).toBe(false)
|
||||
expect(flow.step.value).toBe('form')
|
||||
expect(reset).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('custom 合法 → 载荷携带 newPassword（trim 后）', async () => {
|
||||
const reset = vi.fn().mockResolvedValue({ newPassword: 'hand-made-pass' })
|
||||
const flow = useResetPassword({ reset })
|
||||
const ok = await flow.submit('u1', 'custom', ' hand-made-pass ')
|
||||
expect(ok).toBe(true)
|
||||
expect(reset).toHaveBeenCalledWith('u1', { newPassword: 'hand-made-pass' })
|
||||
expect(flow.password.value).toBe('hand-made-pass')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 重置密码流程状态机（逻辑层抽离，vitest 覆盖「生成密码仅展示一次」语义）
|
||||
*
|
||||
* step: form（选择 指定/生成）→ result（一次性展示 newPassword）
|
||||
* dismiss 后 password 立即清空（组件 destroy-on-close 兜底，双保险）：
|
||||
* 契约 newPassword 仅响应返回一次，页面不留存、不复查。
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { fetchResetAdminUserPassword } from '@/api/adminUsers'
|
||||
import { buildResetPasswordPayload, type ResetPasswordMode } from '@/utils/system/userAdmin'
|
||||
|
||||
export interface ResetPasswordApi {
|
||||
reset: (
|
||||
userId: string,
|
||||
payload: Api.AdminUser.ResetPasswordPayload
|
||||
) => Promise<Api.AdminUser.ResetPasswordResponse>
|
||||
}
|
||||
|
||||
/** 校验错误文案键由调用方渲染（返回 false 时表单停留 form 步骤） */
|
||||
export function useResetPassword(api: ResetPasswordApi = { reset: fetchResetAdminUserPassword }) {
|
||||
const step = ref<'form' | 'result'>('form')
|
||||
/** 一次性展示的新密码（仅 result 步骤非空；dismiss 即焚） */
|
||||
const password = ref('')
|
||||
const submitting = ref(false)
|
||||
|
||||
async function submit(
|
||||
userId: string,
|
||||
mode: ResetPasswordMode,
|
||||
customPassword: string
|
||||
): Promise<boolean> {
|
||||
const built = buildResetPasswordPayload(mode, customPassword)
|
||||
if (!built.ok) return false
|
||||
submitting.value = true
|
||||
try {
|
||||
const res = await api.reset(userId, built.payload)
|
||||
password.value = res.newPassword
|
||||
step.value = 'result'
|
||||
return true
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 关闭结果（或表单）：密码即刻清空，回到初始态 */
|
||||
function dismiss(): void {
|
||||
step.value = 'form'
|
||||
password.value = ''
|
||||
}
|
||||
|
||||
return { step, password, submitting, submit, dismiss }
|
||||
}
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user