用 React 写了个仿 macOS 界面的个人主页，风格大概介于 Big Sur 和 Catalina 之间？
Renovamen 2021-05-08 10:10:57 +08:00 10089 次点击这是一个创建于 1620 天前的主题，其中的信息可能已经有所发展或是发生改变。
啊朋友们好，我最近在学 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 的用法都还没理解的太清楚），所以先提前抱歉。
最后感谢一切反馈和建议，虽然这个月我比较忙可能没太多时间改进它...
 | 1 Hedgeh09 2021-05-08 10:27:26 +08:00 my-dream.cpp 好评！ |
 | 2 hades97 2021-05-08 10:28:23 +08:00 怎么你们这些非专业前端都这么牛逼 |
 | 3 sillydaddy 2021-05-08 10:30:11 +08:00 为啥你们都是学几天然后不熟就能做出这种效果呢？ ？？ 收藏学习了。 |
 | 4 tousfun 2021-05-08 10:30:55 +08:00 via iPhone 大佬学 react 参考的什么资料？ |
 | 5 Hanser002 2021-05-08 10:31:21 +08:00 其实 class or hook 并不会影响你的 |
 | 6 killva4624 2021-05-08 10:35:27 +08:00 哈哈哈哈 VSCode 打开是 Github1s |
 | 7 noqwerty 2021-05-08 10:38:37 +08:00 大佬！捉个 typo，interests.txt 里面应该是 Natural Language Processing |
 | 8 real3cho 2021-05-08 10:44:06 +08:00 塞尔达好评 |
 | 9 Shvier 2021-05-08 10:49:21 +08:00 inspirational and creative! |
 | 10 erguotou521 2021-05-08 10:54:15 +08:00 via Android 再来点动画会好些 |
 | 11 Pooc 2021-05-08 10:54:44 +08:00  1 my-dream.cpp [my-dream.cpp]( https://i.loli.net/2021/05/08/Bq2p3wKzOyNvXtx.png) |
 |
 | 15 hqweay 2021-05-08 11:05:33 +08:00 via iPhone 太！强！了！ 以前也见过一个 Catalina 主题的博客，觉得这种创意真有趣。 |
 | 16 mayuko2012 2021-05-08 11:17:30 +08:00 太棒了！ |
 | 17 yilidan 2021-05-08 11:22:52 +08:00 大佬，太强了 |
 | 18 yunyuyuan 2021-05-08 11:32:02 +08:00 现在都流行做仿系统的 UI 吗，前面不是刚有人发了个 deepin 的 |
 | 19 yhxx 2021-05-08 11:33:57 +08:00 怎么你们这些非专业前端都这么强+1 我觉得让我来写怕不是要一个月，看你们都是几天就写出来了，好强 |
 | 20 AEDaydreamer 2021-05-08 11:36:25 +08:00 太强了....看这些项目真的每天都会自卑一点点 |
 | 22 duhb 2021-05-08 12:01:04 +08:00 好玩，有点意思啊~ |
 | 23 labulaka521 2021-05-08 12:20:40 +08:00 via iPhone 很赞 |
 | 24 crownzzz 2021-05-08 12:47:13 +08:00 via iPhone 怎么没人用 Angular 搞一个啊 |
 | 25 doveyoung 2021-05-08 13:08:01 +08:00 这有点 diao 啊大佬 |
 | 26 mokong 2021-05-08 13:40:08 +08:00 我歪个楼，V2 的回复框默认悬浮了？ 打开项目之后，看到登陆界面，我想都没想，输入了我自己的电脑密码进入的。。。然后意识过来要是有人故意做一个这样的，用来钓鱼，是不是我就惨了 |
 | 27 XQUX9al72490iGLh 2021-05-08 13:49:35 +08:00 最近怎么这么流行这种项目，难道是课外作业 |
 | 28 javen73 2021-05-08 13:49:56 +08:00 太强了! |
 | 29 LeeReamond 2021-05-08 15:03:06 +08:00 哈哈，我要举报楼主抄袭我的凡体文。也许这里可以看出 react 生态远比 vue 生态强势的地方，目前看到的包括楼主的在内的三个 macos 和一个 ubuntu 都是 react 写的，感觉以后如果要学习的话都是不错的参考资料。另外捉个虫，我默认状态打开之后，如果开启 safari，并点击全屏按钮后样式会变得奇怪。 |
 | 30 plk403 2021-05-08 15:09:54 +08:00 太强了太强了太强了太强了太强了! 已 star! 大佬我们可以做朋友吗 |
| 31 plk403 2021-05-08 15:21:36 +08:00 话说右上角控制中心好像会被打开的窗口挡住,应该是置顶的 |
| 32 Renovamen OP @LeeReamond 诶你已经承认你那是凡体了吗哈哈哈哈。我的 dock 效果应该是参考了你说得第二个 macos，那么我能问下第三个的链接吗 。全屏后样式奇怪主要是指什么，我这边好像没太发现，就是背景图会被拉伸一点... |
 | 35 ian19znj 2021-05-08 15:33:39 +08:00 窗口往上拖, 拖出顶部菜单栏以外, 就拖不回来了. |
 | 36 Hsinyao 2021-05-08 15:35:23 +08:00 666666 被惊艳到了 |
| 37 LeeReamond 2021-05-08 15:36:39 +08:00 @Renovamen 我发帖的时候就是单纯陈述一下项目来源，后来读的时候感觉确实是挺凡的。我这看是这个效果，全屏之后右面的滚动条会跑出来，且仍然能够拉伸大小，拉伸时绿框部分会多出一张桌面背景被一起缩放。拉伸过后如果取消最大化的话这个样式会继承而没有取消 <img src="https://i1.fuimg.com/706005/4e14a5c21bdf7f6d.png"> |
| 39 Renovamen OP @LeeReamond 能问下你用的系统吗，我刚在 mac 和 windows 的 chrome 上按你的操作试了试都没出现这种情况，不过 windows 上倒是试出了别的奇怪的样式问题... |
| 41 LeeReamond 2021-05-08 16:05:41 +08:00 @Renovamen 我是 windows10 20H2 chrome 版本 90.0.4430.93 |
| 42 Renovamen OP @LeeReamond 这版本跟我一样啊，那为啥会出问题... |
 | 43 lifeintools 2021-05-08 17:36:39 +08:00 我输入了 rm -rf ./* 作者 你很有趣 |
 | 45 fxxkgw 2021-05-08 18:24:15 +08:00 |
 | 46 dog 2021-05-08 18:44:17 +08:00 这就叫专业.jpg ，老哥强啊 |
 | 47 quericy 2021-05-08 18:55:09 +08:00 看了下博主博客里的项目，好厉害~~ |
 | 48 alogbycat 2021-05-08 18:59:00 +08:00 太专业了，star~ |
 | 49 mopig 2021-05-08 19:20:02 +08:00 1 |
 | 50 yaphets666 2021-05-08 19:38:29 +08:00 牛啊 terminal 是怎么实现的 |
 | 51 xshwy 2021-05-08 20:01:08 +08:00 rm -rf / 哈哈哈哈哈  |
 | 52 bog 2021-05-08 20:48:49 +08:00 via Android 两年前见过类似的，发了个帖问这是什么，第二天号就被封了 |
 | 53 Lemeng 2021-05-08 21:16:05 +08:00 给你的 star |
 | 54 chen90902 2021-05-08 21:51:20 +08:00 厉害哇，真学习了。第一次项目就这么完善，膜拜了。要我怎么也得一个月撸完 |
 | 55 loading 2021-05-08 21:54:18 +08:00 字体是不是没用对？ |
 | 56 gainsurier 2021-05-08 22:02:26 +08:00 恭喜恭喜，hn 已经 top2 了 |
 | 57 ansonsiva 2021-05-08 22:02:45 +08:00 厉害了 |
 | 58 hlwjia PRO 一大拨 offer 即将来袭 |
 | 59 reiji 2021-05-08 22:54:25 +08:00 不行了，我得挽回前端人的面子，哪位仁兄推荐个好看的系统给我康康 |
| 61 reiji 2021-05-08 23:02:52 +08:00 没想到帖主是只做 ML 的龙，正巧我现在的兴趣就是把机器学习应用在前端项目中（不过就是水平很差还在努力中罢了） |
| 62 Renovamen OP @yaphets666 当前输入行就是一个 input 框，然后敲一次回车就往里面追加一个输出结果 dom 和一个输入 dom，然后把之前的输入框设成 read-only 。 我大概没有表述清楚，所以还是看代码吧： https://github.com/Renovamen/playground-macos/blob/main/src/components/apps/Terminal.js |
| 64 Renovamen OP @gainsurier 啊意料之外意料之外，不管是 V2EX 和 hn 我都没想到有那么多反馈 ，感谢各位。 然后趁热在 hn 的评论区里宣传了一下 @LeeReamond 的 deepin 版本，我看到评论区有人在宣传 ubuntu 版本才想起来这回事 |
| 68 reiji 2021-05-08 23:34:16 +08:00 对了，问下为啥都用 tailwindcss 呢，是被这种哲学折服了还是单纯地觉得别人用我也得试一下的感觉 |
 | 70 pkwenda 2021-05-09 00:52:48 +08:00 太特么帅了 |
 | 71 EPr2hh6LADQWqRVH 2021-05-09 01:03:02 +08:00 搞不明白这破玩意有什么意义 |
 | 72 Foxxoccino 2021-05-09 01:35:37 +08:00 via iPhone @avastms You must be fun at parties |
 | 73 screen 2021-05-09 08:13:43 +08:00 via iPhone Terminal 里执行 rm -rf / 有彩蛋哈哈 |
 | 74 dingyx99 2021-05-09 09:39:43 +08:00 厉害 |
 | 75 HalcyonTime 2021-05-09 09:46:09 +08:00 好棒，学习 |
 | 76 ninePea 2021-05-09 09:54:24 +08:00 太强了，发现可以在应用的 safari 中继续打开楼主的博客，但是套娃到第三层就不行了 |
 | 77 baoshuo 2021-05-09 10:53:54 +08:00 太强了，已经 star~ |
 | 78 ConnorKenway 2021-05-09 10:55:12 +08:00 老哥可太强了 我的天 |
 | 79 intmax2147483647 2021-05-09 23:04:29 +08:00 简历好玩哈哈，大佬！！ |
 | 80 1sen 2021-05-10 09:17:39 +08:00 让人眼前一亮 |
 | 81 zhangrh 2021-05-10 09:46:05 +08:00 棒! |
 | 82 cjh1095358798 2021-05-10 09:56:13 +08:00 好强啊 |
 | 83 mayandev 2021-05-10 18:32:44 +08:00 这 Tailwind 真可以做到一行 CSS 都不写吗 |
| 84 Renovamen OP @mayandev 一行都不写还是不太可能。比如要用 css 函数或者复杂点的选择器，那还是得写 css 。如果想复用某个类那也得写 css （不过可以用 tailwind 的 apply 语法）。不过要写的 css 会少很多 |
 | 85 slyang5 2021-05-13 21:55:19 +08:00 刚刷到一个 VUE3 版本的 ，类似的 一个班出来的么 |
 | 86 Stain5 2021-05-15 21:25:10 +08:00 |
 | 87 mrcong 2021-05-16 11:12:29 +08:00 太棒了，牛啊 |
 | 88 ZackKing 2021-05-17 15:57:53 +08:00 请问个, 素材哪来的, 我准备写个 vue3 的 macos ui |
| 90 Renovamen 2021-05-17 19:25:29 +08:00 @ZackKing 应用图标的话，这个工具 https://github.com/sindresorhus/file-icon-cli 可以导出你 mac 上已经装了的应用的图标，支持各种格式各种大小。背景图在网上搜 mac default wallpaper 就行。 |
 | 91 wk1507341428 2021-05-20 18:26:41 +08:00 怎么这么强 |
 | 92 95276 2021-05-21 10:47:03 +08:00 再用 iOS 适配一下手机端 |
| 93 ZackKing 2021-05-21 16:35:21 +08:00 666 谢谢 |
 | 94 someonedeng 2021-05-23 02:36:48 +08:00 信你个鬼，先给大佬跪下啦 |
 | 95 kangyan 2021-08-14 16:56:31 +08:00 给跪了 |
Select Language