@tmagic/editor 1.5.0 → 1.5.1

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -0,0 +1,81 @@
+import { inject, markRaw, useTemplateRef } from 'vue';
+import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
+import { cloneDeep } from 'lodash-es';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { EventBus, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+
+export const useContentMenu = () => {
+  const eventBus = inject<EventBus>('eventBus');
+  const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+
+  let selectId = '';
+
+  const menuData: (MenuButton | MenuComponent)[] = [
+    {
+      type: 'button',
+      text: '编辑',
+      icon: Edit,
+      display: (services) => services?.dataSourceService?.get('editable') ?? true,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+
+        eventBus?.emit('edit-data-source', selectId);
+      },
+    },
+    {
+      type: 'button',
+      text: '复制并粘贴至当前',
+      icon: markRaw(CopyDocument),
+      handler: ({ dataSourceService }: Services) => {
+        if (!selectId) {
+          return;
+        }
+
+        const ds = dataSourceService.getDataSourceById(selectId);
+        if (!ds) {
+          return;
+        }
+
+        dataSourceService.add(cloneDeep(ds));
+      },
+    },
+    {
+      type: 'button',
+      text: '删除',
+      icon: Delete,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+
+        eventBus?.emit('remove-data-source', selectId);
+      },
+    },
+  ];
+
+  const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
+    event.preventDefault();
+
+    if (data.type === 'ds') {
+      menuRef.value?.show(event);
+      if (data.id) {
+        selectId = `${data.id}`;
+      } else {
+        selectId = '';
+      }
+    }
+  };
+
+  const contentMenuHideHandler = () => {
+    selectId = '';
+  };
+
+  return {
+    menuData,
+    nodeContentMenuHandler,
+    contentMenuHideHandler,
+  };
+};

package/src/layouts/sidebar/layer/LayerMenu.vue

@@ -3,37 +3,31 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref } from 'vue';
+import { computed, inject, markRaw, useTemplateRef } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
-import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
+import type { ComponentGroup, CustomContentMenuFunction, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
   name: 'MEditorLayerMenu',
 });
 
-const props = withDefaults(
-  defineProps<{
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-  }>(),
-  {
-    layerContentMenu: () => [],
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
-  },
-);
+const props = defineProps<{
+  layerContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu: CustomContentMenuFunction;
+}>();
 
 const emit = defineEmits<{
   'collapse-all': [];
 }>();
 
 const services = inject<Services>('services');
-const menu = ref<InstanceType<typeof ContentMenu>>();
+const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const node = computed(() => services?.editorService.get('node'));
 const nodes = computed(() => services?.editorService.get('nodes'));
 const componentList = computed(() => services?.componentListService.getList() || []);

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
@@ -55,7 +55,14 @@ import { TMagicScrollbar } from '@tmagic/design';
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
-import type { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+import type {
+  CustomContentMenuFunction,
+  LayerPanelSlots,
+  MenuButton,
+  MenuComponent,
+  Services,
+  TreeNodeData,
+} from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
@@ -74,13 +81,13 @@ defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
   indent?: number;
   nextLevelIndentIncrement?: number;
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  customContentMenu: CustomContentMenuFunction;
 }>();
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const tree = ref<InstanceType<typeof Tree>>();
+const tree = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
 const page = computed(() => editorService?.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, useTemplateRef } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
@@ -99,7 +99,7 @@ export const useClick = (
   };
 
   // 右键菜单
-  const menu = ref<InstanceType<typeof LayerMenu>>();
+  const menu = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 
   return {
     menu,

package/src/layouts/sidebar/layer/use-keybinding.ts

@@ -1,4 +1,4 @@
-import { type Ref, ref, watchEffect } from 'vue';
+import { ref, type ShallowRef, watchEffect } from 'vue';
 
 import Tree from '@editor/components/Tree.vue';
 import type { Services } from '@editor/type';
@@ -6,7 +6,7 @@ import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 export const useKeybinding = (
   services: Services | undefined,
-  container: Ref<InstanceType<typeof Tree> | undefined>,
+  container: ShallowRef<InstanceType<typeof Tree> | null>,
 ) => {
   const keybindingService = services?.keybindingService;
 

package/src/layouts/workspace/Workspace.vue

@@ -19,7 +19,14 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import type { MenuButton, MenuComponent, Services, StageOptions, WorkspaceSlots } from '@editor/type';
+import type {
+  CustomContentMenuFunction,
+  MenuButton,
+  MenuComponent,
+  Services,
+  StageOptions,
+  WorkspaceSlots,
+} from '@editor/type';
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
@@ -34,7 +41,7 @@ withDefaults(
   defineProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
     disabledStageOverlay?: boolean;
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     disabledStageOverlay: false,

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicTooltip } from '@tmagic/design';
@@ -39,8 +39,8 @@ const editorService = services?.editorService;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
-const button = ref<HTMLDivElement>();
-const box = ref<InstanceType<typeof FloatingBox>>();
+const button = useTemplateRef<HTMLDivElement>('button');
+const box = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));

package/src/layouts/workspace/viewer/Stage.vue

@@ -43,7 +43,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
+import {
+  computed,
+  inject,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  toRaw,
+  useTemplateRef,
+  watch,
+  watchEffect,
+} from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/core';
@@ -52,7 +63,8 @@ import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
-import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type';
+import type { CustomContentMenuFunction, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { DragType, Layout } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
@@ -69,7 +81,7 @@ const props = withDefaults(
     stageOptions: StageOptions;
     stageContentMenu: (MenuButton | MenuComponent)[];
     disabledStageOverlay?: boolean;
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     disabledStageOverlay: false,
@@ -83,9 +95,9 @@ const services = inject<Services>('services');
 
 const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
-const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
-const stageContainer = ref<HTMLDivElement>();
-const menu = ref<InstanceType<typeof ViewerMenu>>();
+const stageWrap = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
+const stageContainer = useTemplateRef<HTMLDivElement>('stageContainer');
+const menu = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
 const nodes = computed(() => services?.editorService.get('nodes') || []);
 const isMultiSelect = computed(() => nodes.value.length > 1);

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, useTemplateRef, watch } from 'vue';
 import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
@@ -19,7 +19,7 @@ const services = inject<Services>('services');
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageOverlay = ref<HTMLDivElement>();
+const stageOverlay = useTemplateRef<HTMLDivElement>('stageOverlay');
 
 const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
 const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref, watch } from 'vue';
+import { computed, inject, markRaw, ref, useTemplateRef, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
@@ -11,7 +11,7 @@ import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import CenterIcon from '@editor/icons/CenterIcon.vue';
-import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { CustomContentMenuFunction, LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
@@ -22,18 +22,16 @@ const props = withDefaults(
   defineProps<{
     isMultiSelect?: boolean;
     stageContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     isMultiSelect: false,
-    stageContentMenu: () => [],
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
   },
 );
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const menu = ref<InstanceType<typeof ContentMenu>>();
+const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));

package/src/services/storage.ts

@@ -82,7 +82,8 @@ export class WebStorage extends BaseService {
       case Protocol.NUMBER:
         return Number(item);
       case Protocol.BOOLEAN:
-        return Boolean(item);
+        if (item === 'true') return true;
+        if (item === 'false') return false;
       default:
         return item;
     }

package/src/services/ui.ts

@@ -29,6 +29,7 @@ import BaseService from './BaseService';
 const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
+  showStylePanel: true,
   zoom: 1,
   stageContainerRect: {
     width: 0,

package/src/theme/common/var.scss

@@ -1,14 +1,16 @@
-$--theme-color: #2882e0;
+$theme-color: #2882e0;
 
-$--font-color: #313a40;
-$--border-color: #d9dbdd;
-$--hover-color: #f3f5f9;
+$font-color: #313a40;
+$border-color: #d9dbdd;
+$hover-color: #f3f5f9;
 
-$--nav-height: 35px;
-$--nav-color: #313a40;
-$--nav--background-color: #ffffff;
+$nav-height: 35px;
+$nav-color: #313a40;
+$nav--background-color: #ffffff;
 
-$--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #ffffff;
+$sidebar-heder-background-color: $theme-color;
+$sidebar-content-background-color: #ffffff;
 
-$--page-bar-height: 32px;
+$page-bar-height: 32px;
+
+$props-style-panel-width: 300px;

package/src/theme/component-list-panel.scss

@@ -1,20 +1,22 @@
+@use "common/var" as *;
+
 .ui-component-panel {
   &.tmagic-design-collapse {
     border-top: 0 !important;
     margin-top: 48px;
-    background-color: $--sidebar-content-background-color;
+    background-color: $sidebar-content-background-color;
 
     .tmagic-design-collapse-item {
       > div:first-of-type {
-        border-bottom: 1px solid $--border-color;
+        border-bottom: 1px solid $border-color;
         margin-bottom: 10px;
       }
     }
 
     .el-collapse-item__header,
     .t-collapse-panel__header {
-      background: $--sidebar-content-background-color;
-      color: $--font-color;
+      background: $sidebar-content-background-color;
+      color: $font-color;
       height: 25px;
       line-height: 25px;
       padding-left: 10px;
@@ -28,7 +30,7 @@
 
     .el-collapse-item__wrap,
     .t-collapse-panel__body {
-      background: $--sidebar-content-background-color;
+      background: $sidebar-content-background-color;
       border-bottom: 0;
 
       .el-collapse-item__content,
@@ -44,7 +46,7 @@
         text-overflow: ellipsis;
         margin: 5px 10px;
         box-sizing: border-box;
-        color: $--font-color;
+        color: $font-color;
         flex-direction: column;
         width: 42px;
         cursor: pointer;
@@ -57,7 +59,7 @@
           line-height: 40px;
           border-radius: 5px;
           color: #909090;
-          border: 1px solid $--border-color;
+          border: 1px solid $border-color;
           display: flex;
           justify-content: space-evenly;
           align-items: center;

package/src/theme/content-menu.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .magic-editor-content-menu {
   position: fixed;
   font-size: 12px;
@@ -29,7 +31,7 @@
 
     .el-button--text,
     i {
-      color: $--font-color;
+      color: $font-color;
     }
 
     .magic-editor-icon {
@@ -46,20 +48,20 @@
 
     &.button {
       &:hover {
-        background-color: $--hover-color;
+        background-color: $hover-color;
         .tmagic-design-button,
         .tmagic-design-button:active,
         .tmagic-design-button:focus {
-          color: $--font-color;
+          color: $font-color;
         }
 
         &.menu-item i {
-          color: $--font-color;
+          color: $font-color;
         }
       }
 
       &.active {
-        background-color: $--theme-color;
+        background-color: $theme-color;
         .tmagic-design-button,
         .tmagic-design-button:active,
         .tmagic-design-button:focus {

package/src/theme/data-source.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .data-source-list-panel {
   .list-container {
     .list-item {
@@ -25,7 +27,7 @@
     padding: 5px 14px;
 
     &:hover {
-      background-color: $--hover-color;
+      background-color: $hover-color;
     }
   }
 }

package/src/theme/floating-box.scss

@@ -1,8 +1,10 @@
+@use "common/var" as *;
+
 .m-editor-float-box {
   position: absolute;
   background-color: #fff;
   z-index: 100;
-  border: 1px solid $--border-color;
+  border: 1px solid $border-color;
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -17,7 +19,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid $--border-color;
+    border-bottom: 1px solid $border-color;
   }
 
   .m-editor-float-box-body {

package/src/theme/framework.scss

@@ -1,10 +1,12 @@
+@use "common/var" as *;
+
 .m-editor {
   display: flex;
   flex-direction: column;
   width: 100%;
 
   &-content {
-    height: calc(100% - #{$--nav-height});
+    height: calc(100% - #{$nav-height});
   }
 
   &-framework-center {
@@ -14,7 +16,7 @@
   }
 
   &-framework-left {
-    background-color: $--sidebar-content-background-color;
+    background-color: $sidebar-content-background-color;
   }
 
   &-framework-center .el-scrollbar__view {
@@ -32,7 +34,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: calc(100% - #{$--page-bar-height});
+      height: calc(100% - #{$page-bar-height});
     }
 
     &-content {
@@ -61,8 +63,8 @@
       }
 
       &:hover {
-        border-color: $--theme-color;
-        color: $--theme-color;
+        border-color: $theme-color;
+        color: $theme-color;
       }
     }
   }

package/src/theme/index.scss

@@ -1,8 +1,7 @@
-@import "@tmagic/design/src/theme/index.scss";
-@import "@tmagic/table/src/theme/index.scss";
-@import "@tmagic/form/src/theme/index.scss";
-@import "./common/var.scss";
-@import "./theme.scss";
+@use "@tmagic/design/src/theme/index.scss" as tMagicDesign;
+@use "@tmagic/table/src/theme/index.scss" as tMagicTable;
+@use "@tmagic/form/src/theme/index.scss" as tMagicForm;
+@use "./theme.scss";
 
 .fade-enter-active,
 .fade-leave-active {

package/src/theme/key-value.scss

@@ -11,10 +11,10 @@
   align-items: center;
 }
 
-.m-fileds-key-value-delimiter {
+.m-fields-key-value-delimiter {
   margin: 0 10px;
 }
 
-.m-fileds-key-value-delete {
+.m-fields-key-value-delete {
   margin-left: 10px;
 }

package/src/theme/layer-panel.scss

@@ -1,5 +1,7 @@
+@use "common/var" as *;
+
 .m-editor-layer-panel {
-  background: $--sidebar-content-background-color;
+  background: $sidebar-content-background-color;
 
   .m-editor-tree {
     padding-top: 48px;

package/src/theme/layout.scss

@@ -3,7 +3,7 @@
   display: flex;
   justify-self: space-between;
 
-  &:has(.m-editor-resizer-draging) {
+  &:has(.m-editor-resizer-dragging) {
     overflow: hidden;
   }
 }

package/src/theme/nav-menu.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .m-editor-nav-menu {
   display: flex;
   z-index: 5;
@@ -5,13 +7,13 @@
   justify-content: space-between;
   -webkit-box-align: center;
   align-items: center;
-  background-color: $--nav--background-color;
+  background-color: $nav--background-color;
   font-size: 19.2px;
-  color: $--nav-color;
+  color: $nav-color;
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 $--nav-height;
+  flex: 0 0 $nav-height;
   border-bottom: 1px solid #d8dee8;
 
   > div {
@@ -54,7 +56,7 @@
     }
 
     .is-text > i {
-      color: $--font-color;
+      color: $font-color;
     }
 
     .icon {
@@ -66,7 +68,7 @@
     }
 
     .menu-item-text {
-      color: $--nav-color;
+      color: $nav-color;
     }
 
     &.rule {