search

OI-wiki / feedback-sys

OI Wiki 划词评论反馈系统
Apache License 2.0
2 stars 2 forks source link

Add frontend #16

Closed shaokeyibb closed 1 month ago

shaokeyibb commented 1 month ago

Add frontend project, use yarn dev for test (Vite will proxy local cloudflare-worker server to /api path).

Usage: Import review.js as ES Module, then call setupReview with options.

Other changes:

Enter-tainer commented 1 month ago

抱歉最近比较忙没有review，我今天看一下

Enter-tainer commented 1 month ago

本地玩了一下新版 感觉挺好的。看到一些小问题：

  1. XSS 攻击。建议把 html sanitize 一遍
  2. 图标包体积比较大，如果我们用的图标不是特别多的话，可以考虑直接inline。比如这种 https://www.npmjs.com/package/@material-icons/svg?activeTab=readme 。可以直接 import 一个 svg 进来。如果不含图标。现在的包大小是这样的，感觉还挺不错的：
dist/review.js  11.22 kB │ gzip: 3.29 kB
Enter-tainer commented 1 month ago

image

一个小问题，我发现有时候点这个按钮会没有用。排查了一下发现是这个按钮的点击区太小了，只有图标是可以点的。这里还有个hover弹出的动画，就会容易点不到。maybe可以考虑优化一下

shaokeyibb commented 1 month ago

image

一个小问题，我发现有时候点这个按钮会没有用。排查了一下发现是这个按钮的点击区太小了，只有图标是可以点的。这里还有个hover弹出的动画，就会容易点不到。maybe可以考虑优化一下

不太好改，因为这里是一个通用的组件，只有按钮那块能响应事件... 其实我也注意到这个问题了，所以我专门把这个 hover 动画的幅度改小了些。个人感觉问题不大，实在不行就把 hover 给删了，我是觉得好看才加的（

Enter-tainer commented 1 month ago

我们先把hover动画删了吧~

shaokeyibb commented 1 month ago

找了一圈没找到比较合适的包，索性直接手动 inline 了，这是前后的包体积对比： iconify-icon： image inline icon： image

CoelacanthusHex commented 1 month ago

是否可以考虑 U+1F5E8 或者 U+1F4AC？

shaokeyibb commented 1 month ago

是否可以考虑 U+1F5E8？

那这个得考虑到不同设备（字体）的展示效果问题了，个人不建议

Enter-tainer commented 1 month ago

14k变4k了，挺好的 👍