🎬 iShare 设计文档

graph TD subgraph 入口 A[首页/欢迎页] --> B{用户状态} end subgraph 认证模块 B -->|未登录| C[登录页面] B -->|未注册| D[注册页面] C --> E[忘记密码] E --> F[获取验证码] F --> G[设置新密码] D --> H[验证码验证] end subgraph 主功能区 B -->|已登录| I[主页/服务列表] I --> J[服务详情页] J --> K[支付页面] I --> L[广场/拼车] L --> M[车票详情] M --> K I --> N[推广中心] I --> O[个人中心] end subgraph 底部导航 P[首页] --- Q[广场] --- R[推广] --- S[我的] end style A fill:#370CE2,color:#fff style I fill:#E94C89,color:#fff style K fill:#C22F6C,color:#fff style L fill:#E94C89,color:#fff

flowchart LR subgraph 登录流程 A1[登录页面] --> A2{选择方式} A2 -->|社交登录| A3[微信/谷歌/FB/Twitter] A2 -->|账号登录| A4[输入手机/邮箱+密码] A3 --> A5[授权回调] A4 --> A6[验证账号] A5 --> A7[登录成功] A6 --> A7 A4 -->|忘记密码| B1 end subgraph 忘记密码 B1[选择验证方式] --> B2{手机/邮箱} B2 -->|手机| B3[输入手机号] B2 -->|邮箱| B4[输入邮箱] B3 --> B5[获取验证码] B4 --> B5 B5 --> B6[输入验证码] B6 --> B7[设置新密码] B7 --> A1 end subgraph 注册流程 C1[注册页面] --> C2[输入手机/邮箱] C2 --> C3[获取验证码] C3 --> C4[输入验证码] C4 --> C5[设置密码] C5 --> C6[注册成功] C6 --> A7 end style A7 fill:#370CE2,color:#fff style C6 fill:#370CE2,color:#fff

flowchart LR A[主页/服务列表] -->|点击服务卡片| B[服务详情页] B -->|查看| C[服务介绍] B -->|查看| D[价格套餐] B -->|查看| E[会员权益] B -->|查看| F[常见问题] B -->|点击购买| G[确认订单] G --> H[选择支付方式] H --> I[完成支付] I -->|成功| J[获取账号信息] I -->|失败| K[重新支付] K --> H style A fill:#370CE2,color:#fff style I fill:#E94C89,color:#fff style J fill:#C22F6C,color:#fff

flowchart LR A[进入广场] --> B[浏览车票列表] B --> C{筛选} C -->|按服务类型| D[Netflix/Spotify等] C -->|按价格| E[价格区间] C -->|按状态| F[可上车/已满员] D --> G[查看车票详情] E --> G F --> G G --> H{决定} H -->|上车| I[确认加入] H -->|返回| B I --> J[支付车费] J --> K[上车成功] K --> L[获取账号信息] style A fill:#370CE2,color:#fff style K fill:#E94C89,color:#fff style L fill:#C22F6C,color:#fff

graph LR A[首页] --- B[广场] --- C[推广] --- D[我的] A --> A1[服务列表] B --> B1[车票列表] C --> C1[邀请返现] D --> D1[个人中心] style A fill:#370CE2,color:#fff style B fill:#E94C89,color:#fff style C fill:#E94C89,color:#fff style D fill:#E94C89,color:#fff