super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(需求): ①用户创建/编辑菜单权限按「后台/桌面端」一级分组展示(双树分区勾选合并) ②全站表格操作列编辑/删除横向对齐(ops-cell 统一 flex+gap 8px)

Browse Source
This commit is contained in:
黄自达
2026-09-06 23:34:45 +08:00
parent 4a9ddcab64
commit 970affec95
10 changed files with 95 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-frontend-vue/src/pages/account/GroupsPage.vue
+4 -3
View File
@@ -338,11 +338,12 @@ h3 {
font-size: 12.5px;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/account/MenusPage.vue
+4 -3
View File
@@ -517,11 +517,12 @@ tr.is-column-dragging td {
color: #5b6f83;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/account/UserMenuAuthTree.vue
+54 -11
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import type { MenuOptionNode } from './user-menu-auth'
import { fetchGrantableMenus } from './user-menu-auth-api'
@@ -11,22 +11,27 @@ const emit = defineEmits<{
/** 仅暴露 el-tree 我们需要的两个方法，避免整组件类型耦合。 */
type TreeRef = { setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown }
const tree = ref<{ setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown } | null>(null)
const adminTree = ref<{ setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown } | null>(null)
const appTree = ref<{ setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown } | null>(null)
const data = ref<MenuOptionNode[]>([])
const loaded = ref(false)
/** 两种一级分类…（与 API menuType 分区一致）：后台(admin) / 桌面端(app)。 */
const adminNodes = computed(() => data.value.filter((node) => node.type === 'admin'))
const appNodes = computed(() => data.value.filter((node) => node.type === 'app'))
function applyChecked(): void {
const el: TreeRef | null = tree.value
if (!el) return
const ids = Array.isArray(props.checked) ? props.checked.filter((id) => typeof id === 'number' && id > 0) : []
el.setCheckedKeys(ids)
adminTree.value?.setCheckedKeys(ids)
appTree.value?.setCheckedKeys(ids)
}
function onCheck(): void {
const el: TreeRef | null = tree.value
if (!el) return
const keys = el.getCheckedKeys()
const ids = (Array.isArray(keys) ? keys : []).map((key) => Number(key)).filter((id) => id > 0)
const collect = (el: { getCheckedKeys(): unknown } | null): number[] => {
const keys = el ? el.getCheckedKeys() : []
return (Array.isArray(keys) ? keys : []).map((key) => Number(key)).filter((id) => id > 0)
}
const ids = [...collect(adminTree.value), ...collect(appTree.value)]
emit('update:checked', ids)
}
@@ -53,9 +58,12 @@ watch(
<template>
<el-scrollbar max-height="300px" class="user-menu-tree-scroll">
<template v-if="adminNodes.length || appNodes.length">
<div v-if="adminNodes.length" class="menu-group-block">
<div class="menu-group-title">后台</div>
<el-tree
ref="tree"
:data="data"
ref="adminTree"
:data="adminNodes"
node-key="id"
show-checkbox
check-strictly
@@ -63,5 +71,40 @@ watch(
:props="{ label: 'name', children: 'children' }"
@check="onCheck"
/>
</div>
<div v-if="appNodes.length" class="menu-group-block">
<div class="menu-group-title">桌面端</div>
<el-tree
ref="appTree"
:data="appNodes"
node-key="id"
show-checkbox
check-strictly
default-expand-all
:props="{ label: 'name', children: 'children' }"
@check="onCheck"
/>
</div>
</template>
<p v-else class="menu-group-empty">暂无可用菜单</p>
</el-scrollbar>
</template>
<style scoped>
.menu-group-block + .menu-group-block {
margin-top: 10px;
}
.menu-group-title {
padding: 4px 0 6px;
font-size: 12.5px;
font-weight: 650;
color: #40586e;
border-bottom: 1px solid #e6edf4;
margin-bottom: 4px;
}
.menu-group-empty {
margin: 12px 0;
color: #8293a5;
font-size: 13px;
}
</style>
admin-frontend-vue/src/pages/account/UsersPage.vue
+4 -3
View File
@@ -410,11 +410,12 @@ h3 {
border-bottom: 0;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
+4 -3
View File
@@ -430,11 +430,12 @@ h3 {
color: #2f5d8b;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
+1 -3
View File
@@ -661,9 +661,7 @@ h3 {
white-space: nowrap;
text-align: right;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
+4 -3
View File
@@ -677,11 +677,12 @@ h3 {
color: #8293a5;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.load-more-row td {
background: #fbfdfe;
}
admin-frontend-vue/src/pages/records/RecordsDigitalHumanVersionPage.vue
+4 -3
View File
@@ -449,11 +449,12 @@ h3 {
text-overflow: ellipsis;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
+4 -3
View File
@@ -441,11 +441,12 @@ h3 {
border-color: #d6e2ec;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;
admin-frontend-vue/src/pages/shop/ShopManagePage.vue
+4 -3
View File
@@ -505,11 +505,12 @@ h3 {
font-size: 12px;
}
.ops-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ops-cell .btn + .btn {
margin-left: 8px;
}
.empty-tip {
padding: 44px 24px;
text-align: center;