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

用 React 写了个仿 macOS 界面的个人主页,风格大概介于 Big Sur 和 Catalina 之间?

  •  9
     
  •   Renovamen · 43 天前 · 5976 次点击
    这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。

    啊朋友们好,我最近在学 React,于是用 React 和 tailwindcss 仿 macOS 的界面写了个主页,风格大应该介于 Big Sur 和 Catalina 之间,换句话说我把这俩版本里我喜欢的部分拿出来拼凑到了一起,再换句话说我的 mac 的硬盘空间不够升级 Big Sur,于是有些细节我只能参照现在用的 Catalina 来补...

    开始写这个项目两三天之后我才发现了这个用 React 写 Ubuntu 的作品: https://vivek9patel.github.io (真的太强了,是我论坛逛少了我的错),而在刚刚准备发帖的时候我才发现了这个用 Vue 写 Deepin 的作品: https://GoodManWEN.github.io (真的太强了,是我论坛逛少了我的错),所以我并不是第一个(甚至不是前几个)想出这个主意的天才 hhh 。不管怎么说那个仿 Ubuntu 的项目给了我很多参考,非常感谢。

    因为对 React 不熟(严格来说这第一个 React 项目),主业也不是前端,所以代码可能看上去会比较乱,并且我用了大量的 class component (似乎 react 社区相比 class 更推崇 hook 一点?虽然我目前还没能理解这是为什么,甚至我连 hook 的用法都还没理解的太清楚),所以先提前抱歉。

    最后感谢一切反馈和建议,虽然这个月我比较忙可能没太多时间改进它...

    94 条回复    2021-05-23 02:36:48 +08:00
    Hedgeh09
        1
    Hedgeh09   43 天前
    my-dream.cpp 好评!
    hades97
        2
    hades97   43 天前
    怎么你们这些非专业前端都这么牛逼
    sillydaddy
        3
    sillydaddy   43 天前
    为啥你们都是学几天然后不熟就能做出这种效果呢? ??
    收藏学习了。
    919615766
        4
    919615766   43 天前 via iPhone
    大佬学 react 参考的什么资料?
    Hanser002
        5
    Hanser002   43 天前
    其实 class or hook 并不会影响你的🐂🍺
    killva4624
        6
    killva4624   43 天前
    哈哈哈哈 VSCode 打开是 Github1s
    noqwerty
        7
    noqwerty   43 天前
    大佬!捉个 typo,interests.txt 里面应该是 Natural Language Processing
    real3cho
        8
    real3cho   43 天前
    塞尔达好评
    Shvier
        9
    Shvier   43 天前
    inspirational and creative!
    erguotou521
        10
    erguotou521   43 天前 via Android
    再来点动画会好些
    Pooc
        11
    Pooc   43 天前   ❤️ 1
    Renovamen
        12
    Renovamen   43 天前
    @noqwerty 非常感谢,马上改马上改 😂
    Renovamen
        13
    Renovamen   43 天前
    @919615766 我先看了看官方文档,然后找了几个小项目来跑,然后就硬着头皮自己写,不会的上网搜,总会搜到 😂
    Renovamen
        14
    Renovamen   43 天前
    @erguotou521 多谢建议,但主要是指哪方面的动画啊
    hqweay
        15
    hqweay   43 天前 via iPhone
    太!强!了!
    以前也见过一个 Catalina 主题的博客,觉得这种创意真有趣。
    mayuko2012
        16
    mayuko2012   43 天前
    太棒了!
    yilidan
        17
    yilidan   43 天前
    大佬,太强了
    yunyuyuan
        18
    yunyuyuan   43 天前
    现在都流行做仿系统的 UI 吗,前面不是刚有人发了个 deepin 的
    yhxx
        19
    yhxx   43 天前
    怎么你们这些非专业前端都这么强+1
    我觉得让我来写怕不是要一个月,看你们都是几天就写出来了,好强
    AEDaydreamer
        20
    AEDaydreamer   43 天前
    太强了....看这些项目真的每天都会自卑一点点
    Renovamen
        21
    Renovamen   43 天前
    @yunyuyuan 我也觉得最近好像是比较流行仿 os,短时间内见了好几个类似项目了
    duhb
        22
    duhb   43 天前
    好玩,有点意思啊~
    labulaka521
        23
    labulaka521   43 天前 via iPhone
    很赞
    crownzzz
        24
    crownzzz   43 天前 via iPhone
    怎么没人用 Angular 搞一个啊🐶
    doveyoung
        25
    doveyoung   43 天前
    这有点 diao 啊大佬
    mokong
        26
    mokong   43 天前
    我歪个楼,V2 的回复框默认悬浮了?

    打开项目之后,看到登陆界面,我想都没想,输入了我自己的电脑密码进入的。。。然后意识过来要是有人故意做一个这样的,用来钓鱼,是不是我就惨了😂
    lymith
        27
    lymith   43 天前
    最近怎么这么流行这种项目,难道是课外作业
    javen73
        28
    javen73   43 天前
    太强了!
    LeeReamond
        29
    LeeReamond   43 天前
    哈哈,我要举报楼主抄袭我的凡体文。也许这里可以看出 react 生态远比 vue 生态强势的地方,目前看到的包括楼主的在内的三个 macos 和一个 ubuntu 都是 react 写的,感觉以后如果要学习的话都是不错的参考资料。另外捉个虫,我默认状态打开之后,如果开启 safari,并点击全屏按钮后样式会变得奇怪。
    plk403
        30
    plk403   43 天前
    太强了太强了太强了太强了太强了! 已 star! 大佬我们可以做朋友吗
    plk403
        31
    plk403   43 天前
    话说右上角控制中心好像会被打开的窗口挡住,应该是置顶的
    Renovamen
        32
    Renovamen   43 天前
    @LeeReamond 诶你已经承认你那是凡体了吗哈哈哈哈。我的 dock 效果应该是参考了你说得第二个 macos,那么我能问下第三个的链接吗 😂。全屏后样式奇怪主要是指什么,我这边好像没太发现,就是背景图会被拉伸一点...
    Renovamen
        33
    Renovamen   43 天前
    @mokong 有道理,奇怪的诈骗小技巧增加了
    Renovamen
        34
    Renovamen   43 天前
    @plk403 好的,多谢,会改的会改的,不是大佬不是大佬,做朋友做朋友
    ian19znj
        35
    ian19znj   43 天前
    窗口往上拖, 拖出顶部菜单栏以外, 就拖不回来了.
    Hsinyao
        36
    Hsinyao   43 天前
    666666 被惊艳到了
    LeeReamond
        37
    LeeReamond   43 天前
    @Renovamen 我发帖的时候就是单纯陈述一下项目来源,后来读的时候感觉确实是挺凡的。我这看是这个效果,全屏之后右面的滚动条会跑出来,且仍然能够拉伸大小,拉伸时绿框部分会多出一张桌面背景被一起缩放。拉伸过后如果取消最大化的话这个样式会继承而没有取消
    <img src="https://i1.fuimg.com/706005/4e14a5c21bdf7f6d.png">
    ShuoHui
        38
    ShuoHui   43 天前 via iPhone
    @Pooc #11 笑死哈哈哈哈哈哈哈
    Renovamen
        39
    Renovamen   43 天前
    @LeeReamond 能问下你用的系统吗,我刚在 mac 和 windows 的 chrome 上按你的操作试了试都没出现这种情况,不过 windows 上倒是试出了别的奇怪的样式问题...
    Renovamen
        40
    Renovamen   43 天前
    @ian19znj 好的,谢谢。我刚试了试,mac 会阻止你把窗口移到外面去,所以我等会儿去设个边界
    LeeReamond
        41
    LeeReamond   43 天前
    @Renovamen 我是 windows10 20H2 chrome 版本 90.0.4430.93
    Renovamen
        42
    Renovamen   43 天前
    @LeeReamond 这版本跟我一样啊,那为啥会出问题...
    lifeintools
        43
    lifeintools   43 天前
    我输入了 rm -rf ./* 作者 你很有趣
    yunyuyuan
        44
    yunyuyuan   43 天前
    @Renovamen 嘿嘿,既然如此,我要开个 vue3 做 manjaro 的坑
    fxxkgw
        45
    fxxkgw   43 天前
    @AEDaydreamer 这头像让我恍惚看到了一发。。

    PS 大佬好厉害
    hazy
        46
    hazy   43 天前
    这就叫专业.jpg ,老哥强啊
    quericy
        47
    quericy   43 天前
    看了下博主博客里的项目,好厉害~~
    alogbycat
        48
    alogbycat   43 天前
    太专业了,star~
    mopig
        49
    mopig   43 天前   ❤️ 1
    这里还有个类似的项目呢

    https://macos.vercel.app/
    yaphets666
        50
    yaphets666   43 天前
    牛啊 terminal 是怎么实现的
    xshwy
        51
    xshwy   43 天前
    rm -rf / 哈哈哈哈哈
    ![ops]( https://i.loli.net/2021/05/08/Jf6M9rKWxON5Ub3.png)
    bog
        52
    bog   43 天前 via Android
    两年前见过类似的,发了个帖问这是什么,第二天号就被封了😂
    Lemeng
        53
    Lemeng   43 天前
    给你的 star
    chen90902
        54
    chen90902   43 天前
    厉害哇,真学习了。第一次项目就这么完善,膜拜了。要我怎么也得一个月撸完
    loading
        55
    loading   43 天前
    字体是不是没用对?
    gainsurier
        56
    gainsurier   43 天前
    恭喜恭喜,hn 已经 top2 了
    ansonsiva
        57
    ansonsiva   43 天前
    厉害了
    hlwjia
        58
    hlwjia   43 天前
    一大拨 offer 即将来袭
    reiji
        59
    reiji   43 天前
    不行了,我得挽回前端人的面子,哪位仁兄推荐个好看的系统给我康康
    Renovamen
        60
    Renovamen   43 天前
    @mopig 事实上我 dock 的特效就是参考了这个项目的 😂
    reiji
        61
    reiji   43 天前
    没想到帖主是只做 ML 的龙,正巧我现在的兴趣就是把机器学习应用在前端项目中(不过就是水平很差还在努力中罢了)
    Renovamen
        62
    Renovamen   43 天前
    @yaphets666 当前输入行就是一个 input 框,然后敲一次回车就往里面追加一个输出结果 dom 和一个输入 dom,然后把之前的输入框设成 read-only 。

    我大概没有表述清楚,所以还是看代码吧:

    https://github.com/Renovamen/playground-macos/blob/main/src/components/apps/Terminal.js
    Renovamen
        63
    Renovamen   43 天前
    @loading 对的没用对,当时图方便随便选了一个,我以后会改进一下字体。感谢建议~
    Renovamen
        64
    Renovamen   43 天前
    @gainsurier 啊意料之外意料之外,不管是 V2EX 和 hn 我都没想到有那么多反馈 ,感谢各位。

    然后趁热在 hn 的评论区里宣传了一下 @LeeReamond 的 deepin 版本,我看到评论区有人在宣传 ubuntu 版本才想起来这回事 😂
    Renovamen
        65
    Renovamen   43 天前
    @yunyuyuan 好耶,冲,做完了留个链接给我我去 star
    Renovamen
        66
    Renovamen   43 天前
    @reiji 对的没错我是只龙(骄傲

    机器学习用在前端里听上去很有意思嗷,有机会的话多指教了
    Renovamen
        67
    Renovamen   43 天前
    @hqweay 诶能给个链接吗谢谢您
    reiji
        68
    reiji   43 天前
    对了,问下为啥都用 tailwindcss 呢,是被这种哲学折服了还是单纯地觉得别人用我也得试一下的感觉
    Renovamen
        69
    Renovamen   43 天前   ❤️ 1
    @reiji 单纯地觉得别人用我也得试一下,然后试完之后被这种哲学折服了 😂
    pkwenda
        70
    pkwenda   43 天前
    太特么帅了
    avastms
        71
    avastms   43 天前
    搞不明白这破玩意有什么意义
    fluffyfoxxo
        72
    fluffyfoxxo   43 天前 via iPhone
    @avastms You must be fun at parties
    screen
        73
    screen   43 天前 via iPhone
    Terminal 里执行 rm -rf / 有彩蛋哈哈😆
    dingyx99
        74
    dingyx99   43 天前
    厉害
    HalcyonTime
        75
    HalcyonTime   43 天前
    好棒,学习
    ninePea
        76
    ninePea   43 天前
    太强了,发现可以在应用的 safari 中继续打开楼主的博客,但是套娃到第三层就不行了
    baoshuo
        77
    baoshuo   42 天前
    太强了,已经 star~
    ConnorKenway
        78
    ConnorKenway   42 天前
    老哥可太强了 我的天
    intmax2147483647
        79
    intmax2147483647   42 天前
    简历好玩哈哈,大佬!!
    weivi
        80
    weivi   42 天前
    让人眼前一亮
    zhangrh
        81
    zhangrh   42 天前
    棒!
    cjh1095358798
        82
    cjh1095358798   42 天前
    好强啊
    mayandev
        83
    mayandev   41 天前
    这 Tailwind 真可以做到一行 CSS 都不写吗
    Renovamen
        84
    Renovamen   40 天前
    @mayandev 一行都不写还是不太可能。比如要用 css 函数或者复杂点的选择器,那还是得写 css 。如果想复用某个类那也得写 css (不过可以用 tailwind 的 apply 语法)。不过要写的 css 会少很多 😂
    slyang5
        85
    slyang5   38 天前
    刚刷到一个 VUE3 版本的 ,类似的 一个班出来的么
    Stain5
        86
    Stain5   36 天前
    @yhxx 不要自卑,楼主也是写了好几天的了

    推荐先把 React Hook 学了,真的很省事,会 Redux 竟然不会这个有点迷
    mrcong
        87
    mrcong   35 天前
    太棒了,牛啊
    ZackKing
        88
    ZackKing   34 天前
    请问个, 素材哪来的, 我准备写个 vue3 的 macos ui
    Renovamen
        89
    Renovamen   34 天前
    @Stain5 好的多谢建议,我真觉得 hook 不太好理解,是我太菜了 😂
    Renovamen
        90
    Renovamen   34 天前
    @ZackKing 应用图标的话,这个工具 https://github.com/sindresorhus/file-icon-cli 可以导出你 mac 上已经装了的应用的图标,支持各种格式各种大小。背景图在网上搜 mac default wallpaper 就行。
    wk1507341428
        91
    wk1507341428   31 天前
    怎么这么强
    95276
        92
    95276   30 天前
    再用 iOS 适配一下手机端
    ZackKing
        93
    ZackKing   30 天前
    666 谢谢
    someonedeng
        94
    someonedeng   29 天前
    信你个鬼,先给大佬跪下啦
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3657 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:58 · PVG 09:58 · LAX 18:58 · JFK 21:58
    ♥ Do have faith in what you're doing.