yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui优化

Browse Source
This commit is contained in:
yml2213
2026-05-14 19:47:31 +08:00
parent 7775525f30
commit cfe2c03f1b
13 changed files with 1643 additions and 3707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminUsersView.vue
+109 -402
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import { isFeedbackDismissed, showConfirm, showError, showPrompt, showSuccess } from '@/lib/feedback'
import {
@@ -28,464 +28,171 @@ const createUsername = ref('')
const createPassword = ref('')
const createRole = ref<AdminRole>('operator')
const items = ref<AdminUserListItem[]>([])
const pagination = ref<AdminPagination>({
page: 1,
pageSize: 20,
total: 0,
})
const pagination = ref<AdminPagination>({ page: 1, pageSize: 20, total: 0 })
function isCurrentUser(userId: number) {
return getAdminUserId() === userId
}
function isCurrentUser(userId: number) { return getAdminUserId() === userId }
function formatRoleLabel(role: AdminRole) {
if (role === 'admin') {
return '管理员'
}
if (role === 'support') {
return '客服'
}
if (role === 'admin') return '管理员'
if (role === 'support') return '客服'
return '普通运营'
}
function formatInventoryGroups(item: AdminUserListItem) {
if (item.role !== 'support') {
return ['不限库存组']
}
if (item.inventoryGroupCodes.length === 0) {
return ['未绑定']
}
if (item.role !== 'support') return ['不限库存组']
if (item.inventoryGroupCodes.length === 0) return ['未绑定']
return item.inventoryGroupCodes
}
async function loadUsers(page = pagination.value.page) {
if (!hasAdminRole('admin')) {
loading.value = false
return
}
loading.value = true
errorMessage.value = ''
if (!hasAdminRole('admin')) { loading.value = false; return }
loading.value = true; errorMessage.value = ''
try {
const response = await fetchAdminUsers({
page,
pageSize: pagination.value.pageSize,
username: username.value.trim(),
role: role.value.trim(),
status: status.value.trim(),
})
items.value = response.data.items
pagination.value = response.data.pagination
const response = await fetchAdminUsers({ page, pageSize: pagination.value.pageSize, username: username.value.trim(), role: role.value.trim(), status: status.value.trim() })
items.value = response.data.items; pagination.value = response.data.pagination
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '读取后台用户失败'
} finally {
loading.value = false
}
} finally { loading.value = false }
}
async function submitCreate() {
if (!createUsername.value.trim() || !createPassword.value.trim()) {
showError('请填写账号和密码')
return
}
if (!createUsername.value.trim() || !createPassword.value.trim()) { showError('请填写账号和密码'); return }
creating.value = true
try {
await createAdminUser({
username: createUsername.value.trim(),
password: createPassword.value.trim(),
role: createRole.value,
status: 'active',
})
showSuccess('后台用户已创建')
createUsername.value = ''
createPassword.value = ''
createRole.value = 'operator'
await createAdminUser({ username: createUsername.value.trim(), password: createPassword.value.trim(), role: createRole.value, status: 'active' })
showSuccess('后台用户已创建'); createUsername.value = ''; createPassword.value = ''; createRole.value = 'operator'
await loadUsers(1)
} catch (error) {
showError(error instanceof Error ? error.message : '创建后台用户失败')
} finally {
creating.value = false
}
} catch (error) { showError(error instanceof Error ? error.message : '创建后台用户失败') }
finally { creating.value = false }
}
async function updateRole(item: AdminUserListItem, nextRole: AdminRole) {
if (item.role === nextRole) {
return
}
try {
await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', {
type: 'warning',
confirmButtonText: '继续执行',
cancelButtonText: '取消',
})
} catch {
return
}
if (item.role === nextRole) return
try { await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) } catch { return }
actionLoadingId.value = item.userId
try {
await updateAdminUserRole(item.userId, { role: nextRole })
showSuccess('用户角色已更新')
await loadUsers()
} catch (error) {
showError(error instanceof Error ? error.message : '更新用户角色失败')
} finally {
actionLoadingId.value = null
}
try { await updateAdminUserRole(item.userId, { role: nextRole }); showSuccess('用户角色已更新'); await loadUsers() }
catch (error) { showError(error instanceof Error ? error.message : '更新用户角色失败') }
finally { actionLoadingId.value = null }
}
async function toggleStatus(item: AdminUserListItem) {
const nextStatus = item.status === 'active' ? 'disabled' : 'active'
try {
await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', {
type: nextStatus === 'active' ? 'info' : 'warning',
confirmButtonText: '继续执行',
cancelButtonText: '取消',
})
} catch {
return
}
try { await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', { type: nextStatus === 'active' ? 'info' : 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) } catch { return }
actionLoadingId.value = item.userId
try {
await updateAdminUserStatus(item.userId, { status: nextStatus })
showSuccess('用户状态已更新')
await loadUsers()
} catch (error) {
showError(error instanceof Error ? error.message : '更新用户状态失败')
} finally {
actionLoadingId.value = null
}
try { await updateAdminUserStatus(item.userId, { status: nextStatus }); showSuccess('用户状态已更新'); await loadUsers() }
catch (error) { showError(error instanceof Error ? error.message : '更新用户状态失败') }
finally { actionLoadingId.value = null }
}
async function promptResetPassword(item: AdminUserListItem) {
try {
const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', {
inputType: 'password',
inputPlaceholder: '至少 8 位',
confirmButtonText: '提交',
cancelButtonText: '取消',
inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位',
})
const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', { inputType: 'password', inputPlaceholder: '至少 8 位', confirmButtonText: '提交', cancelButtonText: '取消', inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位' })
actionLoadingId.value = item.userId
await resetAdminUserPassword(item.userId, { password: result.value.trim() })
showSuccess('用户密码已重置')
await loadUsers()
} catch (error) {
if (isFeedbackDismissed(error)) {
return
}
showError(error instanceof Error ? error.message : '重置密码失败')
} finally {
actionLoadingId.value = null
}
await resetAdminUserPassword(item.userId, { password: result.value.trim() }); showSuccess('用户密码已重置'); await loadUsers()
} catch (error) { if (isFeedbackDismissed(error)) return; showError(error instanceof Error ? error.message : '重置密码失败') }
finally { actionLoadingId.value = null }
}
async function promptUpdateInventoryGroups(item: AdminUserListItem) {
if (item.role !== 'support') {
showError('仅客服账号需要绑定库存组')
return
}
if (item.role !== 'support') { showError('仅客服账号需要绑定库存组'); return }
try {
const result = await showPrompt(
`请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`,
'配置库存组',
{
inputType: 'text',
inputValue: item.inventoryGroupCodes.join(','),
inputPlaceholder: '例如 A组,B组,售后组',
confirmButtonText: '保存',
cancelButtonText: '取消',
},
)
const inventoryGroupCodes = String(result.value || '')
.split(',')
.map((value) => value.trim())
.filter(Boolean)
const result = await showPrompt(`请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`, '配置库存组', { inputType: 'text', inputValue: item.inventoryGroupCodes.join(','), inputPlaceholder: '例如 A组,B组,售后组', confirmButtonText: '保存', cancelButtonText: '取消' })
const inventoryGroupCodes = String(result.value || '').split(',').map((v) => v.trim()).filter(Boolean)
actionLoadingId.value = item.userId
await updateAdminUserInventoryGroups(item.userId, {
inventoryGroupCodes,
})
showSuccess('用户库存组已更新')
await loadUsers()
} catch (error) {
if (isFeedbackDismissed(error)) {
return
}
showError(error instanceof Error ? error.message : '更新库存组失败')
} finally {
actionLoadingId.value = null
}
await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes }); showSuccess('用户库存组已更新'); await loadUsers()
} catch (error) { if (isFeedbackDismissed(error)) return; showError(error instanceof Error ? error.message : '更新库存组失败') }
finally { actionLoadingId.value = null }
}
onMounted(loadUsers)
</script>
<template>
<section class="admin-panel">
<header class="panel-header">
<div>
<h1>后台用户</h1>
<p>管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。</p>
</div>
</header>
<div class="users-page">
<AdminPageHeader title="后台用户" description="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。" />
<div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以访问用户管理。</div>
<el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问用户管理。" />
<template v-else>
<section class="form-card">
<div class="form-row">
<input v-model="username" class="text-input" placeholder="账号筛选" />
<select v-model="role" class="text-input select-input">
<option v-for="option in adminUserRoleOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
<select v-model="status" class="text-input select-input">
<option v-for="option in adminUserStatusOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
<el-button round @click="() => loadUsers()">查询列表</el-button>
<!-- 筛选 + 创建 -->
<el-card shadow="never" class="filter-card" style="margin-top: 16px">
<div class="filter-row">
<el-input v-model="username" placeholder="账号筛选" clearable style="width: 140px" @keyup.enter="loadUsers(1)" />
<el-select v-model="role" placeholder="角色" clearable style="width: 120px">
<el-option v-for="opt in adminUserRoleOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
</el-select>
<el-select v-model="status" placeholder="状态" clearable style="width: 120px">
<el-option v-for="opt in adminUserStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
</el-select>
<el-button @click="loadUsers(1)">查询列表</el-button>
</div>
<div class="form-row form-row-top">
<input v-model="createUsername" class="text-input" placeholder="新账号" />
<input v-model="createPassword" class="text-input" type="password" placeholder="新密码，至少 8 位" />
<select v-model="createRole" class="text-input select-input">
<option value="operator">普通运营</option>
<option value="support">客服</option>
<option value="admin">管理员</option>
</select>
<el-button :loading="creating" round type="primary" @click="submitCreate">新增用户</el-button>
<el-divider />
<div class="filter-row">
<el-input v-model="createUsername" placeholder="新账号" style="width: 140px" />
<el-input v-model="createPassword" type="password" show-password placeholder="新密码，至少 8 位" style="width: 180px" />
<el-select v-model="createRole" style="width: 120px">
<el-option value="operator" label="普通运营" />
<el-option value="support" label="客服" />
<el-option value="admin" label="管理员" />
</el-select>
<el-button :loading="creating" type="primary" @click="submitCreate">新增用户</el-button>
</div>
</section>
</el-card>
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
<div v-if="loading" class="empty-block">用户列表加载中</div>
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
<div v-else class="table-card">
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>账号</th>
<th>角色</th>
<th>库存组</th>
<th>状态</th>
<th>创建时间</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.userId">
<td>{{ item.userId }}</td>
<td>{{ item.username }}</td>
<td>{{ formatRoleLabel(item.role) }}</td>
<td>
<div class="group-chip-row">
<span
v-for="groupCode in formatInventoryGroups(item)"
:key="`${item.userId}-${groupCode}`"
:class="['group-chip', { 'group-chip--muted': groupCode === '未绑定' || groupCode === '不限库存组' }]"
>
{{ groupCode }}
</span>
</div>
</td>
<td><AdminStatusTag :status="item.status" /></td>
<td>{{ formatAdminDateTime(item.createdAt) }}</td>
<td>{{ formatAdminDateTime(item.updatedAt) }}</td>
<td>
<div class="action-stack">
<el-button
:loading="actionLoadingId === item.userId"
link
:disabled="isCurrentUser(item.userId)"
@click="updateRole(item, 'admin')"
>
设为管理员
</el-button>
<el-button
:loading="actionLoadingId === item.userId"
link
:disabled="isCurrentUser(item.userId)"
@click="updateRole(item, 'operator')"
>
设为运营
</el-button>
<el-button
:loading="actionLoadingId === item.userId"
link
:disabled="isCurrentUser(item.userId)"
@click="updateRole(item, 'support')"
>
设为客服
</el-button>
<el-button
:loading="actionLoadingId === item.userId"
link
:disabled="isCurrentUser(item.userId)"
@click="toggleStatus(item)"
>
{{ item.status === 'active' ? '停用' : '启用' }}
</el-button>
<el-button
:loading="actionLoadingId === item.userId"
link
:disabled="item.role !== 'support'"
@click="promptUpdateInventoryGroups(item)"
>
配库存组
</el-button>
<el-button
:loading="actionLoadingId === item.userId"
link
type="primary"
@click="promptResetPassword(item)"
>
重置密码
</el-button>
<span v-if="isCurrentUser(item.userId)" class="self-copy">当前登录账号</span>
</div>
</td>
</tr>
</tbody>
</table>
<AdminPaginationBar
:page="pagination.page"
<el-card shadow="never" style="margin-top: 16px">
<el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中">
<el-table-column prop="userId" label="ID" width="70" align="center" />
<el-table-column prop="username" label="账号" width="140" />
<el-table-column label="角色" width="100">
<template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
</el-table-column>
<el-table-column label="库存组" min-width="180">
<template #default="{ row }">
<el-tag v-for="(code, i) in formatInventoryGroups(row)" :key="i" size="small" :type="(code === '未绑定' || code === '不限库存组') ? 'info' : undefined" style="margin-right: 4px; margin-bottom: 2px">{{ code }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="90">
<template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
</el-table-column>
<el-table-column label="创建时间" width="180">
<template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
</el-table-column>
<el-table-column label="更新时间" width="180">
<template #default="{ row }">{{ formatAdminDateTime(row.updatedAt) }}</template>
</el-table-column>
<el-table-column label="操作" min-width="300">
<template #default="{ row }">
<div class="action-stack">
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'admin')">设为管理员</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'operator')">设为运营</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'support')">设为客服</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="toggleStatus(row)">{{ row.status === 'active' ? '停用' : '启用' }}</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="row.role !== 'support'" @click="promptUpdateInventoryGroups(row)">配库存组</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" type="primary" @click="promptResetPassword(row)">重置密码</el-button>
<el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前登录账号</el-tag>
</div>
</template>
</el-table-column>
<template #empty><el-empty :image-size="60" description="暂无用户" /></template>
</el-table>
<el-pagination
v-if="pagination.total > 0"
v-model:current-page="pagination.page"
:page-size="pagination.pageSize"
:total="pagination.total"
:loading="loading"
@change="loadUsers"
layout="total, prev, pager, next"
style="margin-top: 16px; justify-content: center"
@current-change="loadUsers"
/>
</div>
</el-card>
</template>
</section>
</div>
</template>
<style scoped>
.admin-panel {
display: grid;
gap: 16px;
}
.panel-header h1 {
margin: 0;
color: #1d3555;
}
.panel-header p {
margin: 8px 0 0;
color: #64748b;
}
.form-card,
.table-card,
.empty-block,
.error-copy {
padding: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(86, 108, 138, 0.1);
}
.error-copy {
color: #b42318;
}
.form-row {
display: flex;
gap: 12px;
align-items: center;
}
.form-row-top {
margin-top: 12px;
}
.text-input {
width: 100%;
min-height: 42px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(86, 108, 138, 0.18);
background: rgba(255, 255, 255, 0.94);
}
.select-input {
appearance: none;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: 12px 10px;
text-align: left;
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
color: #334155;
vertical-align: top;
}
.data-table th {
color: #64748b;
font-size: 13px;
}
.action-stack {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.group-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.group-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(37, 89, 167, 0.08);
border: 1px solid rgba(37, 89, 167, 0.12);
color: #2559a7;
font-size: 12px;
font-weight: 700;
}
.group-chip--muted {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.18);
color: #64748b;
}
.self-copy {
color: #64748b;
font-size: 12px;
line-height: 30px;
}
.users-page { display: grid; gap: 0; }
.filter-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.action-stack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
</style>