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

src/views/dashboard/related/profile/Header.vue

@@ -27,114 +27,103 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchTasks"
-    >
+    <el-button class="search-btn" size="small" type="primary" @click="searchTasks">
       {{ t("search") }}
     </el-button>
     <el-button class="search-btn" size="small" @click="createTask">
       {{ t("newTask") }}
     </el-button>
   </div>
-  <el-dialog
-    v-model="newTask"
-    :destroy-on-close="true"
-    fullscreen
-    @closed="newTask = false"
-  >
+  <el-dialog v-model="newTask" :destroy-on-close="true" fullscreen @closed="newTask = false">
     <NewTask @close="newTask = false" />
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useProfileStore } from "@/store/modules/profile";
-import { useSelectorStore } from "@/store/modules/selectors";
-import { ElMessage } from "element-plus";
-import NewTask from "./components/NewTask.vue";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import { EntityType } from "../../data";
+  import { ref, watch } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useProfileStore } from "@/store/modules/profile";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import { ElMessage } from "element-plus";
+  import NewTask from "./components/NewTask.vue";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { EntityType } from "../../data";
 
-/*global defineProps */
-const props = defineProps({
-  needQuery: { type: Boolean, default: true },
-});
-const profileStore = useProfileStore();
-const appStore = useAppStoreWithOut();
-const selectorStore = useSelectorStore();
-const dashboardStore = useDashboardStore();
-const { t } = useI18n();
-const endpointName = ref<string>("");
-const newTask = ref<boolean>(false);
-
-if (props.needQuery) {
-  searchTasks();
-  searchEndpoints("");
-}
-
-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.endpoints[0].value;
-}
-
-function changeEndpoint(opt: any[]) {
-  endpointName.value = opt[0].value;
-}
-
-async function searchTasks() {
-  profileStore.setConditions({
-    serviceId:
-      (selectorStore.currentService && selectorStore.currentService.id) || "",
-    endpointName: endpointName.value,
+  /*global defineProps */
+  const props = defineProps({
+    needQuery: { type: Boolean, default: true },
   });
-  const res = await profileStore.getTaskList();
+  const profileStore = useProfileStore();
+  const appStore = useAppStoreWithOut();
+  const selectorStore = useSelectorStore();
+  const dashboardStore = useDashboardStore();
+  const { t } = useI18n();
+  const endpointName = ref<string>("");
+  const newTask = ref<boolean>(false);
 
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
-}
-
-function createTask() {
-  newTask.value = true;
-}
-
-watch(
-  () => selectorStore.currentService,
-  () => {
+  if (props.needQuery) {
     searchTasks();
-    console.log("service");
+    searchEndpoints("");
   }
-);
-watch(
-  () => appStore.durationTime,
-  () => {
-    if (dashboardStore.entity === EntityType[1].value) {
-      searchTasks();
+
+  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.endpoints[0].value;
+  }
+
+  function changeEndpoint(opt: any[]) {
+    endpointName.value = opt[0].value;
+  }
+
+  async function searchTasks() {
+    profileStore.setConditions({
+      serviceId: (selectorStore.currentService && selectorStore.currentService.id) || "",
+      endpointName: endpointName.value,
+    });
+    const res = await profileStore.getTaskList();
+
+    if (res.errors) {
+      ElMessage.error(res.errors);
     }
   }
-);
+
+  function createTask() {
+    newTask.value = true;
+  }
+
+  watch(
+    () => selectorStore.currentService,
+    () => {
+      searchTasks();
+      console.log("service");
+    },
+  );
+  watch(
+    () => appStore.durationTime,
+    () => {
+      if (dashboardStore.entity === EntityType[1].value) {
+        searchTasks();
+      }
+    },
+  );
 </script>
 <style lang="scss" scoped>
-.header {
-  padding: 10px;
-  font-size: 12px;
-  border-bottom: 1px solid #dcdfe6;
-}
+  .header {
+    padding: 10px;
+    font-size: 12px;
+    border-bottom: 1px solid #dcdfe6;
+  }
 
-.name {
-  width: 270px;
-}
+  .name {
+    width: 270px;
+  }
 </style>