perf: member tableui (#4353)

docSite/content/zh-cn/docs/development/upgrading/492.md

@@ -30,7 +30,8 @@ weight: 799
 6. 工作流节点数组字符串类型，自动适配 string 输入。
 7. 工作流节点数组类型，自动进行 JSON parse 解析 string 输入。
 8. AI proxy 日志优化，去除重试失败的日志，仅保留最后一份错误日志。
-9. 分块算法小调整：  
+9. 个人信息和通知展示优化。
+10. 分块算法小调整：  
   * 跨处理符号之间连续性更强。  
   * 代码块分割时，用 LLM 模型上下文作为分块大小，尽可能保证代码块完整性。
   * 表格分割时，用 LLM 模型上下文作为分块大小，尽可能保证表格完整性。

packages/web/hooks/useEditTextarea.tsx

@@ -1,133 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-import {
-  ModalFooter,
-  ModalBody,
-  Input,
-  useDisclosure,
-  Button,
-  Box,
-  Textarea
-} from '@chakra-ui/react';
-import MyModal from '../components/common/MyModal';
-import { useToast } from './useToast';
-import { useTranslation } from 'next-i18next';
-
-export const useEditTextarea = ({
-  title,
-  tip,
-  placeholder = '',
-  canEmpty = true,
-  valueRule,
-  rows = 10
-}: {
-  title: string;
-  tip?: string;
-  placeholder?: string;
-  canEmpty?: boolean;
-  valueRule?: (val: string) => string | void;
-  rows?: number;
-}) => {
-  const { t } = useTranslation();
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const onSuccessCb = useRef<(content: string) => void | Promise<void>>();
-  const onErrorCb = useRef<(err: any) => void>();
-  const { toast } = useToast();
-  const defaultValue = useRef('');
-
-  const onOpenModal = useCallback(
-    ({
-      defaultVal,
-      onSuccess,
-      onError
-    }: {
-      defaultVal: string;
-      onSuccess: (content: string) => any;
-      onError?: (err: any) => void;
-    }) => {
-      onOpen();
-      onSuccessCb.current = onSuccess;
-      onErrorCb.current = onError;
-      defaultValue.current = defaultVal;
-    },
-    [onOpen]
-  );
-
-  const onclickConfirm = useCallback(async () => {
-    if (!textareaRef.current || !onSuccessCb.current) return;
-    const val = textareaRef.current.value;
-
-    if (!canEmpty && !val) {
-      textareaRef.current.focus();
-      return;
-    }
-
-    if (valueRule) {
-      const result = valueRule(val);
-      if (result) {
-        return toast({
-          status: 'warning',
-          title: result
-        });
-      }
-    }
-
-    try {
-      await onSuccessCb.current(val);
-
-      onClose();
-    } catch (err) {
-      onErrorCb.current?.(err);
-    }
-  }, [canEmpty, onClose]);
-
-  // eslint-disable-next-line react/display-name
-  const EditModal = useCallback(
-    ({
-      maxLength = 30,
-      iconSrc = 'modal/edit',
-      closeBtnText = t('common:common.Close')
-    }: {
-      maxLength?: number;
-      iconSrc?: string;
-      closeBtnText?: string;
-    }) => (
-      <MyModal isOpen={isOpen} onClose={onClose} iconSrc={iconSrc} title={title} maxW={'500px'}>
-        <ModalBody pt={tip ? '3 !important' : '5 !important'}>
-          {!!tip && (
-            <Box mb={3} color={'myGray.500'} fontSize={'sm'}>
-              {tip}
-            </Box>
-          )}
-
-          <Textarea
-            ref={textareaRef}
-            defaultValue={defaultValue.current}
-            placeholder={placeholder}
-            autoFocus
-            maxLength={maxLength}
-            rows={rows}
-            bg={'myGray.50'}
-          />
-        </ModalBody>
-        <ModalFooter>
-          {!!closeBtnText && (
-            <Button mr={3} variant={'whiteBase'} onClick={onClose}>
-              {closeBtnText}
-            </Button>
-          )}
-          <Button onClick={onclickConfirm} px={6}>
-            {t('common:common.Confirm')}
-          </Button>
-        </ModalFooter>
-      </MyModal>
-    ),
-    [isOpen, onClose, onclickConfirm, placeholder, tip, title]
-  );
-
-  return {
-    onOpenModal,
-    EditModal
-  };
-};

packages/web/i18n/en/account_team.json

@@ -17,9 +17,9 @@
   "create_sub_org": "Create sub-organization",
   "delete": "delete",
   "delete_org": "Delete organization",
-  "edit_member": "Edit user",
-  "edit_member_tip": "username",
   "edit_info": "Edit information",
+  "edit_member": "Edit user",
+  "edit_member_tip": "Name",
   "edit_org_info": "Edit organization information",
   "expires": "Expiration time",
   "forbid_hint": "After forbidden, this invitation link will become invalid. This action is irreversible. Are you sure you want to deactivate?",

packages/web/i18n/zh-CN/account_team.json

@@ -20,9 +20,9 @@
   "delete_from_org": "移出部门",
   "delete_from_team": "移出团队",
   "delete_org": "删除部门",
-  "edit_member": "编辑用户",
-  "edit_member_tip": "用户名",
   "edit_info": "编辑信息",
+  "edit_member": "编辑用户",
+  "edit_member_tip": "成员名",
   "edit_org_info": "编辑部门信息",
   "expires": "过期时间",
   "export_members": "导出成员",

packages/web/i18n/zh-Hant/account_team.json

@@ -17,9 +17,9 @@
   "create_sub_org": "創建子部門",
   "delete": "刪除",
   "delete_org": "刪除部門",
-  "edit_member": "編輯用戶",
-  "edit_member_tip": "使用者名稱",
   "edit_info": "編輯訊息",
+  "edit_member": "編輯用戶",
+  "edit_member_tip": "成員名",
   "edit_org_info": "編輯部門資訊",
   "expires": "過期時間",
   "forbid_hint": "停用後，該邀請連結將失效。 該操作不可撤銷，是否確認停用？",

projects/app/src/pageComponents/account/team/MemberTable.tsx

@@ -17,7 +17,6 @@ import {
 import { useTranslation } from 'next-i18next';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { useEditTextarea } from '@fastgpt/web/hooks/useEditTextarea';
 import {
   delRemoveMember,
   getTeamMembers,
@@ -50,6 +49,7 @@ import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
 import { PaginationResponse } from '@fastgpt/web/common/fetch/type';
 import _ from 'lodash';
 import MySelect from '@fastgpt/web/components/common/MySelect';
+import { useEditTitle } from '@/web/common/hooks/useEditTitle';
 
 const InviteModal = dynamic(() => import('./Invite/InviteModal'));
 const TeamTagModal = dynamic(() => import('@/components/support/user/team/TeamTagModal'));
@@ -157,11 +157,10 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
 
   const isLoading = loadingMembers || isSyncing;
 
-  const { EditModal: EditMemberNameModal, onOpenModal: openEditMemberName } = useEditTextarea({
+  const { EditModal: EditMemberNameModal, onOpenModal: openEditMemberName } = useEditTitle({
     title: t('account_team:edit_member'),
     tip: t('account_team:edit_member_tip'),
-    canEmpty: false,
-    rows: 1
+    canEmpty: false
   });
   const handleEditMemberName = (tmbId: string, memberName: string) => {
     openEditMemberName({
@@ -323,8 +322,8 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
                         member.tmbId !== userInfo?.team.tmbId &&
                         (member.status === TeamMemberStatusEnum.active ? (
                           <>
-                            {' '}
                             <Icon
+                              mr={2}
                               name={'edit'}
                               cursor={'pointer'}
                               w="1rem"

projects/app/src/web/common/hooks/useEditTitle.tsx

@@ -4,6 +4,7 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useTranslation } from 'next-i18next';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 export const useEditTitle = ({
   title,
@@ -89,11 +90,7 @@ export const useEditTitle = ({
       return (
         <MyModal isOpen={isOpen} onClose={onClose} iconSrc={iconSrc} title={title} maxW={'500px'}>
           <ModalBody>
-            {!!tip && (
-              <Box mb={2} color={'myGray.500'} fontSize={'sm'}>
-                {tip}
-              </Box>
-            )}
+            {!!tip && <FormLabel mb={2}>{tip}</FormLabel>}
 
             <Input
               ref={inputRef}