fix(scrollbar): hide horizontal scrollbar and fix bottom content clipping

[pengfeixx]

Add renderView to disable horizontal overflow and remove negative marginBottom from react-custom-scrollbars that was clipping the last line of content in both nav and article areas.

添加 renderView 隐藏水平滚动条，移除 react-custom-scrollbars 的负 marginBottom， 修复左侧大纲和右侧内容区域最后一行被裁剪的问题。

Log: 修复水平滚动条和底部内容裁剪问题
PMS: BUG-342675
Influence: 隐藏水平滚动条，修复导航栏和内容区最后一行文本被遮挡一半的问题。

[deepin-ci-robot]

deepin pr auto review

这段代码是一个 React 组件的修改，主要涉及自定义滚动条的实现。以下是对这段代码的审查意见，包括语法逻辑、代码质量、代码性能和代码安全方面：

1. 语法逻辑

优点：

• 代码结构清晰，新增的 renderView 函数正确地扩展了 props.style，确保不会覆盖原有的样式。
• 使用 Object.assign 来合并样式对象是合理的做法，避免了直接修改 props.style。

改进建议：

• 样式合并方式：虽然 Object.assign 可以工作，但在现代 JavaScript 中，推荐使用扩展运算符 (...) 来合并对象，这样更简洁且可读性更好：

  style={{ ...props.style, overflowX: 'hidden', marginBottom: 0 }}

2. 代码质量

优点：

• 组件职责单一，专注于滚动条的渲染和配置。
• 使用了 autoHide 和 autoHideTimeout 来提升用户体验。

改进建议：

• 函数命名：renderScrollBarTrackHorizontal 的命名可以简化为 renderTrackHorizontal，因为函数名已经表明了它是用于渲染横向滚动条轨道的。
• 组件文档：建议添加 JSDoc 注释，说明组件的用途和 props 的含义，例如：

  /**
   * 自定义滚动条组件
   * @param {Object} props - 组件属性
   * @returns {JSX.Element} 滚动条组件
   */
  export default function Scrollbar(props) {
    // ...
  }

• 默认值：可以为 autoHideTimeout 设置默认值（如 800），避免调用时未传递时的潜在问题。

3. 代码性能

优点：

• 使用了 autoHide 来减少不必要的渲染，提升性能。

改进建议：

• 避免不必要的重新渲染：如果 props 经常变化，可以考虑使用 React.memo 来优化组件的重新渲染：

  export default React.memo(function Scrollbar(props) {
    // ...
  });

• 样式对象缓存：renderView 中的样式对象每次渲染都会创建新对象，可以提取为常量：

  const viewStyle = { overflowX: 'hidden', marginBottom: 0 };
  
  function renderView(props) {
    return (
      <div {...props} style={{ ...props.style, ...viewStyle }} />
    );
  }

4. 代码安全

优点：

• 代码没有直接操作 DOM 或使用 dangerouslySetInnerHTML，避免了 XSS 风险。

改进建议：

• Props 验证：建议添加 PropTypes 或 TypeScript 类型检查，确保传入的 props 是预期的类型：

  import PropTypes from 'prop-types';
  
  Scrollbar.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    autoHide: PropTypes.bool,
    autoHideTimeout: PropTypes.number,
  };

• 样式注入风险：虽然 props.style 是可控的，但建议在 renderView 中对 props.style 进行简单的验证，确保它是一个合法的对象。

5. 其他建议

• 版权声明更新：版权年份从 2022 更新为 2022 - 2026 是合理的，但建议定期更新（如每年更新一次）。
• 组件命名：导出的默认函数可以命名为 Scrollbar，而不是匿名函数，这样在调试时更容易识别：

  export default function Scrollbar(props) {
    // ...
  }

修改后的代码示例

// SPDX-FileCopyrightText: 2022 - 2026 UnionTech Software Technology Co., Ltd.
//
// SPDX-License-Identifier: GPL-3.0-or-later

import React from 'react';
import PropTypes from 'prop-types';
import { Scrollbars } from 'react-custom-scrollbars';

const viewStyle = { overflowX: 'hidden', marginBottom: 0 };

function renderTrackHorizontal(props) {
  return (
    <div {...props} className="scrollbar-track-horizontal" />
  );
}

function renderView(props) {
  return (
    <div {...props} style={{ ...props.style, ...viewStyle }} />
  );
}

/**
 * 自定义滚动条组件
 * @param {Object} props - 组件属性
 * @returns {JSX.Element} 滚动条组件
 */
function Scrollbar(props) {
  return (
    <Scrollbars
      {...props}
      className="scrollbar"
      autoHide
      renderTrackHorizontal={renderTrackHorizontal}
      renderView={renderView}
      autoHideTimeout={800}
    >
      {props.children}
    </Scrollbars>
  );
}

Scrollbar.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  autoHide: PropTypes.bool,
  autoHideTimeout: PropTypes.number,
};

export default React.memo(Scrollbar);

总结

这段代码整体质量不错，但可以通过以下方式进一步优化：

1. 使用扩展运算符 (...) 替代 Object.assign。
2. 添加 PropTypes 或 TypeScript 类型检查。
3. 提取样式对象为常量，避免重复创建。
4. 使用 React.memo 优化性能。
5. 添加组件文档和更清晰的命名。

[deepin-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: lzwind, pengfeixx

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• debian/deepin/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[pengfeixx]

/merge

[deepin-bot]

This pr cannot be merged! (status: unstable)