xuewuerduo
f468d532b1
包含以下模块： - antdv-next-admin: Vue 3 + TypeScript + Ant Design Vue 管理后台 - 设备/许可证/配件/耗材 CRUD 管理页面 - 基础数据管理 (分类/位置/制造商/型号/供应商) - 业务管理 (故障报修/盘点/资产分配/资产申请/交易记录) - 下拉选项改造 (ID输入框 → 搜索下拉选择) - 资产状态字典化 (接入sys_dict系统) - 界面文案优化 (设备→资产, 在库/在用/维修中/已报废) - 修复 console 警告 (popupClassName, 重复组件注册) - our-itam: Java Spring Boot + magic-api 后端服务 - fantastic-admin: 前端底层框架 (pnpm monorepo) - ciyo-itasset: CIYO 资产模块 - magic-script-skill: Claude Code skill 定义 - .claude: 对话历史记录 Co-Authored-By: Claude Code <noreply@anthropic.com>
259 lines
5.6 KiB
Markdown
259 lines
5.6 KiB
Markdown
# 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
|
||
```
|