爱意满满的作品展示区。
Renovamen

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

  Renovamen · May 8, 2021 · 11433 views
This topic created in 2006 days ago, the information mentioned may be changed or developed.

啊朋友们好,我最近在学 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 的用法都还没理解的太清楚),所以先提前抱歉。

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

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

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

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

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

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

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

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

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

推荐先把 React Hook 学了,真的很省事,会 Redux 竟然不会这个有点迷
mrcong
mrcong
May 16, 2021
87
太棒了,牛啊
ZackKing
ZackKing
May 17, 2021
88
请问个, 素材哪来的, 我准备写个 vue3 的 macos ui
Renovamen
Renovamen
OP
May 17, 2021
89
@Stain5 好的多谢建议,我真觉得 hook 不太好理解,是我太菜了 😂
Renovamen
Renovamen
OP
May 17, 2021
90
@ZackKing 应用图标的话,这个工具 https://github.com/sindresorhus/file-icon-cli 可以导出你 mac 上已经装了的应用的图标,支持各种格式各种大小。背景图在网上搜 mac default wallpaper 就行。
wk1507341428
wk1507341428
May 20, 2021
91
怎么这么强
95276
95276
May 21, 2021
92
再用 iOS 适配一下手机端
ZackKing
ZackKing
May 21, 2021
93
666 谢谢
someonedeng
someonedeng
May 23, 2021
94
信你个鬼,先给大佬跪下啦
kangyan
kangyan
Aug 14, 2021
95
给跪了
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2645 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 168ms · UTC 14:43 · PVG 22:43 · LAX 06:43 · JFK 09:43
♥ Do have faith in what you're doing.