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

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

  LeeReamond · 221 天前 · 10225 次点击
这是一个创建于 221 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

116 条回复    2021-05-24 19:53:54 +08:00
1  2  
Richard14
    1
Richard14  
   221 天前
666 大佬,昨天摸鱼的时候看见了,太强了
whcoding
    2
whcoding  
   221 天前
厉害 ~
LeeReamond
    3
LeeReamond  
OP
   221 天前 via Android
@Richard14
@whcoding 谢谢谢谢,做了点微小的工作
muzihuaner
    4
muzihuaner  
   221 天前 via Android
666 牛批
iMusic
    5
iMusic  
   221 天前
3 天做出来有点牛逼啊,我专业前端 3 周都不一定做出来,哈哈
hm20062006ok
    6
hm20062006ok  
   221 天前
厉害
LeeReamond
    7
LeeReamond  
OP
   221 天前 via Android
@iMusic 主要太忙了,看代码的话会发现赶工痕迹特别明显。里面比如页面按顺序堆叠这种需求,需要从中间提出来一个放到顶部,正常比如应该用 b 树,实际上实现的时候全是遍历,一边写一边自己都蛋疼,不过确实没时间做
Muniesa
    8
Muniesa  
   221 天前
太强了
christin
    9
christin  
   221 天前 via iPhone
卧槽 大佬
竟然还是非前端的 厉害厉害
jerry033
    10
jerry033  
   221 天前
五体投地,叹为观止!
kidult
    11
kidult  
   221 天前
大佬,要说三天用 VUE 能写出来,而不会 react,我是不太信的
x86
    12
x86  
   221 天前   ❤️ 18
大佬的标题就是这么朴实无华:XX 天、前几天看到、迫于、随手、无聊
PinkRabbit
    13
PinkRabbit  
   221 天前
只能说牛逼
LeeReamond
    14
LeeReamond  
OP
   221 天前 via Android
@LIvid 不好意思好像错区了,第一次发个人项目,刚才看了一下好像应该发在分享创造区,我以为分享发现跟这个是同一个。现在还有办法修改吗
shuxhan
    15
shuxhan  
   221 天前
太强了吧
LeeReamond
    16
LeeReamond  
OP
   221 天前 via Android
@kidult 确实不会用 react,似乎 react 逻辑与 vue 不太一样,vue 的数据流动更经过一些,所以方便像我这种非专业前端,哪怕写成面条逻辑,能跑就行了。不过做过这次项目以后,倒是对 vue 的设计哲学也有了同感,模型设计满足 99%的使用场景就行了,自动化监控降低程序员的心智负担,在大多数项目中是值得的
PerFectTime
    17
PerFectTime  
   221 天前
大佬的标题就是这么朴实无华:XX 天、前几天看到、迫于、随手、无聊
hflyf123
    18
hflyf123  
   221 天前
不卡,很溜
695975931
    19
695975931  
   221 天前
牛逼啊!!!
Livid
    20
Livid  
MOD
   221 天前   ❤️ 1
@LeeReamond 嗯,感谢你选择这里发布你的作品。

已经移动到 /go/create
kidult
    21
kidult  
   221 天前
@LeeReamond #16 哈哈,同感,后端学前端表示 react 玩不转,vue 写 admin 后台和小程序一把梭
yl20181003
    22
yl20181003  
   221 天前
tql 🙀
devtiange
    23
devtiange  
   221 天前
太强了吧
FreeEx
    24
FreeEx  
   221 天前
非常厉害
NeoChen
    25
NeoChen  
   221 天前
牛逼了
waltcow
    26
waltcow  
   221 天前
tailwindcss 用的炉火纯青的
WishMeLz
    27
WishMeLz  
   221 天前



嘿嘿😁

CallMeReznov
    28
CallMeReznov  
   221 天前
really28
    29
really28  
   221 天前
star 了
gps949
    30
gps949  
   221 天前
额,还以为是网页对接后端 deepin 系统实现全功能,原来指的是长得像 deep 的网页啊
Lemeng
    31
Lemeng  
   221 天前
6666 。star 奉上
xrr2016
    32
xrr2016  
   221 天前
666
akakidz
    33
akakidz  
   221 天前
666666666
275761919
    34
275761919  
   221 天前
大佬的标题就是这么朴实无华:XX 天、前几天看到、迫于、随手、无聊
275761919
    35
275761919  
   221 天前
顺便也求下网页版 ubuntu 地址
zhuang0718
    36
zhuang0718  
   221 天前
强 !
justrand
    37
justrand  
   221 天前
啥时候可以讲一下这项目如何从设计到完成开发一系列过程
BeautifulSoap
    38
BeautifulSoap  
   221 天前
提一下,firefox 下元素位置不对
hellodigua
    39
hellodigua  
   221 天前
imilano
    40
imilano  
   221 天前
太强了
Desiree
    41
Desiree  
   221 天前
牛逼...
Maxbee
    42
Maxbee  
   221 天前
强的可怕
silencelixing
    43
silencelixing  
   221 天前
66666 秀啊
duanxianze
    44
duanxianze  
   221 天前
太强了
leelz
    45
leelz  
   221 天前
太强了
longgediyi999
    46
longgediyi999  
   221 天前
牛逼
leusion
    47
leusion  
   221 天前
强啊,大佬,发现个小问题,就是程序窗口缩放有点小问题,只有鼠标停留在窗口的右边框和下边框,窗口才能缩放
Vegetable
    48
Vegetable  
   221 天前
「不专业」
expy
    49
expy  
   221 天前   ❤️ 4
https://copy.sh/v86/
这有个真的模拟器跑系统。
LeeReamond
    50
LeeReamond  
OP
   221 天前 via Android
@275761919 在我的 readme 里面有相似项目的链接


@BeautifulSoap 能 issue 一下错误的浏览器版本和错误情况吗?
LeeReamond
    51
LeeReamond  
OP
   221 天前 via Android
@leusion 正常缩放有四个边加四个角可拉伸,我做的时候只实现了右边,下边,和右下角,因为按这些方向调整只用调整窗口大小而不用调整窗口位置,属于一种偷懒的做法。。不过还好按照习惯这几个边的实际使用频率应该也更高一些
LeeReamond
    52
LeeReamond  
OP
   221 天前 via Android
@expy 这个是真大佬,之前好像见过完全用 js 的 win2000,似乎是这个当中集成的一个。我这个只是个网页而已,差的远
pigll
    53
pigll  
   221 天前
厉害 膜拜
neilyoone
    54
neilyoone  
   221 天前
太强了
huweic
    55
huweic  
   221 天前
可以的
mozhizhu
    56
mozhizhu  
   221 天前   ❤️ 1
@WishMeLz 应该对这个来个彩蛋,直接整个页面全黑了,红红火火恍恍惚惚
reiji
    57
reiji  
   221 天前
这行动力太佩服了,我也要加油了
paopjian
    58
paopjian  
   221 天前
天哪,太强大了
Yien
    59
Yien  
   221 天前
666 大佬,昨天摸鱼的时候看见了,太强了
itning
    60
itning  
   221 天前
牛逼
LeeReamond
    61
LeeReamond  
OP
   221 天前 via Android
@mozhizhu 很有趣,已添加,欢迎测试
Marszm
    62
Marszm  
   221 天前
大佬大佬.....看来工作不够饱和啊
caixiaomao
    63
caixiaomao  
   221 天前
有点厉害 😃
xxdsox
    64
xxdsox  
   221 天前   ❤️ 1
捉个虫,Resume 里面的 Coming Soon 打成了 Comming Soon
h1104350235
    65
h1104350235  
   221 天前
大佬,那个 React 写的项目,可以扔个链接么
fish267
    66
fish267  
   221 天前
太厉害了
wpyfawkes
    67
wpyfawkes  
   221 天前
大佬 666
zzlatan
    68
zzlatan  
   221 天前
厉害
pcmid
    69
pcmid  
   221 天前
https://i.loli.net/2021/04/30/VKOw9R7Zi1YDahv.png

套娃失败 哈哈哈 第三层就打不开了
xshwy
    70
xshwy  
   221 天前
@WishMeLz 我也 rm -rf /了一下 跳黑屏了…

![ops]( https://i.loli.net/2021/04/30/oKp5D4zRyGPF8qr.png)
bigShrimp8577
    71
bigShrimp8577  
   221 天前
仰望大佬,大佬都说不懂前端,我这种是不是出门都不敢说自己是做前端的了
iapplebear
    72
iapplebear  
   221 天前
nb
nii
    73
nii  
   221 天前
大佬强无敌我擦
molvqingtai
    74
molvqingtai  
   221 天前
几天时间能整出来,是真的强
Fgoo9527
    75
Fgoo9527  
   221 天前
zhaofy
    76
zhaofy  
   221 天前
准备摸个鱼开启自己的假期,摸着摸着,感觉自己就是个弱智 = =
wl62613
    77
wl62613  
   221 天前
感觉自己弱小无助..
felixwang
    78
felixwang  
   221 天前
666666
yazoox
    79
yazoox  
   221 天前
虽不明但觉厉!
codehz
    80
codehz  
   221 天前
窗口管理有点小逻辑问题
简单说就是在多个窗口同时激活的时候,点击不在顶层窗口的图标会无条件隐藏窗口,而不是提升到顶层(然后还会播放动画,就很尴尬)
asche910
    81
asche910  
   221 天前
太强了!!!
NoString
    82
NoString  
   221 天前
大佬过于凶悍 牛逼!
LittleYangYang
    83
LittleYangYang  
   221 天前
强!
xuanli
    84
xuanli  
   221 天前
star
leaves7i
    85
leaves7i  
   221 天前   ❤️ 1
别拦我,我还能套🐶
(不知道这个算不算 bug )
RRRoger
    86
RRRoger  
   221 天前
太强了吧
supercaizehua
    87
supercaizehua  
   221 天前
惊呆了
davidjqq19
    88
davidjqq19  
   221 天前
大佬 666 !
LeeReamond
    89
LeeReamond  
OP
   221 天前 via Android
@codehz 确实有这个问题,这个是由于按钮是否执行最小化的逻辑仅判断当前是否处于显示状态,而不是处于显示且显示于最高层。暂时不准备改了(
tojonozomi
    90
tojonozomi  
   221 天前
nb,这是真的 nb,给跪了
lz 还是非专业前端,3 天做出来,太狠了
rekulas
    91
rekulas  
   221 天前
执行力真强
不过作为一个 git 患者 想吐槽下 commit msg
jokerai
    92
jokerai  
   221 天前   ❤️ 1
charlie21
    93
charlie21  
   221 天前
可以参考 ubuntu 版本的实现一个垃圾桶
Cbdy
    94
Cbdy  
   221 天前 via Android
顺便发个 react 的 macos
https://macos.vercel.app/
LeeReamond
    95
LeeReamond  
OP
   221 天前
@charlie21 考虑过实现,但是由于我观察垃圾桶功能似乎只作为彩蛋,用来表示自己曾使用又抛弃的技术栈,似乎与核心功能没有太大关系。而实现方面工作量则比较大,因为需要实现一套独立的大图标文件显示 UI,且考虑到代码复用,如果垃圾桶实现了这套 UI,那么理所当然应该整合到文件夹窗口,让文件夹变成可以切换图片大小的模式,整个工作量又变得太大。简单来说躺平等 PR 了
yangheng4922
    96
yangheng4922  
   220 天前
牛逼啊 3 天搞定 还是非前端 开发的 作为前端的我都有点惭愧了
wuqinghaha
    97
wuqinghaha  
   220 天前
牛啊
fhy1994
    98
fhy1994  
   220 天前
太厉害了
titivillage
    99
titivillage  
   220 天前
太好看了,搞得我都想尝试一下 deepin
LearningToCode
    100
LearningToCode  
   220 天前
NB 我直接进行一个 star 和 frok 的点
1  2  
关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2096 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 24ms · UTC 00:35 · PVG 08:35 · LAX 16:35 · JFK 19:35
♥ Do have faith in what you're doing.