Perf master

dbm-ui/frontend/.vscode/settings.json

@@ -57,4 +57,4 @@
     "titleBar.inactiveForeground": "#15202b99"
   },
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

dbm-ui/frontend/env.d.ts

@@ -36,21 +36,19 @@ declare module '*.css' {
   export default css;
 }
 
-declare interface Window {
-  changeConfirm: boolean | 'popover';
-  clipboardData: {
-    getData: (params: string) => string;
-  };
-  PROJECT_ENV: {
-    VITE_PUBLIC_PATH: string;
-    VITE_AJAX_URL_PREFIX: string;
-    VITE_ROUTER_PERFIX: string;
-  };
-  PROJECT_CONFIG: {
-    BIZ_ID: number;
-    TICKET_DETAIL_REQUEST_CONTROLLER: AbortController;
+declare module 'vite-plugin-monaco-editor' {
+  interface MonacoEditorOptions {
+    // 根据实际插件文档填写选项
+    language?: string;
+    theme?: string;
+    // 其他可能的选项...
+  }
+
+  const monacoEditorPlugin: (options: MonacoEditorOptions) => any;
+
+  export default {
+    default: monacoEditorPlugin,
   };
-  BKApp: App<Element>;
 }
 
 declare module 'js-cookie';
@@ -86,3 +84,20 @@ type KeyExpand<T> = {
 };
 
 type LeftIsExtendsRightReturnValue<L, R, V> = L extends R ? never : V;
+
+declare interface Window {
+  changeConfirm: boolean | 'popover';
+  clipboardData: {
+    getData: (params: string) => string;
+  };
+  PROJECT_ENV: {
+    VITE_PUBLIC_PATH: string;
+    VITE_AJAX_URL_PREFIX: string;
+    VITE_ROUTER_PERFIX: string;
+  };
+  PROJECT_CONFIG: {
+    BIZ_ID: number;
+    TICKET_DETAIL_REQUEST_CONTROLLER: AbortController;
+  };
+  BKApp: App<Element>;
+}

dbm-ui/frontend/src/components/cluster-common/RenderStatus.vue → dbm-ui/frontend/src/components/cluster-status/Index.vue

@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class="render-cluster-status">
+  <div class="db-cluster-status">
     <DbIcon
       svg
       :type="statusIcon" />
@@ -50,7 +50,7 @@
   const statusText = computed(() => textMap[props.data.toLocaleLowerCase() as keyof typeof textMap]);
 </script>
 <style lang="less">
-  .render-cluster-status {
+  .db-cluster-status {
     display: flex;
     align-items: center;
   }

dbm-ui/frontend/src/components/cost-timer/CostTimer.vue

@@ -21,27 +21,32 @@
   import { useIntervalFn } from '@vueuse/core';
 
   interface Props {
-    value: number,
-    isTiming: boolean,
-    startTime: number,
+    value: number;
+    isTiming: boolean;
+    startTime: number;
   }
 
   const props = defineProps<Props>();
 
   const costTime = ref(0);
   // 计时
-  const {
-    resume,
-    pause,
-  } = useIntervalFn(() => {
-    costTime.value = Math.floor(Date.now() / 1000) - props.startTime;
-  }, 1000, { immediate: false });
-
-  watch(() => props.value, (time) => {
-    if (!props.isTiming) {
-      costTime.value = time;
-    }
-  }, { immediate: true });
+  const { resume, pause } = useIntervalFn(
+    () => {
+      costTime.value = Math.floor(Date.now() / 1000) - props.startTime;
+    },
+    1000,
+    { immediate: false },
+  );
+
+  watch(
+    () => props.value,
+    (time) => {
+      if (!props.isTiming) {
+        costTime.value = time;
+      }
+    },
+    { immediate: true },
+  );
 
   watch(
     () => props.isTiming,

dbm-ui/frontend/src/components/db-form/index.vue

@@ -25,8 +25,8 @@
   import { debounce } from 'lodash';
 
   interface Props {
-    model?: Record<string, any>,
-    autoLabelWidth?: boolean,
+    model?: Record<string, any>;
+    autoLabelWidth?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -36,15 +36,19 @@
 
   const dbFormRef = ref();
 
-  watch(() => props.model, () => {
-    if (isUserChange.value) {
-      window.changeConfirm = true;
-    }
-  }, { deep: true });
+  watch(
+    () => props.model,
+    () => {
+      if (isUserChange.value) {
+        window.changeConfirm = true;
+      }
+    },
+    { deep: true },
+  );
 
   /** 用户主动操作变更表单 */
   const isUserChange = ref(false);
-  const handleUserChange = () => isUserChange.value = true;
+  const handleUserChange = () => (isUserChange.value = true);
 
   const getCssStyle = (el: HTMLElement, prop: string) => window.getComputedStyle(el, null).getPropertyValue(prop);
   const calcLableWidth = () => {
@@ -99,8 +103,8 @@
   });
 
   defineExpose({
-    validate: (fields?: string | Array<string>) => dbFormRef.value.validate(fields)
-      .catch((error: Error) => {
+    validate: (fields?: string | Array<string>) =>
+      dbFormRef.value.validate(fields).catch((error: Error) => {
         const errorItemEl = dbFormRef.value.$el.querySelector('.bk-form-item.is-error');
         if (errorItemEl) {
           errorItemEl.scrollIntoView();