前两天看见有人用 react 写了个网页版 Ubuntu，迫于不会用 react，我用 vue 写了个网页版 Deepin

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1341 天前的主题，其中的信息可能已经有所发展或是发生改变。

项目地址：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 系统搞出了个怪异的英文版，如果各位有需要中文版应该改也不难。另外也是没有写博客习惯，想做网页了翻了翻只能翻出四五年前写的东西，也是醉了。

Deepin

项目

React

展示

116 条回复 • 2021-05-24 19:53:54 +08:00

1 2

❮

❯

Richard14

2021-04-30 10:35:04 +08:00

666 大佬，昨天摸鱼的时候看见了，太强了

whcoding

2021-04-30 10:36:44 +08:00

厉害 ~

LeeReamond

2021-04-30 10:53:02 +08:00 via Android

@Richard14
@whcoding 谢谢谢谢，做了点微小的工作

muzihuaner

2021-04-30 10:59:55 +08:00 via Android

666 牛批

iMusic

2021-04-30 11:00:35 +08:00

3 天做出来有点牛逼啊，我专业前端 3 周都不一定做出来，哈哈

hm20062006ok

2021-04-30 11:08:47 +08:00

厉害

LeeReamond

2021-04-30 11:09:19 +08:00 via Android

@iMusic 主要太忙了，看代码的话会发现赶工痕迹特别明显。里面比如页面按顺序堆叠这种需求，需要从中间提出来一个放到顶部，正常比如应该用 b 树，实际上实现的时候全是遍历，一边写一边自己都蛋疼，不过确实没时间做

Muniesa

2021-04-30 11:14:03 +08:00

太强了

christin

2021-04-30 11:26:05 +08:00 via iPhone

卧槽大佬
竟然还是非前端的厉害厉害

jerry033

2021-04-30 11:29:06 +08:00

五体投地，叹为观止！

kidult

2021-04-30 11:30:12 +08:00

大佬，要说三天用 VUE 能写出来，而不会 react，我是不太信的

x86

2021-04-30 11:30:42 +08:00

大佬的标题就是这么朴实无华：XX 天、前几天看到、迫于、随手、无聊

PinkRabbit

2021-04-30 11:32:15 +08:00

只能说牛逼

LeeReamond

2021-04-30 11:33:24 +08:00 via Android

@LIvid 不好意思好像错区了，第一次发个人项目，刚才看了一下好像应该发在分享创造区，我以为分享发现跟这个是同一个。现在还有办法修改吗

shuxhan

2021-04-30 11:35:38 +08:00

太强了吧

LeeReamond

2021-04-30 11:36:43 +08:00 via Android

@kidult 确实不会用 react，似乎 react 逻辑与 vue 不太一样，vue 的数据流动更经过一些，所以方便像我这种非专业前端，哪怕写成面条逻辑，能跑就行了。不过做过这次项目以后，倒是对 vue 的设计哲学也有了同感，模型设计满足 99%的使用场景就行了，自动化监控降低程序员的心智负担，在大多数项目中是值得的

PerFectTime

2021-04-30 11:37:57 +08:00

大佬的标题就是这么朴实无华：XX 天、前几天看到、迫于、随手、无聊

hflyf123

2021-04-30 11:38:47 +08:00

不卡，很溜

695975931

2021-04-30 11:42:04 +08:00

牛逼啊！！！

Livid

MOD

2021-04-30 11:42:43 +08:00

@LeeReamond 嗯，感谢你选择这里发布你的作品。

已经移动到 /go/create

kidult

2021-04-30 11:44:14 +08:00

@LeeReamond #16 哈哈，同感，后端学前端表示 react 玩不转，vue 写 admin 后台和小程序一把梭

yl20181003

2021-04-30 11:48:05 +08:00

tql 🙀

devtiange

2021-04-30 11:50:12 +08:00

太强了吧

FreeEx

2021-04-30 11:52:24 +08:00

非常厉害

NeoChen

2021-04-30 11:55:06 +08:00

牛逼了

waltcow

2021-04-30 12:13:08 +08:00

tailwindcss 用的炉火纯青的

WishMeLz

2021-04-30 12:22:25 +08:00

强

嘿嘿😁

CallMeReznov

2021-04-30 12:39:09 +08:00

really28

2021-04-30 12:52:32 +08:00

star 了

gps949

2021-04-30 12:57:03 +08:00

额，还以为是网页对接后端 deepin 系统实现全功能，原来指的是长得像 deep 的网页啊

Lemeng

2021-04-30 13:01:31 +08:00

6666 。star 奉上

xrr2016

2021-04-30 13:10:13 +08:00

666

akakidz

2021-04-30 13:34:46 +08:00

666666666

275761919

2021-04-30 13:36:35 +08:00

大佬的标题就是这么朴实无华：XX 天、前几天看到、迫于、随手、无聊

275761919

2021-04-30 13:39:45 +08:00

顺便也求下网页版 ubuntu 地址

zhuang0718

2021-04-30 13:41:34 +08:00

强！

yEhwG10ZJa83067x

2021-04-30 13:42:25 +08:00

啥时候可以讲一下这项目如何从设计到完成开发一系列过程

BeautifulSoap

2021-04-30 13:44:26 +08:00

提一下，firefox 下元素位置不对

hellodigua

2021-04-30 13:48:59 +08:00

牛

imilano

2021-04-30 13:51:45 +08:00

太强了

Desiree

2021-04-30 14:03:00 +08:00

牛逼...

Maxbee

2021-04-30 14:08:55 +08:00

强的可怕

silencelixing

2021-04-30 14:11:45 +08:00

66666 秀啊

duanxianze

2021-04-30 14:13:27 +08:00

太强了

leelz

2021-04-30 14:20:21 +08:00

太强了

longgediyi999

2021-04-30 14:24:07 +08:00

牛逼

leusion

2021-04-30 14:25:02 +08:00

强啊，大佬，发现个小问题，就是程序窗口缩放有点小问题，只有鼠标停留在窗口的右边框和下边框，窗口才能缩放

Vegetable

2021-04-30 14:35:41 +08:00

「不专业」

expy

2021-04-30 14:40:17 +08:00

https://copy.sh/v86/
这有个真的模拟器跑系统。

LeeReamond

2021-04-30 15:10:12 +08:00 via Android

@275761919 在我的 readme 里面有相似项目的链接

@BeautifulSoap 能 issue 一下错误的浏览器版本和错误情况吗？

LeeReamond

2021-04-30 15:13:14 +08:00 via Android

@leusion 正常缩放有四个边加四个角可拉伸，我做的时候只实现了右边，下边，和右下角，因为按这些方向调整只用调整窗口大小而不用调整窗口位置，属于一种偷懒的做法。。不过还好按照习惯这几个边的实际使用频率应该也更高一些

LeeReamond

2021-04-30 15:14:47 +08:00 via Android

@expy 这个是真大佬，之前好像见过完全用 js 的 win2000，似乎是这个当中集成的一个。我这个只是个网页而已，差的远

pigll

2021-04-30 15:16:02 +08:00

厉害膜拜

neilyoone

2021-04-30 15:23:46 +08:00

太强了

huweic

2021-04-30 15:26:59 +08:00

可以的

mozhizhu

2021-04-30 15:31:49 +08:00

@WishMeLz 应该对这个来个彩蛋，直接整个页面全黑了，红红火火恍恍惚惚

reiji

2021-04-30 15:40:41 +08:00

这行动力太佩服了，我也要加油了

paopjian

2021-04-30 15:42:28 +08:00

天哪,太强大了

Yien

2021-04-30 15:44:32 +08:00

666 大佬，昨天摸鱼的时候看见了，太强了

itning

2021-04-30 15:47:25 +08:00

牛逼

LeeReamond

2021-04-30 15:48:09 +08:00 via Android

@mozhizhu 很有趣，已添加，欢迎测试

Marszm

2021-04-30 15:52:16 +08:00

大佬大佬.....看来工作不够饱和啊

caixiaomao

2021-04-30 15:54:39 +08:00

有点厉害 😃

xxdsox

2021-04-30 16:01:30 +08:00

捉个虫，Resume 里面的 Coming Soon 打成了 Comming Soon

h1104350235

2021-04-30 16:26:11 +08:00

大佬，那个 React 写的项目，可以扔个链接么

fish267

2021-04-30 16:32:24 +08:00

太厉害了

wpyfawkes

2021-04-30 16:39:26 +08:00

大佬 666

zzlatan

2021-04-30 16:42:16 +08:00

厉害

pcmid

2021-04-30 16:47:42 +08:00

https://i.loli.net/2021/04/30/VKOw9R7Zi1YDahv.png

套娃失败哈哈哈第三层就打不开了

xshwy

2021-04-30 16:53:16 +08:00

@WishMeLz 我也 rm -rf /了一下跳黑屏了…

![ops]( https://i.loli.net/2021/04/30/oKp5D4zRyGPF8qr.png)

bigShrimp8577

2021-04-30 16:59:34 +08:00

仰望大佬，大佬都说不懂前端，我这种是不是出门都不敢说自己是做前端的了

iapplebear

2021-04-30 17:03:31 +08:00

nii

2021-04-30 17:04:06 +08:00

大佬强无敌我擦

molvqingtai

2021-04-30 17:13:50 +08:00

几天时间能整出来，是真的强

Fgoo9527

2021-04-30 17:23:31 +08:00

Ubuntu+react 的在这里 https://github.com/vivek9patel/vivek9patel.github.io

zhaofy

2021-04-30 17:40:49 +08:00

准备摸个鱼开启自己的假期，摸着摸着，感觉自己就是个弱智 = =

wl62613

2021-04-30 17:48:20 +08:00

感觉自己弱小无助..

felixwang

2021-04-30 17:48:40 +08:00

666666

yazoox

2021-04-30 18:58:46 +08:00

虽不明但觉厉！

codehz

2021-04-30 19:04:15 +08:00

窗口管理有点小逻辑问题
简单说就是在多个窗口同时激活的时候，点击不在顶层窗口的图标会无条件隐藏窗口，而不是提升到顶层（然后还会播放动画，就很尴尬）

asche910

2021-04-30 19:06:59 +08:00

太强了！！！

NoString

2021-04-30 20:29:32 +08:00

大佬过于凶悍牛逼！

LittleYangYang

2021-04-30 20:36:44 +08:00

强！

xuanli

2021-04-30 20:40:57 +08:00

star

leaves7i

2021-04-30 21:07:08 +08:00

别拦我，我还能套🐶
（不知道这个算不算 bug ）

RRRoger

2021-04-30 21:47:45 +08:00

太强了吧

supercaizehua

2021-04-30 22:06:00 +08:00

惊呆了

davidjqq19

2021-04-30 22:15:23 +08:00

大佬 666 ！

LeeReamond

2021-04-30 22:36:07 +08:00 via Android

@codehz 确实有这个问题，这个是由于按钮是否执行最小化的逻辑仅判断当前是否处于显示状态，而不是处于显示且显示于最高层。暂时不准备改了(

tojonozomi

2021-04-30 22:58:43 +08:00

nb，这是真的 nb，给跪了
lz 还是非专业前端，3 天做出来，太狠了

rekulas

2021-04-30 23:25:16 +08:00

执行力真强
不过作为一个 git 患者想吐槽下 commit msg

jokerai

2021-04-30 23:51:42 +08:00

@275761919 #35 /t/771297

charlie21

2021-04-30 23:53:30 +08:00

可以参考 ubuntu 版本的实现一个垃圾桶

Cbdy

2021-05-01 00:11:35 +08:00 via Android

顺便发个 react 的 macos
https://macos.vercel.app/

LeeReamond

2021-05-01 00:14:11 +08:00

@charlie21 考虑过实现，但是由于我观察垃圾桶功能似乎只作为彩蛋，用来表示自己曾使用又抛弃的技术栈，似乎与核心功能没有太大关系。而实现方面工作量则比较大，因为需要实现一套独立的大图标文件显示 UI，且考虑到代码复用，如果垃圾桶实现了这套 UI，那么理所当然应该整合到文件夹窗口，让文件夹变成可以切换图片大小的模式，整个工作量又变得太大。简单来说躺平等 PR 了