From 2ea2ec56ec5457086b8ac9cb57878267876c265f Mon Sep 17 00:00:00 2001 From: yokowu <18836617@qq.com> Date: Mon, 1 Sep 2025 14:35:01 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=88=90=E5=91=98?= =?UTF-8?q?=E7=BB=84=E6=90=9C=E7=B4=A2=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/pages/memberManage/groupList.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/ui/src/pages/memberManage/groupList.tsx b/ui/src/pages/memberManage/groupList.tsx index 9afd10af..33dcf53f 100644 --- a/ui/src/pages/memberManage/groupList.tsx +++ b/ui/src/pages/memberManage/groupList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState, useMemo } from 'react'; import Card from '@/components/card'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import { useRequest } from 'ahooks'; @@ -35,17 +35,18 @@ const GroupList = () => { const userData = useRequest(() => getListUser({})); const adminData = useRequest(() => getListAdminUser({})); const [searchUser, setSearchUser] = useState(''); - const [data, setData] = useState([]); const [anchorEl, setAnchorEl] = useState(null); - useEffect(()=>{ - if(searchUser){ - setData(groupData?.data?.groups?.filter((item)=> - (item.name ||'').toLowerCase()?.includes(searchUser.toLowerCase())) || []); - }else { - setData(groupData?.data?.groups || []); + const filteredData = useMemo(() => { + if (!groupData?.data?.groups) return []; + if (searchUser) { + return groupData.data.groups.filter((item) => + (item.name || '').toLowerCase().includes(searchUser.toLowerCase()) + ); } - },[searchUser, groupData]) + return groupData.data.groups; + }, [searchUser, groupData?.data?.groups]); + const handleClick = ( event: React.MouseEvent, record: DomainUserGroup @@ -296,7 +297,7 @@ const GroupList = () => { Date: Mon, 1 Sep 2025 16:40:40 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=88=90=E5=91=98=E7=BB=84=E6=97=B6=E7=9A=84=E6=88=90?= =?UTF-8?q?=E5=91=98=E5=92=8C=E7=AE=A1=E7=90=86=E5=91=98=E6=90=9C=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/pages/memberManage/groupList.tsx | 74 +++++++++++++++++++++++-- 1 file changed, 68 insertions(+), 6 deletions(-) diff --git a/ui/src/pages/memberManage/groupList.tsx b/ui/src/pages/memberManage/groupList.tsx index 33dcf53f..b24913bc 100644 --- a/ui/src/pages/memberManage/groupList.tsx +++ b/ui/src/pages/memberManage/groupList.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useRef } from 'react'; import Card from '@/components/card'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import { useRequest } from 'ahooks'; @@ -31,11 +31,15 @@ const GroupList = () => { const [openCreateGroupModal, setOpenCreateGroupModal] = useState(false); const [openUpdateGroupModal, setOpenUpdateGroupModal] = useState(false); const [currentGroup, setCurrentGroup] = useState(null); - const groupData = useRequest(() => getListUserGroup({page: 1, size: 999})); - const userData = useRequest(() => getListUser({})); - const adminData = useRequest(() => getListAdminUser({})); + const groupData = useRequest(() => getListUserGroup({page: 1, size: 9999})); + const userData = useRequest(() => getListUser({page: 1, size: 9999})); + const adminData = useRequest(() => getListAdminUser({page: 1, size: 9999})); const [searchUser, setSearchUser] = useState(''); + const [memberSearchText, setMemberSearchText] = useState(''); + const [adminSearchText, setAdminSearchText] = useState(''); const [anchorEl, setAnchorEl] = useState(null); + const memberInputRef = useRef(null); + const adminInputRef = useRef(null); const filteredData = useMemo(() => { if (!groupData?.data?.groups) return []; @@ -47,6 +51,16 @@ const GroupList = () => { return groupData.data.groups; }, [searchUser, groupData?.data?.groups]); + const filteredSelectUsers = useMemo(() => { + if (!userData.data?.users) return []; + return userData.data.users.filter(user => (user.username || '').toLowerCase().includes(memberSearchText.toLowerCase())); + }, [userData.data?.users, memberSearchText]); + + const filteredSelectAdmins = useMemo(() => { + if (!adminData.data?.users) return []; + return adminData.data.users.filter(user => (user.username || '').toLowerCase().includes(adminSearchText.toLowerCase())); + }, [adminData.data?.users, adminSearchText]); + const handleClick = ( event: React.MouseEvent, record: DomainUserGroup @@ -110,6 +124,15 @@ const GroupList = () => { value={(users || []).map((u: DomainUser) => u.id)} label='成员' size='small' + onClose={() => setMemberSearchText('')} + onOpen={() => { + setTimeout(() => { + memberInputRef.current?.focus(); + }, 100); + }} + MenuProps={{ + autoFocus: false, + }} renderValue={(selectedIds: string[]) => { if (!Array.isArray(selectedIds)) return null; const selectedUsers = (userData.data?.users || []).filter((user: DomainUser) => @@ -156,9 +179,24 @@ const GroupList = () => { message.error('成员移除失败'); }); } + setMemberSearchText(''); }} > - {userData.data?.users?.map((user) => ( + e.stopPropagation()} + onClick={(e) => e.stopPropagation()} + onMouseDown={(e) => e.stopPropagation()} + sx={{ p: 1, position: 'sticky', top: -8, zIndex: 1, backgroundColor: 'background.paper' }} + > + setMemberSearchText(e.target.value)} + /> + + {filteredSelectUsers?.map((user) => ( {(users.some((u: DomainUser) => { return u.id === user.id @@ -184,6 +222,15 @@ const GroupList = () => { value={(admins || []).map((u: DomainAdminUser) => u.id)} label='管理员' size='small' + onClose={() => setAdminSearchText('')} + onOpen={() => { + setTimeout(() => { + adminInputRef.current?.focus(); + }, 100); + }} + MenuProps={{ + autoFocus: false, + }} renderValue={(selectedIds: string[]) => { if (!Array.isArray(selectedIds)) return null; const selectedAdmins = (adminData.data?.users || []).filter((user: DomainAdminUser) => @@ -230,9 +277,24 @@ const GroupList = () => { message.error('管理员移除失败'); }); } + setAdminSearchText(''); }} > - {adminData.data?.users?.map((user) => ( + e.stopPropagation()} + onClick={(e) => e.stopPropagation()} + onMouseDown={(e) => e.stopPropagation()} + sx={{ p: 1, position: 'sticky', top: -8, zIndex: 1, backgroundColor: 'background.paper' }} + > + setAdminSearchText(e.target.value)} + /> + + {filteredSelectAdmins?.map((user) => ( {(admins.some((u: DomainAdminUser) => { return u.id === user.id