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

- 移除未使用的编辑模式、热力图、搜索等功能 - 将样式代码抽离到独立样式文件 - 优化工具栏和缩放控制组件实现 - 添加导出图片功能 - 简化上下文状态管理 - 优化设备提示框和空状态显示
2026-05-07 15:14:40 +08:00
parent c717ce30d6
commit 54b0a8e7bb
23 changed files with 564 additions and 1371 deletions
@@ -0,0 +1,165 @@
+import styled from 'styled-components';
+
+export const PageContainer = styled.div`
+  height: calc(100vh - 64px);
+`;
+
+export const ContentWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const CanvasContainer = styled.div`
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+`;
+
+export const LoadingOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 5;
+`;
+
+export const EmptyStateContainer = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+`;
+
+export const EmptyStateTitle = styled.div`
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  margin-bottom: 8px;
+`;
+
+export const EmptyStateSubtitle = styled.div`
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.45);
+  margin-bottom: 16px;
+`;
+
+export const DeviceTooltipContainer = styled.div`
+  position: fixed;
+  left: ${props => props.$x + 18}px;
+  top: ${props => props.$y + 18}px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 14px 18px;
+  z-index: 1000;
+  min-width: 220px;
+  pointer-events: none;
+`;
+
+export const DeviceTooltipHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+`;
+
+export const DeviceTypeIndicator = styled.div`
+  width: 5px;
+  height: 20px;
+  background: ${props => props.$color};
+  border-radius: 3px;
+`;
+
+export const DeviceName = styled.strong`
+  font-size: 15px;
+  color: #111827;
+`;
+
+export const DeviceInfoRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+`;
+
+export const DeviceInfoLabel = styled.span`
+  color: #6b7280;
+`;
+
+export const DeviceInfoValue = styled.span`
+  font-weight: 500;
+  color: ${props => props.$color || '#4b5563'};
+  font-family: ${props => props.$mono ? 'SFMono-Regular, Monaco, Consolas, monospace' : 'inherit'};
+`;
+
+export const DeviceInfoContent = styled.div`
+  font-size: 13px;
+  color: #4b5563;
+  line-height: 22px;
+`;
+
+export const ToolbarWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background: #ffffff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+
+export const ToolbarDivider = styled.div`
+  width: 1px;
+  height: 28px;
+  background: #e8e8e8;
+`;
+
+export const ZoomControlsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #f8f9fa;
+  padding: 6px 10px;
+  border-radius: 8px;
+`;
+
+export const ZoomPercent = styled.div`
+  min-width: 52px;
+  text-align: center;
+  font-size: 11px;
+  color: #595959;
+  user-select: none;
+  font-weight: 500;
+  padding: 0 4px;
+`;
+
+export const RoomOptionContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const RoomIndicator = styled.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #1677ff;
+`;
+
+export const DetailSection = styled.div`
+  margin-top: 16px;
+`;
+
+export const DetailSectionTitle = styled.div`
+  margin-bottom: 8px;
+  font-weight: 500;
+`;