Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

chore: 编辑渠道弹窗默认收起自定义参数 #430

Merged
merged 1 commit into from
Dec 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion web/src/i18n/locales/en_US.json
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,9 @@
"addModelHeader": "Add Custom Header",
"addModelMappingByJson": "Add model mapping (JSON)",
"invalidJson": "Invalid JSON",
"jsonInputLabel": "JSON object, where the key is the request model and the value is the actual forwarding model."
"jsonInputLabel": "JSON object, where the key is the request model and the value is the actual forwarding model.",
"collapse": "Collapse",
"expand": "Expand"
},
"channel_index": {
"AzureApiVersion": "Azure version number",
Expand Down
4 changes: 3 additions & 1 deletion web/src/i18n/locales/ja_JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@
"addModelHeader": "カスタムヘッダーを追加",
"addModelMappingByJson": "モデルマッピング(JSON)の追加",
"invalidJson": "無効なJSON",
"jsonInputLabel": "JSONオブジェクト、キーはリクエストモデルであり、値は実際の転送モデルです。"
"jsonInputLabel": "JSONオブジェクト、キーはリクエストモデルであり、値は実際の転送モデルです。",
"collapse": "折りたたむ",
"expand": "展開する"
},
"channel_index": {
"AzureApiVersion": "Azureのバージョン番号",
Expand Down
4 changes: 3 additions & 1 deletion web/src/i18n/locales/zh_CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,9 @@
"invalidJson": "无效的JSON",
"modelHeaderKey": "自定义Header Key",
"modelHeaderValue": "自定义Header Value",
"addModelHeader": "添加自定义Header"
"addModelHeader": "添加自定义Header",
"collapse": "收起",
"expand": "展开"
},
"token_index": {
"token": "令牌",
Expand Down
4 changes: 3 additions & 1 deletion web/src/i18n/locales/zh_HK.json
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@
"requiredKey": "密鑰 不能為空",
"requiredModels": "模型 不能為空",
"requiredName": "名稱 不能為空",
"validJson": "必須是有效的JSON字符串"
"validJson": "必須是有效的JSON字符串",
"collapse": "收起",
"expand": "展開"
},
"channel_index": {
"AzureApiVersion": "Azure 版本號",
Expand Down
121 changes: 79 additions & 42 deletions web/src/views/Channel/component/EditModal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,13 @@ import {
FormControlLabel,
Typography,
Tooltip,
Collapse,
Box,
Chip
} from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';

import { Formik } from 'formik';
import * as Yup from 'yup';
Expand Down Expand Up @@ -82,6 +86,7 @@ const EditModal = ({ open, channelId, onCancel, onOk, groupOptions, isTag }) =>
const [batchAdd, setBatchAdd] = useState(false);
const [providerModelsLoad, setProviderModelsLoad] = useState(false);
const [hasTag, setHasTag] = useState(false);
const [expanded, setExpanded] = useState(false);

const initChannel = (typeValue) => {
if (typeConfig[typeValue]?.inputLabel) {
Expand Down Expand Up @@ -917,48 +922,80 @@ const EditModal = ({ open, channelId, onCancel, onOk, groupOptions, isTag }) =>
const plugin = pluginList[values.type][pluginId];
return (
<>
<Divider sx={{ ...theme.typography.otherInput }} />
<Typography variant="h3">{customizeT(plugin.name)}</Typography>
<Typography variant="caption">{customizeT(plugin.description)}</Typography>
{Object.keys(plugin.params).map((paramId) => {
const param = plugin.params[paramId];
const name = `plugin.${pluginId}.${paramId}`;
return param.type === 'bool' ? (
<FormControl key={name} fullWidth sx={{ ...theme.typography.otherInput }}>
<FormControlLabel
key={name}
required
control={
<Switch
key={name}
name={name}
disabled={hasTag}
checked={values.plugin?.[pluginId]?.[paramId] || false}
onChange={(event) => {
setFieldValue(name, event.target.checked);
}}
/>
}
label={t('channel_edit.isEnable')}
/>
<FormHelperText id="helper-tex-channel-key-label"> {customizeT(param.description)} </FormHelperText>
</FormControl>
) : (
<FormControl key={name} fullWidth sx={{ ...theme.typography.otherInput }}>
<TextField
multiline
key={name}
name={name}
disabled={hasTag}
value={values.plugin?.[pluginId]?.[paramId] || ''}
label={customizeT(param.name)}
placeholder={customizeT(param.description)}
onChange={handleChange}
/>
<FormHelperText id="helper-tex-channel-key-label"> {customizeT(param.description)} </FormHelperText>
</FormControl>
);
})}
<Box
sx={{
border: '1px solid #e0e0e0',
borderRadius: 2,
marginTop: 2,
marginBottom: 2,
overflow: 'hidden'
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
}}
>
<Box sx={{ flex: 1 }}>
<Typography variant="h3">{customizeT(plugin.name)}</Typography>
<Typography variant="caption">{customizeT(plugin.description)}</Typography>
</Box>
<Button
onClick={() => setExpanded(!expanded)}
endIcon={expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
sx={{ textTransform: 'none', marginLeft: 2 }}
>
{expanded ? t('channel_edit.collapse') : t('channel_edit.expand')}
</Button>
</Box>

<Collapse in={expanded}>
<Box sx={{ padding: 2, marginTop: -3 }}>
{Object.keys(plugin.params).map((paramId) => {
const param = plugin.params[paramId];
const name = `plugin.${pluginId}.${paramId}`;
return param.type === 'bool' ? (
<FormControl key={name} fullWidth sx={{ ...theme.typography.otherInput }}>
<FormControlLabel
key={name}
required
control={
<Switch
key={name}
name={name}
disabled={hasTag}
checked={values.plugin?.[pluginId]?.[paramId] || false}
onChange={(event) => {
setFieldValue(name, event.target.checked);
}}
/>
}
label={t('channel_edit.isEnable')}
/>
<FormHelperText id="helper-tex-channel-key-label"> {customizeT(param.description)} </FormHelperText>
</FormControl>
) : (
<FormControl key={name} fullWidth sx={{ ...theme.typography.otherInput }}>
<TextField
multiline
key={name}
name={name}
disabled={hasTag}
value={values.plugin?.[pluginId]?.[paramId] || ''}
label={customizeT(param.name)}
placeholder={customizeT(param.description)}
onChange={handleChange}
/>
<FormHelperText id="helper-tex-channel-key-label"> {customizeT(param.description)} </FormHelperText>
</FormControl>
);
})}
</Box>
</Collapse>
</Box>
</>
);
})}
Expand Down