Feature/improve danmaku title list display style#247
Feature/improve danmaku title list display style#247Troray wants to merge 4 commits intomtvpls:mainfrom
Conversation
同时增强了分组标签区域的操作方式，支持滚轮横向浏览和鼠标拖动浏览，便于在大量分组下快速切换。 为`episode`按钮新增了`tooltip`提示，用于展示完整剧集标题，方便在网格模式下快速查看被缩略的内容。
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements horizontal scrolling via mouse drag and wheel events for episode categories and adds tooltips in DanmakuPanel.tsx and EpisodeSelector.tsx. The review feedback suggests adding boundary detection for tooltips to prevent clipping, resolving style conflicts regarding text wrapping, extracting the duplicated scrolling logic into a reusable hook, and ensuring UI consistency for scrollbar visibility.
| const containerRect = container.getBoundingClientRect(); | ||
|
|
||
| // 垂直位置：始终显示在下方 | ||
| const vertical: 'top' | 'bottom' = 'bottom'; |
There was a problem hiding this comment.
calculateTooltipPosition 函数中将 vertical 硬编码为 bottom，这可能导致剧集项位于视口底部时 Tooltip 被遮挡。建议增加边界检测逻辑，在下方空间不足时自动切换到 top。此外，由于此处硬编码，getTooltipStyle 和 getArrowStyle 中处理 top 的逻辑变成了无法触达的死代码。
| horizontal: 'left' | 'center' | 'right'; | ||
| }) => { | ||
| const baseStyle = | ||
| 'absolute px-3 py-1 bg-gray-800 dark:bg-gray-900 text-white text-xs rounded-md shadow-lg whitespace-nowrap pointer-events-none z-[100] max-w-[300px] transition-all duration-200 ease-out delay-100'; |
There was a problem hiding this comment.
这里有两个改进点：
- 样式冲突：whitespace-nowrap 会导致长标题溢出 max-w-[300px] 的限制。建议改为允许换行。
- 动画失效：由于 Tooltip 是通过 {isHovered && ...} 条件渲染的，CSS 的 transition 和 delay 在组件挂载时不会生效。若需淡入效果，建议始终渲染组件并控制其 opacity 和 visibility，或者使用动画库。
| 'absolute px-3 py-1 bg-gray-800 dark:bg-gray-900 text-white text-xs rounded-md shadow-lg whitespace-nowrap pointer-events-none z-[100] max-w-[300px] transition-all duration-200 ease-out delay-100'; | |
| 'absolute px-3 py-1 bg-gray-800 dark:bg-gray-900 text-white text-xs rounded-md shadow-lg whitespace-normal break-words pointer-events-none z-[100] max-w-[300px] transition-all duration-200 ease-out delay-100'; |
| const handleWheel = useCallback( | ||
| (e: WheelEvent) => { | ||
| if ( | ||
| isCategoryHovered && | ||
| categoryContainerRef.current && | ||
| canScrollCategoryContainer(e.deltaY) | ||
| ) { | ||
| e.preventDefault(); // 阻止默认的竖向滚动 | ||
|
|
||
| const container = categoryContainerRef.current; | ||
| const scrollAmount = e.deltaY * 2; // 调整滚动速度 | ||
|
|
||
| // 根据滚轮方向进行横向滚动 | ||
| container.scrollBy({ | ||
| left: scrollAmount, | ||
| behavior: 'smooth', | ||
| }); | ||
| } | ||
| }, | ||
| [isCategoryHovered, canScrollCategoryContainer] | ||
| ); |
There was a problem hiding this comment.
此处的滚轮横向滚动和鼠标拖拽逻辑（包括相关的 refs 和 state）与 EpisodeSelector.tsx 中的实现完全一致。这种逻辑重复增加了维护成本。建议将这部分逻辑提取为通用的自定义 Hook（例如 useHorizontalScroll），以便在多个组件间复用。此外，e.deltaY * 2 中的倍率建议定义为常量。
There was a problem hiding this comment.
目前只有两个地方用到，抽成Hook会增加很多没必要的工作量。后续如果还有其他地方需要相同的交互再抽“性价比”比较高。
| onMouseDown={handleCategoryMouseDown} | ||
| onMouseMove={handleCategoryMouseMove} | ||
| onMouseUp={handleCategoryMouseUp} | ||
| onMouseEnter={() => setIsCategoryHovered(true)} | ||
| onMouseLeave={() => setIsCategoryHovered(false)} | ||
| onMouseLeave={handleCategoryMouseLeave} |
There was a problem hiding this comment.
UI 一致性问题：此处的分类容器（categoryContainerRef 所在的 div）缺少了在 DanmakuPanel.tsx 中引入的隐藏滚动条样式（如 scrollbarWidth: 'none' 等）。为了保持全局 UI 风格统一，建议同步这些样式设置。
`tooltip`改成了超过`300px`才换行，短标题仍然保持单行。 滚轮速度、拖动倍率、拖动阈值提成了具名常量
|
容我解释一下，我不是在搞破坏😂 昨天更新216后，发现弹幕选集列表有分组标签，但是鼠标滚动无效，鼠标无法拖动，我觉得是个bug 然后把代码扔到codex中，用了v215版的提示词(我215版也改了一个)，然后他自动咔咔咔给搞好了。 后来才发现后面还有 列表/网格 的却换功能。 我猜你测试的时候只测试单集/集数少的。 
|
1 participant
tooltip提示