|
|
@@ -1,6 +1,7 @@
|
|
|
import React from 'react';
|
|
|
import { IndustryType } from './icons/IndustryIcon';
|
|
|
import PopupInfoBoxIcon from './icons/PopupInfoBox';
|
|
|
+import { useTheme } from './../context/ThemeContext';
|
|
|
|
|
|
// 定义弹出框数据类型
|
|
|
interface PopupData {
|
|
|
@@ -20,25 +21,12 @@ interface PopupInfoBoxProps {
|
|
|
industry?: IndustryType;
|
|
|
}
|
|
|
|
|
|
-// 产业主题色映射
|
|
|
-const industryColors: Record<IndustryType, string> = {
|
|
|
- "粮食": "text-lime-200",
|
|
|
- "油脂": "text-[#f6b02e]",
|
|
|
- "种业": "text-[#5def8b]",
|
|
|
- "果蔬": "text-[#fff586]",
|
|
|
- "畜牧": "text-[#f593a5]",
|
|
|
- "水产": "text-[#6be9ff]",
|
|
|
- "鲜食": "text-[#de7e66]",
|
|
|
- "泛盐": "text-[#92a5fe]"
|
|
|
-};
|
|
|
-
|
|
|
const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
data,
|
|
|
position = { x: 717.28, y: 273.13 },
|
|
|
- onClose,
|
|
|
- industry = "粮食"
|
|
|
+ onClose
|
|
|
}) => {
|
|
|
- const themeColor = industryColors[industry];
|
|
|
+ const { themeColor } = useTheme();
|
|
|
// 默认数据
|
|
|
const defaultData: PopupData = {
|
|
|
title: "源头",
|
|
|
@@ -66,7 +54,9 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
<div className="h-[320px] relative shrink-0 w-[573px]">
|
|
|
{/* 边框背景 */}
|
|
|
<div className="absolute inset-0">
|
|
|
- <PopupInfoBoxIcon className="size-full" />
|
|
|
+ <PopupInfoBoxIcon
|
|
|
+ className="size-full"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
{/* 内容区域 */}
|
|
|
@@ -74,7 +64,7 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
{/* 标题区域 */}
|
|
|
<div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
|
|
|
<div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
|
|
|
- <div className={`flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] whitespace-nowrap ${themeColor}`}>
|
|
|
+ <div className={`flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] whitespace-nowrap text-[${themeColor}]`}>
|
|
|
<p className="leading-[32px]">{displayData.title}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -95,7 +85,7 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
|
|
|
- <div className={`flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] whitespace-nowrap ${themeColor}`}>
|
|
|
+ <div className={`flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] whitespace-nowrap text-[${themeColor}]`}>
|
|
|
<p className="leading-[32px]">{displayData.metrics[0]?.value}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -113,7 +103,7 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
|
|
|
- <div className={`flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] whitespace-nowrap ${themeColor}`}>
|
|
|
+ <div className={`flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] whitespace-nowrap text-[${themeColor}]`}>
|
|
|
<p className="leading-[32px]">{displayData.metrics[1]?.value}</p>
|
|
|
</div>
|
|
|
</div>
|