vibe-coding-cn/askyi/askyi-h5/pages.canvas

{
	"nodes":[
		{"id":"home","type":"text","text":"## Home 首页\n\n**路径**: `/home/`\n**优先级**: P0\n\n### UI 模式\n- 瀑布流双列布局\n- 下拉刷新 + 上拉加载\n\n### Tab 导航\n- Follow 关注\n- Discover 发现\n- User Cases 案例\n\n### 分类筛选\n- Recommended 推荐\n- Yijing Bagua 易经八卦\n- Feng Shui Guide 风水指南\n- TCM Wellness 中医养生\n- Mystical Tales 奇闻异事\n\n### 卡片组件\n- 封面图片\n- 文章标题\n- 作者头像 + 昵称\n- 点赞数\n\n### API 依赖\n- GET /api/articles (分页)\n- GET /api/categories\n\n### 跳转目标\n- 点击卡片 → ArticleDetail\n- 点击作者 → ExpertProfile","x":-1120,"y":-2120,"width":320,"height":1120,"color":"3"},
		{"id":"divination","type":"text","text":"## Divination 占卜\n\n**路径**: `/divination/`\n**优先级**: P0\n\n### UI 模式\n- 功能入口列表\n- 卡片式布局\n\n### 当前功能\n**今日运势**\n- 基于八字五行分析\n- 分析维度:\n  - 财运\n  - 事业\n  - 健康\n  - 桃花\n\n### 计划功能\n- 金钱卦 coins\n- 摇卦 shake\n- 求签 stick\n- 姓名测算 name\n- 占卜历史 history\n\n### API 依赖\n- GET /api/divination/today\n- POST /api/divination/coins\n- POST /api/divination/shake\n\n### 跳转目标\n- 点击功能卡 → 具体占卜页\n- 查看历史 → DivinationHistory","x":-200,"y":-2000,"width":320,"height":1080,"color":"1"},
		{"id":"login","type":"text","text":"## Login 登录\n\n**路径**: `/login/`\n**优先级**: P0\n\n### UI 模式\n- 表单页面\n- Tab 切换登录方式\n\n### 登录方式\n**邮箱登录**\n- 邮箱/用户名 输入\n- 密码 输入\n\n**手机号登录**\n- 手机号 输入\n- 验证码 输入\n\n### 社交登录\n- 微信登录 (WeChat)\n- Facebook 登录\n- Google 登录\n\n### 其他入口\n- 忘记密码 → ForgotPassword\n- 创建账号 → Register\n\n### API 依赖\n- POST /api/auth/local (邮箱)\n- POST /api/auth/sms (手机)\n- GET /api/auth/wechat (微信)\n\n### 跳转目标\n- 登录成功 → 返回来源页\n- 忘记密码 → ForgotPassword\n- 注册 → Register","x":360,"y":-2090,"width":320,"height":1170,"color":"4"},
		{"id":"publish","type":"text","text":"## Publish 发布\n\n**路径**: `/publish/`\n**优先级**: P0\n**需要登录**: 是\n\n### UI 模式\n- 表单页面\n- 多媒体上传\n\n### 表单字段\n1. **标题** - 文本输入\n2. **封面图片** - 拖拽上传\n   - 格式: JPG/PNG/WebP\n   - 大小: 最大 5MB\n3. **视频** - 可选上传\n   - 格式: MP4/MOV\n   - 大小: 最大 100MB\n4. **内容** - Markdown 编辑器\n\n### 按钮\n- 取消 - 返回上一页\n- 发布 - 提交内容\n\n### API 依赖\n- POST /api/upload (图片/视频)\n- POST /api/articles (创建文章)\n\n### 跳转目标\n- 发布成功 → ArticleDetail\n- 取消 → 返回","x":360,"y":-3480,"width":320,"height":1080,"color":"5"},
		{"id":"profile","type":"text","text":"## Profile 个人中心\n\n**路径**: `/profile/`\n**优先级**: P0\n**需要登录**: 是\n\n### UI 模式\n- 个人信息卡片\n- 功能列表\n\n### 用户信息区\n- 头像\n- 昵称\n- 简介\n- 关注数 / 粉丝数\n\n### 功能列表\n- 我的文章\n- 我的收藏\n- 我的关注\n- 浏览历史\n- 设置\n\n### API 依赖\n- GET /api/users/me\n- GET /api/articles?author=me\n- GET /api/reactions?type=favorite\n\n### 跳转目标\n- 编辑资料 → ProfileEdit\n- 设置 → Settings\n- 我的文章 → MyArticles\n- 未登录 → Login","x":1160,"y":-1360,"width":320,"height":1240,"color":"4"},
		{"id":"settings","type":"text","text":"## Settings 设置\n\n**路径**: `/settings/`\n**优先级**: P2\n**需要登录**: 是\n\n### 功能列表\n- 账号安全\n- 隐私设置\n- 通知设置\n- 清除缓存\n- 关于我们\n- 退出登录","x":1180,"y":80,"width":280,"height":400,"color":"5"},
		{"id":"article_detail","type":"text","text":"## ArticleDetail 文章详情\n\n**路径**: `/article/:id`\n**优先级**: P1\n\n### UI 模式\n- 文章阅读页\n- 底部交互栏\n\n### 内容区\n- 标题\n- 作者信息\n- 发布时间\n- 正文内容 (Markdown)\n- 封面图/视频\n\n### 交互栏\n- 点赞按钮\n- 收藏按钮\n- 分享按钮\n- 评论入口\n\n### API 依赖\n- GET /api/articles/:id\n- POST /api/reactions\n- GET /api/comments?article=:id","x":-1120,"y":-440,"width":320,"height":840,"color":"3"},
		{"id":"expert_profile","type":"text","text":"## ExpertProfile 专家主页\n\n**路径**: `/expert/:id`\n**优先级**: P1\n\n### UI 模式\n- 个人主页\n- 内容列表\n\n### 用户信息区\n- 头像 + 认证标识\n- 昵称 + 简介\n- 关注数 / 粉丝数\n- 关注按钮\n\n### Tab 内容\n- 文章列表\n- 视频列表\n- 课程列表\n\n### API 依赖\n- GET /api/experts/:id\n- GET /api/articles?author=:id\n- GET /api/videos?author=:id\n- POST /api/followings","x":-600,"y":-440,"width":320,"height":840,"color":"3"},
		{"id":"hot","type":"text","text":"## Hot 热门视频\n\n**路径**: `/hot/`\n**优先级**: P0\n\n### UI 模式\n- 全屏视频流（抖音风格）\n- 上滑切换视频\n- 自动播放\n\n### 右侧交互按钮\n- 头像 + 关注按钮(+)\n- 点赞 (heart + count)\n- 收藏 (star + count)\n- 分享 (share + count)\n\n### 底部信息\n- @用户名\n- 视频标题\n- #标签列表\n- 分类标签\n\n### 进度条\n- 底部视频播放进度\n\n### API 依赖\n- GET /api/videos (分页)\n- POST /api/reactions (点赞/收藏)\n- POST /api/followings (关注)\n\n### 跳转目标\n- 点击头像 → ExpertProfile\n- 点击分享 → 分享弹窗","x":-600,"y":-2080,"width":320,"height":1080,"color":"1"},
		{"id":"tabbar","type":"text","text":"## TabBar 底部导航\n\n**固定显示**: 5个入口\n\n| 图标 | 标签 | 路径 |\n|------|------|------|\n| home | 首页 | /home/ |\n| fire | 热门 | /hot/ |\n| plus | 发布 | /publish/ |\n| compass | 占卜 | /divination/ |\n| user | 我的 | /profile/ |\n\n### 登录拦截\n- 发布 → 需要登录\n- 我的 → 需要登录","x":-1640,"y":-440,"width":320,"height":500,"color":"2"},
		{"id":"flow_title","type":"text","text":"## 核心用户流程\n\n### 浏览流程\nHome → ArticleDetail → ExpertProfile\n\n### 视频流程\nHot → 上滑浏览 → 关注/点赞\n\n### 发布流程\nPublish → (需登录) → Login → Publish → 发布成功\n\n### 占卜流程\nDivination → 选择功能 → 获取结果","x":-1720,"y":140,"width":400,"height":520,"color":"6"},
		{"id":"title","type":"text","text":"# askyi-h5 页面功能\n\n**描述**: 页面功能、跳转流程、数据依赖\n**更新**: 2026-01-05\n\n用于指导 askyi-uniapp 迁移开发","x":-1680,"y":-2120,"width":320,"height":200,"color":"6"},
		{"id":"search","type":"text","text":"## Search 搜索\n\n**路径**: `/search/`\n**优先级**: P1\n\n### UI 模式\n- 搜索输入框\n- 历史记录\n- 结果列表\n\n### 搜索范围\n- 文章\n- 视频\n- 专家\n- 课程\n\n### API 依赖\n- GET /api/search?q=keyword","x":800,"y":80,"width":280,"height":640,"color":"5"}
	],
	"edges":[
		{"id":"e1","fromNode":"home","fromSide":"bottom","toNode":"article_detail","toSide":"top","label":"点击卡片"},
		{"id":"e2","fromNode":"home","fromSide":"bottom","toNode":"expert_profile","toSide":"top","label":"点击作者"},
		{"id":"e3","fromNode":"hot","fromSide":"bottom","toNode":"expert_profile","toSide":"top","label":"点击头像"},
		{"id":"e4","fromNode":"profile","fromSide":"top","toNode":"login","toSide":"right","label":"未登录"},
		{"id":"e5","fromNode":"publish","fromSide":"bottom","toNode":"login","toSide":"top","label":"需要登录"},
		{"id":"e6","fromNode":"login","fromSide":"bottom","toNode":"profile","toSide":"left","label":"登录成功"},
		{"id":"e7","fromNode":"article_detail","fromSide":"right","toNode":"expert_profile","toSide":"left","label":"点击作者"},
		{"id":"e8","fromNode":"profile","fromSide":"bottom","toNode":"settings","toSide":"top","label":"设置"},
		{"id":"e9","fromNode":"tabbar","fromSide":"top","toNode":"home","toSide":"bottom","label":"首页"},
		{"id":"e10","fromNode":"tabbar","fromSide":"top","toNode":"hot","toSide":"bottom","label":"热门"}
	]
}