关于vue3:轻快图片管理系统-系统概述与内置功能介绍

在线体验

如果你感觉我的项目不错，还望动动你的手指给点点 star，让更多人看到优良的我的项目！！！

为了便于大家在线体验，本零碎提供了演示地址，能够通过上面的演示地址和账号进行登录体验零碎性能。
演示地址 : http://v2.picture.itchenliang.club/#/
演示账号:

账号: guest@163.com
明码: 000000

代码仓库地址:
如果你感觉我的项目不错，还望动动你的手指给点点 star，让更多人看到优良的我的项目！！！

• Github: https://github.com/ischenliang/quickly-picture-bed
• Gitee: https://gitee.com/itchenliang/quickly-picture-bed

零碎概述

轻快图片管理系统 顾名思义是一个做图片治理的零碎，和当初市面上很火的 Picgo 相似，然而因为 Picgo 是本地版的，即须要本人装置桌面端利用后能力应用，每次换一台电脑都须要重新安装一次，而后再装置指定的图床插件并配置插件，非常麻烦。

为了解决下面问题的问题，故诞生了这个 轻快图片管理系统，这个是一个在线版的 BS 零碎，只须要装置部署一次后就能够重复应用，只须要你应用浏览器拜访装置部署地址即可，如果你不想装置部署也能够间接在演示环境上操作。

轻快图片管理系统 能够看做是 集成多种第三方对象存储于一身的零碎，目前不同的第三方对象存储是采纳拔插式的插件形式来实现，不便后续扩大新的第三方对象存储，这种形式能够在不重新部署零碎的状况下更快的集成新的对象存储。

与 Picgo 的差别

通过本零碎，在装置部署后同样须要像 Picgo 那样装置指定的存储插件后能力创立存储桶，和 picgo 的差别在于，picgo 装置图床插件后，每个插件只能配置一个存储桶，当想要配置多个时也无奈实现，但在本零碎上是能够同一个存储桶插件配置多个存储桶，而后将图片上传到指定的存储桶中，同时本零碎也新增了相册治理性能，能够将不同类别的图片进行分组治理。

开发所应用技术

前端 : Vue3.x、Vite4.x、VueRouter、Pinia、Axios、Typescript、ElementPlus、Echarts、Sass、clipboard、bytemd、monaco-editor 等
后端 : Nestjs + Express、Typescript、sequelize、axios、nodemailer、svg-captcha、jsonwebtoken
权限认证 ：RBAC(角色访问控制) 模式进行认证受权
数据库 : mysql57
插件: rollup、pnpm + monorepo、crypto-js、typeScript、webcomponents(工具插件)

内置性能

• 登录、注册、找回明码

  • 登录: 反对账号密码登录、验证码登录两种登录形式。
  • 注册: 须要应用邮箱账号进行注册。

• 图片上传

  • 目前反对多种图片上传形式: 抉择上传、拖拽上传、粘贴复制上传、URL 网络图上传、Base64 上传；
  • 反对多图上传；

  • 反对一键复制多种链接图片外链格局：

    • 链接格局: URL、HTML、CSS、Markdown、超链接、论坛代码、UBB、自定义；
    • 也反对一键复制多图的链接格局；
  • 反对上传预览并能够拖拽排序进而实现链接复制的程序；

• 图片治理

  • 图片治理就是对在该零碎上上传过的图片记录进行治理；
  • 该性能反对: 复制图片链接格局、删除图片、图片重命名、拖拽排序、移入指定相册等性能；

• 存储桶治理

  • 存储桶治理即是对第三方对象存储的配置进行治理；
  • 反对多桶贮存，可同时增加多个对象存储桶治理；
  • 该性能反对: 新建存储桶、更新存储桶、禁用存储桶、删除存储桶、存储桶数据迁徙、拖拽排序等性能；

• 相册治理

  • 相册治理即是对相册进行分组治理，便于用户将不同的图片进行分类管理，同时也反对间接将图片上传到相册中；
  • 相册治理中也能够对图片进行标签配置，对不同的图片配置指定的标签便于二级分组；
  • 该性能反对: 新建相册、编辑相册、删除相册、拖拽排序、图片间接上传到相册、模板标签治理、设定相册封面等性能；

• 插件市场

  • 插件市场是零碎的外围性能，目前反对三大类插件：上传插件、主题插件、工具箱插件。

    • 【上传插件】简略来说就是对常见的第三方对象存储集成，目前反对数十种内置插件，其中包含: 阿里云 OSS、腾讯云 COS、七牛云 Kodo、又拍云 USS、青云 qingstor 等；而且还在一直开发新的插件。
    • 【工具箱插件】能够看做是对一些罕用的工具封装，例如：uuid 生成器、图片裁剪、代码转图片、图片 base64 编码等。
    • 【主题插件】为了实现主题切换性能，零碎则内置了主题插件性能，和 vscode 相似能够通过装置指定的主题插件来达到想要的配色计划，例如：monokai 主题、暗黑主题、OneDarkPro 主题等，此外零碎外部还默认了一套亮色主题。
  • 想要应用存储桶性能的前提就是须要装置指定的插件后能力创立存储桶；
  • 该性能反对: 插件装置、插件更新、卸载插件、启用 / 禁用插件等性能；

• 仪表盘 | 数据统计

  • 仪表盘是对本用户在零碎上的一些应用数据进行数据统计分析，例如：有多少张图片、多少个存储桶、装置了多少个插件、多少个相册等。
  • 同时为了便于剖析也提供了奉献图、近一年内的所有数据进行统计分析

• 知识库治理

  • 思考到目前大多数人应用图床零碎都是联合着文档一起在应用，故开发了知识库治理性能，知识库治理和其余大多数平台的性能类似。
  • 该性能反对: 创立知识库、更新知识库、复制知识库、删除知识库、一键导出知识库下的所有文档等性能；
  • 文档治理: 知识库下有文档治理性能，能够在该知识库下创立多个文章和目录，同时还能够进行拖拽调整文档的目录程序。

• 操作日志

  • 残缺的可视化日志性能，记录用户所有操作，不便事件溯源。普通用户只能查看本人的操作记录，管理员则能查看所有人员的操作记录，于此同时数据统计中的奉献图的数据起源也是从操作记录中提取。
  • 目前反对图片操作日志、存储桶操作日志、相册操作日志、插件操作日志等；

• 个人信息保护

  • 用户能够对本人的信息管理，如头像(零碎内置 4 组不同维度的头像供选择)、昵称、职业、性别、个人简介以及集体登录明码进行保护治理。

• 偏好设置

  • 思考到每个用户的应用习惯不同，零碎提供了偏好配置核心，能够对默认复制的图片链接格局、自定义链接格局、罕用快捷键配置、图片显示名称类型、主题配置、以及各种图片的层现形式。

• 用户治理

  • 多用户治理，依据不同的角色能够治理不同的数据，同时用户能够通过自主注册或者管理员在治理页面间接创立。
  • 该性能反对: 新建用户、删除用户、更新用户、禁用 / 启用用户、删除用户等性能；

• 插件治理

  • 插件治理是对本零碎中反对哪些内置插件进行治理，目前反对的插件类别有文件上传插件、主题插件、图片转换插件、图片解决插件、全局插件、工具箱插件等；
  • 目前零碎上所有的插件都是通过 rollup + pnpm + monorepo 模式进行开发的，而后打包后公布到 npm 上，而后代码中通过指定的伎俩来加载该插件。
  • 该性能反对: 新增插件、更新插件、启用 | 禁用插件、删除插件、拖拽排序等性能。

• 字典治理

  • 对系统中常常应用的一些较为固定的数据进行保护，例如集体核心的职业、用户性别、存储桶页面不同的存储桶展现不同的图标等数据保护。
  • 该性能反对: 新建字典、删除字典、更新字典、删除字典等性能；

• 零碎设置

  • 对系统中一些罕用的数据进行保护，包含零碎名称、零碎 logo、备案信息、更新日志、零碎上所应用的的图标的起源进行配置。

• 权限管制

  • 残缺的权限管制性能，基于 RABC 进行权限管制，即针对不同的角色可调配不同的操作权限，管制对应的增删改查的能力。