From bbecd4a4f1cfe2ce11f186ccabde6138067409f8 Mon Sep 17 00:00:00 2001
From: TianXuan Developer <developer@tianxuan.local>
Date: Sat, 25 Jul 2026 10:00:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E5=B0=8F=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E7=BB=84(15-20=E8=BE=B9)+=E9=A2=9C=E8=89=B2=E5=81=8F=E7=A7=BB(?=
 =?UTF-8?q?hue)=E8=AE=A9=E8=BF=87=E6=B8=A1=E6=9B=B4=E6=98=8E=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 窗口拆分更细: ~20条/组,最大15个窗口
- 颜色随窗口组偏移hue(15°/组),视觉变化明显
- 去重: 同一边不会在多个窗口重复出现
- 透明度范围扩大(0.4-1.0)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../simple_analysis/simple_analysis.html      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/simple_analysis/templates/simple_analysis/simple_analysis.html b/simple_analysis/templates/simple_analysis/simple_analysis.html
index 39e0117..603c685 100644
--- a/simple_analysis/templates/simple_analysis/simple_analysis.html
+++ b/simple_analysis/templates/simple_analysis/simple_analysis.html
@@ -2641,10 +2641,15 @@ function loadTrafficData() {
         // If only 1-2 real windows, split edges into artificial windows for crossfade variety
         if (wins.length <= 2 && wins.length > 0) {
             const allEdges = [];
-            wins.forEach(w => (w.edges||[]).forEach(e => allEdges.push({...e})));
-            // Sort by count descending, split into groups of ~60 edges
+            const seen = new Set();
+            wins.forEach(w => (w.edges||[]).forEach(e => {
+                const k = e.source + '|' + e.target;
+                if (!seen.has(k)) { seen.add(k); allEdges.push({...e}); }
+            }));
             allEdges.sort((a,b) => (b.count||0) - (a.count||0));
-            const groupSize = Math.max(40, Math.ceil(allEdges.length / 8));
+            // More windows with fewer edges each = more visible change
+            const nWindows = Math.min(20, Math.ceil(allEdges.length / 20));
+            const groupSize = Math.max(15, Math.ceil(allEdges.length / nWindows));
             const newWins = [];
             let ti = minTs;
             for (let g = 0; g < allEdges.length; g += groupSize) {
@@ -2828,15 +2833,16 @@ function renderTrafficCrossfade() {
             _trafficEdgeCache[e.source+'|'+e.target] = cached;
         }
         if (!cached) return;
-        const ratio = e.count / maxCount;
-        const alpha = 0.3 + 0.6 * e.weight * ratio;
+        const ratio = Math.min(1, e.count / maxCount);
+        const alpha = 0.4 + 0.6 * e.weight;
+        const hue = 220 + (mix.i % 10) * 15; // color shifts per window group
 
         // Bezier trace
         ctx.beginPath();
         ctx.moveTo(cached.p1x, cached.p1y);
         ctx.quadraticCurveTo(cached.midX, cached.midY, cached.p2x, cached.p2y);
-        ctx.strokeStyle = 'rgba(67,97,238,' + alpha.toFixed(2) + ')';
-        ctx.lineWidth = 1 + 4 * ratio;
+        ctx.strokeStyle = 'hsla(' + hue + ',70%,50%,' + alpha.toFixed(2) + ')';
+        ctx.lineWidth = 1.5 + 3 * ratio;
         ctx.stroke();
 
         // Particles (continuous, driven by Date.now)