From 9d97b6056136e8359b1ab02346fbd3f6c83c17b9 Mon Sep 17 00:00:00 2001
From: Archer <545436317@qq.com>
Date: Thu, 27 Mar 2025 10:55:54 +0800
Subject: [PATCH] perf: member tableui (#4353)

---
 .../zh-cn/docs/development/upgrading/492.md   |   3 +-
 packages/web/hooks/useEditTextarea.tsx        | 133 ------------------
 packages/web/i18n/en/account_team.json        |   4 +-
 packages/web/i18n/zh-CN/account_team.json     |   4 +-
 packages/web/i18n/zh-Hant/account_team.json   |   4 +-
 .../account/team/MemberTable.tsx              |   9 +-
 .../app/src/web/common/hooks/useEditTitle.tsx |   7 +-
 7 files changed, 14 insertions(+), 150 deletions(-)
 delete mode 100644 packages/web/hooks/useEditTextarea.tsx

diff --git a/docSite/content/zh-cn/docs/development/upgrading/492.md b/docSite/content/zh-cn/docs/development/upgrading/492.md
index 37950109f..d791139e2 100644
--- a/docSite/content/zh-cn/docs/development/upgrading/492.md
+++ b/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 模型上下文作为分块大小，尽可能保证表格完整性。
diff --git a/packages/web/hooks/useEditTextarea.tsx b/packages/web/hooks/useEditTextarea.tsx
deleted file mode 100644
index 87d949eeb..000000000
--- a/packages/web/hooks/useEditTextarea.tsx
+++ /dev/null
@@ -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
-  };
-};
diff --git a/packages/web/i18n/en/account_team.json b/packages/web/i18n/en/account_team.json
index b62f9f125..2a50f6cb0 100644
--- a/packages/web/i18n/en/account_team.json
+++ b/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?",
diff --git a/packages/web/i18n/zh-CN/account_team.json b/packages/web/i18n/zh-CN/account_team.json
index d32651a03..2659db5b4 100644
--- a/packages/web/i18n/zh-CN/account_team.json
+++ b/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": "导出成员",
diff --git a/packages/web/i18n/zh-Hant/account_team.json b/packages/web/i18n/zh-Hant/account_team.json
index 54defad33..09dc87868 100644
--- a/packages/web/i18n/zh-Hant/account_team.json
+++ b/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": "停用後，該邀請連結將失效。 該操作不可撤銷，是否確認停用？",
diff --git a/projects/app/src/pageComponents/account/team/MemberTable.tsx b/projects/app/src/pageComponents/account/team/MemberTable.tsx
index b7795681d..ec31b1ae9 100644
--- a/projects/app/src/pageComponents/account/team/MemberTable.tsx
+++ b/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"
diff --git a/projects/app/src/web/common/hooks/useEditTitle.tsx b/projects/app/src/web/common/hooks/useEditTitle.tsx
index 21a3951c8..a7842eb8d 100644
--- a/projects/app/src/web/common/hooks/useEditTitle.tsx
+++ b/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}