fix: fix height style

packages/client/src/components/document/reader/editor.tsx

@@ -26,7 +26,7 @@ interface IProps {
   document: IDocument;
 }
 
-export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
+export const Editor: React.FC<IProps> = ({ user, documentId, document, children }) => {
   const [loading, toggleLoading] = useToggle(true);
   const [error, setError] = useState(null);
   const provider = useMemo(() => {
@@ -86,6 +86,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
               document={document}
               container={() => window.document.querySelector('#js-reader-container .ProseMirror .title')}
             />
+            {children}
           </Content>
         );
       }}

packages/client/src/components/document/reader/index.module.scss

@@ -1,38 +1,40 @@
 .wrap {
   height: 100%;
-  margin-top: -16px;
+  display: flex;
+  flex-direction: column;
 
   .headerWrap {
-    position: sticky;
+    padding: 0 24px;
+    height: 60px;
   }
 
   .contentWrap {
-    height: 100%;
+    flex: 1;
-    padding: 24px 0;
     overflow: hidden;
 
-    .editorWrap {
+    > div {
-      padding-bottom: 24px;
+      height: 100%;
+      padding: 24px 16px 48px;
       overflow: auto;
+    }
+
+    .editorWrap {
+      min-height: 100%;
+      padding-bottom: 24px;
+      margin: 0 auto;
 
       &.isStandardWidth {
         width: 96%;
         max-width: 750px;
-        margin: 0 auto;
       }
 
       &.isFullWidth {
         width: 100%;
-        margin: 0 auto;
       }
     }
 
-    .editorContainer {
-      min-height: 240px;
-    }
-
     .commentWrap {
-      padding: 16px 0;
+      padding: 16px 0 32px;
       border-top: 1px solid var(--semi-color-border);
     }
   }

packages/client/src/components/document/reader/index.tsx

@@ -1,5 +1,5 @@
 import Router from 'next/router';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import cls from 'classnames';
 import { Layout, Nav, Space, Button, Typography, Skeleton, Tooltip, Popover, BackTop } from '@douyinfe/semi-ui';
 import { IconEdit, IconArticle } from '@douyinfe/semi-icons';
@@ -29,6 +29,7 @@ interface IProps {
 export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
   if (!documentId) return null;
 
+  const [container, setContainer] = useState<HTMLDivElement>();
   const { width: windowWidth } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
@@ -85,6 +86,7 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
         ></Nav>
       </Header>
       <Layout className={styles.contentWrap}>
+        <div ref={setContainer}>
           <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
             <DataRender
               loading={docAuthLoading}
@@ -94,13 +96,14 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                 return (
                   <>
                     <Seo title={document.title} />
-                  <div className={styles.editorContainer}>
+                    {user && (
-                    {user && <Editor key={document.id} user={user} documentId={document.id} document={document} />}
+                      <Editor key={document.id} user={user} documentId={document.id} document={document}>
-                  </div>
                         <div className={styles.commentWrap}>
                           <CommentEditor documentId={document.id} />
                         </div>
-                  {authority && authority.editable && (
+                      </Editor>
+                    )}
+                    {authority && authority.editable && container && (
                       <BackTop
                         style={{
                           display: 'flex',
@@ -115,18 +118,19 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                           transform: `translateY(-50px);`,
                         }}
                         onClick={gotoEdit}
-                      target={() => window.document.querySelector('.Pane2')}
+                        target={() => container}
                         visibilityHeight={200}
                       >
                         <IconEdit />
                       </BackTop>
                     )}
-                  <BackTop target={() => window.document.querySelector('.Pane2')} />
+                    {container && <BackTop target={() => container} />}
                   </>
                 );
               }}
             />
           </div>
+        </div>
       </Layout>
     </div>
   );

packages/client/src/layouts/double-column/index.module.scss

@@ -50,7 +50,7 @@
     }
 
     .rightWrap {
-      padding: 16px 24px;
+      height: 100%;
       overflow: auto;
     }
   }

packages/client/src/pages/wiki/[wikiId]/document/[documentId]/index.tsx

@@ -11,7 +11,7 @@ interface IProps {
 const Page: NextPage<IProps> = ({ wikiId, documentId }) => {
   return (
     <DoubleColumnLayout
-      leftNode={<WikiTocs pageTitle="文档" wikiId={wikiId} documentId={documentId} />}
+      leftNode={<WikiTocs wikiId={wikiId} documentId={documentId} />}
       rightNode={<DocumentReader key={documentId} documentId={documentId} />}
     />
   );

packages/client/src/pages/wiki/[wikiId]/documents/index.tsx

@@ -82,7 +82,7 @@ const Page: NextPage<IProps> = ({ wikiId }) => {
     <DoubleColumnLayout
       leftNode={<WikiTocs wikiId={wikiId} />}
       rightNode={
-        <>
+        <div style={{ padding: '16px 24px' }}>
           <Seo title={tab === 'documents' ? '全部文档' : '目录管理'} />
           <Title heading={3} style={{ marginBottom: 24 }}>
             文档管理
@@ -95,7 +95,7 @@ const Page: NextPage<IProps> = ({ wikiId }) => {
               <WikiTocsManager wikiId={wikiId} />
             </TabPane>
           </Tabs>
-        </>
+        </div>
       }
     ></DoubleColumnLayout>
   );

packages/client/src/pages/wiki/[wikiId]/setting/index.tsx

@@ -27,7 +27,11 @@ const Page: NextPage<IProps> = ({ wikiId }) => {
   return (
     <DoubleColumnLayout
       leftNode={<WikiTocs wikiId={wikiId} />}
-      rightNode={<WikiSetting wikiId={wikiId} tab={tab} onNavigate={(tab) => navigate(tab)()} />}
+      rightNode={
+        <div style={{ padding: '16px 24px' }}>
+          <WikiSetting wikiId={wikiId} tab={tab} onNavigate={(tab) => navigate(tab)()} />
+        </div>
+      }
     />
   );
 };