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

[Renovamen]

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

• 网页地址： https://portfolio.zxh.io/
• Github： https://github.com/Renovamen/playground-macos

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

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

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

[Hedgeh09]

my-dream.cpp 好评！

[hades97]

怎么你们这些非专业前端都这么牛逼

[sillydaddy]

为啥你们都是学几天然后不熟就能做出这种效果呢？ ？？
收藏学习了。

[tousfun]

大佬学 react 参考的什么资料？

[Hanser002]

其实 class or hook 并不会影响你的🐂🍺

[killva4624]

哈哈哈哈 VSCode 打开是 Github1s

[noqwerty]

大佬！捉个 typo，interests.txt 里面应该是 Natural Language Processing

[real3cho]

塞尔达好评

[Shvier]

inspirational and creative!

[erguotou521]

再来点动画会好些

[Pooc]

my-dream.cpp
[my-dream.cpp]( https://i.loli.net/2021/05/08/Bq2p3wKzOyNvXtx.png)

[Renovamen]

@noqwerty 非常感谢，马上改马上改 😂

[Renovamen]

@919615766 我先看了看官方文档，然后找了几个小项目来跑，然后就硬着头皮自己写，不会的上网搜，总会搜到 😂

[Renovamen]

@erguotou521 多谢建议，但主要是指哪方面的动画啊

[hqweay]

太！强！了！
以前也见过一个 Catalina 主题的博客，觉得这种创意真有趣。

[mayuko2012]

太棒了！

[yilidan]

大佬，太强了

[yunyuyuan]

现在都流行做仿系统的 UI 吗，前面不是刚有人发了个 deepin 的

[yhxx]

怎么你们这些非专业前端都这么强+1
我觉得让我来写怕不是要一个月，看你们都是几天就写出来了，好强

[AEDaydreamer]

太强了....看这些项目真的每天都会自卑一点点

[Renovamen]

@yunyuyuan 我也觉得最近好像是比较流行仿 os，短时间内见了好几个类似项目了

[duhb]

好玩，有点意思啊~

[labulaka521]

很赞

[crownzzz]

怎么没人用 Angular 搞一个啊🐶

[doveyoung]

这有点 diao 啊大佬

[mokong]

我歪个楼，V2 的回复框默认悬浮了？

打开项目之后，看到登陆界面，我想都没想，输入了我自己的电脑密码进入的。。。然后意识过来要是有人故意做一个这样的，用来钓鱼，是不是我就惨了😂

[lymith]

最近怎么这么流行这种项目，难道是课外作业

[javen73]

太强了!

[LeeReamond]

哈哈，我要举报楼主抄袭我的凡体文。也许这里可以看出 react 生态远比 vue 生态强势的地方，目前看到的包括楼主的在内的三个 macos 和一个 ubuntu 都是 react 写的，感觉以后如果要学习的话都是不错的参考资料。另外捉个虫，我默认状态打开之后，如果开启 safari，并点击全屏按钮后样式会变得奇怪。

[plk403]

太强了太强了太强了太强了太强了! 已 star! 大佬我们可以做朋友吗

[plk403]

话说右上角控制中心好像会被打开的窗口挡住,应该是置顶的

[Renovamen]

@LeeReamond 诶你已经承认你那是凡体了吗哈哈哈哈。我的 dock 效果应该是参考了你说得第二个 macos，那么我能问下第三个的链接吗 😂。全屏后样式奇怪主要是指什么，我这边好像没太发现，就是背景图会被拉伸一点...

[Renovamen]

@mokong 有道理，奇怪的诈骗小技巧增加了

[Renovamen]

@plk403 好的，多谢，会改的会改的，不是大佬不是大佬，做朋友做朋友

[ian19znj]

窗口往上拖, 拖出顶部菜单栏以外, 就拖不回来了.

[Hsinyao]

666666 被惊艳到了

[LeeReamond]

@Renovamen 我发帖的时候就是单纯陈述一下项目来源，后来读的时候感觉确实是挺凡的。我这看是这个效果，全屏之后右面的滚动条会跑出来，且仍然能够拉伸大小，拉伸时绿框部分会多出一张桌面背景被一起缩放。拉伸过后如果取消最大化的话这个样式会继承而没有取消
<img src="https://i1.fuimg.com/706005/4e14a5c21bdf7f6d.png">

[ShuoHui]

@Pooc #11 笑死哈哈哈哈哈哈哈

[Renovamen]

@LeeReamond 能问下你用的系统吗，我刚在 mac 和 windows 的 chrome 上按你的操作试了试都没出现这种情况，不过 windows 上倒是试出了别的奇怪的样式问题...

[Renovamen]

@ian19znj 好的，谢谢。我刚试了试，mac 会阻止你把窗口移到外面去，所以我等会儿去设个边界

[LeeReamond]

@Renovamen 我是 windows10 20H2 chrome 版本 90.0.4430.93

[Renovamen]

@LeeReamond 这版本跟我一样啊，那为啥会出问题...

[lifeintools]

我输入了 rm -rf ./* 作者 你很有趣

[yunyuyuan]

@Renovamen 嘿嘿，既然如此，我要开个 vue3 做 manjaro 的坑

[fxxkgw]

@AEDaydreamer 这头像让我恍惚看到了一发。。

PS 大佬好厉害

[hazy]

这就叫专业.jpg ，老哥强啊

[quericy]

看了下博主博客里的项目，好厉害~~

[alogbycat]

太专业了，star~

[mopig]

这里还有个类似的项目呢

https://macos.vercel.app/

[yaphets666]

牛啊 terminal 是怎么实现的

[xshwy]

rm -rf / 哈哈哈哈哈

[bog]

两年前见过类似的，发了个帖问这是什么，第二天号就被封了😂

[Lemeng]

给你的 star

[chen90902]

厉害哇，真学习了。第一次项目就这么完善，膜拜了。要我怎么也得一个月撸完

[loading]

字体是不是没用对？

[gainsurier]

恭喜恭喜，hn 已经 top2 了

[ansonsiva]

厉害了

[hlwjia]

一大拨 offer 即将来袭

[reiji]

不行了，我得挽回前端人的面子，哪位仁兄推荐个好看的系统给我康康

[Renovamen]

@mopig 事实上我 dock 的特效就是参考了这个项目的 😂

[reiji]

没想到帖主是只做 ML 的龙，正巧我现在的兴趣就是把机器学习应用在前端项目中（不过就是水平很差还在努力中罢了）

[Renovamen]

@yaphets666 当前输入行就是一个 input 框，然后敲一次回车就往里面追加一个输出结果 dom 和一个输入 dom，然后把之前的输入框设成 read-only 。

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

https://github.com/Renovamen/playground-macos/blob/main/src/components/apps/Terminal.js

[Renovamen]

@loading 对的没用对，当时图方便随便选了一个，我以后会改进一下字体。感谢建议~

[Renovamen]

@gainsurier 啊意料之外意料之外，不管是 V2EX 和 hn 我都没想到有那么多反馈 ，感谢各位。

然后趁热在 hn 的评论区里宣传了一下 @LeeReamond 的 deepin 版本，我看到评论区有人在宣传 ubuntu 版本才想起来这回事 😂

[Renovamen]

@yunyuyuan 好耶，冲，做完了留个链接给我我去 star

[Renovamen]

@reiji 对的没错我是只龙（骄傲

机器学习用在前端里听上去很有意思嗷，有机会的话多指教了

[Renovamen]

@hqweay 诶能给个链接吗谢谢您

[reiji]

对了，问下为啥都用 tailwindcss 呢，是被这种哲学折服了还是单纯地觉得别人用我也得试一下的感觉

[Renovamen]

@reiji 单纯地觉得别人用我也得试一下，然后试完之后被这种哲学折服了 😂

[pkwenda]

太特么帅了

[EPr2hh6LADQWqRVH]

搞不明白这破玩意有什么意义

[fluffyfoxxo]

@avastms You must be fun at parties

[screen]

Terminal 里执行 rm -rf / 有彩蛋哈哈😆

[dingyx99]

厉害

[HalcyonTime]

好棒，学习

[ninePea]

太强了，发现可以在应用的 safari 中继续打开楼主的博客，但是套娃到第三层就不行了

[baoshuo]

太强了，已经 star~

[ConnorKenway]

老哥可太强了 我的天

[intmax2147483647]

简历好玩哈哈，大佬！！

[weivi]

让人眼前一亮

[zhangrh]

棒!

[cjh1095358798]

好强啊

[mayandev]

这 Tailwind 真可以做到一行 CSS 都不写吗

[Renovamen]

@mayandev 一行都不写还是不太可能。比如要用 css 函数或者复杂点的选择器，那还是得写 css 。如果想复用某个类那也得写 css （不过可以用 tailwind 的 apply 语法）。不过要写的 css 会少很多 😂

[slyang5]

刚刷到一个 VUE3 版本的 ，类似的 一个班出来的么

[Stain5]

@yhxx 不要自卑，楼主也是写了好几天的了

推荐先把 React Hook 学了，真的很省事，会 Redux 竟然不会这个有点迷

[mrcong]

太棒了，牛啊

[ZackKing]

请问个, 素材哪来的, 我准备写个 vue3 的 macos ui

[Renovamen]

@Stain5 好的多谢建议，我真觉得 hook 不太好理解，是我太菜了 😂

[Renovamen]

@ZackKing 应用图标的话，这个工具 https://github.com/sindresorhus/file-icon-cli 可以导出你 mac 上已经装了的应用的图标，支持各种格式各种大小。背景图在网上搜 mac default wallpaper 就行。

[wk1507341428]

怎么这么强

[95276]

再用 iOS 适配一下手机端

[ZackKing]

666 谢谢

[someonedeng]

信你个鬼，先给大佬跪下啦

[kangyan]

给跪了