Merge remote-tracking branch 'github-bk-bcs/master'

* github-bk-bcs/master: fix: 修复编辑器光标错乱问题 (#2927) fix: 优化进入配置服务版本管理页面，加载版本列表太慢--bug=117445765 (#2921)
TencentBlueKing · Jan 25, 2024 · 0c3afc4 · 0c3afc4
2 parents 8eccdd4 + df136bc
commit 0c3afc4
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 81 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue
@@ -92,9 +92,6 @@ const formDataContent = ref({
 const showContent = computed({
   get: () => (formData.value.type === 'shell' ? formDataContent.value.shell : formDataContent.value.python),
   set: (val) => {
-    if (!val.endsWith('\n')) {
-      val += '\n';
-    }
     formData.value.type === 'shell' ? formDataContent.value.shell = val : formDataContent.value.python = val;
   },
 });
@@ -133,6 +130,9 @@ const handleCreate = async () => {
   try {
     pending.value = true;
     formData.value.tag = selectTags.value[0];
+    if (!formData.value.content.endsWith('\n')) {
+      formData.value.content += '\n';
+    }
     await createScript(spaceId.value, formData.value);
     BkMessage({
       theme: 'success',

diff --git a/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue b/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
@@ -321,9 +321,6 @@ const handleSelectPrivilege = (index: number, val: number[]) => {
 };
 
 const handleStringContentChange = (val: string) => {
-  if (!val.endsWith('\n')) {
-    val += '\n';
-  }
   stringContent.value = val;
   change();
 };

diff --git a/...space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue b/...space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
@@ -18,7 +18,9 @@
       @change="handleFormChange"
     />
     <section class="action-btns">
-      <bk-button theme="primary" :loading="pending" :disabled="fileUploading" @click="handleSubmit">{{ t('保存') }}</bk-button>
+      <bk-button theme="primary" :loading="pending" :disabled="fileUploading" @click="handleSubmit">{{
+        t('保存')
+      }}</bk-button>
       <bk-button @click="close">{{ t('取消') }}</bk-button>
     </section>
   </bk-sideslider>
@@ -63,7 +65,6 @@ watch(
   },
 );
 
-
 const handleFormChange = (data: IConfigEditParams, configContent: IFileConfigContentSummary | string) => {
   configForm.value = data;
   const { privilege, user, user_group } = data;
@@ -94,9 +95,11 @@ const handleSubmit = async () => {
     pending.value = true;
     const sign = await formRef.value.getSignature();
     let size = 0;
+
     if (configForm.value.file_type === 'binary') {
       size = Number((content.value as IFileConfigContentSummary).size);
     } else {
+      if (typeof content.value === 'string' && !content.value.endsWith('\n')) content.value += '\n';
       const stringContent = content.value as string;
       size = new Blob([stringContent]).size;
       await updateConfigContent(props.bkBizId, props.appId, stringContent, sign);

diff --git a/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue b/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
@@ -139,6 +139,7 @@ const handleSubmit = async () => {
     if (configForm.value.file_type === 'binary') {
       size = Number((content.value as IFileConfigContentSummary).size);
     } else {
+      if (typeof content.value === 'string' && !content.value.endsWith('\n')) content.value += '\n';
       const stringContent = content.value as string;
       size = new Blob([stringContent]).size;
       await updateConfigContent(props.bkBizId, props.appId, stringContent, sign);
@@ -159,6 +160,8 @@ const handleSubmit = async () => {
 };
 
 const close = () => {
+  content.value = '';
+  configForm.value = getConfigEditParams();
   emits('update:show', false);
 };
 </script>

diff --git a/...-bscp/ui/src/views/space/service/detail/config/version-list-aside/version-simple-list.vue b/...-bscp/ui/src/views/space/service/detail/config/version-list-aside/version-simple-list.vue
@@ -5,14 +5,14 @@
     </div>
     <bk-loading :loading="versionListLoading">
       <div class="version-search-wrapper">
-        <SearchInput
-          v-model="searchStr"
-          class="config-search-input"
-          :placeholder="t('版本名称')"/>
+        <SearchInput v-model="searchStr" class="config-search-input" :placeholder="t('版本名称')" />
       </div>
       <section class="versions-wrapper">
         <section v-if="!searchStr" class="unnamed-version">
-          <section :class="['version-item', { active: versionData.id === 0 }]" @click="handleSelectVersion(unNamedVersion)">
+          <section
+            :class="['version-item', { active: versionData.id === 0 }]"
+            @click="handleSelectVersion(unNamedVersion)"
+          >
             <i class="bk-bscp-icon icon-edit-small edit-icon" />
             <div class="version-name">{{ t('未命名版本') }}</div>
           </section>
@@ -22,32 +22,15 @@
           v-for="version in versionsInView"
           :key="version.id"
           :class="['version-item', { active: versionData.id === version.id }]"
-          @click="handleSelectVersion(version)">
+          @click="handleSelectVersion(version)"
+        >
           <div :class="['dot', version.status.publish_status]"></div>
           <div class="version-name">{{ version.spec.name }}</div>
-          <bk-popover
-            v-if="version.status.publish_status !== 'editing'"
-            theme="light config-version-actions-popover"
-            placement="bottom-end"
-            :popover-delay="[0, 100]"
-            :arrow="false">
-            <Ellipsis class="action-more-icon" />
-            <template #content>
-              <div class="action-list">
-                <div class="action-item" @click="handleDiffDialogShow(version)">{{ t('版本对比') }}</div>
-                <div
-                  v-bk-tooltips="{
-                    disabled: version.status.publish_status === 'not_released',
-                    placement: 'bottom',
-                    content: '只支持未上线版本'
-                  }"
-                  :class="['action-item', { disabled: version.status.publish_status !== 'not_released' }]"
-                  @click="handleDeprecateDialogShow(version)">
-                  {{ t('版本废弃') }}
-                </div>
-              </div>
-            </template>
-          </bk-popover>
+          <Ellipsis
+            class="action-more-icon"
+            @mouseenter="handlePopShow(version, $event)"
+            @mouseleave="handlePopHide"
+          />
         </section>
         <TableEmpty v-if="searchStr && versionsInView.length === 0" :is-search-empty="true" @clear="searchStr = ''" />
       </section>
@@ -58,7 +41,22 @@
       :title="t('确认废弃该版本')"
       :tips="t('此操作不会删除版本，如需找回或彻底删除请去版本详情的废弃版本列表操作')"
       :confirm-fn="handleDeprecateVersion"
-      :version="currentOperatingVersion" />
+      :version="currentOperatingVersion"
+    />
+    <div class="action-list" ref="popover" v-show="popShow" @mouseenter="handlePopContentMouseEnter" @mouseleave="handlePopContentMouseLeave ">
+      <div class="action-item" @click="handleDiffDialogShow(selectedVersion!)">{{ t('版本对比') }}</div>
+      <div
+        v-bk-tooltips="{
+          disabled: selectedVersion?.status.publish_status === 'not_released',
+          placement: 'bottom',
+          content: '只支持未上线版本',
+        }"
+        :class="['action-item', { disabled: selectedVersion?.status.publish_status !== 'not_released' }]"
+        @click="handleDeprecateDialogShow(selectedVersion!)"
+      >
+        {{ t('版本废弃') }}
+      </div>
+    </div>
   </section>
 </template>
 <script setup lang="ts">
@@ -97,6 +95,11 @@ const searchStr = ref('');
 const showDiffPanel = ref(false);
 const currentOperatingVersion = ref();
 const showOperateConfirmDialog = ref(false);
+const selectedVersion = ref<IConfigVersion>();
+const popShow = ref(false);
+const popover = ref<HTMLInputElement | null>(null);
+const popHideTimerId = ref(0);
+const isMouseenter = ref(false);
 
 const versionsInView = computed(() => {
   if (searchStr.value === '') {
@@ -164,7 +167,7 @@ const getVersionList = async () => {
 
 const handleSelectVersion = (version: IConfigVersion) => {
   versionData.value = version;
-  const params: { spaceId: string, appId: number, versionId?: number } = {
+  const params: { spaceId: string; appId: number; versionId?: number } = {
     spaceId: props.bkBizId,
     appId: props.appId,
   };
@@ -189,31 +192,64 @@ const handleDeprecateDialogShow = (version: IConfigVersion) => {
 
 const handleDeprecateVersion = () => new Promise(() => {
   const id = currentOperatingVersion.value.id;
-  deprecateVersion(props.bkBizId, props.appId, id)
-    .then(() => {
-      showOperateConfirmDialog.value = false;
-      Message({
-        theme: 'success',
-        message: '版本废弃成功',
-      });
-      if (id !== versionData.value.id) {
-        return;
-      }
+  deprecateVersion(props.bkBizId, props.appId, id).then(() => {
+    showOperateConfirmDialog.value = false;
+    Message({
+      theme: 'success',
+      message: '版本废弃成功',
+    });
+    if (id !== versionData.value.id) {
+      return;
+    }
 
-      const versions = versionsInView.value.filter(item => item.id > 0);
-      const index = versions.findIndex(item => item.id === id);
+    const versions = versionsInView.value.filter(item => item.id > 0);
+    const index = versions.findIndex(item => item.id === id);
 
-      if (versions.length === 1) {
-        handleSelectVersion(unNamedVersion);
-      } else if (index === versions.length - 1) {
-        handleSelectVersion(versions[index - 1]);
-      } else {
-        handleSelectVersion(versions[index + 1]);
-      }
+    if (versions.length === 1) {
+      handleSelectVersion(unNamedVersion);
+    } else if (index === versions.length - 1) {
+      handleSelectVersion(versions[index - 1]);
+    } else {
+      handleSelectVersion(versions[index + 1]);
+    }
 
-      versionList.value = versionList.value.filter(item => item.id !== id);
-    });
+    versionList.value = versionList.value.filter(item => item.id !== id);
+  });
 });
+
+const handlePopShow = (version: IConfigVersion, event: any) => {
+  selectedVersion.value = version;
+  const element = event.target;
+  const rect = element.getBoundingClientRect();
+  const distanceToBottom = window.innerHeight - rect.bottom;
+  if (distanceToBottom < 70) {
+    popover.value!.style.top = `${rect.top - 140}px`;
+  } else {
+    popover.value!.style.top = `${rect.top - 20}px`;
+  }
+  popHideTimerId.value && clearTimeout(popHideTimerId.value);
+  popShow.value = true;
+};
+
+const handlePopHide = () => {
+  popHideTimerId.value = window.setTimeout(() => {
+    popShow.value = false;
+  }, 300);
+};
+
+const handlePopContentMouseEnter = () => {
+  if (popHideTimerId.value) {
+    isMouseenter.value = true;
+    clearTimeout(popHideTimerId.value);
+    popHideTimerId.value = 0;
+  }
+};
+const handlePopContentMouseLeave = () => {
+  if (isMouseenter.value) {
+    handlePopHide();
+    isMouseenter.value = false;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -232,6 +268,7 @@ const handleDeprecateVersion = () => new Promise(() => {
   padding: 8px 16px;
 }
 .versions-wrapper {
+  position: relative;
   height: calc(100% - 48px);
   overflow: auto;
 }
@@ -242,7 +279,7 @@ const handleDeprecateVersion = () => new Promise(() => {
 .unnamed-version {
   .divider {
     margin: 8px 24px;
-    border-bottom: 1px solid #DCDEE5;
+    border-bottom: 1px solid #dcdee5;
   }
 }
 .version-item {
@@ -260,7 +297,7 @@ const handleDeprecateVersion = () => new Promise(() => {
     top: 10px;
     left: 24px;
     font-size: 22px;
-    color: #979BA5;
+    color: #979ba5;
   }
   .dot {
     position: absolute;
@@ -310,28 +347,28 @@ const handleDeprecateVersion = () => new Promise(() => {
 .list-pagination {
   margin-top: 16px;
 }
-</style>
-<style lang="scss">
-.config-version-actions-popover.bk-popover.bk-pop2-content {
+.action-list {
+  position: absolute;
+  right: 25px;
   padding: 4px 0;
+  width: 80px;
   border: 1px solid #dcdee5;
   box-shadow: 0 2px 6px 0 #0000001a;
-  .action-list {
-    .action-item {
-      padding: 0 12px;
-      min-width: 58px;
-      height: 32px;
-      line-height: 32px;
-      color: #63656e;
-      font-size: 12px;
-      cursor: pointer;
-      &:hover {
-        background: #f5f7fa;
-      }
-      &.disabled {
-        color: #dcdee5;
-        cursor: not-allowed;
-      }
+  background-color: #fff;
+  border-radius:4px;
+  .action-item {
+    padding: 0 12px;
+    height: 32px;
+    line-height: 32px;
+    color: #63656e;
+    font-size: 12px;
+    cursor: pointer;
+    &:hover {
+      background: #f5f7fa;
+    }
+    &.disabled {
+      color: #dcdee5;
+      cursor: not-allowed;
     }
   }
 }

diff --git a/...ws/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue b/...ws/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
@@ -95,6 +95,7 @@ const handleCreateConfirm = async (pkgIds: number[]) => {
     if (configForm.value.file_type === 'binary') {
       size = Number((content.value as IFileConfigContentSummary).size);
     } else {
+      if (typeof content.value === 'string' && !content.value.endsWith('\n')) content.value += '\n';
       const stringContent = content.value as string;
       size = new Blob([stringContent]).size;
       await updateTemplateContent(spaceId.value, currentTemplateSpace.value, stringContent, sign);

diff --git a/...es/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue b/...es/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
@@ -221,6 +221,7 @@ const getBoundCount = async () => {
 // 上传配置内容
 const uploadContent = async () => {
   const signature = await getSignature();
+  if (typeof stringContent.value === 'string' && !stringContent.value.endsWith('\n')) stringContent.value += '\n';
   const data = formData.value.file_type === 'binary' ? fileContent.value : stringContent.value;
   uploadPending.value = true;
   // @ts-ignore