feat: Enhance Operation Settings with Group and Model Ratio Management

- Added new components for GroupRatioSettings and ModelRatioSettings to manage group and model ratios.
- Integrated tabs in OperationSetting to switch between model and visual ratio settings.
- Updated translations for new settings and improved existing ones in the English locale file.
- Refactored ModelSettingsVisualEditor to support dynamic pricing and ratio configurations.

This update improves the user interface for managing operational settings, enhancing usability and localization support.

web/src/pages/Setting/Operation/GroupRatioSettings.js

@@ -0,0 +1,131 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import {
+  compareObjects,
+  API,
+  showError,
+  showSuccess,
+  showWarning,
+  verifyJSON,
+} from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+
+export default function GroupRatioSettings(props) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState({
+    GroupRatio: '',
+    UserUsableGroups: ''
+  });
+  const refForm = useRef();
+  const [inputsRow, setInputsRow] = useState(inputs);
+
+  async function onSubmit() {
+    try {
+      await refForm.current.validate().then(() => {
+        const updateArray = compareObjects(inputs, inputsRow);
+        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+        
+        const requestQueue = updateArray.map((item) => {
+          const value = typeof inputs[item.key] === 'boolean' 
+            ? String(inputs[item.key]) 
+            : inputs[item.key];
+          return API.put('/api/option/', { key: item.key, value });
+        });
+
+        setLoading(true);
+        Promise.all(requestQueue)
+          .then((res) => {
+            if (res.includes(undefined)) {
+              return showError(requestQueue.length > 1 ? t('部分保存失败，请重试') : t('保存失败'));
+            }
+            
+            for (let i = 0; i < res.length; i++) {
+              if (!res[i].data.success) {
+                return showError(res[i].data.message);
+              }
+            }
+            
+            showSuccess(t('保存成功'));
+            props.refresh();
+          })
+          .catch(error => {
+            console.error('Unexpected error:', error);
+            showError(t('保存失败，请重试'));
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      }).catch(() => {
+        showError(t('请检查输入'));
+      });
+    } catch (error) {
+      showError(t('请检查输入'));
+      console.error(error);
+    }
+  }
+
+  useEffect(() => {
+    const currentInputs = {};
+    for (let key in props.options) {
+      if (Object.keys(inputs).includes(key)) {
+        currentInputs[key] = props.options[key];
+      }
+    }
+    setInputs(currentInputs);
+    setInputsRow(structuredClone(currentInputs));
+    refForm.current.setValues(currentInputs);
+  }, [props.options]);
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        values={inputs}
+        getFormApi={(formAPI) => (refForm.current = formAPI)}
+        style={{ marginBottom: 15 }}
+      >
+        <Form.Section text={t('分组设置')}>
+          <Row gutter={16}>
+            <Col span={16}>
+              <Form.TextArea
+                label={t('分组倍率')}
+                placeholder={t('为一个 JSON 文本，键为分组名称，值为倍率')}
+                field={'GroupRatio'}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                trigger='blur'
+                stopValidateWithError
+                rules={[
+                  {
+                    validator: (rule, value) => verifyJSON(value),
+                    message: t('不是合法的 JSON 字符串')
+                  }
+                ]}
+                onChange={(value) => setInputs({ ...inputs, GroupRatio: value })}
+              />
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={16}>
+              <Form.TextArea
+                label={t('用户可选分组')}
+                placeholder={t('为一个 JSON 文本，键为分组名称，值为分组描述')}
+                field={'UserUsableGroups'}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                trigger='blur'
+                stopValidateWithError
+                rules={[
+                  {
+                    validator: (rule, value) => verifyJSON(value),
+                    message: t('不是合法的 JSON 字符串')
+                  }
+                ]}
+                onChange={(value) => setInputs({ ...inputs, UserUsableGroups: value })}
+              />
+            </Col>
+          </Row>
+        </Form.Section>
+      </Form>
+      <Button onClick={onSubmit}>{t('保存分组倍率设置')}</Button>
+    </Spin>
+  );
+} 

web/src/pages/Setting/Operation/ModelRatioSettings.js

@@ -0,0 +1,178 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, Col, Form, Popconfirm, Row, Space, Spin } from '@douyinfe/semi-ui';
+import {
+  compareObjects,
+  API,
+  showError,
+  showSuccess,
+  showWarning,
+  verifyJSON,
+} from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+
+export default function ModelRatioSettings(props) {
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState({
+    ModelPrice: '',
+    ModelRatio: '',
+    CompletionRatio: '',
+  });
+  const refForm = useRef();
+  const [inputsRow, setInputsRow] = useState(inputs);
+  const { t } = useTranslation();
+
+  async function onSubmit() {
+    try {
+      await refForm.current.validate().then(() => {
+        const updateArray = compareObjects(inputs, inputsRow);
+        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+        
+        const requestQueue = updateArray.map((item) => {
+          const value = typeof inputs[item.key] === 'boolean' 
+            ? String(inputs[item.key]) 
+            : inputs[item.key];
+          return API.put('/api/option/', { key: item.key, value });
+        });
+
+        setLoading(true);
+        Promise.all(requestQueue)
+          .then((res) => {
+            if (res.includes(undefined)) {
+              return showError(requestQueue.length > 1 ? t('部分保存失败，请重试') : t('保存失败'));
+            }
+            
+            for (let i = 0; i < res.length; i++) {
+              if (!res[i].data.success) {
+                return showError(res[i].data.message);
+              }
+            }
+            
+            showSuccess(t('保存成功'));
+            props.refresh();
+          })
+          .catch(error => {
+            console.error('Unexpected error:', error);
+            showError(t('保存失败，请重试'));
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      }).catch(() => {
+        showError(t('请检查输入'));
+      });
+    } catch (error) {
+      showError(t('请检查输入'));
+      console.error(error);
+    }
+  }
+
+  async function resetModelRatio() {
+    try {
+      let res = await API.post(`/api/option/rest_model_ratio`);
+      if (res.data.success) {
+        showSuccess(res.data.message);
+        props.refresh();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(error);
+    }
+  }
+
+  useEffect(() => {
+    const currentInputs = {};
+    for (let key in props.options) {
+      if (Object.keys(inputs).includes(key)) {
+        currentInputs[key] = props.options[key];
+      }
+    }
+    setInputs(currentInputs);
+    setInputsRow(structuredClone(currentInputs));
+    refForm.current.setValues(currentInputs);
+  }, [props.options]);
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        values={inputs}
+        getFormApi={(formAPI) => (refForm.current = formAPI)}
+        style={{ marginBottom: 15 }}
+      >
+        <Form.Section>
+          <Row gutter={16}>
+            <Col span={16}>
+              <Form.TextArea
+                label={t('模型固定价格')}
+                extraText={t('一次调用消耗多少刀，优先级大于模型倍率')}
+                placeholder={t('为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀')}
+                field={'ModelPrice'}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                trigger='blur'
+                stopValidateWithError
+                rules={[
+                  {
+                    validator: (rule, value) => verifyJSON(value),
+                    message: '不是合法的 JSON 字符串'
+                  }
+                ]}
+                onChange={(value) => setInputs({ ...inputs, ModelPrice: value })}
+              />
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={16}>
+              <Form.TextArea
+                label={t('模型倍率')}
+                placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
+                field={'ModelRatio'}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                trigger='blur'
+                stopValidateWithError
+                rules={[
+                  {
+                    validator: (rule, value) => verifyJSON(value),
+                    message: '不是合法的 JSON 字符串'
+                  }
+                ]}
+                onChange={(value) => setInputs({ ...inputs, ModelRatio: value })}
+              />
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={16}>
+              <Form.TextArea
+                label={t('模型补全倍率（仅对自定义模型有效）')}
+                extraText={t('仅对自定义模型有效')}
+                placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
+                field={'CompletionRatio'}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                trigger='blur'
+                stopValidateWithError
+                rules={[
+                  {
+                    validator: (rule, value) => verifyJSON(value),
+                    message: '不是合法的 JSON 字符串'
+                  }
+                ]}
+                onChange={(value) => setInputs({ ...inputs, CompletionRatio: value })}
+              />
+            </Col>
+          </Row>
+        </Form.Section>
+      </Form>
+      <Space>
+        <Button onClick={onSubmit}>{t('保存模型倍率设置')}</Button>
+        <Popconfirm
+          title={t('确定重置模型倍率吗？')}
+          content={t('此修改将不可逆')}
+          okType={'danger'}
+          position={'top'}
+          onConfirm={resetModelRatio}
+        >
+          <Button type={'danger'}>{t('重置模型倍率')}</Button>
+        </Popconfirm>
+      </Space>
+    </Spin>
+  );
+} 

web/src/pages/Setting/Operation/ModelSettingsVisualEditor.js

@@ -4,7 +4,10 @@ import { Table, Button, Input, Modal, Form, Space } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus, IconSearch, IconSave } from '@douyinfe/semi-icons';
 import { showError, showSuccess } from '../../../helpers';
 import { API } from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+
 export default function ModelSettingsVisualEditor(props) {
+  const { t } = useTranslation();
   const [models, setModels] = useState([]);
   const [visible, setVisible] = useState(false);
   const [currentModel, setCurrentModel] = useState(null);
@@ -122,51 +125,50 @@ export default function ModelSettingsVisualEditor(props) {
 
   const columns = [
     {
-      title: '模型名称',
+      title: t('模型名称'),
       dataIndex: 'name',
       key: 'name',
     },
     {
-      title: '固定价格',
+      title: t('模型固定价格'),
       dataIndex: 'price',
       key: 'price',
       render: (text, record) => (
         <Input
           value={text}
-          placeholder="按量计价"
+          placeholder={t('按量计费')}
           onChange={value => updateModel(record.name, 'price', value)}
         />
       )
     },
     {
-      title: '模型倍率',
+      title: t('模型倍率'),
       dataIndex: 'ratio',
       key: 'ratio',
       render: (text, record) => (
         <Input
           value={text}
-
-          placeholder={record.price !== '' ? '固定价格' : '默认补全倍率'}
+          placeholder={record.price !== '' ? t('模型倍率') : t('默认补全倍率')}
           disabled={record.price !== ''}
           onChange={value => updateModel(record.name, 'ratio', value)}
         />
       )
     },
     {
-      title: '补全倍率',
+      title: t('补全倍率'),
       dataIndex: 'completionRatio',
       key: 'completionRatio',
       render: (text, record) => (
         <Input
           value={text}
-          placeholder={record.price !== '' ? '固定价格' : '默认补全倍率'}
+          placeholder={record.price !== '' ? t('补全倍率') : t('默认补全倍率')}
           disabled={record.price !== ''}
           onChange={value => updateModel(record.name, 'completionRatio', value)}
         />
       )
     },
     {
-      title: '操作',
+      title: t('操作'),
       key: 'action',
       render: (_, record) => (
         <Button
@@ -219,22 +221,20 @@ export default function ModelSettingsVisualEditor(props) {
 
   return (
     <>
-      <h3>模型价格</h3>
       <Space vertical align="start" style={{ width: '100%' }}>
         <Space>
           <Button icon={<IconPlus />} onClick={() => setVisible(true)}>
-            添加模型
+            {t('添加模型')}
           </Button>
           <Button type="primary" icon={<IconSave />} onClick={SubmitData}>
-            应用更改
+            {t('应用更改')}
           </Button>
           <Input
             prefix={<IconSearch />}
-            placeholder="搜索模型名称"
+            placeholder={t('搜索模型名称')}
             value={searchText}
             onChange={value => {
               setSearchText(value)
-              // 搜索时重置页码
               setCurrentPage(1);
             }}
             style={{ width: 200 }}
@@ -242,12 +242,18 @@ export default function ModelSettingsVisualEditor(props) {
         </Space>
         <Table
           columns={columns}
-          dataSource={pagedData} // 使用分页后的数据
+          dataSource={pagedData}
           pagination={{
             currentPage: currentPage,
             pageSize: pageSize,
             total: filteredModels.length,
             onPageChange: page => setCurrentPage(page),
+            formatPageText: (page) =>
+              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                start: page.currentStart,
+                end: page.currentEnd,
+                total: filteredModels.length
+              }),
             showTotal: true,
             showSizeChanger: false
           }}
@@ -255,7 +261,7 @@ export default function ModelSettingsVisualEditor(props) {
       </Space>
 
       <Modal
-        title="添加模型"
+        title={t('添加模型')}
         visible={visible}
         onCancel={() => setVisible(false)}
         onOk={() => {
@@ -263,32 +269,49 @@ export default function ModelSettingsVisualEditor(props) {
         }}
       >
         <Form>
-          <p>请输入固定价格或者模型倍率+补全倍率</p>
           <Form.Input
             field="name"
-            label="模型名称"
+            label={t('模型名称')}
             placeholder="strawberry"
             required
             onChange={value => setCurrentModel(prev => ({ ...prev, name: value }))}
           />
-          <Form.Input
-            field="price"
-            label="固定价格(每次)"
-            placeholder="输入每次价格"
-            onChange={value => setCurrentModel(prev => ({ ...prev, price: value }))}
-          />
-          <Form.Input
-            field="ratio"
-            label="模型倍率"
-            placeholder="输入模型倍率"
-            onChange={value => setCurrentModel(prev => ({ ...prev, ratio: value }))}
-          />
-          <Form.Input
-            field="completionRatio"
-            label="补全倍率"
-            placeholder="输入补全价格"
-            onChange={value => setCurrentModel(prev => ({ ...prev, completionRatio: value }))}
+          <Form.Switch
+            field="priceMode"
+            label={<>{t('定价模式')}：{currentModel?.priceMode ? t("固定价格") : t("倍率模式")}</>}
+            onChange={checked => {
+              setCurrentModel(prev => ({
+                ...prev,
+                price: '',
+                ratio: '',
+                completionRatio: '',
+                priceMode: checked
+              }));
+            }}
           />
+          {currentModel?.priceMode ? (
+            <Form.Input
+              field="price"
+              label={t('固定价格(每次)')}
+              placeholder={t('输入每次价格')}
+              onChange={value => setCurrentModel(prev => ({ ...prev, price: value }))}
+            />
+          ) : (
+            <>
+              <Form.Input
+                field="ratio"
+                label={t('模型倍率')}
+                placeholder={t('输入模型倍率')}
+                onChange={value => setCurrentModel(prev => ({ ...prev, ratio: value }))}
+              />
+              <Form.Input
+                field="completionRatio"
+                label={t('补全倍率')}
+                placeholder={t('输入补全价格')}
+                onChange={value => setCurrentModel(prev => ({ ...prev, completionRatio: value }))}
+              />
+            </>
+          )}
         </Form>
       </Modal>
     </>