@really-nothing/shell-sub-app-vue

主系统平台 Vue 子系统运行时脚手架。与 @really-nothing/shell-contracts（协议类型）配合使用，把各子系统重复的 bridge / request / composables / 布局 / bootstrap 收敛到一个包。

安装

npm install @really-nothing/shell-sub-app-vue @really-nothing/shell-contracts

peer：vue、vue-router、element-plus。

子系统最小接入

// src/kit.js
import { initSubApp } from '@really-nothing/shell-sub-app-vue'
import { APP_NAME, APP_TITLE, BASE_API } from '@/config/env'

export const kit = initSubApp({
  appName: APP_NAME,
  permissions: ['myapp:view'],
  standaloneBaseApi: BASE_API
})

export const {
  auth, feedback, overlay, setupHandshake, reportRouteChange,
  request, useInPlaceOverlay, usePermission
} = kit

// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@really-nothing/shell-sub-app-vue/styles/base.css'
import '@really-nothing/shell-sub-app-vue/styles/components.css'
import { SubAppRoot, bootstrapSubApp } from '@really-nothing/shell-sub-app-vue'
import { router } from '@/router'
import { setupHandshake } from '@/kit'
import { APP_TITLE } from '@/config/env'
import { businessRoutes } from '@/router/businessRoutes'

bootstrapSubApp({
  rootComponent: SubAppRoot,
  router,
  setupHandshake,
  standaloneTitle: `${APP_TITLE}（独立运行）`,
  standaloneMenus: businessRoutes.filter((r) => r.meta?.title),
  plugins: [ElementPlus]
})

路由过渡（默认开启）

SubAppRoot 内置的 EmbeddedLayout / StandaloneLayout 已用 RouteViewTransition 包裹 router-view，子项目无需任何配置即可获得与主壳一致的路由切换淡入淡出（content-fade）。动效 token 与过渡类随 styles/base.css 提供（wujie shadow 内不继承主壳变量，故包自带），并遵循 prefers-reduced-motion。

• 只要用 SubAppRoot 接入即默认生效，overlay 路由不套过渡。
• 自定义布局时可直接复用：import { RouteViewTransition } from '@really-nothing/shell-sub-app-vue'，用它替换裸 <router-view />。
• 调整时长/位移：在子项目样式中覆盖 --shell-motion-duration / --shell-motion-ease / --shell-motion-offset-y。

与 shell-contracts 的分工

| 包 | 职责 | |----|------| | shell-contracts | 协议类型、事件名、常量（框架无关） | | shell-sub-app-vue | Vue 子系统接入实现（bridge 握手、布局、bootstrap） |

UI 组件（子项目与主壳一致）

业务页面优先使用项目已引入的 UI 框架组件（当前示例为 Element Plus，不限于此）。按钮、输入、下拉、表单、表格等不要用原生 HTML 拼凑；只有框架无法满足（如 overlay 桥接协议、壳层 z-index 约定）时才自研。

• 在 main.js 通过 bootstrapSubApp({ plugins: [ElementPlus] }) 注册框架
• 业务 views/ 内使用 el-button、el-input、el-select 等
• 细则见主仓库 .cursor/skills/main-system-frontend/SKILL.md →「UI 组件选型」

开发与构建

本包以 预编译 dist/ 发布，与 shell-contracts 一致。

# 首次或依赖变更后
npm install

# 构建（发布 / 本地 file: 联调前必须执行）
npm run build

# 开发时监听源码变更并自动重建
npm run dev

本地联调（Main-System-Shell 通过 file: 引用）：

1. 在本目录 npm run build（或 npm run dev 保持 watch）
2. 回到主仓库启动 npm run dev:parking

发布：

npm run pack:dry   # 预览打包内容
npm publish        # prepublishOnly 会自动 build