新写了一个基于MacOS设计的WebUI

原创
2021/08/13 22:11
阅读数 1.3K

最近也是因为转了前端岗想做点东西练练,之前写了BBBUG聊天室,感觉代码太拉垮,想写个什么好康的东西,于是就有了这个项目。

说干就干,先选型:

  • Vue3 (顺带熟悉一下)
  • ElementUI-Pro (虽然现在基本还没用上)

整!

搭建项目,先整Loading,一个Logo一个进度条,就缺Mac开机的声音了!

image.png

好家伙,Apple的Logo丝滑闪过,接下来就到登录了:

image.png

当然,我这里只为了做一套UI,登录接口什么的并没有实际的发起请求。

接下来,登录得进桌面了吧,整个桌面,包含顶部的菜单栏、中间的桌面背景和应用,底部的Dock,Apple亲切的程序坞:

image.png

顶部左边Apple的Logo做了个菜单,挺像那么回事了。

桌面好了,得做窗口了,这里做了个AppLoader,封装了下窗口的红绿灯按钮、窗口的大小缩放,多窗口的切换:

image.png

已经打开的还给Dock上加了个黑点,新打开的Dock图标还要上下跳动,好家伙,像这么回事了。

简单做了几个应用用来解释一些应用的配置和接口调用,今天开源出来了。

大家有兴趣可以关注一下:

Github: https://github.com/HammCn/MacOS-Web-UI Gitee: https://gitee.com/hamm/mac-ui

体验地址

https://hamm.cn 我的主页

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部