前两天看见有人用 react 写了个网页版 Ubuntu，迫于不会用 react，我用 vue 写了个网页版 Deepin
LeeReamond · 2021 年 4 月 30 日 · 15231 次点击这是一个创建于 1726 天前的主题，其中的信息可能已经有所发展或是发生改变。
项目地址：https://GoodManWEN.github.io
仓库地址：https://github.com/GoodManWEN/GoodManWEN.github.io
这个项目产生的契机挺巧和的，因为最近需要一个项目展示页，海外企业招聘比国内更看重这个，正好在研究 Github Pages，就在论坛看到了之前一个朋友发帖的最近 github 挺火的一个网页版的 ubuntu 。凭借好奇点开以后，效果确实挺惊艳的，我感觉我做项目展示也可以搞个类似的界面，因为我完全不是前端方向，只是希望表示自己有前端能力的话，类似的页面应该足够酷了。
只是比较可惜，那个仓库完全是由 react 写的，我完全不会用 react 。再加上那个页面的作者大概设计上只是拿来当做一个展示自己技能的 demo 平台，其实页面并没有什么实质内容。而我则希望最好这个东西能在自我介绍的基础上再用来展示一些以前写过的技术博客，或者做过的项目之类的，所以想了想还是重写了，于是就有了现在这个项目。
目前的成品简单来说，这是一个 Github pages 托管的静态页面，它的设计风格是模拟一个运行在网页中的 deepin 系统的 GUI，它的功能是可以展示 markdown 文件，所以可以用来展示博客或者项目文档。至于为什么是 Deepin，实际上我没用过 deepin 系统，只是因为 Ubuntu 已经有人做过了，再做一遍感觉很 low，而剩下的发行版中，想来想去还是用这个国产系统，想法就是就相当于为国产做宣传了吧。。（不过咋说呢，具体做的过程中感觉 deepin 体验挺一般的）
特性
这个项目目前为止和同类项目的区别在于几点，
- 一是它的设计目的是除了展示简历还要展示博客，所以它有一个完整的虚拟文件映射目录，放在其中的所有 markdown 文件会以同样的目录结构被映射到网页中，我觉得这种分类风格还是比较适合于博客的，比如新建一个目录叫项目，下面有 Python，go，node 三项，里面分别放置各个语言做过的项目，类似这种分类对于展示项目经历来说应该比较清晰。
- 二是为了让页面更加接近真实桌面，我实现了一个更加完善的窗口管理系统。也就是说你可以像在正常系统中一样地打开任意多个窗口，并且自由地拉伸、放大、移动他们，他们会按照正确的顺序、正确的焦距显示出来。
- 三当然就是这个项目是 vue 开发的，广大 vue 程序员可以更容易地利用资源。
如同上文所述的，由于本人是个严重不专业前端，在加上完全是挤出来时间做的项目，实际开发时间大概只做了三天，项目中有各种不优雅的地方，请各位前端轻喷，有意见或建议欢迎 PR 。网页是面向外企做的，所以照着 Deepin 系统搞出了个怪异的英文版，如果各位有需要中文版应该改也不难。另外也是没有写博客习惯，想做网页了翻了翻只能翻出四五年前写的东西，也是醉了。
 |
1
Richard14 2021 年 4 月 30 日
666 大佬，昨天摸鱼的时候看见了，太强了
|
 |
2
whcoding 2021 年 4 月 30 日
厉害 ~
|
 |
3
LeeReamond OP |
 |
4
muzihuaner 2021 年 4 月 30 日 via Android
666 牛批
|
 |
5
MzM2ODkx 2021 年 4 月 30 日
3 天做出来有点牛逼啊，我专业前端 3 周都不一定做出来，哈哈
|
 |
6
hm20062006ok 2021 年 4 月 30 日
厉害
|
|
7
LeeReamond OP @iMusic 主要太忙了，看代码的话会发现赶工痕迹特别明显。里面比如页面按顺序堆叠这种需求，需要从中间提出来一个放到顶部，正常比如应该用 b 树，实际上实现的时候全是遍历，一边写一边自己都蛋疼，不过确实没时间做
|
 |
8
Muniesa 2021 年 4 月 30 日
太强了
|
 |
9
christin 2021 年 4 月 30 日 via iPhone
卧槽 大佬
竟然还是非前端的 厉害厉害 |
 |
10
jerry033 2021 年 4 月 30 日
五体投地，叹为观止！
|
 |
11
kidult 2021 年 4 月 30 日
大佬，要说三天用 VUE 能写出来，而不会 react，我是不太信的
|
 |
12
x86 2021 年 4 月 30 日  18
大佬的标题就是这么朴实无华：XX 天、前几天看到、迫于、随手、无聊
|
 |
13
PinkRabbit 2021 年 4 月 30 日
只能说牛逼
|
|
14
LeeReamond OP @LIvid 不好意思好像错区了，第一次发个人项目，刚才看了一下好像应该发在分享创造区，我以为分享发现跟这个是同一个。现在还有办法修改吗
|
 |
15
QUC062IzY3M1Y6dg 2021 年 4 月 30 日
太强了吧
|
|
16
LeeReamond OP @kidult 确实不会用 react，似乎 react 逻辑与 vue 不太一样，vue 的数据流动更经过一些，所以方便像我这种非专业前端，哪怕写成面条逻辑，能跑就行了。不过做过这次项目以后，倒是对 vue 的设计哲学也有了同感，模型设计满足 99%的使用场景就行了，自动化监控降低程序员的心智负担，在大多数项目中是值得的
|
 |
17
PerFectTime 2021 年 4 月 30 日
大佬的标题就是这么朴实无华：XX 天、前几天看到、迫于、随手、无聊
|
 |
18
hflyf123 2021 年 4 月 30 日
不卡，很溜
|
 |
19
695975931 2021 年 4 月 30 日
牛逼啊！！！
|
 |
20
Livid MOD PRO 1
|
|
21
kidult 2021 年 4 月 30 日
@LeeReamond #16 哈哈，同感，后端学前端表示 react 玩不转，vue 写 admin 后台和小程序一把梭
|
 |
22
yl20181003 2021 年 4 月 30 日
tql 🙀
|
 |
23
devtiange 2021 年 4 月 30 日
太强了吧
|
 |
24
dushixiang 2021 年 4 月 30 日
非常厉害
|
 |
25
NeoChen 2021 年 4 月 30 日
牛逼了
|
 |
26
waltcow 2021 年 4 月 30 日
tailwindcss 用的炉火纯青的
|
 |
27
WishMeLz 2021 年 4 月 30 日
强
嘿嘿😁  |
 |
28
CallMeReznov 2021 年 4 月 30 日
 |
 |
29
really28 2021 年 4 月 30 日
star 了
|
 |
30
gps949 2021 年 4 月 30 日
额，还以为是网页对接后端 deepin 系统实现全功能，原来指的是长得像 deep 的网页啊
|
 |
31
Lemeng 2021 年 4 月 30 日
6666 。star 奉上
|
 |
32
xrr2016 2021 年 4 月 30 日
666
|
 |
33
akakidz 2021 年 4 月 30 日
666666666
|
 |
34
275761919 2021 年 4 月 30 日
大佬的标题就是这么朴实无华：XX 天、前几天看到、迫于、随手、无聊
|
|
35
275761919 2021 年 4 月 30 日
顺便也求下网页版 ubuntu 地址
|
 |
36
zhuang0718 2021 年 4 月 30 日
强 ！
|
 |
37
yEhwG10ZJa83067x 2021 年 4 月 30 日
啥时候可以讲一下这项目如何从设计到完成开发一系列过程
|
 |
38
BeautifulSoap 2021 年 4 月 30 日
提一下，firefox 下元素位置不对
|
 |
39
hellodigua 2021 年 4 月 30 日
牛
|
 |
40
imilano 2021 年 4 月 30 日
太强了
|
 |
41
Desiree 2021 年 4 月 30 日
牛逼...
|
 |
42
Maxbee 2021 年 4 月 30 日
强的可怕
|
 |
43
silencelixing 2021 年 4 月 30 日
66666 秀啊
|
 |
44
duanxianze 2021 年 4 月 30 日
太强了
|
 |
45
leelz 2021 年 4 月 30 日
太强了
|
 |
46
longgediyi999 2021 年 4 月 30 日
牛逼
|
 |
47
leusion 2021 年 4 月 30 日
强啊，大佬，发现个小问题，就是程序窗口缩放有点小问题，只有鼠标停留在窗口的右边框和下边框，窗口才能缩放
|
 |
48
Vegetable 2021 年 4 月 30 日
「不专业」
|
 |
49
expy 2021 年 4 月 30 日 4
https://copy.sh/v86/
这有个真的模拟器跑系统。 |
|
50
LeeReamond OP |
|
51
LeeReamond OP @leusion 正常缩放有四个边加四个角可拉伸，我做的时候只实现了右边，下边，和右下角，因为按这些方向调整只用调整窗口大小而不用调整窗口位置，属于一种偷懒的做法。。不过还好按照习惯这几个边的实际使用频率应该也更高一些
|
|
52
LeeReamond OP @expy 这个是真大佬，之前好像见过完全用 js 的 win2000，似乎是这个当中集成的一个。我这个只是个网页而已，差的远
|
 |
53
pigll 2021 年 4 月 30 日
厉害 膜拜
|
 |
54
neilyoone 2021 年 4 月 30 日
太强了
|
 |
55
huweic 2021 年 4 月 30 日
可以的
|
 |
57
reiji 2021 年 4 月 30 日
这行动力太佩服了，我也要加油了
|
 |
58
paopjian 2021 年 4 月 30 日
天哪,太强大了
|
 |
59
Yien 2021 年 4 月 30 日
666 大佬，昨天摸鱼的时候看见了，太强了
|
 |
60
itning 2021 年 4 月 30 日
牛逼
|
|
61
LeeReamond OP @mozhizhu 很有趣，已添加，欢迎测试
|
 |
62
Marszm 2021 年 4 月 30 日
大佬大佬.....看来工作不够饱和啊
|
 |
63
caixiaomao 2021 年 4 月 30 日
有点厉害 😃
|
 |
64
xxdsox 2021 年 4 月 30 日 1
捉个虫，Resume 里面的 Coming Soon 打成了 Comming Soon
|
 |
65
h1104350235 2021 年 4 月 30 日
大佬，那个 React 写的项目，可以扔个链接么
|
 |
66
fish267 2021 年 4 月 30 日
太厉害了
|
 |
67
wpyfawkes 2021 年 4 月 30 日
大佬 666
|
 |
68
zzlatan 2021 年 4 月 30 日
厉害
|
 |
69
pcmid 2021 年 4 月 30 日
|
 |
70
xshwy 2021 年 4 月 30 日
|
 |
71
bigShrimp8577 2021 年 4 月 30 日
仰望大佬，大佬都说不懂前端，我这种是不是出门都不敢说自己是做前端的了
|
|
72
2I0Mto2kjm0c0B9i 2021 年 4 月 30 日
nb
|
 |
73
nii 2021 年 4 月 30 日
大佬强无敌我擦
|
 |
74
molvqingtai 2021 年 4 月 30 日
几天时间能整出来，是真的强
|
 |
75
Fgoo9527 2021 年 4 月 30 日
Ubuntu+react 的在这里 https://github.com/vivek9patel/vivek9patel.github.io
|
 |
76
zhaofy 2021 年 4 月 30 日
准备摸个鱼开启自己的假期，摸着摸着，感觉自己就是个弱智 = =
|
 |
77
wl62613 2021 年 4 月 30 日
感觉自己弱小无助..
|
 |
78
felixwang 2021 年 4 月 30 日
666666
|
 |
79
yazoox 2021 年 4 月 30 日
虽不明但觉厉！
|
 |
80
codehz 2021 年 4 月 30 日
窗口管理有点小逻辑问题
简单说就是在多个窗口同时激活的时候，点击不在顶层窗口的图标会无条件隐藏窗口，而不是提升到顶层（然后还会播放动画，就很尴尬） |
 |
81
asche910 2021 年 4 月 30 日
太强了！！！
|
 |
82
NoString 2021 年 4 月 30 日
大佬过于凶悍 牛逼！
|
 |
83
LittleYangYang 2021 年 4 月 30 日
强！
|
 |
84
xuanli 2021 年 4 月 30 日
star
|
 |
85
leaves7i 2021 年 4 月 30 日 1
 别拦我，我还能套🐶（不知道这个算不算 bug ） |
 |
86
RRRoger 2021 年 4 月 30 日
太强了吧
|
 |
87
supercaizehua 2021 年 4 月 30 日
惊呆了
|
 |
88
davidjqq19 2021 年 4 月 30 日
大佬 666 ！
|
|
89
LeeReamond OP @codehz 确实有这个问题，这个是由于按钮是否执行最小化的逻辑仅判断当前是否处于显示状态，而不是处于显示且显示于最高层。暂时不准备改了(
|
 |
90
tojonozomi 2021 年 4 月 30 日
nb，这是真的 nb，给跪了
lz 还是非专业前端，3 天做出来，太狠了 |
 |
91
rekulas 2021 年 4 月 30 日
执行力真强
不过作为一个 git 患者 想吐槽下 commit msg |
 |
93
charlie21 2021 年 4 月 30 日
可以参考 ubuntu 版本的实现一个垃圾桶
|
 |
94
Cbdy 2021 年 5 月 1 日 via Android
顺便发个 react 的 macos
https://macos.vercel.app/ |
|
95
LeeReamond OP @charlie21 考虑过实现，但是由于我观察垃圾桶功能似乎只作为彩蛋，用来表示自己曾使用又抛弃的技术栈，似乎与核心功能没有太大关系。而实现方面工作量则比较大，因为需要实现一套独立的大图标文件显示 UI，且考虑到代码复用，如果垃圾桶实现了这套 UI，那么理所当然应该整合到文件夹窗口，让文件夹变成可以切换图片大小的模式，整个工作量又变得太大。简单来说躺平等 PR 了
|
 |
96
yangheng4922 2021 年 5 月 1 日
牛逼啊 3 天搞定 还是非前端 开发的 作为前端的我都有点惭愧了
|
 |
97
wuqinghaha 2021 年 5 月 1 日
牛啊
|
 |
98
fhy1994 2021 年 5 月 1 日
太厉害了
|
 |
99
titivillage 2021 年 5 月 1 日
太好看了，搞得我都想尝试一下 deepin
|
 |
100
LearningToCode 2021 年 5 月 1 日
NB 我直接进行一个 star 和 frok 的点
|
Select Language