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,