aurora blog 前端前台需求

前端需求

展示页面

一、页面形式

1. Header导航栏
   • 显示LOGO
   • 有首页、说说、关于、归档、标签、留言、友链、相册等导航按钮，点击后影响页面显示内容
   • 搜索按钮
   • 选择语言
   • 用户头像或登录按钮
     • 未登录时显示登录按钮，点击后显示登录弹窗，要求输入账号密码，可选择注册
     • 注册页面要求提供账号密码、邮箱及其验证码
     • 登录后显示头像，点击头像时二次选择用户中心或登出选项
   • 色彩主题设置按钮
2. Footer页脚显示版权信息和备案号
3. 中间显示内容根据导航栏的选择决定
4. 除首页外每个页面左上角显示当前路径或标题
5. 左下角有个小史莱姆说废话
6. 右下角有一个选项标签，下滑动作时收到右侧，不在顶部时显示页面进度和回到顶部按钮
   • 回到顶部，点击后回到顶部
   • 搜索按钮，点击后弹出**[搜索页面]**对话框
   • 首页导航按钮，点击后回到首页
7. 用户中心Sider侧边栏
   • 头像
   • 可更改的昵称、网址、描述输入框
   • 不可更改的邮箱输入框，右面有单独修改按钮
     • 点击后弹出邮箱修改弹窗，要求输入邮箱和验证码
   • 订阅开关
   • 修改按钮
8. 右上角的弹窗提醒
9. **[搜索页面]**模态弹窗

二、首页

1. 最上面一篇置顶**[文章 格子]**占一排
2. 接下来两篇推荐**[文章 格子]**放一排
3. 最后是一个布局
   • 左侧是文章列表
     • 显示所有标签和全部选项，点击后以此进行筛选
     • 下面有分页码信息
     • 一系列**[文章 格子]**
       • 标题
       • 部分内容
       • 封面图片
   • 右侧是一些信息
     • [博客信息介绍 格子]
     • [最近评论 格子]
     • [标签目录 格子]
     • [公告 格子]
     • [网站信息 格子]

三、说说页面

1. 左侧是说说列表
   • 下面有分页码信息
   • [说说 格子]
2. 右侧有一个**[博客信息介绍 格子]**

四、关于页面

就是一篇叫做“关于”的文章详情页面，不显示显示上一篇和下一篇而已

五、归档页面

显示博客文章的时间轴

• 中间一根轴，每个月一个，分页
• 其中一侧是日期
• 另一侧是不显示封面的**[文章格子]**，点击可查看对应文章

六、标签页面

显示所有标签和每个标签下对应的文章数量，点击可跳转

七、留言页面

就是一篇叫做“留言”的文章详情页面，不显示显示上一篇和下一篇而已

八、友链页面

差不多是一篇叫做“友链”的文章详情页面，不显示显示上一篇和下一篇而已

额外显示友链信息，每个友链显示头像、名称、介绍，点击可跳转友链链接

九、相册页面

• 点中相册导航时显示相册的二级菜单，再次点击跳转

• 显示该相册内的所有照片，点击看大图

十、文章详情页面

• 左侧
  • 左上角显示 分类、标签、标题
  • 左上角接下来显示作者头像、昵称、发布时间、字数统计、预计阅读时间
  • 以MarkDown形式显示博客内容
  • 下面显示上一篇和下一篇**[文章 格子]**
  • [评论区]
• 右侧
  • [博客信息介绍 格子]
  • 文章的Md标题目录
  • 三个按钮，返回上级、返回顶部、发送66

十一、说说详情页面

• 左侧
  • [说说格子]
  • [评论区]
• 右侧
  • [博客信息介绍 格子]

十二、搜索页面

• 一个输入框，输入内容后右侧有清空按钮
• 未输入内容时下面显示最近搜索结果
• 输入内容时实时搜索并显示搜索结果
• 鼠标点击搜索结果跳转到对应的**[文章详情页面]**
• 被选中的搜索结果外侧高亮标识
• Enter跳转到选中结果的**[文章详情页面]**
• 上下键移动选中
• Esc或鼠标点击对话框外侧关闭搜索对话框
• 下面显示提示信息和使用的搜索引擎

十三、404页面

前端组件

一、文章 格子

• 标题
• 部分内容
• 点击跳转到文章详情
• 显示推荐或置顶属性信息

二、博客信息介绍 格子

• 作者头像
• 作者昵称
• 个人简介
• 个人其他网站链接（如GitHub、Gitee）
• 博客信息统计（文章、说说、分类、标签的数量）

三、最近评论 格子

显示几条最近的评论

• 评论人昵称
• 评论人头像
• 评论时间
• 评论内容

四、标签目录 格子

• 显示所有的标签，点击可跳转
• 查看更多按钮，跳转到标签页面

五、公告 格子

显示公告

六、网站信息 格子

显示网站信息

• 运行时间
• 总访问量

七、评论区

• 输入框
• 评论按钮
• 显示所有评论，回复的评论向内缩进
• 每条评论显示评论人昵称、时间、内容和回复按钮，点击后显示回复框
• 评论成功右上角弹窗

八、说说格子

• 左上角显示 说说创建人昵称、时间、评论数
• 接下来纯文本形式显示全部文字内容
• 显示图片缩略，点击看大图

管理页面

一、登录页面

显示账号密码框，要求登录

二、页面形式

1. 左侧一个Sider导航栏，导航栏内容和跳转链接来自后端传入
2. 上面一个Header
   • 左侧固定显示侧边栏收起按钮、可点击的页面路径
   • 右侧固定显示全屏按钮和个人头像，点击头像时二次选择用户中心或登出选项
   • 下面是一个打开过的页面标签栏，点击可跳转，有关闭按钮，右侧有全部关闭按钮
3. 根据选择的导航显示页面内容

后端需求