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

refactor(editor): sidebar不使用tmagic-design tabs

Browse Source
This commit is contained in:
roymondchen 2023-08-31 16:36:17 +08:00
parent a8eea1a73b
commit eacb1e6475
2 changed files with 38 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/editor/src/layouts/sidebar/Sidebar.vue
View File

@ -1,24 +1,23 @@
<template>
<component
v-if="data.type === 'tabs' && data.items.length"
v-model="activeTabName"
class="m-editor-sidebar tmagic-design-tabs"
v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
:is="tabsComponent?.component || 'el-tabs'"
>
<component
<div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
<div class="m-editor-sidebar-header">
<div
class="m-editor-sidebar-header-item"
v-for="(config, index) in sideBarItems"
:key="config.$key ?? index"
:class="{ 'is-active': activeTabName === config.text }"
@click="activeTabName = config.text || `${index}`"
>
<MIcon v-if="config.icon" :icon="config.icon"></MIcon>
<div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
</div>
</div>
<div
class="m-editor-sidebar-content"
v-for="(config, index) in sideBarItems"
v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
:is="tabPaneComponent?.component || 'el-tab-pane'"
:key="config.$key || index"
:key="config.$key ?? index"
v-show="activeTabName === config.text"
>
<template #label>
<div :key="config.text">
<MIcon v-if="config.icon" :icon="config.icon"></MIcon>
<div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
</div>
</template>
<component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
<template
#component-list-panel-header
@ -71,16 +70,14 @@
/>
</template>
</component>
</component>
</component>
</div>
</div>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
import { getConfig } from '@tmagic/design';
import MIcon from '@editor/components/Icon.vue';
import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
import { SideBarData } from '@editor/type';
@ -104,9 +101,6 @@ const props = withDefaults(
},
);
const tabPaneComponent = getConfig('components')?.tabPane;
const tabsComponent = getConfig('components')?.tabs;
const activeTabName = ref(props.data?.status);
const getItemConfig = (data: SideItem): SideComponent => {

78
packages/editor/src/theme/sidebar.scss
View File

@ -1,76 +1,33 @@
.m-editor-sidebar.tmagic-design-tabs {
.m-editor-sidebar {
display: flex;
height: 100%;
.el-tabs__header,
.t-tabs__header {
.m-editor-sidebar-header {
background: $--sidebar-heder-background-color;
border: 0;
height: 100%;
width: 40px;
.t-tabs__nav--card {
background-color: transparent;
}
.t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
.t-is-active
):hover {
background-color: transparent;
}
&.is-left,
&.t-is-left {
width: 40px;
margin-right: 0;
}
.el-tabs__nav-wrap {
margin: 0;
}
.el-tabs__nav {
border: 0;
border-radius: 0;
}
.tab-label {
margin-left: 2px;
}
.el-tabs__item.is-left,
.t-tabs__nav-item {
.m-editor-sidebar-header-item {
line-height: 15px;
border: 0;
height: auto;
padding: 8px;
color: rgb(255, 255, 255);
box-sizing: border-box;
cursor: pointer;
&.is-left,
&.t-is-left {
&.is-active,
&.t-is-active {
background: $--sidebar-content-background-color;
border: 0;
&.is-active {
background: $--sidebar-content-background-color;
i {
color: #353140;
}
.magic-editor-tab-panel-title {
color: #353140;
}
i {
color: #353140;
}
&:first-child {
border-right: 0;
.magic-editor-tab-panel-title {
color: #353140;
}
}
}
.t-tabs__nav-item {
padding: 7px;
}
i {
font-size: 25px;
color: rgba(255, 255, 255, 0.6);
@ -86,6 +43,12 @@
}
}
.m-editor-sidebar-content {
height: 100%;
width: calc(100% - 40px);
overflow: auto;
}
.el-scrollbar {
height: 100%;
}
@ -109,9 +72,4 @@
background: rgba(0, 0, 0, 0.2);
}
}
.el-tabs__content,
.el-tab-pane {
height: 100%;
}
}