# Fantastic-admin 插槽位置参考

本文档详细介绍 Fantastic-admin 框架中所有可用的插槽位置。

## 插槽分类

### 布局插槽（2 个位置）

位于应用布局的最外层，横跨全宽。

#### LayoutTop
- **位置**：位于整个应用的最顶部，在头部之上
- **适用场景**：
  - 全局公告横幅
  - 系统维护通知
  - Cookie 同意栏
  - 试用到期提醒
- **布局方式**：全宽块级容器
- **说明**：内容会将整个布局向下撑开，适合需要立即引起注意的横幅

#### LayoutBottom
- **位置**：位于整个应用的最底部，在页脚之下
- **适用场景**：
  - 全局版权声明
  - 法律免责声明
  - 持久状态栏
- **布局方式**：全宽块级容器

---

### 头部插槽（4 个位置）

位于应用顶部的头部导航栏中。

#### HeaderStart
- **位置**：头部最左侧，logo 之前
- **适用场景**：
  - 菜单折叠按钮
  - 面包屑导航
  - 自定义品牌元素
- **布局方式**：水平弹性布局

#### HeaderAfterLogo
- **位置**：头部 logo 紧后方
- **适用场景**：
  - 应用标题或副标题
  - 版本徽标
  - 环境标识（开发/预发/生产）
- **布局方式**：水平弹性布局

#### HeaderAfterMenu
- **位置**：头部主菜单之后
- **版本要求**：v5.3.0+
- **适用场景**：
  - 搜索框
  - 快捷操作
  - 通知提示
- **布局方式**：水平弹性布局

#### HeaderEnd
- **位置**：头部最右侧
- **适用场景**：
  - 用户头像下拉菜单
  - 设置按钮
  - 退出登录按钮
  - 主题切换器
- **布局方式**：水平弹性布局

---

### 主侧边栏插槽（4 个位置）

位于主导航侧边栏中。

#### MainSidebarTop
- **位置**：主侧边栏顶部，logo 之前
- **适用场景**：
  - 折叠/展开按钮
  - 自定义头部内容
  - 工作区选择器
- **布局方式**：垂直弹性布局

#### MainSidebarAfterLogo
- **位置**：主侧边栏 logo 紧后方
- **适用场景**：
  - 用户信息卡片
  - 快速统计数据
  - 工作区名称
- **布局方式**：垂直弹性布局

#### MainSidebarAfterMenu
- **位置**：主侧边栏导航菜单之后
- **版本要求**：v5.3.0+
- **适用场景**：
  - 附加导航项
  - 快捷方式
  - 固定项目
- **布局方式**：垂直弹性布局

#### MainSidebarBottom
- **位置**：主侧边栏底部
- **适用场景**：
  - 帮助/支持链接
  - 版本信息
  - 底部内容
  - 折叠按钮
- **布局方式**：垂直弹性布局

---

### 子侧边栏插槽（4 个位置）

位于次级导航侧边栏中（使用多级导航时显示）。

#### SubSidebarTop
- **位置**：子侧边栏顶部
- **适用场景**：
  - 区块标题
  - 返回按钮
  - 面包屑
- **布局方式**：垂直弹性布局

#### SubSidebarAfterLogo
- **位置**：子侧边栏 logo 之后
- **适用场景**：
  - 区块描述
  - 上下文信息
- **布局方式**：垂直弹性布局

#### SubSidebarAfterMenu
- **位置**：子侧边栏导航菜单之后
- **版本要求**：v5.3.0+
- **适用场景**：
  - 附加子导航
  - 相关链接
- **布局方式**：垂直弹性布局

#### SubSidebarBottom
- **位置**：子侧边栏底部
- **适用场景**：
  - 区块专属操作
  - 底部内容
- **布局方式**：垂直弹性布局

---

### 顶部栏插槽（4 个位置）

位于标签栏和工具栏区域。

#### TabbarStart
- **位置**：标签栏左侧
- **适用场景**：
  - 标签导航控件
  - 刷新按钮
  - 自定义标签操作
- **布局方式**：水平弹性布局

#### TabbarEnd
- **位置**：标签栏右侧
- **适用场景**：
  - 关闭所有标签按钮
  - 标签管理操作
- **布局方式**：水平弹性布局

#### ToolbarStart
- **位置**：工具栏左侧
- **适用场景**：
  - 页面专属操作
  - 面包屑
  - 页面标题
- **布局方式**：水平弹性布局

#### ToolbarEnd
- **位置**：工具栏右侧
- **适用场景**：
  - 操作按钮
  - 筛选器
  - 导出/导入按钮
- **布局方式**：水平弹性布局

---

### 自由定位插槽

#### FreePosition
- **位置**：灵活定位，需手动设置坐标
- **特殊要求**：
  - **必须**在样式中使用 `position: absolute;`
  - **必须**手动设置定位坐标（top/right/bottom/left）
  - **必须**设置合适的 z-index
- **适用场景**：
  - 悬浮操作按钮（FAB）
  - 客服聊天组件
  - 自定义遮罩层
  - 通知 Toast
  - 帮助按钮
- **样式示例**：
  ```css
  .free-position-slot {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }
  ```

---

## 插槽选择指南

### 何时使用布局插槽：
- 需要显示在所有内容之上的全局横幅（公告、维护通知）
- 需要显示在所有内容之下的全局底栏（版权声明、法律免责）

### 何时使用头部插槽：
- 全局导航元素
- 用户账号控件
- 全局操作按钮
- 品牌元素

### 何时使用侧边栏插槽：
- 导航增强内容
- 用户信息展示
- 工作区上下文
- 帮助与支持链接

### 何时使用顶部栏插槽：
- 页面专属操作
- 标签管理
- 上下文控件
- 面包屑导航

### 何时使用 FreePosition：
- 不适合放入标准布局的悬浮元素
- 需要覆盖在内容之上的元素
- 客服聊天组件或帮助按钮
- 需要自定义定位的组件

---

## 文件结构

所有插槽必须遵循以下目录结构：
```
/src/slots/{插槽名称}/index.vue
```

**注意**：文件名必须为 `index.vue`。

示例：
```
/src/slots/LayoutTop/index.vue
/src/slots/LayoutBottom/index.vue
/src/slots/HeaderStart/index.vue
/src/slots/MainSidebarBottom/index.vue
/src/slots/FreePosition/index.vue
```