improve: Enhanced user experience by improving the channel selection box

web/berry/src/views/Channel/component/EditModal.js

@@ -21,12 +21,18 @@ import {
   Container,
   Autocomplete,
   FormHelperText,
+  Checkbox
 } from "@mui/material";
 
 import { Formik } from "formik";
 import * as Yup from "yup";
 import { defaultConfig, typeConfig } from "../type/Config"; //typeConfig
 import { createFilterOptions } from "@mui/material/Autocomplete";
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 const filter = createFilterOptions();
 const validationSchema = Yup.object().shape({
@@ -41,7 +47,7 @@ const validationSchema = Yup.object().shape({
   models: Yup.array().min(1, "模型 不能为空"),
   groups: Yup.array().min(1, "用户组 不能为空"),
   base_url: Yup.string().when("type", {
-    is: (value) => [3, 24, 8].includes(value),
+    is: (value) => [3, 8].includes(value),
     then: Yup.string().required("渠道API地址 不能为空"), // base_url 是必需的
     otherwise: Yup.string(), // 在其他情况下，base_url 可以是任意字符串
   }),
@@ -144,8 +150,23 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
   const fetchModels = async () => {
     try {
       let res = await API.get(`/api/channel/models`);
+      const { data } = res.data;
+      data.forEach(item => {
+        if (!item.owned_by) {
+          item.owned_by = "未知";
+        }
+      });
+      // 先对data排序
+      data.sort((a, b) => {
+        const ownedByComparison = a.owned_by.localeCompare(b.owned_by);
+        if (ownedByComparison === 0) {
+          return a.id.localeCompare(b.id);
+        }
+        return ownedByComparison;
+      });
+
       setModelOptions(
-        res.data.data.map((model) => {
+         data.map((model) => {
           return {
             id: model.id,
             group: model.owned_by,
@@ -237,6 +258,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
           2
         );
       }
+      data.base_url = data.base_url ?? '';
       data.is_edit = true;
       initChannel(data.type);
       setInitialInput(data);
@@ -248,12 +270,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
   useEffect(() => {
     fetchGroups().then();
     fetchModels().then();
+  }, []);
+
+  useEffect(() => {
     if (channelId) {
       loadChannel().then();
     } else {
       initChannel(1);
       setInitialInput({ ...defaultConfig.input, is_edit: false });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channelId]);
 
   return (
@@ -489,7 +515,8 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     handleChange(event);
                   }}
                   onBlur={handleBlur}
-                  filterSelectedOptions
+                  // filterSelectedOptions
+                  disableCloseOnSelect
                   renderInput={(params) => (
                     <TextField
                       {...params}
@@ -522,6 +549,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     }
                     return filtered;
                   }}
+                  renderOption={(props, option, { selected }) => (
+                    <li {...props}>
+                      <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
+                      {option.id}
+                    </li>
+                  )}
                 />
                 {errors.models ? (
                   <FormHelperText error id="helper-tex-channel-models-label">