fix: 配置项编辑相关优化项 (TencentBlueKing#3401)

* fix: 修复页面刷新时title会先显示默认值的问题 --bug=127655371 # Reviewed, transaction id: 12959 * fix: 修复kv配置项最后一行可能看不见的问题 --bug=127767109 # Reviewed, transaction id: 12987 * refactor: kv配置项json、yaml、xml类型校验提示信息强化 --bug=127767769 # Reviewed, transaction id: 13043
q15971095971 · Jul 24, 2024 · c99e410 · c99e410
1 parent 876c6f5
commit c99e410
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 29 deletions.
diff --git a/bcs-services/bcs-bscp/ui/index.html b/bcs-services/bcs-bscp/ui/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="shortcut icon" type="image/x-icon" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>服务配置中心 | 腾讯蓝鲸智云</title>
     <script>
       var BK_BCS_BSCP_API = '{{ .BK_BCS_BSCP_API }}';
       var SITE_URL = '{{ .SITE_URL }}';

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
@@ -6,6 +6,12 @@
     </div>
   </div>
   <section v-show="!isShowPlaceholder || !placeholder" class="code-editor-wrapper" ref="codeEditorRef"></section>
+  <div v-if="errorMessage" ref="errorMsgRef" class="error-msg-container">
+    <span class="error-icon">
+      <Close />
+    </span>
+    <span class="message">{{ errorMessage }}</span>
+  </div>
 </template>
 <script setup lang="ts">
   import { ref, watch, onMounted, nextTick, computed } from 'vue';
@@ -15,6 +21,7 @@
   import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker.js?worker';
   import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker.js?worker';
   import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker.js?worker';
+  import { Close } from 'bkui-vue/lib/icon';
   import { IVariableEditParams } from '../../../types/variable';
   import useEditorVariableReplace from '../../utils/hooks/use-editor-variable-replace';
   import { useRoute } from 'vue-router';
@@ -93,6 +100,8 @@
   const variableNameList = ref<string[]>(['']);
   const privateVariableNameList = ref<string[]>(['']);
   const isShowPlaceholder = ref(true);
+  const errorMessage = ref('');
+  const errorMsgRef = ref();
 
   watch(
     () => props.modelValue,
@@ -141,14 +150,32 @@
     },
   );
 
+  watch(
+    () => errorMessage.value,
+    (newVal, oldVal) => {
+      nextTick(() => {
+        if (newVal !== oldVal) {
+          if (newVal) {
+            if (errorMsgRef.value) {
+              const errorMsgHeight = errorMsgRef.value.clientHeight;
+              codeEditorRef.value.style.height = `calc(100% - ${errorMsgHeight}px)`;
+            }
+          } else {
+            codeEditorRef.value.style.height = '100%';
+          }
+        }
+      });
+    },
+  );
+
   const tabSize = computed(() => {
     if (props.language === 'xml' || props.language === 'yaml') return 2;
     return 4;
   });
 
   onMounted(() => {
     handleVariableList();
-    aotoCompletion();
+    autoCompletion();
     if (!editor) {
       registerLanguage();
       editor = monaco.editor.create(codeEditorRef.value as HTMLElement, {
@@ -269,7 +296,7 @@
     });
   };
   // 联想输入
-  const aotoCompletion = () => {
+  const autoCompletion = () => {
     editorVariableProvide = monaco.languages.registerCompletionItemProvider(props.language || 'custom-language', {
       triggerCharacters: ['{'], // 触发自动补全的字符
       provideCompletionItems(model: any, position: any) {
@@ -323,19 +350,30 @@
 
   // 校验xml、yaml、json数据类型
   const validate = (val: string) => {
+    // json类型
+    if (props.language === 'json') {
+      const validResult = validateJSON(val);
+      errorMessage.value = validResult.result ? '' : validResult.message;
+      return validResult.result;
+    }
+
     let markers: any[] = [];
     if (props.language === 'xml') {
       markers = validateXML(val);
     } else if (props.language === 'yaml') {
       markers = validateYAML(val);
-    } else if (props.language === 'json') {
-      return validateJSON(val);
+    }
+
+    if (markers.length > 0) {
+      const { startLineNumber, startColumn, message } = markers[0];
+      errorMessage.value = `${message} at line ${startLineNumber}, column ${startColumn}`;
     } else {
-      return;
+      errorMessage.value = '';
     }
-    // 添加错误行
+
+    // 编辑器设置错误标记
     monaco.editor.setModelMarkers(editor.getModel() as monaco.editor.ITextModel, 'error', markers);
-    // 返回当前内容是否正确
+
     return !markers.length;
   };
 
@@ -404,4 +442,27 @@
       }
     }
   }
+  .error-msg-container {
+    display: flex;
+    align-items: flex-start;
+    padding: 8px 16px;
+    background: #212121;
+    border-left: 4px solid #b34747;
+    max-height: 60px;
+    overflow: auto;
+    .error-icon {
+      display: flex;
+      align-items: center;
+      color: #b34747;
+      height: 20px;
+      font-size: 12px;
+    }
+    .message {
+      margin-left: 8px;
+      color: #dcdee5;
+      line-height: 20px;
+      font-size: 12px;
+      word-break: break-all;
+    }
+  }
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/css/style.scss b/bcs-services/bcs-bscp/ui/src/css/style.scss
@@ -23,15 +23,17 @@
 div::-webkit-scrollbar,
 ul::-webkit-scrollbar,
 section::-webkit-scrollbar,
-article::-webkit-scrollbar {
+article::-webkit-scrollbar,
+form::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
 
 div::-webkit-scrollbar-thumb,
 ul::-webkit-scrollbar-thumb,
 section::-webkit-scrollbar-thumb,
-article::-webkit-scrollbar-thumb {
+article::-webkit-scrollbar-thumb,
+form::-webkit-scrollbar-thumb {
   background: #ddd;
   border-radius: 20px;
   box-shadow: inset 0 0 6px #cccccc4d;

diff --git a/bcs-services/bcs-bscp/ui/src/store/global.ts b/bcs-services/bcs-bscp/ui/src/store/global.ts
@@ -39,7 +39,6 @@ export default defineStore('global', () => {
   const getAppGlobalConfig = async () => {
     if ((window as any).BK_SHARED_RES_BASE_JS_URL) {
       const config = await getPlatformConfig((window as any).BK_SHARED_RES_BASE_JS_URL, { version: bscpVersion.value });
-      console.log(config);
       appGlobalConfig.value = config;
     }
     setShortcutIcon(appGlobalConfig.value.favicon);

diff --git a/bcs-services/bcs-bscp/ui/src/utils/kv-validate.ts b/bcs-services/bcs-bscp/ui/src/utils/kv-validate.ts
@@ -33,9 +33,15 @@ export const validateJSON = (jsonString: string) => {
   try {
     // 尝试解析JSON文本
     JSON.parse(jsonString);
-    return true;
+    return {
+      result: true,
+      message: '',
+    };
   } catch (e) {
-    return false;
+    return {
+      result: false,
+      message: e,
+    };
   }
 };
 

diff --git a/...bcs-bscp/ui/src/views/space/service/detail/config/components/kv-config-content-editor.vue b/...bcs-bscp/ui/src/views/space/service/detail/config/components/kv-config-content-editor.vue
@@ -48,7 +48,7 @@
     defineProps<{
       content: string;
       languages: string;
-      editable: boolean;
+      editable?: boolean;
       height?: number;
     }>(),
     {

diff --git a/...ui/src/views/space/service/detail/config/config-list/config-table-list/config-form-kv.vue b/...ui/src/views/space/service/detail/config/config-list/config-table-list/config-form-kv.vue
@@ -28,13 +28,14 @@
         ref="KvCodeEditorRef"
         :languages="localVal.kv_type"
         :content="localVal.value"
+        :height="editorHeight"
         @change="handleStringContentChange" />
     </bk-form-item>
   </bk-form>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, computed } from 'vue';
+  import { ref, onMounted, computed, nextTick } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { CONFIG_KV_TYPE } from '../../../../../../../constants/config';
   import KvConfigContentEditor from '../../components/kv-config-content-editor.vue';
@@ -64,6 +65,7 @@
   const localVal = ref({
     ...props.config,
   });
+  const editorHeight = ref(0);
 
   const typeDescription = computed(() => {
     if (appData.value.spec.data_type !== 'any' && !props.editMode) {
@@ -122,6 +124,11 @@
     if (!props.editMode) {
       localVal.value.kv_type = appData.value.spec.data_type! === 'any' ? 'string' : appData.value.spec.data_type!;
     }
+    nextTick(() => {
+      const editorMinHeight = 300; // 编辑器最小高度
+      const remainingHeight = formRef.value.$el.offsetHeight - 355; // 容器高度减去其他元素已占用高度
+      editorHeight.value = remainingHeight > editorMinHeight ? remainingHeight : editorMinHeight;
+    });
   });
 
   const validate = async () => {
@@ -148,5 +155,8 @@
 
   defineExpose({ validate });
 </script>
-
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+  :deep(.bk-form-item:last-child) {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/...ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config-kv.vue b/...ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config-kv.vue
@@ -105,10 +105,10 @@
 <style lang="scss" scoped>
   .config-container {
     height: calc(100vh - 101px);
-    overflow: auto;
     .config-form-wrapper {
       padding: 20px 40px;
       height: 100%;
+      overflow: auto;
     }
   }
 

diff --git a/...ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue b/...ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue
@@ -31,18 +31,20 @@
           </bk-form>
         </bk-tab-panel>
         <bk-tab-panel name="meta" :label="t('元数据')">
-          <ConfigContentEditor
-            language="json"
-            :content="JSON.stringify(metaData, null, 2)"
-            :editable="false"
-            :show-tips="false" />
+          <div class="meta-config-wrapper">
+            <ConfigContentEditor
+              language="json"
+              :content="JSON.stringify(metaData, null, 2)"
+              :editable="false"
+              :show-tips="false" />
+          </div>
         </bk-tab-panel>
       </bk-tab>
     </div>
     <section class="action-btns">
-      <bk-button v-if="config.kv_state !== 'DELETE'" theme="primary" @click="emits('openEdit')">{{
-        t('编辑')
-      }}</bk-button>
+      <bk-button v-if="config.kv_state !== 'DELETE'" theme="primary" @click="emits('openEdit')">
+        {{ t('编辑') }}
+      </bk-button>
       <bk-button @click="close">{{ t('关闭') }}</bk-button>
     </section>
   </bk-sideslider>
@@ -101,7 +103,9 @@
   const setEditorHeight = () => {
     nextTick(() => {
       const el = sideSliderRef.value.$el.querySelector('.view-wrap');
-      editorHeight.value = el.offsetHeight > 410 ? el.offsetHeight - 400 : 300;
+      const editorMinHeight = 300; // 编辑器最小高度
+      const remainingHeight = el.offsetHeight - 354; // 容器其他元素已占用高度
+      editorHeight.value = remainingHeight > editorMinHeight ? remainingHeight : editorMinHeight;
     });
   };
 
@@ -122,14 +126,21 @@
         background: #eaebf0;
       }
       :deep(.bk-tab-content) {
-        padding: 24px 40px;
+        padding: 24px 0;
         height: calc(100% - 48px);
         box-shadow: none;
-        overflow: auto;
       }
     }
+    .bk-form {
+      padding: 0 40px;
+      height: 100%;
+      overflow: auto;
+    }
     :deep(.bk-form-item) {
       margin-bottom: 24px;
+      &:last-child {
+        margin-bottom: 0;
+      }
       .bk-form-label,
       .bk-form-content {
         font-size: 12px;
@@ -149,6 +160,11 @@
     white-space: pre-wrap;
     word-break: break-word;
   }
+  .meta-config-wrapper {
+    padding: 0 40px;
+    height: 100%;
+    overflow: auto;
+  }
   .action-btns {
     border-top: 1px solid #dcdee5;
     padding: 8px 24px;