zhang1106
54b0a8e7bb
- 移除未使用的编辑模式、热力图、搜索等功能 - 将样式代码抽离到独立样式文件 - 优化工具栏和缩放控制组件实现 - 添加导出图片功能 - 简化上下文状态管理 - 优化设备提示框和空状态显示
49 lines
1.5 KiB
React
49 lines
1.5 KiB
React
import React from 'react';
|
|
import { Button, Space, Tooltip } from 'antd';
|
|
import { ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined } from '@ant-design/icons';
|
|
import { ZoomControlsWrapper, ZoomPercent } from '../styles';
|
|
|
|
const ZoomControls = ({ zoom, onZoomIn, onZoomOut, onZoomReset }) => {
|
|
const percent = Math.round(zoom * 100);
|
|
|
|
return (
|
|
<ZoomControlsWrapper>
|
|
<Tooltip title="缩小" placement="bottom">
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
icon={<ZoomOutOutlined />}
|
|
onClick={onZoomOut}
|
|
disabled={zoom <= 0.3}
|
|
style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
/>
|
|
</Tooltip>
|
|
|
|
<ZoomPercent>{percent}%</ZoomPercent>
|
|
|
|
<Tooltip title="放大" placement="bottom">
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
icon={<ZoomInOutlined />}
|
|
onClick={onZoomIn}
|
|
disabled={zoom >= 2}
|
|
style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
/>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="重置缩放" placement="bottom">
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
icon={<OneToOneOutlined />}
|
|
onClick={onZoomReset}
|
|
style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
/>
|
|
</Tooltip>
|
|
</ZoomControlsWrapper>
|
|
);
|
|
};
|
|
|
|
export default ZoomControls;
|