build: migrate the build tool from vue-cli to vite4 (#208)

2025-10-14 20:01:28 +00:00 · 2022-12-17 14:07:03 +08:00
parent 1e0c253488
commit 44dcb1e7f6
214 changed files with 27014 additions and 54234 deletions
--- a/src/views/dashboard/related/profile/components/NewTask.vue
+++ b/src/views/dashboard/related/profile/components/NewTask.vue
@@ -31,19 +31,9 @@ limitations under the License. -->
    <div>
      <div class="label">{{ t("monitorTime") }}</div>
      <div>
-        <Radio
-          class="mb-5"
-          :value="monitorTime"
-          :options="InitTaskField.monitorTimeEn"
-          @change="changeMonitorTime"
-        />
+        <Radio class="mb-5" :value="monitorTime" :options="InitTaskField.monitorTimeEn" @change="changeMonitorTime" />
        <span class="date">
-          <TimePicker
-            :value="time"
-            position="bottom"
-            format="YYYY-MM-DD HH:mm:ss"
-            @input="changeTimeRange"
-          />
+          <TimePicker :value="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" @input="changeTimeRange" />
        </span>
      </div>
    </div>
@@ -58,21 +48,11 @@ limitations under the License. -->
    </div>
    <div>
      <div class="label">{{ t("minThreshold") }} (ms)</div>
-      <el-input-number
-        size="small"
-        class="profile-input"
-        :min="0"
-        v-model="minThreshold"
-      />
+      <el-input-number size="small" class="profile-input" :min="0" v-model="minThreshold" />
    </div>
    <div>
      <div class="label">{{ t("dumpPeriod") }}</div>
-      <Radio
-        class="mb-5"
-        :value="dumpPeriod"
-        :options="InitTaskField.dumpPeriod"
-        @change="changeDumpPeriod"
-      />
+      <Radio class="mb-5" :value="dumpPeriod" :options="InitTaskField.dumpPeriod" @change="changeDumpPeriod" />
    </div>
    <div>
      <div class="label">{{ t("maxSamplingCount") }}</div>
@@ -93,110 +73,110 @@ limitations under the License. -->
  </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { useProfileStore } from "@/store/modules/profile";
-import { useSelectorStore } from "@/store/modules/selectors";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import { ElMessage } from "element-plus";
-import { InitTaskField } from "./data";
-/* global defineEmits */
-const emits = defineEmits(["close"]);
-const profileStore = useProfileStore();
-const selectorStore = useSelectorStore();
-const appStore = useAppStoreWithOut();
-const { t } = useI18n();
-const endpointName = ref<string>("");
-const monitorTime = ref<string>(InitTaskField.monitorTimeEn[0].value);
-const monitorDuration = ref<string>(InitTaskField.monitorDuration[0].value);
-const time = ref<Date>(appStore.durationRow.start);
-const minThreshold = ref<number>(0);
-const dumpPeriod = ref<string>(InitTaskField.dumpPeriod[0].value);
-const maxSamplingCount = ref<string>(InitTaskField.maxSamplingCount[0].value);
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useProfileStore } from "@/store/modules/profile";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { ElMessage } from "element-plus";
+  import { InitTaskField } from "./data";
+  /* global defineEmits */
+  const emits = defineEmits(["close"]);
+  const profileStore = useProfileStore();
+  const selectorStore = useSelectorStore();
+  const appStore = useAppStoreWithOut();
+  const { t } = useI18n();
+  const endpointName = ref<string>("");
+  const monitorTime = ref<string>(InitTaskField.monitorTimeEn[0].value);
+  const monitorDuration = ref<string>(InitTaskField.monitorDuration[0].value);
+  const time = ref<Date>(appStore.durationRow.start);
+  const minThreshold = ref<number>(0);
+  const dumpPeriod = ref<string>(InitTaskField.dumpPeriod[0].value);
+  const maxSamplingCount = ref<string>(InitTaskField.maxSamplingCount[0].value);

-async function searchEndpoints(keyword: string) {
-  if (!selectorStore.currentService) {
-    return;
+  async function searchEndpoints(keyword: string) {
+    if (!selectorStore.currentService) {
+      return;
+    }
+    const service = selectorStore.currentService.id;
+    const res = await profileStore.getEndpoints(service, keyword);
+
+    if (res.errors) {
+      ElMessage.error(res.errors);
+      return;
+    }
+    endpointName.value = profileStore.taskEndpoints[0].value;
  }
-  const service = selectorStore.currentService.id;
-  const res = await profileStore.getEndpoints(service, keyword);

-  if (res.errors) {
-    ElMessage.error(res.errors);
-    return;
+  function changeMonitorTime(opt: string) {
+    monitorTime.value = opt;
  }
-  endpointName.value = profileStore.taskEndpoints[0].value;
-}

-function changeMonitorTime(opt: string) {
-  monitorTime.value = opt;
-}
-
-function changeMonitorDuration(val: string) {
-  monitorDuration.value = val;
-}
-
-function changeDumpPeriod(val: string) {
-  dumpPeriod.value = val;
-}
-
-function changeMaxSamplingCount(opt: any[]) {
-  maxSamplingCount.value = opt[0].value;
-}
-
-function changeEndpoint(opt: any[]) {
-  endpointName.value = opt[0].value;
-}
-
-async function createTask() {
-  emits("close");
-  const date = monitorTime.value === "0" ? new Date() : time.value;
-  const params = {
-    serviceId: selectorStore.currentService.id,
-    endpointName: endpointName.value,
-    startTime: date.getTime(),
-    duration: Number(monitorDuration.value),
-    minDurationThreshold: Number(minThreshold.value),
-    dumpPeriod: Number(dumpPeriod.value),
-    maxSamplingCount: Number(maxSamplingCount.value),
-  };
-  const res = await profileStore.createTask(params);
-  if (res.errors) {
-    ElMessage.error(res.errors);
-    return;
+  function changeMonitorDuration(val: string) {
+    monitorDuration.value = val;
  }
-  const { tip } = res.data;
-  if (tip) {
-    ElMessage.error(tip);
-    return;
+
+  function changeDumpPeriod(val: string) {
+    dumpPeriod.value = val;
+  }
+
+  function changeMaxSamplingCount(opt: any[]) {
+    maxSamplingCount.value = opt[0].value;
+  }
+
+  function changeEndpoint(opt: any[]) {
+    endpointName.value = opt[0].value;
+  }
+
+  async function createTask() {
+    emits("close");
+    const date = monitorTime.value === "0" ? new Date() : time.value;
+    const params = {
+      serviceId: selectorStore.currentService.id,
+      endpointName: endpointName.value,
+      startTime: date.getTime(),
+      duration: Number(monitorDuration.value),
+      minDurationThreshold: Number(minThreshold.value),
+      dumpPeriod: Number(dumpPeriod.value),
+      maxSamplingCount: Number(maxSamplingCount.value),
+    };
+    const res = await profileStore.createTask(params);
+    if (res.errors) {
+      ElMessage.error(res.errors);
+      return;
+    }
+    const { tip } = res.data;
+    if (tip) {
+      ElMessage.error(tip);
+      return;
+    }
+    ElMessage.success("Task created successfully");
+  }
+  function changeTimeRange(val: Date) {
+    time.value = val;
  }
-  ElMessage.success("Task created successfully");
-}
-function changeTimeRange(val: Date) {
-  time.value = val;
-}
 </script>
 <style lang="scss" scoped>
-.profile-task {
-  margin: 0 auto;
-  width: 400px;
-}
+  .profile-task {
+    margin: 0 auto;
+    width: 400px;
+  }

-.date {
-  font-size: 12px;
-}
+  .date {
+    font-size: 12px;
+  }

-.label {
-  margin-top: 10px;
-  font-size: 14px;
-}
+  .label {
+    margin-top: 10px;
+    font-size: 14px;
+  }

-.profile-input {
-  width: 300px;
-}
+  .profile-input {
+    width: 300px;
+  }

-.create-task-btn {
-  width: 300px;
-  margin-top: 50px;
-}
+  .create-task-btn {
+    width: 300px;
+    margin-top: 50px;
+  }
 </style>