Merge pull request #197 from fantasticit/fix/0917

packages/client/src/components/color-picker/index.tsx

@@ -89,25 +89,26 @@ export const ColorPicker: React.FC<{
   const [visible, toggleVisible] = useToggle(false);
 
   const content = useMemo(
-    () => (
+    () =>
-      <div style={{ padding: isMobile ? '24px 0 24px' : '12px 16px', width: isMobile ? 'auto' : 272 }}>
+      !visible ? null : (
-        <div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
+        <div style={{ padding: isMobile ? '24px 0 24px' : '12px 16px', width: isMobile ? 'auto' : 272 }}>
-          <span></span>
+          <div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
-          <Text>无颜色</Text>
+            <span></span>
-        </div>
+            <Text>无颜色</Text>
+          </div>
 
-        <div className={styles.colorWrap}>
+          <div className={styles.colorWrap}>
-          {colors.map((color) => {
+            {colors.map((color) => {
-            return (
+              return (
-              <div key={color} className={styles.colorItem} onClick={() => onSetColor(color)}>
+                <div key={color} className={styles.colorItem} onClick={() => onSetColor(color)}>
-                <span style={{ backgroundColor: color }}></span>
+                  <span style={{ backgroundColor: color }}></span>
-              </div>
+                </div>
-            );
+              );
-          })}
+            })}
+          </div>
         </div>
-      </div>
+      ),
-    ),
+    [onSetColor, isMobile, visible]
-    [onSetColor, isMobile]
   );
 
   if (disabled) return <span style={{ display: 'inline-block' }}>{children}</span>;
@@ -132,7 +133,14 @@ export const ColorPicker: React.FC<{
           </span>
         </>
       ) : (
-        <Dropdown zIndex={10000} trigger="click" position={'bottomLeft'} render={content}>
+        <Dropdown
+          visible={visible}
+          onVisibleChange={toggleVisible}
+          zIndex={10000}
+          trigger="click"
+          position={'bottomLeft'}
+          render={content}
+        >
           <span style={{ display: 'inline-block' }}>{children}</span>
         </Dropdown>
       )}

packages/client/src/components/data-render/constant.tsx

@@ -4,25 +4,29 @@ import React, { useMemo } from 'react';
 
 const { Text } = Typography;
 
-export const defaultLoading = <Spin />;
+export const defaultLoading = (
+  <div style={{ margin: 'auto' }}>
+    <Spin />
+  </div>
+);
 
 export const defaultRenderError = (error) => {
   return <Text>{(error && error.message) || '未知错误'}</Text>;
 };
 
+const emptyStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  position: 'relative',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+};
+
 export const defaultEmpty = (
-  <div
+  <div style={emptyStyle}>
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      position: 'relative',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    }}
-  >
     <div>
       <Empty />
     </div>

packages/client/src/components/data-render/index.tsx

@@ -1,3 +1,4 @@
+import deepEqual from 'deep-equal';
 import React from 'react';
 
 import { defaultEmpty, defaultLoading, defaultRenderError, Render } from './constant';
@@ -15,7 +16,7 @@ interface IProps {
   normalContent: RenderProps;
 }
 
-export const DataRender: React.FC<IProps> = ({
+export const _DataRender: React.FC<IProps> = ({
   loading,
   error,
   empty,
@@ -36,3 +37,7 @@ export const DataRender: React.FC<IProps> = ({
     <LoadingWrap loading={loading} loadingContent={loadingContent} normalContent={loading ? null : normalContent} />
   );
 };
+
+export const DataRender = React.memo(_DataRender, (prevProps, nextProps) => {
+  return deepEqual(prevProps, nextProps);
+});

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

@@ -16,27 +16,40 @@ interface IProps {
 
 const { Text } = Typography;
 
+const mobileContainerStyle: React.CSSProperties = { maxWidth: '96vw', maxHeight: '60vh', overflow: 'auto' };
+
+const pcContainerStyle: React.CSSProperties = {
+  width: 412,
+  maxWidth: '96vw',
+  padding: '0 24px',
+  maxHeight: '60vh',
+  overflow: 'auto',
+};
+
 export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, disabled = false }) => {
   const { isMobile } = IsOnMobile.useHook();
   const toastedUsersRef = useRef([]);
   const { user: currentUser } = useUser();
   const [visible, toggleVisible] = useToggle(false);
   const [collaborationUsers, setCollaborationUsers] = useState([]);
+
   const content = useMemo(
-    () => (
+    () =>
-      <div style={{ padding: '24px 0' }}>
+      !visible ? null : (
-        <Members
+        <div style={{ padding: '24px 0' }}>
-          id={documentId}
+          <Members
-          hook={useDoumentMembers}
+            id={documentId}
-          descriptions={[
+            hook={useDoumentMembers}
-            '权限继承：默认继承知识库成员权限',
+            descriptions={[
-            '超级管理员：组织超级管理员、知识库超级管理员和文档创建者',
+              '权限继承：默认继承知识库成员权限',
-          ]}
+              '超级管理员：组织超级管理员、知识库超级管理员和文档创建者',
-        />
+            ]}
-      </div>
+          />
-    ),
+        </div>
-    [documentId]
+      ),
+    [visible, documentId]
   );
+
   const btn = useMemo(
     () => (
       <Button theme="borderless" type="tertiary" disabled={disabled} icon={<IconUserAdd />} onClick={toggleVisible} />
@@ -113,6 +126,7 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
           );
         })}
       </AvatarGroup>
+
       {isMobile ? (
         <>
           <Modal
@@ -121,7 +135,7 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
             visible={visible}
             footer={null}
             onCancel={toggleVisible}
-            style={{ maxWidth: '96vw', maxHeight: '60vh', overflow: 'auto' }}
+            style={mobileContainerStyle}
           >
             {content}
           </Modal>
@@ -134,19 +148,7 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
           onVisibleChange={toggleVisible}
           trigger="click"
           position="bottomRight"
-          content={
+          content={<div style={pcContainerStyle}>{content}</div>}
-            <div
-              style={{
-                width: 412,
-                maxWidth: '96vw',
-                padding: '0 24px',
-                maxHeight: '60vh',
-                overflow: 'auto',
-              }}
-            >
-              {content}
-            </div>
-          }
         >
           {btn}
         </Dropdown>

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

@@ -23,6 +23,7 @@ export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, author
       if (!editor) return;
       editor.commands.setContent(data);
     };
+
     event.on(USE_DOCUMENT_VERSION, handler);
 
     return () => {

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

@@ -28,6 +28,14 @@ interface IProps {
   documentId: string;
 }
 
+const ErrorContent = () => {
+  return (
+    <div style={{ margin: '10vh', textAlign: 'center' }}>
+      <SecureDocumentIllustration />
+    </div>
+  );
+};
+
 export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
   const { isMobile } = IsOnMobile.useHook();
   const { width: windowWith } = useWindowSize();
@@ -84,9 +92,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
           mode="horizontal"
           header={
             <>
-              <Tooltip content="返回" position="bottom">
+              <Button onMouseDown={goback} icon={<IconChevronLeft />} style={{ marginRight: 16 }} />
-                <Button onMouseDown={goback} icon={<IconChevronLeft />} style={{ marginRight: 16 }} />
-              </Tooltip>
               <DataRender
                 loading={docAuthLoading}
                 error={docAuthError}
@@ -125,13 +131,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
         <DataRender
           loading={docAuthLoading}
           error={docAuthError}
-          errorContent={() => {
+          errorContent={<ErrorContent />}
-            return (
-              <div style={{ margin: '10vh', textAlign: 'center' }}>
-                <SecureDocumentIllustration />
-              </div>
-            );
-          }}
           normalContent={() => {
             return (
               <>

packages/client/src/components/emoji-picker/index.tsx

@@ -64,38 +64,44 @@ export const EmojiPicker: React.FC<IProps> = ({ showClear = false, onSelectEmoji
   }, [onSelectEmoji]);
 
   const content = useMemo(
-    () => (
+    () =>
-      <div className={styles.wrap}>
+      !visible ? null : (
-        <Tabs
+        <div className={styles.wrap}>
-          size="small"
+          <Tabs
-          lazyRender
+            size="small"
-          keepDOM
+            lazyRender
-          tabBarExtraContent={
+            keepDOM
-            showClear ? (
+            tabBarExtraContent={
-              <Button size="small" onClick={clear}>
+              showClear ? (
-                清除
+                <Button size="small" onClick={clear}>
-              </Button>
+                  清除
-            ) : null
+                </Button>
-          }
+              ) : null
-          collapsible
+            }
-        >
+            collapsible
-          {renderedList.map((list) => {
+          >
-            return (
+            {renderedList.map((list) => {
-              <TabPane key={list.title} tab={list.title} itemKey={list.title} style={{ height: 250, overflow: 'auto' }}>
+              return (
-                <div className={styles.listWrap}>
+                <TabPane
-                  {(list.data || []).map((ex) => (
+                  key={list.title}
-                    <div key={ex} onClick={() => selectEmoji(ex)}>
+                  tab={list.title}
-                      {ex}
+                  itemKey={list.title}
-                    </div>
+                  style={{ height: 250, overflow: 'auto' }}
-                  ))}
+                >
-                </div>
+                  <div className={styles.listWrap}>
-              </TabPane>
+                    {(list.data || []).map((ex) => (
-            );
+                      <div key={ex} onClick={() => selectEmoji(ex)}>
-          })}
+                        {ex}
-        </Tabs>
+                      </div>
-      </div>
+                    ))}
-    ),
+                  </div>
-    [showClear, renderedList, selectEmoji, clear]
+                </TabPane>
+              );
+            })}
+          </Tabs>
+        </div>
+      ),
+    [visible, showClear, renderedList, selectEmoji, clear]
   );
 
   useEffect(() => {

packages/client/src/components/message/index.tsx

@@ -8,7 +8,7 @@ import { IsOnMobile } from 'hooks/use-on-mobile';
 import { useToggle } from 'hooks/use-toggle';
 import { EmptyBoxIllustration } from 'illustrations/empty-box';
 import Link from 'next/link';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import styles from './index.module.scss';
 import { Placeholder } from './placeholder';
@@ -17,72 +17,74 @@ const { Text } = Typography;
 const PAGE_SIZE = 6;
 
 const MessagesRender = ({ messageData, loading, error, onClick = null, page = 1, onPageChange = null }) => {
-  const total = (messageData && messageData.total) || 0;
+  const [messages, total] = useMemo(
-  const messages = (messageData && messageData.data) || [];
+    () => [(messageData && messageData.data) || [], (messageData && messageData.total) || 0],
+    [messageData]
+  );
 
-  const handleRead = (messageId) => {
+  const handleRead = useCallback(
-    onClick && onClick(messageId);
+    (messageId) => {
-  };
+      onClick && onClick(messageId);
+    },
+    [onClick]
+  );
+
+  const renderNormalContent = useCallback(() => {
+    return (
+      <div
+        className={styles.itemsWrap}
+        style={{ margin: '8px -16px', minHeight: 224 }}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        {messages.length ? (
+          <>
+            {messages.map((msg) => {
+              return (
+                <div key={msg.id} className={styles.itemWrap} onClick={() => handleRead(msg.id)}>
+                  <Link href={msg.url}>
+                    <a className={styles.item}>
+                      <div className={styles.leftWrap}>
+                        <Text
+                          ellipsis={{
+                            showTooltip: {
+                              opts: { content: msg.message },
+                            },
+                          }}
+                          style={{ width: 240 }}
+                        >
+                          {msg.title}
+                        </Text>
+                      </div>
+                    </a>
+                  </Link>
+                </div>
+              );
+            })}
+            {total > PAGE_SIZE && (
+              <div className={styles.paginationWrap}>
+                <Pagination
+                  size="small"
+                  total={total}
+                  currentPage={page}
+                  pageSize={PAGE_SIZE}
+                  style={{ textAlign: 'center' }}
+                  onPageChange={onPageChange}
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <Empty illustration={<EmptyBoxIllustration />} message="暂无消息" />
+        )}
+      </div>
+    );
+  }, [handleRead, messages, onPageChange, page, total]);
 
   return (
-    <DataRender
+    <DataRender loading={loading} loadingContent={<Placeholder />} error={error} normalContent={renderNormalContent} />
-      loading={loading}
-      loadingContent={<Placeholder />}
-      error={error}
-      normalContent={() => {
-        return (
-          <div
-            className={styles.itemsWrap}
-            style={{ margin: '8px -16px', minHeight: 224 }}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-          >
-            {messages.length ? (
-              <>
-                {messages.map((msg) => {
-                  return (
-                    <div key={msg.id} className={styles.itemWrap} onClick={() => handleRead(msg.id)}>
-                      <Link href={msg.url}>
-                        <a className={styles.item}>
-                          <div className={styles.leftWrap}>
-                            <Text
-                              ellipsis={{
-                                showTooltip: {
-                                  opts: { content: msg.message },
-                                },
-                              }}
-                              style={{ width: 240 }}
-                            >
-                              {msg.title}
-                            </Text>
-                          </div>
-                        </a>
-                      </Link>
-                    </div>
-                  );
-                })}
-                {total > PAGE_SIZE && (
-                  <div className={styles.paginationWrap}>
-                    <Pagination
-                      size="small"
-                      total={total}
-                      currentPage={page}
-                      pageSize={PAGE_SIZE}
-                      style={{ textAlign: 'center' }}
-                      onPageChange={onPageChange}
-                    />
-                  </div>
-                )}
-              </>
-            ) : (
-              <Empty illustration={<EmptyBoxIllustration />} message="暂无消息" />
-            )}
-          </div>
-        );
-      }}
-    />
   );
 };
 
@@ -106,60 +108,83 @@ const MessageBox = () => {
     setPage: unreadSetPage,
   } = useUnreadMessages();
 
-  const clearAll = () => {
+  const clearAll = useCallback(() => {
     Promise.all(
       (unreadMsgs.data || []).map((msg) => {
         return readMessage(msg.id);
       })
     );
-  };
+  }, [readMessage, unreadMsgs]);
 
   const openModalOnMobile = useCallback(() => {
     if (!isMobile) return;
     toggleVisible(true);
   }, [isMobile, toggleVisible]);
 
-  const content = (
+  const content = useMemo(
-    <Tabs
+    () =>
-      type="line"
+      visible ? (
-      size="small"
+        <Tabs
-      tabBarExtraContent={
+          type="line"
-        unreadMsgs && unreadMsgs.total > 0 ? (
+          size="small"
-          <Text type="quaternary" onClick={clearAll} style={{ cursor: 'pointer' }}>
+          tabBarExtraContent={
-            全部已读
+            unreadMsgs && unreadMsgs.total > 0 ? (
-          </Text>
+              <Text type="quaternary" onClick={clearAll} style={{ cursor: 'pointer' }}>
-        ) : null
+                全部已读
-      }
+              </Text>
-    >
+            ) : null
-      <TabPane tab="未读" itemKey="unread">
+          }
-        <MessagesRender
+        >
-          messageData={unreadMsgs}
+          <TabPane tab="未读" itemKey="unread">
-          loading={unreadLoading}
+            <MessagesRender
-          error={unreadError}
+              messageData={unreadMsgs}
-          onClick={readMessage}
+              loading={unreadLoading}
-          page={unreadPage}
+              error={unreadError}
-          onPageChange={unreadSetPage}
+              onClick={readMessage}
-        />
+              page={unreadPage}
-      </TabPane>
+              onPageChange={unreadSetPage}
-      <TabPane tab="已读" itemKey="read">
+            />
-        <MessagesRender
+          </TabPane>
-          messageData={readMsgs}
+          <TabPane tab="已读" itemKey="read">
-          loading={readLoading}
+            <MessagesRender
-          error={readError}
+              messageData={readMsgs}
-          page={readPage}
+              loading={readLoading}
-          onPageChange={readSetPage}
+              error={readError}
-        />
+              page={readPage}
-      </TabPane>
+              onPageChange={readSetPage}
-      <TabPane tab="全部" itemKey="all">
+            />
-        <MessagesRender
+          </TabPane>
-          messageData={allMsgs}
+          <TabPane tab="全部" itemKey="all">
-          loading={allLoading}
+            <MessagesRender
-          error={allError}
+              messageData={allMsgs}
-          page={allPage}
+              loading={allLoading}
-          onPageChange={allSetPage}
+              error={allError}
-        />
+              page={allPage}
-      </TabPane>
+              onPageChange={allSetPage}
-    </Tabs>
+            />
+          </TabPane>
+        </Tabs>
+      ) : null,
+    [
+      allError,
+      allLoading,
+      allMsgs,
+      allPage,
+      allSetPage,
+      clearAll,
+      readError,
+      readLoading,
+      readMessage,
+      readMsgs,
+      readPage,
+      readSetPage,
+      unreadError,
+      unreadLoading,
+      unreadMsgs,
+      unreadPage,
+      unreadSetPage,
+      visible,
+    ]
   );
 
   const btn = (
@@ -197,6 +222,8 @@ const MessageBox = () => {
         </>
       ) : (
         <Dropdown
+          visible={visible}
+          onVisibleChange={toggleVisible}
           position="bottomRight"
           trigger="click"
           content={<div style={{ width: 300, padding: '16px 16px 0' }}>{content}</div>}
@@ -210,5 +237,8 @@ const MessageBox = () => {
 
 export const Message = () => {
   const { loading, error } = useUser();
-  return <DataRender loading={loading} error={error} normalContent={() => <MessageBox />} />;
+
+  const renderNormalContent = useCallback(() => <MessageBox />, []);
+
+  return <DataRender loading={loading} error={error} normalContent={renderNormalContent} />;
 };

packages/client/src/components/size-setter.tsx

@@ -11,6 +11,9 @@ interface IProps {
   onOk: (arg: ISize) => void;
 }
 
+const containerStyle = { padding: '0 12px 12px' };
+const inlineBlockStyle = { display: 'inline-block' };
+
 export const SizeSetter: React.FC<IProps> = ({ width, maxWidth, height, onOk, children }) => {
   const $form = useRef<FormApi>();
 
@@ -27,7 +30,7 @@ export const SizeSetter: React.FC<IProps> = ({ width, maxWidth, height, onOk, ch
       position={'bottomLeft'}
       spacing={10}
       render={
-        <div style={{ padding: '0 12px 12px' }}>
+        <div style={containerStyle}>
           <Form initValues={{ width, height }} getFormApi={(formApi) => ($form.current = formApi)} labelPosition="left">
             <Form.Input autofocus label="宽" field="width" {...(maxWidth ? { max: maxWidth } : {})} />
             <Form.Input label="高" field="height" />
@@ -38,7 +41,7 @@ export const SizeSetter: React.FC<IProps> = ({ width, maxWidth, height, onOk, ch
         </div>
       }
     >
-      <span style={{ display: 'inline-block' }}>{children}</span>
+      <span style={inlineBlockStyle}>{children}</span>
     </Dropdown>
   );
 };

packages/client/src/components/user/reset-password/index.tsx

@@ -53,7 +53,7 @@ export const ResetPassword = ({ onSuccess }) => {
 
   return (
     <Form
-      initValues={{ email: user.email, password: '', confirmPassword: '' }}
+      initValues={{ email: user ? user.email : '', password: '', confirmPassword: '' }}
       onChange={onFormChange}
       onSubmit={onFinish}
     >

packages/client/src/components/wiki/tocs/tree.tsx

@@ -136,6 +136,7 @@ export const _Tree = ({ data, docAsLink, getDocLink, isShareMode = false, needAd
         defaultExpandedKeys={expandedKeys}
         expandedKeys={expandedKeys}
         onExpand={setExpandedKeys}
+        motion={false}
       />
       {needAddDocument && <AddDocument />}
     </div>

packages/client/src/layouts/app-double-column/index.tsx

@@ -16,6 +16,8 @@ interface IProps {
   rightNode: React.ReactNode;
 }
 
+const style = { width: '100%', height: '100%' };
+
 export const AppDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
   const debounceUpdate = useMemo(() => throttle(updateWidth, 200), [updateWidth]);
@@ -25,7 +27,7 @@ export const AppDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode })
       <AppRouterHeader />
       <SemiLayout className={styles.contentWrap}>
         <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={debounceUpdate}>
-          <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
+          <Sider style={style} className={styles.leftWrap}>
             <Button
               size="small"
               icon={isCollapsed ? <IconChevronRight /> : <IconChevronLeft />}

packages/client/src/layouts/app-router-header/recent.tsx

@@ -9,7 +9,7 @@ import { useRecentDocuments } from 'data/document';
 import { useToggle } from 'hooks/use-toggle';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import styles from './index.module.scss';
 import { Placeholder } from './placeholder';
@@ -20,6 +20,52 @@ export const RecentDocs = ({ visible }) => {
   const { query } = useRouter();
   const { data: recentDocs, loading, error, refresh } = useRecentDocuments(query.organizationId);
 
+  const renderNormalContent = useCallback(() => {
+    return (
+      <div className={styles.itemsWrap} style={{ margin: '0 -16px' }}>
+        {recentDocs && recentDocs.length ? (
+          recentDocs.map((doc) => {
+            return (
+              <div className={styles.itemWrap} key={doc.id}>
+                <Link
+                  href={{
+                    pathname: '/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]',
+                    query: {
+                      organizationId: doc.organizationId,
+                      wikiId: doc.wikiId,
+                      documentId: doc.id,
+                    },
+                  }}
+                >
+                  <a className={styles.item}>
+                    <div className={styles.leftWrap}>
+                      <IconDocumentFill style={{ marginRight: 12 }} />
+                      <div>
+                        <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
+                          {doc.title}
+                        </Text>
+
+                        <Text size="small" type="tertiary">
+                          创建者：
+                          {doc.createUser && doc.createUser.name} • <LocaleTime date={doc.updatedAt} />
+                        </Text>
+                      </div>
+                    </div>
+                    <div className={styles.rightWrap}>
+                      <DocumentStar organizationId={doc.organizationId} wikiId={doc.wikiId} documentId={doc.id} />
+                    </div>
+                  </a>
+                </Link>
+              </div>
+            );
+          })
+        ) : (
+          <Empty message="最近访问的文档会出现在此处" />
+        )}
+      </div>
+    );
+  }, [recentDocs]);
+
   useEffect(() => {
     if (visible) {
       refresh();
@@ -33,55 +79,7 @@ export const RecentDocs = ({ visible }) => {
           loading={loading}
           loadingContent={<Placeholder />}
           error={error}
-          normalContent={() => {
+          normalContent={renderNormalContent}
-            return (
-              <div className={styles.itemsWrap} style={{ margin: '0 -16px' }}>
-                {recentDocs && recentDocs.length ? (
-                  recentDocs.map((doc) => {
-                    return (
-                      <div className={styles.itemWrap} key={doc.id}>
-                        <Link
-                          href={{
-                            pathname: '/app/org/[organizationId]/wiki/[wikiId]/doc/[documentId]',
-                            query: {
-                              organizationId: doc.organizationId,
-                              wikiId: doc.wikiId,
-                              documentId: doc.id,
-                            },
-                          }}
-                        >
-                          <a className={styles.item}>
-                            <div className={styles.leftWrap}>
-                              <IconDocumentFill style={{ marginRight: 12 }} />
-                              <div>
-                                <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
-                                  {doc.title}
-                                </Text>
-
-                                <Text size="small" type="tertiary">
-                                  创建者：
-                                  {doc.createUser && doc.createUser.name} • <LocaleTime date={doc.updatedAt} />
-                                </Text>
-                              </div>
-                            </div>
-                            <div className={styles.rightWrap}>
-                              <DocumentStar
-                                organizationId={doc.organizationId}
-                                wikiId={doc.wikiId}
-                                documentId={doc.id}
-                              />
-                            </div>
-                          </a>
-                        </Link>
-                      </div>
-                    );
-                  })
-                ) : (
-                  <Empty message="最近访问的文档会出现在此处" />
-                )}
-              </div>
-            );
-          }}
         />
       </TabPane>
     </Tabs>
@@ -109,6 +107,8 @@ export const RecentMobileTrigger = ({ toggleVisible }) => {
   return <span onClick={toggleVisible}>最近</span>;
 };
 
+const dropdownContainerStyle = { width: 300, padding: '16px 16px 0' };
+
 export const Recent = () => {
   const [visible, toggleVisible] = useToggle(false);
 
@@ -120,7 +120,7 @@ export const Recent = () => {
         visible={visible}
         onVisibleChange={toggleVisible}
         content={
-          <div style={{ width: 300, padding: '16px 16px 0' }}>
+          <div style={dropdownContainerStyle}>
             <RecentDocs visible={visible} />
           </div>
         }

packages/client/src/layouts/app-router-header/wiki.tsx

@@ -7,7 +7,7 @@ import { useStarWikisInOrganization } from 'data/star';
 import { useWikiDetail } from 'data/wiki';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import styles from './index.module.scss';
 import { Placeholder } from './placeholder';
@@ -24,6 +24,58 @@ const WikiContent = () => {
   } = useStarWikisInOrganization(query.organizationId);
   const { data: currentWiki } = useWikiDetail(query.wikiId);
 
+  const renderNormalContent = useCallback(() => {
+    return (
+      <div className={styles.itemsWrap}>
+        {starWikis && starWikis.length ? (
+          starWikis.map((wiki) => {
+            return (
+              <div className={styles.itemWrap} key={wiki.id}>
+                <Link
+                  href={{
+                    pathname: '/app/org/[organizationId]/wiki/[wikiId]',
+                    query: {
+                      organizationId: wiki.organizationId,
+                      wikiId: wiki.id,
+                    },
+                  }}
+                >
+                  <a className={styles.item}>
+                    <div className={styles.leftWrap}>
+                      <Avatar
+                        shape="square"
+                        size="small"
+                        src={wiki.avatar}
+                        style={{
+                          marginRight: 8,
+                          width: 24,
+                          height: 24,
+                          borderRadius: 4,
+                        }}
+                      >
+                        {wiki.name.charAt(0)}
+                      </Avatar>
+                      <div>
+                        <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
+                          {wiki.name}
+                        </Text>
+                      </div>
+                    </div>
+                    <div className={styles.rightWrap}>
+                      <WikiStar organizationId={wiki.organizationId} wikiId={wiki.id} onChange={refreshStarWikis} />
+                    </div>
+                  </a>
+                </Link>
+              </div>
+            );
+          })
+        ) : (
+          <Empty message="收藏的知识库会出现在此处" />
+        )}
+      </div>
+    );
+  }, [refreshStarWikis, starWikis]);
+
   return (
     <>
       {currentWiki && (
@@ -85,61 +137,7 @@ const WikiContent = () => {
         loading={loading}
         loadingContent={<Placeholder />}
         error={error}
-        normalContent={() => {
+        normalContent={renderNormalContent}
-          return (
-            <div className={styles.itemsWrap}>
-              {starWikis && starWikis.length ? (
-                starWikis.map((wiki) => {
-                  return (
-                    <div className={styles.itemWrap} key={wiki.id}>
-                      <Link
-                        href={{
-                          pathname: '/app/org/[organizationId]/wiki/[wikiId]',
-                          query: {
-                            organizationId: wiki.organizationId,
-                            wikiId: wiki.id,
-                          },
-                        }}
-                      >
-                        <a className={styles.item}>
-                          <div className={styles.leftWrap}>
-                            <Avatar
-                              shape="square"
-                              size="small"
-                              src={wiki.avatar}
-                              style={{
-                                marginRight: 8,
-                                width: 24,
-                                height: 24,
-                                borderRadius: 4,
-                              }}
-                            >
-                              {wiki.name.charAt(0)}
-                            </Avatar>
-                            <div>
-                              <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
-                                {wiki.name}
-                              </Text>
-                            </div>
-                          </div>
-                          <div className={styles.rightWrap}>
-                            <WikiStar
-                              organizationId={wiki.organizationId}
-                              wikiId={wiki.id}
-                              onChange={refreshStarWikis}
-                            />
-                          </div>
-                        </a>
-                      </Link>
-                    </div>
-                  );
-                })
-              ) : (
-                <Empty message="收藏的知识库会出现在此处" />
-              )}
-            </div>
-          );
-        }}
       />
       <Dropdown.Divider />
       <div className={styles.itemWrap}>

packages/client/src/layouts/app-single-column/index.tsx

@@ -6,17 +6,17 @@ import styles from './index.module.scss';
 
 const { Content } = SemiLayout;
 
+const style = {
+  padding: '16px 24px',
+  backgroundColor: 'var(--semi-color-bg-0)',
+};
+
 export const AppSingleColumnLayout: React.FC = ({ children }) => {
   return (
     <SemiLayout className={styles.wrap}>
       <AppRouterHeader />
       <SemiLayout className={styles.contentWrap}>
-        <Content
+        <Content style={style}>
-          style={{
-            padding: '16px 24px',
-            backgroundColor: 'var(--semi-color-bg-0)',
-          }}
-        >
           <div>{children}</div>
         </Content>
       </SemiLayout>

packages/client/src/layouts/double-column/index.tsx

@@ -16,6 +16,8 @@ interface IProps {
   rightNode: React.ReactNode;
 }
 
+const style = { width: '100%', height: '100%' };
+
 export const DoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
   const debounceUpdate = useMemo(() => throttle(updateWidth, 200), [updateWidth]);
@@ -25,7 +27,7 @@ export const DoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) =>
       <RouterHeader />
       <SemiLayout className={styles.contentWrap}>
         <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={debounceUpdate}>
-          <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
+          <Sider style={style} className={styles.leftWrap}>
             <Button
               size="small"
               icon={isCollapsed ? <IconChevronRight /> : <IconChevronLeft />}

packages/client/src/layouts/public-double-column/index.tsx

@@ -15,6 +15,8 @@ interface IProps {
   rightNode: React.ReactNode;
 }
 
+const style = { width: '100%', height: '100%' };
+
 export const PublicDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
   const debounceUpdate = useMemo(() => throttle(updateWidth, 200), [updateWidth]);
@@ -22,7 +24,7 @@ export const PublicDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode
   return (
     <SemiLayout className={styles.wrap}>
       <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={debounceUpdate}>
-        <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
+        <Sider style={style} className={styles.leftWrap}>
           <Button
             size="small"
             icon={isCollapsed ? <IconChevronRight /> : <IconChevronLeft />}

packages/client/src/layouts/single-column/index.tsx

@@ -6,17 +6,17 @@ import styles from './index.module.scss';
 
 const { Content } = SemiLayout;
 
+const style = {
+  padding: '16px 24px',
+  backgroundColor: 'var(--semi-color-bg-0)',
+};
+
 export const SingleColumnLayout: React.FC = ({ children }) => {
   return (
     <SemiLayout className={styles.wrap}>
       <RouterHeader />
       <SemiLayout className={styles.contentWrap}>
-        <Content
+        <Content style={style}>
-          style={{
-            padding: '16px 24px',
-            backgroundColor: 'var(--semi-color-bg-0)',
-          }}
-        >
           <div>{children}</div>
         </Content>
       </SemiLayout>

packages/client/src/tiptap/core/bubble-menu/bubble-menu-plugin.tsx

@@ -132,7 +132,10 @@ export class BubbleMenuView {
       trigger: 'manual',
       placement: 'top',
       hideOnClick: 'toggle',
-      ...Object.assign({ zIndex: 999 }, this.tippyOptions),
+      ...Object.assign(
+        { zIndex: 999, duration: 200, animation: 'shift-toward-subtle', moveTransition: 'transform 0.2s ease-in-out' },
+        this.tippyOptions
+      ),
     });
 
     // maybe we have to hide tippy on its own blur event as well

packages/client/src/tiptap/core/bubble-menu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from './bubble-menu-plugin';
 
@@ -9,11 +9,9 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
 };
 
 export const BubbleMenu: React.FC<BubbleMenuProps> = (props) => {
-  const $element = useRef<HTMLDivElement | null>(null);
+  const [element, setElement] = useState<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const element = $element.current;
-
     if (!element) {
       return;
     }
@@ -46,10 +44,10 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = (props) => {
     editor.registerPlugin(plugin);
     return () => editor.unregisterPlugin(pluginKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.editor]);
+  }, [props.editor, element]);
 
   return (
-    <div ref={$element} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   );

packages/client/src/tiptap/core/menus/commands.tsx

@@ -63,7 +63,7 @@ export const COMMANDS: ICommand[] = [
     label: '表格',
     custom: (editor, runCommand) => (
       <Popover
-        key="table"
+        key="custom-table"
         showArrow
         position="rightTop"
         zIndex={10000}
@@ -93,7 +93,7 @@ export const COMMANDS: ICommand[] = [
     label: '布局',
     custom: (editor, runCommand) => (
       <Popover
-        key="table"
+        key="custom-columns"
         showArrow
         position="rightTop"
         zIndex={10000}

packages/client/src/tiptap/core/menus/document-reference/bubble.tsx

@@ -47,6 +47,36 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
   const copyMe = useCallback(() => copyNode(DocumentReference.name, editor), [editor]);
   const deleteMe = useCallback(() => deleteNode(DocumentReference.name, editor), [editor]);
 
+  const renderNormalContent = useCallback(
+    () => (
+      <List
+        size="small"
+        style={{ maxHeight: 320, overflow: 'auto' }}
+        dataSource={tocs}
+        renderItem={(item) => (
+          <List.Item
+            onClick={() => selectDoc(item)}
+            style={{ cursor: 'pointer' }}
+            main={
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <Text style={{ display: 'flex', alignItems: 'center' }}>
+                  <IconDocument />
+                </Text>
+                <Text
+                  ellipsis={{ showTooltip: { opts: { content: item.title, position: 'right' } } }}
+                  style={{ width: 150, paddingLeft: 6 }}
+                >
+                  {item.title}
+                </Text>
+              </div>
+            }
+          />
+        )}
+      />
+    ),
+    [selectDoc, tocs]
+  );
+
   useEffect(() => {
     if (defaultShowPicker && user && createUser === user.id) {
       toggleVisible(true);
@@ -71,38 +101,7 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
           spacing={15}
           visible={visible}
           onVisibleChange={toggleVisible}
-          content={
+          content={<DataRender loading={loading} error={error} normalContent={renderNormalContent} />}
-            <DataRender
-              loading={loading}
-              error={error}
-              normalContent={() => (
-                <List
-                  size="small"
-                  style={{ maxHeight: 320, overflow: 'auto' }}
-                  dataSource={tocs}
-                  renderItem={(item) => (
-                    <List.Item
-                      onClick={() => selectDoc(item)}
-                      style={{ cursor: 'pointer' }}
-                      main={
-                        <div style={{ display: 'flex', alignItems: 'center' }}>
-                          <Text style={{ display: 'flex', alignItems: 'center' }}>
-                            <IconDocument />
-                          </Text>
-                          <Text
-                            ellipsis={{ showTooltip: { opts: { content: item.title, position: 'right' } } }}
-                            style={{ width: 150, paddingLeft: 6 }}
-                          >
-                            {item.title}
-                          </Text>
-                        </div>
-                      }
-                    />
-                  )}
-                />
-              )}
-            />
-          }
           trigger="click"
           position="bottomLeft"
           showArrow

packages/client/src/tiptap/core/menus/heading/index.tsx

@@ -4,6 +4,14 @@ import { Editor } from 'tiptap/core';
 import { Title } from 'tiptap/core/extensions/title';
 import { useActive } from 'tiptap/core/hooks/use-active';
 
+const containerStyle = { width: 90, marginRight: 10 };
+const h1Style = { margin: 0, fontSize: '1.3em' };
+const h2Style = { margin: 0, fontSize: '1.1em' };
+const h3Style = { margin: 0, fontSize: '1.0em' };
+const h4Style = { margin: 0, fontSize: '0.9em' };
+const h5Style = { margin: 0, fontSize: '0.8em' };
+const h6Style = { margin: 0, fontSize: '0.8em' };
+
 export const Heading: React.FC<{ editor: Editor }> = ({ editor }) => {
   const isTitleActive = useActive(editor, Title.name);
   const isH1 = useActive(editor, 'heading', { level: 1 });
@@ -12,6 +20,7 @@ export const Heading: React.FC<{ editor: Editor }> = ({ editor }) => {
   const isH4 = useActive(editor, 'heading', { level: 4 });
   const isH5 = useActive(editor, 'heading', { level: 5 });
   const isH6 = useActive(editor, 'heading', { level: 6 });
+
   const current = useMemo(() => {
     if (isH1) return 1;
     if (isH2) return 2;
@@ -34,25 +43,25 @@ export const Heading: React.FC<{ editor: Editor }> = ({ editor }) => {
   );
 
   return (
-    <Select disabled={isTitleActive} value={current} onChange={toggle} style={{ width: 90, marginRight: 10 }}>
+    <Select disabled={isTitleActive} value={current} onChange={toggle} style={containerStyle}>
       <Select.Option value="paragraph">正文</Select.Option>
       <Select.Option value={1}>
-        <h1 style={{ margin: 0, fontSize: '1.3em' }}>标题1</h1>
+        <h1 style={h1Style}>标题1</h1>
       </Select.Option>
       <Select.Option value={2}>
-        <h2 style={{ margin: 0, fontSize: '1.1em' }}>标题2</h2>
+        <h2 style={h2Style}>标题2</h2>
       </Select.Option>
       <Select.Option value={3}>
-        <h3 style={{ margin: 0, fontSize: '1.0em' }}>标题3</h3>
+        <h3 style={h3Style}>标题3</h3>
       </Select.Option>
       <Select.Option value={4}>
-        <h4 style={{ margin: 0, fontSize: '0.9em' }}>标题4</h4>
+        <h4 style={h4Style}>标题4</h4>
       </Select.Option>
       <Select.Option value={5}>
-        <h5 style={{ margin: 0, fontSize: '0.8em' }}>标题5</h5>
+        <h5 style={h5Style}>标题5</h5>
       </Select.Option>
       <Select.Option value={6}>
-        <h6 style={{ margin: 0, fontSize: '0.8em' }}>标题6</h6>
+        <h6 style={h6Style}>标题6</h6>
       </Select.Option>
     </Select>
   );

packages/client/src/tiptap/core/menus/insert/index.tsx

@@ -10,6 +10,29 @@ import { useActive } from 'tiptap/core/hooks/use-active';
 
 import { COMMANDS, insertMenuLRUCache, transformToCommands } from '../commands';
 
+const _CommandRender = ({ commands, editor, runCommand }) => {
+  return (
+    <Dropdown.Menu>
+      {commands.map((command, index) => {
+        return command.title ? (
+          <Dropdown.Title key={'title' + index}>{command.title}</Dropdown.Title>
+        ) : command.custom ? (
+          command.custom(editor, runCommand)
+        ) : (
+          <Dropdown.Item key={index + '-' + command.label} onClick={runCommand(command)}>
+            {command.icon}
+            {command.label}
+          </Dropdown.Item>
+        );
+      })}
+    </Dropdown.Menu>
+  );
+};
+
+const CommandRender = React.memo(_CommandRender, (prevProps, nextProps) => {
+  return prevProps.commands.length === nextProps.commands.length;
+});
+
 export const Insert: React.FC<{ editor: Editor }> = ({ editor }) => {
   const { user } = useUser();
   const [recentUsed, setRecentUsed] = useState([]);
@@ -19,7 +42,7 @@ export const Insert: React.FC<{ editor: Editor }> = ({ editor }) => {
   const renderedCommands = useMemo(
     () =>
       (recentUsed.length ? [{ title: '最近使用' }, ...recentUsed, ...COMMANDS] : COMMANDS).filter((command) => {
-        return command.label === '表格' || command.label === '布局' ? 'custom' in command : true;
+        return command.label === '表格' || command.label === '布局' ? Boolean(command) : true;
       }),
     [recentUsed]
   );
@@ -55,22 +78,7 @@ export const Insert: React.FC<{ editor: Editor }> = ({ editor }) => {
         maxHeight: 'calc(90vh - 120px)',
         overflowY: 'auto',
       }}
-      render={
+      render={visible ? <CommandRender commands={renderedCommands} editor={editor} runCommand={runCommand} /> : null}
-        <Dropdown.Menu>
-          {renderedCommands.map((command, index) => {
-            return command.title ? (
-              <Dropdown.Title key={'title' + index}>{command.title}</Dropdown.Title>
-            ) : command.custom ? (
-              command.custom(editor, runCommand)
-            ) : (
-              <Dropdown.Item key={index + '-' + command.label} onClick={runCommand(command)}>
-                {command.icon}
-                {command.label}
-              </Dropdown.Item>
-            );
-          })}
-        </Dropdown.Menu>
-      }
     >
       <div>
         <Tooltip content="插入">

packages/client/src/tiptap/core/menus/search/index.tsx

@@ -1,6 +1,7 @@
 import { Button, Input, Popover, SideSheet, Space, Typography } from '@douyinfe/semi-ui';
 import { IconSearchReplace } from 'components/icons';
 import { Tooltip } from 'components/tooltip';
+import deepEqual from 'deep-equal';
 import { IsOnMobile } from 'hooks/use-on-mobile';
 import { useToggle } from 'hooks/use-toggle';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -9,6 +10,9 @@ import { ON_SEARCH_RESULTS, SearchNReplace } from 'tiptap/core/extensions/search
 
 const { Text } = Typography;
 
+const headerStyle: React.CSSProperties = { borderBottom: '1px solid var(--semi-color-border)' };
+const marginBottomStyle: React.CSSProperties = { marginBottom: 12 };
+
 export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
   const { isMobile } = IsOnMobile.useHook();
   const [visible, toggleVisible] = useToggle(false);
@@ -32,16 +36,18 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
   }, [visible]);
 
   useEffect(() => {
+    if (!visible) return;
     if (editor && editor.commands && editor.commands.setSearchTerm) {
       editor.commands.setSearchTerm(searchValue);
     }
-  }, [searchValue, editor]);
+  }, [visible, searchValue, editor]);
 
   useEffect(() => {
+    if (!visible) return;
     if (editor && editor.commands && editor.commands.setReplaceTerm) {
       editor.commands.setReplaceTerm(replaceValue);
     }
-  }, [replaceValue, editor]);
+  }, [visible, replaceValue, editor]);
 
   useEffect(() => {
     if (!editor) return;
@@ -51,10 +57,12 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
     if (!searchExtension) return;
 
     const listener = () => {
+      if (!visible) return;
+
       const currentIndex = searchExtension ? searchExtension.options.currentIndex : -1;
       const results = searchExtension ? searchExtension.options.results : [];
-      setCurrentIndex(currentIndex);
+      setCurrentIndex((preIndex) => (preIndex !== currentIndex ? currentIndex : preIndex));
-      setResults(results);
+      setResults((prevResults) => (deepEqual(prevResults, results) ? prevResults : results));
     };
 
     editor.eventEmitter && editor.eventEmitter.on(ON_SEARCH_RESULTS, listener);
@@ -63,11 +71,11 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
       if (!searchExtension) return;
       editor.eventEmitter && editor.eventEmitter.off(ON_SEARCH_RESULTS, listener);
     };
-  }, [editor]);
+  }, [visible, editor]);
 
   const content = (
     <div style={{ padding: isMobile ? '24px 0' : 0 }}>
-      <div style={{ marginBottom: 12 }}>
+      <div style={marginBottomStyle}>
         <Text type="tertiary">查找</Text>
         <Input
           autofocus
@@ -76,7 +84,7 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
           suffix={results.length ? `${currentIndex + 1}/${results.length}` : ''}
         />
       </div>
-      <div style={{ marginBottom: 12 }}>
+      <div style={marginBottomStyle}>
         <Text type="tertiary">替换为</Text>
         <Input value={replaceValue} onChange={setReplaceValue} />
       </div>
@@ -113,7 +121,7 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
       {isMobile ? (
         <>
           <SideSheet
-            headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+            headerStyle={headerStyle}
             placement="bottom"
             title={'查找替换'}
             visible={visible}

packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx

@@ -138,17 +138,7 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
 
   return (
     <div className={styles.wrap}>
-      <DataRender
+      <DataRender loading={loading} error={error} errorContent={renderError} normalContent={renderEditor} />
-        loading={loading}
-        loadingContent={
-          <div style={{ margin: 'auto' }}>
-            <Spin />
-          </div>
-        }
-        error={error}
-        errorContent={renderError}
-        normalContent={renderEditor}
-      />
     </div>
   );
 });