feat: grok Usage Guidelines Violation Fee (#2753)

* feat: grok Usage Guidelines Violation Fee ui setting

* feat: grok Usage Guidelines Violation Fee consume log

* fix: grok Usage Guidelines Violation Fee log detail

web/src/pages/Setting/Model/SettingGrokModel.jsx

@@ -0,0 +1,175 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import {
+  API,
+  compareObjects,
+  showError,
+  showSuccess,
+  showWarning,
+} from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+
+const XAI_VIOLATION_FEE_DOC_URL =
+  'https://docs.x.ai/docs/models#usage-guidelines-violation-fee';
+
+const DEFAULT_GROK_INPUTS = {
+  'grok.violation_deduction_enabled': true,
+  'grok.violation_deduction_amount': 0.05,
+};
+
+export default function SettingGrokModel(props) {
+  const { t } = useTranslation();
+
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState(DEFAULT_GROK_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_GROK_INPUTS);
+  const refForm = useRef();
+
+  async function onSubmit() {
+    await refForm.current
+      .validate()
+      .then(() => {
+        const updateArray = compareObjects(inputs, inputsRow);
+        if (!updateArray.length)
+          return showWarning(t('你似乎并没有修改什么'));
+
+        const requestQueue = updateArray.map((item) => {
+          const value = String(inputs[item.key]);
+          return API.put('/api/option/', { key: item.key, value });
+        });
+
+        setLoading(true);
+        Promise.all(requestQueue)
+          .then((res) => {
+            if (requestQueue.length === 1) {
+              if (res.includes(undefined)) return;
+            } else if (requestQueue.length > 1) {
+              if (res.includes(undefined))
+                return showError(t('部分保存失败，请重试'));
+            }
+            showSuccess(t('保存成功'));
+            props.refresh();
+          })
+          .catch(() => {
+            showError(t('保存失败，请重试'));
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      })
+      .catch((error) => {
+        console.error('Validation failed:', error);
+        showError(t('请检查输入'));
+      });
+  }
+
+  useEffect(() => {
+    const currentInputs = { ...DEFAULT_GROK_INPUTS };
+    for (const key of Object.keys(DEFAULT_GROK_INPUTS)) {
+      if (props.options[key] !== undefined) {
+        currentInputs[key] = props.options[key];
+      }
+    }
+
+    setInputs(currentInputs);
+    setInputsRow(structuredClone(currentInputs));
+    if (refForm.current) {
+      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('Grok设置')}>
+          <Row>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Switch
+                label={t('启用违规扣费')}
+                field={'grok.violation_deduction_enabled'}
+                onChange={(value) =>
+                  setInputs({
+                    ...inputs,
+                    'grok.violation_deduction_enabled': value,
+                  })
+                }
+                extraText={
+                  <span>
+                    {t('开启后，违规请求将额外扣费。')}{' '}
+                    <a
+                      href={XAI_VIOLATION_FEE_DOC_URL}
+                      target='_blank'
+                      rel='noreferrer'
+                    >
+                      {t('官方说明')}
+                    </a>
+                  </span>
+                }
+              />
+            </Col>
+          </Row>
+
+          <Row>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.InputNumber
+                label={t('违规扣费金额')}
+                field={'grok.violation_deduction_amount'}
+                min={0}
+                step={0.01}
+                precision={4}
+                disabled={!inputs['grok.violation_deduction_enabled']}
+                onChange={(value) =>
+                  setInputs({
+                    ...inputs,
+                    'grok.violation_deduction_amount': value,
+                  })
+                }
+                extraText={
+                  <span>
+                    {t('这是基础金额，实际扣费 = 基础金额 x 系统分组倍率。')}{' '}
+                    <a
+                      href={XAI_VIOLATION_FEE_DOC_URL}
+                      target='_blank'
+                      rel='noreferrer'
+                    >
+                      {t('官方说明')}
+                    </a>
+                  </span>
+                }
+              />
+            </Col>
+          </Row>
+
+          <Row>
+            <Button size='default' onClick={onSubmit}>
+              {t('保存')}
+            </Button>
+          </Row>
+        </Form.Section>
+      </Form>
+    </Spin>
+  );
+}