Files
e-party-iOS/CreateFeedView-Analysis.md
edwinQQQ 4bbb4f8434 feat: 添加CreateFeed功能及相关视图组件
- 新增CreateFeedView和CreateFeedFeature,支持用户发布图文动态。
- 在FeedView中集成CreateFeedView,允许用户通过加号按钮访问发布界面。
- 实现图片选择和文本输入功能,支持最多9张图片的上传。
- 添加发布API请求模型,处理动态发布逻辑。
- 更新FeedFeature以管理CreateFeedView的显示状态,确保用户体验流畅。
- 完善UI结构分析与执行计划文档,明确开发步骤和技术要点。
2025-07-16 15:53:32 +08:00

2.2 KiB
Raw Blame History

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。