mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +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