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,47 +86,50 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
         ></Nav>
       </Header>
       <Layout className={styles.contentWrap}>
-        <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
+        <div ref={setContainer}>
-          <DataRender
+          <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
-            loading={docAuthLoading}
+            <DataRender
-            error={docAuthError}
+              loading={docAuthLoading}
-            loadingContent={<DocumentSkeleton />}
+              error={docAuthError}
-            normalContent={() => {
+              loadingContent={<DocumentSkeleton />}
-              return (
+              normalContent={() => {
-                <>
+                return (
-                  <Seo title={document.title} />
+                  <>
-                  <div className={styles.editorContainer}>
+                    <Seo title={document.title} />
-                    {user && <Editor key={document.id} user={user} documentId={document.id} document={document} />}
+                    {user && (
-                  </div>
+                      <Editor key={document.id} user={user} documentId={document.id} document={document}>
-                  <div className={styles.commentWrap}>
+                        <div className={styles.commentWrap}>
-                    <CommentEditor documentId={document.id} />
+                          <CommentEditor documentId={document.id} />
-                  </div>
+                        </div>
-                  {authority && authority.editable && (
+                      </Editor>
-                    <BackTop
+                    )}
-                      style={{
+                    {authority && authority.editable && container && (
-                        display: 'flex',
+                      <BackTop
-                        alignItems: 'center',
+                        style={{
-                        justifyContent: 'center',
+                          display: 'flex',
-                        height: 30,
+                          alignItems: 'center',
-                        width: 30,
+                          justifyContent: 'center',
-                        borderRadius: '100%',
+                          height: 30,
-                        backgroundColor: '#0077fa',
+                          width: 30,
-                        color: '#fff',
+                          borderRadius: '100%',
-                        bottom: 100,
+                          backgroundColor: '#0077fa',
-                        transform: `translateY(-50px);`,
+                          color: '#fff',
-                      }}
+                          bottom: 100,
-                      onClick={gotoEdit}
+                          transform: `translateY(-50px);`,
-                      target={() => window.document.querySelector('.Pane2')}
+                        }}
-                      visibilityHeight={200}
+                        onClick={gotoEdit}
-                    >
+                        target={() => container}
-                      <IconEdit />
+                        visibilityHeight={200}
-                    </BackTop>
+                      >
-                  )}
+                        <IconEdit />
-                  <BackTop target={() => window.document.querySelector('.Pane2')} />
+                      </BackTop>
-                </>
+                    )}
-              );
+                    {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>
+      }
     />
   );
 };