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

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

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

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

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

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

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

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

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

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

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

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