admin/yunrui_asset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(floorplan): 重构平面图组件与样式

Browse Source 
- 移除未使用的编辑模式、热力图、搜索等功能
- 将样式代码抽离到独立样式文件
- 优化工具栏和缩放控制组件实现
- 添加导出图片功能
- 简化上下文状态管理
- 优化设备提示框和空状态显示
This commit is contained in:
zhang1106
2026-05-07 15:14:40 +08:00
parent c717ce30d6
commit 54b0a8e7bb
23 changed files with 564 additions and 1371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/floorplan/toolbar/ZoomControls.jsx
+22 -101
View File
@@ -1,126 +1,47 @@
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 (
<Space size={6} align="center" style={{ background: '#f8f9fa', padding: '6px 10px', borderRadius: 8 }}>
<ZoomControlsWrapper>
<Tooltip title="缩小" placement="bottom">
<button
<Button
type="text"
size="small"
icon={<ZoomOutOutlined />}
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>
style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
/>
</Tooltip>
<div style={{
minWidth: 52,
textAlign: 'center',
fontSize: 11,
color: '#595959',
userSelect: 'none',
fontWeight: 500,
padding: '0 4px',
}}>
{percent}%
</div>
<ZoomPercent>{percent}%</ZoomPercent>
<Tooltip title="放大" placement="bottom">
<button
<Button
type="text"
size="small"
icon={<ZoomInOutlined />}
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>
style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
/>
</Tooltip>
<Tooltip title="重置缩放" placement="bottom">
<button
<Button
type="text"
size="small"
icon={<OneToOneOutlined />}
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>
style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
/>
</Tooltip>
</Space>
</ZoomControlsWrapper>
);
};