优化playground

README.md

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

playground/src/components/DeviceGroup.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-radio-group size="small" v-model="viewerDevice" :class="viewerDevice" @change="deviceSelect">
+    <el-radio-button label="phone">Phone</el-radio-button>
+    <el-radio-button label="pad">Pad</el-radio-button>
+    <el-radio-button label="pc">PC</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+import { editorService } from '@tmagic/editor';
+import type StageCore from '@tmagic/stage';
+
+enum DeviceType {
+  Phone = 'phone',
+  Pad = 'pad',
+  PC = 'pc',
+}
+
+const devH: Record<DeviceType, number> = {
+  phone: 817,
+  pad: 1024,
+  pc: 900,
+};
+
+const devW: Record<DeviceType, number> = {
+  phone: 375,
+  pad: 768,
+  pc: 1600,
+};
+
+const getDeviceHeight = (viewerDevice: DeviceType) => devH[viewerDevice];
+
+const getDeviceWidth = (viewerDevice: DeviceType) => devW[viewerDevice];
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({
+        width: '375',
+      }),
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const calcFontsize = (width: number) => {
+      const fontSize = width / 3.75;
+      const { iframe } = editorService.get<StageCore>('stage').renderer;
+      if (!iframe?.contentWindow) return;
+      iframe.contentWindow.document.documentElement.style.fontSize = `${fontSize}px`;
+    };
+
+    const viewerDevice = ref(DeviceType.Phone);
+
+    return {
+      viewerDevice,
+
+      deviceSelect(device: DeviceType) {
+        const width = getDeviceWidth(device);
+        const height = getDeviceHeight(device);
+        emit('update:modelValue', {
+          width,
+          height,
+        });
+
+        calcFontsize(width);
+      },
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@media screen and (max-width: 1440px) {
+  .m-editor-workspace {
+    .el-radio-group {
+      transform: rotate(90deg) translateY(-255px);
+      transform-origin: left top;
+
+      &.tv {
+        transform: none;
+      }
+    }
+  }
+}
+
+.m-editor-workspace {
+  * {
+    user-select: none;
+  }
+
+  .el-slider {
+    position: absolute;
+    bottom: 40px;
+    left: 20px;
+    width: 250px;
+    opacity: 0.5;
+    transition: opacity 1s;
+  }
+
+  .el-slider:hover {
+    opacity: 1;
+  }
+
+  .el-radio-group {
+    position: absolute;
+    top: 10px;
+    right: 40px;
+    z-index: 10;
+  }
+
+  .viewer-scrollbar > .el-scrollbar__bar {
+    display: none;
+  }
+
+  .select-component {
+    text-align: center;
+    transform: translate3d(0, -70px, 0);
+
+    p {
+      margin-top: 8px;
+    }
+  }
+
+  .close-pop-button {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+  }
+}
+</style>

playground/src/components/NavMenu.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="m-editor-nav-menu">
+    <el-button
+      v-for="(item, index) in data"
+      class="menu-item button"
+      :key="index"
+      size="small"
+      text
+      @click="item.handler"
+    >
+      <el-icon><component :is="item.icon"></component></el-icon><span>{{ item.text }}</span>
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { MenuButton } from '@tmagic/editor';
+
+export default defineComponent({
+  name: 'nav-menu',
+
+  props: {
+    data: {
+      type: Array as PropType<MenuButton[]>,
+      default: () => [],
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+.m-editor-nav-menu {
+  justify-content: flex-end;
+  height: 35px;
+}
+</style>

playground/src/configs/componentGroupList.ts

@@ -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',
+            },
+          ],
+        },
+      },
+    ],
+  },
+];