add ios app

app-ios/components/memoir/ChapterItem.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { AppColors } from '@/constants/theme';
+import { Chapter } from '@/data/mockData';
+
+interface ChapterItemProps {
+  chapter: Chapter;
+  onPress: () => void;
+}
+
+export function ChapterItem({ chapter, onPress }: ChapterItemProps) {
+  const getStatusText = () => {
+    switch (chapter.status) {
+      case 'complete':
+        return `已整理 · 约${chapter.pageCount}页`;
+      case 'partial':
+        return `部分整理 · 约${chapter.pageCount}页`;
+      case 'pending':
+        return '待补充';
+    }
+  };
+
+  const isComplete = chapter.status === 'complete';
+
+  return (
+    <TouchableOpacity 
+      style={styles.container} 
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.number}>
+        <Text style={styles.numberText}>
+          {chapter.number.toString().padStart(2, '0')}
+        </Text>
+      </View>
+      
+      <View style={styles.content}>
+        <Text style={styles.title}>{chapter.title}</Text>
+        <Text style={[styles.status, isComplete && styles.statusComplete]}>
+          {getStatusText()}
+        </Text>
+      </View>
+      
+      <Ionicons 
+        name="chevron-forward" 
+        size={20} 
+        color={AppColors.slatePurple} 
+      />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: AppColors.white,
+    borderRadius: 14,
+    marginBottom: 12,
+    shadowColor: AppColors.deepPurple,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.04,
+    shadowRadius: 8,
+    elevation: 1,
+  },
+  number: {
+    width: 32,
+    height: 32,
+    borderRadius: 10,
+    backgroundColor: AppColors.lavender,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 14,
+  },
+  numberText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: AppColors.deepPurple,
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: AppColors.deepPurple,
+    marginBottom: 2,
+  },
+  status: {
+    fontSize: 12,
+    color: AppColors.slatePurple,
+  },
+  statusComplete: {
+    color: AppColors.mediumPurple,
+  },
+});