server icon indicating copy to clipboard operation
server copied to clipboard
verified publisher icon bangumi

[Feature Request]: 支持超合金组件

Open XDcedar opened this issue 3 years ago • 22 comments

虽然现在基本不可能考虑这个问题，但姑且发个 Issue。

你想添加的新功能

复刻超合金组件。做成类似主站现有的超合金组件就好。 但要是 CSS 能类似 Stylus 一样支持 @-moz-document 关键词以及类似 Tampermonkey 一样提供一些内置命令比如 GM_addstyle 的话就更好了。

你希望的解决方案

俺也不知道有什么解决方案，也许已经做出了超合金组件的 Sai 老板知道？

其他可能的替代方案

Tampermonkey 可以替代。但是有两个问题： 一是 Tampermonkey 无法跨浏览器共享用户数据，你在PC上使用的插件没法在手机浏览器上启用。 二是与账号无关，登出后仍然会生效。（尽管这样做也有好处。）

其他相关信息

希望新站点能让 DOM 解析更简洁！现在构建页面会通过 CSS Modules 处理，导致类名不再固定，这对经常需要解析页面元素的超合金组件实在是不友好。举例：group 页面 中几乎所有元素都有了小尾巴。如果能想办法规避就好了。比如手动加上简单的类名（不考虑重名毕竟CSS不通过它渲染）或 ID，或者能提供前端 API 用于获取页面元素，之类的？

（补充说明：小尾巴指尾部会有一个 hash 值，比如 _title_gvkfu_51 中的 _gvkfu_51）

XDcedar avatar Dec 22 '22 02:12 XDcedar

moz-document 不是浏览器支持的功能，不太可能支持这个。

之前考虑过把超合金组件的更新和审核放到github上面来，通过PR就可以直接提交新版本。这样社区可以审核，更新频率可以高一点。

trim21 avatar Dec 22 '22 07:12 trim21

至于共享数据的问题，后面倒是可以提供个API

trim21 avatar Dec 22 '22 07:12 trim21

moz-document 不是浏览器支持的功能，不太可能支持这个。

其实我的意思是能有类似的功能，目的是让不同的页面能自动加载不同的 CSS，不一定要用 moz-document b38。不过这个不太重要，现在没有这功能，组件也能正常运行。

之前考虑过把超合金组件的更新和审核放到github上面来，通过PR就可以直接提交新版本。这样社区可以审核，更新频率可以高一点。

这样也行吧，只要使用时不会依赖 Tampermonkey 之类的外部扩展就行..而且现在bgm可以统计启用人数和排序，这个在 github 上应该做不到，所以主站还是需要一个界面用于启用和展示..

至于共享数据的问题，后面倒是可以提供个API

这是数据能保存在服务器上的意思么？这个好诶

XDcedar avatar Dec 22 '22 07:12 XDcedar

另外那个 CSS Modules 是不是很难解决了？只能拖着小尾巴了么

XDcedar avatar Dec 22 '22 07:12 XDcedar

另外那个 CSS Modules 是不是很难解决了？只能拖着小尾巴了么

是

trim21 avatar Dec 22 '22 07:12 trim21

另外那个 CSS Modules 是不是很难解决了？只能拖着小尾巴了么

其实也未必，我也不知道有没有办法解决

trim21 avatar Dec 22 '22 07:12 trim21

这样也行吧，只要使用时不会依赖 Tampermonkey 之类的外部扩展就行..而且现在bgm可以统计启用人数和排序，这个在 github 上应该做不到，所以主站还是需要一个界面用于启用和展示..

只是把审核之类的放到github上来

trim21 avatar Dec 22 '22 07:12 trim21

其实也未必，我也不知道有没有办法解决

~~我感觉如果要用 CSS Modules 的话那应该是很难了..这毕竟是它的核心特性 😢 我只能说，好歹前缀有意义，不像 reddit 完全是乱码..~~ 好像可以！参考下方评论

XDcedar avatar Dec 22 '22 07:12 XDcedar

小尾巴 是指作者栏的省略号吗，这样做是为了避免在切换页数的时候整个表格发生 Layout Shift。其实应该给这些元素加上 title 属性，这样鼠标移上去的时候就能看到完整信息，~~但我忘了~~。 至于你说的 超合金组件，我的理解其实就是不同用户需要注入不同 js 和 css 的问题。这个在以后做了 SSR 后是水到渠成的问题，和 CSS Modules 无关（想了想，可能不需要 SSR 也许也可以做🤔

FoundTheWOUT avatar Dec 23 '22 01:12 FoundTheWOUT

小尾巴 是指作者栏的省略号吗，这样做是为了保证整个页面不要 Layout Shift。其实应该给这些元素加上 title 属性，这样鼠标移上去的时候就能看到完整信息，~但我忘了~。 至于你说的 超合金组件，我的理解其实就是不同用户需要注入不同 js 和 css 的问题。这个在以后做了 SSR 后是水到渠成的问题，和 CSS Modules 无关。

是这个 image

会导致外部用户没法写基于类名的css选择器

trim21 avatar Dec 23 '22 01:12 trim21

是这个 image

~~意思是这样的类名对获取不友好吗🤔~~ 懂了

FoundTheWOUT avatar Dec 23 '22 01:12 FoundTheWOUT

是这个 image

意思是这样的类名对获取不友好吗🤔

会导致外部用户没法写基于类名的css选择器

而且是不是每次编译都会重新生成？

trim21 avatar Dec 23 '22 01:12 trim21

而且是不是每次编译都会重新生成？

这个不太清楚

FoundTheWOUT avatar Dec 23 '22 01:12 FoundTheWOUT

CSS Modules 的问题应该改下 vite 的配置就好了。倒是有个问题，按现在这样做的话，以前的超合金组件是不是都要废弃了，有没有必要考虑和之前的组件的兼容问题 @trim21

FoundTheWOUT avatar Dec 23 '22 01:12 FoundTheWOUT

会导致外部用户没法写基于类名的css选择器

也不是完全没法写，如果前缀不变的话是能写的，但是写起来很麻烦。以前是 .infobox，现在是[class*="infobox"]。这种写法也有点影响执行效率。

XDcedar avatar Dec 23 '22 01:12 XDcedar

有没有必要考虑和之前的组件的兼容问题

没有

trim21 avatar Dec 23 '22 01:12 trim21

有没有必要考虑和之前的组件的兼容问题

没有

有限的精力还是用在开发新网页上比较好（

而且现在开源之后也能PR了。

trim21 avatar Dec 23 '22 01:12 trim21

以前的超合金组件是不是都要废弃了，有没有必要考虑和之前的组件的兼容问题

这个我之前在 Slack 上问过了。布局变了之后超合金组件肯定是没法兼容的。但只要类名能固定的话，大部分组件跟进一下就能继续用了，不是大问题。

XDcedar avatar Dec 23 '22 01:12 XDcedar

CSS Modules 的问题应该改下 vite 的配置就好了。

@FoundTheWOUT 这个怎么配置？我搜了一圈没看到怎么写能去掉 hash

XDcedar avatar Dec 23 '22 01:12 XDcedar

https://github.com/madyankin/postcss-modules#generating-scoped-names

FoundTheWOUT avatar Dec 23 '22 01:12 FoundTheWOUT

@FoundTheWOUT 原来如此..但是去掉 hash 的话，怎么保证类名不冲突？还是说，能添加两个类？

XDcedar avatar Dec 23 '22 03:12 XDcedar

@FoundTheWOUT 原来如此..但是去掉 hash 的话，怎么保证类名不冲突？还是说，能添加两个类？

要从几个方面进行考虑

  1. 区分网站样式与 design 包样式，比如加个前缀 _website_
  2. website 包下的组件样式可以直接取组件名作为 suffix
  3. 而页面样式比如 index.module.less 或者 style.module.less 可以从路径入手，也可以按照某种约定（比如路由地址）修改现有样式名，再直接用该名作为 suffix。

你可以去前端那里提个 PR 让大家来讨论讨论，我最近不是很有空~

FoundTheWOUT avatar Dec 23 '22 03:12 FoundTheWOUT