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/components/settings/ModelSetting.jsx

@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next';
 import SettingGeminiModel from '../../pages/Setting/Model/SettingGeminiModel';
 import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel';
 import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel';
+import SettingGrokModel from '../../pages/Setting/Model/SettingGrokModel';
 import SettingsChannelAffinity from '../../pages/Setting/Operation/SettingsChannelAffinity';
 
 const ModelSetting = () => {
@@ -45,6 +46,8 @@ const ModelSetting = () => {
     'general_setting.ping_interval_seconds': 60,
     'gemini.thinking_adapter_enabled': false,
     'gemini.thinking_adapter_budget_tokens_percentage': 0.6,
+    'grok.violation_deduction_enabled': true,
+    'grok.violation_deduction_amount': 0.05,
   });
 
   let [loading, setLoading] = useState(false);
@@ -122,6 +125,10 @@ const ModelSetting = () => {
         <Card style={{ marginTop: '10px' }}>
           <SettingClaudeModel options={inputs} refresh={onRefresh} />
         </Card>
+        {/* Grok */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingGrokModel options={inputs} refresh={onRefresh} />
+        </Card>
       </Spin>
     </>
   );

web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx

@@ -61,6 +61,16 @@ const colors = [
   'yellow',
 ];
 
+function formatRatio(ratio) {
+  if (ratio === undefined || ratio === null) {
+    return '-';
+  }
+  if (typeof ratio === 'number') {
+    return ratio.toFixed(4);
+  }
+  return String(ratio);
+}
+
 // Render functions
 function renderType(type, t) {
   switch (type) {
@@ -588,6 +598,38 @@ export const getLogsColumns = ({
             </Typography.Paragraph>
           );
         }
+
+        if (
+          other?.violation_fee === true ||
+          Boolean(other?.violation_fee_code) ||
+          Boolean(other?.violation_fee_marker)
+        ) {
+          const feeQuota = other?.fee_quota ?? record?.quota;
+          const ratioText = formatRatio(other?.group_ratio);
+          const summary = [
+            t('违规扣费'),
+            `${t('分组倍率')}：${ratioText}`,
+            `${t('扣费')}：${renderQuota(feeQuota, 6)}`,
+            text ? `${t('详情')}：${text}` : null,
+          ]
+            .filter(Boolean)
+            .join('\n');
+          return (
+            <Typography.Paragraph
+              ellipsis={{
+                rows: 2,
+                showTooltip: {
+                  type: 'popover',
+                  opts: { style: { width: 240 } },
+                },
+              }}
+              style={{ maxWidth: 240, whiteSpace: 'pre-line' }}
+            >
+              {summary}
+            </Typography.Paragraph>
+          );
+        }
+
         let content = other?.claude
           ? renderModelPriceSimple(
               other.model_ratio,

web/src/helpers/log.js

@@ -18,9 +18,16 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 export function getLogOther(otherStr) {
-  if (otherStr === undefined || otherStr === '') {
-    otherStr = '{}';
+  if (otherStr === undefined || otherStr === null || otherStr === '') {
+    return {};
+  }
+  if (typeof otherStr === 'object') {
+    return otherStr;
+  }
+  try {
+    return JSON.parse(otherStr);
+  } catch (e) {
+    console.error(`Failed to parse record.other: "${otherStr}".`, e);
+    return null;
   }
-  let other = JSON.parse(otherStr);
-  return other;
 }

web/src/hooks/usage-logs/useUsageLogsData.jsx

@@ -419,72 +419,84 @@ export const useLogsData = () => {
             value: other.upstream_model_name,
           });
         }
+
+        const isViolationFeeLog =
+          other?.violation_fee === true ||
+          Boolean(other?.violation_fee_code) ||
+          Boolean(other?.violation_fee_marker);
+
         let content = '';
-        if (other?.ws || other?.audio) {
-          content = renderAudioModelPrice(
-            other?.text_input,
-            other?.text_output,
-            other?.model_ratio,
-            other?.model_price,
-            other?.completion_ratio,
-            other?.audio_input,
-            other?.audio_output,
-            other?.audio_ratio,
-            other?.audio_completion_ratio,
-            other?.group_ratio,
-            other?.user_group_ratio,
-            other?.cache_tokens || 0,
-            other?.cache_ratio || 1.0,
-          );
-        } else if (other?.claude) {
-          content = renderClaudeModelPrice(
-            logs[i].prompt_tokens,
-            logs[i].completion_tokens,
-            other.model_ratio,
-            other.model_price,
-            other.completion_ratio,
-            other.group_ratio,
-            other?.user_group_ratio,
-            other.cache_tokens || 0,
-            other.cache_ratio || 1.0,
-            other.cache_creation_tokens || 0,
-            other.cache_creation_ratio || 1.0,
-            other.cache_creation_tokens_5m || 0,
-            other.cache_creation_ratio_5m || other.cache_creation_ratio || 1.0,
-            other.cache_creation_tokens_1h || 0,
-            other.cache_creation_ratio_1h || other.cache_creation_ratio || 1.0,
-          );
-        } else {
-          content = renderModelPrice(
-            logs[i].prompt_tokens,
-            logs[i].completion_tokens,
-            other?.model_ratio,
-            other?.model_price,
-            other?.completion_ratio,
-            other?.group_ratio,
-            other?.user_group_ratio,
-            other?.cache_tokens || 0,
-            other?.cache_ratio || 1.0,
-            other?.image || false,
-            other?.image_ratio || 0,
-            other?.image_output || 0,
-            other?.web_search || false,
-            other?.web_search_call_count || 0,
-            other?.web_search_price || 0,
-            other?.file_search || false,
-            other?.file_search_call_count || 0,
-            other?.file_search_price || 0,
-            other?.audio_input_seperate_price || false,
-            other?.audio_input_token_count || 0,
-            other?.audio_input_price || 0,
-            other?.image_generation_call || false,
-            other?.image_generation_call_price || 0,
-          );
+        if (!isViolationFeeLog) {
+          if (other?.ws || other?.audio) {
+            content = renderAudioModelPrice(
+              other?.text_input,
+              other?.text_output,
+              other?.model_ratio,
+              other?.model_price,
+              other?.completion_ratio,
+              other?.audio_input,
+              other?.audio_output,
+              other?.audio_ratio,
+              other?.audio_completion_ratio,
+              other?.group_ratio,
+              other?.user_group_ratio,
+              other?.cache_tokens || 0,
+              other?.cache_ratio || 1.0,
+            );
+          } else if (other?.claude) {
+            content = renderClaudeModelPrice(
+              logs[i].prompt_tokens,
+              logs[i].completion_tokens,
+              other.model_ratio,
+              other.model_price,
+              other.completion_ratio,
+              other.group_ratio,
+              other?.user_group_ratio,
+              other.cache_tokens || 0,
+              other.cache_ratio || 1.0,
+              other.cache_creation_tokens || 0,
+              other.cache_creation_ratio || 1.0,
+              other.cache_creation_tokens_5m || 0,
+              other.cache_creation_ratio_5m ||
+                other.cache_creation_ratio ||
+                1.0,
+              other.cache_creation_tokens_1h || 0,
+              other.cache_creation_ratio_1h ||
+                other.cache_creation_ratio ||
+                1.0,
+            );
+          } else {
+            content = renderModelPrice(
+              logs[i].prompt_tokens,
+              logs[i].completion_tokens,
+              other?.model_ratio,
+              other?.model_price,
+              other?.completion_ratio,
+              other?.group_ratio,
+              other?.user_group_ratio,
+              other?.cache_tokens || 0,
+              other?.cache_ratio || 1.0,
+              other?.image || false,
+              other?.image_ratio || 0,
+              other?.image_output || 0,
+              other?.web_search || false,
+              other?.web_search_call_count || 0,
+              other?.web_search_price || 0,
+              other?.file_search || false,
+              other?.file_search_call_count || 0,
+              other?.file_search_price || 0,
+              other?.audio_input_seperate_price || false,
+              other?.audio_input_token_count || 0,
+              other?.audio_input_price || 0,
+              other?.image_generation_call || false,
+              other?.image_generation_call_price || 0,
+            );
+          }
+          expandDataLocal.push({
+            key: t('计费过程'),
+            value: content,
+          });
         }
-        expandDataLocal.push({
-          key: t('计费过程'),
-          value: content,
-        });
         if (other?.reasoning_effort) {
           expandDataLocal.push({
             key: t('Reasoning Effort'),

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>
+  );
+}