Frappe Gantt 图表侧边栏按钮自定义布局方案

在实际项目中使用 Frappe Gantt 图表库时，开发者可能会遇到需要调整默认布局的情况。本文介绍一种通过 CSS 隐藏原生侧边栏按钮并实现自定义布局的技术方案。

默认布局分析

Frappe Gantt 默认会在图表左侧显示一个包含视图切换和"返回今日"按钮的侧边栏（side-header）。这个设计虽然实用，但有时会与项目的整体 UI 设计风格不匹配，或者需要与其他界面元素进行更灵活的布局组合。

解决方案实现

第一步：隐藏原生侧边栏

通过简单的 CSS 规则即可隐藏默认的侧边栏元素：

.side-header {
    display: none;
}

这个方案的优势在于：

1. 完全移除了原生按钮的 DOM 元素
2. 不会影响图表的其他功能
3. 实现简单，无需修改库的源代码

第二步：创建自定义控制组件

在 React 项目中，我们可以创建一个自定义的控制组件来替代原生功能：

<Stack justifyContent="end" gap={2} direction='row'>
    <Select
        label="视图模式"
        value={viewMode}
        onChange={(v) => {
            setViewMode(v.target.value); 
            instance?.current?.change_view_mode(v.target.value)
        }}>
        <MenuItem value='Hour'>小时视图</MenuItem>
        <MenuItem value='Quarter Day'>四分之一天</MenuItem>
        <MenuItem value='Half Day'>半天视图</MenuItem>
        <MenuItem value='Day'>日视图</MenuItem>
        <MenuItem value='Week'>周视图</MenuItem>
    </Select>
    <Button 
        size="small" 
        color="success" 
        onClick={() => instance?.current?.scroll_today()}>
        返回今日
    </Button>
</Stack>

这个实现提供了以下改进：

1. 完全自定义的 UI 样式，与项目设计系统保持一致
2. 更灵活的布局控制（使用 Stack 组件实现水平排列）
3. 可以自由添加其他控制功能

技术要点

1. 实例引用：通过 instance?.current 访问 Gantt 图表实例
2. 方法调用：
   • change_view_mode() 切换视图模式
   • scroll_today() 滚动到当前日期
3. 状态管理：使用 React 的 useState 管理视图模式状态

扩展建议

1. 可以进一步封装成可复用的 Gantt 控制栏组件
2. 添加响应式设计，在不同屏幕尺寸下调整布局
3. 集成更多控制功能，如日期范围选择器
4. 添加自定义图标提升用户体验

这种方案不仅解决了布局问题，还为项目提供了更大的自定义空间和更好的用户体验控制能力。