【每日云彩】APP - 初版提示词

## AI角色和职责定义

你是一名前端开发专家，精通 UniApp X，能够将产品需求转化为高质量、多端兼容的前端代码，严格遵循 UniApp X 技术栈和最佳实践。
同时你也是一名 UI/UX 设计专家，精通移动端界面设计与用户体验优化，能够设计出美观、易用且符合当下审美趋势的扁平风格页面。

**职责**：
- 详细理解【项目背景】、【需求概要】以及【功能详细设计】，其中【项目背景】和【需求概要】作为参考，【功能详细设计】需要严格遵循；
- 根据【UI/UX设计规范】和【代码/实现规范】高质量地生成代码；

**知识库参考**：
- 页面配置规则：pages.json（https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html）
- 样式规范：CSS（https://doc.dcloud.net.cn/uni-app-x/css/）
AI应自行读取并应用文档规则，无需人工额外说明。

**行为**：
- 当我提示你"开始工作"时，你要一直工作直到完成所有要求的任务，中间不能暂停询问我任何事情。
- 不需要构建和运行该项目。

## 项目背景

1. 参赛目的：该项目为参加 2025 鸿蒙创新赛的作品，需要展示高质量移动端 App 页面和良好的用户体验。
2. 赛道和核心功能：App 属于云彩图片轻社交应用，主要功能包括浏览、拍摄和分享云彩图片。

## 需求概要

### 项目目标
开发一款轻量级云彩图片社交 App，支持拍摄、浏览、分享云彩图片。

### 核心功能
- 拍云：用户可以拍摄或上传云彩照片，编辑文案、标签、地点和时间，并选择是否公开到云广场。
- 云广场：展示所有用户公开的云记，支持点赞、评论、收藏、关注互动，内容按瀑布流排列。
- 云百科：提供云的分类知识与图片展示，便于用户学习和了解各种云彩类型。
- 我的：展示用户信息、动态及社交数据（点赞、收藏、关注）。
- 登录/注册：手机号 + 短信验证码快速登录，无需额外注册流程。

### 用户与使用场景
- 目标用户：热爱拍照、分享自然景观、关注社交互动的年轻人。
- 使用场景：户外拍摄云彩、浏览朋友分享内容、参与轻量社交互动、学习云的知识。

### 视觉与交互要求
- 风格：扁平化、清新、以天空和云彩为主视觉语义。
- 操作：简单直观，关键动作有视觉反馈。
- 多端适配：支持鸿蒙、Android、iOS，未来可打包成微信小程序等平台。
- 界面可扩展性：页面布局留白合理，方便后续功能增加。

## 功能详细设计

- 定义：发布的图文内容叫做"云记"；
- 以下所有页面的【页面布局】部分描述都不包含标题栏和tab栏；
- 先将框架自动生成的index页面删除掉，不用询问，直接删除；
- 应用第一个页面为【主要内容页面框架】的【拍云】tab页面；
- 一些需要登录才能使用的功能，需要跳转到登录页面，成功登录后才能使用；

1.【主要内容页面框架】
- 页面框架整体结构从上到下依次为：系统自带的标题栏、tab对应的内容页面、tab栏；
- 底部tab栏有4个；
- 每个tab包含图标和名称，图标在上面，名称在下面；

1.1 第一个tab页面：【拍云】
page命名：shootcloud
标题名称：“记录”
功能描述：展示自己发布的"云记"
页面描述：
----
页面内容主要为一个纵向列表；
列表项内容：整体布局从上到下，内容依次为"图片"、"文案"、"标签"、"时间和地点"；
"图片"：宽度铺满，高度自适应；
"文案"：最多两行，超出展示"..."；
"标签"：支持多个标签，最多两行，超出展示"..."；标签格式示例："#晴天"；样式：圆角，带底色和文字颜色；标签宽度为包裹文字即可，不要100%宽度！
"时间和地点"：横向布局，左边"时间"，右边"地点"；时间格式定义："yyyy-MM-dd HH:mm:ss"；
"标签"与"时间和地点"之间加一个淡淡的、细细的分割线；
页面右下角有个悬浮的圆形"添加"按钮；
----
页面行为：
----
当点击列表项，跳转到【云记详情】页面；
当点击右下角"添加"按钮，先跳转到登录页面，登录成功后再跳转到【选择发布图片】页面；
----

1.1.1 【拍云】二级页面：【发布】
page命名：publish
标题名称：发布
功能描述：提供发布云记的编辑功能，并在页面内选择或拍摄图片
页面描述：
----
- 页面主体：
  - 图片展示区域：显示当前选择的图片，如果未选择，显示占位提示“点击选择图片”；
  - 文案输入框：可编辑云记文字内容，多行显示，限制行数或长度；
  - 标签输入/选择区域：支持添加多个标签，样式为圆角带底色文字；
  - 发布时间、发布地点显示区域：可自动获取或手动编辑；
  - 勾选框：是否公开到【云广场】；
  - 底部发布按钮：点击发布，提交内容并返回【拍云】tab页面；
- 高保真要求：页面整体布局清晰，控件美观，文字和按钮居中，留白合理；
----
页面行为：
----
- 点击图片区域：
  - 弹出底部菜单：选项包括“从相册选择”“拍照”“取消”；
  - 用户选择照片或拍照后，图片区域更新显示选中的图片；
  - 用户点击取消，关闭菜单，不改变当前图片；
- 可重复点击图片区域，重新弹出选择菜单，替换已选择的图片；
- 点击返回按钮：返回【拍云】tab页面，不保存修改；
- 点击发布按钮：提交云记内容（图片、文案、标签、时间、地点、公开设置），发布成功后返回【拍云】tab页面；
- 页面无需滚动条，按钮触控区域明显，用户操作直观。
----

1.2 第二个tab页面：【云广场】
page命名：cloudsquare
标题名称：“云广场”
功能描述：展示所有人公开发布的“云记”
页面描述：
----
页面主要内容为一个纵向双列瀑布流列表；
列表项内容：总体与【拍云】页面列表项内容一致；
区别点：“标签”最多展示一行，超出部分不展示；“时间”格式使用"yyyy-MM-dd"；“地点”精确到县；
“时间和地点”区域下面添加一个区域：“点赞”、“评论”、”收藏”，同时分别展示数量；
“标签”与”时间和地点”时间分割线去掉，在“时间和地点”与“点赞、评论、收藏”部分之间添加一个分割线；
----
页面行为：
----
当点击列表项，跳转到【云记详情】页面；
----

1.2.1 二级页面：【云记详情】
page命名：cloudnote-detail
标题名称：“详情”
功能描述：展示单条“云记”的详细内容及互动信息
页面描述：
----
页面主要内容从上到下依次为：
1. 云记内容：
   - 图片：宽度铺满，高度自适应
   - 文案：可多行，超出显示“...”
   - 标签：多个标签，最多两行，圆角，带底色和文字颜色
   - 发布时间与发布地点：横向布局，均分宽度，各占一半，时间格式"yyyy-MM-dd HH:mm:ss"，地点精确到县
   - 发布者：单独一行显示发布者昵称或头像信息
2. 互动信息区：
   - 点赞、收藏、关注按钮及对应数量
   - 布局整齐，可触控，点击状态有视觉反馈
3. 评论列表：
   - 每个评论项包含头像、昵称、评论内容、评论时间
   - 垂直排列，间距一致
4. 评论输入区：
   - 固定在页面底部，不随页面内容滚动
   - 包含文本输入框和发布按钮，支持评论输入和发布，发布后即时显示新评论
----
页面行为：
----
- 点击返回按钮：返回到【云广场】tab页面
- 点赞/收藏/关注：状态切换，数量更新
- 评论发布：列表即时更新显示
- 点击评论项：跳转到【用户主页】
----

1.2.2 用户主页
page命名：userhome
标题名称：“用户主页”
功能描述：展示指定用户的个人信息及动态内容
页面描述：
----
页面主体结构（从上到下）：
1. 个人信息区：
   - 用户头像
   - 昵称
   - 签名或简介
   - 关注/取消关注按钮（显示在头像或昵称旁边）
2. 社交tab区：
   - 三个tab：点赞、收藏、关注
   - tab栏位于个人信息下方
   - 点击tab切换下方对应内容页
3. 内容页：
   - 位于tab栏下方，显示对应列表
   - 点赞列表：每项展示图片、文案、发布日期、发布地点
   - 收藏列表：每项与点赞列表一致
   - 关注列表：每项展示用户头像和昵称
4. 用户统计区（可选，参考“我的”页面）：
   - 显示云记数量、点赞数量、收藏数量、关注数量
----
高保真要求：
----
- 布局清晰、整齐，控件美观
- 列表项间距一致，元素对齐统一
- 可触控元素（头像、列表项、tab、关注按钮）触感明显
- 页面无需滚动条，留白合理，操作直观
----
页面行为：
----
- 点击tab切换：更新下方内容页
- 点击点赞/收藏列表项：跳转到【云记详情页面】
- 点击关注列表项：跳转到对应用户主页
- 点击关注/取消关注按钮：切换关注状态，并更新关注数量
- 点击返回按钮：返回到上一个页面
----

1.3 第三个tab页面：【云百科】
page命名：cloudwiki
标题名称：“云百科”
功能描述：展示云的分类和具体的云，以及云的百科信息
页面描述：
----
顶部展示"云彩"点亮/收集进度，比如：30% 或 6/58；
页面主要内容为左右分栏布局：
- 左侧：云的分类列表，垂直排列，每个分类项显示分类名称；
- 右侧：对应分类下的云列表，纵向排列，每个云列表项包含“图片”、”云名称”、“简介”、"点亮图标"；
- 列表项内容排列：左边为“图片”，右边为“云名称”和“简介”，右边的上面为”云名称”，下面为“简介”；
- “图片”：宽度自适应，保持统一比例，圆角可适当处理；
- “云名称”：单行显示，超出部分显示"..."；
- “简介”：最多两行，超出部分显示"..."；
- "点亮图标"：如果已点亮/收集，则图标点亮，否则是暗的；
- 列表之间保持适当间距，保证整体整齐；
- 页面可滚动，左右分栏固定，右侧列表根据分类切换更新内容；
----
页面行为：
----
- 点击左侧分类项时，右侧云列表显示该分类下的云；
- 点击右侧云列表项时，跳转到【云百科详情】；
----

1.3.1 【云百科】二级页面：【云百科详情】
page命名：cloudwiki-detail
标题名称：云的名称（动态显示当前云百科项名称）
功能描述：展示选中云的详细百科信息
页面描述：
----
- 页面主体结构（从上到下）：
  1. 云图片展示区：
     - 显示当前云的图片
     - 图片自适应宽度，高度按比例显示
  2. 云信息区：
     - 云的介绍文本内容
     - 文本支持换行和段落
     - 保持文字可读性和视觉层次
  3. 点亮按钮
     - 如果已经点亮/收集，则图标点亮，否则是暗的
----
高保真要求：
----
- 页面布局整齐、留白合理
- 图片和文字对齐统一，视觉层次分明
- 页面控件美观，元素圆角统一
- 支持轻量动效，例如页面切换或图片加载渐入效果
----
页面行为：
----
- 返回按钮：点击返回上一个页面，即【云百科】tab页面
- 可选：如果有图片可放大或滑动查看
- 点亮按钮：当点击"点亮"按钮时，弹窗选择图片或拍摄，上传，成功后图标点亮
----

1.4 tab4页面：我的
page命名：mine
标题名称：“我的”
功能描述：展示用户个人信息及社交动态
页面描述：
----
- 页面主体结构（从上到下）：
  1. 个人信息区：
     - 用户头像
     - 昵称
     - 签名或简介
     “用户头像”、“昵称”、“签名或简介”全部水平居中
  2. 统计信息区（新增，紧接个人信息区）：
     - 云记数量
     - 点赞数量
     - 收藏数量
     - 关注数量
     数字排列整齐，风格统一，保持与个人信息区和tab栏的视觉一致性
  3. 社交tab区：
     - 三个tab：点赞、收藏、关注
     - tab栏在个人信息下方
     - 点击tab切换下方对应内容页
  4. 内容页：
     - 位于tab栏下方，显示对应列表
     - 点赞列表：每项展示图片、文案、发布日期、发布地点
     - 收藏列表：每项与点赞列表一致
     - 关注列表：每项展示用户头像和昵称
高保真要求：
----
- 布局清晰、整齐，控件美观
- 列表项间距一致，元素对齐统一
- 可触控元素（头像、列表项、tab）触感明显
- 页面无需滚动条，留白合理，操作直观
----
页面行为：
----
- 点击tab切换：更新下方内容页
- 点击点赞/收藏列表项：跳转到【云记详情】页面
- 点击关注列表项：跳转到【用户主页】页面
- 点击头像、昵称区域：跳转到【个人信息编辑】页面
----

1.4.1 【个人信息编辑】页面
page命名：editProfile
标题名称：“编辑个人信息”
功能描述：允许用户编辑个人基础信息，包括昵称、头像、性别、生日、心情想法
页面描述：
----
- 页面主体结构（从上到下）：
  1. 头像编辑区：
     - 显示当前头像，点击可更换头像（弹出拍照或相册选择菜单）
  2. 昵称编辑：
     - 输入框，显示当前昵称，可修改
  3. 性别选择：
     - 单选控件，选项包括“男”“女”“未知”
  4. 生日选择：
     - 日期选择器控件
  5. 心情想法：
     - 多行文本输入框，用于填写当前心情或简介
  6. 保存按钮：
     - 固定在页面底部，点击保存修改并返回上一个页面
----
高保真要求：
----
- 布局整齐，控件对齐统一
- 输入框、选择器、按钮风格美观，圆角统一
- 可触控元素触感明显
- 页面无需滚动条，留白合理，操作直观
----
页面行为：
----
- 点击头像：弹出选择菜单（拍照/相册/取消）
- 点击保存按钮：提交修改，返回上一个页面
- 输入框、选择器内容可编辑
----

2. 登录与注册
page命名：login
标题名称："登录"
功能描述：提供用户通过手机号 + 短信验证码方式进行登录；未注册用户会自动注册
页面描述：
----
页面主体结构（从上到下）：
1. Logo区：
   - 显示应用 Logo
2. 输入区：
   - 手机号输入框
   - 短信验证码输入框
   - 短信验证码发送按钮（在输入框旁或下方）
3. 登录按钮区：
   - 登录按钮，点击后触发登录逻辑
高保真要求：
----
- 布局简洁、整齐，元素对齐统一
- 输入框、按钮可触控，反馈明显
- 留白合理，视觉清爽，符合移动端操作习惯
- 页面无需滚动条
----
页面行为：
----
- 点击短信验证码发送按钮：触发发送验证码逻辑，并显示倒计时
- 点击登录按钮：校验手机号与验证码，完成登录操作
----

## UI/UX设计

1.整体目标
- 界面必须 **高保真展示级**，视觉效果接近最终发布效果；
- 页面**布局保持整齐**，**不允许错位**、重叠或留白混乱；
- 元素必须经过基本美化，不允许粗糙的默认样式。

2.视觉风格
- 建议使用扁平化、清新明亮风格；主色调可选天空蓝 + 白色，强调色可适度使用（黄色/珊瑚色）；
- 背景保持简洁留白，避免杂乱；
- 图片、按钮、卡片等圆角建议统一风格，具体数值可根据整体比例调整；
- 元素对齐保持一致（左/右/居中），无需严格死板数值。

3.字体与排版
- 字体尽量统一，保持现代、轻盈风格；
- 标题、正文、辅助文字建议有层次区分，但具体字号可根据整体视觉调整；
- 行高、颜色应保证可读性，但不必死板指定固定值。

4.间距与布局
- 保持组件间距和区块间距规则化，避免过宽或过窄；
- 列表、卡片等内部元素保持相对统一的间距；
- 间距和 padding 可根据屏幕尺寸、内容和整体视觉灵活调整。

5.交互控件
- 按钮、输入框、图标等控件应保证可触控性和基本美观；
- 控件应有三态反馈（默认 / 按下 / 禁用）或类似效果；
- 文本应可读，按钮文字居中即可，无需死板指定高度或内边距。

6.列表与卡片
- 卡片可使用阴影或浅边框，背景可选白色或浅色；
- 列表项和多列布局应整齐、间距规则，但具体数值可灵活调整；
- 元素对齐、列间距、边距保持视觉统一即可。

7.动效与反馈
- 页面切换、按钮点击、列表刷新等建议有轻量动效；
- 用户操作反馈可用 Toast、轻动画等形式提示。

8.多端适配
- 以竖屏手机为主，保证鸿蒙/Android/iOS 常见分辨率下布局不出错；
- 避免控件溢出或重叠，但无需严格死板单位或数值。

## 代码/实现规范

重要说明：以下规范在生成每个页面和组件时必须严格遵守，所有输出内容应完全符合 UniApp X 技术栈要求，并与当前项目框架保持一致。

## 0. 全局规则
- **图片资源**：所有图片暂时使用统一地址：`https://fastly.picsum.photos/id/451/400/300.jpg?hmac=MR3Xc5ScMz4tYwIT81kKiuPghEay-uM4bjF4Z5MLNd4`
- **图标规范**：所有图标暂时使用文字emoji图标
- **项目结构**：严格遵循现有框架结构，不重复创建pages.json等配置文件
- **滚动条**：所有页面禁用滚动条显示
- **布局安全**：所有flex容器必须显式设置`flex-direction`方向属性

## 1. 技术栈与布局规范
- **UniApp X最佳实践**：严格遵循当前项目结构和技术栈要求
- **CSS布局强制要求**：
  - 所有`display: flex`容器必须显式设置`flex-direction: row`或`flex-direction: column`
  - 横向布局元素必须包含`flex-direction: row`
  - 纵向布局元素必须包含`flex-direction: column`
  - 禁止依赖CSS默认值，确保多端兼容性

## 2. 项目文件与组件规范
- **文件结构**：保持现有pages.json配置，不创建冗余文件
- **组件复用**：避免重复创建功能相同的组件，优先使用现有结构
- **标题栏**：统一使用框架自带标题栏，通过pages.json配置按钮功能

## 3. 代码质量与维护规范
- **中文注释**：关键交互、样式、API替换点必须添加清晰中文注释
- **类型安全**：
  - 数组初始化为`[]`，对象初始化为`{}`
  - 避免TS风格类型断言，确保UTS编译正常
- **数据接口**：
  - 模拟数据包含完整字段结构，便于后续接口替换
  - 保持接口设计简单明了，具备良好扩展性

## 4. 布局检查清单（强制验证）
在生成每个页面后必须验证：
- [ ] 所有flex容器显式设置了flex-direction
- [ ] 横向布局元素正确使用`flex-direction: row`
- [ ] 纵向布局元素正确使用`flex-direction: column`
- [ ] 多列布局设置了正确的flex-wrap属性
- [ ] 布局元素对齐方式明确指定

## 5. 预防性措施
- **模板化开发**：为常见布局模式建立标准CSS模板
- **自动化验证**：在代码生成阶段自动添加必要的布局属性
- **跨平台测试**：确保布局在鸿蒙、iOS、Android平台一致性

那么，"开始工作"吧！