128 lines
3.9 KiB
React
128 lines
3.9 KiB
React
|
import React from 'react';
|
||
|
|
import { Button, Space, Tooltip } from 'antd';
|
||
|
|
import { ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined } from '@ant-design/icons';
|
||
|
|
|
||
|
|
const ZoomControls = ({ zoom, onZoomIn, onZoomOut, onZoomReset }) => {
|
||
|
|
const percent = Math.round(zoom * 100);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Space size={6} align="center" style={{ background: '#f8f9fa', padding: '6px 10px', borderRadius: 8 }}>
|
||
|
|
<Tooltip title="缩小" placement="bottom">
|
||
|
|
<button
|
||
|
|
onClick={onZoomOut}
|
||
|
|
disabled={zoom <= 0.3}
|
||
|
|
style={{
|
||
|
|
width: 28,
|
||
|
|
height: 28,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
background: zoom <= 0.3 ? '#f5f5f5' : '#fff',
|
||
|
|
border: '1px solid #e8e8e8',
|
||
|
|
borderRadius: 6,
|
||
|
|
cursor: zoom <= 0.3 ? 'not-allowed' : 'pointer',
|
||
|
|
color: zoom <= 0.3 ? '#d9d9d9' : '#595959',
|
||
|
|
transition: 'all 0.2s',
|
||
|
|
fontSize: 14,
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
if (zoom > 0.3) {
|
||
|
|
e.target.style.background = '#e6f7ff';
|
||
|
|
e.target.style.borderColor = '#91d5ff';
|
||
|
|
e.target.style.color = '#1890ff';
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
e.target.style.background = zoom <= 0.3 ? '#f5f5f5' : '#fff';
|
||
|
|
e.target.style.borderColor = '#e8e8e8';
|
||
|
|
e.target.style.color = zoom <= 0.3 ? '#d9d9d9' : '#595959';
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ZoomOutOutlined />
|
||
|
|
</button>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<div style={{
|
||
|
|
minWidth: 52,
|
||
|
|
textAlign: 'center',
|
||
|
|
fontSize: 11,
|
||
|
|
color: '#595959',
|
||
|
|
userSelect: 'none',
|
||
|
|
fontWeight: 500,
|
||
|
|
padding: '0 4px',
|
||
|
|
}}>
|
||
|
|
{percent}%
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Tooltip title="放大" placement="bottom">
|
||
|
|
<button
|
||
|
|
onClick={onZoomIn}
|
||
|
|
disabled={zoom >= 2}
|
||
|
|
style={{
|
||
|
|
width: 28,
|
||
|
|
height: 28,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
background: zoom >= 2 ? '#f5f5f5' : '#fff',
|
||
|
|
border: '1px solid #e8e8e8',
|
||
|
|
borderRadius: 6,
|
||
|
|
cursor: zoom >= 2 ? 'not-allowed' : 'pointer',
|
||
|
|
color: zoom >= 2 ? '#d9d9d9' : '#595959',
|
||
|
|
transition: 'all 0.2s',
|
||
|
|
fontSize: 14,
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
if (zoom < 2) {
|
||
|
|
e.target.style.background = '#e6f7ff';
|
||
|
|
e.target.style.borderColor = '#91d5ff';
|
||
|
|
e.target.style.color = '#1890ff';
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
e.target.style.background = zoom >= 2 ? '#f5f5f5' : '#fff';
|
||
|
|
e.target.style.borderColor = '#e8e8e8';
|
||
|
|
e.target.style.color = zoom >= 2 ? '#d9d9d9' : '#595959';
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ZoomInOutlined />
|
||
|
|
</button>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Tooltip title="重置缩放" placement="bottom">
|
||
|
|
<button
|
||
|
|
onClick={onZoomReset}
|
||
|
|
style={{
|
||
|
|
width: 28,
|
||
|
|
height: 28,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
background: '#fff',
|
||
|
|
border: '1px solid #e8e8e8',
|
||
|
|
borderRadius: 6,
|
||
|
|
cursor: 'pointer',
|
||
|
|
color: '#595959',
|
||
|
|
transition: 'all 0.2s',
|
||
|
|
fontSize: 14,
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
e.target.style.background = '#e6f7ff';
|
||
|
|
e.target.style.borderColor = '#91d5ff';
|
||
|
|
e.target.style.color = '#1890ff';
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
e.target.style.background = '#fff';
|
||
|
|
e.target.style.borderColor = '#e8e8e8';
|
||
|
|
e.target.style.color = '#595959';
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<OneToOneOutlined />
|
||
|
|
</button>
|
||
|
|
</Tooltip>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ZoomControls;
|