首页Picals About

此处仅仅只是初步的页面逻辑构思，具体需要边落实边完善～

# 技术栈

采用 Next.js + Prisma + MySQL 全栈框架。其中使用 MySQL 是为了兼容原项目所使用的数据库。

组件库，使用 MUI。尽可能不自己封装组件，100% 使用组件库，可以封装为开源模板。

image-20240726010218831

部署采用 Docker，实现服务端 Next 项目的一键集成。域名通过 CF 进行代理。

# 功能设计

后台管理系统的本职是对整个项目的数据库数据提供可视化的直观管理。

# 数据看板

数据看板使用 tremor 进行绘制，放在首页进行展示。

image-20240726010157094

单纯展示总数（数据）：

  1. 用户总数
  2. 插画总数
    1. 原创作品数
    2. 转载作品数
  3. 插画家总数
  4. 标签总数

一些图表：

  1. 插画标签统计图：饼图或环形图
  2. 搜索关键词趋势图：折线图
  3. 作品浏览量图：折线图
  4. 插画家作品数量：柱形图
  5. 用户增长图：折线图
  6. 插画上传图：折线图

# 登录账号管理

后台管理系统的账户和一般的 Picals 账号分开两个不同表存储，并且需要单独管理。

用户需要通过这些特定的账号进入后台管理系统。

  1. 提供专门的账户管理界面，将数据库中的账户数据可视化，以 table 的形式进行分页展示。
  2. 可以快速填写表单新增账户。
  3. 可以管理账户信息。
  4. 可以单选、多选删除账户。
  5. 可以查看头像大图。
  6. 根据用户名、用户 id 搜索用户。
  7. 根据创建时间排序。
  8. 根据创建时间范围筛选。

需要新增数据库，拟定字段：

  1. username
  2. password
  3. avatar
  4. identity（暂不考虑实现权限架构，默认全部为 1）
  5. createdAt

# 用户管理

  1. 提供专门的用户管理界面，将数据库中的用户数据可视化，以 table 的形式进行分页展示。
  2. 可以单独修改特定用户的除了密码以外的所有个人信息。
  3. 可以删除某个特定的用户（软删除，需要在数据库中新增 status 字段）。表格支持多选，一次性删除多个。
  4. 可以通过输入用户名关键字、用户 id 来快速查找对应用户。
  5. 可以查看用户的头像（avatar）、个人中心背景图（background_img）的大图。
  6. 可以排序：
    1. 按用户名
    2. 按注册时间
    3. 按发布 & 转载作品数
    4. 按粉丝数
  7. 筛选：
    1. 注册时间范围，用户自己选定
    2. 粉丝数范围，用户自己选定
    3. 发布 & 转载作品数，用户自己选定
    4. 删除状态

# 作品管理

  1. 提供专门的插画管理界面，将数据库中的插画数据可视化，以 table 的形式进行分页展示。

  2. 可以对某个插画的全部信息进行修改。

  3. 可以查看插画的图片列表的详细信息，包括缩略图和原图以及对应的 url 地址。

  4. 可以通过：

    1. 作品标签
    2. 作品名
    3. 作品 id
    4. 作品上传者
    5. 作品原作者

    来搜索作品。

  5. 可以管理插画的 状态（status）。实现该功能，需要在数据库中的插画表中新增一个 status 字段：

    1. 用户在网站进行提交时默认的状态为 0（审核中），用户提交的作品默认需要在后台管理系统先进行一次审核，由管理员通过之后方可在网站中进行正常展示。
    2. 审核通过后为 1（已发布）
    3. 删除对应 2（已删除），不在用户界面上展示，但仍然保留数据，并且可以通过后台管理系统恢复。

  6. 可以排序：

    1. 按点赞数
    2. 按浏览数
    3. 按收藏数
    4. 按评论数
    5. 按发布时间

  7. 筛选：

    1. 发布时间范围，用户选定
    2. 包含标签，用户选定。可以包含多个标签，采用多选组件。
    3. 点赞数范围，用户选定
    4. 收藏数范围，用户选定
    5. 浏览数范围，用户选定
    6. 插画目前的状态

  8. ** 支持快速新增插画数据。** 采用 Pixiv-Crawler 作为爬虫服务，支持：

    1. 根据作品 id 爬取作品
    2. 根据原作者爬取作品
    3. 根据标签爬取作品

    考虑后续是否支持 Django 服务，将其以接口的形式部署至服务器。

  9. ** 支持默认上传插画。** 具体逻辑和在本站上传作品类似，与 编辑 采用同一种表单形式。

# 插画家管理

这里指的是 转载作品 中对应作品的原作作者。

  1. 提供专门的插画家管理界面，将数据库中的插画家数据可视化，以 table 的形式进行分页展示。
  2. 可以对特定插画家的个人信息进行修改。
  3. 可以快速新增插画家。
  4. 可以查看插画家的全部作品列表，以内嵌 table 的形式进行展示。
  5. 可以通过 id、名称查找插画家。
  6. 可以将插画家删除（软删除，需要新增一个判断删除状态的字段）。
  7. 可以查看插画家的头像大图。
  8. 可以排序：
    1. 按创建时间
    2. 按本站收藏插画总数
  9. 筛选：
    1. 创建时间范围，用户选定
    2. 插画总数，用户选定
    3. 删除状态

# 标签管理

每个插画所包含的标签。数量庞大。

  1. 提供专门的标签管理界面，将数据库中的标签数据可视化，以 table 的形式进行分页展示。
  2. 快速新建标签。
  3. 删除标签（硬删除），可多选删除。
  4. 修改标签的全部信息，包括定制一个专属封面。
  5. 根据标签名快速查标签。
  6. 可以查看封面大图。
  7. 支持排序：
    1. 标签创建时间
    2. 携带有该标签的插画数量
  8. 筛选：
    1. 创建时间范围，用户选定
    2. 插画数量范围，用户选定
    3. 删除状态

# 评论管理

汇总展示全部插画作品下方的评论。

  1. 提供专门的评论管理界面，将数据库中的评论数据可视化，以 table 的形式进行分页展示。并且需要对应链接到所属的作品。

  2. 删除评论（硬删除），可多选删除。

  3. 根据

    1. 作品 id
    2. 评论用户 id

    快速查找评论。

  4. 支持排序：评论的发布时间。

  5. 筛选：评论发布时间范围，用户选定

# 图片管理

对每个单独的 Image 对象进行管理。

  1. 提供专门的图片管理界面，将数据库中的图片数据可视化，以 table 的形式进行分页展示。

  2. 删除图片（硬删除），可多选删除。主要是为了去除一些无法回收的图片。

  3. 根据作品 id 快速查找图片。

  4. 可以查看图片对象缩略图、原图。

  5. 支持排序：

    1. 图片的发布时间
    2. 图片原图大小
    3. 图片缩略图大小

  6. 可以修改图片的信息。

  7. 筛选：

    1. 发布时间范围，用户选定
    2. 原图大小范围，用户选定
    3. 缩略图大小范围，用户选定

此处的缩略图 & 原图大小原数据库中没有保存，需要新增字段

# 收藏夹管理

管理用户的收藏夹的基本信息。

  1. 提供专门的收藏夹管理界面，将数据库中的收藏夹数据可视化，以 table 的形式进行分页展示。
  2. 删除收藏夹（软删除，新增额外字段，后续可恢复），可多选删除。
  3. 修改某个收藏夹的基本信息。
  4. 可以查看收藏夹封面的原图。
  5. 根据用户 id 搜索收藏夹。
  6. 排序：
    1. 创建时间
    2. 收藏作品数
  7. 筛选：
    1. 删除状态
    2. 创建时间范围，用户选定
    3. 收藏作品数量范围，用户选定

# UI 设计

全面采用 Joy UI 作为设计语言，一些简单的表单交互直接采用 Modal 弹窗进行。

涉及到动画效果，采用 Framer 库。

对于图片原图展示的效果，采用 react-photo-view 库。

# Layout

整体设计采用 三栏布局（Three-Columns Layout），分为 Header、Sidebar、Main。

需要支持移动端响应式设计。

Header:

展示用户头像下拉框。内容：

  1. 编辑信息，以 Modal 弹出框的形式进行交互，弹出表单用户进行填写。
  2. 退出登录，退出后返回至登录页面，清空本地的全部数据。

Sidebar:

  1. 展示 Picals Dashboard Logo，点击返回首页 - 数据看板页。
  2. 多个页面路由的 tab，点击可以切换路由，并且支持对应路由高亮显示。
  3. 可以展开 & 收起。

Main:

详情页面，接下来进行详细设计。

# Pages

页面分类：

  1. 首页 - 数据看板页
  2. 用户管理页
  3. 作品管理页
    1. 作品发布 & 编辑页
  4. 插画家管理页
    1. 插画家发布 & 编辑页
  5. 标签管理页
  6. 评论管理页
  7. 图片管理页
  8. 收藏夹管理页

对于页面的切换，使用专门的面包屑组件进行路由记录。

# 首页 - 数据看板页

一律使用 Card 组件对展示数据进行包裹，其中 总数 类型的数据依次排列在最上方。

下方展示数据表格，按照具体的展示数据内容来确定大小。总体展示按照流式布局。

并且需要支持响应式，根据屏幕大小自动对 Card 进行布局调整。

# 用户管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

对于用户信息的编辑，采用 Modal 弹窗内置 Form 的形式。

# 作品管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

点击 新增作品 按钮后，会跳转到另一个专门导航上传方式的页面。默认新增作品方式为手动上传。

  1. 手动上传页：提供专门的作品表单，用于处理作品的新增 & 编辑。表单布局和本站类似。

  2. 根据作品 pid 从 Pixiv 进行导入上传：切换到此 tab，提供一个输入框。用户键入 pid，会从后台对作品内容进行爬取，最后整理好格式回显到页面，用户点击确认上传后将数据存数据库。

  3. 根据作者 id 从 Pixiv 进行导入上传：

    切换到此 tab，提供两个输入框：作者 id、最大爬取作品数。

    用户先输入 id，获取到这个作者的作品总数后，方可允许填写第二个输入框。

    输入作者 id 后，将作者的作品以 items 的形式分页展示在下方，并且标识哪些作品已经被转载过。

    默认可以点击查看大图，勾选转载模式后，用户可以选取自己想要转载的作品进行转载，可以通过最大爬取作品数、勾选的作品、针对当页的全选，来对作品进行转载。

# 插画家管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

信息管理以弹窗内嵌表单的形式展示。

# 标签管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

信息管理以弹窗内嵌表单的形式展示。

# 评论管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

信息管理以弹窗内嵌表单的形式展示。

# 图片管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

信息管理以弹窗内嵌表单的形式展示。

# 收藏夹管理页

以 table 的形式展示。支持多选、搜索、筛选、排序、分页等等功能。

信息管理以弹窗内嵌表单的形式展示。

# 登录页

提供一层主题色渐变的背景 + 全局居中登录框即可。不支持直接注册，添加账户需要由已有的管理员进行新增。