# 启动画面功能说明

## 功能概述

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

## 文件结构

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

## 功能特性

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

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

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

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

## 配置说明

### 基本配置

```javascript
// 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       // 是否显示版本信息
  }
}
```

### 加载步骤配置

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

## 使用方法

### 1. 基本使用

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

### 2. 自定义配置

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

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

### 3. 添加自定义加载步骤

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

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

### 4. 实现自定义加载逻辑

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

## 测试功能

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

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

## 技术实现

### 1. 启动检测

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

### 2. 步骤执行

```javascript
// 执行加载步骤
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. 动画效果

```scss
// 浮动动画
@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. **兼容性**: 确保在不同设备和平台上都能正常显示

## 扩展功能

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

### 2. 多语言支持
根据用户语言设置显示不同的启动文本。

### 3. 主题切换
根据用户设置显示不同主题的启动画面。

### 4. 网络检测
根据网络状态调整加载步骤和显示内容。