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

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

  Renovamen · 2021-05-08 10:10:57 +08:00 · 9315 次点击
这是一个创建于 1279 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

PS 大佬好厉害
hazy
    46
hazy  
   2021-05-08 18:44:17 +08:00
这就叫专业.jpg ,老哥强啊
quericy
    47
quericy  
   2021-05-08 18:55:09 +08:00
看了下博主博客里的项目,好厉害~~
alogbycat
    48
alogbycat  
   2021-05-08 18:59:00 +08:00
太专业了,star~
mopig
    49
mopig  
   2021-05-08 19:20:02 +08:00   ❤️ 1
这里还有个类似的项目呢

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

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

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

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

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

推荐先把 React Hook 学了,真的很省事,会 Redux 竟然不会这个有点迷
mrcong
    87
mrcong  
   2021-05-16 11:12:29 +08:00
太棒了,牛啊
ZackKing
    88
ZackKing  
   2021-05-17 15:57:53 +08:00
请问个, 素材哪来的, 我准备写个 vue3 的 macos ui
Renovamen
    89
Renovamen  
OP
   2021-05-17 19:21:43 +08:00
@Stain5 好的多谢建议,我真觉得 hook 不太好理解,是我太菜了 😂
Renovamen
    90
Renovamen  
OP
   2021-05-17 19:25:29 +08:00
@ZackKing 应用图标的话,这个工具 https://github.com/sindresorhus/file-icon-cli 可以导出你 mac 上已经装了的应用的图标,支持各种格式各种大小。背景图在网上搜 mac default wallpaper 就行。
wk1507341428
    91
wk1507341428  
   2021-05-20 18:26:41 +08:00
怎么这么强
95276
    92
95276  
   2021-05-21 10:47:03 +08:00
再用 iOS 适配一下手机端
ZackKing
    93
ZackKing  
   2021-05-21 16:35:21 +08:00
666 谢谢
someonedeng
    94
someonedeng  
   2021-05-23 02:36:48 +08:00
信你个鬼,先给大佬跪下啦
kangyan
    95
kangyan  
   2021-08-14 16:56:31 +08:00
给跪了
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5584 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 34ms · UTC 01:47 · PVG 09:47 · LAX 17:47 · JFK 20:47
Developed with CodeLauncher
♥ Do have faith in what you're doing.