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

src/views/dashboard/controls/DemandLog.vue

@@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="log-wrapper flex-v">
-    <el-popover
-      placement="bottom"
-      trigger="click"
-      :width="100"
-      v-if="dashboardStore.editMode"
-    >
+    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
       <template #reference>
         <span class="delete cp">
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -36,58 +31,58 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { useI18n } from "vue-i18n";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import Header from "../related/demand-log/Header.vue";
-import Content from "../related/demand-log/Content.vue";
+  import { useI18n } from "vue-i18n";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import Header from "../related/demand-log/Header.vue";
+  import Content from "../related/demand-log/Content.vue";
 
-/*global defineProps */
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-  activeIndex: { type: String, default: "" },
-});
-const { t } = useI18n();
-const dashboardStore = useDashboardStore();
+  /*global defineProps */
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    activeIndex: { type: String, default: "" },
+  });
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
 
-function removeWidget() {
-  dashboardStore.removeControls(props.data);
-}
+  function removeWidget() {
+    dashboardStore.removeControls(props.data);
+  }
 </script>
 <style lang="scss" scoped>
-.log-wrapper {
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  position: relative;
-  overflow: auto;
-}
-
-.delete {
-  position: absolute;
-  top: 5px;
-  right: 3px;
-}
-
-.header {
-  padding: 10px;
-  font-size: 12px;
-  border-bottom: 1px solid #dcdfe6;
-  min-width: 1024px;
-}
-
-.tools {
-  padding: 5px 0;
-  color: #999;
-  cursor: pointer;
-  position: relative;
-  text-align: center;
-
-  &:hover {
-    color: #409eff;
-    background-color: #eee;
+  .log-wrapper {
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    position: relative;
+    overflow: auto;
+  }
+
+  .delete {
+    position: absolute;
+    top: 5px;
+    right: 3px;
+  }
+
+  .header {
+    padding: 10px;
+    font-size: 12px;
+    border-bottom: 1px solid #dcdfe6;
+    min-width: 1024px;
+  }
+
+  .tools {
+    padding: 5px 0;
+    color: #999;
+    cursor: pointer;
+    position: relative;
+    text-align: center;
+
+    &:hover {
+      color: #409eff;
+      background-color: #eee;
+    }
   }
-}
 </style>