feat: update document style

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

@@ -52,9 +52,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
       <DocumentShare key="share" documentId={documentId} />
       <DocumentVersion key="version" documentId={documentId} onSelect={triggerUseDocumentVersion} />
       <DocumentStar key="star" documentId={documentId} />
-      <Popover key="style" zIndex={1061} position={isMobile ? 'topRight' : 'bottomLeft'} content={<DocumentStyle />}>
-        <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-      </Popover>
+      <DocumentStyle />
     </Space>
   );
 

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

@@ -90,12 +90,10 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
             <DocumentStar key="star" documentId={documentId} />
           </>
         )}
-        <Popover key="style" zIndex={1061} position={isMobile ? 'topRight' : 'bottomLeft'} content={<DocumentStyle />}>
-          <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-        </Popover>
+        <DocumentStyle />
       </Space>
     ),
-    [document, documentId, authority, isMobile, gotoEdit]
+    [document, documentId, authority, gotoEdit]
   );
 
   const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);

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

@@ -86,9 +86,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
           }
           footer={
             <Space>
-              <Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
-                <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-              </Popover>
+              <DocumentStyle />
               <Theme />
               <User />
             </Space>

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

@@ -1,14 +1,26 @@
 import React from 'react';
-import { RadioGroup, Radio, Typography, Slider } from '@douyinfe/semi-ui';
+import { RadioGroup, Radio, Typography, Slider, Popover, Button } from '@douyinfe/semi-ui';
+import { IconArticle } from '@douyinfe/semi-icons';
+import { useWindowSize } from 'hooks/use-window-size';
 import { useDocumentStyle } from 'hooks/use-document-style';
+import { useToggle } from 'hooks/use-toggle';
 import styles from './index.module.scss';
 
 const { Text } = Typography;
 
 export const DocumentStyle = () => {
+  const { isMobile } = useWindowSize();
   const { width, fontSize, setWidth, setFontSize } = useDocumentStyle();
+  const [visible, toggleVisible] = useToggle(false);
 
   return (
+    <Popover
+      key="style"
+      zIndex={1061}
+      position={isMobile ? 'topRight' : 'bottomLeft'}
+      visible={visible}
+      onVisibleChange={toggleVisible}
+      content={
         <div className={styles.wrap}>
           <div className={styles.item}>
             <Text>正文大小</Text>
@@ -30,5 +42,9 @@ export const DocumentStyle = () => {
             </div>
           </div>
         </div>
+      }
+    >
+      <Button icon={<IconArticle />} theme="borderless" type="tertiary" onMouseDown={toggleVisible} />
+    </Popover>
   );
 };

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

@@ -63,9 +63,7 @@ export const Editor: React.FC<IProps> = ({ user, data, updateTemplate, deleteTem
           }
           footer={
             <Space>
-              <Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
-                <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-              </Popover>
+              <DocumentStyle />
               <Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
                 <Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
               </Tooltip>

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

@@ -78,9 +78,7 @@ export const TemplateEditor: React.FC<IProps> = ({ templateId }) => {
                   }
                   footer={
                     <Space>
-                      <Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
-                        <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-                      </Popover>
+                      <DocumentStyle />
                       <Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
                         <Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
                       </Tooltip>