feat: add billing display mode selection and update pricing rendering

Introduce a billing display mode feature allowing users to toggle between price and ratio views. Update relevant components and hooks to support this new functionality, ensuring consistent pricing information is displayed across the application.

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

@@ -337,6 +337,7 @@ export const getLogsColumns = ({
   showUserInfoFunc,
   openChannelAffinityUsageCacheModal,
   isAdminUser,
+  billingDisplayMode = 'price',
 }) => {
   return [
     {
@@ -761,11 +762,10 @@ export const getLogsColumns = ({
           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)}`,
+            `${t('分组倍率')}：${formatRatio(other?.group_ratio)}`,
             text ? `${t('详情')}：${text}` : null,
           ]
             .filter(Boolean)
@@ -808,6 +808,7 @@ export const getLogsColumns = ({
               1.0,
               other?.is_system_prompt_overwritten,
               'claude',
+              billingDisplayMode,
             )
           : renderModelPriceSimple(
               other.model_ratio,
@@ -826,6 +827,7 @@ export const getLogsColumns = ({
               1.0,
               other?.is_system_prompt_overwritten,
               'openai',
+              billingDisplayMode,
             );
         return (
             <Typography.Paragraph

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

@@ -43,6 +43,7 @@ const LogsTable = (logsData) => {
     openChannelAffinityUsageCacheModal,
     hasExpandableRows,
     isAdminUser,
+    billingDisplayMode,
     t,
     COLUMN_KEYS,
   } = logsData;
@@ -56,6 +57,7 @@ const LogsTable = (logsData) => {
       showUserInfoFunc,
       openChannelAffinityUsageCacheModal,
       isAdminUser,
+      billingDisplayMode,
     });
   }, [
     t,
@@ -64,6 +66,7 @@ const LogsTable = (logsData) => {
     showUserInfoFunc,
     openChannelAffinityUsageCacheModal,
     isAdminUser,
+    billingDisplayMode,
   ]);
 
   // Filter columns based on visibility settings

web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
+import { Modal, Button, Checkbox, RadioGroup, Radio } from '@douyinfe/semi-ui';
 import { getLogsColumns } from '../UsageLogsColumnDefs';
 
 const ColumnSelectorModal = ({
@@ -28,6 +28,8 @@ const ColumnSelectorModal = ({
   handleColumnVisibilityChange,
   handleSelectAll,
   initDefaultColumns,
+  billingDisplayMode,
+  setBillingDisplayMode,
   COLUMN_KEYS,
   isAdminUser,
   copyText,
@@ -41,6 +43,7 @@ const ColumnSelectorModal = ({
     copyText,
     showUserInfoFunc,
     isAdminUser,
+    billingDisplayMode,
   });
 
   return (
@@ -61,6 +64,17 @@ const ColumnSelectorModal = ({
       }
     >
       <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 16 }}>
+          <div style={{ marginBottom: 8, fontWeight: 600 }}>{t('计费显示模式')}</div>
+          <RadioGroup
+            type='button'
+            value={billingDisplayMode}
+            onChange={(event) => setBillingDisplayMode(event.target.value)}
+          >
+            <Radio value='price'>{t('价格模式（默认）')}</Radio>
+            <Radio value='ratio'>{t('倍率模式')}</Radio>
+          </RadioGroup>
+        </div>
         <Checkbox
           checked={Object.values(visibleColumns).every((v) => v === true)}
           indeterminate={