fix(detail): 解决advanced页面和deploy页面内存泄漏问题 (#917)

- 避免组件卸载后定时器继续执行导致的内存泄漏
- 在 advanced 页面中添加 onUnmounted 钩子清理定时器
- 在 deploy 页面中添加 onUnmounted 钩子清理定时器

Author: kukinghan

src/pages/detail/advanced/index.vue

@@ -131,7 +131,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 import { getPurchaseList } from '@/api/detail';
 import { t } from '@/locales';
@@ -203,8 +203,9 @@ const pagination = ref({
 
 const updateCurrent = ref(0);
 
+const intervalId = ref();
 const stepUpdate = () => {
-  setInterval(() => {
+  intervalId.value = setInterval(() => {
     if (updateCurrent.value > 5) {
       updateCurrent.value = -1;
     }
@@ -225,6 +226,12 @@ const fetchData = async () => {
   }
 };
 
+onUnmounted(() => {
+  if (intervalId.value) {
+    clearInterval(intervalId.value);
+  }
+});
+
 onMounted(() => {
   stepUpdate();
   fetchData();

src/pages/detail/deploy/index.vue

@@ -163,11 +163,12 @@ const visible = ref(false);
 // monitorChart logic
 let monitorContainer: HTMLElement;
 let monitorChart: echarts.ECharts;
+const intervalId = ref();
 onMounted(() => {
   monitorContainer = document.getElementById('monitorContainer');
   monitorChart = echarts.init(monitorContainer);
   monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
-  setInterval(() => {
+  intervalId.value = setInterval(() => {
     monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
   }, 3000);
 });
@@ -194,6 +195,9 @@ const updateContainer = () => {
 };
 
 onUnmounted(() => {
+  if (intervalId.value) {
+    clearInterval(intervalId.value);
+  }
   window.removeEventListener('resize', updateContainer);
 });