@@ -21,12 +21,18 @@ import {
2121 Container ,
2222 Autocomplete ,
2323 FormHelperText ,
24+ Checkbox
2425} from "@mui/material" ;
2526
2627import { Formik } from "formik" ;
2728import * as Yup from "yup" ;
2829import { defaultConfig , typeConfig } from "../type/Config" ; //typeConfig
2930import { createFilterOptions } from "@mui/material/Autocomplete" ;
31+ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank' ;
32+ import CheckBoxIcon from '@mui/icons-material/CheckBox' ;
33+
34+ const icon = < CheckBoxOutlineBlankIcon fontSize = "small" /> ;
35+ const checkedIcon = < CheckBoxIcon fontSize = "small" /> ;
3036
3137const filter = createFilterOptions ( ) ;
3238const validationSchema = Yup . object ( ) . shape ( {
@@ -41,7 +47,7 @@ const validationSchema = Yup.object().shape({
4147 models : Yup . array ( ) . min ( 1 , "模型 不能为空" ) ,
4248 groups : Yup . array ( ) . min ( 1 , "用户组 不能为空" ) ,
4349 base_url : Yup . string ( ) . when ( "type" , {
44- is : ( value ) => [ 3 , 24 , 8 ] . includes ( value ) ,
50+ is : ( value ) => [ 3 , 8 ] . includes ( value ) ,
4551 then : Yup . string ( ) . required ( "渠道API地址 不能为空" ) , // base_url 是必需的
4652 otherwise : Yup . string ( ) , // 在其他情况下,base_url 可以是任意字符串
4753 } ) ,
@@ -144,8 +150,23 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
144150 const fetchModels = async ( ) => {
145151 try {
146152 let res = await API . get ( `/api/channel/models` ) ;
153+ const { data } = res . data ;
154+ data . forEach ( item => {
155+ if ( ! item . owned_by ) {
156+ item . owned_by = "未知" ;
157+ }
158+ } ) ;
159+ // 先对data排序
160+ data . sort ( ( a , b ) => {
161+ const ownedByComparison = a . owned_by . localeCompare ( b . owned_by ) ;
162+ if ( ownedByComparison === 0 ) {
163+ return a . id . localeCompare ( b . id ) ;
164+ }
165+ return ownedByComparison ;
166+ } ) ;
167+
147168 setModelOptions (
148- res . data . data . map ( ( model ) => {
169+ data . map ( ( model ) => {
149170 return {
150171 id : model . id ,
151172 group : model . owned_by ,
@@ -237,6 +258,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
237258 2
238259 ) ;
239260 }
261+ data . base_url = data . base_url ?? '' ;
240262 data . is_edit = true ;
241263 initChannel ( data . type ) ;
242264 setInitialInput ( data ) ;
@@ -248,12 +270,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
248270 useEffect ( ( ) => {
249271 fetchGroups ( ) . then ( ) ;
250272 fetchModels ( ) . then ( ) ;
273+ } , [ ] ) ;
274+
275+ useEffect ( ( ) => {
251276 if ( channelId ) {
252277 loadChannel ( ) . then ( ) ;
253278 } else {
254279 initChannel ( 1 ) ;
255280 setInitialInput ( { ...defaultConfig . input , is_edit : false } ) ;
256281 }
282+ // eslint-disable-next-line react-hooks/exhaustive-deps
257283 } , [ channelId ] ) ;
258284
259285 return (
@@ -489,7 +515,8 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
489515 handleChange ( event ) ;
490516 } }
491517 onBlur = { handleBlur }
492- filterSelectedOptions
518+ // filterSelectedOptions
519+ disableCloseOnSelect
493520 renderInput = { ( params ) => (
494521 < TextField
495522 { ...params }
@@ -522,6 +549,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
522549 }
523550 return filtered ;
524551 } }
552+ renderOption = { ( props , option , { selected } ) => (
553+ < li { ...props } >
554+ < Checkbox icon = { icon } checkedIcon = { checkedIcon } style = { { marginRight : 8 } } checked = { selected } />
555+ { option . id }
556+ </ li >
557+ ) }
525558 />
526559 { errors . models ? (
527560 < FormHelperText error id = "helper-tex-channel-models-label" >
0 commit comments