chore: 调整编辑器样式解决点选被挡住问题 (#10221)

amis.code-workspace

@@ -28,5 +28,38 @@
     {
       "path": "./packages/amis-theme-editor-helper"
     }
-  ]
+  ],
+  "settings": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2,
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "files.exclude": {
+      "**/lib": true,
+      "**/esm": true,
+      "**/sdk": true,
+      "**/tsconfig.tsbuildinfo": true,
+      "**/schema.json": true,
+      "**/lerna-debug.log": true,
+      "**/package-lock.json": true,
+      "**/.rollup.cache": true,
+      "public/**": true
+    },
+    "search.exclude": {
+      "**/lib": true,
+      "**/esm": true,
+      "**/sdk": true,
+      "**/tsconfig.tsbuildinfo": true,
+      "**/schema.json": true,
+      "**/lerna-debug.log": true,
+      "**/package-lock.json": true,
+      "**/.rollup.cache": true,
+      "public/**": true,
+      "examples/docs.json": true,
+      "examples/components/EChartsEditor/option-parts/**/*": true
+    },
+    "[xml]": {
+      "editor.defaultFormatter": "redhat.vscode-xml"
+    }
+  }
 }

examples/components/App.tsx

@@ -295,12 +295,21 @@ export class App extends React.PureComponent<{
             >
               示例
             </NavLink>
-            <a
+            {process.env.NODE_ENV === 'development' ? (
-              href="https://github.com/fex-team/amis-editor-demo"
+              <>
-              target="_blank"
+                <a href={`/packages/amis-ui/#/basic/button`}>UI控件</a>
-            >
+                <a href={`/packages/amis-editor/`}>编辑器</a>
-              编辑器
+              </>
-            </a>
+            ) : (
+              <>
+                <a
+                  href="https://github.com/fex-team/amis-editor-demo"
+                  target="_blank"
+                >
+                  编辑器
+                </a>
+              </>
+            )}
             {/* <a href="https://suda.bce.baidu.com" target="_blank">
               爱速搭
             </a> */}

packages/amis-editor-core/scss/_bcn.scss

@@ -1,22 +1,19 @@
 .ae-Breadcrumb {
-  flex: 0 0 42px;
+  flex: 0 0 22px;
-  position: relative;
   padding: 0;
   background: #fff;
   box-sizing: border-box;
   border-bottom: 1px solid $editor-border-color;
-  z-index: 1000;
 
   .ae-Breadcrumb-content {
-    position: relative;
     left: 0;
     height: 100%;
     width: max-content;
     padding: 0 16px;
 
     white-space: nowrap;
-    height: 42px;
+    height: 22px;
-    line-height: 42px;
+    line-height: 22px;
     background: #fff;
     letter-spacing: 0;
     font-family: PingFangSC-Regular;
@@ -26,7 +23,6 @@
     user-select: none;
 
     box-sizing: border-box;
-    z-index: 10000;
     transition: left ease-out 0.15s;
 
     > ul {
@@ -47,7 +43,7 @@
         > span {
           display: inline-block;
           padding-right: 8px;
-          line-height: 42px !important; // 避免被覆盖
+          line-height: 22px !important; // 避免被覆盖
           cursor: pointer;
 
           &:hover {
@@ -57,7 +53,7 @@
         // 同级元素选择弹层
         > ul {
           position: absolute;
-          top: 46px;
+          top: 26px;
           left: 0;
           min-width: 100px;
           max-height: 320px;

packages/amis-editor-core/scss/editor.scss

@@ -135,6 +135,10 @@
   flex-direction: column;
   z-index: 0;
 
+  overflow: hidden;
+  transform: scale(1); // 此后内部元素的fixed会相对此dom定位
+  transform-origin: center top;
+
   .ant-back-top {
     bottom: 96px;
     right: 39px;
@@ -155,10 +159,8 @@
 .ae-Preview {
   position: relative;
   flex-grow: 1;
+  min-height: 0;
   background-color: $default-bg-color;
-  overflow: hidden;
-  transform: scale(1); // 此后内部元素的fixed会相对此dom定位
-  transform-origin: center top;
 
   .ae-Preview-body {
     position: relative;
@@ -175,7 +177,7 @@
     &:before {
       content: '';
       display: block;
-      height: 24px;
+      height: 16px;
     }
 
     @include minScrollBar();
@@ -256,15 +258,15 @@
 
     &.is-mobile {
       position: relative;
-      border-width: 24px 22px 36px;
+      border-width: 10px;
-      border-color: #ddd;
+      border-color: #222;
       border-style: solid;
-      border-radius: 40px;
+      border-radius: 30px;
-      width: 419px;
+      width: 375px;
-      height: 798px;
+      height: 96%;
+      max-height: 812px;
       flex-grow: unset;
       min-height: unset;
-      margin: 40px auto;
       min-width: unset;
       padding: 0;
       overflow: visible;
@@ -275,6 +277,14 @@
       }
 
       > .ae-Preview-inner {
+        border-radius: 20px;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+
         background: transparent;
         overflow-x: hidden;
         overflow-y: auto;
@@ -288,71 +298,74 @@
           display: none;
         }
 
-        &::before {
+        // &::before {
-          content: '';
+        //   content: '';
-          height: 40px;
+        //   height: 40px;
-          position: sticky;
+        //   position: sticky;
-          top: 0;
+        //   top: 0;
-          width: 100%;
+        //   width: 100%;
-          background: #ddd;
+        //   background: #ddd;
-          flex-shrink: 0;
+        //   flex-shrink: 0;
-          display: block;
+        //   display: block;
-        }
+        // }
       }
 
-      // 移动端预览设备装饰
+      // // 移动端预览设备装饰
-      .mobile-sound,
+      // .mobile-sound,
-      .mobile-receiver,
+      // .mobile-receiver,
-      .mobile-left-btn,
+      // .mobile-left-btn,
-      .mobile-right-btn,
+      // .mobile-right-btn,
-      .mobile-open-btn {
+      // .mobile-open-btn {
-        position: absolute;
+      //   position: absolute;
-        background: #cdcdcd;
+      //   background: #cdcdcd;
-        border-radius: 3px;
+      //   border-radius: 3px;
-        z-index: 100;
+      //   z-index: 100;
-      }
+      // }
-      // 音响
+      // // 音响
-      .mobile-sound {
+      // .mobile-sound {
-        top: 5px;
+      //   top: 5px;
-        left: 142px; // 164px - 22px;
+      //   left: 142px; // 164px - 22px;
-        width: 58px;
+      //   width: 58px;
-        height: 6px;
+      //   height: 6px;
-      }
+      // }
-      // 听筒
+      // // 听筒
-      .mobile-receiver {
+      // .mobile-receiver {
-        top: 3px;
+      //   top: 3px;
-        left: 224px; // 246px - 22px;
+      //   left: 224px; // 246px - 22px;
-        width: 10px;
+      //   width: 10px;
-        height: 10px;
+      //   height: 10px;
-        border-radius: 5px;
+      //   border-radius: 5px;
-      }
+      // }
-      // 左侧按钮
+      // // 左侧按钮
-      .mobile-left-btn {
+      // .mobile-left-btn {
-        top: 162px; // 226px - 64px;
+      //   top: 162px; // 226px - 64px;
-        left: -27px; // -5px - 22px;
+      //   left: -27px; // -5px - 22px;
-        width: 6px;
+      //   width: 6px;
-        height: 50px;
+      //   height: 50px;
-      }
+      // }
-      // 右侧按钮（长条）
+      // // 右侧按钮（长条）
-      .mobile-right-btn {
+      // .mobile-right-btn {
-        top: 61px; // 125px - 64px;
+      //   top: 61px; // 125px - 64px;
-        right: -27px;
+      //   right: -27px;
-        width: 6px;
+      //   width: 6px;
-        height: 100px;
+      //   height: 100px;
-      }
+      // }
-      // 开机键
+      // // 开机键
-      .mobile-open-btn {
+      // .mobile-open-btn {
-        top: 211px; // 275px - 64px;
+      //   top: 211px; // 275px - 64px;
-        right: -27px;
+      //   right: -27px;
-        width: 6px;
+      //   width: 6px;
-        height: 50px;
+      //   height: 50px;
-      }
+      // }
     }
   }
 
   // 移动端需要上下滚动，避免设备背景被遮挡
   &.is-mobile-body {
-    overflow-x: hidden;
+    overflow: visible !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &::-webkit-scrollbar {
       background-color: $default-bg-color;

packages/amis-editor-core/src/component/Preview.tsx

@@ -104,12 +104,19 @@ export default class Preview extends Component<PreviewProps> {
   @autobind
   contentsRef(ref: HTMLDivElement | null) {
     if (ref) {
-      this.scrollLayer = ref as HTMLDivElement;
+      this.layer = ref.parentElement!.querySelector(
-      this.scrollLayer.addEventListener('scroll', this.handlePanelChange);
+        '.ae-Preview-widgets'
-      this.layer = ref!.querySelector('.ae-Preview-widgets') as HTMLDivElement;
+      ) as HTMLDivElement;
-      this.props.store.setLayer(this.layer);
 
       this.unSensor = resizeSensor(ref, this.handlePanelChange);
+      if (this.props.isMobile) {
+        ref = ref.firstChild as HTMLDivElement;
+      }
+
+      this.scrollLayer = ref as HTMLDivElement;
+      this.scrollLayer.removeEventListener('scroll', this.handlePanelChange);
+      this.scrollLayer.addEventListener('scroll', this.handlePanelChange);
+      this.props.store.setLayer(this.layer);
     } else {
       delete this.scrollLayer;
       delete this.layer;
@@ -123,9 +130,9 @@ export default class Preview extends Component<PreviewProps> {
     () => [this.getHighlightNodes(), this.props.store.activeId],
     ([ids]: [Array<string>], oldValue: [Array<string>]) => {
       const store = this.props.store;
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         this.calculateHighlightBox(ids);
-      }, 50);
+      });
       let oldIds = oldValue?.[0];
 
       if (Array.isArray(oldIds)) {
@@ -137,8 +144,17 @@ export default class Preview extends Component<PreviewProps> {
 
   @autobind
   handlePanelChange() {
-    // 视图同步也需要时间啊
+    if (this.layer && this.scrollLayer) {
-    setTimeout(() => this.calculateHighlightBox(this.getHighlightNodes()), 50);
+      requestAnimationFrame(() => {
+        this.layer!.style.cssText += `transform: translate(0, -${
+          this.scrollLayer!.scrollTop
+        }px);`;
+      });
+    }
+
+    requestAnimationFrame(() =>
+      this.calculateHighlightBox(this.getHighlightNodes())
+    );
   }
 
   getHighlightNodes() {
@@ -498,10 +514,15 @@ export default class Preview extends Component<PreviewProps> {
           'ae-Preview',
           'AMISCSSWrapper',
           className,
-          isMobile ? 'is-mobile-body hoverShowScrollBar' : 'is-pc-body'
+          isMobile ? 'is-mobile-body' : 'is-pc-body'
         )}
       >
         <div
+          key={
+            /* contentsLayer 逻辑不一样需要更新一下 */ isMobile
+              ? 'mobile-body'
+              : 'pc-body'
+          }
           className={cx(
             'ae-Preview-body',
             className,
@@ -510,15 +531,6 @@ export default class Preview extends Component<PreviewProps> {
           )}
           ref={this.contentsRef}
         >
-          {isMobile && (
-            <React.Fragment>
-              <div className="mobile-sound"></div>
-              <div className="mobile-receiver"></div>
-              <div className="mobile-left-btn"></div>
-              <div className="mobile-right-btn"></div>
-              <div className="mobile-open-btn"></div>
-            </React.Fragment>
-          )}
           <div className="ae-Preview-inner">
             {isMobile ? (
               <IFramePreview
@@ -543,38 +555,6 @@ export default class Preview extends Component<PreviewProps> {
                 appLocale={appLocale}
               />
             )}
-
-            <div className="ae-Preview-widgets" id="aePreviewHighlightBox">
-              {store.highlightNodes.map(node => (
-                <HighlightBox
-                  node={node}
-                  key={node.id}
-                  store={store}
-                  id={node.id}
-                  title={node.label}
-                  toolbarContainer={toolbarContainer}
-                  onSwitch={this.handleNavSwitch}
-                  manager={manager}
-                >
-                  {node.childRegions.map(region =>
-                    !node.memberImmutable(region.region) &&
-                    store.isRegionActive(region.id, region.region) ? (
-                      <RegionHighlightBox
-                        manager={manager}
-                        key={region.region}
-                        store={store}
-                        node={region}
-                        id={region.id}
-                        name={region.region}
-                        title={region.label}
-                        preferTag={region.preferTag}
-                        isOnlyChildRegion={node.childRegions.length === 1}
-                      />
-                    ) : null
-                  )}
-                </HighlightBox>
-              ))}
-            </div>
           </div>
           {this.currentDom && (
             <BackTop
@@ -589,6 +569,38 @@ export default class Preview extends Component<PreviewProps> {
             </BackTop>
           )}
         </div>
+
+        <div className="ae-Preview-widgets" id="aePreviewHighlightBox">
+          {store.highlightNodes.map(node => (
+            <HighlightBox
+              node={node}
+              key={node.id}
+              store={store}
+              id={node.id}
+              title={node.label}
+              toolbarContainer={toolbarContainer}
+              onSwitch={this.handleNavSwitch}
+              manager={manager}
+            >
+              {node.childRegions.map(region =>
+                !node.memberImmutable(region.region) &&
+                store.isRegionActive(region.id, region.region) ? (
+                  <RegionHighlightBox
+                    manager={manager}
+                    key={region.region}
+                    store={store}
+                    node={region}
+                    id={region.id}
+                    name={region.region}
+                    title={region.label}
+                    preferTag={region.preferTag}
+                    isOnlyChildRegion={node.childRegions.length === 1}
+                  />
+                ) : null
+              )}
+            </HighlightBox>
+          ))}
+        </div>
       </div>
     );
   }

packages/amis-editor-core/src/store/node.ts

@@ -495,16 +495,16 @@ export const EditorNode = types
       const arr = targets.concat();
       const first = arr.shift()!;
       const firstRect = first.getBoundingClientRect();
-      const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop);
+      // const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop);
-      const firstMarginBottom = parseInt(
+      // const firstMarginBottom = parseInt(
-        window.getComputedStyle(first).marginBottom
+      //   window.getComputedStyle(first).marginBottom
-      );
+      // );
 
       const rect = {
         left: firstRect.left,
         top: firstRect.top,
         width: firstRect.width,
-        height: firstRect.height + firstMarginTop + firstMarginBottom,
+        height: firstRect.height, // + firstMarginTop + firstMarginBottom,
         right: firstRect.right,
         bottom: firstRect.bottom
       };

packages/amis-editor/src/plugin/Dialog.tsx

@@ -571,6 +571,13 @@ export class DialogPlugin extends BasePlugin {
 
   buildSubRenderers() {}
 
+  /**
+   * dialog 高亮区域应该是里面的内容
+   */
+  wrapperResolve(dom: HTMLElement): HTMLElement | Array<HTMLElement> {
+    return dom.lastChild as HTMLElement;
+  }
+
   async buildDataSchemas(
     node: EditorNodeType,
     region?: EditorNodeType,

packages/amis-editor/src/plugin/Drawer.tsx

@@ -378,6 +378,13 @@ export class DrawerPlugin extends BasePlugin {
 
   buildSubRenderers() {}
 
+  /**
+   * drawer 高亮区域应该是里面的内容
+   */
+  wrapperResolve(dom: HTMLElement): HTMLElement | Array<HTMLElement> {
+    return dom.lastChild as HTMLElement;
+  }
+
   async buildDataSchemas(
     node: EditorNodeType,
     region?: EditorNodeType,