From e084592304b0499d05eaa31d59c463a8649352c2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 30 六月 2025 22:24:13 +0800
Subject: [PATCH] 1

---
 src/components/menu/TimeLine.vue |  420 +++++++++++++++++++++++++++--------------------------------
 1 files changed, 194 insertions(+), 226 deletions(-)

diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index f4b1380..052f870 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,30 +2,20 @@
   <div class="timeline-container">
     <div class="controls">
       <div class="control-btn" @click="skipBackward">
-        <img
-          src="@/assets/img/timeline/left.png"
-          class="fas fa-step-backward"
-        />
+        <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
       </div>
       <div class="control-btn play-btn" @click="togglePlay">
         <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
         <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
       </div>
       <div class="control-btn" @click="skipForward">
-        <img
-          src="@/assets/img/timeline/right.png"
-          class="fas fa-step-forward"
-        />
+        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
       </div>
       <div class="speed-control" v-show="speedShow">
         <div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
         <div class="speed-menu" v-show="showSpeedMenu">
-          <div
-            v-for="rate in playbackRates"
-            :key="rate"
-            @click.capture="setPlaybackRate(rate)"
-            :class="{ active: playbackRate === rate }"
-          >
+          <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
+            :class="{ active: playbackRate === rate }">
             {{ rate }}X
           </div>
         </div>
@@ -35,33 +25,19 @@
     <div class="timeline">
       <div class="dates">
         <div class="current-date">褰撳墠鎾斁鏃堕棿锛歿{ currentPlayingTime }}</div>
-        <div
-          v-for="(date, index) in visibleDates"
-          :key="index"
-          class="date-label"
-        >
+        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
           <!-- {{ formatDate(date) }} -->
         </div>
         <div>
           涓撻娓叉煋:
-          <el-switch
-            v-model="isColorRenderEnabled"
-            @change="handleColorRenderChange"
-            style="margin-top: -3px"
-            :disabled="!isPlaying || !isWaterPrimitiveCreated"
-          />
+          <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top: -3px"
+            :disabled="!isPlaying || !isWaterPrimitiveCreated" />
           <!-- active-text="寮�" inactive-text="鍏�" -->
         </div>
       </div>
       <div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
-        <div
-          class="timeline-progress"
-          :style="{ width: progressPercentage + '%' }"
-        ></div>
-        <div
-          class="timeline-cursor"
-          :style="{ left: progressPercentage + '%' }"
-        ></div>
+        <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
+        <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
         <div class="scale-markers">
           <div class="scale-marker" style="left: 0%"></div>
           <div class="scale-marker" style="left: 25%"></div>
@@ -70,12 +46,8 @@
           <div class="scale-marker" style="left: 100%"></div>
         </div>
         <div class="time-markers">
-          <div
-            v-for="(time, index) in timeMarkers"
-            :key="index"
-            class="time-marker"
-            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
-          >
+          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
+            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
             <div class="date-part">{{ time.split(" ")[0] }}</div>
             <div class="time-part">{{ time.split(" ")[1] }}</div>
           </div>
@@ -84,38 +56,27 @@
     </div>
     <div>
       <div style="display: flex">
-        <ratelevel
-          ref="ratelevelRef"
-          :playing-time="sendCurrentPlayingTime"
-          @finish-calculation="handleFinishCalculation"
-          style="
+        <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
+          @finish-calculation="handleFinishCalculation" style="
             margin-top: 12px;
             margin-left: 28px;
             margin-right: 10px;
             justify-content: flex-end;
-          "
-        />
-        <crossanalysis
-          ref="crossRef"
-          style="
+          " />
+        <crossanalysis ref="crossRef" style="
             margin-top: 12px;
             margin-left: 16px;
             margin-right: 20px;
             justify-content: flex-end;
-          "
-        />
+          " />
       </div>
-      <el-button
-        @click="handleBack"
-        style="
+      <el-button @click="handleBack" style="
           margin-top: 3px;
           margin-left: 28px;
           margin-right: 10px;
           width: 75%;
           height: 30%;
-        "
-        >缁撴潫妯℃嫙</el-button
-      >
+        ">缁撴潫妯℃嫙</el-button>
     </div>
   </div>
 </template>
@@ -202,9 +163,6 @@
 });
 let minFlowRate = ref();
 let maxFlowRate = ref();
-// 鍏ㄥ眬鍙橀噺璁板綍鏈�澶ч樁娈靛拰閫忔槑搴�
-let maxStage = 0;
-let maxAlpha = -0.3; // 鍒濆閫忔槑搴﹀搴攕tage 0
 // 璁$畻灞炴��
 const progressPercentage = computed(
   () => (currentTime.value / duration.value) * 100
@@ -410,14 +368,12 @@
   } else if (data.intensityUnit !== "mm/h") {
     console.warn("鏈煡鐨� intensity 鍗曚綅锛屾棤娉曡繘琛岃浆鎹�");
   }
-
   const rainfallList = data.rainfalls;
   console.log("鏈�缁堢殑 rainfallList:", rainfallList);
   rainTotalInfo.value = rainfallList;
   calculateTimeStep(rainTotalInfo.value);
   // 浣跨敤绀轰緥
   timeStepInfo = calculateTimeStep(rainTotalInfo.value);
-
   // 鎻愬彇 intensity 鍊�
   rainFallValues.value = rainfallList.map((r) => r.intensity);
   minRainValue.value = Math.min(...rainFallValues.value);
@@ -527,172 +483,204 @@
 
   return timeStepHours;
 }
+// ============================================================================
+// 浼樺寲鏂瑰紡锛屽彲浠ユ眰鍑烘暣涓椂闂磋酱涓婏紝绗竴娆¢亣鍒拌繖鍏釜闃堝�煎緱鏃堕棿鐐癸紝鐒跺悗鍒嗘椂闂存鏄剧ず锛宎鏃堕棿鍐呮樉绀虹姸鎬�1锛岀劧鍚庣姸鎬佷氦鐣屽璁剧疆棰滆壊娓愬彉锛屽叾浣欏悓鐞嗭紝杩欐牱璺宠浆寰楁椂鍊欒兘澶熺洿鎺ヨ烦杞埌褰撳墠寰楅鑹蹭俊鎭樁娈碉紝鐩存帴搴旂敤锛屽嵆鍙�
+// ============================================================================
 // 鍏ㄥ眬鐘舵�佽褰�
 const colorState = {
-  maxStage: 0, // 璁板綍鍘嗗彶鏈�楂橀樁娈�
-  maxAlpha: -0.3, // 璁板綍鍘嗗彶鏈�灏忛�忔槑搴︼紙璐熷�硷級
-  maxLuminance: 240.4, // 璁板綍鍘嗗彶鏈�浣庝寒搴︼紙瀵瑰簲stage 0鍒濆鍊硷級
   currentColor: "#F5F0E6", // 褰撳墠棰滆壊
+  currentAlpha: -0.3,      // 褰撳墠閫忔槑搴�
+  colorStages: null,       // 棰勮绠楃殑棰滆壊闃舵鏃堕棿鐐�
+  maxColorTime: null       // 璁板綍杈惧埌鏈�娣遍鑹叉椂鐨勬椂闂寸偣
 };
 
-function updateWaterColorByTime() {
+// 棰勮绠楅鑹查樁娈垫椂闂寸偣
+function precomputeColorStages() {
   if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;
 
-  // 1. 璁$畻鍩虹鏁版嵁
-  const { intensity, IR } = calculateRainData();
-
-  // 2. 棰滆壊閰嶇疆锛堜寒搴︿弗鏍奸�掑噺锛�
+  // 棰滆壊閰嶇疆锛堜寒搴﹂�掑噺锛�
   const COLOR_STOPS = [
     { hex: "#F5F0E6", luminance: 240.4 }, // stage 0
-    { hex: "#D4F2E7", luminance: 231.8 }, // stage 1
-    { hex: "#E6D5B8", luminance: 214.8 }, // stage 2
-    { hex: "#D4B483", luminance: 184.0 }, // stage 3
-    { hex: "#B78B6A", luminance: 148.4 }, // stage 4
-    { hex: "#8B5A3A", luminance: 101.0 }, // stage 5
-    { hex: "#4A3123", luminance: 54.9 }, // stage 6
+    { hex: "#E6D5B8", luminance: 214.8 }, // stage 1
+    { hex: "#D4B483", luminance: 184.0 }, // stage 2
+    { hex: "#B78B6A", luminance: 148.4 }, // stage 3
+    { hex: "#8B5A3A", luminance: 101.0 }, // stage 4
+    { hex: "#744C33", luminance: 84.5 },  // stage 5
+    { hex: "#5D3D2C", luminance: 68.1 }   // stage 6
   ];
   const alphaStops = [
-    1 - 0.3, // stage 0
-    -0.4, // stage 1
-    -0.5, // stage 2
-    -0.6, // stage 3
-    -0.7, // stage 4
-    -0.75, // stage 5
-    -0.8, // stage 6
+    -0.2,   // stage 0
+    -0.3,   // stage 1
+    -0.4,   // stage 2
+    -0.5,   // stage 3
+    -0.6,   // stage 4
+    -0.7,   // stage 5
+    -0.8    // stage 6
   ];
-  // 3. 鏇存柊闃舵鐘舵��
-  updateStageState(intensity, IR);
 
-  // 4. 璁$畻骞堕攣瀹氶鑹诧紙纭繚浜害涓嶅洖鍗囷級
-  updateColorState(COLOR_STOPS, intensity, IR);
+  // 绱闄嶉洦閲忛槇鍊硷紙mm锛�
+  const R_THRESHOLDS = [0, 200, 240, 280, 310, 350]; // 鍏�6涓樁娈靛搴�6涓槇鍊�
 
-  // 5. 搴旂敤棰滆壊
-  updateWaterColor(colorState.currentColor, colorState.maxAlpha);
-
-  // --- 杈呭姪鍑芥暟 ---
-  function calculateRainData() {
-    const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
-    const currentTimestamp = new Date(
-      rainTotalInfo.value[
-        Math.min(
-          Math.floor(
-            (currentTime.value / duration.value) *
-              (rainTotalInfo.value.length - 1)
-          ),
-          rainTotalInfo.value.length - 2
-        )
-      ].time
-    ).getTime();
-
-    // 闄嶉洦寮哄害璁$畻锛堝甫鎻掑�硷級
-    const progress = currentTime.value / duration.value;
-    const floatIndex = progress * (rainTotalInfo.value.length - 1);
-    let index = Math.floor(floatIndex);
-    if (index >= rainTotalInfo.value.length - 1) {
-      index = rainTotalInfo.value.length - 2; // 闃叉 index+1 瓒婄晫
-    }
-    const lerpAlpha = floatIndex - index;
-    const intensity =
-      rainTotalInfo.value[index].intensity * (1 - lerpAlpha) +
-      rainTotalInfo.value[index + 1].intensity * lerpAlpha;
-
-    // 涓寸晫闄嶉洦寮哄害璁$畻
-    const D = (currentTimestamp - initialTimestamp) / (1000 * 60 * 60) + 0.0001;
-    const IR = 56.9 * Math.pow(D, -0.746);
-
-    return { intensity, IR };
+  // 鏃堕棿鍜岄檷闆ㄩ噺淇℃伅
+  const timeTotals = [];
+  const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
+  for (let i = 0; i < rainTotalInfo.value.length; i++) {
+    const timestamp = new Date(rainTotalInfo.value[i].time).getTime();
+    const time = (timestamp - initialTimestamp) / 1000;
+    const total = rainTotalInfo.value[i].total; // 浣跨敤 total 鏇夸唬 intensity
+    timeTotals.push({
+      time,
+      total
+    });
   }
 
-  function updateStageState(intensity, IR) {
-    // 璁$畻鐞嗚闃舵
-    let stage = 0;
-    const thresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
-    for (let i = thresholds.length - 1; i >= 0; i--) {
-      if (intensity >= thresholds[i] * IR) {
-        stage = i + 1;
+  // 鎵惧嚭姣忎釜闃舵棣栨杈惧埌鐨勬椂闂寸偣
+  const stages = [];
+
+  for (let stage = 1; stage < R_THRESHOLDS.length + 1; stage++) {
+    const threshold = R_THRESHOLDS[stage - 1];
+    for (let i = 0; i < timeTotals.length; i++) {
+      const { time, total } = timeTotals[i];
+      if (total >= threshold) {
+        stages[stage] = {
+          startTime: time,
+          color: COLOR_STOPS[stage].hex,
+          alpha: alphaStops[stage],
+          threshold
+        };
         break;
       }
     }
-
-    // 鏇存柊鏈�澶ч樁娈碉紙鍗曞悜閫掑锛�
-    colorState.maxStage = Math.max(colorState.maxStage, stage);
   }
 
-  function updateColorState(colorStops, intensity, IR) {
-    // 宸茶揪鏈�缁堥樁娈�
-    if (colorState.maxStage >= colorStops.length - 1) {
-      colorState.currentColor = colorStops[colorStops.length - 1].hex;
-      colorState.maxAlpha = -0.8;
-      colorState.maxLuminance = colorStops[colorStops.length - 1].luminance;
-      return;
-    }
+  // 濉厖闃舵0
+  stages[0] = {
+    startTime: 0,
+    color: COLOR_STOPS[0].hex,
+    alpha: alphaStops[0],
+    threshold: 0
+  };
 
-    // 璁$畻褰撳墠闃舵杩涘害
-    const stageThresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
-    const lowerThreshold = stageThresholds[colorState.maxStage - 1] * IR;
-    const upperThreshold = stageThresholds[colorState.maxStage] * IR;
-    const ratio = Math.min(
-      1,
-      Math.max(
-        0,
-        (intensity - lowerThreshold) / (upperThreshold - lowerThreshold)
-      )
-    );
-
-    // 棰滆壊鎻掑��
-    const startColor = colorStops[colorState.maxStage];
-    const endColor = colorStops[colorState.maxStage + 1];
-    const newColor = lerpColor(startColor.hex, endColor.hex, ratio);
-    const newLuminance = calculateLuminance(newColor);
-
-    // 鍙帴鍙楁洿鏆楃殑棰滆壊锛堜寒搴︽洿浣庯級
-    if (newLuminance < colorState.maxLuminance) {
-      colorState.currentColor = newColor;
-      colorState.maxLuminance = newLuminance;
-      colorState.maxAlpha = Math.min(
-        colorState.maxAlpha,
-        lerp(
-          alphaStops[colorState.maxStage],
-          alphaStops[colorState.maxStage + 1],
-          ratio
-        )
-      );
-    }
-
-    console.log(
-      `闃舵: ${colorState.maxStage} | 浜害: ${colorState.maxLuminance.toFixed(
-        1
-      )} | 棰滆壊: ${colorState.currentColor}`
-    );
-  }
-
-  // 棰滆壊鎻掑�煎伐鍏峰嚱鏁�
-  function lerpColor(c1, c2, t) {
-    const [r1, g1, b1] = hexToRgb(c1);
-    const [r2, g2, b2] = hexToRgb(c2);
-    return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
-  }
-
-  function calculateLuminance(hex) {
-    const [r, g, b] = hexToRgb(hex);
-    return 0.299 * r + 0.587 * g + 0.114 * b;
-  }
-
-  function hexToRgb(hex) {
-    const bigint = parseInt(hex.slice(1), 16);
-    return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
-  }
-
-  function rgbToHex(r, g, b) {
-    return `#${[r, g, b]
-      .map((x) => Math.round(x).toString(16).padStart(2, "0"))
-      .join("")}`;
-  }
-
-  function lerp(a, b, t) {
-    return a + (b - a) * t;
-  }
+  colorState.colorStages = stages;
 }
+
+function updateWaterColorByTime(isForceUpdate = false) {
+  if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;
+
+  // 棣栨璋冪敤鏃堕璁$畻棰滆壊闃舵
+  if (colorState.colorStages === null) {
+    precomputeColorStages();
+  }
+
+  // 鏌ユ壘褰撳墠鏃堕棿鐐规墍灞炵殑闃舵
+  let currentStage = 0;
+  for (let i = colorState.colorStages.length - 1; i >= 0; i--) {
+    if (colorState.colorStages[i] && currentTime.value >= colorState.colorStages[i].startTime) {
+      currentStage = i;
+      break;
+    }
+  }
+
+  // 璁板綍杈惧埌鏈�娣遍鑹茬殑鏃堕棿鐐�
+  if (currentStage >= colorState.colorStages.length - 1) {
+    if (colorState.maxColorTime === null || currentTime.value > colorState.maxColorTime) {
+      colorState.maxColorTime = currentTime.value;
+    }
+  }
+
+  // 鍒ゆ柇鏄惁闇�瑕佸己鍒舵洿鏂伴鑹�
+  const isTimeGoingBackward = currentTime.value < colorState.lastTime;
+  const isBeforeMaxColorTime = colorState.maxColorTime !== null && currentTime.value <= colorState.maxColorTime;
+  const shouldForceUpdate = isForceUpdate && (isTimeGoingBackward || isBeforeMaxColorTime);
+
+  // 鏇存柊棰滆壊閫昏緫
+  if (shouldForceUpdate || isTimeGoingBackward) {
+    // 寮哄埗鏇存柊鎴栨椂闂村洖閫�鏃讹紝鐩存帴搴旂敤褰撳墠闃舵鐨勯鑹�
+    colorState.currentColor = colorState.colorStages[currentStage].color;
+    colorState.currentAlpha = colorState.colorStages[currentStage].alpha;
+  } else {
+    // 姝e父鏃堕棿鍓嶈繘鏃讹紝淇濇寔娓愯繘鍙樺寲
+    const newColor = colorState.colorStages[currentStage].color;
+    const newAlpha = colorState.colorStages[currentStage].alpha;
+
+    // 鍙簲鐢ㄦ洿鏆楃殑棰滆壊鍜屾洿浣庣殑閫忔槑搴�
+    if (calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)) {
+      colorState.currentColor = newColor;
+    }
+    if (newAlpha < colorState.currentAlpha) {
+      colorState.currentAlpha = newAlpha;
+    }
+  }
+
+  // 鏇存柊鏃堕棿璁板綍
+  colorState.lastTime = currentTime.value;
+  // ====== 鏂板锛氬湪 updateWaterColor 鍓嶆墦鍗板綋鍓嶄俊鎭� ======
+  // // 鑾峰彇褰撳墠绱闄嶉洦閲�
+  // let currentTotal = null;
+  // const baseTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
+  // const currentTimeMs = baseTimestamp + currentTime.value * 1000;
+
+  // // 鎵惧埌鏈�鎺ヨ繎鐨勯檷闆ㄦ暟鎹偣
+  // for (let i = rainTotalInfo.value.length - 1; i >= 0; i--) {
+  //   const dataTimeMs = new Date(rainTotalInfo.value[i].time).getTime();
+  //   if (dataTimeMs <= currentTimeMs) {
+  //     currentTotal = rainTotalInfo.value[i].total;
+  //     break;
+  //   }
+  // }
+
+  // // 鎵撳嵃淇℃伅
+  // console.log("========================================");
+  // console.log(`銆愭椂闂存埑銆�: ${new Date(currentTimeMs).toLocaleString()}`);
+  // console.log(`銆愮疮璁¢檷闆ㄩ噺 R銆�: ${currentTotal !== null ? currentTotal.toFixed(2) : '鏈煡'} mm`);
+  // console.log(`銆愬綋鍓嶉樁娈点��: 绗� ${currentStage} 闃舵`);
+  // console.log(`銆愰鑹� HEX銆�: ${colorState.colorStages[currentStage]?.color || '鏈畾涔�'}`);
+  // console.log(`銆愰�忔槑搴� Alpha銆�: ${colorState.colorStages[currentStage]?.alpha || '鏈畾涔�'}`);
+  // console.log("========================================");
+  // 搴旂敤棰滆壊
+  updateWaterColor(colorState.currentColor, colorState.currentAlpha);
+}
+
+// 杈呭姪鍑芥暟淇濇寔涓嶅彉
+function calculateLuminance(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+
+function hexToRgb(hex) {
+  const bigint = parseInt(hex.slice(1), 16);
+  return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
+}
+
+// 鏃堕棿杞磋烦杞嚱鏁�
+const seekToPosition = (event) => {
+  if (!isWaterPrimitiveCreated.value) {
+    ElMessage.warning("璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜鏃堕棿杞磋烦杞��");
+    return;
+  }
+
+  const rect = timelineTrack.value.getBoundingClientRect();
+  const percentage = (event.clientX - rect.left) / rect.width;
+  const targetTime = Math.round(percentage * duration.value);
+
+  const closestIndex = findClosestTimestampIndex(targetTime);
+  const baseTimestamp = waterTimestamps.value[0];
+  const newTime = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
+
+  // 鍒ゆ柇鏄惁闇�瑕佸己鍒舵洿鏂伴鑹�
+  const isGoingBackward = newTime < currentTime.value;
+  const isBeforeMaxColor = colorState.maxColorTime !== null && newTime <= colorState.maxColorTime;
+  const shouldForceUpdate = isGoingBackward || isBeforeMaxColor;
+
+  currentTime.value = newTime;
+  setTimeForWaterSimulation(closestIndex);
+
+  // 鏍规嵁鏉′欢鏇存柊棰滆壊
+  updateWaterColorByTime(shouldForceUpdate);
+
+  if (!isPlaying.value) pauseWaterSimulation();
+};
+// ============================================================================
 
 function updateWeatherByProgress() {
   if (rainFallValues.value.length === 0) return;
@@ -739,7 +727,7 @@
     rainDensity: rainLevel.density,
     rainColor: rainLevel.color,
   };
-  console.log("褰撳墠闆ㄩ噺鏁版嵁锛�", rainValue, "褰撳墠闆ㄥ舰锛�", rainLevel);
+  // console.log("褰撳墠闆ㄩ噺鏁版嵁锛�", rainValue, "褰撳墠闆ㄥ舰锛�", rainLevel);
   // 璋冪敤宸ュ叿鏂规硶鏇存柊闆ㄦ晥
   mapUtils.toggleRain(rainParams, true);
 }
@@ -802,27 +790,7 @@
   EventBus.emit("clear-echart");
   EventBus.emit("reset-table");
 };
-// 鏃堕棿杞磋烦杞�
-const seekToPosition = (event) => {
-  if (!isWaterPrimitiveCreated.value) {
-    ElMessage.warning("璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜鏃堕棿杞磋烦杞��");
-    return;
-  }
 
-  const rect = timelineTrack.value.getBoundingClientRect();
-  const percentage = (event.clientX - rect.left) / rect.width;
-  const targetTime = Math.round(percentage * duration.value);
-
-  // 鐩存帴鎵惧埌鏈�杩戠殑 timestamp 绱㈠紩
-  const closestIndex = findClosestTimestampIndex(targetTime);
-  const baseTimestamp = waterTimestamps.value[0];
-  currentTime.value =
-    (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
-
-  // 鏇存柊姘翠綋妯℃嫙鏃堕棿
-  setTimeForWaterSimulation(closestIndex);
-  if (!isPlaying.value) pauseWaterSimulation();
-};
 // 杈呭姪鍑芥暟锛氭壘鍒版渶鎺ヨ繎鐨勬椂闂存埑绱㈠紩
 function findClosestTimestampIndex(currentTimeValue) {
   if (waterTimestamps.value.length === 0) return 0;

--
Gitblit v1.9.3