33e - 移动端 Steering 规则与反模式

项目根目录/
├── CLAUDE.md                          # 全局规则（通用约束）
├── .kiro/steering/
│   ├── mobile-general.md              # 移动端通用规则（always）
│   ├── ios-swiftui.md                 # iOS 专用规则（auto: *.swift）
│   ├── android-compose.md             # Android 专用规则（auto: *.kt）
│   ├── react-native.md                # RN 专用规则（auto: *.tsx in src/）
│   └── flutter.md                     # Flutter 专用规则（auto: *.dart）
├── .cursor/rules/
│   ├── mobile-rules.mdc               # Cursor 移动端规则
│   └── platform-specific.mdc          # 平台特定规则
└── .github/
    └── copilot-instructions.md        # Copilot 移动端指令

# CLAUDE.md — 移动端项目规则
 
## 项目概述
- 框架：React Native 0.79+ / Expo SDK 53
- 语言：TypeScript 5.x（strict mode）
- 导航：React Navigation v7 / Expo Router v4
- 状态管理：Zustand（本地）+ TanStack Query（服务端）
- 样式：StyleSheet.create（禁止内联样式对象）
- 动画：react-native-reanimated v3（原生线程动画）
- 手势：react-native-gesture-handler v2
- 存储：expo-secure-store（敏感数据）+ MMKV（一般数据）
- 测试：Jest + React Native Testing Library + Detox（E2E）
- 最低支持：iOS 16+ / Android API 26+（Android 8.0）
 
## 内存管理规则（最高优先级）
- 所有 useEffect 必须返回清理函数，取消订阅/移除监听器/清除定时器
- 禁止在组件外部持有组件引用（会导致组件无法被 GC）
- 图片必须使用 expo-image 或 react-native-fast-image，禁止原生 Image 加载大图
- FlatList/FlashList 必须设置 removeClippedSubviews={true}
- 长列表必须使用 FlashList（替代 FlatList），设置 estimatedItemSize
- 禁止在 renderItem 中创建新的函数/对象引用（使用 useCallback/useMemo）
 
## 电池优化规则
- 定位：仅在必要时请求，使用 foregroundService 而非持续后台定位
- 网络：批量请求，使用 NetInfo 检测网络状态后再发起请求
- 动画：使用 useAnimatedStyle（原生线程），禁止 JS 线程驱动动画
- 后台任务：使用 expo-background-fetch，设置合理的 minimumInterval
- 传感器：使用后立即停止监听，禁止持续监听加速度计/陀螺仪
 
## 权限处理规则
- 所有权限请求前必须显示自定义说明弹窗（解释为什么需要）
- 必须处理三种状态：granted / denied / blocked
- 权限被拒绝时必须提供降级方案（不能崩溃或白屏）
- 权限被永久拒绝时引导用户到系统设置页
- iOS Info.plist 和 Android AndroidManifest.xml 必须声明所有使用的权限
- 禁止在应用启动时一次性请求所有权限（按需请求）
 
## 离线支持规则
- 所有 API 请求必须有离线降级策略
- 关键数据必须本地缓存（使用 TanStack Query 的 persistQueryClient）
- 网络状态变化时自动重试失败的请求
- 离线时显示明确的离线状态指示器
- 表单数据在提交失败时必须本地保存，网络恢复后自动重试
 
## 平台一致性规则
- 使用 Platform.select() 处理平台差异，禁止 Platform.OS === 'ios' 的 if-else
- 导航栏样式必须分别适配 iOS（大标题）和 Android（Material）
- 触觉反馈：iOS 使用 expo-haptics，Android 使用 Vibration API
- 日期选择器：iOS 使用滚轮样式，Android 使用日历样式
- 状态栏：iOS 默认浅色，Android 需要手动设置 translucent
 
## 包体积控制规则
- 禁止引入 lodash 全量包（使用 lodash-es 或单独导入）
- 图片资源必须压缩（PNG 使用 pngquant，JPEG 质量 ≤ 80%）
- 使用 expo-asset 延迟加载非首屏资源
- 字体文件仅包含使用的字重（禁止引入完整字体族）
- 每次添加新依赖前检查包体积影响（使用 bundlephobia）
- 启用 Hermes 引擎（React Native 默认）
- 使用 ProGuard/R8（Android）和 Bitcode（iOS）进行代码压缩
 
## 安全规则
- 敏感数据（token、密码、API key）必须存储在 expo-secure-store
- 禁止在 console.log 中输出敏感信息（生产环境移除所有 console）
- API 请求必须使用 HTTPS，生产环境启用证书固定
- 禁止在代码中硬编码 API 密钥（使用环境变量）
- 启用代码混淆（Android ProGuard / iOS 编译优化）
 
## 无障碍规则
- 所有可交互元素必须设置 accessibilityLabel
- 图片必须设置 accessibilityRole="image" 和描述性 label
- 表单控件必须关联 accessibilityHint
- 支持 Dynamic Type（iOS）和系统字体缩放（Android）
- 最小触摸目标：44x44pt（iOS）/ 48x48dp（Android）

---
inclusion: always
---
 
# 移动端通用 Steering 规则
 
## 生命周期管理
- 组件卸载时必须清理所有副作用（定时器、订阅、监听器）
- 应用进入后台时暂停非必要操作（动画、轮询、传感器）
- 应用恢复前台时刷新过期数据
- 处理低内存警告（iOS didReceiveMemoryWarning / Android onTrimMemory）
 
## 网络请求
- 所有请求必须设置超时（默认 15 秒）
- 必须处理网络错误并显示用户友好的错误信息
- 使用指数退避重试策略（最多 3 次）
- 大文件上传/下载必须支持断点续传
 
## 导航
- 深层导航必须支持 deep linking
- 返回手势不能导致数据丢失（未保存的表单需确认）
- 导航栈不能无限增长（使用 replace 替代 push 在适当场景）
 
## 测试
- 每个屏幕至少一个快照测试
- 关键业务流程必须有 E2E 测试
- 权限相关功能必须有 mock 测试
- 离线场景必须有专门的测试用例

---
inclusion: auto
globs: ["**/*.swift"]
---
 
# iOS SwiftUI Steering 规则
 
## SwiftUI 最佳实践
- 使用 @Observable 宏（iOS 17+）替代 ObservableObject
- 视图体（body）中禁止执行副作用或复杂计算
- 使用 .task {} 替代 .onAppear + async 模式
- 列表使用 List + LazyVStack，禁止在 ScrollView 中嵌套 ForEach 渲染大量视图
- 图片加载使用 AsyncImage 或第三方库（Kingfisher/Nuke），设置缓存策略
 
## iOS 26 Liquid Glass 适配
- 使用 .glassEffect() 修饰符实现毛玻璃效果
- 导航栏使用系统默认的 Liquid Glass 样式
- TabBar 使用 .tabBarStyle(.automatic) 自动适配
- 避免自定义导航栏覆盖系统 Liquid Glass 效果
 
## 内存管理
- 使用 [weak self] 在闭包中避免循环引用
- Combine 订阅必须存储在 cancellables Set 中并在 deinit 中取消
- 大图片使用 UIImage.preparingThumbnail(of:) 降采样
- Core Data 使用 NSBatchDeleteRequest 批量删除，避免逐条删除
 
## 权限（iOS 特定）
- Info.plist 必须包含所有权限的 Usage Description
- 使用 PHPhotoLibrary.authorizationStatus(for:) 检查照片权限级别
- 定位权限区分 whenInUse 和 always，优先请求 whenInUse
- 推送通知使用 UNUserNotificationCenter.requestAuthorization
 
## App Store 合规
- 禁止使用私有 API
- 必须提供 App Privacy 标签所需的隐私信息
- 应用内购买必须使用 StoreKit 2
- 登录功能必须支持 Sign in with Apple

---
inclusion: auto
globs: ["**/*.kt"]
---
 
# Android Jetpack Compose Steering 规则
 
## Compose 最佳实践
- Composable 函数必须是无副作用的（副作用使用 LaunchedEffect/SideEffect）
- 使用 remember {} 缓存计算结果，避免重组时重复计算
- 列表使用 LazyColumn/LazyRow，设置 key 参数优化重组
- 状态提升：UI 状态由 ViewModel 持有，Composable 只负责渲染
- 使用 derivedStateOf {} 避免不必要的重组
 
## Material 3 Expressive 适配
- 使用 MaterialTheme.colorScheme 获取颜色，禁止硬编码颜色值
- 动态颜色：使用 dynamicDarkColorScheme/dynamicLightColorScheme（Android 12+）
- 组件使用 Material 3 版本（androidx.compose.material3）
- 弹性动画使用 Material Motion 规范
 
## 内存管理
- ViewModel 中使用 viewModelScope 管理协程生命周期
- 避免在 Composable 中创建 CoroutineScope（使用 rememberCoroutineScope）
- Bitmap 处理使用 BitmapFactory.Options.inSampleSize 降采样
- Room 数据库查询使用 Flow，自动感知生命周期
 
## 权限（Android 特定）
- 使用 rememberLauncherForActivityResult + RequestPermission 请求权限
- Android 13+ 细分媒体权限（READ_MEDIA_IMAGES/VIDEO/AUDIO）
- Android 14+ 照片选择器优先使用 PickVisualMedia（无需权限）
- 后台定位需要 ACCESS_BACKGROUND_LOCATION（单独请求）
- 通知权限（POST_NOTIFICATIONS）在 Android 13+ 需要运行时请求
 
## Google Play 合规
- targetSdkVersion 必须满足 Google Play 最新要求（2025: API 35）
- 使用 App Bundle（.aab）而非 APK 发布
- 敏感权限必须在 Play Console 声明用途
- 数据安全部分必须准确填写

---
description: React Native 移动端开发规则
globs: ["src/**/*.tsx", "src/**/*.ts", "app/**/*.tsx"]
---
 
# React Native 开发规则
 
## 组件规范
- 使用函数组件 + TypeScript，禁止 class 组件
- Props 使用 interface 定义，必须导出类型
- 组件文件结构：类型定义 → 组件 → 样式（StyleSheet.create）
- 禁止在组件内部定义子组件（提取到独立文件）
 
## 性能规则
- FlatList renderItem 使用 useCallback 包裹
- 避免在 render 中创建新对象/数组（使用 useMemo）
- 图片使用 expo-image，设置 contentFit 和 placeholder
- 动画使用 reanimated worklet，禁止 Animated API 的 JS 驱动动画
- 避免不必要的 re-render：使用 React.memo + 浅比较
 
## 导航规则
- 使用 Expo Router 的文件系统路由
- 类型安全导航：使用 useRouter<T>() 泛型
- 深层链接必须在 app.json 中配置 scheme
- 模态页面使用 presentation: 'modal'
 
## 错误处理
- 每个屏幕必须有 ErrorBoundary
- API 错误必须显示用户友好的错误信息
- 网络错误必须区分离线和服务器错误
- 崩溃上报使用 Sentry 或 Bugsnag

---
description: Flutter 移动端开发规则
globs: ["lib/**/*.dart"]
---
 
# Flutter 开发规则
 
## Widget 规范
- 优先使用 StatelessWidget，仅在需要时使用 StatefulWidget
- 状态管理使用 Riverpod 2.x / Bloc，禁止全局变量
- Widget 拆分：单个 build 方法不超过 80 行
- 使用 const 构造函数优化重建性能
 
## 性能规则
- ListView.builder 替代 ListView（大列表）
- 图片使用 cached_network_image，设置 memCacheWidth/Height
- 避免在 build 中执行异步操作（使用 FutureBuilder/StreamBuilder）
- 使用 RepaintBoundary 隔离频繁重绘的区域
- 禁止在 build 中创建 TextEditingController（使用 late 或 initState）
 
## 平台适配
- 使用 Platform.isIOS / Platform.isAndroid 处理平台差异
- Cupertino 组件用于 iOS 风格，Material 组件用于 Android 风格
- 使用 flutter_adaptive_scaffold 处理多屏幕尺寸
- 状态栏样式使用 SystemChrome.setSystemUIOverlayStyle
 
## 资源管理
- 图片放在 assets/ 目录，使用 1x/2x/3x 多分辨率
- 字体仅包含使用的字重
- 使用 flutter_gen 生成类型安全的资源引用
- 国际化使用 flutter_localizations + arb 文件

# 移动端跨平台核心规则
 
## 🚫 绝对禁止（违反即拒绝 PR）
1. 禁止在生产代码中使用 console.log / print / NSLog 输出敏感信息
2. 禁止明文存储用户凭证（密码、token、API key）
3. 禁止在主线程执行耗时操作（网络请求、文件 I/O、复杂计算）
4. 禁止忽略权限请求结果（必须处理 granted/denied/blocked）
5. 禁止无限制的后台任务（必须设置超时和取消机制）
6. 禁止引入未经审查的第三方库（检查维护状态、安全漏洞、包体积）
7. 禁止硬编码 IP 地址、域名或环境配置
8. 禁止在 App Store / Play Store 审核中使用测试数据
 
## ⚠️ 必须遵守（代码审查重点）
1. 所有副作用必须有对应的清理逻辑
2. 所有网络请求必须有超时、重试和错误处理
3. 所有用户输入必须验证和清理
4. 所有列表必须使用虚拟化渲染（FlatList/LazyColumn/ListView.builder）
5. 所有图片必须有加载状态、错误状态和缓存策略
6. 所有导航必须支持 deep linking
7. 所有文本必须支持国际化（即使当前只有一种语言）
8. 所有触摸目标最小 44x44pt / 48x48dp
 
## ✅ 推荐实践（提升代码质量）
1. 使用设计 token 而非硬编码颜色/字体/间距
2. 组件设计遵循单一职责原则
3. 业务逻辑与 UI 分离（MVVM / Clean Architecture）
4. 使用 TypeScript strict / Dart strict / Swift strict concurrency
5. 关键路径有单元测试覆盖
6. 使用 CI/CD 自动化构建和测试

// ❌ AI 常见错误：未清理 useEffect 中的订阅
import { useEffect, useState } from 'react';
import { AppState, Dimensions } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
 
function DashboardScreen() {
  const [isOnline, setIsOnline] = useState(true);
  const [orientation, setOrientation] = useState('portrait');
 
  useEffect(() => {
    // 问题 1：NetInfo 订阅未取消
    NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected ?? false);
    });
 
    // 问题 2：AppState 监听未移除
    AppState.addEventListener('change', (nextState) => {
      if (nextState === 'active') {
        // 刷新数据...
      }
    });
 
    // 问题 3：Dimensions 监听未移除
    Dimensions.addEventListener('change', ({ window }) => {
      setOrientation(window.width > window.height ? 'landscape' : 'portrait');
    });
 
    // 问题 4：定时器未清除
    setInterval(() => {
      // 轮询数据...
    }, 30000);
 
    // ❌ 没有返回清理函数！
  }, []);
 
  return (/* ... */);
}

// ✅ 正确写法：所有副作用都有对应的清理
import { useEffect, useState, useCallback } from 'react';
import { AppState, useWindowDimensions } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
 
function DashboardScreen() {
  const [isOnline, setIsOnline] = useState(true);
  const { width, height } = useWindowDimensions(); // 自动管理生命周期
  const orientation = width > height ? 'landscape' : 'portrait';
 
  // 网络状态监听（自动清理）
  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected ?? false);
    });
    return () => unsubscribe(); // ✅ 清理订阅
  }, []);
 
  // AppState 监听（自动清理）
  useEffect(() => {
    const subscription = AppState.addEventListener('change', (nextState) => {
      if (nextState === 'active') {
        // 刷新数据...
      }
    });
    return () => subscription.remove(); // ✅ 移除监听
  }, []);
 
  // 轮询（自动清理）
  useEffect(() => {
    const intervalId = setInterval(() => {
      // 轮询数据...
    }, 30000);
    return () => clearInterval(intervalId); // ✅ 清除定时器
  }, []);
 
  // ✅ 使用 useWindowDimensions 替代手动监听 Dimensions
  // 它会自动订阅和取消订阅
 
  return (/* ... */);
}

// ❌ AI 常见错误：闭包中的强引用导致循环引用
class LocationManager: ObservableObject {
    @Published var currentLocation: CLLocation?
    private var locationManager = CLLocationManager()
    private var timer: Timer?
 
    init() {
        // 问题 1：Timer 持有 self 的强引用
        timer = Timer.scheduledTimer(withTimeInterval: 60, repeats: true) { _ in
            self.refreshLocation() // ❌ 强引用 self
        }
 
        // 问题 2：闭包持有 self 的强引用
        NotificationCenter.default.addObserver(
            forName: UIApplication.didBecomeActiveNotification,
            object: nil,
            queue: .main
        ) { _ in
            self.refreshLocation() // ❌ 强引用 self
        }
    }
 
    func refreshLocation() {
        // 刷新位置...
    }
 
    // ❌ 没有 deinit 清理！
}

// ✅ 正确写法：使用 [weak self] 和 deinit 清理
class LocationManager: ObservableObject {
    @Published var currentLocation: CLLocation?
    private var locationManager = CLLocationManager()
    private var timer: Timer?
    private var cancellables = Set<AnyCancellable>()
 
    init() {
        // ✅ Timer 使用 [weak self]
        timer = Timer.scheduledTimer(withTimeInterval: 60, repeats: true) { [weak self] _ in
            self?.refreshLocation()
        }
 
        // ✅ 使用 Combine 的 NotificationCenter publisher（自动管理生命周期）
        NotificationCenter.default.publisher(for: UIApplication.didBecomeActiveNotification)
            .sink { [weak self] _ in
                self?.refreshLocation()
            }
            .store(in: &cancellables) // ✅ 存储在 cancellables 中
    }
 
    func refreshLocation() {
        // 刷新位置...
    }
 
    deinit {
        timer?.invalidate() // ✅ 清理定时器
        cancellables.removeAll() // ✅ 取消所有订阅
    }
}

// ❌ AI 常见错误：Controller 未 dispose
class ChatScreen extends StatefulWidget {
  @override
  State<ChatScreen> createState() => _ChatScreenState();
}
 
class _ChatScreenState extends State<ChatScreen> {
  final _scrollController = ScrollController();
  final _textController = TextEditingController();
  final _focusNode = FocusNode();
  late StreamSubscription _messageSubscription;
 
  @override
  void initState() {
    super.initState();
    // 问题：订阅了 Stream 但没有在 dispose 中取消
    _messageSubscription = chatService.messageStream.listen((message) {
      setState(() {
        // 添加消息...
      });
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    });
  }
 
  // ❌ 没有 dispose 方法！所有 Controller 和订阅都会泄漏
  // ScrollController、TextEditingController、FocusNode、StreamSubscription
  // 全部没有被释放
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(/* ... */);
  }
}

// ✅ 正确写法：所有资源在 dispose 中释放
class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});
 
  @override
  State<ChatScreen> createState() => _ChatScreenState();
}
 
class _ChatScreenState extends State<ChatScreen> {
  final _scrollController = ScrollController();
  final _textController = TextEditingController();
  final _focusNode = FocusNode();
  late final StreamSubscription _messageSubscription;
 
  @override
  void initState() {
    super.initState();
    _messageSubscription = chatService.messageStream.listen((message) {
      if (!mounted) return; // ✅ 检查 widget 是否仍然挂载
      setState(() {
        // 添加消息...
      });
      // ✅ 延迟滚动，确保列表已更新
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (_scrollController.hasClients) {
          _scrollController.animateTo(
            _scrollController.position.maxScrollExtent,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
          );
        }
      });
    });
  }
 
  @override
  void dispose() {
    _messageSubscription.cancel(); // ✅ 取消 Stream 订阅
    _scrollController.dispose();   // ✅ 释放 ScrollController
    _textController.dispose();     // ✅ 释放 TextEditingController
    _focusNode.dispose();          // ✅ 释放 FocusNode
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(/* ... */);
  }
}

// ❌ AI 常见错误：在 Composable 中启动不受管理的协程
@Composable
fun LiveDataScreen(viewModel: LiveDataViewModel) {
    val scope = CoroutineScope(Dispatchers.IO) // ❌ 每次重组创建新 scope
 
    LaunchedEffect(Unit) {
        // 问题 1：使用 GlobalScope，永远不会被取消
        GlobalScope.launch {
            while (true) {
                viewModel.fetchLatestData()
                delay(30_000)
            }
        }
    }
 
    // 问题 2：在 onClick 中使用未管理的 scope
    Button(onClick = {
        scope.launch { // ❌ 这个 scope 不会随 Composable 销毁而取消
            viewModel.uploadData()
        }
    }) {
        Text("上传")
    }
}

// ✅ 正确写法：使用生命周期感知的协程 scope
@Composable
fun LiveDataScreen(viewModel: LiveDataViewModel) {
    val scope = rememberCoroutineScope() // ✅ 随 Composable 生命周期管理
 
    // ✅ LaunchedEffect 自动在 Composable 离开组合时取消
    LaunchedEffect(Unit) {
        while (isActive) { // ✅ 检查协程是否仍然活跃
            viewModel.fetchLatestData()
            delay(30_000)
        }
    }
 
    Button(onClick = {
        scope.launch { // ✅ 使用 rememberCoroutineScope
            viewModel.uploadData()
        }
    }) {
        Text("上传")
    }
}
 
// ✅ ViewModel 中使用 viewModelScope
class LiveDataViewModel : ViewModel() {
    private var pollingJob: Job? = null
 
    fun startPolling() {
        pollingJob?.cancel() // ✅ 取消之前的轮询
        pollingJob = viewModelScope.launch { // ✅ 随 ViewModel 销毁自动取消
            while (isActive) {
                fetchLatestData()
                delay(30_000)
            }
        }
    }
 
    suspend fun fetchLatestData() { /* ... */ }
    suspend fun uploadData() { /* ... */ }
 
    override fun onCleared() {
        super.onCleared()
        pollingJob?.cancel() // ✅ 显式取消（虽然 viewModelScope 会自动取消）
    }
}

请审查以下 [React Native / SwiftUI / Flutter / Compose] 代码的内存管理：

[粘贴代码]

检查清单：
1. 所有 useEffect / LaunchedEffect / initState 是否有对应的清理逻辑？
2. 闭包中是否存在对 self/this/组件的强引用？
3. 定时器（Timer/setInterval）是否在组件销毁时清除？
4. Stream/Flow/Combine 订阅是否在组件销毁时取消？
5. 大对象（图片、数据集）是否有缓存上限和释放策略？
6. 导航栈是否可能无限增长？
7. 事件监听器是否在不需要时移除？

对于发现的每个问题，请：
- 标注问题位置和严重程度（高/中/低）
- 解释为什么会导致内存泄漏
- 提供修复后的代码

// ❌ AI 常见错误：频繁轮询 + 持续高精度定位
import * as Location from 'expo-location';
 
function DeliveryTracker() {
  const [location, setLocation] = useState(null);
  const [orders, setOrders] = useState([]);
 
  useEffect(() => {
    // 问题 1：每 5 秒轮询一次订单状态（极度耗电）
    const pollInterval = setInterval(async () => {
      const response = await fetch('https://api.example.com/orders');
      const data = await response.json();
      setOrders(data);
    }, 5000); // ❌ 5 秒太频繁
 
    // 问题 2：持续高精度 GPS 定位
    Location.watchPositionAsync(
      {
        accuracy: Location.Accuracy.BestForNavigation, // ❌ 最高精度，极度耗电
        distanceInterval: 0, // ❌ 任何移动都触发更新
        timeInterval: 1000,  // ❌ 每秒更新
      },
      (newLocation) => {
        setLocation(newLocation);
        // 问题 3：每次位置更新都发送到服务器
        fetch('https://api.example.com/location', {
          method: 'POST',
          body: JSON.stringify(newLocation.coords),
        });
      }
    );
 
    // ❌ 没有清理！
  }, []);
 
  return (/* ... */);
}

// ✅ 正确写法：智能轮询 + 自适应定位精度
import * as Location from 'expo-location';
import NetInfo from '@react-native-community/netinfo';
import { AppState } from 'react-native';
 
function DeliveryTracker() {
  const [location, setLocation] = useState(null);
  const [orders, setOrders] = useState([]);
  const appState = useRef(AppState.currentState);
  const locationBuffer = useRef<Location.LocationObject[]>([]);
 
  useEffect(() => {
    let pollInterval: NodeJS.Timeout;
    let locationSubscription: Location.LocationSubscription;
    let appStateSubscription: any;
 
    const startTracking = async () => {
      // ✅ 根据应用状态调整轮询频率
      const getPollInterval = () => {
        return appState.current === 'active' ? 30000 : 120000; // 前台 30s，后台 2min
      };
 
      const pollOrders = async () => {
        const netState = await NetInfo.fetch();
        if (!netState.isConnected) return; // ✅ 离线时跳过
 
        try {
          const response = await fetch('https://api.example.com/orders');
          const data = await response.json();
          setOrders(data);
        } catch (error) {
          // 静默失败，下次轮询重试
        }
        // ✅ 动态调整下次轮询间隔
        pollInterval = setTimeout(pollOrders, getPollInterval());
      };
 
      pollInterval = setTimeout(pollOrders, getPollInterval());
 
      // ✅ 自适应定位精度
      locationSubscription = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.Balanced, // ✅ 平衡精度（~100m）
          distanceInterval: 50,  // ✅ 移动 50 米才更新
          timeInterval: 10000,   // ✅ 最多每 10 秒更新一次
        },
        (newLocation) => {
          setLocation(newLocation);
          // ✅ 缓冲位置数据，批量上传
          locationBuffer.current.push(newLocation);
          if (locationBuffer.current.length >= 5) {
            uploadLocations(locationBuffer.current);
            locationBuffer.current = [];
          }
        }
      );
 
      // ✅ 监听应用状态变化
      appStateSubscription = AppState.addEventListener('change', (nextState) => {
        if (nextState === 'background') {
          // 进入后台：降低定位频率，暂停非必要轮询
          uploadLocations(locationBuffer.current); // 上传缓冲数据
          locationBuffer.current = [];
        }
        appState.current = nextState;
      });
    };
 
    startTracking();
 
    return () => {
      clearTimeout(pollInterval);        // ✅ 清理轮询
      locationSubscription?.remove();     // ✅ 停止定位
      appStateSubscription?.remove();     // ✅ 移除监听
    };
  }, []);
 
  return (/* ... */);
}
 
// ✅ 批量上传位置数据
async function uploadLocations(locations: Location.LocationObject[]) {
  if (locations.length === 0) return;
  try {
    await fetch('https://api.example.com/locations/batch', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(locations.map(l => l.coords)),
    });
  } catch {
    // 失败时保留数据，下次重试
  }
}

// ❌ AI 常见错误：过度使用后台刷新
class WeatherViewModel: ObservableObject {
    @Published var weather: Weather?
    private var timer: Timer?
 
    init() {
        // 问题：即使应用在后台也每分钟刷新天气
        timer = Timer.scheduledTimer(withTimeInterval: 60, repeats: true) { [weak self] _ in
            Task {
                await self?.fetchWeather() // ❌ 后台也在请求
            }
        }
        // 问题：启动时立即请求，不检查缓存
        Task { await fetchWeather() }
    }
 
    func fetchWeather() async {
        // 每次都发网络请求，不使用缓存
        let url = URL(string: "https://api.weather.com/current")!
        let (data, _) = try! await URLSession.shared.data(from: url) // ❌ 强制解包
        weather = try! JSONDecoder().decode(Weather.self, from: data)
    }
}

// ✅ 正确写法：智能缓存 + 生命周期感知刷新
class WeatherViewModel: ObservableObject {
    @Published var weather: Weather?
    @Published var lastUpdated: Date?
    private var refreshTask: Task<Void, Never>?
    private let cache = WeatherCache()
    private let minRefreshInterval: TimeInterval = 600 // 10 分钟
 
    func onAppear() {
        // ✅ 先加载缓存
        if let cached = cache.load() {
            weather = cached.weather
            lastUpdated = cached.timestamp
        }
 
        // ✅ 仅在缓存过期时刷新
        if shouldRefresh() {
            startAutoRefresh()
        }
    }
 
    func onDisappear() {
        // ✅ 离开页面时停止自动刷新
        refreshTask?.cancel()
        refreshTask = nil
    }
 
    private func shouldRefresh() -> Bool {
        guard let lastUpdated else { return true }
        return Date().timeIntervalSince(lastUpdated) > minRefreshInterval
    }
 
    private func startAutoRefresh() {
        refreshTask?.cancel()
        refreshTask = Task { [weak self] in
            while !Task.isCancelled {
                await self?.fetchWeather()
                try? await Task.sleep(for: .seconds(600)) // ✅ 10 分钟刷新一次
            }
        }
    }
 
    func fetchWeather() async {
        do {
            let url = URL(string: "https://api.weather.com/current")!
            let (data, _) = try await URLSession.shared.data(from: url)
            let decoded = try JSONDecoder().decode(Weather.self, from: data)
 
            await MainActor.run {
                weather = decoded
                lastUpdated = Date()
            }
            // ✅ 更新缓存
            cache.save(weather: decoded, timestamp: Date())
        } catch {
            // ✅ 网络错误时使用缓存数据，不崩溃
            print("Weather fetch failed, using cached data: \(error)")
        }
    }
}

请审查以下移动端代码的电池消耗情况：

[粘贴代码]

重点检查：
1. 网络请求频率是否合理？是否可以批量合并？
2. GPS 定位精度是否过高？是否可以降低？
3. 后台任务是否有超时和取消机制？
4. 动画是否运行在原生线程？
5. 传感器（加速度计、陀螺仪）是否在不需要时停止？
6. 应用进入后台时是否暂停非必要操作？

对于每个问题，请提供：
- 预估的电池影响（高/中/低）
- 优化后的代码
- 预期的电池节省百分比

// ❌ AI 常见错误：不检查权限直接使用相机
import { Camera } from 'expo-camera';
 
function ScannerScreen() {
  // 问题 1：没有检查相机权限
  // 问题 2：没有处理权限拒绝
  // 问题 3：没有处理权限永久拒绝
  return (
    <Camera
      style={{ flex: 1 }}
      onBarCodeScanned={({ data }) => {
        console.log('Scanned:', data);
      }}
    />
    // ❌ 如果用户没有授予相机权限，这里会崩溃或显示黑屏
  );
}

// ✅ 正确写法：完整的权限处理流程
import { useState, useEffect } from 'react';
import { Camera, CameraView } from 'expo-camera';
import { Alert, Linking, Platform, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
type PermissionState = 'loading' | 'undetermined' | 'granted' | 'denied' | 'blocked';
 
function ScannerScreen() {
  const [permissionState, setPermissionState] = useState<PermissionState>('loading');
 
  useEffect(() => {
    checkPermission();
  }, []);
 
  const checkPermission = async () => {
    const { status } = await Camera.getCameraPermissionsAsync();
    if (status === 'granted') {
      setPermissionState('granted');
    } else if (status === 'undetermined') {
      setPermissionState('undetermined');
    } else {
      // iOS: 'denied' 意味着可以再次请求或已永久拒绝
      // Android: 需要检查 canAskAgain
      setPermissionState('denied');
    }
  };
 
  const requestPermission = async () => {
    // ✅ 先显示自定义说明（在系统弹窗之前）
    Alert.alert(
      '需要相机权限',
      '扫描二维码需要使用您的相机。我们不会录制或存储任何影像。',
      [
        { text: '暂不开启', style: 'cancel' },
        {
          text: '开启相机',
          onPress: async () => {
            const { status, canAskAgain } = await Camera.requestCameraPermissionsAsync();
            if (status === 'granted') {
              setPermissionState('granted');
            } else if (!canAskAgain) {
              setPermissionState('blocked'); // ✅ 永久拒绝
            } else {
              setPermissionState('denied');
            }
          },
        },
      ]
    );
  };
 
  const openSettings = () => {
    // ✅ 引导用户到系统设置页
    if (Platform.OS === 'ios') {
      Linking.openURL('app-settings:');
    } else {
      Linking.openSettings();
    }
  };
 
  // ✅ 根据权限状态渲染不同 UI
  switch (permissionState) {
    case 'loading':
      return <LoadingView />;
 
    case 'undetermined':
    case 'denied':
      return (
        <View style={styles.permissionContainer}>
          <Text style={styles.icon}>📷</Text>
          <Text style={styles.title}>需要相机权限</Text>
          <Text style={styles.description}>
            扫描二维码需要使用相机。{'\n'}
            我们不会录制或存储任何影像。
          </Text>
          <TouchableOpacity style={styles.button} onPress={requestPermission}>
            <Text style={styles.buttonText}>开启相机权限</Text>
          </TouchableOpacity>
          {/* ✅ 提供手动输入的降级方案 */}
          <TouchableOpacity style={styles.linkButton} onPress={() => {/* 导航到手动输入页 */}}>
            <Text style={styles.linkText}>手动输入编码</Text>
          </TouchableOpacity>
        </View>
      );
 
    case 'blocked':
      return (
        <View style={styles.permissionContainer}>
          <Text style={styles.icon}>⚙️</Text>
          <Text style={styles.title}>相机权限已关闭</Text>
          <Text style={styles.description}>
            请在系统设置中开启相机权限，{'\n'}
            才能使用扫码功能。
          </Text>
          <TouchableOpacity style={styles.button} onPress={openSettings}>
            <Text style={styles.buttonText}>前往设置</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.linkButton} onPress={() => {/* 导航到手动输入页 */}}>
            <Text style={styles.linkText}>手动输入编码</Text>
          </TouchableOpacity>
        </View>
      );
 
    case 'granted':
      return (
        <CameraView
          style={{ flex: 1 }}
          barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
          onBarcodeScanned={({ data }) => {
            // 处理扫描结果...
          }}
        />
      );
  }
}
 
const styles = StyleSheet.create({
  permissionContainer: {
    flex: 1, justifyContent: 'center', alignItems: 'center', padding: 32,
  },
  icon: { fontSize: 64, marginBottom: 16 },
  title: { fontSize: 20, fontWeight: '700', marginBottom: 8, textAlign: 'center' },
  description: { fontSize: 15, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
  button: {
    backgroundColor: '#007AFF', paddingHorizontal: 32, paddingVertical: 14,
    borderRadius: 12, marginBottom: 16,
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
  linkButton: { padding: 8 },
  linkText: { color: '#007AFF', fontSize: 15 },
});

// ❌ AI 常见错误：权限处理不完整
@Composable
fun CameraScreen() {
    // 问题：只处理了 granted，没有处理 denied 和 permanently denied
    val permissionState = rememberPermissionState(Manifest.permission.CAMERA)
 
    if (permissionState.status.isGranted) {
        CameraPreview()
    } else {
        // ❌ 直接请求，没有解释为什么需要
        Button(onClick = { permissionState.launchPermissionRequest() }) {
            Text("授予相机权限")
        }
        // ❌ 如果用户选择"不再询问"，这个按钮将永远无效
    }
}

// ✅ 正确写法：完整的 Android 权限处理
@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun CameraScreen(
    onManualInput: () -> Unit // ✅ 降级方案回调
) {
    val permissionState = rememberPermissionState(Manifest.permission.CAMERA)
    var showRationale by remember { mutableStateOf(false) }
 
    // ✅ 权限说明对话框
    if (showRationale) {
        AlertDialog(
            onDismissRequest = { showRationale = false },
            title = { Text("需要相机权限") },
            text = { Text("扫描二维码需要使用相机。我们不会录制或存储任何影像。") },
            confirmButton = {
                TextButton(onClick = {
                    showRationale = false
                    permissionState.launchPermissionRequest()
                }) { Text("开启") }
            },
            dismissButton = {
                TextButton(onClick = { showRationale = false }) { Text("暂不") }
            }
        )
    }
 
    when {
        // ✅ 已授权：显示相机
        permissionState.status.isGranted -> {
            CameraPreview()
        }
        // ✅ 需要解释（用户之前拒绝过，但没有选择"不再询问"）
        permissionState.status.shouldShowRationale -> {
            PermissionRequestUI(
                icon = Icons.Default.CameraAlt,
                title = "需要相机权限",
                description = "扫描二维码需要使用相机。\n我们不会录制或存储任何影像。",
                primaryAction = "开启相机权限",
                onPrimaryClick = { showRationale = true },
                secondaryAction = "手动输入编码",
                onSecondaryClick = onManualInput
            )
        }
        // ✅ 永久拒绝：引导到设置页
        else -> {
            val context = LocalContext.current
            PermissionRequestUI(
                icon = Icons.Default.Settings,
                title = "相机权限已关闭",
                description = "请在系统设置中开启相机权限。",
                primaryAction = "前往设置",
                onPrimaryClick = {
                    val intent = Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS).apply {
                        data = Uri.fromParts("package", context.packageName, null)
                    }
                    context.startActivity(intent)
                },
                secondaryAction = "手动输入编码",
                onSecondaryClick = onManualInput
            )
        }
    }
}
 
// ✅ 可复用的权限请求 UI 组件
@Composable
fun PermissionRequestUI(
    icon: ImageVector,
    title: String,
    description: String,
    primaryAction: String,
    onPrimaryClick: () -> Unit,
    secondaryAction: String,
    onSecondaryClick: () -> Unit
) {
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Icon(icon, contentDescription = null, modifier = Modifier.size(64.dp),
             tint = MaterialTheme.colorScheme.primary)
        Spacer(Modifier.height(16.dp))
        Text(title, style = MaterialTheme.typography.headlineSmall,
             textAlign = TextAlign.Center)
        Spacer(Modifier.height(8.dp))
        Text(description, style = MaterialTheme.typography.bodyMedium,
             textAlign = TextAlign.Center, color = MaterialTheme.colorScheme.onSurfaceVariant)
        Spacer(Modifier.height(24.dp))
        Button(onClick = onPrimaryClick, modifier = Modifier.fillMaxWidth()) {
            Text(primaryAction)
        }
        Spacer(Modifier.height(8.dp))
        TextButton(onClick = onSecondaryClick) {
            Text(secondaryAction)
        }
    }
}

为 [应用功能] 生成完整的权限处理代码：

框架：[React Native / SwiftUI / Jetpack Compose / Flutter]
需要的权限：[相机 / 定位 / 照片 / 通知 / 麦克风 / ...]

必须包含：
1. 权限状态检查（granted / denied / undetermined / blocked）
2. 自定义权限说明弹窗（在系统弹窗之前显示，解释为什么需要）
3. 权限拒绝后的降级方案（应用不能崩溃或白屏）
4. 永久拒绝后引导到系统设置页
5. iOS 和 Android 的差异处理
6. 可复用的权限请求 UI 组件

权限请求时机：
- 不要在应用启动时请求
- 在用户即将使用相关功能时请求（just-in-time）
- 先显示自定义说明，再触发系统权限弹窗

// ❌ AI 常见错误：完全依赖网络，无离线策略
function ProductListScreen() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchProducts();
  }, []);
 
  const fetchProducts = async () => {
    setLoading(true);
    try {
      const response = await fetch('https://api.example.com/products');
      const data = await response.json();
      setProducts(data);
    } catch (err) {
      setError('加载失败'); // ❌ 离线时只显示"加载失败"，无任何数据
    } finally {
      setLoading(false);
    }
  };
 
  if (loading) return <ActivityIndicator />;
  if (error) return <Text>{error}</Text>; // ❌ 离线时用户看到的就是这个
  // ❌ 没有缓存，每次进入页面都要重新加载
  // ❌ 没有离线状态指示
  // ❌ 没有重试机制
 
  return <FlatList data={products} renderItem={/* ... */} />;
}

// ✅ 正确写法：离线优先 + 智能缓存 + 自动重试
import { useQuery, useQueryClient, QueryClient } from '@tanstack/react-query';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo, { useNetInfo } from '@react-native-community/netinfo';
 
// ✅ 配置持久化缓存
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 缓存 24 小时
      staleTime: 1000 * 60 * 5,     // 5 分钟内认为数据新鲜
      retry: 3,                      // 自动重试 3 次
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // 指数退避
    },
  },
});
 
const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: 'REACT_QUERY_CACHE',
});
 
// ✅ 离线感知的产品列表
function ProductListScreen() {
  const netInfo = useNetInfo();
  const isOffline = !netInfo.isConnected;
 
  const {
    data: products,
    isLoading,
    isError,
    error,
    refetch,
    dataUpdatedAt,
  } = useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const response = await fetch('https://api.example.com/products');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.json();
    },
    // ✅ 离线时使用缓存数据，不发起请求
    enabled: !isOffline || !queryClient.getQueryData(['products']),
  });
 
  return (
    <View style={{ flex: 1 }}>
      {/* ✅ 离线状态指示器 */}
      {isOffline && (
        <View style={styles.offlineBanner}>
          <Text style={styles.offlineText}>📡 当前处于离线模式，显示的是缓存数据</Text>
        </View>
      )}
 
      {/* ✅ 数据新鲜度提示 */}
      {dataUpdatedAt && (
        <Text style={styles.freshness}>
          最后更新：{new Date(dataUpdatedAt).toLocaleString()}
        </Text>
      )}
 
      {isLoading && !products ? (
        <ActivityIndicator />
      ) : isError && !products ? (
        // ✅ 错误状态：区分离线和服务器错误
        <View style={styles.errorContainer}>
          <Text style={styles.errorIcon}>
            {isOffline ? '📡' : '⚠️'}
          </Text>
          <Text style={styles.errorTitle}>
            {isOffline ? '无网络连接' : '加载失败'}
          </Text>
          <Text style={styles.errorMessage}>
            {isOffline
              ? '请检查网络连接后重试'
              : '服务器暂时不可用，请稍后重试'}
          </Text>
          <TouchableOpacity style={styles.retryButton} onPress={() => refetch()}>
            <Text style={styles.retryText}>重试</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <FlatList
          data={products}
          renderItem={({ item }) => <ProductCard product={item} />}
          // ✅ 下拉刷新（仅在线时可用）
          refreshing={isLoading}
          onRefresh={isOffline ? undefined : refetch}
        />
      )}
    </View>
  );
}

// ❌ AI 常见错误：表单提交失败时数据丢失
class FeedbackForm extends StatefulWidget {
  @override
  State<FeedbackForm> createState() => _FeedbackFormState();
}
 
class _FeedbackFormState extends State<FeedbackForm> {
  final _controller = TextEditingController();
 
  Future<void> _submit() async {
    try {
      final response = await http.post(
        Uri.parse('https://api.example.com/feedback'),
        body: jsonEncode({'content': _controller.text}),
      );
      if (response.statusCode == 200) {
        Navigator.pop(context);
      }
    } catch (e) {
      // ❌ 网络错误时只显示 SnackBar，用户的输入可能丢失
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('提交失败，请重试')),
      );
      // ❌ 如果用户此时退出页面，数据就丢失了
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        TextField(controller: _controller),
        ElevatedButton(onPressed: _submit, child: Text('提交')),
      ]),
    );
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

// ✅ 正确写法：离线队列 + 自动重试 + 数据持久化
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';
 
class FeedbackForm extends StatefulWidget {
  const FeedbackForm({super.key});
 
  @override
  State<FeedbackForm> createState() => _FeedbackFormState();
}
 
class _FeedbackFormState extends State<FeedbackForm> with WidgetsBindingObserver {
  final _controller = TextEditingController();
  bool _isSubmitting = false;
  bool _isOffline = false;
 
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _checkConnectivity();
    _restoreDraft(); // ✅ 恢复草稿
  }
 
  Future<void> _checkConnectivity() async {
    final result = await Connectivity().checkConnectivity();
    setState(() => _isOffline = result.contains(ConnectivityResult.none));
 
    // ✅ 监听网络变化
    Connectivity().onConnectivityChanged.listen((results) {
      final wasOffline = _isOffline;
      setState(() => _isOffline = results.contains(ConnectivityResult.none));
      // ✅ 网络恢复时自动重试队列中的请求
      if (wasOffline && !_isOffline) {
        _retryPendingSubmissions();
      }
    });
  }
 
  // ✅ 自动保存草稿
  Future<void> _saveDraft() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('feedback_draft', _controller.text);
  }
 
  // ✅ 恢复草稿
  Future<void> _restoreDraft() async {
    final prefs = await SharedPreferences.getInstance();
    final draft = prefs.getString('feedback_draft');
    if (draft != null && draft.isNotEmpty) {
      _controller.text = draft;
    }
  }
 
  Future<void> _submit() async {
    if (_controller.text.trim().isEmpty) return;
    setState(() => _isSubmitting = true);
 
    if (_isOffline) {
      // ✅ 离线时保存到本地队列
      await _saveToOfflineQueue(_controller.text);
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('已保存，将在网络恢复后自动提交'),
            backgroundColor: Colors.orange,
          ),
        );
        _clearDraft();
        Navigator.pop(context);
      }
    } else {
      try {
        final response = await http.post(
          Uri.parse('https://api.example.com/feedback'),
          headers: {'Content-Type': 'application/json'},
          body: jsonEncode({'content': _controller.text}),
        ).timeout(const Duration(seconds: 15)); // ✅ 设置超时
 
        if (response.statusCode == 200) {
          _clearDraft();
          if (mounted) Navigator.pop(context);
        } else {
          throw Exception('Server error: ${response.statusCode}');
        }
      } catch (e) {
        // ✅ 提交失败时保存到离线队列
        await _saveToOfflineQueue(_controller.text);
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('提交失败，已保存到本地，稍后自动重试'),
              backgroundColor: Colors.orange,
            ),
          );
        }
      }
    }
    setState(() => _isSubmitting = false);
  }
 
  Future<void> _saveToOfflineQueue(String content) async {
    final prefs = await SharedPreferences.getInstance();
    final queue = prefs.getStringList('offline_queue') ?? [];
    queue.add(jsonEncode({
      'content': content,
      'timestamp': DateTime.now().toIso8601String(),
    }));
    await prefs.setStringList('offline_queue', queue);
  }
 
  Future<void> _retryPendingSubmissions() async {
    final prefs = await SharedPreferences.getInstance();
    final queue = prefs.getStringList('offline_queue') ?? [];
    if (queue.isEmpty) return;
 
    final failedItems = <String>[];
    for (final item in queue) {
      try {
        final data = jsonDecode(item);
        await http.post(
          Uri.parse('https://api.example.com/feedback'),
          headers: {'Content-Type': 'application/json'},
          body: jsonEncode(data),
        ).timeout(const Duration(seconds: 15));
      } catch (e) {
        failedItems.add(item); // 重试失败的保留在队列中
      }
    }
    await prefs.setStringList('offline_queue', failedItems);
  }
 
  Future<void> _clearDraft() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('feedback_draft');
  }
 
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
      _saveDraft(); // ✅ 应用进入后台时保存草稿
    }
  }
 
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _saveDraft(); // ✅ 页面销毁时保存草稿
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('反馈'),
        actions: [
          if (_isOffline)
            const Padding(
              padding: EdgeInsets.only(right: 16),
              child: Icon(Icons.cloud_off, color: Colors.orange), // ✅ 离线指示
            ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(children: [
          if (_isOffline)
            Container(
              padding: const EdgeInsets.all(12),
              margin: const EdgeInsets.only(bottom: 16),
              decoration: BoxDecoration(
                color: Colors.orange.shade50,
                borderRadius: BorderRadius.circular(8),
              ),
              child: const Row(children: [
                Icon(Icons.info_outline, color: Colors.orange, size: 20),
                SizedBox(width: 8),
                Expanded(child: Text('当前离线，提交后将在网络恢复时自动发送',
                    style: TextStyle(color: Colors.orange, fontSize: 13))),
              ]),
            ),
          Expanded(
            child: TextField(
              controller: _controller,
              maxLines: null,
              expands: true,
              textAlignVertical: TextAlignVertical.top,
              decoration: const InputDecoration(
                hintText: '请输入您的反馈...',
                border: OutlineInputBorder(),
              ),
              onChanged: (_) => _saveDraft(), // ✅ 实时保存草稿
            ),
          ),
          const SizedBox(height: 16),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: _isSubmitting ? null : _submit,
              child: _isSubmitting
                  ? const SizedBox(width: 20, height: 20,
                      child: CircularProgressIndicator(strokeWidth: 2))
                  : Text(_isOffline ? '保存并稍后发送' : '提交'),
            ),
          ),
        ]),
      ),
    );
  }
}

┌─────────────────────────────────────────────────────────┐
│                    离线优先架构                           │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  UI 层                                                  │
│  ┌──────────────────────────────────────────────┐       │
│  │  离线状态指示器 │ 数据新鲜度标签 │ 重试按钮  │       │
│  └──────────────────────────────────────────────┘       │
│                         ↕                               │
│  Repository 层（数据源协调）                              │
│  ┌──────────────────────────────────────────────┐       │
│  │  1. 先读本地缓存（即时响应）                    │       │
│  │  2. 后台请求远程数据                           │       │
│  │  3. 远程数据到达后更新本地缓存和 UI             │       │
│  │  4. 写操作：先写本地 → 加入同步队列             │       │
│  └──────────────────────────────────────────────┘       │
│              ↕                    ↕                      │
│  ┌──────────────┐    ┌──────────────────────┐           │
│  │  本地存储      │    │  同步队列              │           │
│  │  SQLite/MMKV  │    │  待上传操作列表        │           │
│  │  Hive/Drift   │    │  冲突解决策略          │           │
│  └──────────────┘    │  指数退避重试          │           │
│                      └──────────────────────┘           │
│                               ↕                         │
│  ┌──────────────────────────────────────────────┐       │
│  │  网络层                                       │       │
│  │  连接状态监听 → 在线时自动同步队列              │       │
│  └──────────────────────────────────────────────┘       │
└─────────────────────────────────────────────────────────┘

// ❌ AI 常见错误：不处理平台差异
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
 
function LoginScreen() {
  return (
    <View style={styles.container}>
      {/* 问题 1：没有处理状态栏 */}
      <Text style={styles.title}>登录</Text>
 
      {/* 问题 2：阴影在 Android 上不生效 */}
      <View style={styles.card}>
        <TextInput
          style={styles.input}
          placeholder="邮箱"
          // 问题 3：键盘类型没有平台适配
          keyboardType="email-address"
          // 问题 4：自动大写在 Android 上行为不同
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholder="密码"
          secureTextEntry
        />
        {/* 问题 5：按钮样式在两个平台上看起来不同 */}
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>登录</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' },
  title: { fontSize: 28, fontWeight: 'bold', marginBottom: 20 },
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    // ❌ 这些阴影属性只在 iOS 上生效
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    // ❌ Android 需要 elevation，但效果和 iOS 阴影不同
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
    fontSize: 16,
    // ❌ 没有处理 Android TextInput 的下划线
  },
  button: {
    backgroundColor: '#007AFF', // ❌ 这是 iOS 蓝色，Android 应该用 Material 色
    borderRadius: 8,
    padding: 14,
    alignItems: 'center',
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

// ✅ 正确写法：完整的平台适配
import {
  View, Text, StyleSheet, TextInput, TouchableOpacity,
  Platform, StatusBar, KeyboardAvoidingView,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as Haptics from 'expo-haptics';
 
function LoginScreen() {
  const insets = useSafeAreaInsets();
 
  const handleLogin = async () => {
    // ✅ 平台适配的触觉反馈
    if (Platform.OS === 'ios') {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    }
    // Android 触觉反馈通过 TouchableOpacity 的 android_ripple 实现
    // ... 登录逻辑
  };
 
  return (
    <>
      {/* ✅ 平台适配的状态栏 */}
      <StatusBar
        barStyle="dark-content"
        backgroundColor={Platform.OS === 'android' ? '#f5f5f5' : undefined}
        translucent={Platform.OS === 'android'}
      />
 
      {/* ✅ 键盘避让：iOS 用 padding，Android 用 height */}
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : StatusBar.currentHeight || 0}
      >
        <View style={[
          styles.container,
          { paddingTop: insets.top + 20 } // ✅ 安全区域适配
        ]}>
          <Text style={styles.title}>登录</Text>
 
          <View style={styles.card}>
            <TextInput
              style={[
                styles.input,
                // ✅ Android 移除默认下划线
                Platform.OS === 'android' && { underlineColorAndroid: 'transparent' },
              ]}
              placeholder="邮箱"
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
              textContentType="emailAddress" // ✅ iOS 自动填充
              autoComplete="email"           // ✅ Android 自动填充
            />
            <TextInput
              style={[
                styles.input,
                Platform.OS === 'android' && { underlineColorAndroid: 'transparent' },
              ]}
              placeholder="密码"
              secureTextEntry
              textContentType="password"     // ✅ iOS 自动填充
              autoComplete="password"        // ✅ Android 自动填充
            />
            <TouchableOpacity
              style={styles.button}
              onPress={handleLogin}
              activeOpacity={0.8}
              // ✅ Android Material 水波纹效果
              {...(Platform.OS === 'android' && {
                android_ripple: { color: 'rgba(255,255,255,0.3)' },
              })}
            >
              <Text style={styles.buttonText}>登录</Text>
            </TouchableOpacity>
          </View>
        </View>
      </KeyboardAvoidingView>
    </>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' },
  title: {
    fontSize: 28,
    // ✅ 平台适配的字重
    fontWeight: Platform.select({ ios: '700', android: 'bold' }),
    marginBottom: 20,
    color: '#1a1a1a',
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    // ✅ 跨平台阴影
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 8,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: Platform.select({ ios: 14, android: 12 }), // ✅ 平台适配的内边距
    marginBottom: 12,
    fontSize: 16,
    color: '#1a1a1a',
  },
  button: {
    // ✅ 平台适配的主色
    backgroundColor: Platform.select({
      ios: '#007AFF',    // iOS 系统蓝
      android: '#6200EE', // Material 主色
    }),
    borderRadius: Platform.select({ ios: 10, android: 8 }),
    padding: 14,
    alignItems: 'center',
    marginTop: 4,
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

// ❌ AI 常见错误：在 iOS 上使用 Material 组件
class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('设置')), // ❌ iOS 上应该用 CupertinoNavigationBar
      body: ListView(
        children: [
          // ❌ iOS 上应该用 CupertinoSwitch
          SwitchListTile(
            title: Text('推送通知'),
            value: true,
            onChanged: (v) {},
          ),
          // ❌ iOS 上日期选择器应该用滚轮样式
          ListTile(
            title: Text('生日'),
            onTap: () {
              showDatePicker( // ❌ 这是 Material 日历样式
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(1900),
                lastDate: DateTime.now(),
              );
            },
          ),
        ],
      ),
    );
  }
}

// ✅ 正确写法：平台自适应组件
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});
 
  @override
  Widget build(BuildContext context) {
    // ✅ 根据平台选择不同的 Scaffold
    if (Platform.isIOS) {
      return CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text('设置'),
        ),
        child: _buildContent(context),
      );
    }
    return Scaffold(
      appBar: AppBar(title: const Text('设置')),
      body: _buildContent(context),
    );
  }
 
  Widget _buildContent(BuildContext context) {
    return ListView(
      children: [
        // ✅ 平台自适应开关
        _AdaptiveSwitch(
          title: '推送通知',
          value: true,
          onChanged: (v) {},
        ),
        // ✅ 平台自适应日期选择
        ListTile(
          title: const Text('生日'),
          trailing: const Icon(Icons.chevron_right),
          onTap: () => _showAdaptiveDatePicker(context),
        ),
      ],
    );
  }
 
  void _showAdaptiveDatePicker(BuildContext context) {
    if (Platform.isIOS) {
      // ✅ iOS：底部弹出滚轮选择器
      showCupertinoModalPopup(
        context: context,
        builder: (context) => Container(
          height: 300,
          color: CupertinoColors.systemBackground.resolveFrom(context),
          child: Column(children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CupertinoButton(child: const Text('取消'),
                    onPressed: () => Navigator.pop(context)),
                CupertinoButton(child: const Text('确定'),
                    onPressed: () => Navigator.pop(context)),
              ],
            ),
            Expanded(
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.date,
                onDateTimeChanged: (date) {},
              ),
            ),
          ]),
        ),
      );
    } else {
      // ✅ Android：Material 日历选择器
      showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1900),
        lastDate: DateTime.now(),
      );
    }
  }
}
 
// ✅ 平台自适应开关组件
class _AdaptiveSwitch extends StatelessWidget {
  final String title;
  final bool value;
  final ValueChanged<bool> onChanged;
 
  const _AdaptiveSwitch({
    required this.title,
    required this.value,
    required this.onChanged,
  });
 
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      trailing: Platform.isIOS
          ? CupertinoSwitch(value: value, onChanged: onChanged)
          : Switch(value: value, onChanged: onChanged),
    );
  }
}

请检查以下跨平台移动端代码的平台一致性：

框架：[React Native / Flutter]
[粘贴代码]

检查清单：
1. 阴影效果是否在 iOS 和 Android 上都正确显示？
2. 键盘弹出时内容是否在两个平台上都正确避让？
3. 状态栏样式是否在两个平台上都正确？
4. 导航行为（返回手势/返回键）是否在两个平台上都正确？
5. 日期/时间选择器是否使用了平台原生样式？
6. 触觉反馈是否在两个平台上都有实现？
7. 安全区域（刘海屏、Dynamic Island）是否正确处理？
8. 字体渲染和间距是否在两个平台上视觉一致？
9. 组件是否遵循各自平台的设计规范（iOS HIG / Material Design）？

对于发现的每个不一致，请提供平台适配的修复代码。