首页Picals About

115499204

# 这个项目是？

Picals 是一个受 Pixiv 启发、由我本人自发创建与设计的一个插画收藏平台项目。它旨在为大家提供一个相较于 Pixiv 使用更方便、在国内浏览更快捷的找图、存图的方式，并且和论坛的功能相结合，营造和谐、舒适的国内插画讨论环境。

# 这个项目の起源

一切的起源只是单纯的喜欢。我是一个爱好动漫和插画的人，平时一有空的时候便会打开一些比较著名的插画平台进行浏览，看看今天有没有我中意的画作。一旦遇到符合审美戳我 xp 的作品，我都会一脸欣喜的将该作品保存至我的电脑内部以满足我的收藏欲绝对不止我一个人有这么干过吧，并时不时打开浏览其细节。

但是这样子 仅仅只是将插画图片保存到电脑磁盘内部 ，我现在想要仿照 Pixiv 等插画网站，打造一个属于我自己的插画收藏空间，从而能够随时随地浏览到我自己的一些收藏。并且能够提供给他人进行访问，能够大概的知道我的品味如何。

除此之外，Pixiv 在我使用的过程中，我个人也发现了很多对用户不太友好的方面，比如：

  1. 没有收藏夹分类功能，Pixiv 的作品一旦收藏过多，则会出现 我突然想要看某个作品，往往得去喜欢列表翻上半天 的问题。
  2. 不对普通用户提供历史记录功能。我相信大部分的国内用户是不会开 Pixiv 会员花这个冤枉钱的，对吗？
  3. 不对普通用户提供热门排序功能。如果想要找某个标签最热门的插画，你必须要开启 Pixiv 会员。
  4. 不能切换浏览中插画列表。当用户在主页，点击最近用户新作，想要按列表的形式顺序查看所有的用户新作，可是 Pixiv 网页端默认按 作者发布的作品列表 进行列表维护。这就造成了用户较大的不便。

除了这个个人的一些牢骚之外，我也实在感觉国内的插画平台几乎都是死气沉沉的没有一丝生气，并且对于没有渠道去获取插画的用户显得十分的不友好。大部分用户获取插画的渠道居然还是 b 站，这是令我较为震惊的。我希望能够提供这么一个平台，虽然不知道后续的发展具体会如何，至少希望能够让大家的找图、存图的过程更加的顺利一点。

最后，也是我个人的一点私心 —— 我的这个项目打算 从零开始 100% 手写出来 ，无论是在开发的角度还是产品的角度对这个项目进行全方位的审视与功能的完善、迭代与更新。 我相信这是一个比较重大的挑战，不过我也喜欢这些挑战，我喜欢写点乱七八糟的东西来提升自己 www。

# 这个项目の特色

既然是从 Pixiv 汲取的灵感，那么自然也得增添一些它所没有的功能：

  1. 支持收藏夹功能。 收藏夹的灵感来源于 Bilibili 的收藏功能， 用户能够在浏览插画的时候对插画进行指定收藏夹的收藏。收藏夹可由用户自行创建，并且可以在个人中心对收藏的插画进行批量管理，同时也支持作品名搜索快速找到收藏的插画。
  2. 维护多种插画浏览列表。 当用户从某一个插画列表（如推荐作品列表）点击进入到作品详情页后，会同时维护两种列表：点击进入时的插画列表、该插画发布者的插画列表，使用户能够通过插画列表快速浏览到下一个想要浏览的作品。并且用户能够同时在不同列表之间进行切换浏览，也可以一键跳出回到最开始进入的作品页，给予用户最大程度的浏览自由。同时也是我自己老早就想吐槽的 Pixiv 的麻烦之处
  3. 引入图片查看器。 本项目在作品详情页中引入了一款基于 React 实现的图片查看器：react-photo-view，并在其基础之上进行了一些自定义封装，提供了如图片放大、缩小、旋转、原图下载 等实用功能，能够方便用户浏览某些图片中的细节。
  4. 支持历史记录浏览。 设计灵感来源于 Bilibili 的历史记录页面。用户在浏览某个作品后，会将浏览信息记录至后台，用户可在个人中心的 浏览记录 页签中找到自己浏览过的作品。同时也支持历史记录的作品名搜索功能。

# 这个项目の一些后续规划

这个项目 绝对不仅仅只是以转载其他艺术家插画作为主要载体 的一款网站。目前大致的一些主要规划如下：

  1. 后台管理系统。 这个项目的紧接着下一步便是后台管理系统的集成。初步预想采用技术栈为 Next.js 全栈框架。
  2. 文章撰写模块。 用户能够以撰写 Markdown 并附上插图、标签的形式来实现脱离原插画家，纯粹地分享一些自己喜欢的插画，并抒发自己的感想；抑或是单纯的询问插画的出处，或是分享一些单纯的技术内容，一起营造沟通交流的氛围。
  3. 漫画模块。 该模块涉及到漫画资源的存储与获取。该模块引入的目的是能够提供一个在线的、免费的漫画浏览模块，让大家（包括我）省去找资源的功夫。
  4. 未完待续...

# 技术栈

这个项目主要的技术栈为 React + Nest.js ，使用 TypeScript 作为唯一开发语言。

近期没有重构打算，在 Bug 修复完成以及 code review 完成后考虑使用 React Native 重构移动端样式。

# 文档

该项目目前的相关文档包括但不限于：

# 这个项目的进度

目前该项目处于 V0 版本发布阶段。

对应的代码风格优化指南：点这里

对应的 bug、issue 提交地址：点这里

现阶段的主要任务同时也是长期任务，便是不断地修复已知的 bug 以及前后端性能优化。大体总结如下：

  1. SEO
  2. Vite 打包优化
  3. React 渲染性能优化（Hooks？）
  4. 优雅异步处理方案（fp-ts？rxjs？）
  5. React 代码结构组织最佳实践（复杂逻辑提取 or 封装）
  6. Nest 项目 Typeorm 数据库查询性能优化、代码结构优化

# 项目的仓库地址

前端项目：https://github.com/nonhana/Picals-Frontend-React

后端项目：https://github.com/nonhana/Picals-Backend-Nest

# 联系 / 加入我们

您在使用中，对这个项目产生了任何想要完善的点子，都可以参考 Issue 提交指南来新建一个 Issue。

出于对插画以及前端开发的热爱，这个项目是 纯粹的兴趣驱动的作品。出于对技术的积累、想和更多的人进行交流的目的，我在本文的末尾加上了这么一段。

可惜我本人是个社恐，并且在学校里面遇不到志同道合的人，只能把这个想法写到这里....... 希望能被有缘人看到吧呜呜呜呜

如果您是无意间浏览到这个项目的，并且有兴趣参与这个项目，或者在目前的演示中发现 BUG、提出新的需求，或者想要单纯的了解我们、讨论交流，您都可以加入我们的哦！

对于我而言，大家一起做东西，在交流中一起进步、一起了解更多的前沿技术或者是解决一些困难的 bug，都是十分十分有意义的事情！！

下面给一下我的联系方式：