From acb22bc56a9ef40b5d3709be5c12c2438d750d09 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Mon, 2 Dec 2024 10:27:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=B8=B4=E6=97=B6=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E4=BF=AE=E6=94=B9=E8=B0=83=E6=95=B4=E5=8F=8A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20#8250=20#=20Reviewed,=20transaction=20id:=2025459?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/services/source/permission.ts         |  15 +-
 .../temporary-paassword-modify/Index.vue      | 225 +++++++++++-
 .../{index => }/components/UpdateResult.vue   | 201 ++++++++---
 .../components/form-item/InstanceList.vue     |   0
 .../components/form-item/PasswordInput.vue    |   0
 .../components/form-item/ValidDuration.vue    |   0
 .../render-passwrod-instance/Index.vue        |   0
 .../RenderInstance.vue                        |   0
 .../index/Index.vue                           | 340 ------------------
 .../temporary-paassword-modify/routes.ts      |  13 -
 10 files changed, 371 insertions(+), 423 deletions(-)
 rename dbm-ui/frontend/src/views/temporary-paassword-modify/{index => }/components/UpdateResult.vue (54%)
 rename dbm-ui/frontend/src/views/temporary-paassword-modify/{index => }/components/form-item/InstanceList.vue (100%)
 rename dbm-ui/frontend/src/views/temporary-paassword-modify/{index => }/components/form-item/PasswordInput.vue (100%)
 rename dbm-ui/frontend/src/views/temporary-paassword-modify/{index => }/components/form-item/ValidDuration.vue (100%)
 rename dbm-ui/frontend/src/views/temporary-paassword-modify/{index => }/components/render-passwrod-instance/Index.vue (100%)
 rename dbm-ui/frontend/src/views/temporary-paassword-modify/{index => }/components/render-passwrod-instance/RenderInstance.vue (100%)
 delete mode 100644 dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue

diff --git a/dbm-ui/frontend/src/services/source/permission.ts b/dbm-ui/frontend/src/services/source/permission.ts
index 51c285a659..33cab05fb6 100644
--- a/dbm-ui/frontend/src/services/source/permission.ts
+++ b/dbm-ui/frontend/src/services/source/permission.ts
@@ -88,14 +88,7 @@ export const modifyAdminPassword = (params: {
   }[];
   // 是否异步
   is_async?: boolean;
-}) =>
-  http.post<
-    | {
-        success: AdminPasswordResultItem[];
-        fail: AdminPasswordResultItem[];
-      }
-    | string // 异步修改时返回root_id
-  >(`${path}/modify_admin_password/`, params);
+}) => http.post<string>(`${path}/modify_admin_password/`, params);
 
 /**
  * 查询生效实例密码(admin)
@@ -120,10 +113,8 @@ export const queryAsyncModifyResult = (params: { root_id: string }) =>
   http.post<{
     status: string;
     error?: string;
-    data: {
-      success: AdminPasswordResultItem[];
-      fail: AdminPasswordResultItem[];
-    };
+    success?: AdminPasswordResultItem[];
+    fail?: AdminPasswordResultItem[];
     result?: boolean;
   }>(`${path}/query_async_modify_result/`, params);
 
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/Index.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/Index.vue
index 7c2aa3f3e1..a370ee34e6 100644
--- a/dbm-ui/frontend/src/views/temporary-paassword-modify/Index.vue
+++ b/dbm-ui/frontend/src/views/temporary-paassword-modify/Index.vue
@@ -1,3 +1,226 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
 <template>
-  <RouterView />
+  <SmartAction :offset-target="getSmartActionOffsetTarget">
+    <div class="password-temporary-modify">
+      <template v-if="submitted">
+        <UpdateResult
+          :instance-list="formData.instanceList"
+          :password="formData.password"
+          :root-id="rootId"
+          @refresh="handleRefresh"
+          @retry="handleSubmit" />
+      </template>
+      <DbForm
+        v-else
+        ref="formRef"
+        class="password-form"
+        :label-width="200"
+        :model="formData">
+        <InstanceList v-model="formData.instanceList" />
+        <BkFormItem
+          :label="t('统一临时密码')"
+          property="password"
+          required>
+          <PasswordInput
+            v-model="formData.password"
+            :button-disabled="!instanceDbType"
+            :button-disabled-tip="t('请先添加实例')"
+            :db-type="instanceDbType"
+            @verify-result="verifyResult" />
+        </BkFormItem>
+        <ValidDuration
+          v-model="formData.validDuration"
+          v-model:valid-duration-type="formData.validDurationType" />
+      </DbForm>
+    </div>
+    <template
+      v-if="!submitting && !submitted"
+      #action>
+      <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合要求'),
+          disabled: !Boolean(formData.password) || passwordIsPass,
+        }"
+        class="w-88"
+        :disabled="!passwordIsPass"
+        theme="primary"
+        @click="submitValidator">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton class="ml8 w-88">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+  <RenderPasswordInstance />
 </template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { modifyAdminPassword } from '@services/source/permission';
+
+  import { ClusterTypes, DBTypes } from '@common/const';
+
+  import PasswordInput from '@views/db-manage/common/password-input/Index.vue';
+
+  import InstanceList from './components/form-item/InstanceList.vue';
+  import ValidDuration from './components/form-item/ValidDuration.vue';
+  import RenderPasswordInstance from './components/render-passwrod-instance/Index.vue';
+  import UpdateResult from './components/UpdateResult.vue';
+
+  const { t } = useI18n();
+
+  const createDefaultData = () => ({
+    instanceList: [] as { ip: string; port: number; bk_cloud_id: number; cluster_type: ClusterTypes; role: string }[],
+    password: '',
+    validDuration: 1,
+    validDurationType: 'day',
+  });
+
+  const formRef = ref();
+  const rootId = ref('');
+  const instanceDbType = ref<DBTypes>();
+  const passwordIsPass = ref(false);
+  const submitted = ref(false);
+  const formData = reactive(createDefaultData());
+
+  watch(
+    formData,
+    () => {
+      console.log('formData = ', formData);
+      const { instanceList } = formData;
+      if (instanceList.length > 0) {
+        const instance = instanceList[0];
+        const dbTypeMap = {
+          [ClusterTypes.TENDBSINGLE]: DBTypes.MYSQL,
+          [ClusterTypes.TENDBHA]: DBTypes.MYSQL,
+          [ClusterTypes.TENDBCLUSTER]: DBTypes.TENDBCLUSTER,
+          [ClusterTypes.SQLSERVER_HA]: DBTypes.SQLSERVER,
+          [ClusterTypes.SQLSERVER_SINGLE]: DBTypes.SQLSERVER,
+        } as Record<ClusterTypes, DBTypes>;
+        instanceDbType.value = dbTypeMap[instance.cluster_type];
+      }
+    },
+    {
+      deep: true,
+    },
+  );
+
+  const { run: modifyAdminPasswordRun, loading: submitting } = useRequest(modifyAdminPassword, {
+    manual: true,
+    onSuccess(data) {
+      submitted.value = true;
+      window.changeConfirm = false;
+      rootId.value = data;
+    },
+  });
+
+  const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
+
+  const submitValidator = async () => {
+    await formRef.value.validate();
+    handleSubmit(formData.instanceList);
+  };
+
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
+  const handleSubmit = (
+    instanceList: {
+      ip: string;
+      port: number;
+      bk_cloud_id: number;
+      cluster_type: ClusterTypes;
+      role: string;
+    }[] = [],
+  ) => {
+    const roleMap: Record<string, string> = {};
+    const instanceListParam = (instanceList.length ? instanceList : formData.instanceList).map((instance) => {
+      const { ip, port, bk_cloud_id, role, cluster_type } = instance;
+      roleMap[`${ip}:${port}`] = role;
+      return { ip, port, bk_cloud_id, role, cluster_type };
+    });
+
+    const lockHour = formData.validDuration * (formData.validDurationType === 'day' ? 24 : 1);
+
+    modifyAdminPasswordRun({
+      lock_hour: lockHour,
+      password: formData.password,
+      instance_list: instanceListParam,
+      is_async: true,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, createDefaultData());
+  };
+
+  const handleRefresh = () => {
+    handleReset();
+    submitted.value = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .password-temporary-modify {
+    margin-bottom: 32px;
+    background-color: #fff;
+    border-radius: 2px;
+
+    .password-form {
+      padding: 32px 0 24px;
+      border-radius: 2px;
+      box-shadow: 0 3px 4px 0 #0000000a;
+
+      :deep(.password-form-instance) {
+        display: flex;
+        align-items: center;
+      }
+
+      :deep(.password-form-item) {
+        width: 386px;
+      }
+    }
+
+    .btn-area {
+      padding: 24px 0 24px 200px;
+      background-color: #f5f7fa;
+    }
+
+    :deep(.instance-tip) {
+      color: #ff9c01;
+    }
+
+    :deep(.type-icon) {
+      font-size: 16px;
+    }
+
+    .form-item-input {
+      min-width: 300px;
+    }
+
+    .form-item-suffix {
+      width: 88px;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/UpdateResult.vue
similarity index 54%
rename from dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue
rename to dbm-ui/frontend/src/views/temporary-paassword-modify/components/UpdateResult.vue
index be587e5291..bedb013240 100644
--- a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue
+++ b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/UpdateResult.vue
@@ -12,18 +12,51 @@
 -->
 
 <template>
+  <div
+    v-if="isActive"
+    class="submitting-mask">
+    <DbIcon
+      class="submitting-icon"
+      svg
+      type="sync-pending" />
+    <p class="submitting-text mt16">
+      {{ t('密码正在修改中，请稍等') }}
+    </p>
+    <RouterLink
+      class="mt16 mb16"
+      target="_blank"
+      :to="{
+        name: 'taskHistoryDetail',
+        params: {
+          root_id: rootId,
+        },
+      }">
+      {{ t('查看详情') }}
+    </RouterLink>
+  </div>
   <RenderSuccess
-    class="password-temporary-modify-success"
+    v-else
+    class="modify-success"
     :steps="[]">
     <template #title>
       <I18nT
         keypath="密码修改完成，成功n个，失败n个"
         tag="span">
-        <span class="title-success">{{ successListLength }}</span>
-        <span class="title-error">{{ errorListLength }}</span>
+        <span class="title-success">{{ successList.length }}</span>
+        <span class="title-error">{{ errorList.length }}</span>
       </I18nT>
     </template>
-    <slot />
+    <RouterLink
+      class="mt16 mb16"
+      target="_blank"
+      :to="{
+        name: 'taskHistoryDetail',
+        params: {
+          root_id: rootId,
+        },
+      }">
+      {{ t('查看详情') }}
+    </RouterLink>
     <div class="password-display">
       {{ t('当前密码') }} : {{ passwordDisplay }}
       <BkButton
@@ -49,7 +82,7 @@
     <template #action>
       <div>
         <BkButton
-          :disabled="!errorListLength"
+          :disabled="!errorList.length"
           theme="primary"
           @click="handleRetry">
           {{ t('失败重试') }}
@@ -61,7 +94,7 @@
         </BkButton>
       </div>
       <div
-        v-if="errorListLength || errorMessage"
+        v-if="errorList.length || errorMessage"
         class="list-box">
         <template v-if="errorMessage">
           <div class="list-box-head">
@@ -71,9 +104,9 @@
             {{ errorMessage }}
           </div>
         </template>
-        <template v-if="errorListLength">
+        <template v-if="errorList.length">
           <div class="list-box-head">
-            {{ t('失败的实例') }}({{ errorListLength }})
+            {{ t('失败的实例') }}({{ errorList.length }})
             <BkButton
               text
               theme="primary"
@@ -86,7 +119,7 @@
               v-for="(item, index) in errorList"
               :key="index"
               class="list-box-content-item">
-              {{ item.ip }}:{{ item.port }}
+              {{ item }}
             </span>
           </div>
         </template>
@@ -95,75 +128,95 @@
   </RenderSuccess>
 </template>
 <script setup lang="ts">
-  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
 
-  import { queryAsyncModifyResult } from '@services/source/permission';
+  import { modifyAdminPassword, queryAsyncModifyResult } from '@services/source/permission';
 
   import { useCopy } from '@hooks';
 
-  import type { ClusterTypes } from '@common/const';
-
   import RenderSuccess from '@components/ticket-success/Index.vue';
 
-  interface RetryItem {
-    ip: string;
-    port: number;
-    bk_cloud_id: number;
-    cluster_type: ClusterTypes;
-    role: string;
-  }
+  import { useTimeoutPoll } from '@vueuse/core';
 
   interface Props {
-    submitResult?: ServiceReturnType<typeof queryAsyncModifyResult>;
-    submitLength: number;
-    submitRoleMap: Record<string, string>;
+    instanceList: ServiceParameters<typeof modifyAdminPassword>['instance_list'];
     password: string;
+    rootId: string;
   }
 
   interface Emits {
-    (e: 'retry', value: RetryItem[]): void;
+    (e: 'retry', value: Props['instanceList']): void;
     (e: 'refresh'): void;
   }
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const copy = useCopy();
+
   const isShowPassword = ref(false);
+  const successList = ref<string[]>([]);
+  const errorList = ref<string[]>([]);
+  const errorMessage = ref('');
 
   const passwordDisplay = computed(() => (isShowPassword.value ? props.password : '********'));
-  const errorMessage = computed(() => {
-    if (props.submitResult?.status === 'FINISHED' && !props.submitResult?.result) {
-      return props.submitResult?.error;
-    }
-    return '';
+
+  // 轮询
+  const { isActive, resume, pause } = useTimeoutPoll(() => {
+    queryAsyncModifyResultRun({
+      root_id: props.rootId,
+    });
+  }, 2000);
+
+  const getInstanceList = (list: ServiceReturnType<typeof queryAsyncModifyResult>['success'] = []) => {
+    const arr: string[] = [];
+    list.forEach((item) => {
+      item.instances.forEach((insItem) => {
+        insItem.addresses.forEach((addressItem) => {
+          arr.push(`${addressItem.ip}:${addressItem.port}`);
+        });
+      });
+    });
+    return arr;
+  };
+
+  const { run: queryAsyncModifyResultRun } = useRequest(queryAsyncModifyResult, {
+    manual: true,
+    onSuccess(data) {
+      /**
+       * 设置轮询
+       * FINISHED: 完成态
+       * FAILED: 失败态
+       * REVOKED: 取消态
+       */
+      if (['FINISHED', 'FAILED', 'REVOKED'].includes(data.status)) {
+        pause();
+      } else if (!isActive.value) {
+        resume();
+      }
+      if (data.status === 'FINISHED') {
+        errorMessage.value = data.error as string;
+        successList.value = data.success ? getInstanceList(data.success) : [];
+        errorList.value = data.fail
+          ? getInstanceList(data.fail)
+          : props.instanceList.map((item) => `${item.ip}:${item.port}`);
+      }
+    },
   });
-  const errorList = computed(() =>
-    _.flatMap(props.submitResult?.data?.fail || [], (item) => {
-      const { bk_cloud_id, cluster_type } = item;
-      const roleMap = props.submitRoleMap;
-      return _.flatMap(item.instances, (insItem) =>
-        insItem.addresses.map((addressItem) => ({
-          ...addressItem,
-          bk_cloud_id,
-          cluster_type,
-          role: roleMap[`${addressItem.ip}:${addressItem.port}`],
-        })),
-      );
-    }),
-  );
-  const successListLength = computed(() =>
-    _.sumBy(props.submitResult?.data?.success, (item) =>
-      _.sumBy(item.instances, (insItem) => insItem.addresses.length),
-    ),
-  );
-  const errorListLength = computed(
-    () =>
-      _.sumBy(props.submitResult?.data?.fail, (item) =>
-        _.sumBy(item.instances, (insItem) => insItem.addresses.length),
-      ) || props.submitLength - successListLength.value,
+
+  watch(
+    () => props.rootId,
+    () => {
+      if (props.rootId && !isActive.value) {
+        resume();
+      }
+    },
+    {
+      immediate: true,
+    },
   );
 
   const handleShowPassword = () => {
@@ -175,21 +228,55 @@
   };
 
   const handleCopy = () => {
-    const copyList = errorList.value.map((item) => `${item.ip}:${item.port}`);
-    copy(copyList.join('\n'));
+    copy(errorList.value.join('\n'));
   };
 
   const handleRetry = () => {
-    emits('retry', errorList.value);
+    emits(
+      'retry',
+      props.instanceList.filter((item) => !successList.value.includes(`${item.ip}:${item.port}`)),
+    );
   };
 
   const handleGoBack = () => {
     emits('refresh');
   };
+
+  onBeforeUnmount(() => {
+    pause();
+  });
 </script>
 
 <style lang="less" scoped>
-  .password-temporary-modify-success {
+  .submitting-mask {
+    display: flex;
+    padding: 90px 0 138px;
+    flex-direction: column;
+    align-items: center;
+
+    .submitting-icon {
+      font-size: 64px;
+      color: @primary-color;
+      animation: rotate 2s linear infinite;
+    }
+
+    .submitting-text {
+      font-size: 24px;
+      color: #313238;
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(-360deg);
+      }
+    }
+  }
+
+  .modify-success {
     padding: 60px 0;
     background-color: #fff;
 
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/form-item/InstanceList.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/form-item/InstanceList.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/form-item/InstanceList.vue
rename to dbm-ui/frontend/src/views/temporary-paassword-modify/components/form-item/InstanceList.vue
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/form-item/PasswordInput.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/form-item/PasswordInput.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/form-item/PasswordInput.vue
rename to dbm-ui/frontend/src/views/temporary-paassword-modify/components/form-item/PasswordInput.vue
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/form-item/ValidDuration.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/form-item/ValidDuration.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/form-item/ValidDuration.vue
rename to dbm-ui/frontend/src/views/temporary-paassword-modify/components/form-item/ValidDuration.vue
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/render-passwrod-instance/Index.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/render-passwrod-instance/Index.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/render-passwrod-instance/Index.vue
rename to dbm-ui/frontend/src/views/temporary-paassword-modify/components/render-passwrod-instance/Index.vue
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/render-passwrod-instance/RenderInstance.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/components/render-passwrod-instance/RenderInstance.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/render-passwrod-instance/RenderInstance.vue
rename to dbm-ui/frontend/src/views/temporary-paassword-modify/components/render-passwrod-instance/RenderInstance.vue
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue
deleted file mode 100644
index 4585d0e437..0000000000
--- a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue
+++ /dev/null
@@ -1,340 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <SmartAction :offset-target="getSmartActionOffsetTarget">
-    <div class="password-temporary-modify">
-      <template v-if="submitted">
-        <div
-          v-if="isActive"
-          class="submitting-mask">
-          <DbIcon
-            class="submitting-icon"
-            svg
-            type="sync-pending" />
-          <p class="submitting-text mt16">
-            {{ t('密码正在修改中，请稍等') }}
-          </p>
-          <RouterLink
-            class="mt16 mb16"
-            target="_blank"
-            :to="{
-              name: 'taskHistoryDetail',
-              params: {
-                root_id: rootId,
-              },
-            }">
-            {{ t('查看详情') }}
-          </RouterLink>
-        </div>
-        <UpdateResult
-          v-else
-          :password="formData.password"
-          :submit-length="submitLength"
-          :submit-result="submitResult"
-          :submit-role-map="submitRoleMap"
-          @refresh="handleRefresh"
-          @retry="handleSubmit">
-          <RouterLink
-            class="mt16 mb16"
-            target="_blank"
-            :to="{
-              name: 'taskHistoryDetail',
-              params: {
-                root_id: rootId,
-              },
-            }">
-            {{ t('查看详情') }}
-          </RouterLink>
-        </UpdateResult>
-      </template>
-      <DbForm
-        v-else
-        ref="formRef"
-        class="password-form"
-        :label-width="200"
-        :model="formData">
-        <InstanceList v-model="formData.instanceList" />
-        <BkFormItem
-          :label="t('统一临时密码')"
-          property="password"
-          required>
-          <PasswordInput
-            v-model="formData.password"
-            :button-disabled="!instanceDbType"
-            :button-disabled-tip="t('请先添加实例')"
-            :db-type="instanceDbType"
-            @verify-result="verifyResult" />
-        </BkFormItem>
-        <ValidDuration
-          v-model="formData.validDuration"
-          v-model:valid-duration-type="formData.validDurationType" />
-      </DbForm>
-    </div>
-    <template
-      v-if="!submitting && !submitted"
-      #action>
-      <BkButton
-        v-bk-tooltips="{
-          content: t('密码不符合要求'),
-          disabled: !Boolean(formData.password) || passwordIsPass,
-        }"
-        class="w-88"
-        :disabled="!passwordIsPass"
-        theme="primary"
-        @click="submitValidator">
-        {{ t('提交') }}
-      </BkButton>
-      <DbPopconfirm
-        :confirm-handler="handleReset"
-        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
-        :title="t('确认重置页面')">
-        <BkButton class="ml8 w-88">
-          {{ t('重置') }}
-        </BkButton>
-      </DbPopconfirm>
-    </template>
-  </SmartAction>
-  <RenderPasswordInstance />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import { modifyAdminPassword, queryAsyncModifyResult } from '@services/source/permission';
-
-  import { ClusterTypes, DBTypes } from '@common/const';
-
-  import PasswordInput from '@views/db-manage/common/password-input/Index.vue';
-
-  import { useTimeoutPoll } from '@vueuse/core';
-
-  import InstanceList from './components/form-item/InstanceList.vue';
-  import ValidDuration from './components/form-item/ValidDuration.vue';
-  import RenderPasswordInstance from './components/render-passwrod-instance/Index.vue';
-  import UpdateResult from './components/UpdateResult.vue';
-
-  const { t } = useI18n();
-
-  const createDefaultData = () => ({
-    instanceList: [] as { ip: string; port: number; bk_cloud_id: number; cluster_type: ClusterTypes; role: string }[],
-    password: '',
-    validDuration: 1,
-    validDurationType: 'day',
-  });
-
-  const passwordIsPass = ref(false);
-  const submitted = ref(false);
-  const submitLength = ref(0);
-  const formRef = ref();
-  const submitRoleMap = shallowRef<Record<string, string>>({});
-  const formData = reactive(createDefaultData());
-  const instanceDbType = ref<DBTypes>();
-  const rootId = ref('');
-  const submitResult = ref<ServiceReturnType<typeof queryAsyncModifyResult>>();
-
-  watch(
-    formData,
-    () => {
-      console.log('formData = ', formData);
-      const { instanceList } = formData;
-      if (instanceList.length > 0) {
-        const instance = instanceList[0];
-        const dbTypeMap = {
-          [ClusterTypes.TENDBSINGLE]: DBTypes.MYSQL,
-          [ClusterTypes.TENDBHA]: DBTypes.MYSQL,
-          [ClusterTypes.TENDBCLUSTER]: DBTypes.TENDBCLUSTER,
-          [ClusterTypes.SQLSERVER_HA]: DBTypes.SQLSERVER,
-          [ClusterTypes.SQLSERVER_SINGLE]: DBTypes.SQLSERVER,
-        } as Record<ClusterTypes, DBTypes>;
-        instanceDbType.value = dbTypeMap[instance.cluster_type];
-      }
-    },
-    {
-      deep: true,
-    },
-  );
-
-  // 轮询
-  const { isActive, resume, pause } = useTimeoutPoll(() => {
-    queryAsyncModifyResultRun({
-      root_id: rootId.value,
-    });
-  }, 2000);
-
-  const { run: queryAsyncModifyResultRun } = useRequest(queryAsyncModifyResult, {
-    manual: true,
-    onSuccess(data) {
-      /**
-       * 设置轮询
-       * FINISHED: 完成态
-       * FAILED: 失败态
-       * REVOKED: 取消态
-       */
-      if (['FINISHED', 'FAILED', 'REVOKED'].includes(data.status)) {
-        submitResult.value = data;
-        pause();
-      } else if (!isActive.value) {
-        resume();
-      }
-    },
-  });
-
-  const { run: modifyAdminPasswordRun, loading: submitting } = useRequest(modifyAdminPassword, {
-    manual: true,
-    onSuccess(data) {
-      submitted.value = true;
-      window.changeConfirm = false;
-      rootId.value = data as string;
-      resume();
-    },
-  });
-
-  const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
-
-  const submitValidator = async () => {
-    await formRef.value.validate();
-    handleSubmit(formData.instanceList);
-  };
-
-  const verifyResult = (isPass: boolean) => {
-    passwordIsPass.value = isPass;
-  };
-
-  const handleSubmit = (
-    instanceList: {
-      ip: string;
-      port: number;
-      bk_cloud_id: number;
-      cluster_type: ClusterTypes;
-      role: string;
-    }[] = [],
-  ) => {
-    const instanceListParam: typeof instanceList = [];
-    const roleMap: Record<string, string> = {};
-    instanceList.forEach((instance) => {
-      const { ip, port, bk_cloud_id, role, cluster_type } = instance;
-
-      roleMap[`${ip}:${port}`] = role;
-      instanceListParam.push({
-        ip,
-        port,
-        bk_cloud_id,
-        role,
-        cluster_type,
-      });
-    });
-
-    let lockHour = formData.validDuration;
-    if (formData.validDurationType === 'day') {
-      lockHour = formData.validDuration * 24;
-    }
-
-    const params = {
-      lock_hour: lockHour,
-      password: formData.password,
-      instance_list: instanceListParam,
-      is_async: true,
-    };
-
-    submitLength.value = instanceListParam.length;
-    submitRoleMap.value = roleMap;
-    modifyAdminPasswordRun(params);
-  };
-
-  const handleReset = () => {
-    Object.assign(formData, createDefaultData());
-  };
-
-  const handleRefresh = () => {
-    handleReset();
-    submitted.value = false;
-  };
-
-  onBeforeUnmount(() => {
-    pause();
-  });
-</script>
-
-<style lang="less" scoped>
-  .password-temporary-modify {
-    margin-bottom: 32px;
-    background-color: #fff;
-    border-radius: 2px;
-
-    .submitting-mask {
-      display: flex;
-      padding: 90px 0 138px;
-      flex-direction: column;
-      align-items: center;
-
-      .submitting-icon {
-        font-size: 64px;
-        color: @primary-color;
-        animation: rotate 2s linear infinite;
-      }
-
-      .submitting-text {
-        font-size: 24px;
-        color: #313238;
-      }
-
-      @keyframes rotate {
-        0% {
-          transform: rotate(0deg);
-        }
-
-        100% {
-          transform: rotate(-360deg);
-        }
-      }
-    }
-
-    .password-form {
-      padding: 32px 0 24px;
-      border-radius: 2px;
-      box-shadow: 0 3px 4px 0 #0000000a;
-
-      :deep(.password-form-instance) {
-        display: flex;
-        align-items: center;
-      }
-
-      :deep(.password-form-item) {
-        width: 386px;
-      }
-    }
-
-    .btn-area {
-      padding: 24px 0 24px 200px;
-      background-color: #f5f7fa;
-    }
-
-    :deep(.instance-tip) {
-      color: #ff9c01;
-    }
-
-    :deep(.type-icon) {
-      font-size: 16px;
-    }
-
-    .form-item-input {
-      min-width: 300px;
-    }
-
-    .form-item-suffix {
-      width: 88px;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/routes.ts b/dbm-ui/frontend/src/views/temporary-paassword-modify/routes.ts
index 9f34c4e309..8c561a0afc 100644
--- a/dbm-ui/frontend/src/views/temporary-paassword-modify/routes.ts
+++ b/dbm-ui/frontend/src/views/temporary-paassword-modify/routes.ts
@@ -21,20 +21,7 @@ const routes = [
     meta: {
       navName: t('临时密码修改'),
     },
-    redirect: {
-      name: 'DBPasswordTemporaryModifyIndex',
-    },
     component: () => import('@views/temporary-paassword-modify/Index.vue'),
-    children: [
-      {
-        name: 'DBPasswordTemporaryModifyIndex',
-        path: 'index',
-        meta: {
-          navName: t('临时密码修改'),
-        },
-        component: () => import('@views/temporary-paassword-modify/index/Index.vue'),
-      },
-    ],
   },
 ];