feat: load channel models from server

web/berry/src/utils/common.js

@@ -193,3 +193,29 @@ export function removeTrailingSlash(url) {
     return url;
   }
 }
+
+let channelModels = undefined;
+export async function loadChannelModels() {
+  const res = await API.get('/api/models');
+  const { success, data } = res.data;
+  if (!success) {
+    return;
+  }
+  channelModels = data;
+  localStorage.setItem('channel_models', JSON.stringify(data));
+}
+
+export function getChannelModels(type) {
+  if (channelModels !== undefined && type in channelModels) {
+    return channelModels[type];
+  }
+  let models = localStorage.getItem('channel_models');
+  if (!models) {
+    return [];
+  }
+  channelModels = JSON.parse(models);
+  if (type in channelModels) {
+    return channelModels[type];
+  }
+  return [];
+}

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

@@ -1,9 +1,9 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react';
-import { CHANNEL_OPTIONS } from "constants/ChannelConstants";
+import { CHANNEL_OPTIONS } from 'constants/ChannelConstants';
-import { useTheme } from "@mui/material/styles";
+import { useTheme } from '@mui/material/styles';
-import { API } from "utils/api";
+import { API } from 'utils/api';
-import { showError, showSuccess } from "utils/common";
+import { showError, showSuccess, getChannelModels } from 'utils/common';
 import {
   Dialog,
   DialogTitle,
@@ -22,15 +22,15 @@ import {
   Autocomplete,
   FormHelperText,
   Switch,
-  Checkbox,
+  Checkbox
-} from "@mui/material";
+} from '@mui/material';
 
-import { Formik } from "formik";
+import { Formik } from 'formik';
-import * as Yup from "yup";
+import * as Yup from 'yup';
-import { defaultConfig, typeConfig } from "../type/Config"; //typeConfig
+import { defaultConfig, typeConfig } from '../type/Config'; //typeConfig
-import { createFilterOptions } from "@mui/material/Autocomplete";
+import { createFilterOptions } from '@mui/material/Autocomplete';
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
@@ -38,38 +38,34 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 const filter = createFilterOptions();
 const validationSchema = Yup.object().shape({
   is_edit: Yup.boolean(),
-  name: Yup.string().required("名称 不能为空"),
+  name: Yup.string().required('名称 不能为空'),
-  type: Yup.number().required("渠道 不能为空"),
+  type: Yup.number().required('渠道 不能为空'),
-  key: Yup.string().when("is_edit", {
+  key: Yup.string().when('is_edit', {
     is: false,
-    then: Yup.string().required("密钥 不能为空"),
+    then: Yup.string().required('密钥 不能为空')
   }),
   other: Yup.string(),
-  models: Yup.array().min(1, "模型 不能为空"),
+  models: Yup.array().min(1, '模型 不能为空'),
-  groups: Yup.array().min(1, "用户组 不能为空"),
+  groups: Yup.array().min(1, '用户组 不能为空'),
-  base_url: Yup.string().when("type", {
+  base_url: Yup.string().when('type', {
     is: (value) => [3, 8].includes(value),
-    then: Yup.string().required("渠道API地址 不能为空"), // base_url 是必需的
+    then: Yup.string().required('渠道API地址 不能为空'), // base_url 是必需的
-    otherwise: Yup.string(), // 在其他情况下，base_url 可以是任意字符串
+    otherwise: Yup.string() // 在其他情况下，base_url 可以是任意字符串
   }),
-  model_mapping: Yup.string().test(
+  model_mapping: Yup.string().test('is-json', '必须是有效的JSON字符串', function (value) {
-    "is-json",
+    try {
-    "必须是有效的JSON字符串",
+      if (value === '' || value === null || value === undefined) {
-    function (value) {
+        return true;
-      try {
-        if (value === "" || value === null || value === undefined) {
-          return true;
-        }
-        const parsedValue = JSON.parse(value);
-        if (typeof parsedValue === "object") {
-          return true;
-        }
-      } catch (e) {
-        return false;
       }
+      const parsedValue = JSON.parse(value);
+      if (typeof parsedValue === 'object') {
+        return true;
+      }
+    } catch (e) {
       return false;
     }
-  ),
+    return false;
+  })
 });
 
 const EditModal = ({ open, channelId, onCancel, onOk }) => {
@@ -81,12 +77,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
   const [groupOptions, setGroupOptions] = useState([]);
   const [modelOptions, setModelOptions] = useState([]);
   const [batchAdd, setBatchAdd] = useState(false);
+  const [basicModels, setBasicModels] = useState([]);
 
   const initChannel = (typeValue) => {
     if (typeConfig[typeValue]?.inputLabel) {
       setInputLabel({
         ...defaultConfig.inputLabel,
-        ...typeConfig[typeValue].inputLabel,
+        ...typeConfig[typeValue].inputLabel
       });
     } else {
       setInputLabel(defaultConfig.inputLabel);
@@ -95,7 +92,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
     if (typeConfig[typeValue]?.prompt) {
       setInputPrompt({
         ...defaultConfig.prompt,
-        ...typeConfig[typeValue].prompt,
+        ...typeConfig[typeValue].prompt
       });
     } else {
       setInputPrompt(defaultConfig.prompt);
@@ -104,42 +101,14 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
     return typeConfig[typeValue]?.input;
   };
   const handleTypeChange = (setFieldValue, typeValue, values) => {
-    const newInput = initChannel(typeValue);
+    initChannel(typeValue);
-
+    let localModels = getChannelModels(typeValue);
-    if (newInput) {
+    setBasicModels(localModels);
-      Object.keys(newInput).forEach((key) => {
+    if (localModels.length > 0 && Array.isArray(values['models']) && values['models'].length == 0) {
-        if (
+      setFieldValue('models', initialModel(localModels));
-          (!Array.isArray(values[key]) &&
-            values[key] !== null &&
-            values[key] !== undefined &&
-            values[key] !== "") ||
-          (Array.isArray(values[key]) && values[key].length > 0)
-        ) {
-          return;
-        }
-
-        if (key === "models") {
-          setFieldValue(key, initialModel(newInput[key]));
-          return;
-        }
-        setFieldValue(key, newInput[key]);
-      });
     }
   };
 
-  const basicModels = (channelType) => {
-    let modelGroup =
-      typeConfig[channelType]?.modelGroup || defaultConfig.modelGroup;
-    // 循环 modelOptions，找到 modelGroup 对应的模型
-    let modelList = [];
-    modelOptions.forEach((model) => {
-      if (model.group === modelGroup) {
-        modelList.push(model);
-      }
-    });
-    return modelList;
-  };
-
   const fetchGroups = async () => {
     try {
       let res = await API.get(`/api/group/`);
@@ -155,7 +124,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
       const { data } = res.data;
       data.forEach((item) => {
         if (!item.owned_by) {
-          item.owned_by = "未知";
+          item.owned_by = '未知';
         }
       });
       // 先对data排序
@@ -171,7 +140,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
         data.map((model) => {
           return {
             id: model.id,
-            group: model.owned_by,
+            group: model.owned_by
           };
         })
       );
@@ -182,23 +151,23 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
 
   const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
     setSubmitting(true);
-    if (values.base_url && values.base_url.endsWith("/")) {
+    if (values.base_url && values.base_url.endsWith('/')) {
       values.base_url = values.base_url.slice(0, values.base_url.length - 1);
     }
-    if (values.type === 3 && values.other === "") {
+    if (values.type === 3 && values.other === '') {
-      values.other = "2023-09-01-preview";
+      values.other = '2023-09-01-preview';
     }
-    if (values.type === 18 && values.other === "") {
+    if (values.type === 18 && values.other === '') {
-      values.other = "v2.1";
+      values.other = 'v2.1';
     }
     let res;
-    const modelsStr = values.models.map((model) => model.id).join(",");
+    const modelsStr = values.models.map((model) => model.id).join(',');
-    values.group = values.groups.join(",");
+    values.group = values.groups.join(',');
     if (channelId) {
       res = await API.put(`/api/channel/`, {
         ...values,
         id: parseInt(channelId),
-        models: modelsStr,
+        models: modelsStr
       });
     } else {
       res = await API.post(`/api/channel/`, { ...values, models: modelsStr });
@@ -206,9 +175,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
     const { success, message } = res.data;
     if (success) {
       if (channelId) {
-        showSuccess("渠道更新成功！");
+        showSuccess('渠道更新成功！');
       } else {
-        showSuccess("渠道创建成功！");
+        showSuccess('渠道创建成功！');
       }
       setSubmitting(false);
       setStatus({ success: true });
@@ -226,15 +195,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
     }
 
     // 如果 channelModel 是一个字符串
-    if (typeof channelModel === "string") {
+    if (typeof channelModel === 'string') {
-      channelModel = channelModel.split(",");
+      channelModel = channelModel.split(',');
     }
     let modelList = channelModel.map((model) => {
       const modelOption = modelOptions.find((option) => option.id === model);
       if (modelOption) {
         return modelOption;
       }
-      return { id: model, group: "自定义：点击或回车输入" };
+      return { id: model, group: '自定义：点击或回车输入' };
     });
     return modelList;
   }
@@ -243,24 +212,20 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
     let res = await API.get(`/api/channel/${channelId}`);
     const { success, message, data } = res.data;
     if (success) {
-      if (data.models === "") {
+      if (data.models === '') {
         data.models = [];
       } else {
         data.models = initialModel(data.models);
       }
-      if (data.group === "") {
+      if (data.group === '') {
         data.groups = [];
       } else {
-        data.groups = data.group.split(",");
+        data.groups = data.group.split(',');
       }
-      if (data.model_mapping !== "") {
+      if (data.model_mapping !== '') {
-        data.model_mapping = JSON.stringify(
+        data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
-          JSON.parse(data.model_mapping),
-          null,
-          2
-        );
       }
-      data.base_url = data.base_url ?? "";
+      data.base_url = data.base_url ?? '';
       data.is_edit = true;
       initChannel(data.type);
       setInitialInput(data);
@@ -286,45 +251,25 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
   }, [channelId]);
 
   return (
-    <Dialog open={open} onClose={onCancel} fullWidth maxWidth={"md"}>
+    <Dialog open={open} onClose={onCancel} fullWidth maxWidth={'md'}>
       <DialogTitle
         sx={{
-          margin: "0px",
+          margin: '0px',
           fontWeight: 700,
-          lineHeight: "1.55556",
+          lineHeight: '1.55556',
-          padding: "24px",
+          padding: '24px',
-          fontSize: "1.125rem",
+          fontSize: '1.125rem'
         }}
       >
-        {channelId ? "编辑渠道" : "新建渠道"}
+        {channelId ? '编辑渠道' : '新建渠道'}
       </DialogTitle>
       <Divider />
       <DialogContent>
-        <Formik
+        <Formik initialValues={initialInput} enableReinitialize validationSchema={validationSchema} onSubmit={submit}>
-          initialValues={initialInput}
+          {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values, setFieldValue }) => (
-          enableReinitialize
-          validationSchema={validationSchema}
-          onSubmit={submit}
-        >
-          {({
-            errors,
-            handleBlur,
-            handleChange,
-            handleSubmit,
-            isSubmitting,
-            touched,
-            values,
-            setFieldValue,
-          }) => (
             <form noValidate onSubmit={handleSubmit}>
-              <FormControl
+              <FormControl fullWidth error={Boolean(touched.type && errors.type)} sx={{ ...theme.typography.otherInput }}>
-                fullWidth
+                <InputLabel htmlFor="channel-type-label">{inputLabel.type}</InputLabel>
-                error={Boolean(touched.type && errors.type)}
-                sx={{ ...theme.typography.otherInput }}
-              >
-                <InputLabel htmlFor="channel-type-label">
-                  {inputLabel.type}
-                </InputLabel>
                 <Select
                   id="channel-type-label"
                   label={inputLabel.type}
@@ -338,9 +283,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                   MenuProps={{
                     PaperProps: {
                       style: {
-                        maxHeight: 200,
+                        maxHeight: 200
-                      },
+                      }
-                    },
+                    }
                   }}
                 >
                   {Object.values(CHANNEL_OPTIONS)
@@ -360,21 +305,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     {errors.type}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-type-label">
+                  <FormHelperText id="helper-tex-channel-type-label"> {inputPrompt.type} </FormHelperText>
-                    {" "}
-                    {inputPrompt.type}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
 
-              <FormControl
+              <FormControl fullWidth error={Boolean(touched.name && errors.name)} sx={{ ...theme.typography.otherInput }}>
-                fullWidth
+                <InputLabel htmlFor="channel-name-label">{inputLabel.name}</InputLabel>
-                error={Boolean(touched.name && errors.name)}
-                sx={{ ...theme.typography.otherInput }}
-              >
-                <InputLabel htmlFor="channel-name-label">
-                  {inputLabel.name}
-                </InputLabel>
                 <OutlinedInput
                   id="channel-name-label"
                   label={inputLabel.name}
@@ -383,7 +319,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                   name="name"
                   onBlur={handleBlur}
                   onChange={handleChange}
-                  inputProps={{ autoComplete: "name" }}
+                  inputProps={{ autoComplete: 'name' }}
                   aria-describedby="helper-text-channel-name-label"
                 />
                 {touched.name && errors.name ? (
@@ -391,21 +327,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     {errors.name}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-name-label">
+                  <FormHelperText id="helper-tex-channel-name-label"> {inputPrompt.name} </FormHelperText>
-                    {" "}
-                    {inputPrompt.name}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
 
-              <FormControl
+              <FormControl fullWidth error={Boolean(touched.base_url && errors.base_url)} sx={{ ...theme.typography.otherInput }}>
-                fullWidth
+                <InputLabel htmlFor="channel-base_url-label">{inputLabel.base_url}</InputLabel>
-                error={Boolean(touched.base_url && errors.base_url)}
-                sx={{ ...theme.typography.otherInput }}
-              >
-                <InputLabel htmlFor="channel-base_url-label">
-                  {inputLabel.base_url}
-                </InputLabel>
                 <OutlinedInput
                   id="channel-base_url-label"
                   label={inputLabel.base_url}
@@ -422,22 +349,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     {errors.base_url}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-base_url-label">
+                  <FormHelperText id="helper-tex-channel-base_url-label"> {inputPrompt.base_url} </FormHelperText>
-                    {" "}
-                    {inputPrompt.base_url}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
 
               {inputPrompt.other && (
-                <FormControl
+                <FormControl fullWidth error={Boolean(touched.other && errors.other)} sx={{ ...theme.typography.otherInput }}>
-                  fullWidth
+                  <InputLabel htmlFor="channel-other-label">{inputLabel.other}</InputLabel>
-                  error={Boolean(touched.other && errors.other)}
-                  sx={{ ...theme.typography.otherInput }}
-                >
-                  <InputLabel htmlFor="channel-other-label">
-                    {inputLabel.other}
-                  </InputLabel>
                   <OutlinedInput
                     id="channel-other-label"
                     label={inputLabel.other}
@@ -454,10 +372,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                       {errors.other}
                     </FormHelperText>
                   ) : (
-                    <FormHelperText id="helper-tex-channel-other-label">
+                    <FormHelperText id="helper-tex-channel-other-label"> {inputPrompt.other} </FormHelperText>
-                      {" "}
-                      {inputPrompt.other}{" "}
-                    </FormHelperText>
                   )}
                 </FormControl>
               )}
@@ -471,22 +386,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                   onChange={(e, value) => {
                     const event = {
                       target: {
-                        name: "groups",
+                        name: 'groups',
-                        value: value,
+                        value: value
-                      },
+                      }
                     };
                     handleChange(event);
                   }}
                   onBlur={handleBlur}
                   filterSelectedOptions
-                  renderInput={(params) => (
+                  renderInput={(params) => <TextField {...params} name="groups" error={Boolean(errors.groups)} label={inputLabel.groups} />}
-                    <TextField
-                      {...params}
-                      name="groups"
-                      error={Boolean(errors.groups)}
-                      label={inputLabel.groups}
-                    />
-                  )}
                   aria-describedby="helper-text-channel-groups-label"
                 />
                 {errors.groups ? (
@@ -494,10 +402,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     {errors.groups}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-groups-label">
+                  <FormHelperText id="helper-tex-channel-groups-label"> {inputPrompt.groups} </FormHelperText>
-                    {" "}
-                    {inputPrompt.groups}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
 
@@ -511,30 +416,19 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                   onChange={(e, value) => {
                     const event = {
                       target: {
-                        name: "models",
+                        name: 'models',
-                        value: value.map((item) =>
+                        value: value.map((item) => (typeof item === 'string' ? { id: item, group: '自定义：点击或回车输入' } : item))
-                          typeof item === "string"
+                      }
-                            ? { id: item, group: "自定义：点击或回车输入" }
-                            : item
-                        ),
-                      },
                     };
                     handleChange(event);
                   }}
                   onBlur={handleBlur}
                   // filterSelectedOptions
                   disableCloseOnSelect
-                  renderInput={(params) => (
+                  renderInput={(params) => <TextField {...params} name="models" error={Boolean(errors.models)} label={inputLabel.models} />}
-                    <TextField
-                      {...params}
-                      name="models"
-                      error={Boolean(errors.models)}
-                      label={inputLabel.models}
-                    />
-                  )}
                   groupBy={(option) => option.group}
                   getOptionLabel={(option) => {
-                    if (typeof option === "string") {
+                    if (typeof option === 'string') {
                       return option;
                     }
                     if (option.inputValue) {
@@ -545,25 +439,18 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                   filterOptions={(options, params) => {
                     const filtered = filter(options, params);
                     const { inputValue } = params;
-                    const isExisting = options.some(
+                    const isExisting = options.some((option) => inputValue === option.id);
-                      (option) => inputValue === option.id
+                    if (inputValue !== '' && !isExisting) {
-                    );
-                    if (inputValue !== "" && !isExisting) {
                       filtered.push({
                         id: inputValue,
-                        group: "自定义：点击或回车输入",
+                        group: '自定义：点击或回车输入'
                       });
                     }
                     return filtered;
                   }}
                   renderOption={(props, option, { selected }) => (
                     <li {...props}>
-                      <Checkbox
+                      <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
-                        icon={icon}
-                        checkedIcon={checkedIcon}
-                        style={{ marginRight: 8 }}
-                        checked={selected}
-                      />
                       {option.id}
                     </li>
                   )}
@@ -573,47 +460,35 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     {errors.models}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-models-label">
+                  <FormHelperText id="helper-tex-channel-models-label"> {inputPrompt.models} </FormHelperText>
-                    {" "}
-                    {inputPrompt.models}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
               <Container
                 sx={{
-                  textAlign: "right",
+                  textAlign: 'right'
                 }}
               >
-                <ButtonGroup
+                <ButtonGroup variant="outlined" aria-label="small outlined primary button group">
-                  variant="outlined"
-                  aria-label="small outlined primary button group"
-                >
                   <Button
                     onClick={() => {
-                      setFieldValue("models", basicModels(values.type));
+                      setFieldValue('models', initialModel(basicModels));
                     }}
                   >
-                    填入渠道支持模型
+                    填入相关模型
                   </Button>
                   <Button
                     onClick={() => {
-                      setFieldValue("models", modelOptions);
+                      setFieldValue('models', modelOptions);
                     }}
                   >
                     填入所有模型
                   </Button>
                 </ButtonGroup>
               </Container>
-              <FormControl
+              <FormControl fullWidth error={Boolean(touched.key && errors.key)} sx={{ ...theme.typography.otherInput }}>
-                fullWidth
-                error={Boolean(touched.key && errors.key)}
-                sx={{ ...theme.typography.otherInput }}
-              >
                 {!batchAdd ? (
                   <>
-                    <InputLabel htmlFor="channel-key-label">
+                    <InputLabel htmlFor="channel-key-label">{inputLabel.key}</InputLabel>
-                      {inputLabel.key}
-                    </InputLabel>
                     <OutlinedInput
                       id="channel-key-label"
                       label={inputLabel.key}
@@ -637,7 +512,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     onChange={handleChange}
                     aria-describedby="helper-text-channel-key-label"
                     minRows={5}
-                    placeholder={inputPrompt.key + "，一行一个密钥"}
+                    placeholder={inputPrompt.key + '，一行一个密钥'}
                   />
                 )}
 
@@ -646,30 +521,20 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                     {errors.key}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-key-label">
+                  <FormHelperText id="helper-tex-channel-key-label"> {inputPrompt.key} </FormHelperText>
-                    {" "}
-                    {inputPrompt.key}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
               {channelId === 0 && (
                 <Container
                   sx={{
-                    textAlign: "right",
+                    textAlign: 'right'
                   }}
                 >
-                  <Switch
+                  <Switch checked={batchAdd} onChange={(e) => setBatchAdd(e.target.checked)} />
-                    checked={batchAdd}
-                    onChange={(e) => setBatchAdd(e.target.checked)}
-                  />
                   批量添加
                 </Container>
               )}
-              <FormControl
+              <FormControl fullWidth error={Boolean(touched.model_mapping && errors.model_mapping)} sx={{ ...theme.typography.otherInput }}>
-                fullWidth
-                error={Boolean(touched.model_mapping && errors.model_mapping)}
-                sx={{ ...theme.typography.otherInput }}
-              >
                 {/* <InputLabel htmlFor="channel-model_mapping-label">{inputLabel.model_mapping}</InputLabel> */}
                 <TextField
                   multiline
@@ -684,28 +549,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
                   placeholder={inputPrompt.model_mapping}
                 />
                 {touched.model_mapping && errors.model_mapping ? (
-                  <FormHelperText
+                  <FormHelperText error id="helper-tex-channel-model_mapping-label">
-                    error
-                    id="helper-tex-channel-model_mapping-label"
-                  >
                     {errors.model_mapping}
                   </FormHelperText>
                 ) : (
-                  <FormHelperText id="helper-tex-channel-model_mapping-label">
+                  <FormHelperText id="helper-tex-channel-model_mapping-label"> {inputPrompt.model_mapping} </FormHelperText>
-                    {" "}
-                    {inputPrompt.model_mapping}{" "}
-                  </FormHelperText>
                 )}
               </FormControl>
               <DialogActions>
                 <Button onClick={onCancel}>取消</Button>
-                <Button
+                <Button disableElevation disabled={isSubmitting} type="submit" variant="contained" color="primary">
-                  disableElevation
-                  disabled={isSubmitting}
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                >
                   提交
                 </Button>
               </DialogActions>
@@ -723,5 +576,5 @@ EditModal.propTypes = {
   open: PropTypes.bool,
   channelId: PropTypes.number,
   onCancel: PropTypes.func,
-  onOk: PropTypes.func,
+  onOk: PropTypes.func
 };

web/berry/src/views/Channel/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { showError, showSuccess, showInfo } from 'utils/common';
+import { showError, showSuccess, showInfo, loadChannelModels } from 'utils/common';
 
 import { useTheme } from '@mui/material/styles';
 import Table from '@mui/material/Table';
@@ -8,7 +8,6 @@ import TableContainer from '@mui/material/TableContainer';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import TablePagination from '@mui/material/TablePagination';
 import LinearProgress from '@mui/material/LinearProgress';
-import Alert from '@mui/material/Alert';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -189,6 +188,7 @@ export default function ChannelPage() {
       .catch((reason) => {
         showError(reason);
       });
+    loadChannelModels().then();
   }, []);
 
   return (
@@ -200,7 +200,7 @@ export default function ChannelPage() {
         </Button>
       </Stack>
       <Card>
-        <Box component="form" onSubmit={searchChannels} noValidate sx={{marginTop: 2}}>
+        <Box component="form" onSubmit={searchChannels} noValidate sx={{ marginTop: 2 }}>
           <TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索渠道的 ID，名称和密钥 ...'} />
         </Box>
         <Toolbar
@@ -214,7 +214,7 @@ export default function ChannelPage() {
         >
           <Container>
             {matchUpMd ? (
-              <ButtonGroup variant="outlined" aria-label="outlined small primary button group" sx={{marginBottom: 2}}>
+              <ButtonGroup variant="outlined" aria-label="outlined small primary button group" sx={{ marginBottom: 2 }}>
                 <Button onClick={handleRefresh} startIcon={<IconRefresh width={'18px'} />}>
                   刷新
                 </Button>