20260726225220

code/fms/fms-vue/src/components/FpsMonitor.vue

@@ -20,6 +20,8 @@ let lastTime = 0;
 let totalFrames = 0;
 let totalTime = 0;
 let minFps = Infinity;
+const avgFps = ref(0);
+const minFpsDisplay = ref("--");
 
 function tick(now) {
   frames++;
@@ -30,6 +32,8 @@ function tick(now) {
     currentFps.value = fps;
     if (fps < minFps) minFps = fps;
     totalTime += elapsed;
+    avgFps.value = Math.round((totalFrames * 1000) / totalTime);
+    minFpsDisplay.value = minFps;
     const next =
       history.value.length >= props.historySize ? history.value.slice(1) : history.value.slice();
     next.push(fps);
@@ -49,9 +53,6 @@ onBeforeUnmount(() => {
   if (rafId) cancelAnimationFrame(rafId);
 });
 
-const avgFps = computed(() => (totalTime > 0 ? Math.round((totalFrames * 1000) / totalTime) : 0));
-const minFpsDisplay = computed(() => (minFps === Infinity ? "--" : minFps));
-
 const fpsColor = computed(() => {
   const f = currentFps.value;
   if (f >= 50) return "#52c41a";
@@ -70,7 +71,11 @@ function reset() {
   totalFrames = 0;
   totalTime = 0;
   minFps = Infinity;
+  frames = 0;
+  lastTime = performance.now();
   currentFps.value = 0;
+  avgFps.value = 0;
+  minFpsDisplay.value = "--";
 }
 </script>
 
@@ -104,7 +109,7 @@ function reset() {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  width: 108px;
+  width: 132px;
   padding: 8px 10px;
   font-size: 12px;
   line-height: 1.4;
@@ -160,11 +165,12 @@ function reset() {
   align-items: flex-end;
   gap: 1px;
   height: 32px;
+  overflow: hidden;
 }
 
 .fps-monitor__bar {
   flex: 1;
-  min-width: 2px;
+  min-width: 0;
   border-radius: 1px;
   transition:
     height 0.2s ease,