Pe Repo 页面结构规划
1970-01-01•Admin
Pe Repo 页面结构规划
核心页面列表
认证流程页面
P100 - 登录页面 (Login Page)
- 功能：用户邮箱/密码登录
- 包含：登录表单、忘记密码链接、注册入口
- 用户流程：首次访问或会话过期时进入
P101 - 注册页面 (Register Page)
- 功能：新用户账号注册
- 包含：注册表单、邮箱验证、用户协议
- 用户流程：从登录页点击注册进入
P102 - 忘记密码页面 (Forgot Password Page)
- 功能：密码重置流程
- 包含：邮箱输入、重置链接发送确认
- 用户流程：从登录页点击忘记密码进入
主要工作页面
P110 - Playground 演练场 (主页面)
- 功能：提示词创作和测试的核心工作台
- 包含：
- 提示词编辑器
- 参数设置面板
- 模型配置区
- 执行控制区
- 结果展示区
- 评分保存区
- 快速历史访问
- 用户流程：登录后的默认页面，用户80%时间在此
P111 - 执行历史页面 (Execution History)
- 功能：查看和管理所有AI执行记录
- 包含：
- 时间线展示区
- 高级筛选面板
- 执行记录详情弹窗
- 批量操作工具栏
- 统计分析区
- 用户流程：从Playground或导航菜单进入
P112 - 模板库页面 (Template Library)
- 功能：管理已保存的提示词模板
- 包含：
- 模板列表展示
- 分类筛选侧栏
- 模板详情面板
- 版本历史对比
- 使用统计展示
- 用户流程：从Playground或导航菜单进入
详情和编辑页面
P120 - 执行记录详情页面 (Execution Detail)
- 功能：查看单个执行记录的完整信息
- 包含：
- 完整的输入输出内容
- 模型参数详情
- 执行元数据
- 评分和反馈
- 相关操作按钮
- 用户流程：从执行历史页面点击记录进入
P121 - 模板详情页面 (Template Detail)
- 功能：查看和编辑模板详细信息
- 包含：
- 模板内容编辑器
- 参数定义面板
- 版本历史列表
- 使用统计图表
- 关联执行记录
- 用户流程：从模板库页面点击模板进入
P122 - 版本对比页面 (Version Compare)
- 功能：对比模板的不同版本
- 包含：
- 左右分栏对比视图
- 差异高亮显示
- 版本选择器
- 回滚操作确认
- 用户流程：从模板详情页面进入
用户管理页面
P130 - 用户设置页面 (User Settings)
- 功能：管理个人账户和系统配置
- 包含：
- 个人信息编辑
- API密钥管理
- 偏好设置
- 账户安全
- 用户流程：从顶部导航用户菜单进入
P131 - API配置页面 (API Configuration)
- 功能：配置各种AI服务的API密钥
- 包含：
- OpenAI API配置
- Claude API配置
- 其他模型API配置
- 连接测试功能
- 用户流程：从用户设置页面进入
辅助和帮助页面
P140 - 仪表板页面 (Dashboard)
- 功能：用户使用概览和快速导航
- 包含：
- 使用统计概览
- 最近活动时间线
- 快速操作入口
- 推荐模板展示
- 用户流程：可选的首页，从导航菜单进入
P141 - 帮助中心页面 (Help Center)
- 功能：产品使用指南和常见问题
- 包含：
- 使用教程
- 功能介绍
- 常见问题FAQ
- 联系支持
- 用户流程：从导航菜单或帮助按钮进入
P142 - 关于页面 (About Page)
- 功能：产品信息和团队介绍
- 包含：
- 产品介绍
- 版本信息
- 团队信息
- 开源协议
- 用户流程：从导航菜单进入
页面优先级分类
🔥 MVP必需页面（第一阶段开发）
- P100 登录页面
- P101 注册页面
- P110 Playground演练场
- P111 执行历史页面
- P112 模板库页面
- P130 用户设置页面
⭐ 增强功能页面（第二阶段开发）
- P120 执行记录详情页面
- P121 模板详情页面
- P122 版本对比页面
- P131 API配置页面
💡 完善体验页面（第三阶段开发）
- P102 忘记密码页面
- P140 仪表板页面
- P141 帮助中心页面
- P142 关于页面
页面关系图
P100 登录 ──────────────┐
▼
P110 Playground ◄──► P111 执行历史 ◄──► P120 执行详情
▲ │
│ ▼
└──────────── P112 模板库 ◄──► P121 模板详情
│
▼
P122 版本对比
P130 用户设置 ◄──► P131 API配置
P140 仪表板 ────► [快速导航到各主要页面]
响应式设计考虑
桌面端 (≥1024px)
- 所有页面采用完整布局
- 侧边栏导航固定显示
- 支持多面板并行显示
平板端 (768px-1023px)
- 简化侧边栏，可收起
- 部分页面调整为上下布局
- 保持核心功能完整
移动端 (≤767px)
- 专注核心功能页面：P110, P111, P112
- 简化交互流程
- 优化触摸操作体验
下一步规划
建议优先设计顺序：
- P110 Playground - 核心工作台，最重要
- P111 执行历史 - 数据查看，使用频繁
- P112 模板库 - 资产管理，完善工作流
- P100/P101 登录注册 - 基础准入功能
- P130 用户设置 - 基础配置功能
你觉得这个页面规划如何？我们先从哪个页面开始设计线框图？