用 React 写了个仿 macOS 界面的个人主页,风格大概介于 Big Sur 和 Catalina 之间? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
Renovamen

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

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

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

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

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

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

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

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

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

推荐先把 React Hook 学了,真的很省事,会 Redux 竟然不会这个有点迷
mrcong
    87
mrcong  
   May 16, 2021
太棒了,牛啊
ZackKing
    88
ZackKing  
   May 17, 2021
请问个, 素材哪来的, 我准备写个 vue3 的 macos ui
Renovamen
    89
Renovamen  
OP
   May 17, 2021
@Stain5 好的多谢建议,我真觉得 hook 不太好理解,是我太菜了
Renovamen
    90
Renovamen  
OP
   May 17, 2021
@ZackKing 应用图标的话,这个工具 https://github.com/sindresorhus/file-icon-cli 可以导出你 mac 上已经装了的应用的图标,支持各种格式各种大小。背景图在网上搜 mac default wallpaper 就行。
wk1507341428
    91
wk1507341428  
   May 20, 2021
怎么这么强
95276
    92
95276  
   May 21, 2021
再用 iOS 适配一下手机端
ZackKing
    93
ZackKing  
   May 21, 2021
666 谢谢
someonedeng
    94
someonedeng  
   May 23, 2021
信你个鬼,先给大佬跪下啦
kangyan
    95
kangyan  
   Aug 14, 2021
给跪了
About     Help     Advertise     Blog     API     FAQ     Solana     903 Online   Highest 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 250ms UTC 22:18 PVG 06:18 LAX 15:18 JFK 18:18
Do have faith in what you're doing.
ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86