feat: 服务密钥体验优化--story=116237018 (#2998)

* feat: 优化表格关联规则展示效果 * feat: 密钥名称重复实现前端校验 * feat: 支持关联规则搜索
TencentBlueKing · Mar 1, 2024 · 1c1bea9 · 1c1bea9
1 parent 7069b2e
commit 1c1bea9
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 22 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/api/credentials.ts b/bcs-services/bcs-bscp/ui/src/api/credentials.ts
@@ -53,3 +53,12 @@ export const getCredentialScopes = (biz_id: string, credential_id: number) =>
  */
 export const updateCredentialScopes = (biz_id: string, credential_id: number, params: IRuleUpdateParams) =>
   http.put(`/config/biz_id/${biz_id}/credential/${credential_id}/scope`, params).then((res) => res.data);
+
+/**
+ * 获取密钥名称是否存在
+ * @param biz_id 空间ID
+ * @param credential_name 密钥名称
+ * @returns
+ */
+export const getCredentialExist = (biz_id: string, credential_name: string) =>
+  http.get(`/config/biz_id/${biz_id}/credential/${credential_name}/check`);
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -536,7 +536,7 @@ export default {
   '密钥仅用于 SDK/API 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往': 'The key is only used for SDK/API pull configurations. To apply for permissions for functions such as service management/configuration management/group management, please go to',
   蓝鲸权限中心: 'Blue Whale Authority Center',
   新建密钥: 'New Credentials',
-  '密钥名称/说明/更新人': 'Key name/ Description/ Updater',
+  '密钥名称/说明/关联规则/更新人': 'Key name/ Description/ Association rules/ Updater',
   密钥名称: 'Key name',
   密钥名称支持中英文: 'Key name supports Chinese and English',
   密钥: 'Credentials',
@@ -584,6 +584,7 @@ export default {
   '输入的规则有误，请重新确认': 'The entered rules are incorrect, please reconfirm',
   请输入文件路径: 'Please enter file path',
   请输入配置项名称: 'Please enter the configuration item name',
+  密钥名称已存在: 'The credentials name already exists',
 
   // 公共组件
   页面不存在: 'Page does not exist',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -536,7 +536,7 @@ export default {
   '密钥仅用于 SDK/API 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往': '密钥仅用于 SDK/API 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往',
   蓝鲸权限中心: '蓝鲸权限中心',
   新建密钥: '新建密钥',
-  '密钥名称/说明/更新人': '密钥名称/说明/更新人',
+  '密钥名称/说明/关联规则/更新人': '密钥名称/说明/关联规则/更新人',
   密钥名称: '密钥名称',
   密钥名称支持中英文: '密钥名称支持中英文',
   密钥: '密钥',
@@ -584,6 +584,7 @@ export default {
   '输入的规则有误，请重新确认': '输入的规则有误，请重新确认',
   请输入文件路径: '请输入文件路径',
   请输入配置项名称: '请输入配置项名称',
+  密钥名称已存在: '密钥名称已存在',
 
   // 公共组件
   页面不存在: '页面不存在',

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue
@@ -22,7 +22,7 @@
           <bk-input
             v-model="searchStr"
             class="search-group-input"
-            :placeholder="t('密钥名称/说明/更新人')"
+            :placeholder="t('密钥名称/说明/关联规则/更新人')"
             :clearable="true"
             @clear="refreshListWithLoading()"
             @input="handleSearchInputChange">
@@ -46,9 +46,17 @@
             <template #default="{ row, index }">
               <bk-input
                 v-if="index === 0 && isCreateCredential"
+                :class="{ 'input-error': isCreateCredentialNameExist }"
                 :placeholder="t('密钥名称支持中英文')"
                 v-model="createCredentialName"
-                @blur="testCreateCredentialName"></bk-input>
+                @blur="blurTestCreateCredentialName"
+                @input="changeTestCreateCredentialName">
+                <template #suffix>
+                  <span v-if="isCreateCredentialNameExist" class="suffix-error-icon">
+                    <Warn v-bk-tooltips="{ content: t('密钥名称已存在') }" />
+                  </span>
+                </template>
+              </bk-input>
               <div v-if="row.spec" class="credential-memo">
                 <div v-if="editingNameId !== row.id" class="memo-content" :title="row.spec.memo || '--'">
                   {{ row.spec.name || '--' }}
@@ -111,16 +119,19 @@
           </bk-table-column>
           <bk-table-column :label="t('关联规则')" width="140">
             <template #default="{ row }">
-              <bk-popover v-if="row.rule && row.rule.length" theme="light" :popover-delay="[300, 0]">
-                <div class="table-rule">
-                  {{ row.rule[0].spec.app + row.rule[0].spec.scope }}
-                </div>
-                <template #content>
-                  <div v-for="rule in row.rule" :key="rule.id">
-                    {{ rule.spec.app + rule.spec.scope }}
-                  </div>
-                </template>
-              </bk-popover>
+              <div v-if="row.credential_scopes && row.credential_scopes.length" class="rule-cell">
+                <span v-for="rule in row.showRules" :key="rule.id" class="rule">
+                  <bk-overflow-title type="tips">
+                    {{ rule }}
+                  </bk-overflow-title>
+                </span>
+                <span
+                  v-if="row.credential_scopes.length > 3"
+                  class="toggle-button"
+                  @click="toggleRulesExpanded(row.id)">
+                  {{ row.isExpandedRules ? '收起' : '展开' }}
+                </span>
+              </div>
               <span v-else>--</span>
             </template>
           </bk-table-column>
@@ -236,7 +247,7 @@
   import { useI18n } from 'vue-i18n';
   import { storeToRefs } from 'pinia';
   import useGlobalStore from '../../../store/global';
-  import { Plus, Search, Eye, Unvisible, Copy, EditLine } from 'bkui-vue/lib/icon';
+  import { Plus, Search, Eye, Unvisible, Copy, EditLine, Warn } from 'bkui-vue/lib/icon';
   import BkMessage from 'bkui-vue/lib/message';
   import { InfoBox } from 'bkui-vue';
   import { permissionCheck } from '../../../api/index';
@@ -245,7 +256,7 @@
     createCredential,
     updateCredential,
     deleteCredential,
-    getCredentialScopes,
+    getCredentialExist,
   } from '../../../api/credentials';
   import { copyToClipBoard, datetimeFormat } from '../../../utils/index';
   import { ICredentialItem } from '../../../../types/credential';
@@ -282,6 +293,7 @@
   const isShowDeleteDialog = ref(false);
   const dialogInputStr = ref('');
   const deleteCredentialInfo = ref<ICredentialItem>();
+  const isCreateCredentialNameExist = ref(false);
 
   watch(
     () => spaceId.value,
@@ -351,9 +363,14 @@
     tableData.value = res.details;
     pagination.value.count = res.count;
     // 获取密钥关联规则
-    tableData.value.forEach(async (item: any) => {
-      const res = await getCredentialScopes(spaceId.value, item.id);
-      item.rule = res.details;
+    tableData.value.forEach((item: any) => {
+      // 密钥关联规则加工处理 做下拉展示
+      if (item.credential_scopes.length > 3) {
+        item.showRules = item.credential_scopes.slice(0, 3);
+      } else {
+        item.showRules = item.credential_scopes;
+      }
+      item.isExpandedRules = false;
     });
   };
 
@@ -407,7 +424,7 @@
       });
       return;
     }
-    await testCreateCredentialName();
+    await blurTestCreateCredentialName();
     try {
       createPending.value = true;
       const params = { memo: createCredentialMemo.value, name: createCredentialName.value };
@@ -592,8 +609,8 @@
     refreshListWithLoading();
   };
 
-  // 校验新建密钥名称
-  const testCreateCredentialName = () => {
+  // input失焦校验新建密钥名称
+  const blurTestCreateCredentialName = async () => {
     if (!createCredentialName.value) return;
     const regex = /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9_-]*[\u4e00-\u9fa5a-zA-Z0-9]$/;
     if (!regex.test(createCredentialName.value)) {
@@ -605,10 +622,36 @@
       });
       return Promise.reject();
     }
+    testCredentialNameExist();
+    if (isCreateCredentialNameExist.value) return Promise.reject();
   };
+
+  // 校验密钥名称是否已存在
+  const testCredentialNameExist = async () => {
+    const res = await getCredentialExist(spaceId.value, createCredentialName.value);
+    isCreateCredentialNameExist.value = res.data.exist;
+  };
+
+  // 如果密钥名称已存在需进行change校验
+  const changeTestCreateCredentialName = () => {
+    if (!isCreateCredentialNameExist.value) return;
+    testCredentialNameExist();
+  };
+
   const goToIAM = () => {
     window.open(`${(window as any).BK_IAM_HOST}/apply-join-user-group`, '__blank');
   };
+
+  // 切换密钥规则展开收起
+  const toggleRulesExpanded = (id: number) => {
+    const credential = tableData.value.find((item: any) => item.id === id);
+    credential.isExpandedRules = !credential.isExpandedRules;
+    if (credential.isExpandedRules) {
+      credential.showRules = credential.credential_scopes;
+    } else {
+      credential.showRules = credential.credential_scopes.slice(0, 3);
+    }
+  };
 </script>
 <style lang="scss" scoped>
   .alert-tips {
@@ -671,6 +714,16 @@
     .delete-btn {
       display: inline-block;
     }
+    .input-error {
+      border: 1px solid #ea3636;
+    }
+    .suffix-error-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 9px;
+      font-size: 14px;
+      color: #ea3636;
+    }
   }
   .credential-text {
     display: flex;
@@ -787,6 +840,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .rule-cell {
+    display: flex;
+    flex-direction: column;
+    line-height: 20px;
+    padding: 8px 0;
+    .toggle-button {
+      color: #3a84ff;
+      cursor: pointer;
+    }
+  }
 </style>
 
 <style lang="scss">