'use client';

import React from 'react';
import { Card } from '@/components/ui/card';

export function MenuManagementInstructions() {
  return (
    <Card className="p-4 bg-blue-50 border-blue-200">
      <h4 className="text-blue-900 mb-2">菜单管理功能说明</h4>
      <ul className="space-y-1 text-sm text-blue-800">
        <li>• 支持三级菜单树形结构管理（一级目录 → 二级目录 → 三级菜单）</li>
        <li>• 目录类型可以包含子菜单，菜单类型为具体页面，按钮类型为页面内的操作权限</li>
        <li>• 菜单编码用于权限控制，建议使用冒号分隔的层级结构，如：system:user:add</li>
        <li>• 路由路径对应前端路由配置，菜单类型必须填写路径</li>
        <li>• 排序号越小越靠前，可以通过调整排序号改变菜单顺序</li>
        <li>• 菜单与角色权限关联，实现灵活的访问控制</li>
        <li>• 删除菜单前请先删除其所有子菜单</li>
      </ul>
    </Card>
  );
}