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

feat(playground): 添加form、table playground入口

Browse Source
This commit is contained in:
roymondchen 2022-06-13 19:28:12 +08:00 committed by jia000
parent 2ed4557536
commit f80825331e
4 changed files with 111 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -40,7 +40,7 @@ $ pnpm playground
最后在浏览器中打开
http://localhost:8098/
http://localhost:8098/tmagic-editor/playground/
即可得到一个魔方编辑器示例项目

83
playground/src/configs/componentGroupList.ts Normal file
View File

@ -0,0 +1,83 @@
import { FolderOpened, Grid, PictureFilled, SwitchButton, Tickets } from '@element-plus/icons';
export default [
{
title: '示例容器',
items: [
{
icon: FolderOpened,
text: '组',
type: 'container',
},
{
icon: FolderOpened,
text: '蒙层',
type: 'overlay',
},
],
},
{
title: '示例组件',
items: [
{
icon: Tickets,
text: '文本',
type: 'text',
},
{
icon: SwitchButton,
text: '按钮',
type: 'button',
},
{
icon: PictureFilled,
text: '图片',
type: 'img',
},
{
icon: Grid,
text: '二维码',
type: 'qrcode',
},
],
},
{
title: '组合',
items: [
{
icon: Tickets,
text: '弹窗',
data: {
type: 'overlay',
style: {
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
},
name: '弹窗',
items: [
{
type: 'container',
style: {
position: 'absolute',
width: '80%',
height: '400',
top: '143.87',
left: 37.5,
backgroundColor: 'rgba(255, 255, 255, 1)',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
},
name: '组',
items: [],
layout: 'absolute',
},
],
},
},
],
},
];

0
playground/src/config.ts → playground/src/configs/dsl.ts
View File

123
playground/src/pages/Editor.vue
View File

@ -27,16 +27,8 @@
<script lang="ts">
import { defineComponent, ref, toRaw } from 'vue';
import {
Coin,
Connection,
Document,
FolderOpened,
Grid,
PictureFilled,
SwitchButton,
Tickets,
} from '@element-plus/icons';
import { useRouter } from 'vue-router';
import { Coin, Connection, Document } from '@element-plus/icons';
import { ElMessage, ElMessageBox } from 'element-plus';
import serialize from 'serialize-javascript';
@ -45,7 +37,8 @@ import { Id, NodeType } from '@tmagic/schema';
import StageCore from '@tmagic/stage';
import { asyncLoadJs } from '@tmagic/utils';
import config from '../config';
import componentGroupList from '../configs/componentGroupList';
import dsl from '../configs/dsl';
const { VITE_RUNTIME_PATH } = import.meta.env;
@ -53,10 +46,11 @@ export default defineComponent({
name: 'EditorApp',
setup() {
const router = useRouter();
const editor = ref<InstanceType<typeof TMagicEditor>>();
const previewVisible = ref(false);
const value = ref(config);
const defaultSelected = ref(config.items[0].id);
const value = ref(dsl);
const defaultSelected = ref(dsl.items[0].id);
const propsValues = ref<Record<string, any>>({});
const propsConfigs = ref<Record<string, any>>({});
const eventMethodList = ref<Record<string, any>>({});
@ -81,12 +75,23 @@ export default defineComponent({
],
center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
right: [
{
type: 'button',
text: 'Form Playground',
handler: () => router.push('form'),
},
{
type: 'button',
text: 'Table Playground',
handler: () => router.push('table'),
},
'/',
{
type: 'button',
text: '预览',
icon: Connection,
handler: async () => {
if (editor.value?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
handler: async (services) => {
if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
try {
await ElMessageBox.confirm('有修改未保存，是否先保存再预览', '提示', {
confirmButtonText: '保存并预览',
@ -148,87 +153,7 @@ export default defineComponent({
runtimeUrl: `${VITE_RUNTIME_PATH}/playground.html`,
componentGroupList: ref([
{
title: '示例容器',
items: [
{
icon: FolderOpened,
text: '组',
type: 'container',
},
{
icon: FolderOpened,
text: '蒙层',
type: 'overlay',
},
],
},
{
title: '示例组件',
items: [
{
icon: Tickets,
text: '文本',
type: 'text',
},
{
icon: SwitchButton,
text: '按钮',
type: 'button',
},
{
icon: PictureFilled,
text: '图片',
type: 'img',
},
{
icon: Grid,
text: '二维码',
type: 'qrcode',
},
],
},
{
title: '组合',
items: [
{
icon: Tickets,
text: '弹窗',
data: {
type: 'overlay',
style: {
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
},
name: '弹窗',
items: [
{
type: 'container',
style: {
position: 'absolute',
width: '80%',
height: '400',
top: '143.87',
left: 37.5,
backgroundColor: 'rgba(255, 255, 255, 1)',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
},
name: '组',
items: [],
layout: 'absolute',
},
],
},
},
],
},
]),
componentGroupList,
moveableOptions: (core?: StageCore): MoveableOptions => {
const options: MoveableOptions = {};
@ -283,5 +208,11 @@ html {
padding: 0;
}
}
.menu-left {
.menu-item-text {
margin-left: 10px;
}
}
}
</style>