From e5657615ce799f8ce74959f71926b7b57f2695bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <978987373@qq.com>
Date: Wed, 10 Jul 2024 16:37:41 +0800
Subject: [PATCH] optimize code

---
 frontend/src/pages/wiki2/main-panel.js          | 17 +++++++++++++----
 .../src/pages/wiki2/wiki-right-header/index.js  | 14 +++++++++++---
 .../pages/wiki2/wiki-right-header/page-cover.js |  2 +-
 .../wiki2/wiki-right-header/page-title.css      |  3 ++-
 .../pages/wiki2/wiki-right-header/page-title.js |  2 +-
 frontend/src/pages/wiki2/wiki.css               | 12 +++++++++---
 6 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/wiki2/main-panel.js b/frontend/src/pages/wiki2/main-panel.js
index 075b8e279d..f92044e9f5 100644
--- a/frontend/src/pages/wiki2/main-panel.js
+++ b/frontend/src/pages/wiki2/main-panel.js
@@ -35,6 +35,16 @@ class MainPanel extends Component {
     this.scrollRef = React.createRef();
   }
 
+  getHeaderHeight = () => {
+    const pageCover = document.getElementById('wiki-page-cover');
+    const pageCoverHeight = pageCover?.offsetHeight || 0;
+    const pageTitle = document.getElementById('wiki-page-title');
+    const pageTitleHeight = pageTitle?.offsetHeight || 0;
+
+    const topNavHeight = 44;
+    return pageCoverHeight + pageTitleHeight + topNavHeight;
+  };
+
   static getDerivedStateFromProps(props, state) {
     const { seadoc_access_token, currentPageId, config } = props;
     const appConfig = window.app.config;
@@ -57,7 +67,7 @@ class MainPanel extends Component {
 
   render() {
     const { permission, pathExist, isDataLoading, isViewFile, config, onUpdatePage } = this.props;
-    const { currentPageConfig = {}, } = this.state;
+    const { currentPageConfig = {} } = this.state;
     const isViewingFile = pathExist && !isDataLoading && isViewFile;
     const isReadOnly = !(permission === 'rw');
 
@@ -69,9 +79,7 @@ class MainPanel extends Component {
             currentPageId={this.props.currentPageId}
             currentPageConfig={currentPageConfig}
           />
-          {username &&
-            <Account />
-          }
+          {username && <Account />}
         </div>
         <div className="main-panel-center">
           <div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}>
@@ -88,6 +96,7 @@ class MainPanel extends Component {
                     docUuid={this.state.docUuid}
                     isWikiReadOnly={isReadOnly}
                     scrollRef={this.scrollRef}
+                    getHeaderHeight={this.getHeaderHeight}
                   />
                 </div>
               </div>
diff --git a/frontend/src/pages/wiki2/wiki-right-header/index.js b/frontend/src/pages/wiki2/wiki-right-header/index.js
index 773303daa9..acdcafeace 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/index.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/index.js
@@ -1,14 +1,22 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import PageCover from './page-cover';
 import PageTitle from './page-title';
 
-export default function RightHeader({ currentPageConfig, onUpdatePage }) {
+function RightHeader({ currentPageConfig, onUpdatePage }) {
 
   const props = { currentPageConfig, onUpdatePage };
   return (
-    <div className='wiki-page-header-wrapper'>
+    <>
       <PageCover {...props} />
       <PageTitle {...props} />
-    </div>
+    </>
   );
 }
+
+RightHeader.propTypes = {
+  currentPageConfig: PropTypes.object,
+  onUpdatePage: PropTypes.func,
+};
+
+export default RightHeader;
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
index 0b0b8657b9..77a88acf3e 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
@@ -49,7 +49,7 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
 
   return (
     <>
-      <div className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
         <div className={classNames('wiki-page-cover__controller', {show: isShowCoverController})}>
           <div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-title.css b/frontend/src/pages/wiki2/wiki-right-header/page-title.css
index 49fc824db2..da838e5504 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-title.css
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-title.css
@@ -1,6 +1,7 @@
 .wiki-page-title-wrapper {
   position: relative;
-  padding: 0 50px 0 142px;
+  width: 100%;
+  padding: 0 142px;
 }
 
 .wiki-page-icon-wrapper {
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-title.js b/frontend/src/pages/wiki2/wiki-right-header/page-title.js
index c072b57855..8b2d2fcd03 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-title.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-title.js
@@ -61,7 +61,7 @@ const PageTitle = ({ currentPageConfig, onUpdatePage }) => {
 
 
   return (
-    <div className='wiki-page-title-wrapper' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <div id="wiki-page-title" className='wiki-page-title-wrapper' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       {currentPageConfig.icon && (
         <HeaderIcon currentPageConfig={currentPageConfig} onUpdatePage={onUpdatePage} />
       )}
diff --git a/frontend/src/pages/wiki2/wiki.css b/frontend/src/pages/wiki2/wiki.css
index 9a8760ab99..30bb0c3ab6 100644
--- a/frontend/src/pages/wiki2/wiki.css
+++ b/frontend/src/pages/wiki2/wiki.css
@@ -27,6 +27,7 @@ body {
 /* wiki editor */
 .cur-view-content .sdoc-scroll-container {
   display: flex;
+  min-height: 0;
   overflow: auto;
 }
 
@@ -35,15 +36,17 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  align-items: center;
+  width: 100%;
 }
 
 .wiki-editor-container .sdoc-editor-container {
   flex: 1;
   display: flex;
   flex-direction: column;
-  min-height: auto;
+  min-height: 0;
+  min-width: 0;
   width: 100%;
-  min-width: 1100px;
 }
 
 .wiki-editor-container .sdoc-editor-container .sdoc-content-wrapper {
@@ -51,8 +54,11 @@ body {
 }
 
 .wiki-editor-container .sdoc-editor-container .sdoc-editor-content {
+  display: flex;
   flex-direction: column;
   position: static;
+  min-width: 0;
+  width: 100%;
 }
 
 .sdoc-editor-container .sdoc-article-container {
@@ -68,7 +74,7 @@ body {
   justify-content: center;
   min-height: 800px;
   width: 100%;
-  padding: 15px 142px 0px 142px;
+  padding: 0 142px;
   box-shadow: none;
   border: none;
 }