最近也是因为转了前端岗想做点东西练练,之前写了BBBUG聊天室,感觉代码太拉垮,想写个什么好康的东西,于是就有了这个项目。
说干就干,先选型:
- Vue3 (顺带熟悉一下)
- ElementUI-Pro (虽然现在基本还没用上)
整!
搭建项目,先整Loading,一个Logo一个进度条,就缺Mac开机的声音了!
好家伙,Apple的Logo丝滑闪过,接下来就到登录了:
当然,我这里只为了做一套UI,登录接口什么的并没有实际的发起请求。
接下来,登录得进桌面了吧,整个桌面,包含顶部的菜单栏、中间的桌面背景和应用,底部的Dock,Apple亲切的程序坞:
顶部左边Apple的Logo做了个菜单,挺像那么回事了。
桌面好了,得做窗口了,这里做了个AppLoader,封装了下窗口的红绿灯按钮、窗口的大小缩放,多窗口的切换:
已经打开的还给Dock上加了个黑点,新打开的Dock图标还要上下跳动,好家伙,像这么回事了。
简单做了几个应用用来解释一些应用的配置和接口调用,今天开源出来了。
大家有兴趣可以关注一下:
Github: https://github.com/HammCn/MacOS-Web-UI Gitee: https://gitee.com/hamm/mac-ui
体验地址
https://hamm.cn 我的主页