fix: drag style

src/pages/Frame.less

@@ -13,8 +13,12 @@
   .pages-frame-inner {
     width: 100%;
     height: 100%;
+  }
 
-
+  .pages-content {
+    height: calc(100% + 20px);
+    margin: -10px;
+    padding: 10px;
   }
 
 

src/pages/layout/SideLayout.tsx

@@ -98,7 +98,7 @@ export default class SideLayout extends TankComponent<IProps, IState> {
                         );
                     })}
                     {
-                        !Sun.getSingleton().isMobile && <Menu.Item className="visible-xs" key="about">
+                        Sun.getSingleton().isMobile && <Menu.Item className="visible-xs" key="about">
                             <InfoCircleOutlined/>
                             <span>{Lang.t('layout.about')}</span>
                         </Menu.Item>

src/pages/matter/List.less

@@ -1,4 +1,8 @@
 .matter-list {
+  min-height: calc(100% + 20px);
+  margin: -10px;
+  padding: 10px;
+  position: relative;
   .obscure {
     position: absolute;
     top: 0;

src/pages/matter/List.tsx

@@ -69,6 +69,10 @@ export default class List extends TankComponent<IProps, IState> {
     share = new Share();
 
     newMatterRef = React.createRef<MatterPanel>();
+
+    // 最外层div
+    wrapperRef = React.createRef<HTMLDivElement>()
+
     //用来判断是否展示遮罩层
     dragEnterCount = 0;
 
@@ -118,24 +122,10 @@ export default class List extends TankComponent<IProps, IState> {
                 dragoverListener,
                 dropListener,
             } = this.drag;
-            const el = document.getElementById("layout-content")!;
-            el.addEventListener("dragenter", dragEnterListener);
-            el.addEventListener("dragleave", dragleaveListener);
-            el.addEventListener("dragover", dragoverListener);
-            el.addEventListener("drop", dropListener);
-        },
-        remove: () => {
-            const {
-                dragEnterListener,
-                dragleaveListener,
-                dragoverListener,
-                dropListener,
-            } = this.drag;
-            const el = document.getElementById("layout-content")!;
-            el.removeEventListener("dragenter", dragEnterListener);
-            el.removeEventListener("dragleave", dragleaveListener);
-            el.removeEventListener("dragover", dragoverListener);
-            el.removeEventListener("drop", dropListener);
+            this.wrapperRef.current?.addEventListener("dragenter", dragEnterListener);
+            this.wrapperRef.current?.addEventListener("dragleave", dragleaveListener);
+            this.wrapperRef.current?.addEventListener("dragover", dragoverListener);
+            this.wrapperRef.current?.addEventListener("drop", dropListener);
         },
     };
 
@@ -158,10 +148,6 @@ export default class List extends TankComponent<IProps, IState> {
         }
     }
 
-    componentWillUnmount() {
-        this.drag.remove();
-    }
-
     refresh() {
         // 清空暂存区
         this.selectedMatters = [];
@@ -536,7 +522,7 @@ export default class List extends TankComponent<IProps, IState> {
     render() {
         const {pager, director, selectedMatters, dragEnterCount} = this;
         return (
-            <div className="matter-list">
+            <div className="matter-list" ref={this.wrapperRef}>
                 {dragEnterCount > 0 ? (
                     <div className="obscure">
                         <CloudUploadOutlined className="white f50"/>