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,14 +20,9 @@ import { NodeType } from '@tmagic/schema';
 import type { Services } from '../type';
 import { generatePageNameByApp } from '../utils';
 
-export default defineComponent({
-  components: { Plus },
-
-  setup() {
 const services = inject<Services>('services');
 
-    return {
+const clickHandler = () => {
-      clickHandler() {
   const { editorService } = services || {};
 
   if (!editorService) return;
@@ -36,8 +31,5 @@ export default defineComponent({
     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,10 +11,6 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '../../components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
 
-export default defineComponent({
-  components: { ContentMenu },
-
-  setup() {
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
@@ -75,9 +71,7 @@ export default defineComponent({
   return [];
 });
 
-    return {
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
-      menu,
-      menuData: computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '新增',
@@ -104,12 +98,13 @@ export default defineComponent({
     },
   },
   ...layerContentMenu,
-      ]),
+]);
 
-      show(e: MouseEvent) {
+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);
 
 watch(
-      () => props.data?.status,
+  () => props.data.status,
   (status) => {
     activeTabName.value = status || '0';
   },
 );
 
-    return {
+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,18 +75,11 @@ 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: {
-      type: [Object, String] as PropType<SideItem>,
-    },
-  },
-
-  setup(props) {
-    return {
-      config: computed<SideComponent | undefined>(() => {
   if (typeof props.data !== 'string') {
     return props.data;
   }
@@ -119,8 +112,5 @@ export default defineComponent({
     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";