feat: 前端显示 SQL 文件执行进度

mayfly_go_web/src/components/progress-notify/progress-notify.vue

@@ -0,0 +1,41 @@
+<template>
+    <el-descriptions
+        border
+        size="small"
+        :title="`${progress.sqlFileName}`"
+    >
+        <el-descriptions-item label="时间">{{ state.elapsedTime }}</el-descriptions-item>
+        <el-descriptions-item label="已处理">{{ progress.executedStatements }}</el-descriptions-item>
+    </el-descriptions>
+</template>
+<script lang="ts" setup>
+
+import {onMounted, onUnmounted, reactive} from "vue";
+import {formatTime} from 'element-plus/es/components/countdown/src/utils';
+import {buildProgressProps} from "./progress-notify";
+
+const props = defineProps(buildProgressProps());
+
+const state = reactive({
+    elapsedTime: "00:00:00"
+});
+
+let timer = undefined;
+const startTime = Date.now()
+
+onMounted(async () => {
+  timer = setInterval(() => {
+    const elapsed = Date.now() - startTime;
+    state.elapsedTime = formatTime(elapsed, 'HH:mm:ss')
+  }, 1000);
+
+});
+
+onUnmounted(async () => {
+  if (timer != undefined) {
+    clearInterval(timer); // 在Vue实例销毁前，清除我们的定时器
+    timer = undefined;
+  }
+});
+
+</script>