--story=120521644 部署管理：模板文件-yaml模式字符串使用yamljs.loadAll替换'xxx'.split('-…

…--')分割 (merge request !2100)

Squash merge branch 'feat/template-file-loadAll' into 'master'
feat:yamljs.loadAll分割模板文件字符串

TAPD: --story=120521644

bcs-ui/frontend/src/views/deploy-manage/template-file/form-mode.vue

@@ -146,7 +146,6 @@ import { computed, nextTick, onBeforeMount, ref, set, watch } from 'vue';
 
 import createForm from '@blueking/bkui-form/dist/bkui-form-umd';
 
-import BcsVarInput from './bcs-var-input.vue';
 import BcsVarDatasourceInput from './bcs-variable-datasource-input.vue';
 import leftNav from './left-nav.vue';
 import { updateVarList } from './use-store';
@@ -213,9 +212,9 @@ const validArray = computed(() => schemaFormData.value.reduce<Array<boolean>>((p
   pre.push(!name);
   return pre;
 }, []));
-const formToJson = computed(() => schemaFormData.value.reduce<Array<string>>((pre, cur) => {
+const formToJson = computed(() => schemaFormData.value.reduce<Array<{name: string}>>((pre, cur) => {
   const name = cur?.formData?.metadata?.name || '';
-  pre.push(name);
+  pre.push({ name });
   return pre;
 }, []));
 
@@ -430,7 +429,7 @@ const handleAnchor = (index: number) => {
 
 const handleBlur = (index: number, name: string) => {
   if (formToJson.value.length === 0) return;
-  formToJson.value[index] = name ? name : '';
+  formToJson.value[index].name = name ? name : '';
 };
 
 const sectionRefs = ref();

bcs-ui/frontend/src/views/deploy-manage/template-file/left-nav.vue

@@ -25,17 +25,19 @@
           ]">{{ index + 1 }}</span>
         <span class="bcs-ellipsis" v-bk-overflow-tips>
           <slot :item="item">
-            {{ item || $t('templateFile.label.untitled') }}
+            {{ item.name || $t('templateFile.label.untitled') }}
           </slot>
         </span>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { PropType } from 'vue';
+
 defineProps({
   list: {
-    type: Array,
+    type: Array as PropType<{name: string, offset?: number}[]>,
     default: () => [],
   },
   activeIndex: {

bcs-ui/frontend/src/views/deploy-manage/template-file/yaml-mode.vue

@@ -14,11 +14,7 @@
         <left-nav
           :list="yamlToJson"
           :active-index="activeContentIndex"
-          @cellClick="({ item }) => handleAnchor(item)">
-          <template #default="{ item }">
-            <span class="bcs-ellipsis" v-bk-overflow-tips>{{ item?.name }}</span>
-          </template>
-        </left-nav>
+          @cellClick="({ item }) => handleAnchor(item)" />
       </div>
       <div
         slot="main"
@@ -106,15 +102,15 @@ const content = ref('');
 const activeContentIndex = ref(0);
 const yamlToJson = computed(() => {
   let offset = 0;
-  return content.value.split('---')
+  return yamljs.loadAll(content.value)
     .reduce<Array<{ name: string; offset: number }>>((pre, doc) => {
-    const name = yamljs.load(doc)?.metadata?.name;
+    const name = doc?.metadata?.name;
     if (name) {
       pre.push({
         name,
         offset,
       });
-      offset += doc.length;
+      offset += yamljs.dump(doc).length;
     }
     return pre;
   }, []);
@@ -135,6 +131,7 @@ const watchOnce = watch(yamlToJson, () => {
   // 只有一项数据时折叠起来
   if (yamlToJson.value && yamlToJson.value.length < 2) {
     yamlLayoutRef.value?.setCollapse(true);
+    yamlLayoutRef.value.$refs.aside.style.transition = '';
   }
   watchOnce();
 });