lilonglong/tansci
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
f468d532b1
tansci/.claude/skills/fa-slot-creator/references/slot-positions.md
xuewuerduo f468d532b1 feat: 初始化tansci资产管理项目 
包含以下模块：
- 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>
2026-05-17 21:41:22 +08:00

5.6 KiB
Raw Blame History

Fantastic-admin 插槽位置参考

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

插槽分类

布局插槽（2 个位置）

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

LayoutTop

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

LayoutBottom

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

头部插槽（4 个位置）

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

HeaderStart

  • 位置：头部最左侧，logo 之前
  • 适用场景：
    • 菜单折叠按钮
    • 面包屑导航
    • 自定义品牌元素
  • 布局方式：水平弹性布局
  • 位置：头部 logo 紧后方
  • 适用场景：
    • 应用标题或副标题
    • 版本徽标
    • 环境标识（开发/预发/生产）
  • 布局方式：水平弹性布局

HeaderAfterMenu

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

HeaderEnd

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

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

位于主导航侧边栏中。

MainSidebarTop

  • 位置：主侧边栏顶部，logo 之前
  • 适用场景：
    • 折叠/展开按钮
    • 自定义头部内容
    • 工作区选择器
  • 布局方式：垂直弹性布局
  • 位置：主侧边栏 logo 紧后方
  • 适用场景：
    • 用户信息卡片
    • 快速统计数据
    • 工作区名称
  • 布局方式：垂直弹性布局

MainSidebarAfterMenu

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

MainSidebarBottom

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

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

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

SubSidebarTop

  • 位置：子侧边栏顶部
  • 适用场景：
    • 区块标题
    • 返回按钮
    • 面包屑
  • 布局方式：垂直弹性布局
  • 位置：子侧边栏 logo 之后
  • 适用场景：
    • 区块描述
    • 上下文信息
  • 布局方式：垂直弹性布局

SubSidebarAfterMenu

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

SubSidebarBottom

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

顶部栏插槽（4 个位置）

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

TabbarStart

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

TabbarEnd

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

ToolbarStart

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

ToolbarEnd

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

自由定位插槽

FreePosition

  • 位置：灵活定位，需手动设置坐标
  • 特殊要求：
    • 必须在样式中使用 position: absolute;
    • 必须手动设置定位坐标（top/right/bottom/left）
    • 必须设置合适的 z-index
  • 适用场景：
    • 悬浮操作按钮（FAB）
    • 客服聊天组件
    • 自定义遮罩层
    • 通知 Toast
    • 帮助按钮
  • 样式示例： 
    .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