fix(scrollbar): prevent cursor flicker with CSS-based auto-hide

src/web/toManual/js/scrollbar.jsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars';
 
 function renderScrollBarTrackHorizontal(props) {
@@ -12,20 +12,81 @@ function renderScrollBarTrackHorizontal(props) {
 }
 
 function renderView(props) {
+  // 修复水平滚动条和最后一行被遮挡问题：
+  // 1. overflowX: 'hidden' - 防止水平滚动条
+  // 2. marginBottom: 0 - 修复最后一行被遮挡（移除负边距）
+  // 注意：保留 marginRight 的负边距，不破坏 react-custom-scrollbars 隐藏滚动条的机制
+  const mergedStyle = Object.assign({}, props.style, {
+    overflowX: 'hidden',
+    marginBottom: 0
+  });
+
   return (
-    <div {...props} style={Object.assign({}, props.style, { overflowX: 'hidden', marginBottom: 0 })} />
+    <div {...props} style={mergedStyle} />
   );
 }
 
 export default function(props) {
+  const scrollbarsRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  useEffect(() => {
+    const scrollbars = scrollbarsRef.current;
+    if (!scrollbars) return;
+
+    const showScrollbar = () => {
+      const container = scrollbars.container;
+      if (container) {
+        container.style.setProperty('--scrollbar-opacity', '1');
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(hideScrollbar, 800);
+    };
+
+    const hideScrollbar = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      const container = scrollbars.container;
+      if (container) {
+        container.style.setProperty('--scrollbar-opacity', '0');
+      }
+    };
+
+    const view = scrollbars.view;
+    const container = scrollbars.container;
+    if (view) {
+      view.addEventListener('scroll', showScrollbar);
+    }
+    if (container) {
+      container.addEventListener('mousemove', showScrollbar);
+      container.addEventListener('mouseleave', hideScrollbar);
+    }
+
+    return () => {
+      if (view) {
+        view.removeEventListener('scroll', showScrollbar);
+      }
+      if (container) {
+        container.removeEventListener('mousemove', showScrollbar);
+        container.removeEventListener('mouseleave', hideScrollbar);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <Scrollbars
       {...props}
+      ref={scrollbarsRef}
       className="scrollbar"
-      autoHide
       renderTrackHorizontal={renderScrollBarTrackHorizontal}
       renderView={renderView}
-      autoHideTimeout={800}
     >
       {props.children}
     </Scrollbars>

src/web/toManual/sass/app.scss

@@ -22,29 +22,39 @@ body {
   }
 }
 
-.scrollbar>div:last-child {
-  width: 6px !important;
-  border-radius: 3px !important;
+// 使用 CSS 变量实现滚动条自动隐藏，避免 JavaScript autoHide 导致的光标闪烁
+// CSS变量的改变只会触发重绘（repaint），不会触发回流（reflow），因此不会导致光标闪烁
+.scrollbar {
+  // 滚动条轨道（垂直）
+  > div:last-child {
+    width: 6px !important;
+    border-radius: 3px !important;
+    opacity: var(--scrollbar-opacity, 0); // 使用CSS变量，默认值为0
+    transition: opacity 0.3s ease-in-out;
+
+    // 滚动条滑块
+    div {
+      background-color: var(--scrollbar-div-background-color) !important;
+      cursor: default !important;
 
-  div {
-    background-color: var(--scrollbar-div-background-color) !important;
-    cursor: default !important;
+      &:hover {
+        background-color: var(--scrollbar-div-hover-background-color) !important;
+      }
+    }
 
     &:hover {
-      background-color: var(--scrollbar-div-hover-background-color) !important;
+      width: 8px !important;
+      border-radius: 4px !important;
     }
   }
-
-  &:hover {
-    width: 8px !important;
-    border-radius: 4px !important;
-  }
 }
 
+// 文本选择模式下滚动条保持显示
 body[style*='user-select: none'] {
-  .scrollbar>div:last-child {
+  .scrollbar > div:last-child {
     width: 8px !important;
     border-radius: 4px !important;
+    opacity: 1;
 
     div {
       background-color: var(--scrollbar-div-select-background-color) !important;

src/web_dist/toManual/index.css

@@ -14,7 +14,9 @@ body {
 
 .scrollbar > div:last-child {
   width: 6px !important;
-  border-radius: 3px !important; }
+  border-radius: 3px !important;
+  opacity: var(--scrollbar-opacity, 0);
+  transition: opacity 0.3s ease-in-out; }
   .scrollbar > div:last-child div {
     background-color: var(--scrollbar-div-background-color) !important;
     cursor: default !important; }
@@ -26,7 +28,8 @@ body {
 
 body[style*='user-select: none'] .scrollbar > div:last-child {
   width: 8px !important;
-  border-radius: 4px !important; }
+  border-radius: 4px !important;
+  opacity: 1; }
   body[style*='user-select: none'] .scrollbar > div:last-child div {
     background-color: var(--scrollbar-div-select-background-color) !important; }
 

src/web_dist/toManual/index.js

@@ -2547,26 +2547,87 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+var useRef = _react2.default.useRef;
+var useEffect = _react2.default.useEffect;
+
 exports.default = function (props) {
+  var scrollbarsRef = useRef(null);
+  var timeoutRef = useRef(null);
+
+  useEffect(function () {
+    var scrollbars = scrollbarsRef.current;
+    if (!scrollbars) return;
+
+    var showScrollbar = function () {
+      var container = scrollbars.container;
+      if (container) {
+        container.style.setProperty('--scrollbar-opacity', '1');
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(hideScrollbar, 800);
+    };
+
+    var hideScrollbar = function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      var container = scrollbars.container;
+      if (container) {
+        container.style.setProperty('--scrollbar-opacity', '0');
+      }
+    };
+
+    var view = scrollbars.view;
+    var container = scrollbars.container;
+    if (view) {
+      view.addEventListener('scroll', showScrollbar);
+    }
+    if (container) {
+      container.addEventListener('mousemove', showScrollbar);
+      container.addEventListener('mouseleave', hideScrollbar);
+    }
+
+    return function () {
+      if (view) {
+        view.removeEventListener('scroll', showScrollbar);
+      }
+      if (container) {
+        container.removeEventListener('mousemove', showScrollbar);
+        container.removeEventListener('mouseleave', hideScrollbar);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   return _react2.default.createElement(
     _reactCustomScrollbars.Scrollbars,
-    _extends({}, props, { className: 'scrollbar', autoHide: true, renderTrackHorizontal: renderScrollBarTrackHorizontal, autoHideTimeout: 800 }),
+    _extends({}, props, { ref: scrollbarsRef, className: 'scrollbar', renderTrackHorizontal: renderScrollBarTrackHorizontal, renderView: renderView }),
     props.children
   );
 };
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCustomScrollbars = require('react-custom-scrollbars');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function renderScrollBarTrackHorizontal(props) {
   return _react2.default.createElement('span', null);
 }
 
+function renderView(props) {
+  var mergedStyle = _extends({}, props.style, { overflowX: 'hidden', marginBottom: 0 });
+  return _react2.default.createElement('div', _extends({}, props, { style: mergedStyle }));
+}
+
 },{"react":74,"react-custom-scrollbars":35}],8:[function(require,module,exports){
 (function (global){
 'use strict';