跨端项目功能详细说明

首页 (index.vue)
  ├─ 缓存功能演示
  ├─ 接口缓存演示
  └─ 缓存统计

列表页 (list.vue)
  ├─ 新闻列表
  ├─ 下拉刷新
  └─ 上拉加载

class CacheManager {
  memoryCache: Map        // 内存缓存
  maxSize: 50            // 最多50个

  set()     // 设置缓存
  get()     // 获取缓存
  remove()  // 删除缓存
  clear()   // 清空缓存
}

request(url, {
  useCache: true,      // 是否使用缓存
  cacheTime: 300000   // 缓存5分钟
})

首页 (home_page.dart)
  ├─ 缓存功能演示
  ├─ 接口缓存演示
  └─ 缓存统计

列表页 (list_page.dart)
  ├─ 新闻列表
  ├─ RefreshIndicator
  └─ 分页加载

await Hive.initFlutter()
await Hive.openBox('cache')

box.put(key, value)     // 存储
box.get(key)           // 读取
box.delete(key)        // 删除
box.clear()            // 清空

final dio = Dio(BaseOptions(
  timeout: Duration(seconds: 10)
))

final response = await dio.get(url)

主窗口 (index.html)
  ├─ 缓存功能演示区
  ├─ 接口缓存演示区
  ├─ 缓存统计区
  └─ 缓存列表区

// 初始化数据库
const db = new Database('cache.db')
db.exec(`CREATE TABLE cache (...)`)

// IPC处理
ipcMain.handle('cache-set', (event, key, value, expire) => {
  db.prepare('INSERT OR REPLACE ...').run(...)
})

// 调用主进程
const result = await ipcRenderer.invoke('cache-set', key, value, expire)
const data = await ipcRenderer.invoke('cache-get', key)

HomeScreen
  ├─ 缓存功能演示
  ├─ 接口缓存演示
  └─ 缓存统计

ListScreen
  ├─ FlatList
  ├─ RefreshControl
  └─ onEndReached

await AsyncStorage.setItem(key, JSON.stringify(value))
const data = await AsyncStorage.getItem(key)
await AsyncStorage.removeItem(key)
await AsyncStorage.clear()

storage.set(key, value)      // 高性能
storage.getString(key)
storage.delete(key)

const client = axios.create({
  timeout: 10000
})

const response = await client.get(url)

步骤1：启动应用
  └─ 进入首页

步骤2：点击"测试缓存"
  └─ 生成测试数据
  └─ 写入缓存
  └─ 显示"缓存成功"

步骤3：点击"查看缓存"
  └─ 读取缓存
  └─ 显示数据内容

步骤4：等待61秒

步骤5：再次点击"查看缓存"
  └─ 缓存已过期
  └─ 显示"缓存不存在或已过期"

步骤6：点击"清空缓存"
  └─ 清除所有缓存
  └─ 显示"缓存已清空"

步骤1：点击"加载数据（使用缓存）"
  └─ 检查缓存：不存在
  └─ 请求网络：1-2秒
  └─ 写入缓存
  └─ 显示数据列表

步骤2：再次点击"加载数据（使用缓存）"
  └─ 检查缓存：存在
  └─ 读取缓存：<100ms
  └─ 显示数据列表（瞬间加载）

步骤3：点击"加载数据（不使用缓存）"
  └─ 跳过缓存
  └─ 请求网络：1-2秒
  └─ 显示数据列表

对比：缓存加载比网络快10-20倍

步骤1：进入列表页
  └─ 加载第1页（10条数据）
  └─ 显示列表

步骤2：向下滚动到底部
  └─ 触发onEndReached
  └─ 加载第2页
  └─ 追加到列表

步骤3：继续滚动
  └─ 加载第3、4、5页...
  └─ 直到"没有更多了"

步骤4：下拉刷新
  └─ 清除缓存
  └─ 重置为第1页
  └─ 重新加载

步骤5：返回首页再进入
  └─ 使用缓存
  └─ 瞬间显示列表

// 静态数据 - 长缓存
用户信息: 24小时
配置信息: 12小时
字典数据: 7天

// 动态数据 - 中缓存
商品列表: 30分钟
新闻列表: 10分钟
评论列表: 5分钟

// 实时数据 - 短缓存或不缓存
订单状态: 不缓存
支付状态: 不缓存
库存数量: 1分钟

内存缓存限制：50个

添加第51个时：
1. 检查缓存数量
2. 超过50个
3. 删除最早添加的
4. 添加新缓存

示例：
时间1: [A] (1个)
时间2: [B, A] (2个)
时间3: [C, B, A] (3个)
...
时间51: [Z, Y, X, ..., C, B] (50个，A被删除)

设置缓存时：
{
  data: {...},
  timestamp: 1704096000000,
  expire: 300000  // 5分钟
}

读取缓存时：
if (now - timestamp > expire) {
  删除缓存
  返回 null
} else {
  返回 data
}