@mindbase/vue3-app-shell

Vue 3 通用应用壳基础包，提供响应式布局和 PWA 支持。

特性

• ✅ 插槽化布局：灵活的插槽系统，支持自定义顶栏、侧边栏、内容区
• ✅ 响应式设计：自适应 PC 和移动端，断点优化
• ✅ 抽屉式侧边栏：PC 固定显示，移动端全屏抽屉（无遮罩）
• ✅ PWA 支持：完整的 PWA 配置和安装引导
• ✅ 移动端优化：Element Plus 触摸优化、手势支持
• ✅ 主题集成：与 @mindbase/vue3-kit 主题系统集成

安装

npm install @mindbase/vue3-app-shell

依赖

{
  "peerDependencies": {
    "@mindbase/vue3-kit": "*",
    "vue": "^3.4.0",
    "pinia": "^2.1.0",
    "vue-router": "^4.2.0",
    "element-plus": "^2.5.0",
    "hammerjs": "^2.0.8"
  }
}

使用

基础用法

import { createAppShell } from '@mindbase/vue3-app-shell'
import '@mindbase/vue3-app-shell/dist/style.css'

const { app, router } = createAppShell({
  el: '#app',
  pwa: {
    title: '我的应用',
    description: '添加到主屏幕，获得更好的体验'
  }
})

app.mount('#app')

注册插槽

<script setup>
import { useAppShellSlotsStore, AppShellSlotLocation } from '@mindbase/vue3-app-shell'

const slotsStore = useAppShellSlotsStore()

// 注册组件到顶栏左侧
slotsStore.registerSlot({
  location: AppShellSlotLocation.HEADER_LEFT,
  component: MyCustomComponent
})
</script>

自定义侧边栏

<script setup>
import { useAppShellSlotsStore, AppShellSlotLocation } from '@mindbase/vue3-app-shell'
import MyMenu from './MyMenu.vue'

const slotsStore = useAppShellSlotsStore()

slotsStore.registerSlot({
  location: AppShellSlotLocation.SIDEBAR,
  component: MyMenu
})
</script>

插槽位置

• HEADER_LEFT：顶栏左侧
• HEADER_CENTER：顶栏中间
• HEADER_RIGHT：顶栏右侧
• SIDEBAR：侧边栏
• CONTENT_TOP：内容区顶部
• CONTENT_BOTTOM：内容区底部

响应式断点

• 小屏：< 768px（抽屉式侧边栏）
• 中屏：768px - 1199px（固定侧边栏）
• 大屏：≥ 1200px（固定侧边栏）

PWA 配置

const pwaConfig = {
  title: '安装应用',
  description: '添加到主屏幕，获得更好的体验',
  installButtonText: '安装',
  cancelButtonText: '暂不安装',
  dontShowAgainText: '不再提示',
  autoShow: true
}

License

MIT