client: throttle update width

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

@@ -1,9 +1,10 @@
 import { IconArticle } from '@douyinfe/semi-icons';
 import { Button, Popover, Radio, RadioGroup, Slider, Typography } from '@douyinfe/semi-ui';
+import { throttle } from 'helpers/throttle';
 import { useDocumentStyle } from 'hooks/use-document-style';
 import { IsOnMobile } from 'hooks/use-on-mobile';
 import { useToggle } from 'hooks/use-toggle';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import styles from './index.module.scss';
 
@@ -13,6 +14,11 @@ export const DocumentStyle = () => {
   const { isMobile } = IsOnMobile.useHook();
   const { width, fontSize, setWidth, setFontSize } = useDocumentStyle();
   const [visible, toggleVisible] = useToggle(false);
+  const throttleSetWidth = useMemo(() => {
+    return throttle((e) => {
+      setWidth(e.target.value);
+    }, 200);
+  }, [setWidth]);
 
   return (
     <Popover
@@ -32,12 +38,7 @@ export const DocumentStyle = () => {
           <div className={styles.item}>
             <Text>页面尺寸</Text>
             <div>
-              <RadioGroup
+              <RadioGroup type="button" value={width} onChange={throttleSetWidth} style={{ marginTop: '0.5em' }}>
-                type="button"
-                value={width}
-                onChange={(e) => setWidth(e.target.value)}
-                style={{ marginTop: '0.5em' }}
-              >
                 <Radio value={'standardWidth'}>标宽模式</Radio>
                 <Radio value={'fullWidth'}>超宽模式</Radio>
               </RadioGroup>