0da18e868a
问题： - EventScrollList 组件中模式切换按钮代码内联（17行） - 降低代码可读性和可维护性 - 按钮组无法在其他地方复用 修改： 1. 新建 ModeToggleButtons.js 独立组件 - 接收 mode 和 onModeChange 两个 props - 包含完整的 JSDoc 注释 - 支持 vertical（纵向）和 four-row（平铺）两种模式 2. 重构 EventScrollList.js - 删除未使用的 import（Button, ButtonGroup） - 导入 ModeToggleButtons 组件 - 替换 17 行内联代码为 1 行组件调用 - 代码净减少 14 行 效果： - ✅ 职责分离：模式切换逻辑独立封装 - ✅ 可复用性：其他页面可直接导入使用 - ✅ 易维护性：修改按钮样式只需改一个文件 - ✅ 易测试性：可单独编写单元测试 - ✅ 代码简洁：EventScrollList 更简洁易读 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
34 lines
902 B
JavaScript
34 lines
902 B
JavaScript
// src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js
|
|
// 事件列表模式切换按钮组
|
|
|
|
import React from 'react';
|
|
import { Button, ButtonGroup } from '@chakra-ui/react';
|
|
|
|
/**
|
|
* 事件列表模式切换按钮组
|
|
* @param {string} mode - 当前模式 'vertical' | 'four-row'
|
|
* @param {Function} onModeChange - 模式切换回调
|
|
*/
|
|
const ModeToggleButtons = ({ mode, onModeChange }) => {
|
|
return (
|
|
<ButtonGroup size="sm" isAttached>
|
|
<Button
|
|
onClick={() => onModeChange('vertical')}
|
|
colorScheme="blue"
|
|
variant={mode === 'vertical' ? 'solid' : 'outline'}
|
|
>
|
|
纵向
|
|
</Button>
|
|
<Button
|
|
onClick={() => onModeChange('four-row')}
|
|
colorScheme="blue"
|
|
variant={mode === 'four-row' ? 'solid' : 'outline'}
|
|
>
|
|
平铺
|
|
</Button>
|
|
</ButtonGroup>
|
|
);
|
|
};
|
|
|
|
export default ModeToggleButtons;
|