Browse Source

refactor(ratio): move advanced ratios to edit modal in unset models page

- Remove advanced ratio columns from the table
- Add 'advanced ratios' button in action column
- Add edit modal with Form.InputNumber fields (same as visual editor)
- Table stays clean, advanced settings only visible on click

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
master
fengsilin 1 week ago
parent
commit
182ab5ff83
1 changed files with 97 additions and 66 deletions
  1. +97
    -66
      web/src/pages/Setting/Ratio/ModelRationNotSetEditor.jsx

+ 97
- 66
web/src/pages/Setting/Ratio/ModelRationNotSetEditor.jsx View File

@@ -57,6 +57,9 @@ export default function ModelRatioNotSetEditor(props) {
const [batchCompletionRatioValue, setBatchCompletionRatioValue] =
useState('');
const addFormRef = useRef(null);
const editFormRef = useRef(null);
const [editVisible, setEditVisible] = useState(false);
const [editRecord, setEditRecord] = useState(null);
const { Text } = Typography;
// 定义可选的每页显示条数
const pageSizeOptions = [10, 20, 50, 100];
@@ -281,72 +284,19 @@ export default function ModelRatioNotSetEditor(props) {
),
},
{
title: t('缓存读取倍率'),
dataIndex: 'cacheRatio',
key: 'cacheRatio',
render: (text, record) => (
<Input
value={text}
placeholder={t('全局默认值')}
disabled={record.price !== ''}
onChange={(value) => updateModel(record.name, 'cacheRatio', value)}
/>
),
},
{
title: t('缓存创建倍率(5分钟)'),
dataIndex: 'cacheCreationRatio',
key: 'cacheCreationRatio',
render: (text, record) => (
<Input
value={text}
placeholder={t('全局默认值')}
disabled={record.price !== ''}
onChange={(value) =>
updateModel(record.name, 'cacheCreationRatio', value)
}
/>
),
},
{
title: t('图片倍率'),
dataIndex: 'imageRatio',
key: 'imageRatio',
render: (text, record) => (
<Input
value={text}
placeholder={t('全局默认值')}
disabled={record.price !== ''}
onChange={(value) => updateModel(record.name, 'imageRatio', value)}
/>
),
},
{
title: t('音频输入倍率'),
dataIndex: 'audioRatio',
key: 'audioRatio',
render: (text, record) => (
<Input
value={text}
placeholder={t('全局默认值')}
disabled={record.price !== ''}
onChange={(value) => updateModel(record.name, 'audioRatio', value)}
/>
),
},
{
title: t('音频输出倍率'),
dataIndex: 'audioCompletionRatio',
key: 'audioCompletionRatio',
render: (text, record) => (
<Input
value={text}
placeholder={t('全局默认值')}
disabled={record.price !== ''}
onChange={(value) =>
updateModel(record.name, 'audioCompletionRatio', value)
}
/>
title: t('操作'),
key: 'action',
render: (_, record) => (
<Button
size='small'
icon={<IconBolt />}
onClick={() => {
setEditRecord(record);
setEditVisible(true);
}}
>
{t('高级比例')}
</Button>
),
},
];
@@ -764,6 +714,87 @@ export default function ModelRatioNotSetEditor(props) {
</div>
</Form>
</Modal>

{/* 高级比例编辑弹窗 */}
<Modal
title={t('高级比例设置') + ' - ' + (editRecord?.name || '')}
visible={editVisible}
onCancel={() => {
setEditVisible(false);
setEditRecord(null);
}}
onOk={() => {
if (editRecord && editFormRef.current) {
const formValues = editFormRef.current.getValues();
setModels((prev) =>
prev.map((model) => {
if (model.name !== editRecord.name) return model;
return {
...model,
cacheRatio: formValues.cacheRatio != null ? formValues.cacheRatio : model.cacheRatio,
cacheCreationRatio: formValues.cacheCreationRatio != null ? formValues.cacheCreationRatio : model.cacheCreationRatio,
imageRatio: formValues.imageRatio != null ? formValues.imageRatio : model.imageRatio,
audioRatio: formValues.audioRatio != null ? formValues.audioRatio : model.audioRatio,
audioCompletionRatio: formValues.audioCompletionRatio != null ? formValues.audioCompletionRatio : model.audioCompletionRatio,
};
}),
);
setEditVisible(false);
setEditRecord(null);
showSuccess(t('更新成功'));
}
}}
>
<Form
key={editRecord?.name || 'empty'}
getFormApi={(api) => (editFormRef.current = api)}
initValues={{
cacheRatio: editRecord?.cacheRatio ?? '',
cacheCreationRatio: editRecord?.cacheCreationRatio ?? '',
imageRatio: editRecord?.imageRatio ?? '',
audioRatio: editRecord?.audioRatio ?? '',
audioCompletionRatio: editRecord?.audioCompletionRatio ?? '',
}}
>
<Form.InputNumber
field='cacheRatio'
label={t('缓存读取倍率')}
min={0}
step={0.01}
placeholder={t('全局默认值(1.0)')}
extraText={t('缓存命中时输入价格的倍率。0.5 = 缓存命中的 token 按输入价格的一半计费,留空使用全局默认值 1.0')}
/>
<Form.InputNumber
field='cacheCreationRatio'
label={t('缓存创建倍率(5分钟)')}
min={0}
step={0.01}
placeholder={t('全局默认值(1.25)')}
extraText={t('写入缓存的 token 按此倍率 × 输入价格计费。默认 1.25(5分钟 TTL);超过 1 小时自动按 1.6x 计费,留空使用全局默认值')}
/>
<Form.InputNumber
field='imageRatio'
label={t('图片倍率')}
min={0}
step={0.01}
placeholder={t('全局默认值')}
/>
<Form.InputNumber
field='audioRatio'
label={t('音频输入倍率')}
min={0}
step={0.01}
placeholder={t('全局默认值')}
/>
<Form.InputNumber
field='audioCompletionRatio'
label={t('音频输出倍率')}
min={0}
step={0.01}
placeholder={t('全局默认值')}
/>
</Form>
</Modal>
</>
);
}

Loading…
Cancel
Save