@tmagic/editor 1.0.0-beta.6 → 1.0.0-beta.9

package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts

@@ -2,10 +2,14 @@ import type { Translator } from 'element-plus';
 import type { Nullable } from 'element-plus/es/utils';
 import type { default } from 'element-plus/es/components/tree/src/model/node';
 import type { TreeOptionProps, TreeKey, LoadFunction, FilterNodeMethodFunction, TreeNodeData, FakeNode, TreeNodeLoadedDefaultProps, TreeData } from 'element-plus/es/components/tree/src/tree.type';
+import type { DebouncedFunc } from 'lodash';
 import type { DefineComponent, ComputedRef, ComponentInternalInstance, ExtractPropTypes, PropType, Component, ComputedOptions, MethodOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, EmitsOptions, Ref } from 'vue';
 import type { MNode } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {
     clickHandler(data: MNode): void;
+    highlightHandler: DebouncedFunc<(data: MNode) => void>;
+    toogleClickFlag: () => void;
+    canHighlight: ComputedRef<boolean>;
     menuStyle: Ref<{
         position: string;
         left: string;
@@ -16,10 +20,12 @@ declare const _default: DefineComponent<{}, {
     filterText: Ref<string>;
     filterNode: (value: string, data: MNode) => boolean;
     filterTextChangeHandler(val: string): void;
-    values: ComputedRef<MNode[]>;
-    loadItems: (node: any, resolve: Function) => any;
     allowDrop: (draggingNode: any, dropNode: any, type: string) => boolean;
     handleDragEnd(): void;
+    values: ComputedRef<MNode[]>;
+    loadItems: (node: any, resolve: Function) => any;
+    highlightNode: Ref<MNode | undefined>;
+    clickNode: Ref<MNode | undefined>;
     tree: Ref<({
         $: ComponentInternalInstance;
         $data: {};

package/dist/types/src/layouts/workspace/Stage.vue.d.ts

@@ -166,7 +166,7 @@ declare const _default: DefineComponent<{
     stageContainer: Ref<HTMLDivElement | undefined>;
     stageRect: ComputedRef<StageRect | undefined>;
     zoom: ComputedRef<number | undefined>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "update" | "sort")[], "sort" | "select" | "update", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "update" | "sort" | "highlight")[], "sort" | "select" | "update" | "highlight", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     render: {
         type: PropType<() => HTMLDivElement>;
     };
@@ -185,6 +185,7 @@ declare const _default: DefineComponent<{
     onSelect?: ((...args: any[]) => any) | undefined;
     onUpdate?: ((...args: any[]) => any) | undefined;
     onSort?: ((...args: any[]) => any) | undefined;
+    onHighlight?: ((...args: any[]) => any) | undefined;
 }, {
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     moveableOptions: MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions);

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -18,6 +18,7 @@ declare const _default: DefineComponent<{
     selectHandler(el: HTMLElement): void;
     updateNodeHandler(node: MComponent | MContainer | MPage): void;
     sortNodeHandler(ev: SortEventData): void;
+    highlightHandler(el: HTMLElement): void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     runtimeUrl: StringConstructor;
     render: {

package/dist/types/src/services/editor.d.ts

@@ -9,7 +9,7 @@ declare class Editor extends BaseService {
     constructor();
     /**
      * 设置当前指点节点配置
-     * @param name 'root' | 'page' | 'parent' | 'node'
+     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
      * @param value MNode
      * @returns MNode
      */
@@ -43,11 +43,17 @@ declare class Editor extends BaseService {
      */
     getLayout(node: MNode): Promise<Layout>;
     /**
-     * 选中指点节点（将指点节点设置成当前选中状态）
-     * @param config 指点节点配置或者ID
+     * 选中指定节点（将指定节点设置成当前选中状态）
+     * @param config 指定节点配置或者ID
      * @returns 当前选中的节点配置
      */
-    select(config: MNode | Id): Promise<MNode>;
+    select(config: MNode | Id): Promise<MNode> | never;
+    /**
+     * 高亮指定节点
+     * @param config 指定节点配置或者ID
+     * @returns 当前高亮的节点配置
+     */
+    highlight(config: MNode | Id): void;
     /**
      * 向指点容器添加组件节点
      * @param addConfig 将要添加的组件节点配置
@@ -116,6 +122,7 @@ declare class Editor extends BaseService {
     private pushHistoryState;
     private changeHistoryState;
     private toggleFixedPosition;
+    private selectedConfigExceptionHandler;
 }
 export declare type EditorService = Editor;
 declare const _default: Editor;

package/dist/types/src/type.d.ts

@@ -26,6 +26,7 @@ export interface StoreState {
     page: MPage | null;
     parent: MContainer | null;
     node: MNode | null;
+    highlightNode: MNode | null;
     stage: StageCore | null;
     modifiedNodeIds: Map<Id, Id>;
 }

package/dist/types/src/utils/editor.d.ts

@@ -1,4 +1,4 @@
-import { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 export declare const generateId: (type: string | number) => string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.9",
   "name": "@tmagic/editor",
   "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
@@ -28,13 +28,13 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.6",
-    "@tmagic/form": "^1.0.0-beta.6",
-    "@tmagic/schema": "^1.0.0-beta.6",
-    "@tmagic/stage": "^1.0.0-beta.6",
-    "@tmagic/utils": "^1.0.0-beta.6",
+    "@tmagic/core": "^1.0.0-beta.9",
+    "@tmagic/form": "^1.0.0-beta.8",
+    "@tmagic/schema": "^1.0.0-beta.9",
+    "@tmagic/stage": "^1.0.0-beta.9",
+    "@tmagic/utils": "^1.0.0-beta.8",
     "color": "^3.1.3",
-    "element-plus": "^2.0.2",
+    "element-plus": "^2.1.7",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
@@ -55,5 +55,6 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
-  }
+  },
+  "gitHead": "6314078c100ddcf513eb5581b38e2292f9b93eb9"
 }

package/src/components/ToolButton.vue

@@ -41,6 +41,8 @@
 import { computed, defineComponent, inject, PropType } from 'vue';
 import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
 
+import { NodeType } from '@tmagic/schema';
+
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
@@ -87,7 +89,7 @@ export default defineComponent({
             type: 'button',
             icon: Delete,
             tooltip: '刪除',
-            disabled: () => services?.editorService.get('node')?.type === 'page',
+            disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get('node')),
           };
         case 'undo':

package/src/layouts/AddPageBox.vue

@@ -15,6 +15,8 @@
 import { defineComponent, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons';
 
+import { NodeType } from '@tmagic/schema';
+
 import { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
@@ -31,7 +33,7 @@ export default defineComponent({
         if (!editorService) return;
 
         editorService.add({
-          type: 'page',
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get('root'))),
         });
       },

package/src/layouts/PropsPanel.vue

@@ -1,6 +1,7 @@
 <template>
   <m-form
     class="m-editor-props-panel"
+    popper-class="m-editor-props-panel-popper"
     ref="configForm"
     size="small"
     :init-values="values"

package/src/layouts/sidebar/LayerPanel.vue

@@ -29,11 +29,20 @@
       empty-text="页面空荡荡的"
     >
       <template #default="{ node, data }">
-        <slot name="layer-node-content" :node="node" :data="data">
-          <span>
-            {{ `${data.name} (${data.id})` }}
-          </span>
-        </slot>
+        <div
+          :id="data.id"
+          class="cus-tree-node"
+          @mousedown="toogleClickFlag"
+          @mouseup="toogleClickFlag"
+          @mouseenter="highlightHandler(data)"
+          :class="{ 'cus-tree-node-hover': canHighlight && data.id === highlightNode?.id }"
+        >
+          <slot name="layer-node-content" :node="node" :data="data">
+            <span>
+              {{ `${data.name} (${data.id})` }}
+            </span>
+          </slot>
+        </div>
       </template>
     </el-tree>
 
@@ -46,14 +55,18 @@
 <script lang="ts">
 import { computed, defineComponent, inject, onMounted, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
+import { throttle } from 'lodash-es';
 
 import type { MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 
 import type { EditorService } from '@editor/services/editor';
 import type { Services } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
+const throttleTime = 150;
+
 const select = (data: MNode, editorService?: EditorService) => {
   if (!data.id) {
     throw new Error('没有id');
@@ -62,6 +75,13 @@ const select = (data: MNode, editorService?: EditorService) => {
   editorService?.select(data);
 };
 
+const highlight = (data: MNode, editorService?: EditorService) => {
+  if (!data?.id) {
+    throw new Error('没有id');
+  }
+  editorService?.highlight(data);
+};
+
 const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => ({
   allowDrop: (draggingNode: any, dropNode: any, type: string): boolean => {
     const { data } = dropNode || {};
@@ -69,8 +89,8 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 
     const { type: ingType } = ingData;
 
-    if (ingType !== 'page' && data.type === 'page') return false;
-    if (ingType === 'page' && data.type !== 'page') return false;
+    if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
+    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
     if (!data || !data.type) return false;
     if (['prev', 'next'].includes(type)) return true;
     if (data.items || data.type === 'container') return true;
@@ -87,19 +107,22 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 });
 
 const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
+  const highlightNode = ref<MNode>();
+  const node = ref<MNode>();
   const page = computed(() => editorService?.get('page'));
 
   watchEffect(() => {
     if (!tree.value) return;
-
-    const node = editorService?.get('node');
-    node && tree.value.setCurrentKey(node.id, true);
+    node.value = editorService?.get('node');
+    node.value && tree.value.setCurrentKey(node.value.id, true);
 
     const parent = editorService?.get('parent');
     if (!parent?.id) return;
 
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
+
+    highlightNode.value = editorService?.get('highlightNode');
   });
 
   return {
@@ -114,6 +137,9 @@ const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorSer
       }
       resolve([]);
     },
+
+    highlightNode,
+    clickNode: node,
   };
 };
 
@@ -188,11 +214,25 @@ export default defineComponent({
   setup() {
     const services = inject<Services>('services');
     const tree = ref<InstanceType<typeof ElTree>>();
+    const clicked = ref(false);
     const editorService = services?.editorService;
+    const highlightHandler = throttle((data: MNode) => {
+      highlight(data, editorService);
+    }, throttleTime);
+
+    const toogleClickFlag = () => {
+      clicked.value = !clicked.value;
+    };
+
+    const statusData = useStatus(tree, editorService);
+    const canHighlight = computed(
+      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value,
+    );
+
     return {
       tree,
+      ...statusData,
       ...useDrop(tree, editorService),
-      ...useStatus(tree, editorService),
       ...useFilter(tree),
       ...useContentMenu(editorService),
 
@@ -201,8 +241,12 @@ export default defineComponent({
           document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
           return;
         }
+        tree.value?.setCurrentKey(data.id);
         select(data, editorService);
       },
+      highlightHandler,
+      toogleClickFlag,
+      canHighlight,
     };
   },
 });

package/src/layouts/workspace/PageBar.vue

@@ -11,9 +11,13 @@
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item)"
       >
-        <slot name="page-bar-title" :page="item">
-          <span>{{ item.name }}</span>
-        </slot>
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <el-tooltip effect="dark" placement="top-start" :content="item.name">
+              <span>{{ item.name }}</span>
+            </el-tooltip>
+          </slot>
+        </div>
 
         <el-popover placement="top" :width="160" trigger="hover">
           <div>
@@ -38,6 +42,7 @@ import { computed, defineComponent, inject, toRaw } from 'vue';
 import { CaretBottom, Plus } from '@element-plus/icons';
 
 import type { MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
@@ -60,7 +65,7 @@ export default defineComponent({
       addPage() {
         if (!editorService) return;
         const pageConfig = {
-          type: 'page',
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get('root'))),
         };
         editorService.add(pageConfig);

package/src/layouts/workspace/Stage.vue

@@ -110,7 +110,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['select', 'update', 'sort'],
+  emits: ['select', 'update', 'sort', 'highlight'],
 
   setup(props, { emit }) {
     const services = inject<Services>('services');
@@ -124,6 +124,7 @@ export default defineComponent({
     const page = computed(() => services?.editorService.get<MPage>('page'));
     const zoom = computed(() => services?.uiService.get<number>('zoom'));
     const node = computed(() => services?.editorService.get<MNode>('node'));
+    const highlightNode = computed(() => services?.editorService.get<MNode>('highlightNode'));
 
     let stage: StageCore | null = null;
     let runtime: Runtime | null = null;
@@ -155,7 +156,13 @@ export default defineComponent({
 
       stage?.mount(stageContainer.value);
 
-      stage?.on('select', (el: HTMLElement) => emit('select', el));
+      stage?.on('select', (el: HTMLElement) => {
+        emit('select', el);
+      });
+
+      stage?.on('highlight', (el: HTMLElement) => {
+        emit('highlight', el);
+      });
 
       stage?.on('update', (ev: UpdateEventData) => {
         emit('update', { id: ev.el.id, style: ev.style });
@@ -202,6 +209,15 @@ export default defineComponent({
       },
     );
 
+    watch(
+      () => highlightNode.value?.id,
+      (id) => {
+        nextTick(() => {
+          id && stage?.highlight(id);
+        });
+      },
+    );
+
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set('stageContainerRect', {

package/src/layouts/workspace/ViewerMenu.vue

@@ -24,6 +24,7 @@
 <script lang="ts">
 import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
 
+import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 
 import { LayerOffset, Layout, Services } from '@editor/type';
@@ -53,7 +54,8 @@ export default defineComponent({
         if (!parent.value || !editorService) return (canCenter.value = false);
         const layout = await editorService.getLayout(parent.value);
         canCenter.value =
-          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !['app', 'page', 'pop'].includes(`${node.value?.type}`);
+          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) &&
+          ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${node.value?.type}`);
       },
       { immediate: true },
     );
@@ -62,8 +64,8 @@ export default defineComponent({
       menu,
       canPaste,
 
-      canDelete: computed(() => node.value?.type !== 'page'),
-      canMoveZPos: computed(() => node.value?.type !== 'page'),
+      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
+      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
       canCenter,
 
       center() {

package/src/layouts/workspace/Workspace.vue

@@ -7,6 +7,7 @@
       :moveable-options="moveableOptions"
       :can-select="canSelect"
       @select="selectHandler"
+      @highlight="highlightHandler"
       @update="updateNodeHandler"
       @sort="sortNodeHandler"
     ></magic-stage>
@@ -73,6 +74,10 @@ export default defineComponent({
       sortNodeHandler(ev: SortEventData) {
         services?.editorService.sort(ev.src, ev.dist);
       },
+
+      highlightHandler(el: HTMLElement) {
+        services?.editorService.highlight(el.id);
+      },
     };
   },
 });

package/src/services/editor.ts

@@ -21,6 +21,7 @@ import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isPop } from '@tmagic/utils';
 
@@ -51,6 +52,7 @@ class Editor extends BaseService {
     parent: null,
     node: null,
     stage: null,
+    highlightNode: null,
     modifiedNodeIds: new Map(),
   });
 
@@ -68,12 +70,13 @@ class Editor extends BaseService {
       'moveLayer',
       'undo',
       'redo',
+      'highlight',
     ]);
   }
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
    * @param value MNode
    * @returns MNode
    */
@@ -119,7 +122,7 @@ class Editor extends BaseService {
     info.parent = path[path.length - 2] as MContainer;
 
     path.forEach((item) => {
-      if (item.type === 'page') {
+      if (item.type === NodeType.PAGE) {
         info.page = item as MPage;
         return;
       }
@@ -166,28 +169,12 @@ class Editor extends BaseService {
   }
 
   /**
-   * 选中指点节点（将指点节点设置成当前选中状态）
-   * @param config 指点节点配置或者ID
+   * 选中指定节点（将指定节点设置成当前选中状态）
+   * @param config 指定节点配置或者ID
    * @returns 当前选中的节点配置
    */
-  public async select(config: MNode | Id): Promise<MNode> {
-    let id: Id;
-    if (typeof config === 'string' || typeof config === 'number') {
-      id = config;
-    } else {
-      id = config.id;
-    }
-    if (!id) {
-      throw new Error('没有ID，无法选中');
-    }
-
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node) throw new Error('获取不到组件信息');
-
-    if (node.id === this.state.root?.id) {
-      throw new Error('不能选根节点');
-    }
-
+  public async select(config: MNode | Id): Promise<MNode> | never {
+    const { node, page, parent } = this.selectedConfigExceptionHandler(config);
     this.set('node', node);
     this.set('page', page || null);
     this.set('parent', parent || null);
@@ -197,8 +184,19 @@ class Editor extends BaseService {
     } else {
       historyService.empty();
     }
+    return node!;
+  }
 
-    return node;
+  /**
+   * 高亮指定节点
+   * @param config 指定节点配置或者ID
+   * @returns 当前高亮的节点配置
+   */
+  public highlight(config: MNode | Id): void {
+    const { node } = this.selectedConfigExceptionHandler(config);
+    const currentHighligtNode = this.get('highlightNode');
+    if (currentHighligtNode === node) return;
+    this.set('highlightNode', node);
   }
 
   /**
@@ -212,7 +210,7 @@ class Editor extends BaseService {
 
     let parentNode: MNode | undefined;
 
-    if (type === 'page') {
+    if (type === NodeType.PAGE) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -228,7 +226,7 @@ class Editor extends BaseService {
     const layout = await this.getLayout(parentNode);
     const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout);
 
-    if ((parentNode?.type === 'app' || curNode.type === 'app') && newNode.type !== 'page') {
+    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
     }
 
@@ -239,7 +237,9 @@ class Editor extends BaseService {
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    this.pushHistoryState();
+    if (type !== NodeType.PAGE) {
+      this.pushHistoryState();
+    }
 
     return newNode;
   }
@@ -267,7 +267,7 @@ class Editor extends BaseService {
     parent.items?.splice(index, 1);
     this.get<StageCore>('stage')?.remove({ id: node.id, root: this.get('root') });
 
-    if (node.type === 'page') {
+    if (node.type === NodeType.PAGE) {
       await this.select(root.items[0] || root);
     } else {
       await this.select(parent);
@@ -295,7 +295,7 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
       if (Array.isArray(srcValue)) {
         return srcValue;
       }
@@ -303,7 +303,7 @@ class Editor extends BaseService {
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 
-    if (newConfig.type === 'app') {
+    if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig);
       return newConfig;
     }
@@ -330,7 +330,7 @@ class Editor extends BaseService {
 
     this.get<StageCore>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
 
-    if (newConfig.type === 'page') {
+    if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
     }
 
@@ -359,6 +359,8 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
+    this.get<StageCore>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -522,6 +524,30 @@ class Editor extends BaseService {
 
     return newConfig;
   }
+
+  private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
+    let id: Id;
+    if (typeof config === 'string' || typeof config === 'number') {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error('没有ID，无法选中');
+    }
+
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node) throw new Error('获取不到组件信息');
+
+    if (node.id === this.state.root?.id) {
+      throw new Error('不能选根节点');
+    }
+    return {
+      node,
+      parent,
+      page,
+    };
+  }
 }
 
 export type EditorService = Editor;

package/src/theme/common/var.scss

@@ -5,9 +5,9 @@ $--border-color: #d9dbdd;
 
 $--nav-height: 35px;
 $--nav-color: #070303;
-$--nav--background-color: #f8fbff;
+$--nav--background-color: #ffffff;
 
 $--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #f8fbff;
+$--sidebar-content-background-color: #ffffff;
 
 $--page-bar-height: 32px;