diff --git a/web/src/components/common/ui/CardPro.js b/web/src/components/common/ui/CardPro.js index 4f240e9e..944f33c1 100644 --- a/web/src/components/common/ui/CardPro.js +++ b/web/src/components/common/ui/CardPro.js @@ -45,33 +45,33 @@ const CardPro = ({
{/* 统计信息区域 - 用于type2 */} {type === 'type2' && statsArea && ( -
+ <> {statsArea} -
+ )} {/* 描述信息区域 - 用于type1和type3 */} {(type === 'type1' || type === 'type3') && descriptionArea && ( -
+ <> {descriptionArea} -
+ )} {/* 第一个分隔线 - 在描述信息或统计信息后面 */} - {((type === 'type1' || type === 'type3') && descriptionArea) || - (type === 'type2' && statsArea) ? ( + {((type === 'type1' || type === 'type3') && descriptionArea) || + (type === 'type2' && statsArea) ? ( ) : null} {/* 类型切换/标签区域 - 主要用于type3 */} {type === 'type3' && tabsArea && ( -
+ <> {tabsArea} -
+ )} {/* 操作按钮和搜索表单的容器 */} -
+
{/* 操作按钮区域 - 用于type1和type3 */} {(type === 'type1' || type === 'type3') && actionsArea && (
diff --git a/web/src/components/table/LogsTable.js b/web/src/components/table/LogsTable.js index f181d9c6..cea5d9bd 100644 --- a/web/src/components/table/LogsTable.js +++ b/web/src/components/table/LogsTable.js @@ -1,1452 +1,2 @@ -import React, { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { - API, - copy, - getTodayStartTimestamp, - isAdmin, - showError, - showSuccess, - timestamp2string, - renderAudioModelPrice, - renderClaudeLogContent, - renderClaudeModelPrice, - renderClaudeModelPriceSimple, - renderGroup, - renderLogContent, - renderModelPrice, - renderModelPriceSimple, - renderNumber, - renderQuota, - stringToColor, - getLogOther, - renderModelTag -} from '../../helpers'; - -import { - Avatar, - Button, - Descriptions, - Empty, - Modal, - Popover, - Space, - Spin, - Table, - Tag, - Tooltip, - Checkbox, - Typography, - Form, -} from '@douyinfe/semi-ui'; -import CardPro from '../common/ui/CardPro'; -import { - IllustrationNoResult, - IllustrationNoResultDark, -} from '@douyinfe/semi-illustrations'; -import { ITEMS_PER_PAGE } from '../../constants'; -import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph'; -import { IconSearch, IconHelpCircle } from '@douyinfe/semi-icons'; -import { Route } from 'lucide-react'; -import { useTableCompactMode } from '../../hooks/common/useTableCompactMode'; - -const { Text } = Typography; - -const colors = [ - 'amber', - 'blue', - 'cyan', - 'green', - 'grey', - 'indigo', - 'light-blue', - 'lime', - 'orange', - 'pink', - 'purple', - 'red', - 'teal', - 'violet', - 'yellow', -]; - -const LogsTable = () => { - const { t } = useTranslation(); - - function renderType(type) { - switch (type) { - case 1: - return ( - - {t('充值')} - - ); - case 2: - return ( - - {t('消费')} - - ); - case 3: - return ( - - {t('管理')} - - ); - case 4: - return ( - - {t('系统')} - - ); - case 5: - return ( - - {t('错误')} - - ); - default: - return ( - - {t('未知')} - - ); - } - } - - function renderIsStream(bool) { - if (bool) { - return ( - - {t('流')} - - ); - } else { - return ( - - {t('非流')} - - ); - } - } - - function renderUseTime(type) { - const time = parseInt(type); - if (time < 101) { - return ( - - {' '} - {time} s{' '} - - ); - } else if (time < 300) { - return ( - - {' '} - {time} s{' '} - - ); - } else { - return ( - - {' '} - {time} s{' '} - - ); - } - } - - function renderFirstUseTime(type) { - let time = parseFloat(type) / 1000.0; - time = time.toFixed(1); - if (time < 3) { - return ( - - {' '} - {time} s{' '} - - ); - } else if (time < 10) { - return ( - - {' '} - {time} s{' '} - - ); - } else { - return ( - - {' '} - {time} s{' '} - - ); - } - } - - function renderModelName(record) { - let other = getLogOther(record.other); - let modelMapped = - other?.is_model_mapped && - other?.upstream_model_name && - other?.upstream_model_name !== ''; - if (!modelMapped) { - return renderModelTag(record.model_name, { - onClick: (event) => { - copyText(event, record.model_name).then((r) => { }); - }, - }); - } else { - return ( - <> - - - -
- - {t('请求并计费模型')}: - - {renderModelTag(record.model_name, { - onClick: (event) => { - copyText(event, record.model_name).then((r) => { }); - }, - })} -
-
- - {t('实际模型')}: - - {renderModelTag(other.upstream_model_name, { - onClick: (event) => { - copyText(event, other.upstream_model_name).then( - (r) => { }, - ); - }, - })} -
- -
- } - > - {renderModelTag(record.model_name, { - onClick: (event) => { - copyText(event, record.model_name).then((r) => { }); - }, - suffixIcon: ( - - ), - })} - - - - ); - } - } - - // Define column keys for selection - const COLUMN_KEYS = { - TIME: 'time', - CHANNEL: 'channel', - USERNAME: 'username', - TOKEN: 'token', - GROUP: 'group', - TYPE: 'type', - MODEL: 'model', - USE_TIME: 'use_time', - PROMPT: 'prompt', - COMPLETION: 'completion', - COST: 'cost', - RETRY: 'retry', - IP: 'ip', - DETAILS: 'details', - }; - - // State for column visibility - const [visibleColumns, setVisibleColumns] = useState({}); - const [showColumnSelector, setShowColumnSelector] = useState(false); - - // Load saved column preferences from localStorage - useEffect(() => { - const savedColumns = localStorage.getItem('logs-table-columns'); - if (savedColumns) { - try { - const parsed = JSON.parse(savedColumns); - // Make sure all columns are accounted for - const defaults = getDefaultColumnVisibility(); - const merged = { ...defaults, ...parsed }; - setVisibleColumns(merged); - } catch (e) { - console.error('Failed to parse saved column preferences', e); - initDefaultColumns(); - } - } else { - initDefaultColumns(); - } - }, []); - - // Get default column visibility based on user role - const getDefaultColumnVisibility = () => { - return { - [COLUMN_KEYS.TIME]: true, - [COLUMN_KEYS.CHANNEL]: isAdminUser, - [COLUMN_KEYS.USERNAME]: isAdminUser, - [COLUMN_KEYS.TOKEN]: true, - [COLUMN_KEYS.GROUP]: true, - [COLUMN_KEYS.TYPE]: true, - [COLUMN_KEYS.MODEL]: true, - [COLUMN_KEYS.USE_TIME]: true, - [COLUMN_KEYS.PROMPT]: true, - [COLUMN_KEYS.COMPLETION]: true, - [COLUMN_KEYS.COST]: true, - [COLUMN_KEYS.RETRY]: isAdminUser, - [COLUMN_KEYS.IP]: true, - [COLUMN_KEYS.DETAILS]: true, - }; - }; - - // Initialize default column visibility - const initDefaultColumns = () => { - const defaults = getDefaultColumnVisibility(); - setVisibleColumns(defaults); - localStorage.setItem('logs-table-columns', JSON.stringify(defaults)); - }; - - // Handle column visibility change - const handleColumnVisibilityChange = (columnKey, checked) => { - const updatedColumns = { ...visibleColumns, [columnKey]: checked }; - setVisibleColumns(updatedColumns); - }; - - // Handle "Select All" checkbox - const handleSelectAll = (checked) => { - const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]); - const updatedColumns = {}; - - allKeys.forEach((key) => { - // For admin-only columns, only enable them if user is admin - if ( - (key === COLUMN_KEYS.CHANNEL || - key === COLUMN_KEYS.USERNAME || - key === COLUMN_KEYS.RETRY) && - !isAdminUser - ) { - updatedColumns[key] = false; - } else { - updatedColumns[key] = checked; - } - }); - - setVisibleColumns(updatedColumns); - }; - - // Define all columns - const allColumns = [ - { - key: COLUMN_KEYS.TIME, - title: t('时间'), - dataIndex: 'timestamp2string', - }, - { - key: COLUMN_KEYS.CHANNEL, - title: t('渠道'), - dataIndex: 'channel', - className: isAdmin() ? 'tableShow' : 'tableHiddle', - render: (text, record, index) => { - let isMultiKey = false - let multiKeyIndex = -1; - let other = getLogOther(record.other); - if (other?.admin_info) { - let adminInfo = other.admin_info; - if (adminInfo?.is_multi_key) { - isMultiKey = true; - multiKeyIndex = adminInfo.multi_key_index; - } - } - - return isAdminUser && (record.type === 0 || record.type === 2 || record.type === 5) ? ( - - - - {text} - - - {isMultiKey && ( - - {multiKeyIndex} - - )} - - ) : null; - }, - }, - { - key: COLUMN_KEYS.USERNAME, - title: t('用户'), - dataIndex: 'username', - className: isAdmin() ? 'tableShow' : 'tableHiddle', - render: (text, record, index) => { - return isAdminUser ? ( -
- { - event.stopPropagation(); - showUserInfo(record.user_id); - }} - > - {typeof text === 'string' && text.slice(0, 1)} - - {text} -
- ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.TOKEN, - title: t('令牌'), - dataIndex: 'token_name', - render: (text, record, index) => { - return record.type === 0 || record.type === 2 || record.type === 5 ? ( -
- { - //cancel the row click event - copyText(event, text); - }} - > - {' '} - {t(text)}{' '} - -
- ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.GROUP, - title: t('分组'), - dataIndex: 'group', - render: (text, record, index) => { - if (record.type === 0 || record.type === 2 || record.type === 5) { - if (record.group) { - return <>{renderGroup(record.group)}; - } else { - let other = null; - try { - other = JSON.parse(record.other); - } catch (e) { - console.error( - `Failed to parse record.other: "${record.other}".`, - e, - ); - } - if (other === null) { - return <>; - } - if (other.group !== undefined) { - return <>{renderGroup(other.group)}; - } else { - return <>; - } - } - } else { - return <>; - } - }, - }, - { - key: COLUMN_KEYS.TYPE, - title: t('类型'), - dataIndex: 'type', - render: (text, record, index) => { - return <>{renderType(text)}; - }, - }, - { - key: COLUMN_KEYS.MODEL, - title: t('模型'), - dataIndex: 'model_name', - render: (text, record, index) => { - return record.type === 0 || record.type === 2 || record.type === 5 ? ( - <>{renderModelName(record)} - ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.USE_TIME, - title: t('用时/首字'), - dataIndex: 'use_time', - render: (text, record, index) => { - if (!(record.type === 2 || record.type === 5)) { - return <>; - } - if (record.is_stream) { - let other = getLogOther(record.other); - return ( - <> - - {renderUseTime(text)} - {renderFirstUseTime(other?.frt)} - {renderIsStream(record.is_stream)} - - - ); - } else { - return ( - <> - - {renderUseTime(text)} - {renderIsStream(record.is_stream)} - - - ); - } - }, - }, - { - key: COLUMN_KEYS.PROMPT, - title: t('提示'), - dataIndex: 'prompt_tokens', - render: (text, record, index) => { - return record.type === 0 || record.type === 2 || record.type === 5 ? ( - <>{ {text} } - ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.COMPLETION, - title: t('补全'), - dataIndex: 'completion_tokens', - render: (text, record, index) => { - return parseInt(text) > 0 && - (record.type === 0 || record.type === 2 || record.type === 5) ? ( - <>{ {text} } - ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.COST, - title: t('花费'), - dataIndex: 'quota', - render: (text, record, index) => { - return record.type === 0 || record.type === 2 || record.type === 5 ? ( - <>{renderQuota(text, 6)} - ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.IP, - title: ( -
- {t('IP')} - - - -
- ), - dataIndex: 'ip', - render: (text, record, index) => { - return (record.type === 2 || record.type === 5) && text ? ( - - { - copyText(event, text); - }} - > - {text} - - - ) : ( - <> - ); - }, - }, - { - key: COLUMN_KEYS.RETRY, - title: t('重试'), - dataIndex: 'retry', - className: isAdmin() ? 'tableShow' : 'tableHiddle', - render: (text, record, index) => { - if (!(record.type === 2 || record.type === 5)) { - return <>; - } - let content = t('渠道') + `：${record.channel}`; - if (record.other !== '') { - let other = JSON.parse(record.other); - if (other === null) { - return <>; - } - if (other.admin_info !== undefined) { - if ( - other.admin_info.use_channel !== null && - other.admin_info.use_channel !== undefined && - other.admin_info.use_channel !== '' - ) { - // channel id array - let useChannel = other.admin_info.use_channel; - let useChannelStr = useChannel.join('->'); - content = t('渠道') + `：${useChannelStr}`; - } - } - } - return isAdminUser ?
{content}
: <>; - }, - }, - { - key: COLUMN_KEYS.DETAILS, - title: t('详情'), - dataIndex: 'content', - fixed: 'right', - render: (text, record, index) => { - let other = getLogOther(record.other); - if (other == null || record.type !== 2) { - return ( - - {text} - - ); - } - let content = other?.claude - ? renderClaudeModelPriceSimple( - other.model_ratio, - other.model_price, - 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, - ) - : renderModelPriceSimple( - other.model_ratio, - other.model_price, - other.group_ratio, - other?.user_group_ratio, - other.cache_tokens || 0, - other.cache_ratio || 1.0, - ); - return ( - - {content} - - ); - }, - }, - ]; - - // Update table when column visibility changes - useEffect(() => { - if (Object.keys(visibleColumns).length > 0) { - // Save to localStorage - localStorage.setItem( - 'logs-table-columns', - JSON.stringify(visibleColumns), - ); - } - }, [visibleColumns]); - - // Filter columns based on visibility settings - const getVisibleColumns = () => { - return allColumns.filter((column) => visibleColumns[column.key]); - }; - - // Column selector modal - const renderColumnSelector = () => { - return ( - setShowColumnSelector(false)} - footer={ -
- - - -
- } - > -
- v === true)} - indeterminate={ - Object.values(visibleColumns).some((v) => v === true) && - !Object.values(visibleColumns).every((v) => v === true) - } - onChange={(e) => handleSelectAll(e.target.checked)} - > - {t('全选')} - -
-
- {allColumns.map((column) => { - // Skip admin-only columns for non-admin users - if ( - !isAdminUser && - (column.key === COLUMN_KEYS.CHANNEL || - column.key === COLUMN_KEYS.USERNAME || - column.key === COLUMN_KEYS.RETRY) - ) { - return null; - } - - return ( -
- - handleColumnVisibilityChange(column.key, e.target.checked) - } - > - {column.title} - -
- ); - })} -
- - ); - }; - - const [logs, setLogs] = useState([]); - const [expandData, setExpandData] = useState({}); - const [showStat, setShowStat] = useState(false); - const [loading, setLoading] = useState(false); - const [loadingStat, setLoadingStat] = useState(false); - const [activePage, setActivePage] = useState(1); - const [logCount, setLogCount] = useState(ITEMS_PER_PAGE); - const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); - const [logType, setLogType] = useState(0); - const isAdminUser = isAdmin(); - let now = new Date(); - - // Form 初始值 - const formInitValues = { - username: '', - token_name: '', - model_name: '', - channel: '', - group: '', - dateRange: [ - timestamp2string(getTodayStartTimestamp()), - timestamp2string(now.getTime() / 1000 + 3600), - ], - logType: '0', - }; - - const [stat, setStat] = useState({ - quota: 0, - token: 0, - }); - - // Form API 引用 - const [formApi, setFormApi] = useState(null); - - // 获取表单值的辅助函数，确保所有值都是字符串 - const getFormValues = () => { - const formValues = formApi ? formApi.getValues() : {}; - - // 处理时间范围 - let start_timestamp = timestamp2string(getTodayStartTimestamp()); - let end_timestamp = timestamp2string(now.getTime() / 1000 + 3600); - - if ( - formValues.dateRange && - Array.isArray(formValues.dateRange) && - formValues.dateRange.length === 2 - ) { - start_timestamp = formValues.dateRange[0]; - end_timestamp = formValues.dateRange[1]; - } - - return { - username: formValues.username || '', - token_name: formValues.token_name || '', - model_name: formValues.model_name || '', - start_timestamp, - end_timestamp, - channel: formValues.channel || '', - group: formValues.group || '', - logType: formValues.logType ? parseInt(formValues.logType) : 0, - }; - }; - - const getLogSelfStat = async () => { - const { - token_name, - model_name, - start_timestamp, - end_timestamp, - group, - logType: formLogType, - } = getFormValues(); - const currentLogType = formLogType !== undefined ? formLogType : logType; - let localStartTimestamp = Date.parse(start_timestamp) / 1000; - let localEndTimestamp = Date.parse(end_timestamp) / 1000; - let url = `/api/log/self/stat?type=${currentLogType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&group=${group}`; - url = encodeURI(url); - let res = await API.get(url); - const { success, message, data } = res.data; - if (success) { - setStat(data); - } else { - showError(message); - } - }; - - const getLogStat = async () => { - const { - username, - token_name, - model_name, - start_timestamp, - end_timestamp, - channel, - group, - logType: formLogType, - } = getFormValues(); - const currentLogType = formLogType !== undefined ? formLogType : logType; - let localStartTimestamp = Date.parse(start_timestamp) / 1000; - let localEndTimestamp = Date.parse(end_timestamp) / 1000; - let url = `/api/log/stat?type=${currentLogType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}&group=${group}`; - url = encodeURI(url); - let res = await API.get(url); - const { success, message, data } = res.data; - if (success) { - setStat(data); - } else { - showError(message); - } - }; - - const handleEyeClick = async () => { - if (loadingStat) { - return; - } - setLoadingStat(true); - if (isAdminUser) { - await getLogStat(); - } else { - await getLogSelfStat(); - } - setShowStat(true); - setLoadingStat(false); - }; - - const showUserInfo = async (userId) => { - if (!isAdminUser) { - return; - } - const res = await API.get(`/api/user/${userId}`); - const { success, message, data } = res.data; - if (success) { - Modal.info({ - title: t('用户信息'), - content: ( -
-

- {t('用户名')}: {data.username} -

-

- {t('余额')}: {renderQuota(data.quota)} -

-

- {t('已用额度')}：{renderQuota(data.used_quota)} -

-

- {t('请求次数')}：{renderNumber(data.request_count)} -

-
- ), - centered: true, - }); - } else { - showError(message); - } - }; - - const setLogsFormat = (logs) => { - let expandDatesLocal = {}; - for (let i = 0; i < logs.length; i++) { - logs[i].timestamp2string = timestamp2string(logs[i].created_at); - logs[i].key = logs[i].id; - let other = getLogOther(logs[i].other); - let expandDataLocal = []; - if (isAdmin()) { - // let content = '渠道：' + logs[i].channel; - // if (other.admin_info !== undefined) { - // if ( - // other.admin_info.use_channel !== null && - // other.admin_info.use_channel !== undefined && - // other.admin_info.use_channel !== '' - // ) { - // // channel id array - // let useChannel = other.admin_info.use_channel; - // let useChannelStr = useChannel.join('->'); - // content = `渠道：${useChannelStr}`; - // } - // } - // expandDataLocal.push({ - // key: '渠道重试', - // value: content, - // }) - } - if (isAdminUser && (logs[i].type === 0 || logs[i].type === 2)) { - expandDataLocal.push({ - key: t('渠道信息'), - value: `${logs[i].channel} - ${logs[i].channel_name || '[未知]'}`, - }); - } - if (other?.ws || other?.audio) { - expandDataLocal.push({ - key: t('语音输入'), - value: other.audio_input, - }); - expandDataLocal.push({ - key: t('语音输出'), - value: other.audio_output, - }); - expandDataLocal.push({ - key: t('文字输入'), - value: other.text_input, - }); - expandDataLocal.push({ - key: t('文字输出'), - value: other.text_output, - }); - } - if (other?.cache_tokens > 0) { - expandDataLocal.push({ - key: t('缓存 Tokens'), - value: other.cache_tokens, - }); - } - if (other?.cache_creation_tokens > 0) { - expandDataLocal.push({ - key: t('缓存创建 Tokens'), - value: other.cache_creation_tokens, - }); - } - if (logs[i].type === 2) { - expandDataLocal.push({ - key: t('日志详情'), - value: other?.claude - ? renderClaudeLogContent( - other?.model_ratio, - other.completion_ratio, - other.model_price, - other.group_ratio, - other?.user_group_ratio, - other.cache_ratio || 1.0, - other.cache_creation_ratio || 1.0, - ) - : renderLogContent( - other?.model_ratio, - other.completion_ratio, - other.model_price, - other.group_ratio, - other?.user_group_ratio, - false, - 1.0, - other.web_search || false, - other.web_search_call_count || 0, - other.file_search || false, - other.file_search_call_count || 0, - ), - }); - } - if (logs[i].type === 2) { - let modelMapped = - other?.is_model_mapped && - other?.upstream_model_name && - other?.upstream_model_name !== ''; - if (modelMapped) { - expandDataLocal.push({ - key: t('请求并计费模型'), - value: logs[i].model_name, - }); - expandDataLocal.push({ - key: t('实际模型'), - value: other.upstream_model_name, - }); - } - 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, - ); - } 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, - ); - } - expandDataLocal.push({ - key: t('计费过程'), - value: content, - }); - if (other?.reasoning_effort) { - expandDataLocal.push({ - key: t('Reasoning Effort'), - value: other.reasoning_effort, - }); - } - } - expandDatesLocal[logs[i].key] = expandDataLocal; - } - - setExpandData(expandDatesLocal); - setLogs(logs); - }; - - const loadLogs = async (startIdx, pageSize, customLogType = null) => { - setLoading(true); - - let url = ''; - const { - username, - token_name, - model_name, - start_timestamp, - end_timestamp, - channel, - group, - logType: formLogType, - } = getFormValues(); - - // 使用传入的 logType 或者表单中的 logType 或者状态中的 logType - const currentLogType = - customLogType !== null - ? customLogType - : formLogType !== undefined - ? formLogType - : logType; - - let localStartTimestamp = Date.parse(start_timestamp) / 1000; - let localEndTimestamp = Date.parse(end_timestamp) / 1000; - if (isAdminUser) { - url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${currentLogType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}&group=${group}`; - } else { - url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${currentLogType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&group=${group}`; - } - url = encodeURI(url); - const res = await API.get(url); - const { success, message, data } = res.data; - if (success) { - const newPageData = data.items; - setActivePage(data.page); - setPageSize(data.page_size); - setLogCount(data.total); - - setLogsFormat(newPageData); - } else { - showError(message); - } - setLoading(false); - }; - - const handlePageChange = (page) => { - setActivePage(page); - loadLogs(page, pageSize).then((r) => { }); // 不传入logType，让其从表单获取最新值 - }; - - const handlePageSizeChange = async (size) => { - localStorage.setItem('page-size', size + ''); - setPageSize(size); - setActivePage(1); - loadLogs(activePage, size) - .then() - .catch((reason) => { - showError(reason); - }); - }; - - const refresh = async () => { - setActivePage(1); - handleEyeClick(); - await loadLogs(1, pageSize); // 不传入logType，让其从表单获取最新值 - }; - - const copyText = async (e, text) => { - e.stopPropagation(); - if (await copy(text)) { - showSuccess('已复制：' + text); - } else { - Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text }); - } - }; - - useEffect(() => { - const localPageSize = - parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE; - setPageSize(localPageSize); - loadLogs(activePage, localPageSize) - .then() - .catch((reason) => { - showError(reason); - }); - }, []); - - // 当 formApi 可用时，初始化统计 - useEffect(() => { - if (formApi) { - handleEyeClick(); - } - }, [formApi]); - - const expandRowRender = (record, index) => { - return ; - }; - - // 检查是否有任何记录有展开内容 - const hasExpandableRows = () => { - return logs.some( - (log) => expandData[log.key] && expandData[log.key].length > 0, - ); - }; - - const [compactMode, setCompactMode] = useTableCompactMode('logs'); - - return ( - <> - {renderColumnSelector()} - -
- - - {t('消耗额度')}: {renderQuota(stat.quota)} - - - RPM: {stat.rpm} - - - TPM: {stat.tpm} - - - - -
- - } - searchArea={ -
setFormApi(api)} - onSubmit={refresh} - allowEmpty={true} - autoComplete='off' - layout='vertical' - trigger='change' - stopValidateWithError={false} - > -
-
- {/* 时间选择器 */} -
- -
- - {/* 其他搜索字段 */} - } - placeholder={t('令牌名称')} - showClear - pure - size="small" - /> - - } - placeholder={t('模型名称')} - showClear - pure - size="small" - /> - - } - placeholder={t('分组')} - showClear - pure - size="small" - /> - - {isAdminUser && ( - <> - } - placeholder={t('渠道 ID')} - showClear - pure - size="small" - /> - } - placeholder={t('用户名称')} - showClear - pure - size="small" - /> - - )} -
- - {/* 操作按钮区域 */} -
- {/* 日志类型选择器 */} -
- { - // 延迟执行搜索，让表单值先更新 - setTimeout(() => { - refresh(); - }, 0); - }} - size="small" - > - - {t('全部')} - - - {t('充值')} - - - {t('消费')} - - - {t('管理')} - - - {t('系统')} - - - {t('错误')} - - -
- -
- - - -
-
-
-
- } - > - rest) : getVisibleColumns()} - {...(hasExpandableRows() && { - expandedRowRender: expandRowRender, - expandRowByClick: true, - rowExpandable: (record) => - expandData[record.key] && expandData[record.key].length > 0, - })} - dataSource={logs} - rowKey='key' - loading={loading} - scroll={compactMode ? undefined : { x: 'max-content' }} - className='rounded-xl overflow-hidden' - size='middle' - empty={ - - } - darkModeImage={ - - } - description={t('搜索无结果')} - style={{ padding: 30 }} - /> - } - pagination={{ - currentPage: activePage, - pageSize: pageSize, - total: logCount, - pageSizeOptions: [10, 20, 50, 100], - showSizeChanger: true, - onPageSizeChange: (size) => { - handlePageSizeChange(size); - }, - onPageChange: handlePageChange, - }} - /> - - - ); -}; - -export default LogsTable; +// 重构后的 LogsTable - 使用新的模块化架构 +export { default } from './usage-logs/index.jsx'; \ No newline at end of file diff --git a/web/src/components/table/channels/ChannelsActions.jsx b/web/src/components/table/channels/ChannelsActions.jsx index f244243c..ae64b188 100644 --- a/web/src/components/table/channels/ChannelsActions.jsx +++ b/web/src/components/table/channels/ChannelsActions.jsx @@ -35,9 +35,9 @@ const ChannelsActions = ({ t }) => { return ( -
+
{/* 第一行：批量操作按钮 + 设置开关 */} -
+
{/* 左侧：批量操作按钮 */}
-
+
setFormApi(api)} @@ -64,7 +64,7 @@ const ChannelsFilters = ({ layout="horizontal" trigger="change" stopValidateWithError={false} - className="flex flex-col md:flex-row items-center gap-4 w-full" + className="flex flex-col md:flex-row items-center gap-2 w-full" >
{ + return ( + +
+ + + {t('消耗额度')}: {renderQuota(stat.quota)} + + + RPM: {stat.rpm} + + + TPM: {stat.tpm} + + + + +
+ + ); +}; + +export default LogsActions; \ No newline at end of file diff --git a/web/src/components/table/usage-logs/UsageLogsColumnDefs.js b/web/src/components/table/usage-logs/UsageLogsColumnDefs.js new file mode 100644 index 00000000..628835d7 --- /dev/null +++ b/web/src/components/table/usage-logs/UsageLogsColumnDefs.js @@ -0,0 +1,549 @@ +import React from 'react'; +import { + Avatar, + Space, + Tag, + Tooltip, + Popover, + Typography +} from '@douyinfe/semi-ui'; +import { + timestamp2string, + renderGroup, + renderQuota, + stringToColor, + getLogOther, + renderModelTag, + renderClaudeLogContent, + renderClaudeModelPriceSimple, + renderLogContent, + renderModelPriceSimple, + renderAudioModelPrice, + renderClaudeModelPrice, + renderModelPrice +} from '../../../helpers'; +import { IconHelpCircle } from '@douyinfe/semi-icons'; +import { Route } from 'lucide-react'; + +const colors = [ + 'amber', + 'blue', + 'cyan', + 'green', + 'grey', + 'indigo', + 'light-blue', + 'lime', + 'orange', + 'pink', + 'purple', + 'red', + 'teal', + 'violet', + 'yellow', +]; + +// Render functions +function renderType(type, t) { + switch (type) { + case 1: + return ( + + {t('充值')} + + ); + case 2: + return ( + + {t('消费')} + + ); + case 3: + return ( + + {t('管理')} + + ); + case 4: + return ( + + {t('系统')} + + ); + case 5: + return ( + + {t('错误')} + + ); + default: + return ( + + {t('未知')} + + ); + } +} + +function renderIsStream(bool, t) { + if (bool) { + return ( + + {t('流')} + + ); + } else { + return ( + + {t('非流')} + + ); + } +} + +function renderUseTime(type, t) { + const time = parseInt(type); + if (time < 101) { + return ( + + {' '} + {time} s{' '} + + ); + } else if (time < 300) { + return ( + + {' '} + {time} s{' '} + + ); + } else { + return ( + + {' '} + {time} s{' '} + + ); + } +} + +function renderFirstUseTime(type, t) { + let time = parseFloat(type) / 1000.0; + time = time.toFixed(1); + if (time < 3) { + return ( + + {' '} + {time} s{' '} + + ); + } else if (time < 10) { + return ( + + {' '} + {time} s{' '} + + ); + } else { + return ( + + {' '} + {time} s{' '} + + ); + } +} + +function renderModelName(record, copyText, t) { + let other = getLogOther(record.other); + let modelMapped = + other?.is_model_mapped && + other?.upstream_model_name && + other?.upstream_model_name !== ''; + if (!modelMapped) { + return renderModelTag(record.model_name, { + onClick: (event) => { + copyText(event, record.model_name).then((r) => { }); + }, + }); + } else { + return ( + <> + + + +
+ + {t('请求并计费模型')}: + + {renderModelTag(record.model_name, { + onClick: (event) => { + copyText(event, record.model_name).then((r) => { }); + }, + })} +
+
+ + {t('实际模型')}: + + {renderModelTag(other.upstream_model_name, { + onClick: (event) => { + copyText(event, other.upstream_model_name).then( + (r) => { }, + ); + }, + })} +
+ +
+ } + > + {renderModelTag(record.model_name, { + onClick: (event) => { + copyText(event, record.model_name).then((r) => { }); + }, + suffixIcon: ( + + ), + })} + + + + ); + } +} + +export const getLogsColumns = ({ + t, + COLUMN_KEYS, + copyText, + showUserInfoFunc, + isAdminUser, +}) => { + return [ + { + key: COLUMN_KEYS.TIME, + title: t('时间'), + dataIndex: 'timestamp2string', + }, + { + key: COLUMN_KEYS.CHANNEL, + title: t('渠道'), + dataIndex: 'channel', + render: (text, record, index) => { + let isMultiKey = false; + let multiKeyIndex = -1; + let other = getLogOther(record.other); + if (other?.admin_info) { + let adminInfo = other.admin_info; + if (adminInfo?.is_multi_key) { + isMultiKey = true; + multiKeyIndex = adminInfo.multi_key_index; + } + } + + return isAdminUser && (record.type === 0 || record.type === 2 || record.type === 5) ? ( + + + + {text} + + + {isMultiKey && ( + + {multiKeyIndex} + + )} + + ) : null; + }, + }, + { + key: COLUMN_KEYS.USERNAME, + title: t('用户'), + dataIndex: 'username', + render: (text, record, index) => { + return isAdminUser ? ( +
+ { + event.stopPropagation(); + showUserInfoFunc(record.user_id); + }} + > + {typeof text === 'string' && text.slice(0, 1)} + + {text} +
+ ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.TOKEN, + title: t('令牌'), + dataIndex: 'token_name', + render: (text, record, index) => { + return record.type === 0 || record.type === 2 || record.type === 5 ? ( +
+ { + copyText(event, text); + }} + > + {' '} + {t(text)}{' '} + +
+ ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.GROUP, + title: t('分组'), + dataIndex: 'group', + render: (text, record, index) => { + if (record.type === 0 || record.type === 2 || record.type === 5) { + if (record.group) { + return <>{renderGroup(record.group)}; + } else { + let other = null; + try { + other = JSON.parse(record.other); + } catch (e) { + console.error( + `Failed to parse record.other: "${record.other}".`, + e, + ); + } + if (other === null) { + return <>; + } + if (other.group !== undefined) { + return <>{renderGroup(other.group)}; + } else { + return <>; + } + } + } else { + return <>; + } + }, + }, + { + key: COLUMN_KEYS.TYPE, + title: t('类型'), + dataIndex: 'type', + render: (text, record, index) => { + return <>{renderType(text, t)}; + }, + }, + { + key: COLUMN_KEYS.MODEL, + title: t('模型'), + dataIndex: 'model_name', + render: (text, record, index) => { + return record.type === 0 || record.type === 2 || record.type === 5 ? ( + <>{renderModelName(record, copyText, t)} + ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.USE_TIME, + title: t('用时/首字'), + dataIndex: 'use_time', + render: (text, record, index) => { + if (!(record.type === 2 || record.type === 5)) { + return <>; + } + if (record.is_stream) { + let other = getLogOther(record.other); + return ( + <> + + {renderUseTime(text, t)} + {renderFirstUseTime(other?.frt, t)} + {renderIsStream(record.is_stream, t)} + + + ); + } else { + return ( + <> + + {renderUseTime(text, t)} + {renderIsStream(record.is_stream, t)} + + + ); + } + }, + }, + { + key: COLUMN_KEYS.PROMPT, + title: t('提示'), + dataIndex: 'prompt_tokens', + render: (text, record, index) => { + return record.type === 0 || record.type === 2 || record.type === 5 ? ( + <>{ {text} } + ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.COMPLETION, + title: t('补全'), + dataIndex: 'completion_tokens', + render: (text, record, index) => { + return parseInt(text) > 0 && + (record.type === 0 || record.type === 2 || record.type === 5) ? ( + <>{ {text} } + ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.COST, + title: t('花费'), + dataIndex: 'quota', + render: (text, record, index) => { + return record.type === 0 || record.type === 2 || record.type === 5 ? ( + <>{renderQuota(text, 6)} + ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.IP, + title: ( +
+ {t('IP')} + + + +
+ ), + dataIndex: 'ip', + render: (text, record, index) => { + return (record.type === 2 || record.type === 5) && text ? ( + + { + copyText(event, text); + }} + > + {text} + + + ) : ( + <> + ); + }, + }, + { + key: COLUMN_KEYS.RETRY, + title: t('重试'), + dataIndex: 'retry', + render: (text, record, index) => { + if (!(record.type === 2 || record.type === 5)) { + return <>; + } + let content = t('渠道') + `：${record.channel}`; + if (record.other !== '') { + let other = JSON.parse(record.other); + if (other === null) { + return <>; + } + if (other.admin_info !== undefined) { + if ( + other.admin_info.use_channel !== null && + other.admin_info.use_channel !== undefined && + other.admin_info.use_channel !== '' + ) { + let useChannel = other.admin_info.use_channel; + let useChannelStr = useChannel.join('->'); + content = t('渠道') + `：${useChannelStr}`; + } + } + } + return isAdminUser ?
{content}
: <>; + }, + }, + { + key: COLUMN_KEYS.DETAILS, + title: t('详情'), + dataIndex: 'content', + fixed: 'right', + render: (text, record, index) => { + let other = getLogOther(record.other); + if (other == null || record.type !== 2) { + return ( + + {text} + + ); + } + let content = other?.claude + ? renderClaudeModelPriceSimple( + other.model_ratio, + other.model_price, + 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, + ) + : renderModelPriceSimple( + other.model_ratio, + other.model_price, + other.group_ratio, + other?.user_group_ratio, + other.cache_tokens || 0, + other.cache_ratio || 1.0, + ); + return ( + + {content} + + ); + }, + }, + ]; +}; \ No newline at end of file diff --git a/web/src/components/table/usage-logs/UsageLogsFilters.jsx b/web/src/components/table/usage-logs/UsageLogsFilters.jsx new file mode 100644 index 00000000..6db77906 --- /dev/null +++ b/web/src/components/table/usage-logs/UsageLogsFilters.jsx @@ -0,0 +1,169 @@ +import React from 'react'; +import { Button, Form } from '@douyinfe/semi-ui'; +import { IconSearch } from '@douyinfe/semi-icons'; + +const LogsFilters = ({ + formInitValues, + setFormApi, + refresh, + setShowColumnSelector, + formApi, + setLogType, + loading, + isAdminUser, + t, +}) => { + return ( + setFormApi(api)} + onSubmit={refresh} + allowEmpty={true} + autoComplete='off' + layout='vertical' + trigger='change' + stopValidateWithError={false} + > +
+
+ {/* 时间选择器 */} +
+ +
+ + {/* 其他搜索字段 */} + } + placeholder={t('令牌名称')} + showClear + pure + size="small" + /> + + } + placeholder={t('模型名称')} + showClear + pure + size="small" + /> + + } + placeholder={t('分组')} + showClear + pure + size="small" + /> + + {isAdminUser && ( + <> + } + placeholder={t('渠道 ID')} + showClear + pure + size="small" + /> + } + placeholder={t('用户名称')} + showClear + pure + size="small" + /> + + )} +
+ + {/* 操作按钮区域 */} +
+ {/* 日志类型选择器 */} +
+ { + // 延迟执行搜索，让表单值先更新 + setTimeout(() => { + refresh(); + }, 0); + }} + size="small" + > + + {t('全部')} + + + {t('充值')} + + + {t('消费')} + + + {t('管理')} + + + {t('系统')} + + + {t('错误')} + + +
+ +
+ + + +
+
+
+ + ); +}; + +export default LogsFilters; \ No newline at end of file diff --git a/web/src/components/table/usage-logs/UsageLogsTable.jsx b/web/src/components/table/usage-logs/UsageLogsTable.jsx new file mode 100644 index 00000000..a6a33bbf --- /dev/null +++ b/web/src/components/table/usage-logs/UsageLogsTable.jsx @@ -0,0 +1,107 @@ +import React, { useMemo } from 'react'; +import { Table, Empty, Descriptions } from '@douyinfe/semi-ui'; +import { + IllustrationNoResult, + IllustrationNoResultDark, +} from '@douyinfe/semi-illustrations'; +import { getLogsColumns } from './UsageLogsColumnDefs.js'; + +const LogsTable = (logsData) => { + const { + logs, + expandData, + loading, + activePage, + pageSize, + logCount, + compactMode, + visibleColumns, + handlePageChange, + handlePageSizeChange, + copyText, + showUserInfoFunc, + hasExpandableRows, + isAdminUser, + t, + COLUMN_KEYS, + } = logsData; + + // Get all columns + const allColumns = useMemo(() => { + return getLogsColumns({ + t, + COLUMN_KEYS, + copyText, + showUserInfoFunc, + isAdminUser, + }); + }, [ + t, + COLUMN_KEYS, + copyText, + showUserInfoFunc, + isAdminUser, + ]); + + // Filter columns based on visibility settings + const getVisibleColumns = () => { + return allColumns.filter((column) => visibleColumns[column.key]); + }; + + const visibleColumnsList = useMemo(() => { + return getVisibleColumns(); + }, [visibleColumns, allColumns]); + + const tableColumns = useMemo(() => { + return compactMode + ? visibleColumnsList.map(({ fixed, ...rest }) => rest) + : visibleColumnsList; + }, [compactMode, visibleColumnsList]); + + const expandRowRender = (record, index) => { + return ; + }; + + return ( +
+ expandData[record.key] && expandData[record.key].length > 0, + })} + dataSource={logs} + rowKey='key' + loading={loading} + scroll={compactMode ? undefined : { x: 'max-content' }} + className='rounded-xl overflow-hidden' + size='middle' + empty={ + + } + darkModeImage={ + + } + description={t('搜索无结果')} + style={{ padding: 30 }} + /> + } + pagination={{ + currentPage: activePage, + pageSize: pageSize, + total: logCount, + pageSizeOptions: [10, 20, 50, 100], + showSizeChanger: true, + onPageSizeChange: (size) => { + handlePageSizeChange(size); + }, + onPageChange: handlePageChange, + }} + /> + ); +}; + +export default LogsTable; \ No newline at end of file diff --git a/web/src/components/table/usage-logs/index.jsx b/web/src/components/table/usage-logs/index.jsx new file mode 100644 index 00000000..e53d71b3 --- /dev/null +++ b/web/src/components/table/usage-logs/index.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import CardPro from '../../common/ui/CardPro.js'; +import LogsTable from './UsageLogsTable.jsx'; +import LogsActions from './UsageLogsActions.jsx'; +import LogsFilters from './UsageLogsFilters.jsx'; +import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx'; +import UserInfoModal from './modals/UserInfoModal.jsx'; +import { useLogsData } from '../../../hooks/usage-logs/useUsageLogsData.js'; + +const LogsPage = () => { + const logsData = useLogsData(); + + return ( + <> + {/* Modals */} + + + + {/* Main Content */} + } + searchArea={} + > + + + + ); +}; + +export default LogsPage; \ No newline at end of file diff --git a/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx b/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx new file mode 100644 index 00000000..cfc20e2e --- /dev/null +++ b/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { Modal, Button, Checkbox } from '@douyinfe/semi-ui'; +import { getLogsColumns } from '../UsageLogsColumnDefs.js'; + +const ColumnSelectorModal = ({ + showColumnSelector, + setShowColumnSelector, + visibleColumns, + handleColumnVisibilityChange, + handleSelectAll, + initDefaultColumns, + COLUMN_KEYS, + isAdminUser, + copyText, + showUserInfoFunc, + t, +}) => { + // Get all columns for display in selector + const allColumns = getLogsColumns({ + t, + COLUMN_KEYS, + copyText, + showUserInfoFunc, + isAdminUser, + }); + + return ( + setShowColumnSelector(false)} + footer={ +
+ + + +
+ } + > +
+ v === true)} + indeterminate={ + Object.values(visibleColumns).some((v) => v === true) && + !Object.values(visibleColumns).every((v) => v === true) + } + onChange={(e) => handleSelectAll(e.target.checked)} + > + {t('全选')} + +
+
+ {allColumns.map((column) => { + // Skip admin-only columns for non-admin users + if ( + !isAdminUser && + (column.key === COLUMN_KEYS.CHANNEL || + column.key === COLUMN_KEYS.USERNAME || + column.key === COLUMN_KEYS.RETRY) + ) { + return null; + } + + return ( +
+ + handleColumnVisibilityChange(column.key, e.target.checked) + } + > + {column.title} + +
+ ); + })} +
+ + ); +}; + +export default ColumnSelectorModal; \ No newline at end of file diff --git a/web/src/components/table/usage-logs/modals/UserInfoModal.jsx b/web/src/components/table/usage-logs/modals/UserInfoModal.jsx new file mode 100644 index 00000000..5b9abe71 --- /dev/null +++ b/web/src/components/table/usage-logs/modals/UserInfoModal.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Modal } from '@douyinfe/semi-ui'; +import { renderQuota, renderNumber } from '../../../../helpers'; + +const UserInfoModal = ({ + showUserInfo, + setShowUserInfoModal, + userInfoData, + t, +}) => { + return ( + setShowUserInfoModal(false)} + footer={null} + centered={true} + > + {userInfoData && ( +
+

+ {t('用户名')}: {userInfoData.username} +

+

+ {t('余额')}: {renderQuota(userInfoData.quota)} +

+

+ {t('已用额度')}：{renderQuota(userInfoData.used_quota)} +

+

+ {t('请求次数')}：{renderNumber(userInfoData.request_count)} +

+
+ )} + + ); +}; + +export default UserInfoModal; \ No newline at end of file diff --git a/web/src/hooks/usage-logs/useUsageLogsData.js b/web/src/hooks/usage-logs/useUsageLogsData.js new file mode 100644 index 00000000..326f6afc --- /dev/null +++ b/web/src/hooks/usage-logs/useUsageLogsData.js @@ -0,0 +1,601 @@ +import { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Modal } from '@douyinfe/semi-ui'; +import { + API, + getTodayStartTimestamp, + isAdmin, + showError, + showSuccess, + timestamp2string, + renderQuota, + renderNumber, + getLogOther, + copy, + renderClaudeLogContent, + renderLogContent, + renderAudioModelPrice, + renderClaudeModelPrice, + renderModelPrice +} from '../../helpers'; +import { ITEMS_PER_PAGE } from '../../constants'; +import { useTableCompactMode } from '../common/useTableCompactMode'; + +export const useLogsData = () => { + const { t } = useTranslation(); + + // Define column keys for selection + const COLUMN_KEYS = { + TIME: 'time', + CHANNEL: 'channel', + USERNAME: 'username', + TOKEN: 'token', + GROUP: 'group', + TYPE: 'type', + MODEL: 'model', + USE_TIME: 'use_time', + PROMPT: 'prompt', + COMPLETION: 'completion', + COST: 'cost', + RETRY: 'retry', + IP: 'ip', + DETAILS: 'details', + }; + + // Basic state + const [logs, setLogs] = useState([]); + const [expandData, setExpandData] = useState({}); + const [showStat, setShowStat] = useState(false); + const [loading, setLoading] = useState(false); + const [loadingStat, setLoadingStat] = useState(false); + const [activePage, setActivePage] = useState(1); + const [logCount, setLogCount] = useState(ITEMS_PER_PAGE); + const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); + const [logType, setLogType] = useState(0); + + // User and admin + const isAdminUser = isAdmin(); + + // Statistics state + const [stat, setStat] = useState({ + quota: 0, + token: 0, + }); + + // Form state + const [formApi, setFormApi] = useState(null); + let now = new Date(); + const formInitValues = { + username: '', + token_name: '', + model_name: '', + channel: '', + group: '', + dateRange: [ + timestamp2string(getTodayStartTimestamp()), + timestamp2string(now.getTime() / 1000 + 3600), + ], + logType: '0', + }; + + // Column visibility state + const [visibleColumns, setVisibleColumns] = useState({}); + const [showColumnSelector, setShowColumnSelector] = useState(false); + + // Compact mode + const [compactMode, setCompactMode] = useTableCompactMode('logs'); + + // User info modal state + const [showUserInfo, setShowUserInfoModal] = useState(false); + const [userInfoData, setUserInfoData] = useState(null); + + // Load saved column preferences from localStorage + useEffect(() => { + const savedColumns = localStorage.getItem('logs-table-columns'); + if (savedColumns) { + try { + const parsed = JSON.parse(savedColumns); + const defaults = getDefaultColumnVisibility(); + const merged = { ...defaults, ...parsed }; + setVisibleColumns(merged); + } catch (e) { + console.error('Failed to parse saved column preferences', e); + initDefaultColumns(); + } + } else { + initDefaultColumns(); + } + }, []); + + // Get default column visibility based on user role + const getDefaultColumnVisibility = () => { + return { + [COLUMN_KEYS.TIME]: true, + [COLUMN_KEYS.CHANNEL]: isAdminUser, + [COLUMN_KEYS.USERNAME]: isAdminUser, + [COLUMN_KEYS.TOKEN]: true, + [COLUMN_KEYS.GROUP]: true, + [COLUMN_KEYS.TYPE]: true, + [COLUMN_KEYS.MODEL]: true, + [COLUMN_KEYS.USE_TIME]: true, + [COLUMN_KEYS.PROMPT]: true, + [COLUMN_KEYS.COMPLETION]: true, + [COLUMN_KEYS.COST]: true, + [COLUMN_KEYS.RETRY]: isAdminUser, + [COLUMN_KEYS.IP]: true, + [COLUMN_KEYS.DETAILS]: true, + }; + }; + + // Initialize default column visibility + const initDefaultColumns = () => { + const defaults = getDefaultColumnVisibility(); + setVisibleColumns(defaults); + localStorage.setItem('logs-table-columns', JSON.stringify(defaults)); + }; + + // Handle column visibility change + const handleColumnVisibilityChange = (columnKey, checked) => { + const updatedColumns = { ...visibleColumns, [columnKey]: checked }; + setVisibleColumns(updatedColumns); + }; + + // Handle "Select All" checkbox + const handleSelectAll = (checked) => { + const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]); + const updatedColumns = {}; + + allKeys.forEach((key) => { + if ( + (key === COLUMN_KEYS.CHANNEL || + key === COLUMN_KEYS.USERNAME || + key === COLUMN_KEYS.RETRY) && + !isAdminUser + ) { + updatedColumns[key] = false; + } else { + updatedColumns[key] = checked; + } + }); + + setVisibleColumns(updatedColumns); + }; + + // Update table when column visibility changes + useEffect(() => { + if (Object.keys(visibleColumns).length > 0) { + localStorage.setItem( + 'logs-table-columns', + JSON.stringify(visibleColumns), + ); + } + }, [visibleColumns]); + + // 获取表单值的辅助函数，确保所有值都是字符串 + const getFormValues = () => { + const formValues = formApi ? formApi.getValues() : {}; + + let start_timestamp = timestamp2string(getTodayStartTimestamp()); + let end_timestamp = timestamp2string(now.getTime() / 1000 + 3600); + + if ( + formValues.dateRange && + Array.isArray(formValues.dateRange) && + formValues.dateRange.length === 2 + ) { + start_timestamp = formValues.dateRange[0]; + end_timestamp = formValues.dateRange[1]; + } + + return { + username: formValues.username || '', + token_name: formValues.token_name || '', + model_name: formValues.model_name || '', + start_timestamp, + end_timestamp, + channel: formValues.channel || '', + group: formValues.group || '', + logType: formValues.logType ? parseInt(formValues.logType) : 0, + }; + }; + + // Statistics functions + const getLogSelfStat = async () => { + const { + token_name, + model_name, + start_timestamp, + end_timestamp, + group, + logType: formLogType, + } = getFormValues(); + const currentLogType = formLogType !== undefined ? formLogType : logType; + let localStartTimestamp = Date.parse(start_timestamp) / 1000; + let localEndTimestamp = Date.parse(end_timestamp) / 1000; + let url = `/api/log/self/stat?type=${currentLogType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&group=${group}`; + url = encodeURI(url); + let res = await API.get(url); + const { success, message, data } = res.data; + if (success) { + setStat(data); + } else { + showError(message); + } + }; + + const getLogStat = async () => { + const { + username, + token_name, + model_name, + start_timestamp, + end_timestamp, + channel, + group, + logType: formLogType, + } = getFormValues(); + const currentLogType = formLogType !== undefined ? formLogType : logType; + let localStartTimestamp = Date.parse(start_timestamp) / 1000; + let localEndTimestamp = Date.parse(end_timestamp) / 1000; + let url = `/api/log/stat?type=${currentLogType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}&group=${group}`; + url = encodeURI(url); + let res = await API.get(url); + const { success, message, data } = res.data; + if (success) { + setStat(data); + } else { + showError(message); + } + }; + + const handleEyeClick = async () => { + if (loadingStat) { + return; + } + setLoadingStat(true); + if (isAdminUser) { + await getLogStat(); + } else { + await getLogSelfStat(); + } + setShowStat(true); + setLoadingStat(false); + }; + + // User info function + const showUserInfoFunc = async (userId) => { + if (!isAdminUser) { + return; + } + const res = await API.get(`/api/user/${userId}`); + const { success, message, data } = res.data; + if (success) { + setUserInfoData(data); + setShowUserInfoModal(true); + } else { + showError(message); + } + }; + + // Format logs data + const setLogsFormat = (logs) => { + let expandDatesLocal = {}; + for (let i = 0; i < logs.length; i++) { + logs[i].timestamp2string = timestamp2string(logs[i].created_at); + logs[i].key = logs[i].id; + let other = getLogOther(logs[i].other); + let expandDataLocal = []; + + if (isAdminUser && (logs[i].type === 0 || logs[i].type === 2)) { + expandDataLocal.push({ + key: t('渠道信息'), + value: `${logs[i].channel} - ${logs[i].channel_name || '[未知]'}`, + }); + } + if (other?.ws || other?.audio) { + expandDataLocal.push({ + key: t('语音输入'), + value: other.audio_input, + }); + expandDataLocal.push({ + key: t('语音输出'), + value: other.audio_output, + }); + expandDataLocal.push({ + key: t('文字输入'), + value: other.text_input, + }); + expandDataLocal.push({ + key: t('文字输出'), + value: other.text_output, + }); + } + if (other?.cache_tokens > 0) { + expandDataLocal.push({ + key: t('缓存 Tokens'), + value: other.cache_tokens, + }); + } + if (other?.cache_creation_tokens > 0) { + expandDataLocal.push({ + key: t('缓存创建 Tokens'), + value: other.cache_creation_tokens, + }); + } + if (logs[i].type === 2) { + expandDataLocal.push({ + key: t('日志详情'), + value: other?.claude + ? renderClaudeLogContent( + other?.model_ratio, + other.completion_ratio, + other.model_price, + other.group_ratio, + other?.user_group_ratio, + other.cache_ratio || 1.0, + other.cache_creation_ratio || 1.0, + ) + : renderLogContent( + other?.model_ratio, + other.completion_ratio, + other.model_price, + other.group_ratio, + other?.user_group_ratio, + false, + 1.0, + other.web_search || false, + other.web_search_call_count || 0, + other.file_search || false, + other.file_search_call_count || 0, + ), + }); + } + if (logs[i].type === 2) { + let modelMapped = + other?.is_model_mapped && + other?.upstream_model_name && + other?.upstream_model_name !== ''; + if (modelMapped) { + expandDataLocal.push({ + key: t('请求并计费模型'), + value: logs[i].model_name, + }); + expandDataLocal.push({ + key: t('实际模型'), + value: other.upstream_model_name, + }); + } + 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, + ); + } 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, + ); + } + expandDataLocal.push({ + key: t('计费过程'), + value: content, + }); + if (other?.reasoning_effort) { + expandDataLocal.push({ + key: t('Reasoning Effort'), + value: other.reasoning_effort, + }); + } + } + expandDatesLocal[logs[i].key] = expandDataLocal; + } + + setExpandData(expandDatesLocal); + setLogs(logs); + }; + + // Load logs function + const loadLogs = async (startIdx, pageSize, customLogType = null) => { + setLoading(true); + + let url = ''; + const { + username, + token_name, + model_name, + start_timestamp, + end_timestamp, + channel, + group, + logType: formLogType, + } = getFormValues(); + + const currentLogType = + customLogType !== null + ? customLogType + : formLogType !== undefined + ? formLogType + : logType; + + let localStartTimestamp = Date.parse(start_timestamp) / 1000; + let localEndTimestamp = Date.parse(end_timestamp) / 1000; + if (isAdminUser) { + url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${currentLogType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}&group=${group}`; + } else { + url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${currentLogType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&group=${group}`; + } + url = encodeURI(url); + const res = await API.get(url); + const { success, message, data } = res.data; + if (success) { + const newPageData = data.items; + setActivePage(data.page); + setPageSize(data.page_size); + setLogCount(data.total); + + setLogsFormat(newPageData); + } else { + showError(message); + } + setLoading(false); + }; + + // Page handlers + const handlePageChange = (page) => { + setActivePage(page); + loadLogs(page, pageSize).then((r) => { }); + }; + + const handlePageSizeChange = async (size) => { + localStorage.setItem('page-size', size + ''); + setPageSize(size); + setActivePage(1); + loadLogs(activePage, size) + .then() + .catch((reason) => { + showError(reason); + }); + }; + + // Refresh function + const refresh = async () => { + setActivePage(1); + handleEyeClick(); + await loadLogs(1, pageSize); + }; + + // Copy text function + const copyText = async (e, text) => { + e.stopPropagation(); + if (await copy(text)) { + showSuccess('已复制：' + text); + } else { + Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text }); + } + }; + + // Initialize data + useEffect(() => { + const localPageSize = + parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE; + setPageSize(localPageSize); + loadLogs(activePage, localPageSize) + .then() + .catch((reason) => { + showError(reason); + }); + }, []); + + // Initialize statistics when formApi is available + useEffect(() => { + if (formApi) { + handleEyeClick(); + } + }, [formApi]); + + // Check if any record has expandable content + const hasExpandableRows = () => { + return logs.some( + (log) => expandData[log.key] && expandData[log.key].length > 0, + ); + }; + + return { + // Basic state + logs, + expandData, + showStat, + loading, + loadingStat, + activePage, + logCount, + pageSize, + logType, + stat, + isAdminUser, + + // Form state + formApi, + setFormApi, + formInitValues, + getFormValues, + + // Column visibility + visibleColumns, + showColumnSelector, + setShowColumnSelector, + handleColumnVisibilityChange, + handleSelectAll, + initDefaultColumns, + COLUMN_KEYS, + + // Compact mode + compactMode, + setCompactMode, + + // User info modal + showUserInfo, + setShowUserInfoModal, + userInfoData, + showUserInfoFunc, + + // Functions + loadLogs, + handlePageChange, + handlePageSizeChange, + refresh, + copyText, + handleEyeClick, + setLogsFormat, + hasExpandableRows, + setLogType, + + // Translation + t, + }; +}; \ No newline at end of file