Revert "feat(frontend): 集群标准化 TencentBlueKing#4654"

This reverts commit b9738f0.
JustaCattt · Nov 21, 2024 · 99bb53b · 99bb53b
1 parent b9738f0
commit 99bb53b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 49 deletions.
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
@@ -68,7 +68,18 @@
     </template>
   </BkDialog>
 </template>
-<script lang="ts">
+<script setup lang="ts" generic="T extends DBTypes.MYSQL | DBTypes.TENDBCLUSTER">
+  import type { ClusterInfo } from '@services/types';
+
+  import { ClusterTypes, DBTypes } from '@common/const';
+
+  import { t } from '@locales/index';
+
+  import ClusterSelect from './components/cluster-select/Index.vue';
+  import PanelTab from './components/common/PanelTab.vue';
+  // import ManualInput from './components/manual-input/Index.vue';
+  import PreviewResult from './components/preview-result/Index.vue';
+
   interface SelectedMap {
     [DBTypes.MYSQL]: {
       [ClusterTypes.TENDBHA]: ClusterInfo[];
@@ -78,18 +89,6 @@
       [ClusterTypes.TENDBCLUSTER]: ClusterInfo[];
     };
   }
-</script>
-<script setup lang="ts" generic="T extends keyof SelectedMap">
-  import { useI18n } from 'vue-i18n';
-
-  import type { ClusterInfo } from '@services/types';
-
-  import { ClusterTypes, DBTypes } from '@common/const';
-
-  import ClusterSelect from './components/cluster-select/Index.vue';
-  import PanelTab, { type PanelTabKeys } from './components/common/PanelTab.vue';
-  // import ManualInput from './components/manual-input/Index.vue';
-  import PreviewResult from './components/preview-result/Index.vue';
 
   interface Props {
     dbType: T;
@@ -108,14 +107,11 @@
     default: false,
   });
 
-  const { t } = useI18n();
-
-  const panelTabActive = ref<PanelTabKeys>(ClusterTypes.TENDBHA);
-  const lastValues = reactive<Record<PanelTabKeys, ClusterInfo[]>>({
+  const panelTabActive = ref();
+  const lastValues = reactive<NonNullable<Record<string, ClusterInfo[]>>>({
     [ClusterTypes.TENDBHA]: [],
     [ClusterTypes.TENDBSINGLE]: [],
     [ClusterTypes.TENDBCLUSTER]: [],
-    manual: [],
   });
 
   // const renderCom = computed(
@@ -138,7 +134,7 @@
         Object.assign(lastValues, props.selected);
         for (const [key, values] of Object.entries(props.selected)) {
           if (values.length > 0) {
-            panelTabActive.value = key as PanelTabKeys;
+            panelTabActive.value = key;
             break;
           }
         }

diff --git a/.../src/views/cluster-standardize/components/cluster-selector/components/common/PanelTab.vue b/.../src/views/cluster-standardize/components/cluster-selector/components/common/PanelTab.vue
@@ -14,7 +14,7 @@
 <template>
   <div class="selector-panel-tab">
     <BkPopover
-      v-for="item in tabListMap[dbType]"
+      v-for="item in panelList"
       :key="item.id"
       ref="tabTipsRef"
       theme="light">
@@ -41,21 +41,31 @@
     </BkPopover>
   </div>
 </template>
-<script lang="ts">
-  import { ClusterTypes, DBTypes } from '@common/const';
-
-  import { t } from '@locales/index';
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
 
-  export type PanelTabKeys = ClusterTypes.TENDBHA | ClusterTypes.TENDBSINGLE | ClusterTypes.TENDBCLUSTER | 'manual';
+  import { ClusterTypes, DBTypes } from '@common/const';
 
   interface TabItem {
-    id: PanelTabKeys;
+    id: string;
     name: string;
   }
 
-  const tabListMap: {
-    [key in string]: TabItem[];
-  } = {
+  interface Props {
+    dbType: DBTypes;
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const tabTipsRef = ref();
+
+  const tabListMap = {
     [DBTypes.MYSQL]: [
       {
         id: ClusterTypes.TENDBHA,
@@ -72,26 +82,15 @@
         name: t('TenDB集群'),
       },
     ],
-    // manual: [
-    //   {
-    //     id: 'manual',
-    //     name: t('手动输入'),
-    //   }
-    // ]
-  };
-</script>
-<script setup lang="ts">
-  interface Props {
-    dbType: keyof typeof tabListMap;
-  }
-
-  const props = defineProps<Props>();
-
-  const modelValue = defineModel<PanelTabKeys>({
-    required: true,
-  });
-
-  const tabTipsRef = ref();
+  } as Record<DBTypes, TabItem[]>;
+
+  const panelList = computed(() => [
+    ...tabListMap[props.dbType],
+    // {
+    //   id: 'manual',
+    //   name: t('手动输入'),
+    // },
+  ]);
 
   watch(
     () => props.dbType,