仿 MacOS 前端项目 (预览)

929 阅读1分钟

1.gif

一、前言

觉得以前做的个人网站的后台太丑了,无聊又重新做一个。仿照MacOs big sur,实现一些该系统的基本操作和布局。做这个后台管理系统前前后后大概用了一个月吧,更多的时间是花在界面细节的处理上,阴影和高斯模糊的质感调了又调。以前的后台管理功能还未完全搬过来,暂时介绍操作和界面吧,都是些博客基本功能。

二、技术栈

2.1 前端

  1. Vue3
  2. Sass

2.2 后端

  1. Laravel8

三、功能

image.png

3.1 窗口组件

  1. 支持拖拉(限定拖拉区域)
  2. 支持窗口大小调节(限定最大和最小窗口)
  3. 窗口内部内容自适应(不同的功能模块引入对应的模板组件)

3.2 顶栏

  1. 高斯模糊(backdrop-filter,优点:高斯模糊只作用于背景,效果很好。缺点:浏览器兼容不够广)

image.png

  1. 普通导航菜单栏
  2. 控制中心(控制桌面统计数据,目前的唯一按钮)

image.png

3.3 Dock栏

  1. 常驻图标
  2. 当前打开窗口的图标
  3. 高斯模糊

image.png

3.4 通知

  1. 通知提示
  2. 高斯模糊
  3. 采用队列形式

image.png

3.5 数据统计

  1. 各类数据统计显示

3.6 文章发布

  1. 发表长文章(markdown)
  2. 发表图文动态
  3. 标签分类

image.png

3.7 文件管理

  1. 文件上传
  2. 删除文件

3.8 访问记录

  1. 记录访问客户端的信息

3.9 评论管理

  1. 审核评论
  2. 删除评论
  3. 回复评论(邮件通知)

四、End

后续会继续优化界面和动画效果吧,再看看到时12有什么改动再逐一修改,把原有功能完善完善。