鲲 Galgame 论坛正在进行第六次大重构

该话题被推 论坛相关前端
678 编辑于
鲲

9307

背景

其实论坛主体已经在上次停机维护之后全部更新完了,带给大家的主要是一个补丁站和论坛账号统一的功能

后端的大重构大家一般感知不到,今天我们来说一下前端的重构

KunUI 组件库

鲲 Galgame 全系列网站基本上都使用了 KunUI(鲲 Galgame 的自研 UI 组件库)

GitHub: https://github.com/kungal/kun-ui (补药忘了给窝 star 一下)

npmjs: https://www.npmjs.com/settings/kungal/packages

KunUI 官网: https://ui.kungal.com

鲲-1782285412983-taskmq3e2lqm4zgpcwebpKunUI 的各种组件完全是成熟的 UI 组件库水平,因为这是 鲲 Galgame 论坛 打磨了三年的组件,这次只是把它整个封装为了组件库

KunUI 封装了大量常用组件库,非常清亮,拥有极致的 SSR 体验,这里不多说了,反正很牛逼,看 鲲 Galgame 论坛 不断迭代了三年也知道这个 UI 组件库很厉害

缺点是目前只支持 Vue / Nuxt,等我彻底把所有网站都重构完了再支持其他框架例如 React / Svelte / Solid(这些在计划中)

有朋友写网站的也可以试试 KunUI,有详细的文档以及 鲲 Galgame 补丁 和 鲲 Galgame 论坛 这两个鲜活的例子

布局

布局上,侧边栏改成现在的新样式了,看着应该没有那么拥挤了

顶栏稍微改了一点,理论上体验应该是比原来好一些的

去除了很多页面外侧包的一层 KunCard,我感觉这个没什么用

主页

主页改成 feed 流了,抄了一下 X 和贴吧的设计,如果大家有不想看到的 feed 信息,可以在设置面板里面进行调整

具体细节我之后再更新,现在忙着把整个前端重构完毕

话题

话题页面支持 Reaction 了,你可以给话题点 Reaction,点了之后除了点赞,话题发布人收不到你的 Reaction,单纯就是好玩

这些表情来自于 Telegram,如果大家想要更多表情可以回复一下

用法就是,你看见那萝莉控,便电⚡,那萝莉控伶俐的很

Sticker

话题的回复样式在手机端改为始终在下面了,我观察了一下贴吧这些 App,现代社区的手机端交互好像就是这么写的,于是就都照着这些大厂的稍微改了一下,这个交互本质上是新版 Telegram 的仿写

关于推话题,推话题的时候你可以附加一句话了,比如

image.png

尾声

我才刚刚把主页重构了 50%,整体网站前端重构进度可能还不到 10%,大家期待变化就好

本文版权遵循 CC BY-NC 协议 本站版权政策

13 条回复

银发教主
发布于

这……变化有点太大了,我还以为走错网站了。

感觉之前的页面布局已经习惯了,突然变化太大有点难以适应,主页看上去有点像V2,没论坛内味了。

评论

鲲
评论银发教主

omg 居然是这样,有什么好的建议吗,窝改一改 新的 UI 初次上线确实会很不适应,以后会尽量减少改动 我看你原来的银发教会图片太多,话题页面很难重新编辑,我在重构编辑和话题页面的时候也在想怎么解决这个问题

(编辑于 )
银发教主
银发教主评论

感觉首页乱乱的,主题,回复,资源全都挤在一起了,看起来很混乱,而且内容过于集中在中间了,导致页面中心部分信息密度爆炸,而两侧空间的信息利用度却很低。 之前旧的页面之所以感觉不乱,恰恰是因为两侧对于信息空间的利用比较到位,让信息没有过于集中在中间,导致中间页面的信息密度过于集中了。 另外首页左侧有一个侧边栏,最左侧还有一个侧边栏,这样就有两个侧边栏了,会导致一眼看过去时,不知道该用哪一个,最好是只保留一个侧边栏,同时最左侧侧边栏,有点过于靠左了,导致看上去像是“折叠”在左侧屏幕的侧边栏一样,但点上去才发现是不能展开的。

鲲
评论银发教主

非常感谢指出!我这就处理一下!

银发教主
银发教主评论

而且不知道是不是有bug,我首页点评论进来看不到最新回复,要手动刷新一遍才能看到。 说起来我图鉴楼的确是挺多的,我编辑起来都觉得很麻烦,只能小心翼翼的,那个MD代码特别难用,一般我都是复制到笔记本里改完再粘贴回去~

Mary
Mary评论

还有话题页-全部话题 也是所有的文字信息都集中在了左半边,右半边感觉空空的 另外话题-galgame类、话题-技术交流类、话题-其他类 都只显示一部分的话题,是因为这些话题都是最近有人回复的吗

鲲
评论银发教主

是 bug,我这就修复!! 接下来我就要重构编辑器了,重构完之后再试试吧!

鲲
评论Mary

集中在半边这个我似乎暂时想不到什么好的解决方案,你有什么想法吗 这个都只显示一部分的话题是什么情况,窝好像没有理解意思

银发教主
银发教主评论

主页的话我感觉没必要展示评论,毕竟评论这东西人多了,或者哪里吵起来很容易出现大量回复刷屏,主页中心处就主要展示最新主题就好了(包括新发的和被顶上来的)跟以前差不多。 左侧是论坛导航部分,论坛分区(版块?)指引和标识应该更明确一点,现在的小侧边栏太小了。右侧的TIPS什么的都集中到左侧,让每一个区域都有固定的功能区域,左侧就是用来展示论坛导航信息的,中间就是用来展示主题信息的。至于空出来的右侧,可以把最新资源(就类似以前主页的靠近底部的图片展示的那种),现在做成竖状在右侧展示部分即可,并提供“展示更多”按钮或者链接,引导进入资源或者Gal分区,差不多就是等于把以前的底部资源图展示移动到右侧了,毕竟按网站现在这个页面布局,再像以前一样加个底部展示感觉不太现实。

鲲
评论银发教主

emmm,这个我需要考虑一下,如果之后我发现评论的发布和我预想的有差异,会把评论展示默认从主页移除 布局的话,我打算暂时维持这个样子,其实现在的也页面都还没有重构好,我打算在上面在加点东西,到时候可能又变奇怪了呜呜呜呜呜呜

Mary
Mary评论

显示一部分的意思是:我搞错啦,对不起! 我也没什么想法呢,关于右半边

(编辑于 )
朝昔予
发布于

朝昔予-1782287510327-SnowShot20260624155112png资源区的显示有问题

评论

鲲
评论朝昔予

有什么改进建议吗

朝昔予
朝昔予评论

嗷我看错了,显示是没问题的,是不同的网盘。这个UI我觉得还行

听到过万水千山的感觉
发布于 (编辑于 )

改无限信息流的排版吗,我只能说不如原来的,你这我得够找资源

本来gal的排版就不适合信息流,还硬要改成这样,翻页是犯法了吗?

评论

鲲

原来的资源页面不是还在吗,资源列表什么的也都在,只有主页改了一下,原来那个主页太重了加载很慢

听到过万水千山的感觉
听到过万水千山的感觉评论

你这还慢一些,我找条信息还得半天找,显示的速度还没有原来快,首页话题全变成按最新回复显示,那鬼知道哪个话题是我所需要的

鲲

你看看这两个页面,你从侧边栏直接就能进去 话题: https://www.kungal.com/topic Galgame: https://www.kungal.com/galgame

鲲

还有一种解决方案,打开设置面板,你可以把全部这一项,只打开你想要看到的内容,这样就回归原来的状态了

听到过万水千山的感觉
听到过万水千山的感觉评论

我要你个排行干什么?你想学贴吧,搞个最热我还能忍,搞个排行干什么,比什么赛? 我很少逛主站,一般都是补丁站为主,一般情况下,我就看首页就能知道有什么信息,你现在倒好,改成了无限流,还得够翻

鲲

排行是什么,排行榜吗,这个不是一直有

听到过万水千山的感觉
听到过万水千山的感觉评论

话题排行 这个,我不知道以前有没有,我很少看,但现在倒好直接看不到最新了,发个帖如果被刷下去还得一条条翻,那我不如直接去专门的论坛 X和贴吧是本质上是资讯流,所以改成无限没有问题 你Galgame要改什么,有什么资讯值得无限的?有什么值得排行的, 你干脆学抖音得了,首页全放短视频,到时候就是你完蛋之日了

(编辑于 )
鲲

很抱歉给你造成困扰了,但是你可能误解了我的意思 https://www.kungal.com/topic 这个页面是话题列表,和原来的主页展示的话题顺序一模一样的,都是按照最后一次回复进行排序的,上面的就是最新被回复的话题 你说的排行榜可能是 https://www.kungal.com/ranking/topic ,这个页面一直有,我自己也从来不用 还有我上面说的主页的信息流可以更改,指的是你可以在设置面板调整 全部 这个导航栏里面你可以看到的所有信息种类,调成 话题 和 Galgame 就可以原来的主页完全等价了

听到过万水千山的感觉
听到过万水千山的感觉评论

我说了半天,我不要信息流这个方式,你又不是资讯平台,你顶多只是一个收集站 还有你话题列表是还有,但右边这么空,也是无限流,有什么必要?

(编辑于 )
鲲

?你在说什么,资源站是补丁站,论坛是社区

听到过万水千山的感觉
听到过万水千山的感觉评论

那社区跟资讯是一个意思吗?你把话题当资讯一样展示,那是为了什么?

鲲

你的意思是,话题就应该密集展示,只显示标题和以前一样

听到过万水千山的感觉
听到过万水千山的感觉评论

我说的是话题的展现方式吗,我说的是整个页面的浏览方式,你哪怕看看真红站的展现方式呢,我知道底层架构不同,但最基本的版块展现逻辑是一致的吧 你哪怕带评论展示,变成卡片翻页的形式都行,变成个无限流是什么鬼

鲲

那都不是一个设定,shinnku 是资源站,鲲 Galgame 论坛是论坛,根本就不是资源站,还有 shinnku 的代码一部分也是我写的 你说的那种都是上世纪的网站了,现代网站哪有这么设计的,而且现在的论坛只有主页是 feed 流啊,你甚至可以自定义 feed 流里面显示哪些种类的信息,你理解这有多先进吗

听到过万水千山的感觉
听到过万水千山的感觉评论

我要你个多先进干什么,我要的是简易易理解方便好用,你要先进改成短视频得了,也别建立论坛了,直接短视频推送得了 或者你干脆直接Agent整个架构,连人都不需要自动管理,点首页输入提示词帮你自动评论下载得了

(编辑于 )
鲲

以前的主页太重了,加载很慢,肯定是改不回去了,而且我五十多次提交,写都写了撤销了太浪费了 很抱歉给你带来不好的体验了,解决方案我已经在上面告诉你了,你可以在设置面板调整一下主页可以获取到的信息流,后面我看看能不能出个功能让用户可以自定义主页,对不起这都是我的问题 你上面的建议,我反省了一下,之后我会把 https://www.kungal.com/topic 这个页面改成分页器,不再使用无限滚动 那个排行榜页面去年早就有了,不是更新之后加的

听到过万水千山的感觉
听到过万水千山的感觉评论

不需要了,你既然旨意这样搞那我也没有办法,主站我不会再用了,补丁站你再改我就退

鲲

很抱歉给你带来困扰了,因为改 UI 一般只是我自己的审美,很难让用户适应,这次给你带来不好的体验实在是对不起 但是你可以放心,我认为补丁站,它作为一个资源站,现在基本上就是最完美的姿态了,不会改成 feed 流

end1949
end1949评论

我很喜欢!

诺亚
诺亚评论

鲲我建议你给长评论加个折叠功能,每次点开这个贴子下滑看评论都要看到你们吵架😭

鲲
评论诺亚

实在是对不起,我这就加一个折叠功能

常棣

鲲站又不收你钱,为什么态度这么差,你不发补丁的话,退了鲲站并不会失去什么,鲲补丁站的翻译补丁相当之全(很多还是首发),不用的话好多翻译补丁都找不到

紫雨
发布于

补丁站能否改回之前在这个界面显示图片?我全靠图片看画风感兴趣玩一玩,改成这样得手动一个个点进去看图片太麻烦了。

image.png

RiceDog
发布于

没那味了啊,让ai改回来吧

评论

鲲
评论RiceDog

嗯,非常对不起,只有适应一段时间了,这段时间还请多多包容 后面我还有很多前端方面的更改,希望你能喜欢,如果有问题随时在这里说,我会尽量改正

鲲

9307

#6
发布于

@紫雨 #4 这个似乎是你电脑网络没有加载出来图片

image.png

诺亚
发布于

首页变化实在是太大了

评论

诺亚
诺亚评论诺亚

表情reaction挺好玩,就是卡卡的,希望话题列表还能再优化下

鲲
评论诺亚

点出 reaction 的菜单很卡吗,那应该是网络正在加载,加载完一次应该就不卡了

FLu12s
发布于

想要大bannerSticker

评论

鲲
评论FLu12s

你具体指的是什么大 banner

dailiwen
发布于

kun的界面本来已经很好看了,这次变得更好看了Sticker

突然发现https://www.hikarinagi.org/ ,好像也换成差不多的界面Sticker

评论

鲲
评论dailiwen

那是自然,窝们之间都是有联系的,yuki 大人的搜索页面必须抄一点过来

Nyakori
发布于

后端的错误包没有返回原始堆栈信息,这样万一哪里出错了找起来挺费劲的🤔

评论

鲲
评论Nyakori

之后慢慢优化了,现在得抓紧时间重构

hal
发布于

我觉得主页可以搞个设置 可以切换最新主题和最新评论

kun的意思应该是 主页像水群一样,可以快速浏览评论,但是有些时候确实不方便看话题。不过只是想刷刷论坛的话也挺好的😀

评论

鲲
评论hal

emmm,我明白了,明天我就改一个

Ashiroid
发布于

那个,可以提供折叠吗?(类似于Outlook的邮件列表显示方式)话题页的标题间距太大了有点不习惯

就是说,现在一个话题在话题页有四行信息,可不可以提供一个选项,把这些信息折叠成两行,方便浏览。因为据本人所认知,多数时间浏览话题只会关注于标题和标签,倘如把用户名和其他话题信息同时移到左侧,夹在标题与标题中间,则会降低有效信息密度,增加浏览难度

此外,现在的左侧页面栏折叠在我看来算是一个很好的设计,现在由于标题长度相较于页面宽度而言不是很长,或许可以考虑塞一个可折叠的窗口放一些其他功能?


最后,请论坛的各位记得以后多⚡️萝莉控

评论

Ashiroid
Ashiroid评论Ashiroid

(以下内容属于私人感想,和论坛布局本身没有太大关联) 刚点进来后的确很吃惊,第一反应是确认网址,第二反应是刷新😄 不过在了解了新的布局之后其实觉得还可以,没那么难用,(因为本身布局就简单易懂)倒不如说在分类上更简洁明确了些 而且原版右侧的动态时间线也被单独的拉了出来,可能是由于我屏幕分辨率的原因,原来的组件宽度没适配好,导致可以左右滑动(进度条都显示出来了,而且如果不小心划到右侧左边的第一列字就显示不出来),虽然不影响使用,但是影响心情。现在看来,反倒有些空了 总而言之,此次重构确有详实的可取之处 不过嘛,可能对于不熟悉论坛的新用户而言,如果点进来就是一堆凌乱的时间线的话,可能无从下手。对于一个宗旨是开源开放的论坛而言,可能还是需要些额外引导?

朝昔予
发布于

还有个建议,就是在首页这块既然显示评论了,是否能加一个按钮或者其他,能直接跳转到目标评论,有时不是回复,是在外边看楼中楼回复只显示了一半,剩下的要到话题里边才能看到。现在只能点主话题然后自己往下翻朝昔予-1782336201683-SnowShot20260625052246png

(。>︿<。) 已经一滴回复都不剩了哦~