chore(frontend): db-manage 业务组件路径调整 #7073

TencentBlueKing · Sep 24, 2024 · 2e4f236 · 2e4f236
1 parent e110e9a
commit 2e4f236
Show file tree

Hide file tree

Showing 324 changed files with 1,951 additions and 1,906 deletions.
diff --git a/...omponents/cluster-common/RenderStatus.vue → ...d/src/components/cluster-status/Index.vue b/...omponents/cluster-common/RenderStatus.vue → ...d/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;
   }

diff --git a/dbm-ui/frontend/src/components/cost-timer/CostTimer.vue b/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,

diff --git a/dbm-ui/frontend/src/components/db-form/index.vue b/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();

diff --git a/dbm-ui/frontend/src/components/db-member-selector/index_bak.vue b/dbm-ui/frontend/src/components/db-member-selector/index_bak.vue
@@ -11,11 +11,10 @@
  * the specific language governing permissions and limitations under the License.
 -->
 
-
 <template>
   <div
     class="db-member-selector-wrapper"
-    :class="{'is-focus': isFocous}">
+    :class="{ 'is-focus': isFocous }">
     <BkSelect
       class="db-member-selector"
       :clearable="false"
@@ -46,10 +45,10 @@
 
   import { useCopy } from '@hooks';
 
-  type GetUsesParams = ServiceParameters<typeof getUserList>
+  type GetUsesParams = ServiceParameters<typeof getUserList>;
 
   interface Props {
-    collapseTags?: boolean
+    collapseTags?: boolean;
   }
 
   withDefaults(defineProps<Props>(), {
@@ -62,7 +61,7 @@
   const copy = useCopy();
 
   const state = reactive({
-    list: [] as {username: string}[],
+    list: [] as { username: string }[],
   });
   const isFocous = ref(false);
 
@@ -72,7 +71,7 @@
   const fetchUseList = async (params: GetUsesParams = {}) => {
     await getUserList(params).then((res) => {
       // 过滤已经选中的用户
-      state.list = res.results.filter(item => !modelValue.value?.includes(item.username));
+      state.list = res.results.filter((item) => !modelValue.value?.includes(item.username));
     });
   };
   // 初始化加载
@@ -89,44 +88,44 @@
     modelValue.value = values;
   };
 
-  const handleFocus = () => isFocous.value = true;
-  const handleBlur = () => isFocous.value = false;
+  const handleFocus = () => (isFocous.value = true);
+  const handleBlur = () => (isFocous.value = false);
 
   const handleCopy = () => {
     copy(modelValue.value.join(';'));
   };
 </script>
 
 <style lang="less" scoped>
-.db-member-selector-wrapper {
-  position: relative;
-
-  &:hover,
-  &.is-focus {
-    .db-member-selector-copy {
-      display: block;
+  .db-member-selector-wrapper {
+    position: relative;
+
+    &:hover,
+    &.is-focus {
+      .db-member-selector-copy {
+        display: block;
+      }
     }
   }
-}
-
-.db-member-selector-copy {
-  position: absolute;
-  top: 50%;
-  right: 2px;
-  z-index: 99;
-  display: none;
-  width: 20px;
-  height: 20px;
-  margin-top: -10px;
-  margin-right: 4px;
-  font-size: 16px;
-  line-height: 20px;
-  cursor: pointer;
-  background-color: white;
-
-  &:hover {
-    color: @primary-color;
-    background-color: #e1ecff;
+
+  .db-member-selector-copy {
+    position: absolute;
+    top: 50%;
+    right: 2px;
+    z-index: 99;
+    display: none;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-right: 4px;
+    font-size: 16px;
+    line-height: 20px;
+    cursor: pointer;
+    background-color: white;
+
+    &:hover {
+      color: @primary-color;
+      background-color: #e1ecff;
+    }
   }
-}
 </style>
diff --git a/dbm-ui/frontend/src/components/db-table/OriginalTable.vue b/dbm-ui/frontend/src/components/db-table/OriginalTable.vue
@@ -41,9 +41,9 @@
     (e: 'clearSearch'): void;
   }
   interface Props {
-    columns: InstanceType<typeof Table>['$props']['columns'],
-    isAnomalies?: boolean,
-    isSearching?: boolean,
+    columns: InstanceType<typeof Table>['$props']['columns'];
+    isAnomalies?: boolean;
+    isSearching?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -55,9 +55,12 @@
 
   const tableKey = ref(Date.now().toString());
 
-  watch(() => props.columns, () => {
-    tableKey.value = Date.now().toString();
-  });
+  watch(
+    () => props.columns,
+    () => {
+      tableKey.value = Date.now().toString();
+    },
+  );
 
   const handleRefresh = () => emits('refresh');
   const handleClearSearch = () => emits('clearSearch');

diff --git a/dbm-ui/frontend/src/components/editable-info/index.vue b/dbm-ui/frontend/src/components/editable-info/index.vue
@@ -149,14 +149,14 @@
 
 <script setup lang="tsx">
   interface Props {
-    readonly?: boolean,
-    columns?: Array<Array<InfoColumn>>,
-    data?: Record<string, any>,
-    width?: string,
+    readonly?: boolean;
+    columns?: Array<Array<InfoColumn>>;
+    data?: Record<string, any>;
+    width?: string;
   }
 
   interface Emits {
-    (e: 'save', value: EditEmitData): void
+    (e: 'save', value: EditEmitData): void;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -172,9 +172,13 @@
   const loading = ref(false);
   const rules = [{ required: true, trigger: 'blur', message: t('必填项') }];
 
-  watch(() => props.columns, () => {
-    unique.value = generateId('EDITABLE_INFO_KEY_', 6);
-  }, { deep: true });
+  watch(
+    () => props.columns,
+    () => {
+      unique.value = generateId('EDITABLE_INFO_KEY_', 6);
+    },
+    { deep: true },
+  );
 
   /**
    * 编辑基本信息
@@ -205,13 +209,14 @@
       return;
     }
 
-    const validate = await editItemRef.value[0]?.validate()
+    const validate = await editItemRef.value[0]
+      ?.validate()
       .then(() => true)
       .catch(() => false);
     if (validate) {
       loading.value = true;
       let editResolve = (value: unknown = true) => value;
-      const promise = new Promise(resolve => editResolve = resolve);
+      const promise = new Promise((resolve) => (editResolve = resolve));
       emit('save', { ...editState, editResolve });
       const res = await promise;
       loading.value = false;

diff --git a/dbm-ui/frontend/src/components/function-controller/FunController.vue b/dbm-ui/frontend/src/components/function-controller/FunController.vue
@@ -14,8 +14,8 @@
   import { useFunController } from '@stores';
 
   interface Props {
-    moduleId: ExtractedControllerDataKeys,
-    controllerId?: T
+    moduleId: ExtractedControllerDataKeys;
+    controllerId?: T;
   }
 
   const props = defineProps<Props>();

diff --git a/...onents/cluster-common/HostAgentStatus.vue → ...rc/components/host-agent-status/Index.vue b/...onents/cluster-common/HostAgentStatus.vue → ...rc/components/host-agent-status/Index.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class="host-agent-status">
+  <div class="db-host-agent-status">
     <DbIcon
       svg
       :type="statusIcon" />
@@ -45,7 +45,7 @@
   const statusText = computed(() => textMap[props.data as keyof typeof textMap]);
 </script>
 <style lang="less">
-  .host-agent-status {
+  .db-host-agent-status {
     display: flex;
     align-items: center;
   }