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

2021-05-08 10:10:57 +08:00
 Renovamen

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

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

9501 次点击
所在节点    分享创造
95 条回复
Renovamen
2021-05-08 11:58:39 +08:00
@yunyuyuan 我也觉得最近好像是比较流行仿 os,短时间内见了好几个类似项目了
duhb
2021-05-08 12:01:04 +08:00
好玩,有点意思啊~
labulaka521
2021-05-08 12:20:40 +08:00
很赞
crownzzz
2021-05-08 12:47:13 +08:00
怎么没人用 Angular 搞一个啊🐶
doveyoung
2021-05-08 13:08:01 +08:00
这有点 diao 啊大佬
mokong
2021-05-08 13:40:08 +08:00
我歪个楼,V2 的回复框默认悬浮了?

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/775582

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX