yunzerwebsite/yunzer_go

Fork 0

扫地僧 476c5e7658 first commit

2025-10-27 23:13:08 +08:00

4.7 KiB

Raw Blame History

启动画面功能说明

功能概述

启动画面功能为应用提供了优雅的启动体验，包括品牌展示、加载动画和初始化过程。

文件结构

src/
├── config/
│   └── splash.js              # 启动画面配置文件
├── utils/
│   └── splashManager.js       # 启动画面管理器
pages/
├── splash/
│   └── splash.vue             # 启动画面页面
└── splash-test/
    └── splash-test.vue        # 启动画面测试页面

功能特性

1. 智能启动控制

冷启动: 首次启动或应用被完全关闭后重新启动
热启动: 应用在后台被重新激活
自动判断: 系统自动判断启动类型，决定是否显示启动画面

2. 优雅的视觉效果

渐变背景: 使用紫色渐变背景，营造现代感
浮动动画: 背景圆形元素的浮动动画效果
毛玻璃效果: 使用 backdrop-filter 实现毛玻璃质感
脉冲动画: Logo图标的脉冲呼吸效果

3. 加载步骤管理

分步加载: 将启动过程分为多个步骤
实时反馈: 显示当前加载步骤和进度
错误处理: 单个步骤失败不影响整体启动流程

4. 可配置性

显示时间: 可配置最小和最大显示时间
加载步骤: 可自定义加载步骤和文本
主题样式: 可配置颜色、字体等视觉元素

配置说明

基本配置

// src/config/splash.js
export const splashConfig = {
  app: {
    name: '企业办公',
    nameEn: 'Enterprise Office',
    version: '1.0.0',
    logo: '🏢'
  },
  display: {
    minDuration: 2000,      // 最小显示时间
    maxDuration: 5000,      // 最大显示时间
    showOnWarmStart: false, // 热启动时是否显示
    showVersion: true       // 是否显示版本信息
  }
}

加载步骤配置

loadingSteps: [
  {
    text: '正在初始化...',
    duration: 800,
    action: 'init',
    icon: '⚙️'
  },
  {
    text: '加载用户数据...',
    duration: 1000,
    action: 'loadUserData',
    icon: '👤'
  }
]

使用方法

1. 基本使用

启动画面会自动在应用启动时显示，无需额外配置。

2. 自定义配置

import { updateSplashConfig } from '@/src/config/splash.js'

// 更新配置
updateSplashConfig({
  display: {
    minDuration: 3000,
    showOnWarmStart: true
  }
})

3. 添加自定义加载步骤

import { updateSplashConfig } from '@/src/config/splash.js'

updateSplashConfig({
  loadingSteps: [
    // 现有步骤...
    {
      text: '同步云端数据...',
      duration: 1200,
      action: 'syncCloudData',
      icon: '☁️'
    }
  ]
})

4. 实现自定义加载逻辑

// src/utils/splashManager.js
async function syncCloudData() {
  // 实现云端数据同步逻辑
  await syncUserData()
  await syncWorkData()
  console.log('云端数据同步完成')
}

测试功能

访问 /pages/splash-test/splash-test 页面可以：

测试启动画面效果
重置启动状态
模拟冷启动/热启动
查看当前配置信息

技术实现

1. 启动检测

// 检查是否应该显示启动画面
export function shouldShowSplash() {
  const isColdStart = !getApp().globalData?.isWarmStart
  return isColdStart
}

2. 步骤执行

// 执行加载步骤
export async function executeLoadingStep(step) {
  try {
    switch (step.action) {
      case 'init':
        await initializeApp()
        break
      case 'loadUserData':
        await loadUserData()
        break
    }
    return true
  } catch (error) {
    console.error(`步骤 ${step.action} 执行失败:`, error)
    return false
  }
}

3. 动画效果

// 浮动动画
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.3;
  }
}

// 脉冲动画
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

注意事项

性能优化: 启动画面不应包含过重的计算或网络请求
错误处理: 确保单个步骤失败不会影响整体启动流程
用户体验: 避免启动画面显示时间过长
兼容性: 确保在不同设备和平台上都能正常显示

扩展功能

1. 添加品牌动画

可以在启动画面中添加更复杂的品牌动画效果。

2. 多语言支持

根据用户语言设置显示不同的启动文本。

3. 主题切换

根据用户设置显示不同主题的启动画面。

4. 网络检测

根据网络状态调整加载步骤和显示内容。

4.7 KiB Raw Blame History