年度进度调整

js/main.js

@@ -593,6 +593,74 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     initQuarters();
 
+    // 动态调整周圈大小以适应容器宽度
+    function adjustWeekCirclesSize() {
+        const weekContainers = document.querySelectorAll('.weeks-container');
+
+        weekContainers.forEach(container => {
+            // 获取容器的实际宽度
+            const containerWidth = container.offsetWidth;
+
+            // 获取所有周圈
+            const weekCircles = container.querySelectorAll('.week-circle');
+            if (weekCircles.length === 0) return;
+
+            // 计算所有周圈的总宽度（包括间距）
+            const gap = 3; // 默认间距
+            const totalGap = gap * (weekCircles.length - 1);
+            const circleCount = weekCircles.length;
+
+            // 计算理想的周圈大小
+            const idealSize = (containerWidth - totalGap) / circleCount;
+
+            // 设置最小和最大尺寸限制
+            const minSize = 10;
+            const maxSize = 24;
+
+            // 计算最终尺寸
+            let finalSize = Math.max(minSize, Math.min(idealSize, maxSize));
+
+            // 如果内容仍然溢出，计算缩放比例
+            const totalContentWidth = (finalSize * circleCount) + totalGap;
+            let scale = 1;
+
+            if (totalContentWidth > containerWidth) {
+                scale = containerWidth / totalContentWidth;
+                // 限制最小缩放比例，避免过小
+                scale = Math.max(0.5, scale);
+            }
+
+            // 应用样式到所有周圈
+            weekCircles.forEach(circle => {
+                circle.style.width = finalSize + 'px';
+                circle.style.height = finalSize + 'px';
+                circle.style.fontSize = (finalSize * 0.4) + 'px'; // 字体大小随圆圈缩放
+                circle.style.borderWidth = Math.max(1, finalSize / 8) + 'px'; // 边框随圆圈缩放
+            });
+
+            // 如果需要缩放整个容器
+            if (scale < 1) {
+                container.style.transform = `scaleX(${scale})`;
+                container.style.transformOrigin = 'left';
+            } else {
+                container.style.transform = 'none';
+            }
+        });
+    }
+
+    // 初始调整
+    setTimeout(() => {
+        adjustWeekCirclesSize();
+    }, 100);
+
+    // 监听窗口大小变化并重新调整
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            adjustWeekCirclesSize();
+        }, RESIZE_DEBOUNCE_TIME);
+    });
+
     // 延迟启动进度条动画，使用动态计算的完成率
     setTimeout(() => {
         startProgressAnimation(progressRate);