Skip to content

phsl / new-api

Go to a project
Commit c86cd86c by Calcium-Ion Committed by GitHub
Options

Merge pull request #2898 from seefs001/feature/channel-affinity-tips 

optimize： channel affinity tips
parents 28b53e12 d25d6ec5
Showing with 69 additions and 60 deletions
web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx
...@@ -20,12 +20,12 @@ For commercial licensing, please contact support@quantumnous.com ...@@ -20,12 +20,12 @@ For commercial licensing, please contact support@quantumnous.com
import React from 'react'; import React from 'react';
import { import {
Avatar, Avatar,
Button,
Space, Space,
Tag, Tag,
Tooltip, Tooltip,
Popover, Popover,
Typography, Typography,
Button
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
timestamp2string, timestamp2string,
...@@ -41,8 +41,8 @@ import { ...@@ -41,8 +41,8 @@ import {
renderClaudeModelPrice, renderClaudeModelPrice,
renderModelPrice, renderModelPrice,
} from '../../../helpers'; } from '../../../helpers';
import { IconHelpCircle, IconStarStroked } from '@douyinfe/semi-icons'; import { IconHelpCircle } from '@douyinfe/semi-icons';
import { Route } from 'lucide-react'; import { Route, Sparkles } from 'lucide-react';
const colors = [ const colors = [
'amber', 'amber',
...@@ -307,6 +307,9 @@ export const getLogsColumns = ({ ...@@ -307,6 +307,9 @@ export const getLogsColumns = ({
render: (text, record, index) => { render: (text, record, index) => {
let isMultiKey = false; let isMultiKey = false;
let multiKeyIndex = -1; let multiKeyIndex = -1;
let content = t('渠道') + `：${record.channel}`;
let affinity = null;
let showMarker = false;
let other = getLogOther(record.other); let other = getLogOther(record.other);
if (other?.admin_info) { if (other?.admin_info) {
let adminInfo = other.admin_info; let adminInfo = other.admin_info;
...@@ -314,21 +317,71 @@ export const getLogsColumns = ({ ...@@ -314,21 +317,71 @@ export const getLogsColumns = ({
isMultiKey = true; isMultiKey = true;
multiKeyIndex = adminInfo.multi_key_index; multiKeyIndex = adminInfo.multi_key_index;
} }
if (
Array.isArray(adminInfo.use_channel) &&
adminInfo.use_channel.length > 0
) {
content = t('渠道') + `：${adminInfo.use_channel.join('->')}`;
}
if (adminInfo.channel_affinity) {
affinity = adminInfo.channel_affinity;
showMarker = true;
}
} }
return isAdminUser && return isAdminUser &&
(record.type === 0 || record.type === 2 || record.type === 5) ? ( (record.type === 0 || record.type === 2 || record.type === 5) ? (
<Space> <Space>
<Tooltip content={record.channel_name || t('未知渠道')}> <span style={{ position: 'relative', display: 'inline-block' }}>
<span> <Tooltip content={record.channel_name || t('未知渠道')}>
<Tag <span>
color={colors[parseInt(text) % colors.length]} <Tag
shape='circle' color={colors[parseInt(text) % colors.length]}
shape='circle'
>
{text}
</Tag>
</span>
</Tooltip>
{showMarker && (
<Tooltip
content={
<div style={{ lineHeight: 1.6 }}>
<div>{content}</div>
{affinity ? (
<div style={{ marginTop: 6 }}>
{buildChannelAffinityTooltip(affinity, t)}
</div>
) : null}
</div>
}
> >
{text} <span
</Tag> style={{
</span> position: 'absolute',
</Tooltip> right: -4,
top: -4,
lineHeight: 1,
fontWeight: 600,
color: '#f59e0b',
cursor: 'pointer',
userSelect: 'none',
}}
onClick={(e) => {
e.stopPropagation();
openChannelAffinityUsageCacheModal?.(affinity);
}}
>
<Sparkles
size={14}
strokeWidth={2}
color='currentColor'
fill='currentColor'
/>
</span>
</Tooltip>
)}
</span>
{isMultiKey && ( {isMultiKey && (
<Tag color='white' shape='circle'> <Tag color='white' shape='circle'>
{multiKeyIndex} {multiKeyIndex}
...@@ -559,7 +612,6 @@ export const getLogsColumns = ({ ...@@ -559,7 +612,6 @@ export const getLogsColumns = ({
return <></>; return <></>;
} }
let content = t('渠道') + `：${record.channel}`; let content = t('渠道') + `：${record.channel}`;
let affinity = null;
if (record.other !== '') { if (record.other !== '') {
let other = JSON.parse(record.other); let other = JSON.parse(record.other);
if (other === null) { if (other === null) {
...@@ -567,60 +619,17 @@ export const getLogsColumns = ({ ...@@ -567,60 +619,17 @@ export const getLogsColumns = ({
} }
if (other.admin_info !== undefined) { if (other.admin_info !== undefined) {
if ( if (
other.admin_info.use_channel !== null && other.admin_info.use_channel !== null &&
other.admin_info.use_channel !== undefined && other.admin_info.use_channel !== undefined &&
other.admin_info.use_channel !== '' other.admin_info.use_channel !== ''
) { ) {
let useChannel = other.admin_info.use_channel; let useChannel = other.admin_info.use_channel;
let useChannelStr = useChannel.join('->'); let useChannelStr = useChannel.join('->');
content = t('渠道') + `：${useChannelStr}`; content = t('渠道') + `：${useChannelStr}`;
} }
if (other.admin_info.channel_affinity) {
affinity = other.admin_info.channel_affinity;
}
} }
} }
return isAdminUser ? ( return isAdminUser ? <div>{content}</div> : <></>;
<Space>
<div>{content}</div>
{affinity ? (
<Tooltip
content={
<div>
{buildChannelAffinityTooltip(affinity, t)}
<div style={{ marginTop: 6 }}>
<Button
theme='borderless'
size='small'
onClick={(e) => {
e.stopPropagation();
openChannelAffinityUsageCacheModal?.(affinity);
}}
>
{t('查看详情')}
</Button>
</div>
</div>
}
>
<span>
<Tag
className='channel-affinity-tag'
color='cyan'
shape='circle'
>
<span className='channel-affinity-tag-content'>
<IconStarStroked style={{ fontSize: 13 }} />
{t('优选')}
</span>
</Tag>
</span>
</Tooltip>
) : null}
</Space>
) : (
<></>
);
}, },
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment