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

packages/editor/src/layouts/AddPageBox.vue

@@ -11,8 +11,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, toRaw } from 'vue';
+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({
+const services = inject<Services>('services');
-  components: { Plus },
 
-  setup() {
+const clickHandler = () => {
-    const services = inject<Services>('services');
+  const { editorService } = services || {};
 
-    return {
+  if (!editorService) return;
-      clickHandler() {
-        const { editorService } = services || {};
 
-        if (!editorService) return;
+  editorService.add({
-
+    type: NodeType.PAGE,
-        editorService.add({
+    name: generatePageNameByApp(toRaw(editorService.get('root'))),
-          type: NodeType.PAGE,
+  });
-          name: generatePageNameByApp(toRaw(editorService.get('root'))),
+};
-        });
-      },
-    };
-  },
-});
 </script>

packages/editor/src/layouts/sidebar/LayerMenu.vue

@@ -2,8 +2,8 @@
   <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+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({
+const services = inject<Services>('services');
-  components: { ContentMenu },
+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 layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
-    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 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[] =>
+const getSubMenuData = computed<MenuButton[]>(() => {
-      group.items.map((component) => ({
+  if (node.value?.type === 'tabs') {
-        text: component.text,
+    return [
+      {
+        text: '标签页',
         type: 'button',
-        icon: component.icon,
+        icon: Files,
         handler: () => {
           services?.editorService.add({
-            name: component.text,
+            type: 'tab-pane',
-            type: component.type,
-            ...(component.data || {}),
           });
         },
-      }));
-
-    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>

packages/editor/src/layouts/sidebar/Sidebar.vue

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

packages/editor/src/layouts/sidebar/TabPane.vue

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

packages/editor/src/theme/index.scss

@@ -1,16 +1,2 @@
 @import "./common/var.scss";
-@import "./nav-menu.scss";
+@import "./theme.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";

packages/editor/src/theme/theme.scss

@@ -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";