JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-03 00:12:30 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 代码块列表无法滚动

Browse Source
This commit is contained in:
kevinyzheng 2022-12-21 18:19:52 +08:00
parent 9b324d17cc
commit 87a19c9bae
2 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
View File

@ -17,63 +17,65 @@
</slot> </slot>
<!-- 代码块列表 --> <!-- 代码块列表 -->
<TMagicTree <TMagicScrollbar>
v-if="!isEmpty(state.codeList)" <TMagicTree
ref="tree" v-if="!isEmpty(state.codeList)"
node-key="id" ref="tree"
empty-text="暂无代码块" node-key="id"
:data="state.codeList" empty-text="暂无代码块"
:highlight-current="true" :data="state.codeList"
:filter-node-method="filterNode" :highlight-current="true"
@node-click="toggleCombineRelation" :filter-node-method="filterNode"
> @node-click="toggleCombineRelation"
<template #default="{ data }"> >
<div :id="data.id" class="list-container"> <template #default="{ data }">
<div class="list-item"> <div :id="data.id" class="list-container">
<span class="code-name">{{ data.name }}（{{ data.id }}）</span> <div class="list-item">
<!-- 右侧工具栏 --> <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
<div class="right-tool"> <!-- 右侧工具栏 -->
<TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom"> <div class="right-tool">
<Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon> <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
</TMagicTooltip> <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
<TMagicTooltip </TMagicTooltip>
effect="dark" <TMagicTooltip
content="查看绑定关系" effect="dark"
placement="bottom" content="查看绑定关系"
v-if="data.combineInfo && data.combineInfo.length > 0" placement="bottom"
v-if="data.combineInfo && data.combineInfo.length > 0"
>
<Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
</TMagicTooltip>
<TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
<Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
</TMagicTooltip>
<slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
</div>
</div>
<!-- 展示代码块下绑定的组件 -->
<div
class="code-comp-map-wrapper"
v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
>
<svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
<path
fill="currentColor"
d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
<TMagicButton
v-for="(comp, index) in data.combineInfo"
:key="index"
class="code-comp"
size="small"
:plain="true"
@click.stop="selectComp(comp.compId)"
>{{ comp.compName }}</TMagicButton
> >
<Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
</TMagicTooltip>
<TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
<Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
</TMagicTooltip>
<slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
</div> </div>
</div> </div>
<!-- 展示代码块下绑定的组件 --> </template>
<div </TMagicTree>
class="code-comp-map-wrapper" </TMagicScrollbar>
v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
>
<svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
<path
fill="currentColor"
d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
<TMagicButton
v-for="(comp, index) in data.combineInfo"
:key="index"
class="code-comp"
size="small"
:plain="true"
@click.stop="selectComp(comp.compId)"
>{{ comp.compName }}</TMagicButton
>
</div>
</div>
</template>
</TMagicTree>
<!-- 代码块编辑区 --> <!-- 代码块编辑区 -->
<code-block-editor v-if="isShowCodeBlockEditor"> <code-block-editor v-if="isShowCodeBlockEditor">
@ -89,7 +91,7 @@ import { computed, inject, reactive, ref, watch } from 'vue';
import { Close, Edit, Link, View } from '@element-plus/icons-vue'; import { Close, Edit, Link, View } from '@element-plus/icons-vue';
import { cloneDeep, forIn, isEmpty } from 'lodash-es'; import { cloneDeep, forIn, isEmpty } from 'lodash-es';
import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design'; import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
import { CodeBlockContent, Id } from '@tmagic/schema'; import { CodeBlockContent, Id } from '@tmagic/schema';
import StageCore from '@tmagic/stage'; import StageCore from '@tmagic/stage';

2
packages/editor/src/theme/code-block.scss
View File

@ -1,5 +1,7 @@
.m-editor-code-block-list { .m-editor-code-block-list {
height: 100%;
margin-top: 5px; margin-top: 5px;
.el-tree-node__content { .el-tree-node__content {
height: auto; height: auto;
} }