From 7d1d675ef863d0d230cf3af494a856ab0a3b7550 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Mon, 9 Dec 2024 15:00:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20mongodb=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E8=A7=84=E5=88=99ui=E8=B0=83=E6=95=B4=20#8407=20#=20Reviewed,?=
 =?UTF-8?q?=20transaction=20id:=2026182?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |  2 +-
 .../frontend/src/services/types/permission.ts | 20 +++---
 .../components/common/AccountCreate.vue       | 67 +++++++++++++------
 .../components/mongo/CreateRule.vue           |  2 +-
 4 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index dd25416b57..e10182ee3b 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3705,7 +3705,7 @@
   "强制失败节点成功": "强制失败节点成功",
   "不允许使用特殊账号名称n": "不允许使用特殊账号名称 {n}",
   "非 admin": "非 admin",
-  "请输入访问DB名_以字母开头_支持字母_数字_下划线": "请输入访问DB名，以字母开头，支持字母，数字，下划线",
+  "账户名不能为空": "账户名不能为空",
   "访问 DB 不能为空": "访问 DB 不能为空",
   "访问 DB 名不允许为 admin": "访问 DB 名不允许为 admin",
   "删除规则后将不能恢复，请谨慎操作": "删除规则后将不能恢复，请谨慎操作",
diff --git a/dbm-ui/frontend/src/services/types/permission.ts b/dbm-ui/frontend/src/services/types/permission.ts
index 3760f2e07e..769a278259 100644
--- a/dbm-ui/frontend/src/services/types/permission.ts
+++ b/dbm-ui/frontend/src/services/types/permission.ts
@@ -117,16 +117,6 @@ export interface PasswordPolicyIncludeRule {
   uppercase: boolean;
 }
 
-/**
- * 新增账号规则
- */
-export interface AccountRule {
-  access_db: string;
-  privilege: AccountRulePrivilege | string;
-  account_id: number | null;
-  account_type?: AccountTypesValues;
-}
-
 /**
  * 新增账号规则 - 权限信息
  */
@@ -138,6 +128,16 @@ export interface AccountRulePrivilege {
 
 export type AccountRulePrivilegeKey = keyof AccountRulePrivilege;
 
+/**
+ * 新增账号规则
+ */
+export interface AccountRule {
+  access_db: string;
+  privilege: AccountRulePrivilege;
+  account_id: number | null;
+  account_type?: AccountTypesValues;
+}
+
 /**
  * 规则授权前置检查信息
  */
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 c7408d71d2..db15aa26c1 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
@@ -24,7 +24,6 @@
     <BkForm
       v-if="isShow"
       ref="accountRef"
-      class="mb-36"
       form-type="vertical"
       :model="state.formdata"
       :rules="rules">
@@ -43,10 +42,10 @@
           :maxlength="32"
           :placeholder="userPlaceholder"
           show-word-limit />
-        <p style="color: #ff9c01">
-          {{ t('账号创建后，不支持修改。') }}
-        </p>
       </BkFormItem>
+      <div class="account-dialog-explain">
+        {{ t('账号创建后，不支持修改。') }}
+      </div>
       <BkFormItem
         :label="t('密码')"
         property="password"
@@ -56,22 +55,22 @@
           v-model="state.formdata.password"
           :db-type="dbTypeMap[accountType]"
           @verify-result="verifyResult" />
-        <p style="color: #ff9c01">
-          {{ t('平台不会保存密码，请自行保管好。') }}
-          <BkButton
-            v-bk-tooltips="{
-              content: t('请设置密码'),
-              disabled: state.formdata.password,
-            }"
-            class="copy-password-button"
-            :disabled="!state.formdata.password"
-            text
-            theme="primary"
-            @click="handleCopyPassword">
-            {{ t('复制密码') }}
-          </BkButton>
-        </p>
       </BkFormItem>
+      <div class="account-dialog-explain">
+        {{ t('平台不会保存密码，请自行保管好。') }}
+        <BkButton
+          v-bk-tooltips="{
+            content: t('请设置密码'),
+            disabled: state.formdata.password,
+          }"
+          class="copy-password-button"
+          :disabled="!state.formdata.password"
+          text
+          theme="primary"
+          @click="handleCopyPassword">
+          {{ t('复制密码') }}
+        </BkButton>
+      </div>
     </BkForm>
     <template #footer>
       <BkButton
@@ -165,19 +164,24 @@
   const rules = computed(() => ({
     user: [
       {
-        trigger: 'change',
+        trigger: 'blur',
+        message: t('账户名不能为空'),
+        validator: (value: string) => !!value,
+      },
+      {
+        trigger: 'blur',
         message: defaultUserPlaceholder,
         validator: (value: string) => /^[a-zA-Z0-9][a-zA-Z0-9_.-]{0,31}$/g.test(value),
       },
       props.accountType === AccountTypes.MONGODB
         ? {
-            trigger: 'change',
+            trigger: 'blur',
             message: userPlaceholder.value,
             validator: (value: string) => /^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)$/g.test(value),
           }
         : {},
       {
-        trigger: 'change',
+        trigger: 'blur',
         validator: (value: string) => {
           const specialAccountMap = {
             [AccountTypes.MYSQL]: MysqlConfig[AccountTypes.MYSQL].special_account,
@@ -257,3 +261,22 @@
     state.formdata.user = '';
   };
 </script>
+
+<style lang="less" scoped>
+  .account-dialog {
+    :deep(.bk-form-item) {
+      margin-bottom: 0;
+    }
+
+    :deep(.is-error) {
+      margin-bottom: 18px;
+    }
+
+    .account-dialog-explain {
+      padding-top: 4px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      color: #ff9c01;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mongo/CreateRule.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mongo/CreateRule.vue
index eee1186a89..d6847a6ab6 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mongo/CreateRule.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mongo/CreateRule.vue
@@ -60,7 +60,7 @@
         <BkInput
           v-model="formdata.access_db"
           :maxlength="100"
-          :placeholder="t('请输入访问DB名_以字母开头_支持字母_数字_下划线')"
+          :placeholder="t('请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔')"
           :rows="4"
           type="textarea" />
       </BkFormItem>