From 09d887dd52d04f03eab87465e1ec643ccbe3aca6 Mon Sep 17 00:00:00 2001 From: TerryM Date: Sat, 30 May 2026 01:39:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AD=9B=E9=80=89=E6=9D=A1=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=BC=A0=E6=A0=87=E6=BB=9A=E8=BD=AE=E6=A8=AA=E5=90=91?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 桌面鼠标无横向滚轮且滚动条隐藏,溢出时末尾筛选项不可达。加非被动 wheel 监听,溢出时将 deltaY 转为横向 scrollLeft;未溢出则不接管,不影响页面滚动。 Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/messageStream/FilterChips.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/messageStream/FilterChips.tsx b/src/components/messageStream/FilterChips.tsx index e6781b6..a649951 100644 --- a/src/components/messageStream/FilterChips.tsx +++ b/src/components/messageStream/FilterChips.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef } from "react"; import { useI18n } from "../../i18n"; import { typeFilterLabel } from "../../resourceTypeLabels"; @@ -20,6 +21,22 @@ export type FilterChipsProps = { export function FilterChips({ type, onTypeChange }: FilterChipsProps) { const { t } = useI18n(); + const scrollRef = useRef(null); + + // Let a mouse wheel scroll the row horizontally when it overflows — desktop + // mice have no horizontal wheel and the scrollbar is hidden, so otherwise the + // last filters are unreachable. Touch/trackpad scroll natively. + useEffect(() => { + const el = scrollRef.current; + if (!el) return; + const onWheel = (e: WheelEvent) => { + if (e.deltaY === 0 || el.scrollWidth <= el.clientWidth) return; + e.preventDefault(); + el.scrollLeft += e.deltaY; + }; + el.addEventListener("wheel", onWheel, { passive: false }); + return () => el.removeEventListener("wheel", onWheel); + }, []); const tabClass = (active: boolean) => [ @@ -33,6 +50,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) { return (