基于 Electron + Vue3 实现的文章发布、管理的学习交流桌面应用

222 阅读5分钟

项目技术架构选型

前台架构说明

该项目前台主要采用 Electron22 + Electron-store + Vite + Vue3 + Vue-Router4 + Typescript + Pinia + Element-plus + Echarts + @kangc/v-md-editor + Eslint + Husky 等技术框架实现。

electron-store 用于本地数据的持久化存储,主要使用在应用设置中的快捷键存储、开机自启配置等应用设置的存储。采用 Pinia 对全局状态进行管理。使用 Echarts 实现标签云。@kangc/v-md-editor 则是用来实现编写文章时支持 mackdown。

后台架构说明

该项目后台主要采用 koa2 相关生态进行编写,数据库则采用 MongoDb

项目部署

服务器采用的是腾讯云 CentoOS 服务器,采用 nginx 作为静态服务器,通过 node + mongodb + pm2 实现后端服务环境的搭建。

应用介绍

应用功能简介

该应用支持和常规 PC 端产品类似的功能,如:

  1. 支持窗口放大、缩小、置顶以及最小化到托盘等等。

  2. 支持托盘消息提醒,以及通过托盘显示新消息的信息。

  3. 支持应用快捷键设置、开机自启设置、窗口关闭设置等。

  4. 支持同时开启多个子窗口,最多同时存在三个。

  5. 支持下载内容到指定的文件夹中。

各页面功能说明

登录注册页

注册登录.png

支持账号注册、登录、密码修改。

首页介绍

所有文章的展示页面,支持点击页面上的推荐文章最热文章进行文章展示的切换。

首页.png

分类页

文章分类.png

根据文章分类展示对应分类的文章,可点击上面的分类卡片进行筛选对应分类的文章。

标签云

标签云.png

展示所有标签组成的标签云,点击标签云中的标签或者右侧标签菜单可以跳转到标签分类文章页面。

标签-文章列表

标签-文章列表.png

根据文章标签展示对应标签的文章,可点击左侧的标签筛选对应类型的文章。

时间轴

时间轴.png

时间轴页面需要用户登录后才能访问。该页面会根据时间展示当前登录用户发布的文章。

文章发布-富文本

发布文章-富文本.png

文章发布-富文本页面,该页面需要用户登录后才能访问,支持编写 mackdown,文章支持插入本地图片、表情、数学公式等等内容。

文章发布-vscode

发布文章-vscode.png

文章发布-vscode 页面,该页面需要用户登录后才能访问,支持多语言编辑,及保存自动格式化,前后修改对比等功能。

留言一角

留言一角.png

该页面需要用户登录后才能访问,该页面会展示所有用户发表的各类弹幕。同时可在右侧发表弹幕。

关于博主

关于博主.png

展示应用作者的一些相关信息,包括博主的文章、收藏、关注等等。

实用工具

实用工具.png

该页面需要经过后台(墨客管理)中的账号管理页面上的权限管理操作进行菜单权限设置。当设置过该菜单权限之后,前台页面才会展示该菜单,否则没有权限访问。该页面会展示一些用户从墨客管理中添加各种导航及工具等。目前只支持应用作者进行配置。后续会开放给对应的每个管理后台用户。

高级搜索页

高级搜索.png

该页面可以支持通过文章的多种属性搜索文章,如:文章作者、文章标题、文章标签、文章分类、文章摘要等等。

我的主页

我的主页.png

该页面需要用户登录后才能访问,展示对应用户的个人信息,其中包括用户简介、个人文章、个人收藏、关注及点赞文章等。

文章收藏页

文章收藏.png

该页面需要用户登录后从我的主页中进入,该页面可以看到每个收藏分类中收藏的所有文章,支持收藏文章的删除、移动等操作。

设置 - 个人资料设置

个人资料.png

该页面需要用户登录后才能访问,该页面可以进行个人资料的更改。包括用户名、职位、座右铭、个人介绍及个人头像等。

设置 - 账号设置

账号设置.png

该页面需要用户登录后才能访问,该页面可以挂载自己其它的网站资源、更改个人密码、注销账号等。

设置 - 系统设置

系统设置.png

该页面可以设置应用的快捷键、文件存储的目录、是否开机自启、是否开启消息通知以及应用关闭类型设置等。

设置 - 主题设置

主题设置.png

展示应用可以更换的各类主题,用户可以在该页面进行应用主题更换。

文章详情

文章详情-当前窗口打开.png

展示文章对应的详情内容。可在该页面对本篇文章的作者进行关注、对文章点赞、收藏、分享、评论等。

文章详情 - 子窗口

子窗口文章详情.png

功能类似上述详情页,只不过该页面不会展示左侧菜单项,可通过鼠标右键点击文章卡片上的菜单(新窗口打开)打开该页面。

图片合集

picture.jpg

该页面需要经过后台(墨客管理)中的账号管理页面上的权限管理操作进行菜单权限设置。当设置过该菜单权限之后,前台页面才会展示该菜单,否则没有权限访问。可以上传本地的各类图片到该页面,可对上传的图片进行展示及预览、修改文件名称,下载,删除等操作。

私聊

chat.jpg

该页面提供了一个交流平台,供各位作者进行学术交流。该页面满足了相互发送文字,表情,图片的需求。同时具备了给联系人设置消息免打扰,联系人置顶等功能。