fix: add width caculate

src/content/drawer/index.tsx

@@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
 
 import * as toaster from '../../components/Toaster';
-import { XFANS_CONTENT_WIDTH, XFANS_MIN_WIDTH } from '../../constants';
+import { XFANS_CONTENT_WIDTH } from '../../constants';
 import { ProfileData } from '../../service/login/me';
 import { TwitterOauth2Data } from '../../service/login/twiterOuth2';
 import http, { ResultData } from '../../service/request';
@@ -18,9 +18,9 @@ import ProfileModal from '../../welcome/Wallet/Profile';
 import CongratulationPage from '../loginPage/congratulationPage';
 import InvitePage from '../loginPage/invitePage';
 import SignInWithXPage from '../loginPage/signInWithXPage';
-import { getElementRightByXPath } from '../../utils';
+import { caculateBackWidth, caculateDrawerWidth } from '../../utils';
 import LogoButton from './logoButton';
-import { XFANS_CHECK_RETWEET, XFANS_TOKEN, OAUTH2, XFANS_TWITTER_HOMEPAGE } from '../../constants';
+import { XFANS_TOKEN } from '../../constants';
 import '../../tailwind.css';
 
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
@@ -51,7 +51,9 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
 }));
 
 export default function PersistentDrawerRight() {
-  const { isShowDrawer, goPage, page, logout } = useGlobalStore((state) => ({ ...state }));
+  const { isShowDrawer, goPage, page, logout, drawerWidth, backWidth } = useGlobalStore(
+    (state) => ({ ...state })
+  );
 
   const [loginLoading, setLoginLoading] = React.useState(false);
 
@@ -67,33 +69,13 @@ export default function PersistentDrawerRight() {
     });
   };
 
-  const caculateDrawerWidth = () => {
-    if (window.location.href.includes(OAUTH2)) {
-      return XFANS_MIN_WIDTH;
-    }
-    // 首页信息流dom
-    const xPath = '/html/body/div[1]/div/div/div[2]/main/div/div/div/div[1]/div';
-    const right = getElementRightByXPath(xPath);
-
-    if (right === null) {
-      return XFANS_MIN_WIDTH;
-    }
-    return Math.max(window.innerWidth - right, XFANS_MIN_WIDTH);
-  };
-
-  const caculateBackWidth = () => {
-    return caculateDrawerWidth() - XFANS_CONTENT_WIDTH;
-  };
-
-  const [drawerWidth, setDrawerWidth] = React.useState(caculateDrawerWidth());
-
-  const [backWidth, setBackWidth] = React.useState(caculateBackWidth());
-
   React.useEffect(() => {
     function handleResize() {
       // 当窗口大小变化时，更新 width 的值
-      setBackWidth(caculateBackWidth());
-      setDrawerWidth(caculateDrawerWidth());
+      useGlobalStore.setState({
+        drawerWidth: caculateDrawerWidth(),
+        backWidth: caculateBackWidth(),
+      });
     }
 
     // 添加窗口大小变化时的事件监听器

src/content/index.tsx

@@ -5,7 +5,7 @@ import { Store } from '@eduardoac-skimlinks/webext-redux';
 
 import { proxyStore as store } from '../app/proxyStore';
 import useGlobalStore from '../store/useGlobalStore';
-
+import { caculateBackWidth, caculateDrawerWidth } from '../utils';
 import { addTwitterComponent, addUserPagePriceComponent } from './addToTwitterHome';
 import Content from './Content';
 
@@ -36,6 +36,10 @@ withProxyStore(<Content />, store).then((component) => {
   // 延迟执行的代码 3000毫秒后执行，即3秒
   setTimeout(() => {
     setInterval(() => {
+      useGlobalStore.setState({
+        drawerWidth: caculateDrawerWidth(),
+        backWidth: caculateBackWidth(),
+      });
       // 使用示例
       const userIsOnProfilePage = whereIsUser();
       const { token } = useGlobalStore.getState();

src/store/useGlobalStore.ts

@@ -24,6 +24,8 @@ export interface GlobalStoreProps {
   userInfo: UserInfo | null;
   goPage(page: PageType): void;
   logout(): void;
+  drawerWidth: number;
+  backWidth: number;
   userVote: Record<string, boolean> | null;
 }
 
@@ -48,6 +50,8 @@ const useGlobalStore = create<GlobalStoreProps>()(
           page: PageType.Login,
         });
       },
+      drawerWidth: 0,
+      backWidth: 0,
       userVote: null,
     }),
     {

src/utils.ts

@@ -1,5 +1,6 @@
 import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
+import { OAUTH2, XFANS_MIN_WIDTH, XFANS_CONTENT_WIDTH } from './constants';
 
 export function formatTime(seconds: any) {
   if (seconds < 60) {
@@ -69,3 +70,22 @@ export function getElementRightByXPath(xpath: string): number | null {
     return null;
   }
 }
+
+export const caculateDrawerWidth = () => {
+  if (window.location.href.includes(OAUTH2)) {
+    return XFANS_MIN_WIDTH;
+  }
+  // 首页信息流dom
+  const xPath = '/html/body/div[1]/div/div/div[2]/main/div/div/div/div[1]/div';
+  const right = getElementRightByXPath(xPath);
+
+  if (right === null) {
+    return XFANS_MIN_WIDTH;
+  }
+
+  return Math.max(document.body.clientWidth - right, XFANS_MIN_WIDTH);
+};
+
+export const caculateBackWidth = () => {
+  return caculateDrawerWidth() - XFANS_CONTENT_WIDTH;
+};