feat(frontend): mongodb权限规则ui调整 #8407

# Reviewed, transaction id: 26182
TencentBlueKing · Dec 9, 2024 · 7d1d675 · 7d1d675
1 parent 2f5df03
commit 7d1d675
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -60,7 +60,7 @@
         <BkInput
           v-model="formdata.access_db"
           :maxlength="100"
-          :placeholder="t('请输入访问DB名_以字母开头_支持字母_数字_下划线')"
+          :placeholder="t('请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔')"
           :rows="4"
           type="textarea" />
       </BkFormItem>