From 6a7296bc6578fd7fed53951970fd5b421fd41a69 Mon Sep 17 00:00:00 2001
From: OriLight <61224409+orilights@users.noreply.github.com>
Date: Sun, 26 May 2024 13:04:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=20Web=20Worker?=
 =?UTF-8?q?=20=E5=AE=9A=E6=97=B6=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue         | 30 +++++++++++++++++++++++++++---
 src/worker/timer.js | 13 +++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/worker/timer.js

diff --git a/src/App.vue b/src/App.vue
index a6e8c1c..5a5db78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,6 +49,22 @@
           <SettingItem title="CPU图表">
             <Switch v-model="settings.showCpuChart" />
           </SettingItem>
+          <SettingItem v-show="settings.showCpuChart" title="记录时间">
+            <select v-model="settings.cpuChartHistoryKeep">
+              <option value="60">
+                1分钟
+              </option>
+              <option value="180">
+                3分钟
+              </option>
+              <option value="300">
+                5分钟
+              </option>
+              <option value="600">
+                10分钟
+              </option>
+            </select>
+          </SettingItem>
         </div>
       </div>
     </Transition>
@@ -102,7 +118,6 @@ import type { ServerData } from './types'
 
 const JSON_API = '/json/stats.json'
 const CARD_WIDTH = 350
-const REFRESH_INTERVAL = 500
 const MIN_FETCH_INTERVAL = 500
 
 const { width: WindowWidth } = useWindowSize()
@@ -111,6 +126,7 @@ const settings = useLocalStorage('sstl-settings', {
   layout: 'grid',
   compactMode: false,
   showCpuChart: false,
+  cpuChartHistoryKeep: 300,
 }, {
   mergeDefaults: true,
 })
@@ -124,6 +140,7 @@ const error = ref(false)
 const fetching = ref(false)
 const showSettingPanel = ref(false)
 const latestUpdated = ref(0)
+const timer = ref<Worker>()
 
 const serverCardCount = computed(() => {
   return Math.floor(WindowWidth.value / CARD_WIDTH) || 1
@@ -138,9 +155,11 @@ onMounted(() => {
     .then(res => res.json())
     .then((data) => {
       serverData.value = data
-      setInterval(() => {
+      timer.value = new Worker(new URL('./worker/timer.js', import.meta.url))
+      timer.value.addEventListener('message', () => {
         fetchData()
-      }, REFRESH_INTERVAL)
+      })
+      timer.value.postMessage('start')
     })
     .catch(() => {
       error.value = true
@@ -150,6 +169,11 @@ onMounted(() => {
     })
 })
 
+onUnmounted(() => {
+  if (timer.value)
+    timer.value.postMessage('stop')
+})
+
 function fetchData() {
   if (fetching.value)
     return
diff --git a/src/worker/timer.js b/src/worker/timer.js
new file mode 100644
index 0000000..6934e7a
--- /dev/null
+++ b/src/worker/timer.js
@@ -0,0 +1,13 @@
+let timer = null
+
+onmessage = (e) => {
+  if (e.data === 'start') {
+    timer = setInterval(() => {
+      postMessage('tick')
+    }, 500)
+  }
+  if (e.data === 'stop') {
+    clearInterval(timer)
+    timer = null
+  }
+}