perf: scroll page code

2025-01-13 13:40:42 +08:00
parent ec0cef09a2
commit 62bcff2ff0
14 changed files with 302 additions and 250 deletions
--- a/packages/web/components/common/MySelect/index.tsx
+++ b/packages/web/components/common/MySelect/index.tsx
@@ -97,6 +97,46 @@ const MySelect = <T = any,>(

  const isSelecting = loading || isLoading;

+  const ListRender = useMemo(() => {
+    return (
+      <>
+        {list.map((item, i) => (
+          <Box key={i}>
+            <MenuItem
+              {...menuItemStyles}
+              {...(value === item.value
+                ? {
+                    ref: SelectedItemRef,
+                    color: 'primary.700',
+                    bg: 'myGray.100',
+                    fontWeight: '600'
+                  }
+                : {
+                    color: 'myGray.900'
+                  })}
+              onClick={() => {
+                if (onChange && value !== item.value) {
+                  onChange(item.value);
+                }
+              }}
+              whiteSpace={'pre-wrap'}
+              fontSize={'sm'}
+              display={'block'}
+            >
+              <Box>{item.label}</Box>
+              {item.description && (
+                <Box color={'myGray.500'} fontSize={'xs'}>
+                  {item.description}
+                </Box>
+              )}
+            </MenuItem>
+            {item.showBorder && <MyDivider my={2} />}
+          </Box>
+        ))}
+      </>
+    );
+  }, []);
+
  return (
    <Box
      css={css({
@@ -164,45 +204,7 @@ const MySelect = <T = any,>(
          maxH={'40vh'}
          overflowY={'auto'}
        >
-          {(() => {
-            const component = list.map((item, i) => (
-              <Box key={i}>
-                <MenuItem
-                  {...menuItemStyles}
-                  {...(value === item.value
-                    ? {
-                        ref: SelectedItemRef,
-                        color: 'primary.700',
-                        bg: 'myGray.100',
-                        fontWeight: '600'
-                      }
-                    : {
-                        color: 'myGray.900'
-                      })}
-                  onClick={() => {
-                    if (onChange && value !== item.value) {
-                      onChange(item.value);
-                    }
-                  }}
-                  whiteSpace={'pre-wrap'}
-                  fontSize={'sm'}
-                  display={'block'}
-                >
-                  <Box>{item.label}</Box>
-                  {item.description && (
-                    <Box color={'myGray.500'} fontSize={'xs'}>
-                      {item.description}
-                    </Box>
-                  )}
-                </MenuItem>
-                {item.showBorder && <MyDivider my={2} />}
-              </Box>
-            ));
-            if (ScrollData) {
-              return <ScrollData>{component}</ScrollData>;
-            }
-            return component;
-          })()}
+          {ScrollData ? <ScrollData>{ListRender}</ScrollData> : ListRender}
        </MenuList>
      </Menu>
    </Box>
--- a/packages/web/components/common/UserBox/index.tsx
+++ b/packages/web/components/common/UserBox/index.tsx
@@ -15,7 +15,7 @@ function UserBox({ sourceMember, avatarSize = '1.25rem', ...props }: UserBoxProp
    <HStack space="1" {...props}>
      <Avatar src={sourceMember.avatar} w={avatarSize} />
      <Box>{sourceMember.name}</Box>
-      {sourceMember.status === 'leave' && <Tag color="gray">{t('account_team:leaved')}</Tag>}
+      {sourceMember.status === 'leave' && <Tag color="gray">{t('common:user_leaved')}</Tag>}
    </HStack>
  );
 }
--- a/packages/web/hooks/useScrollPagination.tsx
+++ b/packages/web/hooks/useScrollPagination.tsx
@@ -269,8 +269,10 @@ export function useScrollPagination<
    ({
      children,
      ScrollContainerRef,
+      isLoading,
      ...props
    }: {
+      isLoading?: boolean;
      children: ReactNode;
      ScrollContainerRef?: RefObject<HTMLDivElement>;
    } & BoxProps) => {
@@ -302,7 +304,7 @@ export function useScrollPagination<
      );

      return (
-        <Box {...props} ref={ref} overflow={'overlay'}>
+        <MyBox {...props} ref={ref} overflow={'overlay'} isLoading={isLoading}>
          {scrollLoadType === 'top' && total > 0 && isLoading && (
            <Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
              {t('common:common.is_requesting')}
@@ -325,7 +327,7 @@ export function useScrollPagination<
            </Box>
          )}
          {isEmpty && EmptyTip}
-        </Box>
+        </MyBox>
      );
    }
  );
--- a/packages/web/i18n/en/common.json
+++ b/packages/web/i18n/en/common.json
@@ -39,6 +39,7 @@
  "classification": "Classification",
  "click_to_resume": "Click to Resume",
  "code_editor": "Code Editor",
+  "code_error.account_error": "Incorrect account name or password",
  "code_error.app_error.invalid_app_type": "Invalid Application Type",
  "code_error.app_error.invalid_owner": "Unauthorized Application Owner",
  "code_error.app_error.not_exist": "Application Does Not Exist",
@@ -95,7 +96,6 @@
  "code_error.team_error.website_sync_not_enough": "Unauthorized to Use Website Sync",
  "code_error.token_error_code.403": "Invalid Login Status, Please Re-login",
  "code_error.user_error.balance_not_enough": "Insufficient Account Balance",
-  "code_error.account_error": "Incorrect account name or password",
  "code_error.user_error.bin_visitor_guest": "You Are Currently a Guest, Unauthorized to Operate",
  "code_error.user_error.un_auth_user": "User Not Found",
  "common.Action": "Action",
@@ -1273,6 +1273,7 @@
  "user.team.role.Visitor": "visitor",
  "user.team.role.writer": "writable member",
  "user.type": "Type",
+  "user_leaved": "Leaved",
  "verification": "Verification",
  "workflow.template.communication": "Communication",
  "xx_search_result": "{{key}} Search Results",
--- a/packages/web/i18n/zh-CN/account_team.json
+++ b/packages/web/i18n/zh-CN/account_team.json
@@ -35,7 +35,6 @@
  "user_team_invite_member": "邀请成员",
  "user_team_leave_team": "离开团队",
  "user_team_leave_team_failed": "离开团队失败",
-  "leaved": "已离职",
  "waiting": "待接受",
  "sync_immediately": "立即同步",
  "sync_member_failed": "同步成员失败",
--- a/packages/web/i18n/zh-CN/common.json
+++ b/packages/web/i18n/zh-CN/common.json
@@ -43,6 +43,7 @@
  "classification": "分类",
  "click_to_resume": "点击恢复",
  "code_editor": "代码编辑",
+  "code_error.account_error": "账号名或密码错误",
  "code_error.app_error.invalid_app_type": "错误的应用类型",
  "code_error.app_error.invalid_owner": "非法的应用所有者",
  "code_error.app_error.not_exist": "应用不存在",
@@ -99,7 +100,6 @@
  "code_error.team_error.website_sync_not_enough": "无权使用Web站点同步~",
  "code_error.token_error_code.403": "登录状态无效，请重新登录",
  "code_error.user_error.balance_not_enough": "账号余额不足~",
-  "code_error.account_error": "账号名或密码错误",
  "code_error.user_error.bin_visitor_guest": "您当前身份为游客，无权操作",
  "code_error.user_error.un_auth_user": "找不到该用户",
  "common.Action": "操作",
@@ -1268,6 +1268,7 @@
  "user.team.role.Visitor": "访客",
  "user.team.role.writer": "可写成员",
  "user.type": "类型",
+  "user_leaved": "已离开",
  "verification": "验证",
  "workflow.template.communication": "通信",
  "xx_search_result": "{{key}} 的搜索结果",
--- a/packages/web/i18n/zh-Hant/common.json
+++ b/packages/web/i18n/zh-Hant/common.json
@@ -39,6 +39,7 @@
  "classification": "分類",
  "click_to_resume": "點選繼續",
  "code_editor": "程式碼編輯器",
+  "code_error.account_error": "帳號名稱或密碼錯誤",
  "code_error.app_error.invalid_app_type": "無效的應用程式類型",
  "code_error.app_error.invalid_owner": "非法的應用程式擁有者",
  "code_error.app_error.not_exist": "應用程式不存在",
@@ -95,7 +96,6 @@
  "code_error.team_error.website_sync_not_enough": "無權使用網站同步",
  "code_error.token_error_code.403": "登入狀態無效，請重新登入",
  "code_error.user_error.balance_not_enough": "帳戶餘額不足",
-  "code_error.account_error": "帳號名稱或密碼錯誤",
  "code_error.user_error.bin_visitor_guest": "您目前身份為訪客，無權操作",
  "code_error.user_error.un_auth_user": "找不到此使用者",
  "common.Action": "操作",
@@ -1273,6 +1273,7 @@
  "user.team.role.Visitor": "訪客",
  "user.team.role.writer": "可寫入成員",
  "user.type": "類型",
+  "user_leaved": "已離開",
  "verification": "驗證",
  "workflow.template.communication": "通訊",
  "xx_search_result": "{{key}} 的搜尋結果",