add ios app

2026-01-31 21:20:50 +01:00
parent a170632270
commit 748f252c2f
63 changed files with 38507 additions and 0 deletions
--- a/app-ios/.cursor/plans/life_echo_mvp_client_35222af2.plan.md
+++ b/app-ios/.cursor/plans/life_echo_mvp_client_35222af2.plan.md
@@ -0,0 +1,175 @@
+---
+name: Life Echo MVP Client
+overview: Build a minimal viable React Native client for "往事拾遗" (Life Echo) - a memoir creation app targeting Chinese users. The app will feature WeChat-style chat UI, e-book reading experience, and a profile page, using gluestack.io v3 components with a warm purple color scheme.
+todos:
+  - id: setup-gluestack
+    content: Install and configure gluestack-ui v3 with custom theme tokens
+    status: completed
+  - id: setup-navigation
+    content: Configure tab navigation with 3 tabs and chat detail stack screen
+    status: completed
+  - id: create-chat-list
+    content: Build chat list screen with header and conversation items
+    status: completed
+  - id: create-chat-detail
+    content: Build full-screen chat detail with messages and input area
+    status: completed
+  - id: create-memoir
+    content: Build memoir screen with TOC and chapter reading views
+    status: completed
+  - id: create-profile
+    content: Build profile screen with settings sections and toggles
+    status: completed
+  - id: create-mock-data
+    content: Create mock data for conversations, messages, chapters, and user profile
+    status: completed
+---
+
+# Life Echo MVP Client Development Plan
+
+## Architecture Overview
+
+```mermaid
+graph TD
+    subgraph Navigation[App Navigation]
+        Root[Root Layout]
+        Root --> Tabs[Tab Navigator]
+        Root --> ChatDetail[Chat Detail Screen]
+        Tabs --> ChatList[聊天 - Chat List]
+        Tabs --> Memoir[回忆录 - Memoir]
+        Tabs --> Profile[我的 - Profile]
+    end
+    
+    subgraph MemoirNav[Memoir Navigation]
+        Memoir --> TOC[Table of Contents]
+        Memoir --> ChapterReading[Chapter Reading]
+    end
+```
+
+## 1. Project Setup
+
+### Install gluestack.io v3
+
+- Install `@gluestack-ui/themed` and required dependencies
+- Configure GluestackUIProvider in root layout
+
+### Create Theme Configuration
+
+File: `constants/theme.ts` - Define color tokens following the design rules:
+
+- `deepPurple: #200028` - Primary text, titles
+- `slatePurple: #8C8EA3` - Secondary text, placeholders
+- `mediumPurple: #A177A6` - Brand color, buttons, headers
+- `lavender: #CEB0DA` - Highlights, AI avatar background
+- `blushPink: #DBBABA` - User avatar background
+- `cream: #FAF7F8` - App background
+- `white: #FFFFFF` - Cards, chat bubbles
+
+## 2. Navigation Structure
+
+### Root Layout (`app/_layout.tsx`)
+
+- Stack navigator with tabs and chat detail screen
+- Chat detail uses `presentation: 'fullScreenModal'` to hide tab bar
+
+### Tab Layout (`app/(tabs)/_layout.tsx`)
+
+- 3 tabs: 聊天, 回忆录, 我的
+- Custom tab bar styling with medium purple active color
+- Icons: microphone/chat, book, person
+
+## 3. Core Screens
+
+### Screen 1: Chat List (`app/(tabs)/index.tsx`)
+
+- Header with app title "往事拾遗" and subtitle
+- Medium purple header background (#A177A6)
+- Conversation list item with:
+  - Avatar (lavender background with book emoji)
+  - Name "回忆录助手"
+  - Last message preview (truncated)
+  - Timestamp
+- Tip card at bottom explaining the app
+
+### Screen 2: Chat Detail (`app/chat/[id].tsx`)
+
+- Full-screen without tab bar
+- Header: back button + "回忆录助手" + "在线" status
+- Message list with:
+  - AI messages: white bubble, left-aligned, lavender avatar
+  - User messages: medium purple bubble, right-aligned, blush avatar
+- Input area:
+  - Voice/keyboard toggle button
+  - Text input with placeholder "说点什么..."
+  - Emoji button (placeholder)
+  - More options button (photo/camera - placeholder)
+  - Send button (visible when text entered)
+
+### Screen 3: Memoir (`app/(tabs)/memoir.tsx`)
+
+- Tab switcher: 目录 | 正在阅读
+- **TOC View**:
+  - Book title "这一生" with subtitle
+  - Update timestamp
+  - Chapter list with number, title, status (已整理/待补充)
+- **Reading View**:
+  - Back to TOC button
+  - Chapter number and title
+  - Serif font content with proper line spacing
+  - Quote blocks with lavender background
+  - Floating action buttons: 导出 PDF, 分享
+
+### Screen 4: Profile (`app/(tabs)/profile.tsx`)
+
+- User header: avatar, name, plan status (免费体验版)
+- Section cards:
+  - 套餐与付费: 升级套餐, 我的订单
+  - 数据与隐私: 导出所有数据
+  - 设置: 语速, 大字模式(toggle), 夜间模式(toggle)
+  - 帮助: 常见问题, 反馈与客服, 关于我们
+
+## 4. Shared Components
+
+### Components to Create:
+
+- `components/chat/ChatBubble.tsx` - Message bubble (AI/User variants)
+- `components/chat/ChatInput.tsx` - Input area with voice/text toggle
+- `components/chat/ConversationItem.tsx` - Chat list item
+- `components/memoir/ChapterItem.tsx` - TOC chapter row
+- `components/memoir/ChapterContent.tsx` - Reading view content
+- `components/profile/SettingItem.tsx` - Settings row with arrow/toggle
+- `components/profile/SectionCard.tsx` - Grouped settings container
+- `components/ui/Avatar.tsx` - Rounded avatar with background color
+
+## 5. Mock Data
+
+Create `data/mockData.ts` with:
+
+- Default conversation with "回忆录助手"
+- Sample chat messages (AI greeting + sample exchanges)
+- Chapter list with titles and status
+- Sample chapter content (童年与家庭)
+- User profile data
+
+## 6. Key Implementation Details
+
+### Color Usage (Strict Rules):
+
+- NO gradients anywhere
+- Header backgrounds: solid #A177A6
+- App background: #FAF7F8
+- Cards/bubbles: #FFFFFF
+- AI bubble: white with #200028 text
+- User bubble: #A177A6 with white text
+
+### Typography:
+
+- Use `Noto Sans SC` for UI text
+- Use `Noto Serif SC` for memoir content
+- Primary text: #200028
+- Secondary text: #8C8EA3
+
+### Safe Area Handling:
+
+- Proper padding for iOS notch/Dynamic Island
+- Bottom safe area for tab bar and input area