From 12241efafeea3e9591a183a83f99ce90e7cf5a34 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Thu, 28 Nov 2024 11:44:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E5=AF=86=E7=A0=81=E6=9C=AA?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99=E7=A6=81?=
 =?UTF-8?q?=E6=AD=A2=E6=8F=90=E4=BA=A4=20#8250=20#=20Reviewed,=20transacti?=
 =?UTF-8?q?on=20id:=2025143?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |  1 +
 .../db-manage/common/password-input/Index.vue | 13 ++++++++++-
 .../components/common/AccountCreate.vue       | 22 +++++++++++++++++--
 .../views/db-manage/redis/apply-ha/Index.vue  | 13 ++++++++++-
 .../db-manage/redis/apply/ApplyRedis.vue      | 13 ++++++++++-
 .../index/Index.vue                           | 18 +++++++++++----
 6 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 569ac4af87..8a5306d8f3 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3655,5 +3655,6 @@
   "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索": "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索",
   "全站搜索，支持多对象，Enter开启搜索": "全站搜索，支持多对象，Enter开启搜索",
   "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
+  "密码不符合规则": "密码不符合规则",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue
index 2a42c3e580..3eab123785 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue
@@ -71,6 +71,10 @@
     buttonDisabledTip?: string;
   }
 
+  interface Emits {
+    (e: 'verifyResult', isPass: boolean): void;
+  }
+
   interface Exposes {
     getEncyptPassword: () => string;
     validate: () => Promise<boolean>;
@@ -82,12 +86,14 @@
     buttonDisabledTip: '',
   });
 
-  const { t } = useI18n();
+  const emits = defineEmits<Emits>();
 
   const modelValue = defineModel<string>('modelValue', {
     default: '',
   });
 
+  const { t } = useI18n();
+
   let tippyInstance: Instance;
   let publicKey = '';
   let passwordPolicyMemo = {} as PasswordPolicy['rule'];
@@ -256,6 +262,7 @@
       password: getEncyptPassword(),
     });
     tippyInstance.show();
+    emits('verifyResult', isStrength);
     return isStrength;
   };
   const debounceVerifyPassword = _.debounce(verifyPassword, 300);
@@ -294,6 +301,10 @@
     tippyInstance.hide();
   };
 
+  watch(modelValue, () => {
+    debounceVerifyPassword();
+  });
+
   onUnmounted(() => {
     tippyInstance.destroy();
   });
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue
index aaead0bff1..e1320634ba 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue
@@ -54,7 +54,8 @@
         <PasswordInput
           ref="passwordRef"
           v-model="state.formdata.password"
-          :db-type="accountType" />
+          :db-type="dbTypeMap[accountType]"
+          @verify-result="verifyResult" />
         <p style="color: #ff9c01">
           {{ t('平台不会保存密码，请自行保管好。') }}
           <BkButton
@@ -74,7 +75,12 @@
     </BkForm>
     <template #footer>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(state.formdata.password) || passwordIsPass,
+        }"
         class="mr-8"
+        :disabled="!passwordIsPass"
         :loading="state.isLoading"
         theme="primary"
         @click="handleSubmit">
@@ -98,7 +104,7 @@
 
   import { useCopy } from '@hooks';
 
-  import { AccountTypes } from '@common/const';
+  import { AccountTypes, DBTypes } from '@common/const';
 
   import PasswordInput from '@views/db-manage/common/password-input/Index.vue';
 
@@ -123,6 +129,13 @@
 
   const { t } = useI18n();
 
+  const dbTypeMap = {
+    [AccountTypes.MYSQL]: DBTypes.MYSQL,
+    [AccountTypes.TENDBCLUSTER]: DBTypes.TENDBCLUSTER,
+    [AccountTypes.SQLSERVER]: DBTypes.SQLSERVER,
+    [AccountTypes.MONGODB]: DBTypes.MONGODB,
+  };
+
   const state = reactive({
     formdata: {
       password: '',
@@ -133,6 +146,7 @@
   });
   const accountRef = ref();
   const passwordRef = ref<InstanceType<typeof PasswordInput>>();
+  const passwordIsPass = ref(false);
 
   const defaultUserPlaceholder = t('由_1_~_32_位字母_数字_下划线(_)_点(.)_减号(-)字符组成以字母或数字开头');
   const userPlaceholder = computed(() => {
@@ -177,6 +191,10 @@
     copy(state.formdata.password);
   };
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   /**
    * 提交表单数据
    */
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue
index 5fa680ebec..bb47951453 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue
@@ -117,7 +117,8 @@
             <PasswordInput
               ref="passwordRef"
               v-model="formData.details.redis_pwd"
-              :db-type="DBTypes.REDIS" />
+              :db-type="DBTypes.REDIS"
+              @verify-result="verifyResult" />
           </BkFormItem>
           <BkFormItem
             v-if="!isAppend"
@@ -184,7 +185,12 @@
     </div>
     <template #action>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(formData.details.redis_pwd) || passwordIsPass,
+        }"
         class="w-88"
+        :disabled="!passwordIsPass"
         :loading="baseState.isSubmitting"
         theme="primary"
         @click="handleSubmit">
@@ -277,6 +283,7 @@
     cityCode: '',
     cityName: '',
   });
+  const passwordIsPass = ref(false);
 
   const formData = reactive(initData());
 
@@ -369,6 +376,10 @@
     },
   );
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
   const handleChangeBiz = (info: BizItem) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
index 572a5ed31b..14fad65e5b 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
@@ -97,7 +97,8 @@
             <PasswordInput
               ref="passwordRef"
               v-model="state.formdata.details.proxy_pwd"
-              :db-type="DBTypes.REDIS" />
+              :db-type="DBTypes.REDIS"
+              @verify-result="verifyResult" />
           </BkFormItem>
           <BkFormItem
             :label="t('服务器选择')"
@@ -334,7 +335,12 @@
     </div>
     <template #action>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(state.formdata.details.proxy_pwd) || passwordIsPass,
+        }"
         class="w-88"
+        :disabled="!passwordIsPass"
         :loading="baseState.isSubmitting"
         theme="primary"
         @click="handleSubmit">
@@ -487,6 +493,7 @@
     id: '' as number | string,
     name: '',
   });
+  const passwordIsPass = ref(false);
 
   const state = reactive({
     formdata: initData(),
@@ -583,6 +590,10 @@
   });
   // const isDefaultCity = computed(() => state.formdata.details.city_code === 'default');
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
   const getDispalyCapSpecs = (item: CapSepcs) => {
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
index a3587552f0..b97bdb2ae6 100644
--- a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue
+++ b/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue
@@ -73,7 +73,8 @@
             v-model="formData.password"
             :button-disabled="!instanceDbType"
             :button-disabled-tip="t('请先添加实例')"
-            :db-type="instanceDbType" />
+            :db-type="instanceDbType"
+            @verify-result="verifyResult" />
         </BkFormItem>
         <ValidDuration
           v-model="formData.validDuration"
@@ -84,7 +85,12 @@
       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('提交') }}
@@ -130,12 +136,15 @@
     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 modifyResult = ref<ModifyAdminPassword>('');
 
   watch(
     formData,
@@ -159,9 +168,6 @@
     },
   );
 
-  const rootId = ref('');
-  const modifyResult = ref<ModifyAdminPassword>('');
-
   // 轮询
   const { isActive, resume, pause } = useTimeoutPoll(() => {
     queryAsyncModifyResultRun({
@@ -204,6 +210,10 @@
     handleSubmit(formData.instanceList);
   };
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   const handleSubmit = (
     instanceList: {
       ip: string;