✨ 优化管理页交互与历史同步

src/components/common/DataTable.vue

@@ -6,9 +6,14 @@
       class="border-b px-6 py-4"
       :class="[isDarkMode ? 'border-gray-700/80' : 'border-[#d9e4e6]']"
     >
-      <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-        {{ title }}
-      </h3>
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+          {{ title }}
+        </h3>
+        <div v-if="slots.actions" class="flex shrink-0 flex-wrap items-center gap-2">
+          <slot name="actions"></slot>
+        </div>
+      </div>
       <div v-if="slots.toolbar" class="mt-4">
         <slot name="toolbar"></slot>
       </div>

src/components/common/SmoothTrendCanvas.vue

@@ -100,8 +100,6 @@ const formatBytes = (value: number | string | undefined) => {
   return `${(bytes / 1024 ** index).toFixed(index === 0 ? 0 : 1)} ${units[index]}`
 }
 
-const lerp = (start: number, end: number, amount: number) => start + (end - start) * amount
-
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value))
 
 const getDefaultWindow = () => {
@@ -259,52 +257,38 @@ const draw = () => {
 
   if (hoverX.value !== null && points.length && total) {
     const hoverRatio = clamp((hoverX.value - padLeft) / width, 0, 1)
-    const sourceIndex = clamp(offset.value + hoverRatio * denominator, 0, total - 1)
-    const leftIndex = Math.floor(sourceIndex)
-    const rightIndex = Math.min(total - 1, Math.ceil(sourceIndex))
-    const mix = sourceIndex - leftIndex
-    const leftRow = props.rows[leftIndex]
-    const rightRow = props.rows[rightIndex] || leftRow
-    const interpolatedX = padLeft + ((sourceIndex - offset.value) / denominator) * width
-    const downloads = lerp(Number(leftRow.downloads || 0), Number(rightRow.downloads || 0), mix)
-    const uploads = lerp(Number(leftRow.uploads || 0), Number(rightRow.uploads || 0), mix)
-    const downloadTraffic = lerp(
-      Number(leftRow.downloadTraffic || 0),
-      Number(rightRow.downloadTraffic || 0),
-      mix
-    )
-    const uploadTraffic = lerp(
-      Number(leftRow.uploadTraffic || 0),
-      Number(rightRow.uploadTraffic || 0),
-      mix
-    )
+    const sourceIndex = Math.round(clamp(offset.value + hoverRatio * denominator, 0, total - 1))
+    const row = props.rows[sourceIndex]
+    const snapX = padLeft + ((sourceIndex - offset.value) / denominator) * width
+    const downloads = Number(row.downloads || 0)
+    const uploads = Number(row.uploads || 0)
+    const downloadTraffic = Number(row.downloadTraffic || 0)
+    const uploadTraffic = Number(row.uploadTraffic || 0)
     const downloadY = padTop + height - (downloads / max) * height
     const uploadY = padTop + height - (uploads / max) * height
     const anchorY = Math.min(downloadY, uploadY)
     const placeBelow = anchorY < 104
     const tooltipInset = Math.min(mobile ? 116 : 132, Math.max(48, rect.width / 2 - 8))
-    const dateText =
-      leftRow.date === rightRow.date ? leftRow.date : `${leftRow.date} - ${rightRow.date}`
 
     ctx.strokeStyle = props.isDarkMode ? 'rgba(148, 163, 184, 0.35)' : 'rgba(91, 121, 132, 0.28)'
     ctx.lineWidth = 1
     ctx.beginPath()
-    ctx.moveTo(interpolatedX, padTop)
-    ctx.lineTo(interpolatedX, padTop + height)
+    ctx.moveTo(snapX, padTop)
+    ctx.lineTo(snapX, padTop + height)
     ctx.stroke()
 
     tooltip.value = {
-      left: clamp(interpolatedX, tooltipInset, rect.width - tooltipInset),
+      left: clamp(snapX, tooltipInset, rect.width - tooltipInset),
       top: placeBelow ? anchorY + 16 : anchorY - 12,
-      date: dateText,
-      downloads: Math.round(downloads),
-      uploads: Math.round(uploads),
+      date: row.date,
+      downloads,
+      uploads,
       downloadTraffic: formatBytes(downloadTraffic),
       uploadTraffic: formatBytes(uploadTraffic),
       transform: placeBelow ? 'translate(-50%, 0)' : 'translate(-50%, -100%)'
     }
-    drawHoverPoint({ x: interpolatedX, y: downloadY }, downloadColor)
-    drawHoverPoint({ x: interpolatedX, y: uploadY }, uploadColor)
+    drawHoverPoint({ x: snapX, y: downloadY }, downloadColor)
+    drawHoverPoint({ x: snapX, y: uploadY }, uploadColor)
   } else {
     tooltip.value = null
   }