@qynpm/admin-shell

后台管理系统的受控视觉外壳，统一提供侧栏、顶部栏、标签栏、内容区和整体 Shell。

公开组件

• QyAdminShell
• QyAdminSidebar
• QyAdminTopbar
• QyAdminTabs
• QyAdminContent

业务项目通常只装配 QyAdminShell：

<QyAdminShell :model="shellModel" :host="shellHost">
  <AdminShellRouteOutlet />
</QyAdminShell>

model 和 host 的权威协议来自 @qynpm/admin-framework。项目品牌通过 model.brand 注入。右上角控制台入口默认使用当前站点的 /auth，并复用 host.switchSystem 执行跳转；传入 model.consoleEntry 可覆盖入口，显式传入 null 可隐藏入口。公共包不会内置具体项目名称或 Logo。

QyAdminContent

QyAdminContent 是 Shell 与页面之间的唯一内容承载层：

• 根 <main> 负责内容 viewport、高度、背景、横向溢出边界和 Shell 到页面的响应式 padding。
• admin-shell__main-inner 负责最大宽度与居中。
• 普通模式在 inner 上生成唯一的 admin-shell__page-workspace，负责表面、边框、圆角、内部 padding 和页面纵向承载。
• bare 模式保留内容 <main>，但不生成 workspace 视觉 class，并移除普通页面 padding、最大宽度和表面。

业务页面和 QyPage 不得重复绘制 workspace，也不应覆盖 admin-shell__main*。Drawer 等 overlay 继续 Teleport 到 body，不进入 workspace。

主题前置条件

消费项目必须在 Element Plus 原始 CSS 后自行导入 @qynpm/admin-theme。@qynpm/admin-shell 只消费 --qy-* tokens，不会自动复制或定义整套 tokens：

import 'element-plus/dist/index.css'
import '@qynpm/admin-theme'

边界

本包只负责视觉和交互意图，不直接依赖：

• Vue Router、RouterView、KeepAlive
• Pinia 或项目 store
• API client、动态路由加载和 feedback
• 登录、退出、快捷入口或系统切换接口
• 项目业务 DTO、权限码和品牌资源

Router、Tabs 持久化、业务 API 和页面出口由消费项目的 host adapter 负责。当前只维护 Vue 3 + Element Plus renderer；Naive UI 和 React 如有需要，以独立 renderer 或独立实现接入，不在组件内部增加条件分支。

验证

pnpm --filter @qynpm/admin-framework build
pnpm --filter @qynpm/ui build
pnpm --filter @qynpm/admin-shell test
pnpm --filter @qynpm/admin-shell typecheck
pnpm --filter @qynpm/admin-shell build