From 5dfa85494225e055d7bb74196c25e5f2f7023774 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Wed, 11 Dec 2024 11:56:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=9D=83=E9=99=90=E8=A7=84?=
 =?UTF-8?q?=E5=88=99db=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99=20#8407?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |   6 +-
 dbm-ui/frontend/src/types/auto-imports.d.ts   |   2 +-
 .../components/mongo/CreateRule.vue           | 142 +++++++++---------
 .../components/mysql/create-rule/Index.vue    |  87 +++++------
 .../create-rule/components/RuleSettings.vue   |  97 ++++++++----
 .../components/sqlserver/CreateRule.vue       | 105 ++++++-------
 .../permission/components/sqlserver/config.ts |   4 +-
 7 files changed, 237 insertions(+), 206 deletions(-)

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index e10182ee3b..ee8aecebb8 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -641,11 +641,9 @@
   "即将删除账号xx_删除后将不能恢复": "即将删除账号\"{name}\", 删除后将不能恢复",
   "成功删除账号": "成功删除账号",
   "成功添加授权规则": "成功添加授权规则",
-  "访问DB不能为空": "访问 DB 不能为空",
   "请设置权限": "请设置权限",
   "全选": "全选",
   "权限设置": "权限设置",
-  "请输入DB名称_可以使用通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔": "请输入 DB 名称，可以使用通配符 %，如 Data%，区分大小写，多个使用英文逗号、分号或换行分隔",
   "该账号下已存在xx规则": "该账号下已存在 {0} 规则",
   "收藏成功": "收藏成功",
   "取消收藏成功": "取消收藏成功",
@@ -3712,5 +3710,9 @@
   "请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，以字母开头，支持字母，数字，下划线。多个使用英文逗号、分号或换行分隔",
   "单据协助设置": "单据协助设置",
   "主域名，从域名，单节点必须分开查询": "主域名，从域名，单节点必须分开查询",
+  "请输入访问DB名_支持 % 通配符_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，支持 % 通配符。多个使用英文逗号、分号或换行分隔",
+  "% 不能单独使用": "% 不能单独使用",
+  "访问 DB 名必须合法": "访问 DB 名必须合法",
+  "请输入访问DB名_以字母开头_支持 % 通配符 或 % 单独使用代表ALL_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，以字母开头，支持 % 通配符 或 % 单独使用代表ALL。多个使用英文逗号、分号或换行分隔",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index d0c217f6f1..7021ac5101 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
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 d6847a6ab6..a6cc54d791 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
@@ -22,14 +22,14 @@
       ref="ruleRef"
       class="rule-form"
       form-type="vertical"
-      :model="formdata"
+      :model="formData"
       :rules="rules">
       <BkFormItem
         :label="t('账号名')"
         property="account_id"
         required>
         <BkSelect
-          v-model="formdata.account_id"
+          v-model="formData.account_id"
           :clearable="false"
           filterable
           :input-search="false"
@@ -58,7 +58,7 @@
         required
         :rules="rules.access_db">
         <BkInput
-          v-model="formdata.access_db"
+          v-model="formData.access_db"
           :maxlength="100"
           :placeholder="t('请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔')"
           :rows="4"
@@ -67,7 +67,7 @@
       <BkFormItem
         class="form-item privilege"
         :label="t('权限设置')"
-        property="auth"
+        property="privilege"
         :required="false">
         <div class="rule-setting-box">
           <BkFormItem
@@ -82,7 +82,7 @@
                 {{ t('全选') }}
               </BkCheckbox>
               <BkCheckboxGroup
-                v-model="formdata.privilege.mongo_user"
+                v-model="formData.privilege.mongo_user"
                 class="checkbox-group">
                 <BkCheckbox
                   v-for="option of mongoUserDbOperations"
@@ -106,7 +106,7 @@
                 {{ t('全选') }}
               </BkCheckbox>
               <BkCheckboxGroup
-                v-model="formdata.privilege.mongo_manager"
+                v-model="formData.privilege.mongo_manager"
                 class="checkbox-group">
                 <BkCheckbox
                   v-for="option of dbOperations.mongo_manager"
@@ -138,7 +138,6 @@
 </template>
 
 <script setup lang="ts">
-  import { Message } from 'bkui-vue';
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
@@ -152,9 +151,11 @@
 
   import DbForm from '@components/db-form/index.vue';
 
+  import { messageSuccess } from '@utils';
+
   import dbOperations from './config';
 
-  type AuthItemKey = keyof typeof dbOperations;
+  type AuthItemKey = 'mongo_user' | 'mongo_manager';
 
   interface Props {
     accountId: number;
@@ -171,9 +172,17 @@
     default: false,
   });
 
+  const { t } = useI18n();
+  const handleBeforeClose = useBeforeClose();
+
+  const ruleRef = ref<InstanceType<typeof DbForm>>();
+  const accounts = ref<PermissionRuleAccount[]>([]);
+  const existDBs = ref<string[]>([]);
+  const accessDBType = ref<'admin' | 'not_admin'>('admin');
+
   const replaceReg = /[,;\r\n]/g;
 
-  const initFormdata = () => ({
+  const initFormData = () => ({
     account_id: -1,
     access_db: 'admin',
     privilege: {
@@ -182,47 +191,13 @@
     },
   });
 
-  const verifyAccountRulesExits = () => {
-    existDBs.value = [];
-
-    const user = selectedUserInfo.value?.user;
-    const dbs = formdata.value.access_db
-      .replace(replaceReg, ',')
-      .split(',')
-      .filter((db) => db !== '');
-
-    if (!user || dbs.length === 0) {
-      return false;
-    }
-
-    return queryAccountRules({
-      user,
-      access_dbs: dbs,
-      account_type: AccountTypes.MONGODB,
-    }).then((res) => {
-      const rules = res.results[0]?.rules || [];
-      existDBs.value = rules.map((item) => item.access_db);
-
-      return rules.length === 0;
-    });
-  };
-
-  const { t } = useI18n();
-  const handleBeforeClose = useBeforeClose();
-
-  const ruleRef = ref<InstanceType<typeof DbForm>>();
-  const formdata = ref(initFormdata());
-  const accounts = ref<PermissionRuleAccount[]>([]);
-  const existDBs = ref<string[]>([]);
-  const accessDBType = ref<'admin' | 'not_admin'>('admin');
-
   const rules = {
-    auth: [
+    privilege: [
       {
         trigger: 'change',
         message: t('请设置权限'),
         validator: () => {
-          const { mongo_user: mongoUser, mongo_manager: mongoManager } = formdata.value.privilege;
+          const { mongo_user: mongoUser, mongo_manager: mongoManager } = formData.privilege;
           return mongoUser.length !== 0 || mongoManager.length !== 0;
         },
       },
@@ -232,12 +207,35 @@
         required: true,
         trigger: 'blur',
         message: t('访问 DB 不能为空'),
-        validator: (value: string) => !!value,
+        validator: (value: string) => {
+          const dbs = value.split(/[\n;,]/);
+          return _.every(dbs, (item) => !!item.trim());
+        },
       },
       {
+        required: true,
         trigger: 'blur',
-        message: () => t('该账号下已存在xx规则', [existDBs.value.join('，')]),
-        validator: verifyAccountRulesExits,
+        message: () => t('该账号下已存在xx规则', [existDBs.value.join(',')]),
+        validator: () => {
+          existDBs.value = [];
+          const user = accounts.value.find((item) => item.account_id === formData.account_id)?.user;
+          const dbs = formData.access_db
+            .replace(replaceReg, ',')
+            .split(',')
+            .filter((db) => db !== '');
+          if (!user || dbs.length === 0) {
+            return false;
+          }
+          return queryAccountRules({
+            user,
+            access_dbs: dbs,
+            account_type: AccountTypes.MONGODB,
+          }).then((res) => {
+            const rules = res.results[0]?.rules || [];
+            existDBs.value = rules.map((item) => item.access_db);
+            return rules.length === 0;
+          });
+        },
       },
       {
         required: true,
@@ -251,40 +249,38 @@
         message: t('请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔'),
         validator: (value: string) => {
           const dbs = value.split(/[\n;,]/);
-          return _.every(dbs, (item) => (!item ? true : /^[_a-zA-Z0-9]/.test(item) && !/\*/.test(value)));
+          return _.every(dbs, (item) => (!item ? true : /^(?:[a-zA-Z].*$)/.test(item)));
         },
       },
     ],
   };
 
-  const selectedUserInfo = computed(() => accounts.value.find((item) => item.account_id === formdata.value.account_id));
+  const formData = reactive(initFormData());
+
   const mongoUserDbOperations = computed(() =>
     accessDBType.value === 'not_admin' ? ['read', 'readWrite'] : dbOperations.mongo_user,
   );
 
-  const { loading: isSubmitting, run: addMongodbAccountRuleRun } = useRequest(addAccountRule, {
+  const { run: getPermissionRulesRun, loading: getPermissionRulesLoading } = useRequest(getPermissionRules, {
     manual: true,
-    onSuccess() {
-      Message({
-        message: t('成功添加授权规则'),
-        theme: 'success',
-      });
-      emits('success');
-      window.changeConfirm = false;
-      handleClose();
+    onSuccess(permissionRules) {
+      accounts.value = permissionRules.results.map((item) => item.account);
     },
   });
 
-  const { run: getPermissionRulesRun, loading: getPermissionRulesLoading } = useRequest(getPermissionRules, {
+  const { run: addMongodbAccountRuleRun, loading: isSubmitting } = useRequest(addAccountRule, {
     manual: true,
-    onSuccess(permissionRules) {
-      accounts.value = permissionRules.results.map((item) => item.account);
+    onSuccess() {
+      messageSuccess(t('成功添加授权规则'));
+      emits('success');
+      window.changeConfirm = false;
+      handleClose();
     },
   });
 
   watch(isShow, (show) => {
     if (show) {
-      formdata.value.account_id = props.accountId ?? -1;
+      formData.account_id = props.accountId ?? -1;
       getPermissionRulesRun({
         offset: 0,
         limit: -1,
@@ -293,24 +289,24 @@
     }
   });
 
-  const getAllCheckedboxValue = (key: AuthItemKey) => formdata.value.privilege[key].length === dbOperations[key].length;
+  const getAllCheckedboxValue = (key: AuthItemKey) => formData.privilege[key].length === dbOperations[key].length;
 
   const getAllCheckedboxIndeterminate = (key: AuthItemKey) =>
-    formdata.value.privilege[key].length > 0 && formdata.value.privilege[key].length !== dbOperations[key].length;
+    formData.privilege[key].length > 0 && formData.privilege[key].length !== dbOperations[key].length;
 
   const handleSelectedAll = (key: AuthItemKey, value: boolean) => {
     if (value) {
-      formdata.value.privilege[key] = dbOperations[key];
+      formData.privilege[key] = dbOperations[key];
       return;
     }
 
-    formdata.value.privilege[key] = [];
+    formData.privilege[key] = [];
   };
 
   const handleAccessDBTypeChange = (value: 'admin' | 'not_admin') => {
-    formdata.value.access_db = value === 'admin' ? 'admin' : '';
-    formdata.value.privilege.mongo_user = [];
-    formdata.value.privilege.mongo_manager = [];
+    formData.access_db = value === 'admin' ? 'admin' : '';
+    formData.privilege.mongo_user = [];
+    formData.privilege.mongo_manager = [];
   };
 
   const handleClose = async () => {
@@ -321,7 +317,7 @@
     }
 
     isShow.value = false;
-    formdata.value = initFormdata();
+    _.merge(formData, initFormData());
     accessDBType.value = 'admin';
     existDBs.value = [];
     window.changeConfirm = false;
@@ -330,8 +326,8 @@
   const handleSubmit = async () => {
     await ruleRef.value!.validate();
     const params = {
-      ...formdata.value,
-      access_db: formdata.value.access_db.replace(replaceReg, ','), // 统一分隔符
+      ...formData,
+      access_db: formData.access_db.replace(replaceReg, ','), // 统一分隔符
       account_type: AccountTypes.MONGODB,
     };
     addMongodbAccountRuleRun(params);
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/Index.vue
index 5ff356af2a..b50a829721 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/Index.vue
@@ -268,54 +268,55 @@
   };
 
   const handleSubmit = async () => {
-    isSubmitting.value = true;
-    const params = await generateRequestParam();
-    if (isEdit.value && previewDiffRef.value) {
-      const { changed } = previewDiffRef.value;
-      const isAccessDbChanged = changed.accessDb;
-      const isHasDelete = changed.privilege.deleteCount > 0;
-      if (isAccessDbChanged || isHasDelete) {
-        const ticketTypeMap = {
-          [AccountTypes.MYSQL]: TicketTypes.MYSQL_ACCOUNT_RULE_CHANGE,
-          [AccountTypes.TENDBCLUSTER]: TicketTypes.TENDBCLUSTER_ACCOUNT_RULE_CHANGE,
-        }
-        createTicketRun({
-          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-          ticket_type: ticketTypeMap[props.accountType],
-          remark: '',
-          details: {
-            last_account_rules: {
-              userName,
-              ...rulesFormData.beforeChange
+    try {
+      isSubmitting.value = true;
+      const params = await generateRequestParam();
+      if (isEdit.value && previewDiffRef.value) {
+        const { changed } = previewDiffRef.value;
+        const isAccessDbChanged = changed.accessDb;
+        const isHasDelete = changed.privilege.deleteCount > 0;
+        if (isAccessDbChanged || isHasDelete) {
+          const ticketTypeMap = {
+            [AccountTypes.MYSQL]: TicketTypes.MYSQL_ACCOUNT_RULE_CHANGE,
+            [AccountTypes.TENDBCLUSTER]: TicketTypes.TENDBCLUSTER_ACCOUNT_RULE_CHANGE,
+          }
+          createTicketRun({
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            ticket_type: ticketTypeMap[props.accountType],
+            remark: '',
+            details: {
+              last_account_rules: {
+                userName,
+                ...rulesFormData.beforeChange
+              },
+              action: 'change',
+              ...params,
+              rule_id: props.ruleObj!.rule_id,
             },
-            action: 'change',
+          });
+        } else {
+          modifyAccountRuleRun({
             ...params,
             rule_id: props.ruleObj!.rule_id,
-          },
-        });
+          });
+        }
       } else {
-        modifyAccountRuleRun({
-          ...params,
-          rule_id: props.ruleObj!.rule_id,
-        });
+        preCheckAddAccountRule(params)
+          .then((result) => {
+            if (result.warning) {
+              precheckWarnTip.value = (
+                <div class="pre-check-content">
+                  {result.warning.split('\n').map(line => <div>{line}</div>)}
+                </div>
+              );
+              showPopConfirm.value = true;
+              return;
+            }
+            createAccountRuleRun(params);
+          })
       }
-    } else {
-      preCheckAddAccountRule(params)
-        .then((result) => {
-          if (result.warning) {
-            precheckWarnTip.value = (
-              <div class="pre-check-content">
-                {result.warning.split('\n').map(line => <div>{line}</div>)}
-              </div>
-            );
-            showPopConfirm.value = true;
-            return;
-          }
-          createAccountRuleRun(params);
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
+    } finally {
+      isSubmitting.value = false;
     }
   };
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/RuleSettings.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/RuleSettings.vue
index 41e4aa7273..b1dba1cd09 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/RuleSettings.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/RuleSettings.vue
@@ -47,14 +47,15 @@
       :rules="rules.access_db">
       <BkInput
         v-model="formData.access_db"
-        :placeholder="t('请输入DB名称_可以使用通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔')"
-        :rows="3"
+        :maxlength="100"
+        :placeholder="t('请输入访问DB名_支持 % 通配符_多个使用英文逗号_分号或换行分隔')"
+        :rows="4"
         type="textarea" />
     </BkFormItem>
     <BkFormItem
       class="rule-form-item"
       :label="t('权限设置')"
-      property="auth">
+      property="privilege">
       <template #label>
         {{ t('权限设置') }}
         <BkCheckbox
@@ -182,7 +183,7 @@
   const { t } = useI18n();
 
   const formRef = ref();
-  const formData = ref<AccountRule>({
+  const formData = reactive<AccountRule>({
     account_id: null,
     access_db: '',
     privilege: {
@@ -192,16 +193,31 @@
     },
   });
   const accounts = ref<PermissionRuleAccount[]>([]);
+  const existDBs = ref<string[]>([]);
 
   const rules = {
+    privilege: [
+      {
+        trigger: 'change',
+        message: t('请设置权限'),
+        validator: () => {
+          const { ddl, dml, glob } = formData.privilege;
+          return ddl.length !== 0 || dml.length !== 0 || glob.length !== 0;
+        },
+      },
+    ],
     access_db: [
       {
         required: true,
         trigger: 'blur',
-        message: t('访问DB不能为空'),
-        validator: (value: string) => !!value,
+        message: t('访问 DB 不能为空'),
+        validator: (value: string) => {
+          const dbs = value.split(/[\n;,]/);
+          return _.every(dbs, (item) => !!item.trim());
+        },
       },
       {
+        required: true,
         trigger: 'blur',
         message: t('编辑时只能单个，且不能有分隔符'),
         validator: (value: string) => {
@@ -212,22 +228,47 @@
         },
       },
       {
+        required: true,
         trigger: 'blur',
-        message: t('DB名称不允许 * ，支持通配符 %，如 Data%，区分大小写，多个对象请使用英文逗号、分号或换行分隔'),
+        message: t('不允许为 *'),
         validator: (value: string) => {
           const dbs = value.split(/[\n;,]/);
-          return _.every(dbs, (item) => (!item ? true : /^[_a-zA-Z0-9]/.test(item) && !/\*/.test(value)));
+          return _.every(dbs, (item) => (!item ? true : !/^\*$/.test(item)));
         },
       },
       {
+        required: true,
         trigger: 'blur',
-        message: () => t('账号下已存在该规则'),
+        message: t('% 不能单独使用'),
+        validator: (value: string) => {
+          const dbs = value.split(/[\n;,]/);
+          return _.every(dbs, (item) => (!item ? true : /^(?!%$).+$/.test(item)));
+        },
+      },
+      {
+        required: true,
+        trigger: 'blur',
+        message: t('访问 DB 名必须合法'),
+        validator: (value: string) => {
+          const dbs = value.split(/[\n;,]/);
+          return _.every(dbs, (item) =>
+            !item
+              ? true
+              : /^%?[a-zA-Z0-9]([a-zA-Z0-9_-])*[a-zA-Z0-9]$/.test(item) && /^(?!stage_truncate).*/.test(item),
+          );
+        },
+      },
+      {
+        required: true,
+        trigger: 'blur',
+        message: () => t('该账号下已存在xx规则', [existDBs.value.join(',')]),
         validator: async () => {
-          const user = accounts.value.find((item) => item.account_id === formData.value.account_id)?.user;
-          if (props.rulesFormData.beforeChange.access_db === formData.value.access_db) {
+          existDBs.value = [];
+          const user = accounts.value.find((item) => item.account_id === formData.account_id)?.user;
+          if (props.rulesFormData.beforeChange.access_db === formData.access_db) {
             return true;
           }
-          const dbs = formData.value.access_db
+          const dbs = formData.access_db
             .replace(/\n|;/g, ',')
             .split(',')
             .filter((db) => db);
@@ -245,6 +286,7 @@
             results
               .find((item) => item.account.user === user)
               ?.rules.filter((ruleItem) => dbs.includes(ruleItem.access_db)) || [];
+          existDBs.value = intersection.map((item) => item.access_db);
           return !intersection.length;
         },
       },
@@ -252,15 +294,15 @@
   };
 
   const getAllCheckedboxValue = (key: AccountRulePrivilegeKey) =>
-    formData.value.privilege[key]?.length === props.ruleSettingsConfig.dbOperations[key].length;
+    formData.privilege[key].length === props.ruleSettingsConfig.dbOperations[key].length;
 
   const topAllCheckedboxValue = computed(() =>
     (['ddl', 'dml', 'glob'] as AccountRulePrivilegeKey[]).every(getAllCheckedboxValue),
   );
 
   const getAllCheckedboxIndeterminate = (key: AccountRulePrivilegeKey) =>
-    formData.value.privilege[key]?.length > 0 &&
-    formData.value.privilege[key]?.length !== props.ruleSettingsConfig.dbOperations[key].length;
+    formData.privilege[key].length > 0 &&
+    formData.privilege[key].length !== props.ruleSettingsConfig.dbOperations[key].length;
 
   const topAllCheckedboxIndeterminate = computed(() =>
     (['ddl', 'dml', 'glob'] as AccountRulePrivilegeKey[]).some(getAllCheckedboxIndeterminate),
@@ -276,21 +318,20 @@
   watch(
     () => props.rulesFormData,
     () => {
-      formData.value = _.cloneDeep(
-        props.rulesFormData.afterChange.account_id ? props.rulesFormData.afterChange : props.rulesFormData.beforeChange,
-      );
+      const sourceData = props.rulesFormData.afterChange.account_id
+        ? props.rulesFormData.afterChange
+        : props.rulesFormData.beforeChange;
+      _.merge(formData, _.cloneDeep(sourceData));
     },
     { immediate: true },
   );
 
   const handleSelectedAll = (key: AccountRulePrivilegeKey, value: boolean) => {
-    formData.value.privilege[key] = value ? [...props.ruleSettingsConfig.dbOperations[key]] : [];
+    formData.privilege[key] = value ? [...props.ruleSettingsConfig.dbOperations[key]] : [];
   };
 
   const handleTopSelectedAll = (value: boolean) => {
-    formData.value.privilege = value
-      ? _.cloneDeep(props.ruleSettingsConfig.dbOperations)
-      : { ddl: [], dml: [], glob: [] };
+    formData.privilege = value ? _.cloneDeep(props.ruleSettingsConfig.dbOperations) : { ddl: [], dml: [], glob: [] };
   };
 
   getPermissionRulesRun({
@@ -301,13 +342,11 @@
   });
 
   defineExpose<Exposes>({
-    getValue: async () => {
-      await formRef.value.validate();
-      return {
-        userName: accounts.value.find((item) => item.account_id === formData.value.account_id)?.user || '',
-        accountRule: formData.value,
-      };
-    },
+    getValue: () =>
+      formRef.value.validate().then(() => ({
+        userName: accounts.value.find((item) => item.account_id === formData.account_id)?.user || '',
+        accountRule: formData,
+      })),
   });
 </script>
 
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/CreateRule.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/CreateRule.vue
index c1c32f67c5..a55788a42d 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/CreateRule.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/CreateRule.vue
@@ -20,9 +20,10 @@
           v-model="formData.account_id"
           :clearable="false"
           filterable
-          :input-search="false">
+          :input-search="false"
+          :loading="getPermissionRulesLoading">
           <BkOption
-            v-for="item of accoutList"
+            v-for="item of accounts"
             :key="item.account_id"
             :label="item.user"
             :value="item.account_id" />
@@ -35,14 +36,17 @@
         :rules="rules.access_db">
         <BkInput
           v-model="formData.access_db"
-          :placeholder="t('请输入DB名称_可以使用通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔')"
-          :rows="3"
+          :maxlength="100"
+          :placeholder="
+            t('请输入访问DB名_以字母开头_支持 % 通配符 或 % 单独使用代表ALL_多个使用英文逗号_分号或换行分隔')
+          "
+          :rows="4"
           type="textarea" />
       </BkFormItem>
       <BkFormItem
         class="rule-form-item"
         :label="t('权限设置')"
-        property="auth">
+        property="privilege">
         <div class="rule-setting-box">
           <BkFormItem :label="t('数据库读写权限(DML)')">
             <div class="rule-form-row">
@@ -54,7 +58,9 @@
                 }"
                 class="check-all"
                 :disabled="checkAllPrivileges"
-                :indeterminate="!!formData.privilege.length && formData.privilege.length !== dbOperations.dml.length"
+                :indeterminate="
+                  !!formData.privilege.length && formData.privilege.length !== dbOperations.sqlserver_dml.length
+                "
                 @change="(value: boolean) => handleSelectedAll(value)">
                 {{ t('全选') }}
               </BkCheckbox>
@@ -62,7 +68,7 @@
                 v-model="formData.privilege"
                 class="rule-form-checkbox-group">
                 <BkCheckbox
-                  v-for="dmlItem of dbOperations.dml"
+                  v-for="dmlItem of dbOperations.sqlserver_dml"
                   :key="dmlItem"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -109,12 +115,16 @@
 </template>
 
 <script setup lang="ts">
-  import InfoBox from 'bkui-vue/lib/info-box';
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
   import { addAccountRule, getPermissionRules, queryAccountRules } from '@services/source/sqlserverPermissionAccount';
+  import type { PermissionRuleAccount } from '@services/types/permission';
+
+  import { useBeforeClose } from '@hooks';
+
+  import { AccountTypes } from '@common/const';
 
   import DbForm from '@components/db-form/index.vue';
 
@@ -122,8 +132,6 @@
 
   import dbOperations from './config';
 
-  import { AccountTypes } from '@/common/const';
-
   interface Props {
     accountId: number;
   }
@@ -143,11 +151,15 @@
     default: false,
   });
 
+  const { t } = useI18n();
+  const handleBeforeClose = useBeforeClose();
+
   const formRef = ref<InstanceType<typeof DbForm>>();
+  const accounts = ref<PermissionRuleAccount[]>([]);
   const checkAllPrivileges = ref(false);
   const existDBs = ref<string[]>([]);
 
-  const { t } = useI18n();
+  const replaceReg = /[,;\r\n]/g;
 
   /**
    * 初始化表单数据
@@ -159,7 +171,7 @@
   });
 
   const rules = {
-    auth: [
+    privilege: [
       {
         trigger: 'change',
         message: t('请设置权限'),
@@ -170,35 +182,28 @@
       {
         required: true,
         trigger: 'blur',
-        message: t('访问DB不能为空'),
-        validator: (value: string) => !!value && !!value.trim(),
-      },
-      {
-        trigger: 'blur',
-        message: t('DB名称不允许 * ，支持通配符 %，如 Data%，区分大小写，多个对象请使用英文逗号、分号或换行分隔'),
+        message: t('访问 DB 不能为空'),
         validator: (value: string) => {
           const dbs = value.split(/[\n;,]/);
-          return _.every(dbs, (item) => (!item ? true : /^[_a-zA-Z0-9]/.test(item) && !/\*/.test(value)));
+          return _.every(dbs, (item) => !!item.trim());
         },
       },
       {
+        required: true,
         trigger: 'blur',
-        message: () => t('该账号下已存在xx规则', [existDBs.value.join('，')]),
+        message: () => t('该账号下已存在xx规则', [existDBs.value.join(',')]),
         validator: () => {
           existDBs.value = [];
-
-          const userInfo = accoutList.value.find((item) => item.account_id === formData.account_id);
+          const user = accounts.value.find((item) => item.account_id === formData.account_id)?.user;
           const dbs = formData.access_db
-            .replace(/\n|;/g, ',')
+            .replace(replaceReg, ',')
             .split(',')
-            .filter((db) => db);
-
-          if (!userInfo || dbs.length === 0) {
+            .filter((db) => db !== '');
+          if (!user || dbs.length === 0) {
             return false;
           }
-
           return queryAccountRules({
-            user: userInfo.user,
+            user,
             access_dbs: dbs,
             account_type: AccountTypes.SQLSERVER,
           }).then((res) => {
@@ -208,21 +213,27 @@
           });
         },
       },
+      {
+        required: true,
+        trigger: 'blur',
+        message: t('请输入访问DB名_以字母开头_支持 % 通配符 或 % 单独使用代表ALL_多个使用英文逗号_分号或换行分隔'),
+        validator: (value: string) => {
+          const dbs = value.split(/[\n;,]/);
+          return _.every(dbs, (item) => (!item ? true : /^(?:[a-zA-Z].*|%$)/.test(item)));
+        },
+      },
     ],
   };
 
   const formData = reactive(initFormdata());
 
-  const allChecked = computed(() => formData.privilege.length === dbOperations.dml.length);
-  const accoutList = computed(() =>
-    (sqlPermissonRules.value?.results || []).map((permissionItem) => ({
-      account_id: permissionItem.account.account_id,
-      user: permissionItem.account.user,
-    })),
-  );
+  const allChecked = computed(() => formData.privilege.length === dbOperations.sqlserver_dml.length);
 
-  const { data: sqlPermissonRules, run: getPermissionRulesRun } = useRequest(getPermissionRules, {
+  const { run: getPermissionRulesRun, loading: getPermissionRulesLoading } = useRequest(getPermissionRules, {
     manual: true,
+    onSuccess(permissionRules) {
+      accounts.value = permissionRules.results.map((item) => item.account);
+    },
   });
 
   const { loading: isSubmitting, run: addSqlserverAccountRuleRun } = useRequest(addAccountRule, {
@@ -258,31 +269,13 @@
 
   const handleSelectedAll = (value: boolean) => {
     if (value) {
-      formData.privilege = dbOperations.dml;
+      formData.privilege = dbOperations.sqlserver_dml;
       return;
     }
 
     formData.privilege = [];
   };
 
-  const handleBeforeClose = () => {
-    if (window.changeConfirm) {
-      return new Promise<boolean>((resolve) => {
-        InfoBox({
-          title: t('确认离开当前页'),
-          content: t('离开将会导致未保存信息丢失'),
-          confirmText: t('离开'),
-          onConfirm: () => {
-            window.changeConfirm = false;
-            resolve(true);
-            return true;
-          },
-        });
-      });
-    }
-    return true;
-  };
-
   const handleClose = async () => {
     const result = await handleBeforeClose();
     if (!result) {
@@ -301,7 +294,7 @@
   const handleSubmit = async () => {
     await formRef.value!.validate();
     const params = {
-      access_db: formData.access_db.replace(/\n|;/g, ','), // 统一分隔符
+      access_db: formData.access_db.replace(replaceReg, ','), // 统一分隔符
       privilege: {},
       account_id: formData.account_id,
       account_type: AccountTypes.SQLSERVER,
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/config.ts b/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/config.ts
index 7ab1258392..f6ecff8934 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/config.ts
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/sqlserver/config.ts
@@ -1,5 +1,5 @@
 export default {
-  dml: ['db_datawriter', 'db_datareader'],
-  owner: ['db_owner'],
+  sqlserver_dml: ['db_datawriter', 'db_datareader'],
+  sqlserver_owner: ['db_owner'],
   special_account: ['mssql_exporter', 'dbm_admin', 'sa', 'sqlserver'],
 };