feat: 优化web
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import type { MenuNode } from '@/lib/api/types/menu';
|
||||
|
||||
function MenuNodes({ nodes, depth }: { nodes: MenuNode[]; depth: number }) {
|
||||
return (
|
||||
<ul className={depth === 0 ? 'space-y-1' : 'ml-4 mt-1 space-y-1 border-l border-neutral-200 pl-3'}>
|
||||
{nodes.map((n) => (
|
||||
<li key={n.id} className="text-sm">
|
||||
<span className="font-medium text-neutral-800">{n.menu_name}</span>
|
||||
{n.path ? (
|
||||
<span className="ml-2 font-mono text-xs text-neutral-500">{n.path}</span>
|
||||
) : null}
|
||||
{n.perms ? (
|
||||
<span className="ml-2 text-xs text-neutral-400">[{n.perms}]</span>
|
||||
) : null}
|
||||
{n.children?.length ? <MenuNodes nodes={n.children} depth={depth + 1} /> : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export function MenuTreeView(props: { tree: MenuNode[] }) {
|
||||
if (!props.tree.length) {
|
||||
return <p className="text-sm text-neutral-500">暂无数据</p>;
|
||||
}
|
||||
return <MenuNodes nodes={props.tree} depth={0} />;
|
||||
}
|
||||
Reference in New Issue
Block a user