4bbb4f8434
- 新增CreateFeedView和CreateFeedFeature，支持用户发布图文动态。 - 在FeedView中集成CreateFeedView，允许用户通过加号按钮访问发布界面。 - 实现图片选择和文本输入功能，支持最多9张图片的上传。 - 添加发布API请求模型，处理动态发布逻辑。 - 更新FeedFeature以管理CreateFeedView的显示状态，确保用户体验流畅。 - 完善UI结构分析与执行计划文档，明确开发步骤和技术要点。
79 lines
2.2 KiB
Markdown
79 lines
2.2 KiB
Markdown
# CreateFeedView UI 结构分析与执行计划
|
||
|
||
## UI 结构分析
|
||
|
||
根据设计稿，CreateFeedView 应包含以下UI元素：
|
||
|
||
### 1. 顶部导航栏
|
||
- 左侧：返回按钮
|
||
- 中间："图文发布" 标题
|
||
- 右侧："发布" 按钮
|
||
|
||
### 2. 主要内容区域
|
||
- 文本输入框："Enter Content" 占位符，支持多行输入，最大500字符
|
||
- 字符计数显示："0/500" 格式
|
||
- 图片添加区域：
|
||
- 默认显示一个 "+" 按钮（使用 "add photo" 图片资源）
|
||
- 支持添加最多9张图片
|
||
- 图片以网格形式排列
|
||
- 每张图片可以删除
|
||
|
||
### 3. 底部发布按钮
|
||
- 紫色渐变背景的"发布"按钮
|
||
- 占据屏幕底部，固定位置
|
||
|
||
## 执行计划
|
||
|
||
### 第一步：创建 CreateFeedFeature
|
||
- 定义状态管理结构
|
||
- 实现文本输入、图片选择、发布等Action
|
||
- 添加表单验证逻辑
|
||
- 集成图片选择器
|
||
|
||
### 第二步：创建 CreateFeedView
|
||
- 实现顶部导航栏
|
||
- 创建文本输入区域
|
||
- 实现图片选择和展示网格
|
||
- 添加发布按钮
|
||
- 应用深色主题样式
|
||
|
||
### 第三步：集成到 FeedView
|
||
- 修改 FeedView 中的加号按钮点击事件
|
||
- 添加导航到 CreateFeedView 的逻辑
|
||
- 确保返回时能刷新动态列表
|
||
|
||
### 第四步：创建发布API模型
|
||
- 定义发布动态的请求和响应模型
|
||
- 添加API端点定义
|
||
- 实现发布逻辑（模拟或真实API）
|
||
|
||
### 第五步：测试和优化
|
||
- 测试各种输入场景
|
||
- 验证图片选择和预览功能
|
||
- 确保UI响应和交互流畅
|
||
|
||
## 技术要点
|
||
|
||
1. **状态管理**：使用 ComposableArchitecture 模式
|
||
2. **图片选择**：使用 PhotosUI 框架
|
||
3. **UI样式**：保持与现有深色主题一致
|
||
4. **表单验证**：实时字符计数和输入限制
|
||
5. **导航管理**：使用 NavigationStack 或 sheet 展示
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
yana/
|
||
├── Features/
|
||
│ └── CreateFeedFeature.swift # 新建
|
||
├── Views/
|
||
│ └── CreateFeedView.swift # 新建
|
||
├── APIs/
|
||
│ ├── APIEndpoints.swift # 修改：添加发布端点
|
||
│ └── DynamicsModels.swift # 修改：添加发布模型
|
||
└── Assets.xcassets/
|
||
└── Home/
|
||
└── add photo.imageset/ # 已存在
|
||
```
|
||
|
||
开始实施第一步：创建 CreateFeedFeature。 |