Smartisan Note 离线支持说明

离线功能特性

Smartisan Note 应用支持完整的离线工作模式，确保用户在没有网络连接的情况下也能正常使用所有功能。

核心离线功能

1. 完整的离线编辑

   • 所有便签的创建、编辑、删除操作都可以在离线状态下完成
   • 支持富文本编辑器的所有功能（标题、待办事项、列表、加粗、引用、图片等）
   • 便签数据实时保存到本地 IndexedDB 数据库

2. 智能数据同步

   • 网络恢复时自动同步离线期间的操作
   • 离线操作队列管理，确保数据一致性
   • 冲突解决机制（时间戳优先）

3. 资源缓存

   • 核心静态资源（CSS、JS、图片）缓存到浏览器缓存
   • 应用界面在离线状态下完全可用
   • 字体和图标资源本地缓存

4. 网络状态感知

   • 实时检测网络连接状态
   • 离线/在线状态切换时的用户提示
   • 网络类型识别（2G/3G/4G/WiFi）

技术实现

Service Worker

应用使用自定义 Service Worker (src/sw.js) 实现以下功能：

• 缓存策略：

  • 静态资源：缓存优先
  • 数据请求：网络优先，失败时回退到缓存
  • API 请求：网络优先，失败时返回离线响应

• 后台同步：

  • 支持后台数据同步
  • 离线操作队列处理

IndexedDB 存储

使用 IndexedDB 作为本地数据存储：

• 数据结构：

  • 便签存储 (notes)
  • 文件夹存储 (folders)
  • 设置存储 (settings)

• 离线队列：

  • 操作记录到本地存储队列
  • 网络恢复时自动处理队列

网络状态管理

• 实时网络状态检测
• 网络类型识别
• 在线/离线状态切换处理

使用说明

离线使用

1. 应用首次加载时会缓存核心资源
2. 断网后应用仍可正常使用所有功能
3. 离线期间的所有操作都会保存到本地

数据同步

1. 网络恢复时自动开始同步
2. 可在设置中查看同步状态
3. 支持手动触发同步（未来版本）

开发说明

构建命令

# 开发模式
npm run dev

# 构建标准版本
npm run build

# 构建PWA版本（支持离线）
npm run build:pwa

# 构建所有版本
npm run build:all

# 部署PWA版本
npm run deploy:pwa

目录结构

src/
├── sw.js              # Service Worker 实现
├── utils/
│   ├── indexedDBStorage.js  # IndexedDB 存储管理
│   ├── networkUtils.js      # 网络状态工具
│   └── dateUtils.js         # 日期工具
├── stores/
│   └── useAppStore.js       # 应用状态管理
├── components/
│   └── ...                  # UI 组件
└── pages/
    ├── NoteListPage.vue     # 便签列表页面
    ├── NoteEditorPage.vue   # 便签编辑页面
    └── SettingsPage.vue     # 设置页面

测试离线功能

1. 使用浏览器开发者工具的 Network Throttling 功能模拟离线环境
2. 在离线状态下创建、编辑、删除便签
3. 恢复网络连接，观察数据同步过程
4. 检查离线期间的操作是否正确同步

未来改进

1. 添加手动同步按钮
2. 增强冲突解决机制
3. 支持多设备数据同步
4. 添加数据导出/导入功能
5. 增强离线状态下的用户提示