V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Hamm
V2EX  ›  分享创造

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

  •  
  •   Hamm · 2021-08-13 22:08:50 +08:00 · 2452 次点击
    这是一个创建于 958 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    9 条回复    2021-08-14 13:56:08 +08:00
    ynyounuo
        1
    ynyounuo  
       2021-08-13 22:15:38 +08:00   ❤️ 1
    比较而言,不久前这套还原度高很多
    /t/775582
    yitingbai
        2
    yitingbai  
       2021-08-13 22:19:24 +08:00
    挺好的, 如果可以设计的通用些, 方便二次开发, 开源出来, 不枉费你的精力
    Hamm
        3
    Hamm  
    OP
       2021-08-13 22:27:01 +08:00
    @ynyounuo 很棒,我学习借鉴下。
    Hamm
        4
    Hamm  
    OP
       2021-08-13 22:27:24 +08:00
    @yitingbai 目前已经开源了,主要是做通用的 UI
    ostrichb
        5
    ostrichb  
       2021-08-13 22:36:35 +08:00 via Android
    这个开源的话 Apple 会不会说什么
    Hamm
        6
    Hamm  
    OP
       2021-08-13 23:12:17 +08:00
    @ostrichb 问题不大
    MakeItGreat
        7
    MakeItGreat  
       2021-08-13 23:24:30 +08:00 via Android
    我如果魔改一个纯 web 的面向个人的操作系统有盈利的希望吗?
    类似 Esxi 或者群晖?
    不过浏览器里连 Rdp 也能算 web 化,哈哈哈
    Senorsen
        8
    Senorsen  
       2021-08-14 12:17:48 +08:00
    整体上比较有意思,
    提几个建议:
    1. 现在叫 macOS 不叫 MacOS 了。
    2. 英文字体有点出戏,太不像了。
    3. 有些地方(比如菜单)的 padding 等略微看起来不对,看得不习惯 /不舒服,建议对着真的 macOS 菜单调整下。
    4. 关于对话框里的标点符号注意下,中文就不要用英文半角标点(非要用的话,逗号句号后也要加空格吧)。
    5. 整体的 UI 界面和字体看起来有点怪,可能因为是 demo,为了醒目提示文本?可以做一个正常的 app 更能看出效果。
    6. 动画真的太卡了,需要优化。
    iOCZ
        9
    iOCZ  
       2021-08-14 13:56:08 +08:00
    既然这样了,就要搞插件了😂,顺便做个插件市场
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5023 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 09:37 · PVG 17:37 · LAX 02:37 · JFK 05:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.