first commit

2026-02-06 20:21:10 +08:00
commit f9d7f980bb
3994 changed files with 1146030 additions and 0 deletions
@@ -0,0 +1,224 @@
+# 启动画面功能说明
+
+## 功能概述
+
+启动画面功能为应用提供了优雅的启动体验，包括品牌展示、加载动画和初始化过程。
+
+## 文件结构
+
+```
+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. 网络检测
+根据网络状态调整加载步骤和显示内容。