GEO 优化

website/src/components/RosePieChart.jsx

@@ -8,8 +8,6 @@ const chartData = [
   { value: 25, name: '实训管理平台' },
 ];
 
-const color = '#043b8f';
-
 const rotationNeeded = [45, -45, -135, -225];
 
 function normalizeAngle(a) {
@@ -25,12 +23,23 @@ function shortestRotation(from, to) {
   return from + diff;
 }
 
-export default function RosePieChart({ onSelect, activeIndex }) {
+/** 将 hex 颜色转为带透明度的 rgba */
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+export default function RosePieChart({ onSelect, activeIndex, colors }) {
   const containerRef = useRef(null);
   const chartRef = useRef(null);
   const rotationRef = useRef(0);
   const [rotation, setRotation] = useState(0);
 
+  // 默认回退颜色
+  const safeColors = colors?.length === 4 ? colors : ['#60ce93', '#0c86cf', '#aa3130', '#8b50ee'];
+
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -73,7 +82,7 @@ export default function RosePieChart({ onSelect, activeIndex }) {
         },
         data: chartData.map((d, i) => ({
           ...d,
-          itemStyle: { color, opacity: 1, borderRadius: 6, borderWidth: 0 },
+          itemStyle: { color: safeColors[i], opacity: 1, borderRadius: 6, borderWidth: 0 },
         })),
         animationType: 'scale',
         animationEasing: 'elasticOut',
@@ -106,9 +115,9 @@ export default function RosePieChart({ onSelect, activeIndex }) {
       series: [{
         data: chartData.map((d, i) => ({
           ...d,
-          label: { color: isActive && activeIndex === i ? '#fff' : '#043b8f' },
+          label: { color: isActive && activeIndex === i ? '#fff' : safeColors[i] },
           itemStyle: {
-            color: isActive && activeIndex !== i ? color + '30' : color,
+            color: isActive && activeIndex !== i ? hexToRgba(safeColors[i], 0.2) : safeColors[i],
             opacity: 1,
             borderRadius: 6,
             borderColor: 'rgba(15,23,42,0.8)',
@@ -140,7 +149,7 @@ export default function RosePieChart({ onSelect, activeIndex }) {
         transition: 'transform 1s cubic-bezier(0.4, 0, 0.2, 1)',
       }}
     >
-      <div ref={containerRef} className="w-full h-[420px] md:h-[480px]" />
+      <div ref={containerRef} className="w-full h-[520px] md:h-[600px]" />
     </div>
   );
 }