我又来了兄弟萌，这一次我整了一套 MacOS 的 WebUI

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1232 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近也是因为转了前端岗想做点东西练练，之前写了 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 我的主页

Dock

Apple

桌面

窗口

9 条回复 • 2021-08-14 13:56:08 +08:00

ynyounuo

2021-08-13 22:15:38 +08:00

比较而言，不久前这套还原度高很多
/t/775582

yitingbai

2021-08-13 22:19:24 +08:00

挺好的, 如果可以设计的通用些, 方便二次开发, 开源出来, 不枉费你的精力

Hamm

2021-08-13 22:27:01 +08:00

@ynyounuo 很棒，我学习借鉴下。

Hamm

2021-08-13 22:27:24 +08:00

@yitingbai 目前已经开源了，主要是做通用的 UI

ostrichb

2021-08-13 22:36:35 +08:00 via Android

这个开源的话 Apple 会不会说什么

Hamm

2021-08-13 23:12:17 +08:00

@ostrichb 问题不大

MakeItGreat

2021-08-13 23:24:30 +08:00 via Android

我如果魔改一个纯 web 的面向个人的操作系统有盈利的希望吗？
类似 Esxi 或者群晖？
不过浏览器里连 Rdp 也能算 web 化，哈哈哈

Senorsen

2021-08-14 12:17:48 +08:00

整体上比较有意思，
提几个建议：
1. 现在叫 macOS 不叫 MacOS 了。
2. 英文字体有点出戏，太不像了。
3. 有些地方（比如菜单）的 padding 等略微看起来不对，看得不习惯 /不舒服，建议对着真的 macOS 菜单调整下。
4. 关于对话框里的标点符号注意下，中文就不要用英文半角标点（非要用的话，逗号句号后也要加空格吧）。
5. 整体的 UI 界面和字体看起来有点怪，可能因为是 demo，为了醒目提示文本？可以做一个正常的 app 更能看出效果。
6. 动画真的太卡了，需要优化。

iOCZ

2021-08-14 13:56:08 +08:00

既然这样了，就要搞插件了😂，顺便做个插件市场