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 />}>
+      <DocumentStyle />
-        <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-      </Popover>
     </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 />}>
+        <DocumentStyle />
-          <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-        </Popover>
       </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 />}>
+              <DocumentStyle />
-                <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-              </Popover>
               <Theme />
               <User />
             </Space>

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

@@ -1,34 +1,50 @@
 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 (
-    <div className={styles.wrap}>
+    <Popover
-      <div className={styles.item}>
+      key="style"
-        <Text>正文大小</Text>
+      zIndex={1061}
-        <Text style={{ fontSize: '0.8em' }}> {fontSize}px</Text>
+      position={isMobile ? 'topRight' : 'bottomLeft'}
-        <Slider min={12} max={24} step={1} tooltipVisible={false} value={fontSize} onChange={setFontSize} />
+      visible={visible}
-      </div>
+      onVisibleChange={toggleVisible}
-      <div className={styles.item}>
+      content={
-        <Text>页面尺寸</Text>
+        <div className={styles.wrap}>
-        <div>
+          <div className={styles.item}>
-          <RadioGroup
+            <Text>正文大小</Text>
-            type="button"
+            <Text style={{ fontSize: '0.8em' }}> {fontSize}px</Text>
-            value={width}
+            <Slider min={12} max={24} step={1} tooltipVisible={false} value={fontSize} onChange={setFontSize} />
-            onChange={(e) => setWidth(e.target.value)}
+          </div>
-            style={{ marginTop: '0.5em' }}
+          <div className={styles.item}>
-          >
+            <Text>页面尺寸</Text>
-            <Radio value={'standardWidth'}>标宽模式</Radio>
+            <div>
-            <Radio value={'fullWidth'}>超宽模式</Radio>
+              <RadioGroup
-          </RadioGroup>
+                type="button"
+                value={width}
+                onChange={(e) => setWidth(e.target.value)}
+                style={{ marginTop: '0.5em' }}
+              >
+                <Radio value={'standardWidth'}>标宽模式</Radio>
+                <Radio value={'fullWidth'}>超宽模式</Radio>
+              </RadioGroup>
+            </div>
+          </div>
         </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 />}>
+              <DocumentStyle />
-                <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-              </Popover>
               <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 />}>
+                      <DocumentStyle />
-                        <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
-                      </Popover>
                       <Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
                         <Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
                       </Tooltip>