@mindbase/vue3-app-shell 1.0.0

package/layout/components/AppHeader.vue

@@ -0,0 +1,108 @@
+<template>
+  <header class="app-header">
+    <!-- 左侧区域：菜单按钮 + 插槽 -->
+    <div class="app-header__left">
+      <i
+        :class="iconClass"
+        class="menu-toggle"
+        @click="handleToggle" />
+      <template v-for="slot in headerLeftSlots" :key="slot">
+        <component :is="slot.component" v-bind="slot.props" />
+      </template>
+    </div>
+
+    <!-- 中间区域：插槽 -->
+    <div class="app-header__center">
+      <template v-for="slot in headerCenterSlots" :key="slot">
+        <component :is="slot.component" v-bind="slot.props" />
+      </template>
+    </div>
+
+    <!-- 右侧区域：插槽 -->
+    <div class="app-header__right">
+      <template v-for="slot in headerRightSlots" :key="slot">
+        <component :is="slot.component" v-bind="slot.props" />
+      </template>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppShellLayoutStore, useAppShellSlotsStore } from '../../store'
+import { useDrawer } from '../../composables'
+
+const layoutStore = useAppShellLayoutStore()
+const slotsStore = useAppShellSlotsStore()
+const { isMobile } = useDrawer()
+
+const { collapsed, drawerVisible } = storeToRefs(layoutStore)
+const { headerLeft, headerCenter, headerRight } = storeToRefs(slotsStore)
+
+// 图标类名
+const iconClass = computed(() => {
+  if (isMobile.value) {
+    return drawerVisible.value ? 'mbiconfont mb-close' : 'mbiconfont mb-menu'
+  } else {
+    return collapsed.value ? 'mbiconfont mb-outdent' : 'mbiconfont mb-indent'
+  }
+})
+
+// 切换菜单
+const handleToggle = () => {
+  if (isMobile.value) {
+    layoutStore.toggleDrawer()
+  } else {
+    layoutStore.toggleCollapse()
+  }
+}
+</script>
+
+<style lang="scss">
+.app-header {
+  display: flex;
+  align-items: center;
+  height: var(--mb-app-shell-header-height, 60px);
+  background-color: var(--mb-app-shell-header-bg, #ffffff);
+  border-bottom: var(--mb-app-shell-header-border-bottom, 1px solid #e4e7ed);
+  padding: 0 16px;
+  flex-shrink: 0;
+
+  .app-header__left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+
+  .app-header__center {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    overflow: hidden;
+  }
+
+  .app-header__right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+
+  .menu-toggle {
+    font-size: 18px;
+    color: var(--mb-app-shell-header-text-color, #606266);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 6px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+}
+</style>

package/layout/components/AppMain.vue

@@ -0,0 +1,67 @@
+<template>
+  <main class="app-main">
+    <!-- 内容顶部插槽 -->
+    <div v-if="contentTopSlots.length > 0" class="app-main__top">
+      <template v-for="slot in contentTopSlots" :key="slot">
+        <component :is="slot.component" v-bind="slot.props" />
+      </template>
+    </div>
+
+    <!-- 路由视图 -->
+    <section class="app-main__content">
+      <router-view v-slot="{ Component }">
+        <KeepAlive :max="keepAliveMax">
+          <component :is="Component" :key="route.path" />
+        </KeepAlive>
+      </router-view>
+    </section>
+
+    <!-- 内容底部插槽 -->
+    <div v-if="contentBottomSlots.length > 0" class="app-main__bottom">
+      <template v-for="slot in contentBottomSlots" :key="slot">
+        <component :is="slot.component" v-bind="slot.props" />
+      </template>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useAppShellSlotsStore } from '../../store'
+
+const route = useRoute()
+const slotsStore = useAppShellSlotsStore()
+
+const { contentTop, contentBottom } = storeToRefs(slotsStore)
+
+// KeepAlive 最大缓存数量（可配置）
+const keepAliveMax = computed(() => 10)
+</script>
+
+<style lang="scss">
+.app-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--mb-app-shell-main-bg, #f5f5f5);
+
+  .app-main__top {
+    flex-shrink: 0;
+    padding: var(--mb-app-shell-main-padding, 16px);
+  }
+
+  .app-main__content {
+    flex: 1;
+    overflow: auto;
+    padding: var(--mb-app-shell-main-padding, 16px);
+  }
+
+  .app-main__bottom {
+    flex-shrink: 0;
+    padding: var(--mb-app-shell-main-padding, 16px);
+  }
+}
+</style>

package/layout/components/PWAInstallPrompt.vue

@@ -0,0 +1,114 @@
+<template>
+  <teleport to="body">
+    <transition name="el-fade">
+      <div v-if="visible" class="pwa-install-prompt">
+        <div class="pwa-install-prompt__content">
+          <div class="pwa-install-prompt__text">
+            <h4 class="pwa-install-prompt__title">{{ config.title }}</h4>
+            <p class="pwa-install-prompt__description">{{ config.description }}</p>
+          </div>
+          <div class="pwa-install-prompt__actions">
+            <el-button size="small" @click="handleCancel">
+              {{ config.cancelButtonText }}
+            </el-button>
+            <el-button type="primary" size="small" @click="handleInstall">
+              {{ config.installButtonText }}
+            </el-button>
+          </div>
+          <div class="pwa-install-prompt__footer">
+            <el-checkbox v-model="dontShowAgain" @change="handleDontShowAgainChange">
+              {{ config.dontShowAgainText }}
+            </el-checkbox>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppShellPWAStore } from '../../store'
+import { ElButton, ElCheckbox } from 'element-plus'
+
+const pwaStore = useAppShellPWAStore()
+const { config, promptVisible, dontShowAgain, shouldShowPrompt } = storeToRefs(pwaStore)
+
+// 控制显示状态
+const visible = computed(() => {
+  return shouldShowPrompt.value && promptVisible.value
+})
+
+// 处理安装
+const handleInstall = () => {
+  pwaStore.promptInstall()
+}
+
+// 处理取消
+const handleCancel = () => {
+  pwaStore.hidePrompt()
+}
+
+// 处理"不再提示"变化
+const handleDontShowAgainChange = (value: boolean) => {
+  pwaStore.setDontShowAgain(value)
+}
+
+// 监听 shouldShowPrompt，自动显示提示
+watch(shouldShowPrompt, (shouldShow) => {
+  if (shouldShow) {
+    pwaStore.showPrompt()
+  }
+}, { immediate: true })
+</script>
+
+<style lang="scss">
+.pwa-install-prompt {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .pwa-install-prompt__content {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    min-width: 320px;
+    max-width: 400px;
+  }
+
+  .pwa-install-prompt__text {
+    margin-bottom: 12px;
+
+    .pwa-install-prompt__title {
+      margin: 0 0 8px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+
+    .pwa-install-prompt__description {
+      margin: 0;
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+
+  .pwa-install-prompt__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .pwa-install-prompt__footer {
+    display: flex;
+    justify-content: center;
+    padding-top: 8px;
+    border-top: 1px solid #e4e7ed;
+  }
+}
+</style>

package/layout/index.ts

@@ -0,0 +1,5 @@
+export { default as AppShellLayout } from './AppShellLayout.vue'
+export { default as AppHeader } from './components/AppHeader.vue'
+export { default as AppDrawer } from './components/AppDrawer.vue'
+export { default as AppMain } from './components/AppMain.vue'
+export { default as PWAInstallPrompt } from './components/PWAInstallPrompt.vue'

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mindbase/vue3-app-shell",
+  "version": "1.0.0",
+  "description": "Vue 3 通用应用壳基础包，支持响应式布局和 PWA",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@mindbase/vue3-kit": "workspace:*",
+    "vue": "^3.4.0",
+    "pinia": "^2.1.0",
+    "vue-router": "^4.2.0",
+    "element-plus": "^2.5.0",
+    "hammerjs": "^2.0.8"
+  },
+  "devDependencies": {
+    "@types/hammerjs": "^2.0.45",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-pwa": "^0.17.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "keywords": [
+    "vue3",
+    "app-shell",
+    "pwa",
+    "responsive",
+    "layout"
+  ],
+  "author": "mindbase",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/pwa/index.ts

@@ -0,0 +1,3 @@
+export * from './manifest'
+export * from './utils'
+export * from './types'

package/pwa/manifest.ts

@@ -0,0 +1,92 @@
+import type { VitePWAOptions } from 'vite-plugin-pwa'
+import type { PWAConfig } from '../types'
+
+/**
+ * 创建 Vite PWA 配置
+ */
+export function createPWAConfig(config: PWAConfig = {}): VitePWAOptions {
+  const {
+    name = 'App',
+    shortName = 'App',
+    description = 'My App',
+    themeColor = '#ffffff',
+    backgroundColor = '#ffffff',
+    icon = '/icon.png'
+  } = config
+
+  return {
+    registerType: 'autoUpdate',
+    includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
+    manifest: {
+      name,
+      short_name: shortName,
+      description,
+      theme_color: themeColor,
+      background_color: backgroundColor,
+      display: 'standalone',
+      icons: getIcons(icon),
+      start_url: '/',
+      orientation: 'portrait'
+    },
+    workbox: {
+      globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+      runtimeCaching: [
+        {
+          urlPattern: /^https:\/\/.*\.(?:png|jpg|jpeg|svg|gif|webp)$/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'images-cache',
+            expiration: {
+              maxEntries: 60,
+              maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
+            }
+          }
+        },
+        {
+          urlPattern: /^https:\/\/api\//i,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'api-cache',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 5 * 60 // 5 minutes
+            }
+          }
+        }
+      ]
+    }
+  }
+}
+
+/**
+ * 获取图标配置
+ */
+function getIcons(icon: string | Record<string, string>) {
+  if (typeof icon === 'string') {
+    // 单个图标路径，生成多尺寸
+    const sizes = [72, 96, 128, 144, 152, 192, 384, 512]
+    return sizes.map(size => ({
+      src: icon,
+      sizes: `${size}x${size}`,
+      type: 'image/png'
+    }))
+  } else {
+    // 多个图标路径
+    return Object.entries(icon).map(([size, src]) => ({
+      src,
+      sizes: size,
+      type: 'image/png'
+    }))
+  }
+}
+
+/**
+ * 默认 PWA 配置
+ */
+export const defaultPWAConfig: VitePWAOptions = createPWAConfig({
+  name: 'Mindbase App',
+  shortName: 'App',
+  description: 'Mindbase Application',
+  themeColor: '#409eff',
+  backgroundColor: '#ffffff'
+})

package/pwa/types.ts

@@ -0,0 +1,4 @@
+/**
+ * PWA 相关类型定义（已在 types/pwa.ts 中定义，此文件为兼容性导出）
+ */
+export type { PWAInstallConfig, PWAConfig, PWAInstallState } from '../types/pwa'

package/pwa/utils.ts

@@ -0,0 +1,108 @@
+/**
+ * PWA 工具函数
+ */
+
+/**
+ * 检查是否为 PWA 环境
+ */
+export function isPWA(): boolean {
+  if (typeof window === 'undefined') return false
+
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    (window.navigator as any).standalone === true
+  )
+}
+
+/**
+ * 检查是否支持 PWA 安装
+ */
+export function canInstallPWA(): boolean {
+  if (typeof window === 'undefined') return false
+
+  // 检查是否为 HTTPS
+  if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
+    return false
+  }
+
+  // 检查是否为支持的浏览器
+  return 'serviceWorker' in navigator && 'beforeinstallprompt' in window
+}
+
+/**
+ * 获取设备信息
+ */
+export function getDeviceInfo(): {
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  userAgent: string
+} {
+  if (typeof window === 'undefined') {
+    return {
+      isMobile: false,
+      isTablet: false,
+      isDesktop: true,
+      userAgent: ''
+    }
+  }
+
+  const userAgent = navigator.userAgent
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)
+  const isTablet = /iPad|Android|Tablet/i.test(userAgent) && window.innerWidth >= 768
+  const isDesktop = !isMobile && !isTablet
+
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+    userAgent
+  }
+}
+
+/**
+ * 注册服务工作者
+ */
+export async function registerServiceWorker(
+  scriptURL: string,
+  options?: RegistrationOptions
+): Promise<ServiceWorkerRegistration | null> {
+  if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {
+    return null
+  }
+
+  try {
+    const registration = await navigator.serviceWorker.register(scriptURL, options)
+    return registration
+  } catch (error) {
+    console.error('Service Worker registration failed:', error)
+    return null
+  }
+}
+
+/**
+ * 等待服务工作者激活
+ */
+export async function waitForServiceWorkerActivation(
+  registration: ServiceWorkerRegistration,
+  timeout = 5000
+): Promise<boolean> {
+  if (!registration.waiting && !registration.installing) {
+    return true
+  }
+
+  return new Promise((resolve) => {
+    const timeoutId = setTimeout(() => {
+      resolve(false)
+    }, timeout)
+
+    if (registration.waiting) {
+      registration.waiting.postMessage('skipWaiting')
+    }
+
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      clearTimeout(timeoutId)
+      resolve(true)
+    })
+  })
+}

package/store/index.ts

@@ -0,0 +1,3 @@
+export * from './slots'
+export * from './layout'
+export * from './pwa'

package/store/layout.ts

@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { DrawerState } from '../types'
+
+/**
+ * App Shell 布局状态管理
+ */
+export const useAppShellLayoutStore = defineStore('appShellLayout', () => {
+  // PC 端侧边栏折叠状态
+  const collapsed = ref(false)
+
+  // 移动端抽屉可见状态
+  const drawerVisible = ref(false)
+
+  /**
+   * 切换侧边栏折叠状态
+   */
+  function toggleCollapse() {
+    collapsed.value = !collapsed.value
+  }
+
+  /**
+   * 设置侧边栏折叠状态
+   */
+  function setCollapse(value: boolean) {
+    collapsed.value = value
+  }
+
+  /**
+   * 切换抽屉可见状态
+   */
+  function toggleDrawer() {
+    drawerVisible.value = !drawerVisible.value
+  }
+
+  /**
+   * 打开抽屉
+   */
+  function openDrawer() {
+    drawerVisible.value = true
+  }
+
+  /**
+   * 关闭抽屉
+   */
+  function closeDrawer() {
+    drawerVisible.value = false
+  }
+
+  /**
+   * 设置抽屉可见状态
+   */
+  function setDrawerVisible(value: boolean) {
+    drawerVisible.value = value
+  }
+
+  return {
+    collapsed,
+    drawerVisible,
+    toggleCollapse,
+    setCollapse,
+    toggleDrawer,
+    openDrawer,
+    closeDrawer,
+    setDrawerVisible
+  }
+})
+
+export type AppShellLayoutStore = ReturnType<typeof useAppShellLayoutStore>