optimize

frontend/src/pages/wiki2/index.js

@@ -158,7 +158,6 @@ class Wiki extends Component {
   updatePageLockedToServer = (pageId, locked) => {
     wikiAPI.updateWiki2PageLocked(wikiId, pageId, locked).then(res => {
       this.setState(prevState => {
-        // 更新 wikiConfig 中的 pages
         const updatedPages = prevState.config.pages.map(page => {
           if (page.id === pageId) {
             return {
@@ -177,6 +176,11 @@ class Wiki extends Component {
           })
         };
       });
+
+      eventBus.dispatch('wiki-editor-state-change', {
+        pageId,
+        locked: !this.state.currentPageLocked
+      });
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);

frontend/src/pages/wiki2/main-panel.js

@@ -5,13 +5,13 @@ import { SdocWikiEditor, DocInfo } from '@seafile/sdoc-editor';
 import { gettext, username, wikiPermission, wikiId, siteRoot } from '../../utils/constants';
 import TextTranslation from '../../utils/text-translation';
 import Switch from '../../components/switch';
-import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import { Utils } from '../../utils/utils';
 import Account from '../../components/common/account';
 import WikiTopNav from './top-nav';
-import { getCurrentPageConfig, getCurrentPageLocked } from './utils';
+import { getCurrentPageConfig } from './utils';
 import RightHeader from './wiki-right-header';
+import { eventBus } from '../../components/common/event-bus';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -67,6 +67,21 @@ class MainPanel extends Component {
     return { ...props, docUuid: window.seafile.docUuid, currentPageConfig };
   }
 
+  componentDidMount() {
+    eventBus.subscribe('wiki-editor-state-change', this.handleEditorStateChange);
+  }
+
+  componentWillUnmount() {
+    eventBus.unsubscribe('wiki-editor-state-change', this.handleEditorStateChange);
+    if (this.editor) {
+      this.editor = null;
+    }
+  }
+
+  handleEditorStateChange = ({ pageId, locked }) => {
+    this.forceUpdate();
+  };
+
   openHistory = () => {
     window.location.href = `${siteRoot}wiki/file_revisions/${wikiId}/?page_id=${this.state.currentPageConfig.id}`;
   };
@@ -103,49 +118,15 @@ class MainPanel extends Component {
   };
 
   toggleFreezeStatus = () => {
-    // console.log(this.state.currentPageConfig.locked, '----currentPageConfig.locked')
-    console.log(!this.props.currentPageLocked, '----currentPageLocked');
     this.props.updatePageLockedToServer(this.state.currentPageConfig.id, !this.props.currentPageLocked);
-    // this.setState({
-    //   locked: !this.state.locked
-    // }, () => {
-    //   console.log(this.state.locked, '----locked')
-    // });
-
-  };
-
-  toggleLockFile = () => {
-    // if (this.state.isLocked) {
-    //   seafileAPI.unlockfile(repoID, filePath).then((res) => {
-    //     this.setState({
-    //       isLocked: false,
-    //       lockedByMe: false
-    //     });
-    //   }).catch((error) => {
-    //     const errorMsg = Utils.getErrorMsg(error);
-    //     toaster.danger(errorMsg);
-    //   });
-    // } else {
-    //   seafileAPI.lockfile(repoID, filePath).then((res) => {
-    //     this.setState({
-    //       isLocked: true,
-    //       lockedByMe: true
-    //     });
-    //   }).catch((error) => {
-    //     const errorMsg = Utils.getErrorMsg(error);
-    //     toaster.danger(errorMsg);
-    //   });
-    // }
   };
 
   render() {
-    // console.log(this.state.currentPageConfig)
     const menuItems = this.getMenu();
     const { permission, pathExist, isDataLoading, config, onUpdatePage, isUpdateBySide, style, currentPageLocked } = this.props;
     const { currentPageConfig = {}, isDropdownMenuOpen } = this.state;
     const isViewingFile = pathExist && !isDataLoading;
-    const isReadOnly = !(permission === 'rw');
-    console.log(currentPageLocked, '----currentPageLocked');
+    const isReadOnly = currentPageLocked || !(permission === 'rw');
     return (
       <div className="wiki2-main-panel" style={style}>
         <div className='wiki2-main-panel-north'>
@@ -162,8 +143,9 @@ class MainPanel extends Component {
                 config={config}
                 currentPageId={this.props.currentPageId}
                 currentPageConfig={currentPageConfig}
+                currentPageLocked={currentPageLocked}
                 setCurrentPage={this.props.setCurrentPage}
-                toggleLockFile={this.toggleLockFile}
+                toggleFreezeStatus={this.toggleFreezeStatus}
               />
               {isViewingFile &&
                 <DocInfo key={this.props.currentPageId} initContext={true} />
@@ -209,12 +191,6 @@ class MainPanel extends Component {
               </DropdownMenu>
             </Dropdown>
             }
-            {/* {(wikiPermission === 'rw' && this.state.currentPageConfig) &&
-              <div className='wiki2-file-history-button' onClick={this.openHistory} role="button">
-                <i className='sf3-font sf3-font-history' aria-hidden="true" />
-              </div>
-            } */}
-
             {username && <Account />}
           </div>
         </div>
@@ -229,6 +205,7 @@ class MainPanel extends Component {
                 <div className='wiki-editor-container'>
                   <RightHeader isUpdateBySide={isUpdateBySide} currentPageConfig={currentPageConfig} onUpdatePage={onUpdatePage} />
                   <SdocWikiEditor
+                    key={`${this.state.docUuid}-${currentPageLocked}`}
                     document={this.props.editorContent}
                     docUuid={this.state.docUuid}
                     isWikiReadOnly={isReadOnly}

frontend/src/pages/wiki2/top-nav/index.js

@@ -8,44 +8,20 @@ import { getPaths } from '../utils/index';
 
 import './index.css';
 
-function WikiTopNav({ config, currentPageId, setCurrentPage, toggleLockFile }) {
+function WikiTopNav({ config, currentPageId, setCurrentPage, toggleFreezeStatus, currentPageLocked }) {
   // handleLockClick
   const { navigation, pages } = config;
   const paths = getPaths(navigation, currentPageId, pages);
-  const { canLockUnlockFile, isLocked, lockedByMe } = window.app.pageOptions;
-  const handleLockClick = async (pageId) => {
-    try {
-      // 发送锁定/解锁请求
-      const response = await fetch('/api/pages/lock', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          pageId: pageId
-        })
-      });
+  const { permission } = window.wiki.config;
 
-      if (response.ok) {
-        // 处理成功响应
-        // 可以更新页面状态或显示提示信息
-      }
-    } catch (error) {
-      // 处理错误
-      console.error('Failed to lock/unlock page:', error);
-    }
-  };
-  let showLockUnlockBtn = false;
   let lockUnlockText; let lockUnlockIcon;
-  if (canLockUnlockFile) {
-    if (!isLocked) {
-      showLockUnlockBtn = true;
-      lockUnlockText = gettext('Lock');
-      lockUnlockIcon = 'lock';
-    } else if (lockedByMe) {
-      showLockUnlockBtn = true;
+  if (permission === 'rw') {
+    if (!currentPageLocked) {
       lockUnlockText = gettext('Unlock');
       lockUnlockIcon = 'unlock';
+    } else {
+      lockUnlockText = gettext('lock');
+      lockUnlockIcon = 'lock';
     }
   }
   return (
@@ -65,12 +41,12 @@ function WikiTopNav({ config, currentPageId, setCurrentPage, toggleLockFile }) {
 
         );
       })}
-      {/* <IconButton
-          id="lock-unlock-file"
-          icon={lockUnlockIcon}
-          text={lockUnlockText}
-          onClick={toggleLockFile}
-        /> */}
+      <IconButton
+        id="lock-unlock-file"
+        icon={lockUnlockIcon}
+        text={lockUnlockText}
+        onClick={toggleFreezeStatus}
+      />
     </div>
   );
 }

frontend/src/pages/wiki2/wiki-nav/pages/page-item.js

@@ -11,6 +11,7 @@ import DraggedPageItem from './dragged-page-item';
 import CustomIcon from '../../custom-icon';
 import { eventBus } from '../../../../components/common/event-bus';
 import { INSERT_POSITION } from '../constants';
+import IconButton from '../../../../components/icon-button';
 
 class PageItem extends Component {
 
@@ -211,12 +212,10 @@ class PageItem extends Component {
     const { connectDragSource, connectDragPreview, connectDropTarget, page, pagesLength, isOnlyOnePage, pathStr } = this.props;
     const { isShowNameEditor, pageName, isSelected, isMouseEnter } = this.state;
     if (isSelected) this.setDocUuid(page.docUuid);
-
     let navItemId = `page-editor-${page.id}`;
     let childNumber = Array.isArray(page.children) ? page.children.length : 0;
     const customIcon = page.icon;
     const folded = this.props.getFoldState(page.id);
-    // console.log('page', page.locked);
     if (wikiPermission === 'rw') {
       return (
         <div>
@@ -240,7 +239,13 @@ class PageItem extends Component {
                     </div>
                   }
                   <span className="wiki-page-title text-truncate" title={page.name}>{page.name}</span>
-                  <span>{page.locked ? '🔒' : '🔓'}</span>
+                  {page.locked &&
+                  <IconButton
+                    id="lock-unlock-file"
+                    icon={'lock'}
+                    text={'lock'}
+                  />
+                  }
                   {isShowNameEditor && (
                     <NameEditPopover
                       oldName={pageName}

frontend/src/pages/wiki2/wiki-right-header/page-title-editor.js

@@ -70,6 +70,7 @@ function PageTitleEditor({ isUpdateBySide, currentPageConfig, onUpdatePage }) {
   }, [currentPageConfig, onUpdatePage]);
 
   const handleInput = useCallback((e) => {
+    if (currentPageConfig.locked) return;
     saveSelection();
     if (isChineseInput.current === false) {
       setPageName(e.target.innerText);