s.esmaeili/hedena_gold
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin panel beter ui

Browse Source
This commit is contained in:
s.esmaeili
2026-09-19 12:05:59 +03:30
parent 80ccf1a2aa
commit 81987ceae8
196 changed files with 565 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-panel/src/layouts/components/VerticalNavMenu.vue
+48 -47
View File
@@ -33,45 +33,20 @@
<template v-for="(node, i) in visibleMenu" :key="node.url || node.header || i">
<!-- header node: a section divider carrying `items` (ant has no icon
slot on a menu-item-group; it's a label-only divider, so its
children still carry their own icons below). -->
children still carry their own icons below). Each child renders
through NavMenuNode, which recurses into however many submenu
levels it has. -->
<a-menu-item-group v-if="node.header" :title="node.i18n || node.header">
<template v-for="(child, j) in visibleChildren(node.items)" :key="child.url || j">
<a-sub-menu v-if="child.submenu" :key="subKey(child, j)">
<template #icon><component :is="resolveIcon(child.icon)" v-if="child.icon" /></template>
<template #title>{{ child.i18n || child.name }}</template>
<a-menu-item
v-for="(leaf, k) in visibleChildren(child.submenu)"
:key="leaf.url || `${j}-${k}`"
>
<template #icon><component :is="resolveIcon(leaf.icon)" v-if="leaf.icon" /></template>
{{ leaf.i18n || leaf.name }}
</a-menu-item>
</a-sub-menu>
<a-menu-item v-else :key="child.url || `${j}`">
<template #icon><component :is="resolveIcon(child.icon)" v-if="child.icon" /></template>
{{ child.i18n || child.name }}
</a-menu-item>
</template>
<NavMenuNode
v-for="(child, j) in visibleChildren(node.items)"
:key="child.url || `${i}-${j}`"
:node="child"
:menu-key="child.url || subKey(child, j)"
/>
</a-menu-item-group>
<!-- group node -->
<a-sub-menu v-else-if="node.submenu" :key="subKey(node, i)">
<template #icon><component :is="resolveIcon(node.icon)" v-if="node.icon" /></template>
<template #title>{{ node.i18n || node.name }}</template>
<a-menu-item
v-for="(leaf, k) in visibleChildren(node.submenu)"
:key="leaf.url || `${i}-${k}`"
>
<template #icon><component :is="resolveIcon(leaf.icon)" v-if="leaf.icon" /></template>
{{ leaf.i18n || leaf.name }}
</a-menu-item>
</a-sub-menu>
<!-- leaf node -->
<a-menu-item v-else :key="node.url || `${i}`">
<template #icon><component :is="resolveIcon(node.icon)" v-if="node.icon" /></template>
{{ node.i18n || node.name }}
</a-menu-item>
<!-- group / leaf node -->
<NavMenuNode v-else :node="node" :menu-key="node.url || subKey(node, i)" />
</template>
</a-menu>
</a-layout-sider>
@@ -80,9 +55,10 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getMenu, type NavMenuNode } from '../navMenuItems';
import { getMenu, type NavMenuNode as NavMenuNodeData } from '../navMenuItems';
import { useUsersStore } from '../../stores/users';
import { resolveIcon } from '../../components/icons';
import NavMenuNode from './NavMenuNode.vue';
withDefaults(defineProps<{ title?: string; collapsed?: boolean }>(), {
title: 'منتزر',
@@ -101,17 +77,17 @@ const users = useUsersStore();
* items (whose permissionId is commented out in the legacy data) show for everyone.
* Preserved deliberately — see docs/ADMIN-PORT-PLAN.md.
*/
function canSee(node: NavMenuNode): boolean {
function canSee(node: NavMenuNodeData): boolean {
if (!node.permissionId) return true;
return Boolean(users.hasPermission(node.permissionId));
}
function visibleChildren(nodes?: NavMenuNode[]): NavMenuNode[] {
function visibleChildren(nodes?: NavMenuNodeData[]): NavMenuNodeData[] {
return (nodes ?? []).filter(canSee);
}
/** Hides a group whose children are all hidden, as legacy did. */
function hasVisibleContent(node: NavMenuNode): boolean {
function hasVisibleContent(node: NavMenuNodeData): boolean {
if (node.header) return visibleChildren(node.items).length > 0;
if (node.submenu) return visibleChildren(node.submenu).length > 0;
return true;
@@ -121,7 +97,28 @@ const visibleMenu = computed(() =>
getMenu().filter((n) => canSee(n) && hasVisibleContent(n)),
);
const subKey = (node: NavMenuNode, i: number) => `sub-${node.name ?? ''}-${i}`;
const subKey = (node: NavMenuNodeData, i: number) => `sub-${node.name ?? ''}-${i}`;
/**
* Finds the chain of sub-menu keys that must be open so the current route's
* menu item is visible, at any nesting depth. Mirrors the key each
* NavMenuNode instance is actually given (node.url, or menuKey-derived for
* url-less group nodes), so a match here really is a key ant's a-menu knows
* about.
*/
function findOpenKeysIn(nodes: NavMenuNodeData[], path: string, parentKey: string): string[] | null {
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
const key = node.url || `${parentKey}-${i}`;
if (!node.submenu) {
if (node.url === path) return [];
continue;
}
const nested = findOpenKeysIn(visibleChildren(node.submenu), path, key);
if (nested) return [key, ...nested];
}
return null;
}
/**
* Finds the sub-menu key(s) that must be open so the current route's menu
@@ -137,15 +134,18 @@ function findOpenKeysFor(path: string): string[] {
const children = visibleChildren(node.items);
for (let j = 0; j < children.length; j++) {
const child = children[j];
if (child.submenu && visibleChildren(child.submenu).some((leaf) => leaf.url === path)) {
return [subKey(child, j)];
}
if (!child.submenu) continue;
const childKey = child.url || subKey(child, j);
const nested = findOpenKeysIn(visibleChildren(child.submenu), path, childKey);
if (nested) return [childKey, ...nested];
}
continue;
}
if (node.submenu && visibleChildren(node.submenu).some((leaf) => leaf.url === path)) {
return [subKey(node, i)];
if (node.submenu) {
const nodeKey = node.url || subKey(node, i);
const nested = findOpenKeysIn(visibleChildren(node.submenu), path, nodeKey);
if (nested) return [nodeKey, ...nested];
}
}
return [];
@@ -175,7 +175,8 @@ function onClick({ key }: { key: string | number }) {
<style scoped>
.vertical-nav-menu {
min-height: 100vh;
height: 100vh;
overflow-y: auto; /* pinned in place; its own menu scrolls if it's taller than the viewport */
border-left: 1px solid #f0f0f0;
}
.nav-header {