mirror of
				https://github.com/Tencent/tmagic-editor.git
				synced 2025-11-04 10:49:51 +08:00 
			
		
		
		
	feat(editor): 代码列表默认只展开第一层
This commit is contained in:
		
							parent
							
								
									befaf67ba7
								
							
						
					
					
						commit
						41cd22b17f
					
				
							
								
								
									
										21
									
								
								packages/editor/src/components/CodeIcon.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										21
									
								
								packages/editor/src/components/CodeIcon.vue
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,21 @@
 | 
				
			|||||||
 | 
					<template>
 | 
				
			||||||
 | 
					  <svg width="2em" height="2em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 | 
				
			||||||
 | 
					    <path
 | 
				
			||||||
 | 
					      d="M8.94034 2.55798L6.09333 13.1832L7.05925 13.442L9.90626 2.8168L8.94034 2.55798Z"
 | 
				
			||||||
 | 
					      fill="currentColor"
 | 
				
			||||||
 | 
					      fill-opacity="0.9"
 | 
				
			||||||
 | 
					    ></path>
 | 
				
			||||||
 | 
					    <path
 | 
				
			||||||
 | 
					      d="M2.14982 8.00001L5.57495 11.4251L4.86784 12.1323L1.15987 8.42428C0.925551 8.18996 0.925553 7.81006 1.15987 7.57575L4.86784 3.86777L5.57495 4.57488L2.14982 8.00001Z"
 | 
				
			||||||
 | 
					      fill="currentColor"
 | 
				
			||||||
 | 
					      fill-opacity="0.9"
 | 
				
			||||||
 | 
					    ></path>
 | 
				
			||||||
 | 
					    <path
 | 
				
			||||||
 | 
					      d="M13.846 8.00001L10.4054 11.4016L11.1085 12.1127L14.8368 8.42668C15.0744 8.19183 15.0744 7.80819 14.8368 7.57333L11.1085 3.88732L10.4054 4.59845L13.846 8.00001Z"
 | 
				
			||||||
 | 
					      fill="currentColor"
 | 
				
			||||||
 | 
					      fill-opacity="0.9"
 | 
				
			||||||
 | 
					    ></path>
 | 
				
			||||||
 | 
					  </svg>
 | 
				
			||||||
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script lang="ts" setup name="MEditorCodeIcon"></script>
 | 
				
			||||||
@ -15,7 +15,7 @@
 | 
				
			|||||||
      class="magic-editor-layer-tree"
 | 
					      class="magic-editor-layer-tree"
 | 
				
			||||||
      node-key="id"
 | 
					      node-key="id"
 | 
				
			||||||
      empty-text="暂无代码块"
 | 
					      empty-text="暂无代码块"
 | 
				
			||||||
      default-expand-all
 | 
					      :default-expanded-keys="expandedKeys"
 | 
				
			||||||
      :expand-on-click-node="false"
 | 
					      :expand-on-click-node="false"
 | 
				
			||||||
      :data="codeList"
 | 
					      :data="codeList"
 | 
				
			||||||
      :highlight-current="true"
 | 
					      :highlight-current="true"
 | 
				
			||||||
@ -25,6 +25,7 @@
 | 
				
			|||||||
      <template #default="{ data }">
 | 
					      <template #default="{ data }">
 | 
				
			||||||
        <div :id="data.id" class="list-container">
 | 
					        <div :id="data.id" class="list-container">
 | 
				
			||||||
          <div class="list-item">
 | 
					          <div class="list-item">
 | 
				
			||||||
 | 
					            <CodeIcon style="width: 15px; margin-right: 5px" v-if="data.type === 'code'"></CodeIcon>
 | 
				
			||||||
            <span class="code-name">{{ data.name }}({{ data.id }})</span>
 | 
					            <span class="code-name">{{ data.name }}({{ data.id }})</span>
 | 
				
			||||||
            <!-- 右侧工具栏 -->
 | 
					            <!-- 右侧工具栏 -->
 | 
				
			||||||
            <div class="right-tool" v-if="data.type === 'code'">
 | 
					            <div class="right-tool" v-if="data.type === 'code'">
 | 
				
			||||||
@ -58,6 +59,7 @@ import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree
 | 
				
			|||||||
import { ColumnConfig } from '@tmagic/form';
 | 
					import { ColumnConfig } from '@tmagic/form';
 | 
				
			||||||
import { CodeBlockContent, Id } from '@tmagic/schema';
 | 
					import { CodeBlockContent, Id } from '@tmagic/schema';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import CodeIcon from '@editor/components/CodeIcon.vue';
 | 
				
			||||||
import Icon from '@editor/components/Icon.vue';
 | 
					import Icon from '@editor/components/Icon.vue';
 | 
				
			||||||
import SearchInput from '@editor/components/SearchInput.vue';
 | 
					import SearchInput from '@editor/components/SearchInput.vue';
 | 
				
			||||||
import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 | 
					import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 | 
				
			||||||
@ -87,6 +89,9 @@ const codeList = computed(() =>
 | 
				
			|||||||
  })),
 | 
					  })),
 | 
				
			||||||
);
 | 
					);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 默认展开节点
 | 
				
			||||||
 | 
					const expandedKeys = computed(() => codeList.value.map((item) => item.id));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const editable = computed(() => codeBlockService?.getEditStatus());
 | 
					const editable = computed(() => codeBlockService?.getEditStatus());
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// 是否展示代码编辑区
 | 
					// 是否展示代码编辑区
 | 
				
			||||||
 | 
				
			|||||||
@ -34,6 +34,7 @@
 | 
				
			|||||||
    overflow: hidden;
 | 
					    overflow: hidden;
 | 
				
			||||||
    .list-item {
 | 
					    .list-item {
 | 
				
			||||||
      display: flex;
 | 
					      display: flex;
 | 
				
			||||||
 | 
					      align-items: center;
 | 
				
			||||||
      width: 100%;
 | 
					      width: 100%;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      .right-tool {
 | 
					      .right-tool {
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user