align(account·像素复刻): 用户管理/菜单权限配置/分组管理 三页自绘复刻旧版(panel-users/columns/group-manage)——原生表格+btn-sm行操作+原生confirm删除+旧式分页(菜单/分组全量无分页同旧版)+分组摘要chips；创建/编辑/菜单树弹窗保留现有组件
This commit is contained in:
@@ -1,11 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { formatDateTime } from '@/utils/datetime'
|
||||
/** 分组管理页 · 像素复刻旧版 admin.html panel-group-manage（自绘：顶部数据权限分组摘要 chips + 分组列表表格 + 新建分组；全量无分页同旧版）。
|
||||
* script 逻辑沿用现有 Vue 实现；编辑器保留现有组件。 */
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||
import { openAdminConfirm } from '@/components/admin-confirm'
|
||||
import { deleteShopGroup, fetchShopGroups } from './shop-group-api'
|
||||
import { shopGroupSummary, type ShopGroupItem } from './shop-group-model'
|
||||
import { dedupeGroupSummaryOf } from '@/pages/asin/dedupe-total-model'
|
||||
import GroupEditorDialog from './GroupEditorDialog.vue'
|
||||
|
||||
const session = useAdminSessionStore()
|
||||
@@ -16,20 +19,14 @@ const editingGroup = ref<ShopGroupItem | null>(null)
|
||||
const summary = computed(() => shopGroupSummary(rows.value))
|
||||
const isSuperAdmin = computed(() => session.isSuperAdmin)
|
||||
const currentUserId = computed(() => session.user?.id ?? null)
|
||||
// 客户端分页：全量拉取后按页切片展示。
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = computed(() => rows.value.length)
|
||||
const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
|
||||
|
||||
function changePage(p: number) {
|
||||
page.value = p
|
||||
}
|
||||
|
||||
function changeSize(size: number) {
|
||||
pageSize.value = size
|
||||
page.value = 1
|
||||
}
|
||||
/** 顶部摘要 chips（对齐 admin.js renderShopManageGroupSummary；与去重汇总同构）。 */
|
||||
const groupChips = computed(() =>
|
||||
dedupeGroupSummaryOf(
|
||||
rows.value.map((g) => ({ id: g.id, name: g.name, leaderUserId: g.leaderUserId })),
|
||||
currentUserId.value,
|
||||
session.user?.role || '',
|
||||
),
|
||||
)
|
||||
|
||||
function canEditOf(group: ShopGroupItem): boolean {
|
||||
if (isSuperAdmin.value) return true
|
||||
@@ -74,64 +71,82 @@ onMounted(loadGroups)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>数据权限分组</h2>
|
||||
<p>管理店铺数据访问分组和组员范围。组长不可更改，组员为普通账号。</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="12" style="margin-bottom: 12px">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
<div class="stat-block">
|
||||
<span class="stat-label">分组总数</span>
|
||||
<span class="stat-value">{{ summary.groupCount }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
<div class="stat-block">
|
||||
<span class="stat-label">组员总数</span>
|
||||
<span class="stat-value">{{ summary.memberTotal }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="never">
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" @click="openCreate">新建分组</el-button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="pagedRows" stripe>
|
||||
<el-table-column prop="name" label="分组名称" min-width="180" />
|
||||
<el-table-column prop="leaderUsername" label="组长" min-width="170" />
|
||||
<el-table-column prop="memberCount" label="组员数量" min-width="100" />
|
||||
<el-table-column label="组员" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.memberUsernames.length">
|
||||
<el-tag v-for="name in row.memberUsernames" :key="name" size="small" class="member-tag">{{ name }}</el-tag>
|
||||
<div class="groups-view">
|
||||
<section class="form-box">
|
||||
<div class="dedupe-group-access">
|
||||
<div class="dedupe-group-access-main">
|
||||
<span class="dedupe-group-access-title">数据权限分组</span>
|
||||
<div class="dedupe-group-summary">
|
||||
<template v-if="groupChips.kind === 'all'">
|
||||
<span class="dedupe-group-summary-chip">全部分组 · {{ groupChips.count }} 个</span>
|
||||
</template>
|
||||
<span v-else class="member-none">无</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" min-width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="修改时间" min-width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.updatedAt || row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="140" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" :disabled="!canEditOf(row)" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" :disabled="!canEditOf(row)" @click="removeGroup(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<el-pagination background layout="sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :current-page="page" @current-change="changePage" @size-change="changeSize" />
|
||||
<span v-else-if="groupChips.kind === 'none'" class="no-group">未加入分组</span>
|
||||
<template v-else>
|
||||
<span v-for="chip in groupChips.chips" :key="chip.name" class="dedupe-group-summary-chip" :title="chip.name">
|
||||
{{ chip.name }} · {{ chip.relation }}
|
||||
</span>
|
||||
<span v-if="groupChips.extra > 0" class="extra-groups">另 {{ groupChips.extra }} 个</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<section class="panel-box">
|
||||
<div class="groups-head">
|
||||
<h3>分组列表</h3>
|
||||
<button class="btn" type="button" @click="openCreate">新建分组</button>
|
||||
</div>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 58px">序号</th>
|
||||
<th style="width: 16%">分组名称</th>
|
||||
<th style="width: 12%">组长</th>
|
||||
<th style="width: 10%">组员数量</th>
|
||||
<th>组员</th>
|
||||
<th style="width: 16%">创建时间</th>
|
||||
<th style="width: 16%">修改时间</th>
|
||||
<th style="width: 124px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="rows.length">
|
||||
<tr v-for="(group, index) in rows" :key="group.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ group.name }}</td>
|
||||
<td>{{ group.leaderUsername || '-' }}</td>
|
||||
<td>{{ group.memberCount ?? (group.memberUsernames?.length ?? 0) }}</td>
|
||||
<td>
|
||||
<div class="shop-group-members">
|
||||
<span v-for="name in group.memberUsernames" :key="name" class="shop-group-member-chip">{{ name }}</span>
|
||||
<span v-if="!group.memberUsernames.length" class="member-none">无</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ formatDateTime(group.createdAt) }}</td>
|
||||
<td>{{ formatDateTime(group.updatedAt || group.createdAt) }}</td>
|
||||
<td class="ops-cell">
|
||||
<template v-if="canEditOf(group)">
|
||||
<button class="btn btn-sm" type="button" @click="openEdit(group)">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" type="button" @click="removeGroup(group)">删除</button>
|
||||
</template>
|
||||
<span v-else class="member-none">-</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="8" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="8" class="empty-tip">暂无分组</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GroupEditorDialog
|
||||
v-model="editorVisible"
|
||||
:group="editingGroup"
|
||||
@@ -142,29 +157,202 @@ onMounted(loadGroups)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stat-block {
|
||||
/* 像素复刻旧版 admin.html panel-group-manage（蓝白末层）。 */
|
||||
.groups-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 18px;
|
||||
}
|
||||
.stat-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
.form-box,
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.dedupe-group-access {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 0;
|
||||
padding: 0 0 6px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.dedupe-group-access-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dedupe-group-access-title {
|
||||
flex: 0 0 auto;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: #24384d;
|
||||
}
|
||||
.member-tag {
|
||||
margin: 2px 4px 2px 0;
|
||||
}
|
||||
.member-more {
|
||||
font-size: 12px;
|
||||
color: var(--admin-muted);
|
||||
}
|
||||
.member-none {
|
||||
color: var(--admin-muted);
|
||||
.dedupe-group-summary {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
color: #5b6f83;
|
||||
font-size: 13px;
|
||||
}
|
||||
.dedupe-group-summary-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 220px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 6px;
|
||||
background: #f8f9fc;
|
||||
color: #5b6f83;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.no-group,
|
||||
.extra-groups {
|
||||
color: #8293a5;
|
||||
}
|
||||
.groups-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.table-scroll td {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
.shop-group-members {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
max-height: 96px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.shop-group-member-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 150px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
background: #e7f0f8;
|
||||
color: #2f5d8b;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.member-none,
|
||||
.member-more {
|
||||
color: #8293a5;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.ops-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ops-cell .btn + .btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { formatDateTime } from '@/utils/datetime'
|
||||
/** 菜单权限配置页 · 像素复刻旧版 admin.html panel-columns（自绘：面板头+新增菜单、拖拽手柄 ⠿、树形缩进+└、旧式表格、全量无分页同旧版）。
|
||||
* script 逻辑沿用现有 Vue 实现（拖拽分组/落点/重排保存、弹窗表单）。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { createMenu, deleteMenu, loadMenuManageTree, reorderMenus, updateMenu } from './menu-manage-api'
|
||||
@@ -20,22 +22,25 @@ import {
|
||||
type MenuManageNode,
|
||||
} from './menu-manage-model'
|
||||
|
||||
/** 树行视图：展平 + 深度（缩进与 └ 前缀）。 */
|
||||
interface MenuRow extends MenuManageNode {
|
||||
depth: number
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const rows = ref<MenuManageNode[]>([])
|
||||
// 客户端分页：列表展示统一带分页组件。
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = computed(() => rows.value.length)
|
||||
const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
|
||||
|
||||
function changePage(p: number) {
|
||||
page.value = p
|
||||
}
|
||||
|
||||
function changeSize(size: number) {
|
||||
pageSize.value = size
|
||||
page.value = 1
|
||||
}
|
||||
/** 展平视图：前序 + depth。 */
|
||||
const menuRows = computed<MenuRow[]>(() => {
|
||||
const out: MenuRow[] = []
|
||||
const walk = (list: MenuManageNode[], depth: number) => {
|
||||
for (const node of list) {
|
||||
out.push({ ...node, depth })
|
||||
if (node.children?.length) walk(node.children, depth + 1)
|
||||
}
|
||||
}
|
||||
walk(rows.value, 0)
|
||||
return out
|
||||
})
|
||||
const createVisible = ref(false)
|
||||
const saving = ref(false)
|
||||
const editingNode = ref<MenuManageNode | null>(null)
|
||||
@@ -169,15 +174,14 @@ async function removeMenu(node: MenuManageNode) {
|
||||
ElMessage.warning(reason)
|
||||
return
|
||||
}
|
||||
// 对齐旧版：原生 confirm。
|
||||
if (!window.confirm(`确定删除菜单“${node.name}”吗？`)) return
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除菜单“${node.name}”吗？`, '删除确认', { type: 'warning' })
|
||||
await deleteMenu(node.id)
|
||||
ElMessage.success('删除成功')
|
||||
await loadMenus()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') {
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,67 +189,78 @@ onMounted(loadMenus)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>菜单管理</h2>
|
||||
<p>维护后台菜单树和页面路由。权限粒度仅到菜单/页面。</p>
|
||||
<div class="menus-view">
|
||||
<section class="panel-box">
|
||||
<div class="menus-head">
|
||||
<h3>菜单列表</h3>
|
||||
<button class="btn" type="button" @click="openCreate">新增菜单</button>
|
||||
</div>
|
||||
</div>
|
||||
<el-card shadow="never">
|
||||
<p class="menu-drag-tip">拖动每行左侧的手柄可调整同级菜单的显示顺序，松开后自动保存。</p>
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增菜单</el-button>
|
||||
<p class="columns-drag-tip">拖动每行左侧的手柄可调整同级菜单的显示顺序，松开后自动保存。</p>
|
||||
|
||||
<div class="table-scroll columns-table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="column-drag-cell"><span class="visually-hidden">排序</span></th>
|
||||
<th style="width: 60px">ID</th>
|
||||
<th style="width: 200px">菜单名称</th>
|
||||
<th style="width: 100px">菜单类型</th>
|
||||
<th style="width: 120px">上级菜单</th>
|
||||
<th style="width: 170px">创建时间</th>
|
||||
<th style="width: 170px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="menuRows.length">
|
||||
<tr
|
||||
v-for="row in menuRows"
|
||||
:key="row.id"
|
||||
:class="{ 'is-column-dragging': dragState?.id === row.id }"
|
||||
@dragover="onDragOver($event, row)"
|
||||
@drop="onDrop($event, row)"
|
||||
>
|
||||
<td class="column-drag-cell">
|
||||
<span
|
||||
class="column-drag-handle"
|
||||
draggable="true"
|
||||
role="button"
|
||||
:title="`拖动调整“${row.name}”的顺序`"
|
||||
@dragstart="onDragStart($event, row)"
|
||||
@dragend="onDragEnd"
|
||||
>⠿</span>
|
||||
</td>
|
||||
<td>{{ row.id }}</td>
|
||||
<td class="name-cell">
|
||||
<span v-if="row.depth > 0" class="column-child-mark" :style="{ marginLeft: `${row.depth * 16}px` }">└</span>
|
||||
<span class="menu-name-text">{{ row.name }}</span>
|
||||
</td>
|
||||
<td><span class="menu-type-text">{{ menuTypeLabel(row.menuType) }}</span></td>
|
||||
<td>{{ parentNameOf(row) }}</td>
|
||||
<td>{{ formatDateTime(row.createdAt) }}</td>
|
||||
<td class="ops-cell">
|
||||
<button class="btn btn-sm" type="button" @click="openEdit(row)">编辑</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger"
|
||||
type="button"
|
||||
:disabled="menuDeleteReason(row) !== undefined"
|
||||
:title="menuDeleteReason(row) || undefined"
|
||||
@click="removeMenu(row)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="7" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="7" class="empty-tip">暂无菜单，请先在上方新增</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="pagedRows" row-key="id" default-expand-all stripe>
|
||||
<el-table-column label="排序" min-width="64">
|
||||
<template #default="{ row }">
|
||||
<span
|
||||
class="menu-drag-handle"
|
||||
draggable="true"
|
||||
role="button"
|
||||
:title="`拖动调整“${(row as MenuManageNode).name}”的顺序`"
|
||||
@dragstart="onDragStart($event, row as MenuManageNode)"
|
||||
@dragend="onDragEnd"
|
||||
@dragover="onDragOver($event, row as MenuManageNode)"
|
||||
@drop="onDrop($event, row as MenuManageNode)"
|
||||
>⠿</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="菜单名称" min-width="180" />
|
||||
<el-table-column label="菜单类型" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="(row as MenuManageNode).menuType === 'app' ? 'info' : 'primary'">{{ menuTypeLabel((row as MenuManageNode).menuType) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="上级菜单" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ parentNameOf(row as MenuManageNode) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" min-width="150">
|
||||
<template #default="{ row }">{{ formatDateTime((row as MenuManageNode).createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" @click="openEdit(row as MenuManageNode)">编辑</el-button>
|
||||
<el-button size="small" type="danger" :disabled="menuDeleteReason(row as MenuManageNode) !== undefined" @click="removeMenu(row as MenuManageNode)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<el-pagination
|
||||
background
|
||||
layout="sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:current-page="page"
|
||||
@current-change="changePage"
|
||||
@size-change="changeSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="createVisible" :title="dialogTitle" width="520px">
|
||||
<el-form label-width="96px">
|
||||
@@ -280,26 +295,177 @@ onMounted(loadMenus)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.menu-drag-tip {
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
/* 像素复刻旧版 admin.html panel-columns（蓝白末层）。 */
|
||||
.menus-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
}
|
||||
.menu-drag-handle {
|
||||
display: inline-block;
|
||||
cursor: grab;
|
||||
color: var(--el-text-color-secondary);
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.menus-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.columns-drag-tip {
|
||||
margin: 10px 0 16px;
|
||||
font-size: 13px;
|
||||
color: #5b6f83;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.columns-table-scroll > table {
|
||||
min-width: 860px;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.column-drag-cell {
|
||||
width: 48px;
|
||||
}
|
||||
.column-drag-handle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
background: none;
|
||||
color: #93a6b8;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
.menu-drag-handle:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-primary);
|
||||
.column-drag-handle:hover {
|
||||
border-color: #cbd9e6;
|
||||
background: #eef4fa;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.menu-drag-handle:active {
|
||||
.column-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
tr.is-column-dragging td {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.column-child-mark {
|
||||
margin-right: 6px;
|
||||
color: #9fb1c2;
|
||||
}
|
||||
.menu-name-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
.menu-type-text {
|
||||
color: #5b6f83;
|
||||
}
|
||||
.ops-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ops-cell .btn + .btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { formatDateTime } from '@/utils/datetime'
|
||||
/** 用户管理页 · 像素复刻旧版 admin.html panel-users（自绘：panel-box + 页头按钮 + 筛选 form-row + 旧式表格/分页 + 原生 confirm 删除）。
|
||||
* script 逻辑沿用现有 Vue 实现；创建/编辑弹窗保留现有组件（含用户菜单权限树）。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { AdminUser } from '@/types/admin'
|
||||
import { roleLabel } from '@/types/admin'
|
||||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||
@@ -25,6 +27,8 @@ const filters = reactive<UserFilterState>(createUserFilterState())
|
||||
const isSuperAdmin = computed(() => session.isSuperAdmin)
|
||||
const currentUserId = computed(() => session.user?.id ?? null)
|
||||
const statePhase = computed(() => listPhaseOf({ loading: loading.value, error: loadError.value, items: rows.value, total: total.value }))
|
||||
const jumpPage = ref('')
|
||||
const totalPages = computed(() => Math.max(1, totalPageCount(total.value, filters.pageSize)))
|
||||
|
||||
const createVisible = ref(false)
|
||||
const editVisible = ref(false)
|
||||
@@ -85,17 +89,14 @@ async function removeUser(row: AdminUser) {
|
||||
ElMessage.warning(reason)
|
||||
return
|
||||
}
|
||||
// 对齐旧版：浏览器原生 confirm 确认后删除。
|
||||
if (!window.confirm(deleteConfirmMessage(row))) return
|
||||
try {
|
||||
await ElMessageBox.confirm(deleteConfirmMessage(row), '删除用户', {
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
await deleteUser(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,106 +111,373 @@ function changeSize(size: number) {
|
||||
void loadUsers()
|
||||
}
|
||||
|
||||
function goJump() {
|
||||
const n = Number.parseInt(jumpPage.value, 10)
|
||||
if (Number.isNaN(n)) {
|
||||
ElMessage.warning('请输入页码')
|
||||
return
|
||||
}
|
||||
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||||
}
|
||||
|
||||
onMounted(loadUsers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>用户管理</h2>
|
||||
<p>当前没有开放注册入口，仅管理员可在此创建用户。层级关系：超级管理员 -> 管理员 -> 普通账号。</p>
|
||||
<div class="users-view">
|
||||
<section class="panel-box">
|
||||
<div class="users-head">
|
||||
<h3>用户列表</h3>
|
||||
<button class="btn" type="button" @click="openCreate">新建用户</button>
|
||||
</div>
|
||||
</div>
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<el-form inline @submit.prevent="search">
|
||||
<el-form-item label="用户名（模糊搜索）">
|
||||
<el-input v-model="filters.keyword" clearable placeholder="输入用户名关键字" @keyup.enter="search" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isSuperAdmin" label="所属管理员">
|
||||
<el-select
|
||||
v-model="filters.createdByAdminId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="全部"
|
||||
style="width: 200px"
|
||||
@change="search"
|
||||
>
|
||||
<el-option
|
||||
v-for="admin in admins"
|
||||
:key="admin.id"
|
||||
:label="admin.username"
|
||||
:value="admin.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<el-alert
|
||||
v-if="statePhase === 'error' && loadError"
|
||||
:title="loadError"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
<template #default>
|
||||
<el-button link type="primary" @click="retry">重试</el-button>
|
||||
</template>
|
||||
</el-alert>
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" @click="openCreate">新建用户</el-button>
|
||||
<p class="users-desc">当前没有开放注册入口，仅管理员可在此创建用户。层级关系：超级管理员 -> 管理员 -> 普通账号。</p>
|
||||
|
||||
<div class="form-row users-filter-row">
|
||||
<div class="form-group" style="min-width: 180px">
|
||||
<label>用户名（模糊搜索）</label>
|
||||
<input v-model="filters.keyword" type="text" placeholder="输入用户名关键字" @keyup.enter="search" />
|
||||
</div>
|
||||
<div v-if="isSuperAdmin" class="form-group" style="min-width: 160px">
|
||||
<label>所属管理员</label>
|
||||
<select v-model="filters.createdByAdminId">
|
||||
<option value="">全部</option>
|
||||
<option v-for="admin in admins" :key="admin.id" :value="admin.id">{{ admin.username }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn" type="button" @click="search">查询</button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="rows" stripe :empty-text="userListEmptyHint()">
|
||||
<el-table-column prop="username" label="用户名" min-width="180" />
|
||||
<el-table-column label="角色" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<span>{{ roleLabel(row.role) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="creatorUsername" label="所属管理员" min-width="160" />
|
||||
<el-table-column prop="createdAt" label="创建时间" min-width="180">
|
||||
<template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" :disabled="!editableOf(row)" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
:disabled="deleteBlockReason(row, currentUserId) !== undefined"
|
||||
@click="removeUser(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<span>共 {{ total }} 条</span>
|
||||
<el-pagination
|
||||
background
|
||||
layout="sizes, prev, pager, next, jumper"
|
||||
:page-size="filters.pageSize"
|
||||
:current-page="filters.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="changePage"
|
||||
@size-change="changeSize"
|
||||
/>
|
||||
|
||||
<div v-if="statePhase === 'error' && loadError" class="msg err">
|
||||
<span>加载失败: {{ loadError }}</span>
|
||||
<button class="btn btn-sm btn-secondary" type="button" @click="retry">重试</button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="table-scroll user-table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 70px">ID</th>
|
||||
<th style="width: 180px">用户名</th>
|
||||
<th style="width: 140px">角色</th>
|
||||
<th style="width: 160px">所属管理员</th>
|
||||
<th style="width: 180px">创建时间</th>
|
||||
<th style="width: 160px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="rows.length">
|
||||
<tr v-for="row in rows" :key="row.id">
|
||||
<td>{{ row.id }}</td>
|
||||
<td>{{ row.username }}</td>
|
||||
<td>{{ roleLabel(row.role) }}</td>
|
||||
<td>{{ row.creatorUsername || '-' }}</td>
|
||||
<td>{{ formatDateTime(row.createdAt) }}</td>
|
||||
<td class="ops-cell">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
type="button"
|
||||
:disabled="!editableOf(row)"
|
||||
:title="!editableOf(row) ? '该账号不可编辑' : undefined"
|
||||
@click="openEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger"
|
||||
type="button"
|
||||
:disabled="deleteBlockReason(row, currentUserId) !== undefined"
|
||||
:title="deleteBlockReason(row, currentUserId) || undefined"
|
||||
@click="removeUser(row)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="6" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="6" class="empty-tip">{{ userListEmptyHint() }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<span class="page-total">共 {{ total }} 条</span>
|
||||
<select v-model="filters.pageSize" class="page-size-select" @change="changeSize(Number(filters.pageSize))">
|
||||
<option :value="10">10条/页</option>
|
||||
<option :value="20">20条/页</option>
|
||||
<option :value="50">50条/页</option>
|
||||
<option :value="100">100条/页</option>
|
||||
</select>
|
||||
<button type="button" :disabled="filters.page <= 1" @click="changePage(filters.page - 1)">上一页</button>
|
||||
<span class="page-cur">第 {{ filters.page }} / {{ totalPages }} 页</span>
|
||||
<button type="button" :disabled="filters.page >= totalPages" @click="changePage(filters.page + 1)">下一页</button>
|
||||
<span class="page-jump">
|
||||
跳至
|
||||
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||||
页
|
||||
<button type="button" @click="goJump">跳转</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CreateUserDialog v-model="createVisible" :operator-super="isSuperAdmin" :admin-options="admins" @created="loadUsers" />
|
||||
<EditUserDialog v-model="editVisible" :user="editUser" :operator-super="isSuperAdmin" @updated="loadUsers" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.filter-card :deep(.el-form-item) {
|
||||
/* 像素复刻旧版 admin.html panel-users（蓝白末层）。 */
|
||||
.users-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
}
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.users-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.users-desc {
|
||||
margin: 10px 0 16px;
|
||||
font-size: 13px;
|
||||
color: #5b6f83;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 14px 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-group label {
|
||||
color: #5b6f83;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 9px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13.5px;
|
||||
font-family: inherit;
|
||||
color-scheme: light;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
.form-group input:hover,
|
||||
.form-group select:hover {
|
||||
border-color: #9fb7cd;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
background: #ffffff;
|
||||
border-color: #5f85ad;
|
||||
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
border-color: #c7d7e5;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
color: #2f5d8b;
|
||||
border-color: #95b1cb;
|
||||
background: #edf5fb;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid;
|
||||
border-radius: 9px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.msg.err {
|
||||
color: #91474f;
|
||||
background: #f8ebeb;
|
||||
border-color: #e4c2c5;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.user-table-scroll > table {
|
||||
min-width: 860px;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.ops-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ops-cell .btn + .btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
color: #5b6f83;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pagination button {
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #c7d7e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: #edf5fb;
|
||||
border-color: #95b1cb;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.pagination button:disabled {
|
||||
background: #eef3f7;
|
||||
color: #9baaba;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-size-select {
|
||||
min-height: 30px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 8px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.page-total {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.page-jump {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.page-jump input {
|
||||
width: 56px;
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 8px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,20 +10,25 @@ function assertRowButtonSolid(source: string, action: string) {
|
||||
assert.doesNotMatch(source, new RegExp(`<el-button[^>]*text[^>]*@click="${action}`), `${action} 不再 text`)
|
||||
}
|
||||
|
||||
test('align_users_row_buttons_solid', () => {
|
||||
test('align_users_row_buttons_old_btn', () => {
|
||||
const s = readSource('src/pages/account/UsersPage.vue')
|
||||
assertRowButtonSolid(s, 'openEdit')
|
||||
assertRowButtonSolid(s, 'removeUser')
|
||||
assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
|
||||
assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeUser\(row\)"/, '删除用旧版 btn-sm btn-danger')
|
||||
assert.doesNotMatch(s, /el-button/, '用户页已自绘，无 EP 按钮')
|
||||
assert.match(s, /window\.confirm\(deleteConfirmMessage\(row\)\)/, '删除确认走原生 confirm 对齐旧版')
|
||||
})
|
||||
|
||||
test('align_groups_row_buttons_solid', () => {
|
||||
test('align_groups_row_buttons_old_btn', () => {
|
||||
const s = readSource('src/pages/account/GroupsPage.vue')
|
||||
assertRowButtonSolid(s, 'openEdit')
|
||||
assertRowButtonSolid(s, 'removeGroup')
|
||||
assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(group\)"/, '编辑用旧版 btn-sm 实心小按钮')
|
||||
assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeGroup\(group\)"/, '删除用旧版 btn-sm btn-danger')
|
||||
assert.doesNotMatch(s, /el-button[^>]*@click="openEdit/, '行内不再用 EP 按钮')
|
||||
})
|
||||
|
||||
test('align_menus_row_buttons_solid', () => {
|
||||
test('align_menus_row_buttons_old_btn', () => {
|
||||
const s = readSource('src/pages/account/MenusPage.vue')
|
||||
assertRowButtonSolid(s, 'openEdit')
|
||||
assertRowButtonSolid(s, 'removeMenu')
|
||||
assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
|
||||
assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeMenu\(row\)"/, '删除用旧版 btn-sm btn-danger')
|
||||
assert.doesNotMatch(s, /el-button[^>]*@click="openEdit/, '行内不再用 EP 按钮')
|
||||
assert.match(s, /window\.confirm\(`确定删除菜单/, '删除确认走原生 confirm 对齐旧版')
|
||||
})
|
||||
|
||||
@@ -7,9 +7,6 @@ import { readSource } from './helpers.ts'
|
||||
// 例外：DuplicateCheckPage 不动；dialog/表单的 width 不属于表格列。
|
||||
|
||||
const PAGES = [
|
||||
'src/pages/account/GroupsPage.vue',
|
||||
'src/pages/account/MenusPage.vue',
|
||||
'src/pages/account/UsersPage.vue',
|
||||
'src/pages/asin/AsinInvalidPage.vue',
|
||||
'src/pages/asin/ProductCategoryPage.vue',
|
||||
'src/pages/asin/QueryAsinPage.vue',
|
||||
@@ -56,6 +53,15 @@ test('align_column_width_boundary_empty_input', () => {
|
||||
const dedupe = readSource('src/pages/asin/DedupeRegistryPage.vue')
|
||||
assert.equal(/el-table-column/.test(dedupe), false, '去重汇总已像素复刻 admin panel-dedupe-total-data 原生表格，不再有 el-table-column')
|
||||
assert.match(dedupe, /class="table-scroll dedupe-table-scroll"/, '去重汇总用原生 .table-scroll 表格')
|
||||
const users = readSource('src/pages/account/UsersPage.vue')
|
||||
assert.equal(/el-table-column/.test(users), false, '用户管理已像素复刻 admin panel-users 原生表格，不再有 el-table-column')
|
||||
assert.match(users, /class="table-scroll user-table-scroll"/, '用户管理用原生 .table-scroll 表格')
|
||||
const menus = readSource('src/pages/account/MenusPage.vue')
|
||||
assert.equal(/el-table-column/.test(menus), false, '菜单配置已像素复刻 admin panel-columns 原生表格，不再有 el-table-column')
|
||||
assert.match(menus, /class="table-scroll columns-table-scroll"/, '菜单配置用原生 .table-scroll 表格')
|
||||
const groups = readSource('src/pages/account/GroupsPage.vue')
|
||||
assert.equal(/el-table-column/.test(groups), false, '分组管理已像素复刻 admin panel-group-manage 原生表格，不再有 el-table-column')
|
||||
assert.match(groups, /class="table-scroll"/, '分组管理用原生 .table-scroll 表格')
|
||||
})
|
||||
|
||||
test('align_column_width_dependency_failure_returns_actionable_message', () => {
|
||||
|
||||
@@ -7,8 +7,8 @@ import { readSource } from './helpers.ts'
|
||||
// 菜单管理是树结构（非列表），商品类目树用懒加载+加载更多节点，均豁免。
|
||||
|
||||
test('align_pagination_normal_primary_path', () => {
|
||||
// 分组管理已像素复刻旧版(panel-group-manage 无分页)，豁免；其余列表保留分页。
|
||||
for (const page of [
|
||||
'src/pages/account/GroupsPage.vue',
|
||||
'src/pages/records/RecordsSoftwareVersionPage.vue',
|
||||
'src/pages/asin/ProductCategoryPage.vue',
|
||||
]) {
|
||||
@@ -20,7 +20,6 @@ test('align_pagination_normal_primary_path', () => {
|
||||
test('align_pagination_normal_variant_input', () => {
|
||||
// 分页组件需含上一页/下一页（prev/next），中文文案由全局 zh-cn locale 渲染。
|
||||
for (const page of [
|
||||
'src/pages/account/GroupsPage.vue',
|
||||
'src/pages/records/RecordsSoftwareVersionPage.vue',
|
||||
'src/pages/asin/ProductCategoryPage.vue',
|
||||
]) {
|
||||
@@ -30,8 +29,8 @@ test('align_pagination_normal_variant_input', () => {
|
||||
})
|
||||
|
||||
test('align_pagination_boundary_empty_input', () => {
|
||||
// 分组/软件版本为全量拉取，走客户端切片分页（computed 按 page/pageSize 切）。
|
||||
for (const page of ['src/pages/account/GroupsPage.vue', 'src/pages/records/RecordsSoftwareVersionPage.vue']) {
|
||||
// 软件版本为全量拉取，走客户端切片分页（computed 按 page/pageSize 切）。
|
||||
for (const page of ['src/pages/records/RecordsSoftwareVersionPage.vue']) {
|
||||
const src = readSource(page)
|
||||
assert.match(src, /pagedRows|pageRows|pageItems|pagedItems/, `${page} 应有客户端分页切片`)
|
||||
assert.match(src, /:data="paged/, `${page} 表格应绑定分页后的数据`)
|
||||
@@ -46,13 +45,18 @@ test('align_pagination_boundary_single_item', () => {
|
||||
})
|
||||
|
||||
test('align_pagination_repeated_operation_is_idempotent', () => {
|
||||
// 已有分页的页面（12 页）保持原样，不被破坏。
|
||||
// 已有分页的页面保持原样，不被破坏；已像素复刻(自绘旧式分页)的页单独断言。
|
||||
for (const page of [
|
||||
'src/pages/account/UsersPage.vue',
|
||||
'src/pages/asin/AsinInvalidPage.vue',
|
||||
'src/pages/shop/ShopManagePage.vue',
|
||||
]) {
|
||||
const src = readSource(page)
|
||||
assert.match(src, /el-pagination/, `${page} 既有分页保留`)
|
||||
}
|
||||
const users = readSource('src/pages/account/UsersPage.vue')
|
||||
assert.match(users, /class="pagination"/, '用户页已像素复刻，用旧式分页容器')
|
||||
assert.doesNotMatch(users, /el-pagination/, '用户页不再用 EP 分页')
|
||||
const groups = readSource('src/pages/account/GroupsPage.vue')
|
||||
assert.doesNotMatch(groups, /el-pagination/, '分组管理已像素复刻旧版(panel-group-manage 无分页)')
|
||||
assert.doesNotMatch(groups, /pagedRows/, '分组管理全量渲染无客户端切片')
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user