new-api/web/src/components/OperationSetting.js

import React, { useEffect, useState } from 'react';
import { Divider, Form, Grid, Header } from 'semantic-ui-react';
import { Card } from '@douyinfe/semi-ui';
import SettingsGeneral from '../pages/Setting/Operation/SettingsGeneral.js';
import SettingsDrawing from '../pages/Setting/Operation/SettingsDrawing.js';
import SettingsSensitiveWords from '../pages/Setting/Operation/SettingsSensitiveWords.js';
import SettingsLog from '../pages/Setting/Operation/SettingsLog.js';
import SettingsDataDashboard from '../pages/Setting/Operation/SettingsDataDashboard.js';
import SettingsMonitoring from '../pages/Setting/Operation/SettingsMonitoring.js';
import SettingsCreditLimit from '../pages/Setting/Operation/SettingsCreditLimit.js';

import {
  API,
  showError,
  showSuccess,
  timestamp2string,
  verifyJSON,
} from '../helpers';

import { useTheme } from '../context/Theme';

const OperationSetting = () => {
  let now = new Date();
  let [inputs, setInputs] = useState({
    QuotaForNewUser: 0,
    QuotaForInviter: 0,
    QuotaForInvitee: 0,
    QuotaRemindThreshold: 0,
    PreConsumedQuota: 0,
    StreamCacheQueueLength: 0,
    ModelRatio: '',
    ModelPrice: '',
    GroupRatio: '',
    TopUpLink: '',
    ChatLink: '',
    ChatLink2: '', // 添加的新状态变量
    QuotaPerUnit: 0,
    AutomaticDisableChannelEnabled: false,
    AutomaticEnableChannelEnabled: false,
    ChannelDisableThreshold: 0,
    LogConsumeEnabled: false,
    DisplayInCurrencyEnabled: false,
    DisplayTokenStatEnabled: false,
    CheckSensitiveEnabled: false,
    CheckSensitiveOnPromptEnabled: false,
    CheckSensitiveOnCompletionEnabled: '',
    StopOnSensitiveEnabled: '',
    SensitiveWords: '',
    MjNotifyEnabled: false,
    MjAccountFilterEnabled: false,
    MjModeClearEnabled: false,
    MjForwardUrlEnabled: false,
    DrawingEnabled: false,
    DataExportEnabled: false,
    DataExportDefaultTime: 'hour',
    DataExportInterval: 5,
    DefaultCollapseSidebar: false, // 默认折叠侧边栏
    RetryTimes: 0,
  });
  const [originInputs, setOriginInputs] = useState({});
  let [loading, setLoading] = useState(false);

  const getOptions = async () => {
    const res = await API.get('/api/option/');
    const { success, message, data } = res.data;
    if (success) {
      let newInputs = {};
      data.forEach((item) => {
        if (
          item.key === 'ModelRatio' ||
          item.key === 'GroupRatio' ||
          item.key === 'ModelPrice'
        ) {
          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
        }
        if (
          item.key.endsWith('Enabled') ||
          ['DefaultCollapseSidebar'].includes(item.key)
        ) {
          newInputs[item.key] = item.value === 'true' ? true : false;
        } else {
          newInputs[item.key] = item.value;
        }
      });

      setInputs(newInputs);
      setOriginInputs(newInputs);
    } else {
      showError(message);
    }
  };

  const theme = useTheme();
  const isDark = theme === 'dark';

  useEffect(() => {
    getOptions().then();
  }, []);

  const updateOption = async (key, value) => {
    setLoading(true);
    if (key.endsWith('Enabled')) {
      value = inputs[key] === 'true' ? 'false' : 'true';
    }
    if (key === 'DefaultCollapseSidebar') {
      value = inputs[key] === 'true' ? 'false' : 'true';
    }
    console.log(key, value);
    const res = await API.put('/api/option/', {
      key,
      value,
    });
    const { success, message } = res.data;
    if (success) {
      setInputs((inputs) => ({ ...inputs, [key]: value }));
    } else {
      showError(message);
    }
    setLoading(false);
  };

  const handleInputChange = async (e, { name, value }) => {
    if (
      name.endsWith('Enabled') ||
      name === 'DataExportInterval' ||
      name === 'DataExportDefaultTime' ||
      name === 'DefaultCollapseSidebar'
    ) {
      if (name === 'DataExportDefaultTime') {
        localStorage.setItem('data_export_default_time', value);
      } else if (name === 'MjNotifyEnabled') {
        localStorage.setItem('mj_notify_enabled', value);
      }
      await updateOption(name, value);
    } else {
      setInputs((inputs) => ({ ...inputs, [name]: value }));
    }
  };

  const submitConfig = async (group) => {
    switch (group) {
      case 'monitor':
        if (
          originInputs['ChannelDisableThreshold'] !==
          inputs.ChannelDisableThreshold
        ) {
          await updateOption(
            'ChannelDisableThreshold',
            inputs.ChannelDisableThreshold,
          );
        }
        if (
          originInputs['QuotaRemindThreshold'] !== inputs.QuotaRemindThreshold
        ) {
          await updateOption(
            'QuotaRemindThreshold',
            inputs.QuotaRemindThreshold,
          );
        }
        break;
      case 'ratio':
        if (originInputs['ModelRatio'] !== inputs.ModelRatio) {
          if (!verifyJSON(inputs.ModelRatio)) {
            showError('模型倍率不是合法的 JSON 字符串');
            return;
          }
          await updateOption('ModelRatio', inputs.ModelRatio);
        }
        if (originInputs['GroupRatio'] !== inputs.GroupRatio) {
          if (!verifyJSON(inputs.GroupRatio)) {
            showError('分组倍率不是合法的 JSON 字符串');
            return;
          }
          await updateOption('GroupRatio', inputs.GroupRatio);
        }
        if (originInputs['ModelPrice'] !== inputs.ModelPrice) {
          if (!verifyJSON(inputs.ModelPrice)) {
            showError('模型固定价格不是合法的 JSON 字符串');
            return;
          }
          await updateOption('ModelPrice', inputs.ModelPrice);
        }
        break;
      case 'words':
        if (originInputs['SensitiveWords'] !== inputs.SensitiveWords) {
          await updateOption('SensitiveWords', inputs.SensitiveWords);
        }
        break;
      case 'quota':
        if (originInputs['QuotaForNewUser'] !== inputs.QuotaForNewUser) {
          await updateOption('QuotaForNewUser', inputs.QuotaForNewUser);
        }
        if (originInputs['QuotaForInvitee'] !== inputs.QuotaForInvitee) {
          await updateOption('QuotaForInvitee', inputs.QuotaForInvitee);
        }
        if (originInputs['QuotaForInviter'] !== inputs.QuotaForInviter) {
          await updateOption('QuotaForInviter', inputs.QuotaForInviter);
        }
        if (originInputs['PreConsumedQuota'] !== inputs.PreConsumedQuota) {
          await updateOption('PreConsumedQuota', inputs.PreConsumedQuota);
        }
        break;
      case 'general':
        if (originInputs['TopUpLink'] !== inputs.TopUpLink) {
          await updateOption('TopUpLink', inputs.TopUpLink);
        }
        if (originInputs['ChatLink'] !== inputs.ChatLink) {
          await updateOption('ChatLink', inputs.ChatLink);
        }
        if (originInputs['ChatLink2'] !== inputs.ChatLink2) {
          await updateOption('ChatLink2', inputs.ChatLink2);
        }
        if (originInputs['QuotaPerUnit'] !== inputs.QuotaPerUnit) {
          await updateOption('QuotaPerUnit', inputs.QuotaPerUnit);
        }
        if (originInputs['RetryTimes'] !== inputs.RetryTimes) {
          await updateOption('RetryTimes', inputs.RetryTimes);
        }
        break;
    }
  };
  return (
    <>
      {/* 通用设置 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsGeneral options={inputs} />
      </Card>
      {/* 绘图设置 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsDrawing options={inputs} />
      </Card>
      {/* 屏蔽词过滤设置 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsSensitiveWords options={inputs} />
      </Card>
      {/* 日志设置 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsLog options={inputs} />
      </Card>
      {/* 数据看板 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsDataDashboard options={inputs} />
      </Card>
      {/* 监控设置 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsMonitoring options={inputs} />
      </Card>
      {/* 额度设置 */}
      <Card style={{ marginTop: '10px' }}>
        <SettingsCreditLimit options={inputs} />
      </Card>
      <Grid columns={1}>
        <Grid.Column>
          <Form loading={loading} inverted={isDark}>
            {/*<Form.Group inline>*/}
            {/*  <Form.Checkbox*/}
            {/*    checked={inputs.StopOnSensitiveEnabled === 'true'}*/}
            {/*    label='在检测到屏蔽词时，立刻停止生成，否则替换屏蔽词'*/}
            {/*    name='StopOnSensitiveEnabled'*/}
            {/*    onChange={handleInputChange}*/}
            {/*  />*/}
            {/*</Form.Group>*/}
            {/*<Form.Group>*/}
            {/*  <Form.Input*/}
            {/*    label="流模式下缓存队列，默认不缓存，设置越大检测越准确，但是回复会有卡顿感"*/}
            {/*    name="StreamCacheTextLength"*/}
            {/*    onChange={handleInputChange}*/}
            {/*    value={inputs.StreamCacheQueueLength}*/}
            {/*    type="number"*/}
            {/*    min="0"*/}
            {/*    placeholder="例如：10"*/}
            {/*  />*/}
            {/*</Form.Group>*/}

            <Divider />
            <Header as='h3' inverted={isDark}>
              倍率设置
            </Header>
            <Form.Group widths='equal'>
              <Form.TextArea
                label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）'
                name='ModelPrice'
                onChange={handleInputChange}
                style={{
                  minHeight: 250,
                  fontFamily: 'JetBrains Mono, Consolas',
                }}
                autoComplete='new-password'
                value={inputs.ModelPrice}
                placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
              />
            </Form.Group>
            <Form.Group widths='equal'>
              <Form.TextArea
                label='模型倍率'
                name='ModelRatio'
                onChange={handleInputChange}
                style={{
                  minHeight: 250,
                  fontFamily: 'JetBrains Mono, Consolas',
                }}
                autoComplete='new-password'
                value={inputs.ModelRatio}
                placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
              />
            </Form.Group>
            <Form.Group widths='equal'>
              <Form.TextArea
                label='分组倍率'
                name='GroupRatio'
                onChange={handleInputChange}
                style={{
                  minHeight: 250,
                  fontFamily: 'JetBrains Mono, Consolas',
                }}
                autoComplete='new-password'
                value={inputs.GroupRatio}
                placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
              />
            </Form.Group>
            <Form.Button
              onClick={() => {
                submitConfig('ratio').then();
              }}
            >
              保存倍率设置
            </Form.Button>
          </Form>
        </Grid.Column>
      </Grid>
    </>
  );
};

export default OperationSetting;