# 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. 支持手动触发同步（未来版本）

## 开发说明

### 构建命令

```bash
# 开发模式
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. 增强离线状态下的用户提示