# FrontMenu - 前端三级导航菜单插件

为 Bagisto 提供前台（Shop）三级导航菜单管理，支持在后台 Settings 菜单下进行菜单项的增删改查，并通过 GraphQL 接口对外提供数据查询。

## 功能特性

- 后台 Settings 菜单下新增「前端导航菜单」管理入口
- 菜单项字段：`name`（名称）、`slug`（唯一标识）、`url`（链接）、`image`（图片）、`banner`（横幅）、`status`（状态）、`sort_order`（排序）
- `image` 与 `banner` 支持图片上传（上传至 S3，自动返回 URL 存储）
- 支持三级菜单层级（父级/子级/孙级）
- 支持拖拽排序与拖拽调整层级
- 级联删除（删除父级时自动删除子级）
- GraphQL 接口提供单条、集合、树形三种查询

## 图片上传

- 上传组件复用 `Longyi\ImageUpload` 包的 `ImageUploadService`，通过 `admin.image_upload.upload` 接口上传
- 图片存储于 `uploads/front-menu` 目录，返回的 URL 写入 `image` / `banner` 字段

## 拖拽排序

- 列表页使用 `vuedraggable` 组件，可拖拽调整菜单顺序与层级
- 拖拽结束后通过 `admin.frontmenu.reorder` 接口保存新的 `parent_id` 与 `sort_order`

## 依赖

- PHP ^8.1|^8.2
- Laravel ^10.0|^11.0
- Bagisto 2.x
- api-platform（用于 GraphQL，项目已内置）

## 安装步骤

### 1. 注册 Provider

`bootstrap/providers.php` 中已添加：

```php
Longyi\FrontMenu\Providers\FrontMenuServiceProvider::class,
```

### 2. 运行数据库迁移

```bash
php artisan migrate
```

### 3. 初始化默认菜单（可选）

```bash
php artisan front-menu:init
```

### 4. 清理缓存

```bash
php artisan cache:clear
php artisan config:clear
php artisan view:clear
php artisan route:clear
php artisan bagisto-api:clear-cache

```

### 5. 授权角色

在后台 `Settings → Roles` 中为对应角色勾选「前端导航菜单」权限，菜单即可在侧边栏 Settings 下显示。

## GraphQL 查询

GraphQL 端点：`/api/graphql`（需携带 storefront key）。

### 树形查询（推荐，返回启用状态的三级菜单树）

```graphql
{
  frontMenuTrees {
    edges {
      node {
        id
        name
        slug
        url
        image
        banner
        sortOrder
        status
        children {
          edges {
            node {
              id
              name
              slug
              url
              children {
                edges {
                  node {
                    id
                    name
                    slug
                    url
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
```

### 单条查询

```graphql
{
  frontMenu(id: "1") {
    id
    name
    slug
    url
    image
    banner
    sortOrder
    status
  }
}
```

### 集合查询

```graphql
{
  frontMenus {
    edges {
      node {
        id
        name
        slug
        url
      }
    }
  }
}
```

## 目录结构

```
packages/Longyi/FrontMenu/
├── composer.json
├── README.md
└── src/
    ├── Config/
    │   ├── menu.php          # 后台菜单配置
    │   └── acl.php           # ACL 权限配置
    ├── Console/
    │   └── Commands/
    │       └── InitializeFrontMenu.php
    ├── Database/
    │   ├── Migrations/
    │   │   └── 2026_08_28_000001_create_front_menu_items_table.php
    │   └── Seeders/
    │       └── FrontMenuItemSeeder.php
    ├── Http/
    │   └── Controllers/
    │       └── FrontMenuController.php
    ├── Models/
    │   └── FrontMenuItem.php
    ├── Providers/
    │   └── FrontMenuServiceProvider.php
    ├── Repositories/
    │   └── FrontMenuItemRepository.php
    ├── Resources/
    │   ├── lang/
    │   │   ├── en/app.php
    │   │   └── zh_CN/app.php
    │   └── views/
    │       └── admin/menu/
    └── Routes/
        └── admin-routes.php
```