33d - AI 辅助移动端 UI

你的需求是什么？
├── 快速生成 UI 原型/设计稿
│   ├── 需要移动端多屏设计 → Google Stitch（免费）
│   ├── 需要导出到 Figma 编辑 → Banani / Google Stitch
│   └── 需要直接生成可用代码 → v0.dev
├── 构建完整移动应用
│   ├── 跨平台（React Native + Expo）→ Bolt.new + Expo
│   ├── iOS 原生（SwiftUI）→ Xcode 26 AI + Claude Code
│   └── Android 原生（Compose）→ Android Studio + Gemini
├── 现有项目 UI 优化
│   ├── 大规模 UI 重构 → Claude Code / Cursor
│   ├── 组件级优化 → Cursor + 平台规则文件
│   └── 设计稿转代码 → Locofy
└── UI 审查与改进
    └── 可用性/无障碍审查 → UX Pilot

┌─────────────────────────────────────────────────────────────┐
│                  AI 辅助移动端 UI 工作流                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ① 需求描述          ② AI 生成设计稿       ③ 设计审查       │
│  ┌──────────┐       ┌──────────────┐      ┌──────────┐     │
│  │ 自然语言  │──────→│ Google Stitch │─────→│ 人工审查  │     │
│  │ 线框图    │       │ Banani       │      │ 平台规范  │     │
│  │ 截图参考  │       │ v0.dev       │      │ 无障碍    │     │
│  └──────────┘       └──────────────┘      └────┬─────┘     │
│                                                 │           │
│  ④ 代码生成          ⑤ 平台适配            ⑥ 测试验证      │
│  ┌──────────────┐   ┌──────────────┐      ┌──────────┐     │
│  │ Cursor/Claude │   │ iOS: Liquid  │      │ 多设备   │     │
│  │ Code 生成     │←──│ Glass 适配   │──────→│ 预览测试  │     │
│  │ 组件代码      │   │ Android: M3  │      │ 手势验证  │     │
│  └──────────────┘   │ Expressive   │      │ 动画性能  │     │
│                     └──────────────┘      └──────────┘     │
└─────────────────────────────────────────────────────────────┘

为 [应用类型] 设计移动端 UI，要求：

目标平台：[iOS / Android / 跨平台]
设计风格：[iOS Liquid Glass / Material 3 Expressive / 自定义]
配色方案：[主色 #XXXXXX，强调色 #XXXXXX，背景色]
屏幕列表：
1. [首页/仪表板] - 包含 [关键元素列表]
2. [详情页] - 包含 [关键元素列表]
3. [设置页] - 包含 [关键元素列表]

特殊要求：
- 支持深色模式
- 底部导航栏 [N] 个标签
- 卡片式布局
- 适配 iPhone 16 Pro Max 和 iPhone SE 尺寸

生成一个 React Native 移动端 [组件名称] 组件：

功能需求：
- [功能描述 1]
- [功能描述 2]

UI 要求：
- 使用 React Native StyleSheet（不用 Tailwind）
- 支持 iOS 和 Android 平台差异处理
- 包含加载状态和空状态
- 适配不同屏幕尺寸（使用 Dimensions 或 useWindowDimensions）
- 支持深色/浅色主题

交互要求：
- [手势交互描述]
- [动画效果描述]
- 触觉反馈（iOS Haptics / Android Vibration）

// ✅ AI 生成的自适应布局基础架构
import { Dimensions, Platform, useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
// 响应式尺寸工具
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
const guidelineBaseWidth = 375; // iPhone 14 基准宽度
const guidelineBaseHeight = 812; // iPhone 14 基准高度
 
// 水平缩放（基于宽度）
export const scale = (size: number) => (SCREEN_WIDTH / guidelineBaseWidth) * size;
// 垂直缩放（基于高度）
export const verticalScale = (size: number) => (SCREEN_HEIGHT / guidelineBaseHeight) * size;
// 适度缩放（避免过度放大）
export const moderateScale = (size: number, factor = 0.5) =>
  size + (scale(size) - size) * factor;
 
// 设备类型检测
export const isSmallDevice = SCREEN_WIDTH < 375;
export const isLargeDevice = SCREEN_WIDTH >= 428;
export const isTablet = SCREEN_WIDTH >= 768;
 
// 自适应布局 Hook
export function useAdaptiveLayout() {
  const { width, height } = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const isLandscape = width > height;
 
  return {
    // 窗口尺寸类（类似 Material 3 WindowSizeClass）
    sizeClass: width < 600 ? 'compact' : width < 840 ? 'medium' : 'expanded',
    isLandscape,
    // 安全内容区域
    contentWidth: width - insets.left - insets.right,
    contentHeight: height - insets.top - insets.bottom,
    // 自适应列数
    columns: width < 600 ? 1 : width < 840 ? 2 : 3,
    // 自适应间距
    padding: moderateScale(16),
    insets,
  };
}

// ✅ 使用自适应布局的列表页面
import React from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import { useAdaptiveLayout, moderateScale } from './adaptive';
 
function ProductGrid({ products }) {
  const { columns, padding, sizeClass, insets } = useAdaptiveLayout();
 
  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <FlatList
        data={products}
        numColumns={columns}
        key={columns} // 列数变化时重新渲染
        contentContainerStyle={{ padding }}
        columnWrapperStyle={columns > 1 ? { gap: moderateScale(12) } : undefined}
        renderItem={({ item }) => (
          <View style={[
            styles.card,
            {
              flex: 1 / columns,
              // 紧凑模式：全宽卡片；中等/扩展：网格卡片
              minHeight: sizeClass === 'compact'
                ? moderateScale(120)
                : moderateScale(200),
            }
          ]}>
            {/* 卡片内容 */}
          </View>
        )}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  card: {
    borderRadius: moderateScale(12),
    backgroundColor: '#f8f9fa',
    marginBottom: moderateScale(12),
    overflow: 'hidden',
  },
});

// ✅ AI 生成的 Flutter 自适应布局系统
import 'package:flutter/material.dart';
 
/// 窗口尺寸类枚举（对齐 Material 3 规范）
enum WindowSizeClass { compact, medium, expanded }
 
/// 自适应布局工具类
class AdaptiveLayout {
  static WindowSizeClass getWindowSizeClass(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    if (width < 600) return WindowSizeClass.compact;
    if (width < 840) return WindowSizeClass.medium;
    return WindowSizeClass.expanded;
  }
 
  static int getColumns(BuildContext context) {
    return switch (getWindowSizeClass(context)) {
      WindowSizeClass.compact => 1,
      WindowSizeClass.medium => 2,
      WindowSizeClass.expanded => 3,
    };
  }
 
  static double getHorizontalPadding(BuildContext context) {
    return switch (getWindowSizeClass(context)) {
      WindowSizeClass.compact => 16.0,
      WindowSizeClass.medium => 24.0,
      WindowSizeClass.expanded => 32.0,
    };
  }
}
 
/// 自适应网格组件
class AdaptiveGrid extends StatelessWidget {
  final List<Widget> children;
  final double spacing;
 
  const AdaptiveGrid({
    super.key,
    required this.children,
    this.spacing = 12,
  });
 
  @override
  Widget build(BuildContext context) {
    final columns = AdaptiveLayout.getColumns(context);
    final padding = AdaptiveLayout.getHorizontalPadding(context);
 
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: padding),
      child: LayoutBuilder(
        builder: (context, constraints) {
          final itemWidth =
              (constraints.maxWidth - spacing * (columns - 1)) / columns;
          return Wrap(
            spacing: spacing,
            runSpacing: spacing,
            children: children.map((child) {
              return SizedBox(width: itemWidth, child: child);
            }).toList(),
          );
        },
      ),
    );
  }
}

// ✅ 折叠屏适配（使用 Material 3 Adaptive 库）
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 
class AdaptiveHomePage extends StatelessWidget {
  const AdaptiveHomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return AdaptiveScaffold(
      // 紧凑模式：底部导航
      // 中等模式：侧边导航栏
      // 扩展模式：侧边导航 + 详情面板
      destinations: const [
        NavigationDestination(icon: Icon(Icons.home), label: '首页'),
        NavigationDestination(icon: Icon(Icons.search), label: '搜索'),
        NavigationDestination(icon: Icon(Icons.person), label: '我的'),
      ],
      body: (_) => const HomeContent(),
      secondaryBody: AdaptiveScaffold.emptyBuilder,
      // 断点配置
      smallBreakpoint: const Breakpoint(endWidth: 600),
      mediumBreakpoint: const Breakpoint(beginWidth: 600, endWidth: 840),
      largeBreakpoint: const Breakpoint(beginWidth: 840),
    );
  }
}

// ✅ SwiftUI 自适应布局（iOS 26 + Liquid Glass）
import SwiftUI
 
struct AdaptiveProductCard: View {
    let product: Product
    @Environment(\.dynamicTypeSize) var typeSize
    @Environment(\.horizontalSizeClass) var sizeClass
    @Environment(\.colorScheme) var colorScheme
 
    var body: some View {
        Group {
            if sizeClass == .compact {
                // iPhone 竖屏：垂直布局
                VStack(alignment: .leading, spacing: 12) {
                    productImage
                    productInfo
                }
            } else {
                // iPad / iPhone 横屏：水平布局
                HStack(spacing: 16) {
                    productImage
                        .frame(width: 200)
                    productInfo
                }
            }
        }
        .padding()
        // iOS 26 Liquid Glass 材质
        .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))
        // 适配 Dynamic Type 大字体
        .lineLimit(typeSize.isAccessibilitySize ? nil : 2)
    }
 
    var productImage: some View {
        AsyncImage(url: product.imageURL) { image in
            image.resizable().aspectRatio(contentMode: .fill)
        } placeholder: {
            ProgressView()
        }
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
 
    var productInfo: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(product.name)
                .font(.headline)
            Text(product.description)
                .font(.subheadline)
                .foregroundStyle(.secondary)
            Text("¥\(product.price, specifier: "%.2f")")
                .font(.title3.bold())
                .foregroundStyle(.accent)
        }
    }
}

// ✅ Jetpack Compose 自适应布局（Material 3 Expressive）
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun AdaptiveProductList(
    products: List<Product>,
    onProductClick: (Product) -> Unit
) {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
 
    when (windowSizeClass.windowWidthSizeClass) {
        WindowWidthSizeClass.COMPACT -> {
            // 手机竖屏：单列列表
            LazyColumn(
                contentPadding = PaddingValues(16.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                items(products) { product ->
                    ProductCard(
                        product = product,
                        onClick = { onProductClick(product) },
                        modifier = Modifier.fillMaxWidth()
                    )
                }
            }
        }
        WindowWidthSizeClass.MEDIUM -> {
            // 折叠屏展开 / 小平板：双列网格
            LazyVerticalGrid(
                columns = GridCells.Fixed(2),
                contentPadding = PaddingValues(24.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                items(products) { product ->
                    ProductCard(
                        product = product,
                        onClick = { onProductClick(product) }
                    )
                }
            }
        }
        WindowWidthSizeClass.EXPANDED -> {
            // 大平板 / 桌面：列表-详情双栏
            ListDetailPaneScaffold(
                listPane = {
                    ProductListPane(products, onProductClick)
                },
                detailPane = {
                    ProductDetailPane()
                }
            )
        }
    }
}

为 [应用名称] 生成自适应布局代码：

框架：[React Native / Flutter / SwiftUI / Jetpack Compose]
目标设备：
- 手机（竖屏 + 横屏）
- [可选] 平板
- [可选] 折叠屏

布局需求：
- 页面类型：[列表页 / 详情页 / 仪表板 / 表单]
- 紧凑模式（<600dp）：[单列列表 / 卡片流 / ...]
- 中等模式（600-840dp）：[双列网格 / 侧边栏 / ...]
- 扩展模式（>840dp）：[三列 / 列表-详情 / ...]

必须处理：
- 安全区域（刘海屏、Dynamic Island、Home Indicator）
- 深色/浅色模式切换
- 系统字体缩放（Dynamic Type / Android 字体缩放）
- 横竖屏切换时的布局重排
- [平台] 设计规范合规（iOS HIG / Material Design）

性能要求：
- 避免不必要的重新渲染
- 使用 [FlatList/LazyColumn/List] 虚拟化长列表
- 图片懒加载和缓存

// ✅ AI 生成的可滑动删除列表项（Swipe-to-Delete）
import React from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  runOnJS,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';
 
const SWIPE_THRESHOLD = -80; // 触发删除的滑动距离
const DELETE_THRESHOLD = -200; // 自动删除的滑动距离
 
interface SwipeableListItemProps {
  title: string;
  subtitle: string;
  onDelete: () => void;
}
 
export function SwipeableListItem({ title, subtitle, onDelete }: SwipeableListItemProps) {
  const translateX = useSharedValue(0);
  const itemHeight = useSharedValue(72);
  const opacity = useSharedValue(1);
 
  const triggerHaptic = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  };
 
  const handleDelete = () => {
    Alert.alert('删除确认', `确定要删除"${title}"吗？`, [
      { text: '取消', style: 'cancel', onPress: () => {
        translateX.value = withSpring(0);
      }},
      { text: '删除', style: 'destructive', onPress: () => {
        // 删除动画
        translateX.value = withTiming(-500, { duration: 300 });
        itemHeight.value = withTiming(0, { duration: 300 });
        opacity.value = withTiming(0, { duration: 300 }, () => {
          runOnJS(onDelete)();
        });
      }},
    ]);
  };
 
  const panGesture = Gesture.Pan()
    .activeOffsetX([-10, 10]) // 水平滑动 10px 后激活
    .failOffsetY([-5, 5])     // 垂直滑动 5px 则失败（让给滚动）
    .onUpdate((event) => {
      // 只允许向左滑动
      translateX.value = Math.min(0, event.translationX);
      // 超过阈值时触发触觉反馈
      if (event.translationX < SWIPE_THRESHOLD && event.translationX > SWIPE_THRESHOLD - 5) {
        runOnJS(triggerHaptic)();
      }
    })
    .onEnd((event) => {
      if (event.translationX < DELETE_THRESHOLD) {
        // 快速大幅滑动：直接删除
        runOnJS(handleDelete)();
      } else if (event.translationX < SWIPE_THRESHOLD) {
        // 超过阈值：停在删除按钮位置
        translateX.value = withSpring(SWIPE_THRESHOLD);
      } else {
        // 未超过阈值：弹回
        translateX.value = withSpring(0);
      }
    });
 
  const itemStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
    height: itemHeight.value,
    opacity: opacity.value,
  }));
 
  const deleteButtonStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      translateX.value,
      [0, SWIPE_THRESHOLD],
      [0, 1],
      Extrapolation.CLAMP
    ),
    transform: [{
      scale: interpolate(
        translateX.value,
        [0, SWIPE_THRESHOLD],
        [0.5, 1],
        Extrapolation.CLAMP
      ),
    }],
  }));
 
  return (
    <View style={styles.container}>
      {/* 背景删除按钮 */}
      <Animated.View style={[styles.deleteBackground, deleteButtonStyle]}>
        <Text style={styles.deleteText}>🗑️ 删除</Text>
      </Animated.View>
      {/* 前景内容 */}
      <GestureDetector gesture={panGesture}>
        <Animated.View style={[styles.item, itemStyle]}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.subtitle}>{subtitle}</Text>
        </Animated.View>
      </GestureDetector>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { overflow: 'hidden' },
  deleteBackground: {
    position: 'absolute', right: 0, top: 0, bottom: 0,
    width: 100, backgroundColor: '#ff3b30',
    justifyContent: 'center', alignItems: 'center',
  },
  deleteText: { color: '#fff', fontWeight: '600', fontSize: 14 },
  item: {
    backgroundColor: '#fff', padding: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e0e0e0',
  },
  title: { fontSize: 16, fontWeight: '600', color: '#1a1a1a' },
  subtitle: { fontSize: 14, color: '#666', marginTop: 4 },
});

// ✅ AI 生成的双指缩放图片查看器
import React from 'react';
import { View, Image, StyleSheet, useWindowDimensions } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withDecay,
} from 'react-native-reanimated';
 
interface PinchableImageProps {
  uri: string;
  minScale?: number;
  maxScale?: number;
}
 
export function PinchableImage({
  uri,
  minScale = 1,
  maxScale = 5,
}: PinchableImageProps) {
  const { width, height } = useWindowDimensions();
  const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const savedTranslateX = useSharedValue(0);
  const savedTranslateY = useSharedValue(0);
 
  // 捏合缩放手势
  const pinchGesture = Gesture.Pinch()
    .onUpdate((event) => {
      const newScale = savedScale.value * event.scale;
      scale.value = Math.min(Math.max(newScale, minScale * 0.5), maxScale * 1.2);
    })
    .onEnd(() => {
      // 弹回有效范围
      if (scale.value < minScale) {
        scale.value = withSpring(minScale);
        translateX.value = withSpring(0);
        translateY.value = withSpring(0);
      } else if (scale.value > maxScale) {
        scale.value = withSpring(maxScale);
      }
      savedScale.value = Math.min(Math.max(scale.value, minScale), maxScale);
    });
 
  // 拖拽平移手势（仅在缩放时启用）
  const panGesture = Gesture.Pan()
    .minPointers(1)
    .maxPointers(2)
    .onUpdate((event) => {
      if (scale.value > 1) {
        translateX.value = savedTranslateX.value + event.translationX;
        translateY.value = savedTranslateY.value + event.translationY;
      }
    })
    .onEnd((event) => {
      savedTranslateX.value = translateX.value;
      savedTranslateY.value = translateY.value;
      // 惯性滑动
      if (scale.value > 1) {
        translateX.value = withDecay({ velocity: event.velocityX, clamp: [-(width * scale.value - width) / 2, (width * scale.value - width) / 2] });
        translateY.value = withDecay({ velocity: event.velocityY, clamp: [-(height * scale.value - height) / 2, (height * scale.value - height) / 2] });
      }
    });
 
  // 双击缩放
  const doubleTapGesture = Gesture.Tap()
    .numberOfTaps(2)
    .onEnd(() => {
      if (scale.value > 1) {
        scale.value = withSpring(1);
        translateX.value = withSpring(0);
        translateY.value = withSpring(0);
        savedScale.value = 1;
        savedTranslateX.value = 0;
        savedTranslateY.value = 0;
      } else {
        scale.value = withSpring(2.5);
        savedScale.value = 2.5;
      }
    });
 
  // 组合手势：捏合和拖拽同时进行，双击独立
  const composedGesture = Gesture.Simultaneous(
    pinchGesture,
    panGesture,
    Gesture.Exclusive(doubleTapGesture)
  );
 
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
    ],
  }));
 
  return (
    <GestureDetector gesture={composedGesture}>
      <Animated.View style={[styles.imageContainer, animatedStyle]}>
        <Image
          source={{ uri }}
          style={{ width, height: width }}
          resizeMode="contain"
        />
      </Animated.View>
    </GestureDetector>
  );
}
 
const styles = StyleSheet.create({
  imageContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

// ✅ AI 生成的 Flutter 可拖拽排序列表
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
 
class DraggableReorderList<T> extends StatefulWidget {
  final List<T> items;
  final Widget Function(T item, bool isDragging) itemBuilder;
  final void Function(int oldIndex, int newIndex) onReorder;
 
  const DraggableReorderList({
    super.key,
    required this.items,
    required this.itemBuilder,
    required this.onReorder,
  });
 
  @override
  State<DraggableReorderList<T>> createState() => _DraggableReorderListState<T>();
}
 
class _DraggableReorderListState<T> extends State<DraggableReorderList<T>> {
  @override
  Widget build(BuildContext context) {
    return ReorderableListView.builder(
      itemCount: widget.items.length,
      onReorder: (oldIndex, newIndex) {
        // 触觉反馈
        HapticFeedback.mediumImpact();
        widget.onReorder(oldIndex, newIndex);
      },
      proxyDecorator: (child, index, animation) {
        // 拖拽时的视觉效果
        return AnimatedBuilder(
          animation: animation,
          builder: (context, child) {
            final elevation = Tween<double>(begin: 0, end: 8)
                .animate(CurvedAnimation(
                  parent: animation,
                  curve: Curves.easeInOut,
                ))
                .value;
            final scale = Tween<double>(begin: 1.0, end: 1.05)
                .animate(CurvedAnimation(
                  parent: animation,
                  curve: Curves.easeInOut,
                ))
                .value;
            return Transform.scale(
              scale: scale,
              child: Material(
                elevation: elevation,
                borderRadius: BorderRadius.circular(12),
                shadowColor: Colors.black26,
                child: child,
              ),
            );
          },
          child: child,
        );
      },
      itemBuilder: (context, index) {
        return ReorderableDragStartListener(
          key: ValueKey(widget.items[index]),
          index: index,
          child: widget.itemBuilder(widget.items[index], false),
        );
      },
    );
  }
}

// ✅ AI 生成的 Flutter 下拉刷新 + 弹性过度滚动
import 'package:flutter/material.dart';
 
class ElasticPullToRefresh extends StatefulWidget {
  final Future<void> Function() onRefresh;
  final Widget child;
 
  const ElasticPullToRefresh({
    super.key,
    required this.onRefresh,
    required this.child,
  });
 
  @override
  State<ElasticPullToRefresh> createState() => _ElasticPullToRefreshState();
}
 
class _ElasticPullToRefreshState extends State<ElasticPullToRefresh>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  double _dragOffset = 0;
  bool _isRefreshing = false;
 
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        if (notification is OverscrollNotification && !_isRefreshing) {
          setState(() {
            // 弹性阻尼效果：越拉越难拉
            _dragOffset += notification.overscroll * 0.4;
            _dragOffset = _dragOffset.clamp(0, 120);
          });
        }
        if (notification is ScrollEndNotification && _dragOffset > 60) {
          _startRefresh();
        } else if (notification is ScrollEndNotification) {
          _resetDrag();
        }
        return false;
      },
      child: Stack(
        children: [
          // 刷新指示器
          Positioned(
            top: 0, left: 0, right: 0,
            child: Container(
              height: _dragOffset,
              alignment: Alignment.center,
              child: _isRefreshing
                  ? const CircularProgressIndicator.adaptive()
                  : Icon(
                      _dragOffset > 60
                          ? Icons.arrow_upward
                          : Icons.arrow_downward,
                      color: Theme.of(context).colorScheme.primary,
                    ),
            ),
          ),
          // 内容区域
          Transform.translate(
            offset: Offset(0, _dragOffset),
            child: widget.child,
          ),
        ],
      ),
    );
  }
 
  Future<void> _startRefresh() async {
    setState(() => _isRefreshing = true);
    HapticFeedback.mediumImpact();
    await widget.onRefresh();
    setState(() {
      _isRefreshing = false;
      _dragOffset = 0;
    });
  }
 
  void _resetDrag() {
    setState(() => _dragOffset = 0);
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

为 [应用场景] 生成手势交互代码：

框架：[React Native (Gesture Handler + Reanimated) / Flutter / SwiftUI / Jetpack Compose]

手势需求：
- 手势类型：[滑动删除 / 拖拽排序 / 捏合缩放 / 下拉刷新 / 侧滑菜单 / 卡片翻转]
- 手势方向：[水平 / 垂直 / 全方向]
- 手势组合：[是否需要多手势同时识别]

交互细节：
- 触发阈值：[滑动距离/速度阈值]
- 触觉反馈：[轻触 / 中等 / 重击 / 无]
- 视觉反馈：[缩放 / 透明度 / 阴影 / 颜色变化]
- 动画曲线：[弹性 spring / 线性 / ease-in-out]
- 边界约束：[是否限制移动范围]

性能要求：
- 动画必须运行在 [原生线程 / UI 线程]
- 目标帧率：60fps
- 避免 JS 线程阻塞（React Native）
- 手势与滚动不冲突

无障碍：
- 为手势操作提供替代交互方式（按钮/菜单）
- VoiceOver / TalkBack 支持

// ✅ AI 生成的页面进入动画（交错列表动画）
import React, { useEffect } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withDelay,
  withSpring,
  withTiming,
  FadeIn,
  SlideInRight,
  Layout,
} from 'react-native-reanimated';
 
// 方式一：使用 Entering/Exiting 动画（推荐，简洁）
function AnimatedListItem({ item, index }: { item: any; index: number }) {
  return (
    <Animated.View
      entering={FadeIn.delay(index * 80).springify().damping(15)}
      exiting={FadeIn.duration(200)}
      layout={Layout.springify()} // 布局变化时自动动画
      style={styles.listItem}
    >
      <Text style={styles.itemTitle}>{item.title}</Text>
      <Text style={styles.itemSubtitle}>{item.subtitle}</Text>
    </Animated.View>
  );
}
 
// 方式二：手动控制动画（更灵活）
function ManualAnimatedCard({ item, index }: { item: any; index: number }) {
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(30);
  const scale = useSharedValue(0.95);
 
  useEffect(() => {
    const delay = index * 100;
    opacity.value = withDelay(delay, withTiming(1, { duration: 400 }));
    translateY.value = withDelay(delay, withSpring(0, { damping: 15, stiffness: 150 }));
    scale.value = withDelay(delay, withSpring(1, { damping: 12 }));
  }, []);
 
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [
      { translateY: translateY.value },
      { scale: scale.value },
    ],
  }));
 
  return (
    <Animated.View style={[styles.card, animatedStyle]}>
      <Text style={styles.cardTitle}>{item.title}</Text>
    </Animated.View>
  );
}
 
const styles = StyleSheet.create({
  listItem: {
    padding: 16, backgroundColor: '#fff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e0e0e0',
  },
  itemTitle: { fontSize: 16, fontWeight: '600' },
  itemSubtitle: { fontSize: 14, color: '#666', marginTop: 4 },
  card: {
    margin: 16, padding: 20, borderRadius: 16,
    backgroundColor: '#fff',
    shadowColor: '#000', shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1, shadowRadius: 8, elevation: 4,
  },
  cardTitle: { fontSize: 18, fontWeight: '700' },
});

// ✅ AI 生成的共享元素过渡动画（列表→详情）
import React from 'react';
import { View, Text, Image, Pressable, StyleSheet } from 'react-native';
import Animated, { SharedTransition, withSpring } from 'react-native-reanimated';
import { useNavigation } from '@react-navigation/native';
 
// 自定义共享过渡配置
const customTransition = SharedTransition.custom((values) => {
  'worklet';
  return {
    width: withSpring(values.targetWidth, { damping: 15 }),
    height: withSpring(values.targetHeight, { damping: 15 }),
    originX: withSpring(values.targetOriginX, { damping: 15 }),
    originY: withSpring(values.targetOriginY, { damping: 15 }),
    borderRadius: withSpring(values.targetBorderRadius ?? 0, { damping: 15 }),
  };
});
 
// 列表页卡片
function ProductCard({ product }: { product: Product }) {
  const navigation = useNavigation();
 
  return (
    <Pressable onPress={() => navigation.navigate('Detail', { product })}>
      <Animated.Image
        source={{ uri: product.image }}
        style={styles.thumbnail}
        sharedTransitionTag={`product-image-${product.id}`}
        sharedTransitionStyle={customTransition}
      />
      <Animated.Text
        style={styles.productName}
        sharedTransitionTag={`product-name-${product.id}`}
      >
        {product.name}
      </Animated.Text>
    </Pressable>
  );
}
 
// 详情页
function ProductDetail({ route }: { route: any }) {
  const { product } = route.params;
 
  return (
    <View style={styles.detailContainer}>
      <Animated.Image
        source={{ uri: product.image }}
        style={styles.detailImage}
        sharedTransitionTag={`product-image-${product.id}`}
        sharedTransitionStyle={customTransition}
      />
      <Animated.Text
        style={styles.detailName}
        sharedTransitionTag={`product-name-${product.id}`}
      >
        {product.name}
      </Animated.Text>
      <Text style={styles.detailDescription}>{product.description}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  thumbnail: { width: '100%', height: 200, borderRadius: 12 },
  productName: { fontSize: 18, fontWeight: '600', marginTop: 8 },
  detailContainer: { flex: 1, backgroundColor: '#fff' },
  detailImage: { width: '100%', height: 350 },
  detailName: { fontSize: 24, fontWeight: '700', padding: 16 },
  detailDescription: { fontSize: 16, color: '#666', paddingHorizontal: 16 },
});

// ✅ AI 生成的 Flutter 隐式动画卡片（推荐用于简单状态变化）
import 'package:flutter/material.dart';
 
class AnimatedProductCard extends StatefulWidget {
  final String title;
  final String imageUrl;
  final VoidCallback onTap;
 
  const AnimatedProductCard({
    super.key,
    required this.title,
    required this.imageUrl,
    required this.onTap,
  });
 
  @override
  State<AnimatedProductCard> createState() => _AnimatedProductCardState();
}
 
class _AnimatedProductCardState extends State<AnimatedProductCard> {
  bool _isPressed = false;
  bool _isHovered = false;
 
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _isPressed = true),
      onTapUp: (_) {
        setState(() => _isPressed = false);
        widget.onTap();
      },
      onTapCancel: () => setState(() => _isPressed = false),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeOutCubic,
        transform: Matrix4.identity()
          ..scale(_isPressed ? 0.95 : 1.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(_isPressed ? 0.05 : 0.12),
              blurRadius: _isPressed ? 4 : 12,
              offset: Offset(0, _isPressed ? 2 : 6),
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Hero 动画图片
              Hero(
                tag: 'product-${widget.title}',
                child: Image.network(
                  widget.imageUrl,
                  height: 180,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(12),
                child: Text(
                  widget.title,
                  style: Theme.of(context).textTheme.titleMedium,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// ✅ AI 生成的 Flutter 显式动画（交错列表进入动画）
import 'package:flutter/material.dart';
 
class StaggeredListAnimation extends StatefulWidget {
  final List<String> items;
 
  const StaggeredListAnimation({super.key, required this.items});
 
  @override
  State<StaggeredListAnimation> createState() => _StaggeredListAnimationState();
}
 
class _StaggeredListAnimationState extends State<StaggeredListAnimation>
    with TickerProviderStateMixin {
  late List<AnimationController> _controllers;
  late List<Animation<double>> _fadeAnimations;
  late List<Animation<Offset>> _slideAnimations;
 
  @override
  void initState() {
    super.initState();
    _controllers = List.generate(
      widget.items.length,
      (index) => AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 500),
      ),
    );
 
    _fadeAnimations = _controllers.map((controller) {
      return Tween<double>(begin: 0, end: 1).animate(
        CurvedAnimation(parent: controller, curve: Curves.easeOut),
      );
    }).toList();
 
    _slideAnimations = _controllers.map((controller) {
      return Tween<Offset>(
        begin: const Offset(0, 0.3),
        end: Offset.zero,
      ).animate(
        CurvedAnimation(parent: controller, curve: Curves.easeOutCubic),
      );
    }).toList();
 
    // 交错启动动画
    for (int i = 0; i < _controllers.length; i++) {
      Future.delayed(Duration(milliseconds: i * 80), () {
        if (mounted) _controllers[i].forward();
      });
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.items.length,
      itemBuilder: (context, index) {
        return FadeTransition(
          opacity: _fadeAnimations[index],
          child: SlideTransition(
            position: _slideAnimations[index],
            child: Card(
              margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
              child: ListTile(
                title: Text(widget.items[index]),
                trailing: const Icon(Icons.chevron_right),
              ),
            ),
          ),
        );
      },
    );
  }
 
  @override
  void dispose() {
    for (final controller in _controllers) {
      controller.dispose();
    }
    super.dispose();
  }
}

// ✅ AI 生成的 SwiftUI 弹性卡片动画
import SwiftUI
 
struct BouncyCard: View {
    let title: String
    let subtitle: String
    let color: Color
    @State private var isPressed = false
    @State private var isVisible = false
 
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.headline)
                .foregroundStyle(.primary)
            Text(subtitle)
                .font(.subheadline)
                .foregroundStyle(.secondary)
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(color.opacity(0.1), in: RoundedRectangle(cornerRadius: 16))
        .overlay(
            RoundedRectangle(cornerRadius: 16)
                .stroke(color.opacity(0.3), lineWidth: 1)
        )
        // 按压缩放动画
        .scaleEffect(isPressed ? 0.95 : 1.0)
        // 进入动画
        .opacity(isVisible ? 1 : 0)
        .offset(y: isVisible ? 0 : 20)
        .animation(.spring(response: 0.4, dampingFraction: 0.7), value: isPressed)
        .animation(.spring(response: 0.6, dampingFraction: 0.8), value: isVisible)
        .onTapGesture {
            // 触觉反馈
            let impact = UIImpactFeedbackGenerator(style: .medium)
            impact.impactOccurred()
        }
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in isPressed = true }
                .onEnded { _ in isPressed = false }
        )
        .onAppear {
            withAnimation { isVisible = true }
        }
    }
}
 
// ✅ SwiftUI 交错列表动画
struct StaggeredList: View {
    let items: [String]
 
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 12) {
                ForEach(Array(items.enumerated()), id: \.offset) { index, item in
                    BouncyCard(
                        title: item,
                        subtitle: "Item \(index + 1)",
                        color: .blue
                    )
                    .transition(.asymmetric(
                        insertion: .move(edge: .trailing)
                            .combined(with: .opacity),
                        removal: .move(edge: .leading)
                            .combined(with: .opacity)
                    ))
                    .animation(
                        .spring(response: 0.5, dampingFraction: 0.8)
                            .delay(Double(index) * 0.05),
                        value: items.count
                    )
                }
            }
            .padding()
        }
    }
}

// ✅ AI 生成的 Compose 弹性动画卡片
@Composable
fun ExpressiveCard(
    title: String,
    subtitle: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    var isPressed by remember { mutableStateOf(false) }
 
    // Material 3 Expressive 弹性动画
    val scale by animateFloatAsState(
        targetValue = if (isPressed) 0.95f else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        ),
        label = "scale"
    )
 
    val elevation by animateDpAsState(
        targetValue = if (isPressed) 2.dp else 6.dp,
        animationSpec = spring(dampingRatio = 0.7f),
        label = "elevation"
    )
 
    Card(
        modifier = modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
            }
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = {
                        isPressed = true
                        // 触觉反馈
                        tryAwaitRelease()
                        isPressed = false
                    },
                    onTap = { onClick() }
                )
            },
        elevation = CardDefaults.cardElevation(defaultElevation = elevation),
        shape = RoundedCornerShape(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceContainerLow
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = title,
                style = MaterialTheme.typography.titleMedium
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = subtitle,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}
 
// ✅ Compose 交错列表进入动画
@Composable
fun StaggeredAnimatedList(items: List<String>) {
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        itemsIndexed(items) { index, item ->
            val visible = remember { MutableTransitionState(false) }
            LaunchedEffect(Unit) {
                delay(index * 60L)
                visible.targetState = true
            }
 
            AnimatedVisibility(
                visibleState = visible,
                enter = fadeIn(
                    animationSpec = tween(400, easing = EaseOutCubic)
                ) + slideInVertically(
                    initialOffsetY = { it / 4 },
                    animationSpec = spring(
                        dampingRatio = 0.8f,
                        stiffness = 200f
                    )
                )
            ) {
                ExpressiveCard(
                    title = item,
                    subtitle = "Item ${index + 1}",
                    onClick = { /* 处理点击 */ }
                )
            }
        }
    }
}

// ✅ React Native Lottie 动画集成
import React, { useRef, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';
 
interface AnimatedEmptyStateProps {
  title: string;
  message: string;
  animationSource: any; // require('./animations/empty.json')
}
 
export function AnimatedEmptyState({
  title,
  message,
  animationSource,
}: AnimatedEmptyStateProps) {
  const animationRef = useRef<LottieView>(null);
 
  useEffect(() => {
    // 延迟播放，等待页面过渡完成
    const timer = setTimeout(() => {
      animationRef.current?.play();
    }, 300);
    return () => clearTimeout(timer);
  }, []);
 
  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={animationSource}
        style={styles.animation}
        autoPlay={false}
        loop={true}
        speed={0.8} // 稍慢播放，更优雅
        renderMode="HARDWARE" // 硬件加速
      />
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.message}>{message}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 32 },
  animation: { width: 200, height: 200 },
  title: { fontSize: 20, fontWeight: '700', marginTop: 16, textAlign: 'center' },
  message: { fontSize: 16, color: '#666', marginTop: 8, textAlign: 'center' },
});

为 [组件/页面] 生成移动端动画：

框架：[React Native Reanimated 3 / Flutter / SwiftUI / Jetpack Compose]

动画需求：
- 动画类型：[进入动画 / 退出动画 / 交互反馈 / 共享元素过渡 / 骨架屏]
- 触发方式：[页面加载 / 用户交互 / 状态变化 / 手势驱动]
- 动画效果：[淡入淡出 / 滑入滑出 / 缩放 / 弹性 / 旋转 / 组合]

动画参数：
- 时长：[100-500ms，根据类型选择]
- 曲线：[spring(damping, stiffness) / easeInOut / linear / 自定义贝塞尔]
- 延迟：[交错延迟间隔，如每项 80ms]
- 循环：[是否循环播放]

性能要求：
- 必须运行在原生/UI 线程（不阻塞 JS 线程）
- 目标 60fps，复杂场景不低于 30fps
- 使用 transform 属性（不触发布局重计算）
- 动画组件使用 React.memo / RepaintBoundary 隔离

平台适配：
- iOS：遵循 Apple HIG 动画时长建议
- Android：遵循 Material Motion 规范
- 支持减弱动画（Reduce Motion）无障碍设置

// ✅ AI 生成的 Liquid Glass 风格导航栏
import SwiftUI
 
struct LiquidGlassNavBar: View {
    let title: String
    @Binding var searchText: String
    @Environment(\.colorScheme) var colorScheme
 
    var body: some View {
        VStack(spacing: 0) {
            // 标题区域
            HStack {
                Text(title)
                    .font(.largeTitle.bold())
                Spacer()
                // Liquid Glass 风格按钮
                Button(action: {}) {
                    Image(systemName: "plus")
                        .font(.title3)
                        .padding(10)
                        .background(.regularMaterial, in: Circle())
                }
            }
            .padding(.horizontal)
 
            // 搜索栏
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundStyle(.secondary)
                TextField("搜索", text: $searchText)
            }
            .padding(10)
            .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))
            .padding(.horizontal)
            .padding(.top, 8)
        }
        .padding(.vertical)
    }
}

生成符合 iOS HIG（2025-2026）的 [组件/页面] 代码：

框架：SwiftUI（iOS 26+）
设计语言：Liquid Glass

必须遵循的 HIG 规范：
1. 所有可交互元素最小 44×44pt
2. 使用 SF Pro 字体系统（通过 .font() 修饰符）
3. 支持 Dynamic Type（不硬编码字体大小）
4. 使用系统颜色（.primary, .secondary, .accent）
5. 使用 Liquid Glass 材质（.regularMaterial, .ultraThinMaterial）
6. 正确处理安全区域（SafeAreaInsets）
7. 支持深色模式（使用语义化颜色）
8. 遵循 iOS 导航模式（push/modal/tab）
9. 包含适当的触觉反馈（UIImpactFeedbackGenerator）
10. 支持 VoiceOver 无障碍标签

页面需求：
- [具体页面描述]
- [交互需求]
- [数据展示需求]

// ✅ AI 生成的 Material 3 Expressive 主题配置
@Composable
fun ExpressiveAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> darkColorScheme(
            primary = Color(0xFF90CAF9),
            secondary = Color(0xFFA5D6A7),
            tertiary = Color(0xFFFFCC80),
        )
        else -> lightColorScheme(
            primary = Color(0xFF1565C0),
            secondary = Color(0xFF2E7D32),
            tertiary = Color(0xFFE65100),
        )
    }
 
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            // M3 Expressive 强调更大胆的排版
            displayLarge = TextStyle(
                fontWeight = FontWeight.Bold,
                fontSize = 57.sp,
                lineHeight = 64.sp,
            ),
            headlineLarge = TextStyle(
                fontWeight = FontWeight.SemiBold,
                fontSize = 32.sp,
                lineHeight = 40.sp,
            ),
            titleLarge = TextStyle(
                fontWeight = FontWeight.Medium,
                fontSize = 22.sp,
                lineHeight = 28.sp,
            ),
        ),
        shapes = Shapes(
            // M3 Expressive 使用更大的圆角
            small = RoundedCornerShape(8.dp),
            medium = RoundedCornerShape(16.dp),
            large = RoundedCornerShape(28.dp),
            extraLarge = RoundedCornerShape(32.dp),
        ),
        content = content,
    )
}

生成符合 Material 3 Expressive（2025-2026）的 [组件/页面] 代码：

框架：Jetpack Compose（Material 3）
设计语言：Material 3 Expressive

必须遵循的 Material Design 规范：
1. 所有可交互元素最小 48×48dp
2. 使用 Material Typography scale
3. 支持 Dynamic Color（从壁纸提取主题色）
4. 使用 Material 3 组件（Card, Button, TextField 等）
5. 使用弹性动画（spring() 而非 tween()）
6. 正确处理 WindowSizeClass（Compact/Medium/Expanded）
7. 支持深色模式（使用 MaterialTheme.colorScheme）
8. 遵循 Material 导航模式（NavigationBar/NavigationRail/NavigationDrawer）
9. 包含触觉反馈（HapticFeedback）
10. 支持 TalkBack 无障碍（contentDescription, semantics）

页面需求：
- [具体页面描述]
- [交互需求]
- [数据展示需求]

// ✅ AI 生成的跨平台设计适配工具
import { Platform, PlatformColor } from 'react-native';
 
// 平台感知的设计 Token
export const DesignTokens = {
  // 间距
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
 
  // 圆角（iOS 更大，Android 遵循 M3）
  borderRadius: {
    sm: Platform.select({ ios: 8, android: 8 })!,
    md: Platform.select({ ios: 12, android: 12 })!,
    lg: Platform.select({ ios: 16, android: 16 })!,
    xl: Platform.select({ ios: 20, android: 28 })!, // M3 Expressive 更大
    full: 9999,
  },
 
  // 最小触摸目标
  minTouchTarget: Platform.select({ ios: 44, android: 48 })!,
 
  // 阴影（iOS 使用 shadow，Android 使用 elevation）
  shadow: {
    sm: Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: { elevation: 2 },
    }),
    md: Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.12,
        shadowRadius: 8,
      },
      android: { elevation: 4 },
    }),
    lg: Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.15,
        shadowRadius: 16,
      },
      android: { elevation: 8 },
    }),
  },
 
  // 动画配置
  animation: {
    // iOS 偏好平滑曲线，Android 偏好弹性
    press: Platform.select({
      ios: { duration: 200, useNativeDriver: true },
      android: { damping: 15, stiffness: 150 }, // spring
    }),
    transition: Platform.select({
      ios: { duration: 350 },
      android: { duration: 300 },
    }),
  },
};
 
// 平台感知的列表操作组件
import { ActionSheetIOS, Alert } from 'react-native';
 
export function showContextMenu(
  options: { label: string; action: () => void; destructive?: boolean }[]
) {
  if (Platform.OS === 'ios') {
    // iOS：使用 Action Sheet（底部弹出）
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: [...options.map(o => o.label), '取消'],
        cancelButtonIndex: options.length,
        destructiveButtonIndex: options.findIndex(o => o.destructive),
      },
      (buttonIndex) => {
        if (buttonIndex < options.length) {
          options[buttonIndex].action();
        }
      }
    );
  } else {
    // Android：使用 Alert Dialog（居中弹出）
    Alert.alert(
      '选择操作',
      undefined,
      [
        ...options.map(o => ({
          text: o.label,
          onPress: o.action,
          style: o.destructive ? 'destructive' as const : 'default' as const,
        })),
        { text: '取消', style: 'cancel' },
      ]
    );
  }
}

// ✅ AI 生成的无障碍感知组件
import React from 'react';
import {
  View, Text, Pressable, StyleSheet, Platform,
  AccessibilityInfo, useColorScheme,
} from 'react-native';
 
interface AccessibleButtonProps {
  label: string;
  hint?: string;
  icon?: React.ReactNode;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'destructive';
  disabled?: boolean;
}
 
export function AccessibleButton({
  label, hint, icon, onPress, variant = 'primary', disabled = false,
}: AccessibleButtonProps) {
  const colorScheme = useColorScheme();
  const [reduceMotion, setReduceMotion] = React.useState(false);
 
  React.useEffect(() => {
    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
    const subscription = AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      setReduceMotion
    );
    return () => subscription.remove();
  }, []);
 
  const backgroundColor = {
    primary: disabled ? '#ccc' : '#007AFF',
    secondary: 'transparent',
    destructive: disabled ? '#ccc' : '#FF3B30',
  }[variant];
 
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      // 无障碍属性
      accessible={true}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityHint={hint}
      accessibilityState={{ disabled }}
      // 扩大触摸区域到平台最小要求
      hitSlop={{
        top: Platform.select({ ios: 0, android: 4 }),
        bottom: Platform.select({ ios: 0, android: 4 }),
        left: 8,
        right: 8,
      }}
      style={({ pressed }) => [
        styles.button,
        { backgroundColor },
        // 减弱动画模式：不使用缩放效果
        !reduceMotion && pressed && styles.pressed,
        variant === 'secondary' && styles.secondaryButton,
      ]}
    >
      {icon && <View style={styles.icon}>{icon}</View>}
      <Text style={[
        styles.label,
        variant === 'secondary' && styles.secondaryLabel,
        disabled && styles.disabledLabel,
      ]}>
        {label}
      </Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 12,
    // 确保最小触摸目标
    minHeight: Platform.select({ ios: 44, android: 48 }),
    minWidth: Platform.select({ ios: 44, android: 48 }),
  },
  pressed: { transform: [{ scale: 0.97 }], opacity: 0.9 },
  secondaryButton: { borderWidth: 1, borderColor: '#007AFF' },
  icon: { marginRight: 8 },
  label: { fontSize: 17, fontWeight: '600', color: '#fff' },
  secondaryLabel: { color: '#007AFF' },
  disabledLabel: { color: '#999' },
});