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

chore(editor): 将组件都改成setup模式

Browse Source
This commit is contained in:
roymondchen 2022-09-26 19:15:03 +08:00 committed by jia000
parent c87e3b2164
commit 96648767e4
6 changed files with 169 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/editor/src/layouts/AddPageBox.vue
View File

@ -11,8 +11,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, inject, toRaw } from 'vue';
<script lang="ts" setup>
import { inject, toRaw } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema';
@ -20,24 +20,16 @@ import { NodeType } from '@tmagic/schema';
import type { Services } from '../type';
import { generatePageNameByApp } from '../utils';
export default defineComponent({
components: { Plus },
const services = inject<Services>('services');
setup() {
const services = inject<Services>('services');
const clickHandler = () => {
const { editorService } = services || {};
return {
clickHandler() {
const { editorService } = services || {};
if (!editorService) return;
if (!editorService) return;
editorService.add({
type: NodeType.PAGE,
name: generatePageNameByApp(toRaw(editorService.get('root'))),
});
},
};
},
});
editorService.add({
type: NodeType.PAGE,
name: generatePageNameByApp(toRaw(editorService.get('root'))),
});
};
</script>

179
packages/editor/src/layouts/sidebar/LayerMenu.vue
View File

@ -2,8 +2,8 @@
<content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
</template>
<script lang="ts">
import { computed, defineComponent, inject, markRaw, ref } from 'vue';
<script lang="ts" setup>
import { computed, inject, markRaw, ref } from 'vue';
import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema';
@ -11,105 +11,100 @@ import { NodeType } from '@tmagic/schema';
import ContentMenu from '../../components/ContentMenu.vue';
import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
export default defineComponent({
components: { ContentMenu },
const services = inject<Services>('services');
const menu = ref<InstanceType<typeof ContentMenu>>();
const node = computed(() => services?.editorService.get('node'));
const isRoot = computed(() => node.value?.type === NodeType.ROOT);
const isPage = computed(() => node.value?.type === NodeType.PAGE);
const componentList = computed(() => services?.componentListService.getList() || []);
setup() {
const services = inject<Services>('services');
const menu = ref<InstanceType<typeof ContentMenu>>();
const node = computed(() => services?.editorService.get('node'));
const isRoot = computed(() => node.value?.type === NodeType.ROOT);
const isPage = computed(() => node.value?.type === NodeType.PAGE);
const componentList = computed(() => services?.componentListService.getList() || []);
const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
const createMenuItems = (group: ComponentGroup): MenuButton[] =>
group.items.map((component) => ({
text: component.text,
type: 'button',
icon: component.icon,
handler: () => {
services?.editorService.add({
name: component.text,
type: component.type,
...(component.data || {}),
});
},
}));
const createMenuItems = (group: ComponentGroup): MenuButton[] =>
group.items.map((component) => ({
text: component.text,
const getSubMenuData = computed<MenuButton[]>(() => {
if (node.value?.type === 'tabs') {
return [
{
text: '标签页',
type: 'button',
icon: component.icon,
icon: Files,
handler: () => {
services?.editorService.add({
name: component.text,
type: component.type,
...(component.data || {}),
type: 'tab-pane',
});
},
}));
const getSubMenuData = computed<MenuButton[]>(() => {
if (node.value?.type === 'tabs') {
return [
{
text: '标签页',
type: 'button',
icon: Files,
handler: () => {
services?.editorService.add({
type: 'tab-pane',
});
},
},
];
}
if (node.value?.items) {
return (
componentList.value.reduce(
(subMenuData: MenuButton[], group: ComponentGroup, index) =>
subMenuData.concat(
createMenuItems(group),
index < componentList.value.length - 1
? [
{
type: 'divider',
direction: 'horizontal',
},
]
: [],
),
[],
) || []
);
}
return [];
});
return {
menu,
menuData: computed<(MenuButton | MenuComponent)[]>(() => [
{
type: 'button',
text: '新增',
icon: markRaw(Plus),
display: () => node.value?.items,
items: getSubMenuData.value,
},
{
type: 'button',
text: '复制',
icon: markRaw(DocumentCopy),
display: () => !isRoot.value,
handler: () => {
node.value && services?.editorService.copy(node.value);
},
},
{
type: 'button',
text: '删除',
icon: markRaw(Delete),
display: () => !isRoot.value && !isPage.value,
handler: () => {
node.value && services?.editorService.remove(node.value);
},
},
...layerContentMenu,
]),
show(e: MouseEvent) {
menu.value?.show(e);
},
};
];
}
if (node.value?.items) {
return (
componentList.value.reduce(
(subMenuData: MenuButton[], group: ComponentGroup, index) =>
subMenuData.concat(
createMenuItems(group),
index < componentList.value.length - 1
? [
{
type: 'divider',
direction: 'horizontal',
},
]
: [],
),
[],
) || []
);
}
return [];
});
const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
{
type: 'button',
text: '新增',
icon: markRaw(Plus),
display: () => node.value?.items,
items: getSubMenuData.value,
},
{
type: 'button',
text: '复制',
icon: markRaw(DocumentCopy),
display: () => !isRoot.value,
handler: () => {
node.value && services?.editorService.copy(node.value);
},
},
{
type: 'button',
text: '删除',
icon: markRaw(Delete),
display: () => !isRoot.value && !isPage.value,
handler: () => {
node.value && services?.editorService.remove(node.value);
},
},
...layerContentMenu,
]);
const show = (e: MouseEvent) => {
menu.value?.show(e);
};
defineExpose({
show,
});
</script>

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

@ -38,38 +38,32 @@
</el-tabs>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue';
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { SideBarData } from '../../type';
import TabPane from './TabPane.vue';
export default defineComponent({
components: { TabPane },
name: 'm-sidebar',
props: {
data: {
type: Object as PropType<SideBarData>,
default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
},
const props = withDefaults(
defineProps<{
data?: SideBarData;
}>(),
{
data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
},
);
setup(props) {
const activeTabName = ref(props.data?.status);
const activeTabName = ref(props.data?.status);
watch(
() => props.data?.status,
(status) => {
activeTabName.value = status || '0';
},
);
return {
activeTabName,
};
watch(
() => props.data.status,
(status) => {
activeTabName.value = status || '0';
},
);
defineExpose({
activeTabName,
});
</script>

84
packages/editor/src/layouts/sidebar/TabPane.vue
View File

@ -64,8 +64,8 @@
</el-tab-pane>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import { Coin, EditPen, Files } from '@element-plus/icons-vue';
import MIcon from '../../components/Icon.vue';
@ -75,52 +75,42 @@ import CodeBlockList from './code-block/CodeBlockList.vue';
import ComponentListPanel from './ComponentListPanel.vue';
import LayerPanel from './LayerPanel.vue';
export default defineComponent({
components: { MIcon },
const props = defineProps<{
data?: SideItem;
}>();
props: {
data: {
type: [Object, String] as PropType<SideItem>,
},
},
const config = computed<SideComponent | undefined>(() => {
if (typeof props.data !== 'string') {
return props.data;
}
setup(props) {
return {
config: computed<SideComponent | undefined>(() => {
if (typeof props.data !== 'string') {
return props.data;
}
switch (props.data) {
case 'component-list':
return {
type: 'component',
icon: Coin,
text: '组件',
component: ComponentListPanel,
slots: {},
};
case 'layer':
return {
type: 'component',
icon: Files,
text: '已选组件',
component: LayerPanel,
slots: {},
};
case 'code-block':
return {
type: 'component',
icon: EditPen,
text: '代码编辑',
component: CodeBlockList,
slots: {},
};
default:
return undefined;
}
}),
};
},
switch (props.data) {
case 'component-list':
return {
type: 'component',
icon: Coin,
text: '组件',
component: ComponentListPanel,
slots: {},
};
case 'layer':
return {
type: 'component',
icon: Files,
text: '已选组件',
component: LayerPanel,
slots: {},
};
case 'code-block':
return {
type: 'component',
icon: EditPen,
text: '代码编辑',
component: CodeBlockList,
slots: {},
};
default:
return undefined;
}
});
</script>

16
packages/editor/src/theme/index.scss
View File

@ -1,16 +1,2 @@
@import "./common/var.scss";
@import "./nav-menu.scss";
@import "./framework.scss";
@import "./sidebar.scss";
@import "./layer-panel.scss";
@import "./component-list-panel.scss";
@import "./resizer.scss";
@import "./workspace.scss";
@import "./page-bar.scss";
@import "./props-panel.scss";
@import "./content-menu.scss";
@import "./stage.scss";
@import "./code-editor.scss";
@import "./icon.scss";
@import "./code-block.scss";
@import "./layout.scss";
@import "./theme.scss";

15
packages/editor/src/theme/theme.scss Normal file
View File

@ -0,0 +1,15 @@
@import "./nav-menu.scss";
@import "./framework.scss";
@import "./sidebar.scss";
@import "./layer-panel.scss";
@import "./component-list-panel.scss";
@import "./resizer.scss";
@import "./workspace.scss";
@import "./page-bar.scss";
@import "./props-panel.scss";
@import "./content-menu.scss";
@import "./stage.scss";
@import "./code-editor.scss";
@import "./icon.scss";
@import "./code-block.scss";
@import "./layout.scss";