fix：修复部分空间样式和交互问题 (#2699)

* fix: 修复脚本管理分页功能 * fix：表格单选框部分垂直居中 * fix：修复部分空间样式及交互问题
TencentBlueKing · Oct 23, 2023 · 3e53028 · 3e53028
1 parent f9da55a
commit 3e53028
Show file tree

Hide file tree

Showing 14 changed files with 289 additions and 228 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue b/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue
@@ -106,6 +106,7 @@ onMounted(() => {
       automaticLayout: true,
       language: props.language,
       readOnly: !props.editable,
+      scrollBeyondLastLine: false,
     });
   }
   if (props.lfEol) {

diff --git a/bcs-services/bcs-bscp/ui/src/components/diff/index.vue b/bcs-services/bcs-bscp/ui/src/components/diff/index.vue
@@ -1,35 +1,36 @@
 <template>
-    <section class="diff-comp-panel">
-        <div class="top-area">
-            <div class="left-panel">
-                <slot name="leftHead">
-                </slot>
-            </div>
-            <div class="right-panel">
-                <slot name="rightHead">
-                    <div class="panel-name">{{ props.panelName }}</div>
-                </slot>
-            </div>
-        </div>
-        <bk-loading class="loading-wrapper" :loading="props.loading">
-            <div v-if="!props.loading" class="detail-area">
-                <File
-                    v-if="props.diff.contentType === 'file'"
-                    :current="(props.diff.current.content as IFileConfigContentSummary)"
-                    :base="(props.diff.base.content as IFileConfigContentSummary)"
-                    :id="props.id" />
-                <Text
-                    v-else-if="props.diff.contentType === 'text'"
-                    :language="props.diff.current.language"
-                    :current="(props.diff.current.content as string)"
-                    :current-variables="props.diff.current.variables"
-                    :current-permission="currentPermission"
-                    :base="(props.diff.base.content as string)"
-                    :base-variables="props.diff.base.variables"
-                    :base-permission="basePermission"/>
-            </div>
-        </bk-loading>
-    </section>
+  <section class="diff-comp-panel">
+    <div class="top-area">
+      <div class="left-panel">
+        <slot name="leftHead"> </slot>
+      </div>
+      <div class="right-panel">
+        <slot name="rightHead">
+          <div class="panel-name">{{ props.panelName }}</div>
+        </slot>
+      </div>
+    </div>
+    <bk-loading class="loading-wrapper" :loading="props.loading">
+      <div v-if="!props.loading" class="detail-area">
+        <File
+          v-if="props.diff.contentType === 'file'"
+          :current="props.diff.current.content as IFileConfigContentSummary"
+          :base="props.diff.base.content as IFileConfigContentSummary"
+          :id="props.id"
+        />
+        <Text
+          v-else-if="props.diff.contentType === 'text'"
+          :language="props.diff.current.language"
+          :current="props.diff.current.content as string"
+          :current-variables="props.diff.current.variables"
+          :current-permission="currentPermission"
+          :base="props.diff.base.content as string"
+          :base-variables="props.diff.base.variables"
+          :base-permission="basePermission"
+        />
+      </div>
+    </bk-loading>
+  </section>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
@@ -39,15 +40,18 @@ import File from './file.vue';
 import Text from './text.vue';
 
 const props = defineProps<{
-    panelName?: String;
-    diff: IDiffDetail;
-    id: number; // 服务ID或模板空间ID
-    loading: boolean
-  }>();
+  panelName?: String;
+  diff: IDiffDetail;
+  id: number; // 服务ID或模板空间ID
+  loading: boolean;
+}>();
 
-const currentPermission = computed(() => `权限:${props.diff.current.permission?.privilege}
+const currentPermission = computed(() => {
+  if (!props.diff.base.permission) return;
+  return `权限:${props.diff.current.permission?.privilege}
 用户:${props.diff.current.permission?.user}
-用户组:${props.diff.current.permission?.user_group}`);
+用户组:${props.diff.current.permission?.user_group}`;
+});
 const basePermission = computed(() => {
   if (!props.diff.base.permission) return;
   return `权限:${props.diff.base.permission?.privilege}
@@ -56,43 +60,43 @@ const basePermission = computed(() => {
 });
 </script>
 <style lang="scss" scoped>
-    .diff-comp-panel {
-        height: 100%;
-        border-left: 1px solid #dcdee5;
-    }
-    .top-area {
-        display: flex;
-        align-items: center;
-        height: 49px;
-        color: #313238;
-        // border-bottom: 1px solid #dcdee5;
-        .left-panel,
-        .right-panel {
-            height: 100%;
-            width: 50%;
-        }
-        .right-panel {
-            border-left: 1px solid #dcdee5;
-        }
-        .panel-name {
-            padding: 16px;
-            font-size: 12px;
-            line-height: 1;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-        .config-select-area {
-            display: flex;
-            align-items: center;
-            padding: 8px 16px;
-            font-size: 12px;
-        }
-    }
-    .loading-wrapper {
-        height: calc(100% - 49px);
-    }
-    .detail-area {
-        height: 100%;
-    }
+.diff-comp-panel {
+  height: 100%;
+  border-left: 1px solid #dcdee5;
+}
+.top-area {
+  display: flex;
+  align-items: center;
+  height: 49px;
+  color: #313238;
+  // border-bottom: 1px solid #dcdee5;
+  .left-panel,
+  .right-panel {
+    height: 100%;
+    width: 50%;
+  }
+  .right-panel {
+    border-left: 1px solid #dcdee5;
+  }
+  .panel-name {
+    padding: 16px;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .config-select-area {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    font-size: 12px;
+  }
+}
+.loading-wrapper {
+  height: calc(100% - 49px);
+}
+.detail-area {
+  height: 100%;
+}
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/components/diff/text.vue b/bcs-services/bcs-bscp/ui/src/components/diff/text.vue
@@ -59,7 +59,7 @@ const props = withDefaults(
     currentVariables: () => [],
     currentLanguage: '',
     baseVariables: () => [],
-  },
+  }
 );
 
 const textDiffRef = ref();
@@ -76,23 +76,23 @@ watch(
   () => {
     updateModel();
     replaceDiffVariables();
-  },
+  }
 );
 
 watch(
   () => [props.baseLanguage, props.currentLanguage],
   () => {
     updateModel();
     replaceDiffVariables();
-  },
+  }
 );
 
 watch(
   () => [props.basePermission, props.currentPermission],
   () => {
     updateModel();
     replaceDiffVariables();
-  },
+  }
 );
 
 onMounted(() => {
@@ -122,6 +122,7 @@ const createDiffEditor = () => {
   diffEditor = monaco.editor.createDiffEditor(textDiffRef.value, {
     theme: 'vs-dark',
     automaticLayout: true,
+    scrollBeyondLastLine: false,
     readOnly: true,
   });
   diffEditor.setModel({
@@ -181,7 +182,7 @@ const replaceDiffVariables = () => {
     permissionDiffEditorHoverProvider = useDiffEditorVariableReplace(
       permissionEditor,
       props.currentVariables,
-      props.baseVariables,
+      props.baseVariables
     );
   }
 };

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
@@ -46,7 +46,7 @@
           :remote-pagination="true"
           :pagination="pagination"
           @page-limit-change="handlePageLimitChange"
-          @page-value-change="refreshList"
+          @page-value-change="handlePageCurrentChange"
         >
           <bk-table-column label="脚本名称">
             <template #default="{ row }">
@@ -141,7 +141,7 @@ watch(
   () => {
     refreshList();
     getTags();
-  },
+  }
 );
 
 onMounted(() => {
@@ -156,14 +156,10 @@ const getScripts = async () => {
     start: (pagination.value.current - 1) * pagination.value.limit,
     limit: pagination.value.limit,
   };
-  if (showAllTag.value) {
-    params.all = true;
+  if (selectedTag.value === '' && !showAllTag.value) {
+    params.not_tag = true;
   } else {
-    if (selectedTag.value === '') {
-      params.not_tag = true;
-    } else {
-      params.tag = selectedTag.value;
-    }
+    params.tag = selectedTag.value;
   }
   if (searchStr.value) {
     params.name = searchStr.value;
@@ -246,6 +242,13 @@ const handlePageLimitChange = (val: number) => {
   refreshList();
 };
 
+const handlePageCurrentChange = (val: number) => {
+  console.log('val', val);
+
+  pagination.value.current = val;
+  getScripts();
+};
+
 const clearSearchStr = () => {
   searchStr.value = '';
   refreshList();
@@ -330,6 +333,7 @@ const clearSearchStr = () => {
   width: calc(100% - 280px);
   height: 100%;
   background: #ffffff;
+  overflow: auto;
 }
 .operate-area {
   display: flex;

diff --git a/...scp/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue b/...scp/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
@@ -8,7 +8,7 @@
             <bk-input v-model="formData.name" @change="formChange" />
           </bk-form-item>
           <bk-form-item label="版本描述" property="memo">
-            <bk-input v-model="formData.memo" type="textarea" :maxlength="100" @change="formChange" :resize="false"/>
+            <bk-input v-model="formData.memo" type="textarea" :maxlength="100" @change="formChange" :resize="false" />
           </bk-form-item>
           <bk-checkbox v-model="isPublish" :true-label="true" :false-label="false" @change="formChange">
             同时上线版本
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="action-btns">
-      <bk-button theme="primary" @click="handleOpenDiff">预览</bk-button>
+      <bk-button theme="primary" @click="confirm">确定</bk-button>
       <bk-button @click="close">取消</bk-button>
     </div>
   </bk-sideslider>
@@ -90,7 +90,7 @@ watch(
       isPublish.value = false;
       getVariableList();
     }
-  },
+  }
 );
 
 const getVariableList = async () => {