fix:用户列表编辑多次改变选择选项不会收起

src/frontend/src/components/bs-comp/sheets/TaggingSheet.tsx

@@ -0,0 +1,47 @@
+import {
+    Sheet,
+    SheetContent,
+    SheetTitle,
+    SheetTrigger,
+} from "../../bs-ui/sheet";
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+
+export default function TaggingSheet({children}) {
+    const buttons = [
+        {id:'01',name:'Button01'},
+        {id:'02',name:'Button02'},
+        {id:'03',name:'Button03'},
+    ]
+
+    return <Sheet>
+        <SheetTrigger asChild>{children}</SheetTrigger>
+        <SheetContent className="bg-gray-100 sm:min-w-[800px]">
+            <SheetTitle>给助手打标签</SheetTitle>
+            <div className="w-full h-full grid grid-cols-[80%,20%]">
+                <div className="bg-slate-500">
+
+                </div>
+                <div className="bg-slate-300">
+                    <DragDropContext onDragEnd={() => console.log('-------------')}>
+                        <Droppable droppableId={'list'}>
+                            {(provided) => (
+                                <div {...provided.droppableProps} ref={provided.innerRef}>
+                                    {buttons.map((b,index) => (
+                                        <Draggable key={'drag' + b.id} draggableId={'drag' + b.id} index={index}>
+                                            {(provided) => (
+                                                <div ref={provided.innerRef} {...provided.draggableProps} 
+                                                {...provided.dragHandleProps}>
+                                                {b.name}
+                                                </div>
+                                        )}
+                                    </Draggable>
+                                    ))}
+                                </div>
+                            )}
+                        </Droppable>
+                    </DragDropContext>
+                </div>
+            </div>
+        </SheetContent>
+    </Sheet>
+}

src/frontend/src/components/bs-ui/select/select.tsx

@@ -0,0 +1,44 @@
+import React, { ChangeEvent } from "react"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/bs-ui/select";
+import { SearchInput } from "../input";
+
+interface SelectSearchProps {
+    value: string,
+    options: {label: string, value: string}[],
+    selectPlaceholder?:string,
+    inputPlaceholder?:string,
+    onOpenChange?: (open:boolean) => void,
+    onValueChange: (value: string) => void,
+    onChange: (e:ChangeEvent<HTMLInputElement>) => void,
+    selectClass?: string,
+    contentClass?: string
+}
+
+const SelectSearch: React.FC<SelectSearchProps> = ({
+    value,
+    options,
+    selectPlaceholder = '',
+    inputPlaceholder = '',
+    onOpenChange,
+    onValueChange,
+    onChange,
+    selectClass = '',
+    contentClass = ''
+}) => {
+    return <Select value={value} onOpenChange={(open) => onOpenChange?.(open)} onValueChange={(v) => onValueChange(v)}>
+        <SelectTrigger className={selectClass}>
+            <SelectValue placeholder={selectPlaceholder}/>
+        </SelectTrigger>
+        <SelectContent className={contentClass}>
+            <SearchInput inputClassName="h-8 mb-2" placeholder={inputPlaceholder} 
+            onChange={(e) => onChange(e)} onKeyDown={e => e.stopPropagation()} iconClassName="w-4 h-4" />
+            <SelectGroup>
+                {options.map(el => (
+                    <SelectItem key={el.value} value={el.value}>{el.label}</SelectItem>
+                ))}
+            </SelectGroup>
+        </SelectContent>
+    </Select>
+}
+
+export default React.memo(SelectSearch)

src/frontend/src/pages/SkillPage/components/editAssistant/Setting.tsx

@@ -32,6 +32,7 @@ import ModelSelect from "./ModelSelect";
 import Temperature from "./Temperature";
 import { locationContext } from "@/contexts/locationContext";
 import { useContext } from "react";
+import TaggingSheet from "@/components/bs-comp/sheets/TaggingSheet";
 
 export default function Setting() {
   const { t } = useTranslation();
@@ -303,6 +304,12 @@ export default function Setting() {
             </div>
           </AccordionContent>
         </AccordionItem>
+        <TaggingSheet>
+          <PlusIcon
+            className="mr-2 text-primary hover:text-primary/80"
+            onClick={(e) => e.stopPropagation()}
+            ></PlusIcon>
+        </TaggingSheet>
       </Accordion>
     </div>
   );

src/frontend/src/pages/SystemPage/components/Roles.tsx

@@ -1,7 +1,6 @@
 import { PlusIcon } from "@/components/bs-icons/plus";
 import { bsConfirm } from "@/components/bs-ui/alertDialog/useConfirm";
 import { Label } from "@/components/bs-ui/label";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/bs-ui/select";
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "../../../components/bs-ui/button";
@@ -19,6 +18,7 @@ import { delRoleApi, getRolesByGroupApi, getUserGroupsApi } from "../../../contr
 import { captureAndAlertRequestErrorHoc } from "../../../controllers/request";
 import { ROLE } from "../../../types/api/user";
 import EditRole from "./EditRole";
+import SelectSearch from "@/components/bs-ui/select/select"
 
 interface State {
     roles: ROLE[];
@@ -71,7 +71,7 @@ export default function Roles() {
             inputDom.value = '';
         }
         try {
-            const data: any = await getRolesByGroupApi('', [state.group]);
+            const data:any = await getRolesByGroupApi('', [state.group]);
             dispatch({ type: 'SET_ROLES', payload: data });
             allRolesRef.current = data;
         } catch (error) {
@@ -80,7 +80,7 @@ export default function Roles() {
     }, [state.group]);
 
     useEffect(() => {
-        getUserGroupsApi().then((res: any) => {
+        getUserGroupsApi().then((res:any) => {
             const groups = res.records.map(ug => ({ label: ug.group_name, value: ug.id }))
             // 获取最近修改用户组
             dispatch({ type: 'SET_GROUP', payload: groups[0].value });
@@ -142,26 +142,17 @@ export default function Roles() {
                 <div className="flex justify-between">
                     <div className="flex items-center">
                         <Label>{t('system.currentGroup')}</Label>
-                        <Select value={state.group}
-                            onOpenChange={(open) => {
-                                !open && setKeyWord('')
-                            }}
-                            onValueChange={(value) =>
-                                dispatch({ type: 'SET_GROUP', payload: value })
-                            }>
-                            <SelectTrigger className="w-[180px] inline-flex ml-2">
-                                <SelectValue placeholder={t('system.defaultGroup')} />
-                            </SelectTrigger>
-                            <SelectContent className="max-w-[180px] break-all">
-                                <SearchInput inputClassName="h-8 mb-2" placeholder={t('log.selectUserGroup')}
-                                    onChange={e => setKeyWord(e.target.value)} onKeyDown={e => e.stopPropagation()} iconClassName="w-4 h-4" />
-                                <SelectGroup>
-                                    {options.map(el => (
-                                        <SelectItem key={el.value} value={el.value}>{el.label}</SelectItem>
-                                    ))}
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
+                        <SelectSearch value={state.group} options={options} selectPlaceholder={t('system.defaultGroup')} 
+                        inputPlaceholder={t('log.selectUserGroup')}
+                        selectClass="w-[180px] inline-flex ml-2" contentClass="max-w-[180px] break-all"
+                        onOpenChange={(open) => {
+                            !open && setKeyWord('')
+                        }}
+                        onValueChange={(value) => {
+                            dispatch({ type: 'SET_GROUP', payload: value})
+                        }}
+                        onChange={e => setKeyWord(e.target.value)}
+                        />
                     </div>
                     <div className="flex gap-6 items-center justify-between">
                         <div className="w-[180px] relative">
@@ -187,7 +178,7 @@ export default function Roles() {
                                 <TableCell className="font-medium">{el.role_name}</TableCell>
                                 <TableCell>{el.create_time.replace('T', ' ')}</TableCell>
                                 <TableCell className="text-right">
-                                    <Button variant="link" disabled={el.id === 1} onClick={() => dispatch({ type: 'SET_ROLE', payload: el })} className="px-0 pl-6">{t('edit')}</Button>
+                                    <Button variant="link" onClick={() => dispatch({ type: 'SET_ROLE', payload: el })} className="px-0 pl-6">{t('edit')}</Button>
                                     <Button variant="link" disabled={[1, 2].includes(el.id)} onClick={() => handleDelete(el)} className="text-red-500 px-0 pl-6">{t('delete')}</Button>
                                 </TableCell>
                             </TableRow>

src/frontend/src/pages/SystemPage/components/UserRoleItem.tsx

@@ -2,33 +2,46 @@ import { DelIcon } from "@/components/bs-icons";
 import { Button } from "@/components/bs-ui/button";
 import MultiSelect from "@/components/bs-ui/select/multi";
 import { getRolesByGroupApi, getUserGroupsApi } from "@/controllers/API/user";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import SelectSearch from "@/components/bs-ui/select/select"
 
 export default function UserRoleItem({ showDel, groupId, selectedRoles, onDelete, onChange }:
     { showDel: boolean, groupId: null | string, selectedRoles: any[], onDelete: any, onChange: any }) {
     const { t } = useTranslation()
 
     // 用户组
     const [groups, setGroups] = useState([])
+    const groupsRef = useRef([])
     const [userGroupSelected, setUserGroupSelected] = useState(groupId ? [groupId] : [])
-    useEffect(() => {
-        // 用户组option列表
+    const loadGroups = () => {
         getUserGroupsApi().then((res: any) => {
-            setGroups(res.records.map((ug) => {
+            const groups = res.records.map((ug) => {
                 return {
                     label: ug.group_name,
                     value: ug.id.toString()
                 }
-            }))
+            })
+            setGroups(groups)
+            groupsRef.current = groups
         })
+    }
+    useEffect(() => {
+        // 用户组option列表
+        loadGroups()
     }, [])
 
-    const handleSelectGroup = (values) => {
-        onChange(values, [])
-        setUserGroupSelected(values);
+    const handleSelectGroup = (value) => { //单选之后value要改成数组传出去
+        onChange([value], [])
+        setUserGroupSelected([value]);
         setSelected([])
     }
+    const handleSearch = (e) => {
+        const keyword = e.target.value
+        const newGroups = groupsRef.current.filter(g => g.label.toUpperCase().includes(keyword.toUpperCase()) 
+        || g.value === userGroupSelected[0])
+        setGroups(newGroups)
+    }
 
     // 角色
     const [roles, setRoles] = useState<any[]>([])
@@ -53,14 +66,14 @@ export default function UserRoleItem({ showDel, groupId, selectedRoles, onDelete
     }
 
     return <div className="grid grid-cols-[44%,44%,5%] gap-4">
-        <MultiSelect
-            className="max-w-[260px] break-all"
-            value={userGroupSelected}
+        <SelectSearch contentClass="max-w-[260px] break-all" selectPlaceholder={t('system.userGroupsSel')}
+            selectClass="h-[50px]"
+            value={userGroupSelected[0]}
             options={groups}
-            placeholder={t('system.userGroupsSel')}
-            onChange={handleSelectGroup}
-        >
-        </MultiSelect>
+            onOpenChange={() => setGroups(groupsRef.current)}
+            onValueChange={handleSelectGroup}
+            onChange={handleSearch}
+        />
         <MultiSelect
             multiple
             className="max-w-[260px] break-all"