fix: axis title auto-visible on input + add show/hide switches

- Typing axis title text auto-sets titleVisible=true
- Added switches for: show axis, show axis title, show grid lines

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hailin 2026-04-05 03:13:14 -07:00
parent 541440be8a
commit 49ed6a9bcb
1 changed files with 19 additions and 10 deletions

View File

@ -15,6 +15,7 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
const { chart, setStyle } = useChartConfig(); const { chart, setStyle } = useChartConfig();
const key = axis === 'x' ? 'xAxis' : 'yAxis'; const key = axis === 'x' ? 'xAxis' : 'yAxis';
const axisStyle = chart?.style?.[key]; const axisStyle = chart?.style?.[key];
const label = axis === 'x' ? 'X轴' : 'Y轴';
const update = useCallback( const update = useCallback(
(partial: Partial<AxisStyle>) => { (partial: Partial<AxisStyle>) => {
@ -28,12 +29,28 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
return ( return (
<Space direction="vertical" style={{ width: '100%' }} size={12}> <Space direction="vertical" style={{ width: '100%' }} size={12}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ fontSize: 12 }}>{label}</Text>
<Switch
size="small"
checked={axisStyle.visible}
onChange={(checked) => update({ visible: checked })}
/>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ fontSize: 12 }}></Text>
<Switch
size="small"
checked={axisStyle.titleVisible}
onChange={(checked) => update({ titleVisible: checked })}
/>
</div>
<div> <div>
<Text style={{ fontSize: 12 }}></Text> <Text style={{ fontSize: 12 }}></Text>
<Input <Input
value={axisStyle.titleText} value={axisStyle.titleText}
onChange={(e) => update({ titleText: e.target.value })} onChange={(e) => update({ titleText: e.target.value, titleVisible: true })}
placeholder={`${axis.toUpperCase()}轴标题`} placeholder={`${label}标题`}
size="small" size="small"
style={{ marginTop: 4 }} style={{ marginTop: 4 }}
/> />
@ -56,14 +73,6 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
style={{ marginTop: 4 }} style={{ marginTop: 4 }}
/> />
</div> </div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ fontSize: 12 }}>线</Text>
<Switch
size="small"
checked={axisStyle.visible}
onChange={(checked) => update({ visible: checked })}
/>
</div>
</Space> </Space>
); );
} }