PANDA-JSR/SecScore
1
0
Fork 0
mirror of https://github.com/SECTL/SecScore.git synced 2026-07-19 21:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 修复沉浸底栏宽度固定及横向滚动条问题

Browse Source
This commit is contained in:
JSR
2026-03-27 22:00:22 +08:00
parent 508a2c00c2
commit cdcc29e610
1 changed files with 4 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home.tsx
+4 -9
View File
@@ -121,7 +121,6 @@ export const Home: React.FC<HomeProps> = ({
const immersiveToolbarContentRef = useRef<HTMLDivElement>(null) const immersiveToolbarContentRef = useRef<HTMLDivElement>(null)
const [immersiveToolbarWidth, setImmersiveToolbarWidth] = useState<number | null>(null) const [immersiveToolbarWidth, setImmersiveToolbarWidth] = useState<number | null>(null)
const immersiveToolbarHorizontalPadding = 20 const immersiveToolbarHorizontalPadding = 20
const immersiveToolbarMinWidth = 320
const [selectedStudent, setSelectedStudent] = useState<student | null>(null) const [selectedStudent, setSelectedStudent] = useState<student | null>(null)
const [batchMode, setBatchMode] = useState(false) const [batchMode, setBatchMode] = useState(false)
@@ -338,10 +337,7 @@ export const Home: React.FC<HomeProps> = ({
if (frameId !== null) cancelAnimationFrame(frameId) if (frameId !== null) cancelAnimationFrame(frameId)
frameId = requestAnimationFrame(() => { frameId = requestAnimationFrame(() => {
const contentWidth = Math.ceil(contentEl.scrollWidth) const contentWidth = Math.ceil(contentEl.scrollWidth)
const nextWidth = Math.max( const nextWidth = contentWidth + immersiveToolbarHorizontalPadding
immersiveToolbarMinWidth,
contentWidth + immersiveToolbarHorizontalPadding
)
setImmersiveToolbarWidth((prev) => (prev === nextWidth ? prev : nextWidth)) setImmersiveToolbarWidth((prev) => (prev === nextWidth ? prev : nextWidth))
}) })
} }
@@ -356,7 +352,7 @@ export const Home: React.FC<HomeProps> = ({
window.removeEventListener("resize", updateToolbarWidth) window.removeEventListener("resize", updateToolbarWidth)
if (frameId !== null) cancelAnimationFrame(frameId) if (frameId !== null) cancelAnimationFrame(frameId)
} }
}, [immersiveMode, immersiveToolbarHorizontalPadding, immersiveToolbarMinWidth]) }, [immersiveMode, immersiveToolbarHorizontalPadding])
useEffect(() => { useEffect(() => {
return () => { return () => {
@@ -2538,12 +2534,11 @@ export const Home: React.FC<HomeProps> = ({
immersiveToolbarContentRef.current = node immersiveToolbarContentRef.current = node
}} }}
style={{ style={{
display: "flex", display: "inline-flex",
alignItems: "center", alignItems: "center",
gap: "8px", gap: "8px",
overflowX: "auto", overflowX: "visible",
justifyContent: "flex-start", justifyContent: "flex-start",
scrollbarWidth: "thin",
}} }}
> >
<Input <Input