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

optimize： channel affinity tips

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

@@ -20,12 +20,12 @@ For commercial licensing, please contact [email protected]
 import React from 'react';
 import {
   Avatar,
-  Button,
   Space,
   Tag,
   Tooltip,
   Popover,
   Typography,
+  Button
 } from '@douyinfe/semi-ui';
 import {
   timestamp2string,
@@ -41,8 +41,8 @@ import {
   renderClaudeModelPrice,
   renderModelPrice,
 } from '../../../helpers';
-import { IconHelpCircle, IconStarStroked } from '@douyinfe/semi-icons';
-import { Route } from 'lucide-react';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+import { Route, Sparkles } from 'lucide-react';
 
 const colors = [
   'amber',
@@ -307,6 +307,9 @@ export const getLogsColumns = ({
       render: (text, record, index) => {
         let isMultiKey = false;
         let multiKeyIndex = -1;
+        let content = t('渠道') + `：${record.channel}`;
+        let affinity = null;
+        let showMarker = false;
         let other = getLogOther(record.other);
         if (other?.admin_info) {
           let adminInfo = other.admin_info;
@@ -314,21 +317,71 @@ export const getLogsColumns = ({
             isMultiKey = true;
             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 &&
           (record.type === 0 || record.type === 2 || record.type === 5) ? (
           <Space>
-            <Tooltip content={record.channel_name || t('未知渠道')}>
-              <span>
-                <Tag
-                  color={colors[parseInt(text) % colors.length]}
-                  shape='circle'
+            <span style={{ position: 'relative', display: 'inline-block' }}>
+              <Tooltip content={record.channel_name || t('未知渠道')}>
+                <span>
+                  <Tag
+                    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}
-                </Tag>
-              </span>
-            </Tooltip>
+                  <span
+                    style={{
+                      position: 'absolute',
+                      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 && (
               <Tag color='white' shape='circle'>
                 {multiKeyIndex}
@@ -559,7 +612,6 @@ export const getLogsColumns = ({
           return <></>;
         }
         let content = t('渠道') + `：${record.channel}`;
-        let affinity = null;
         if (record.other !== '') {
           let other = JSON.parse(record.other);
           if (other === null) {
@@ -567,60 +619,17 @@ export const getLogsColumns = ({
           }
           if (other.admin_info !== undefined) {
             if (
-              other.admin_info.use_channel !== null &&
-              other.admin_info.use_channel !== undefined &&
-              other.admin_info.use_channel !== ''
+                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}`;
             }
-            if (other.admin_info.channel_affinity) {
-              affinity = other.admin_info.channel_affinity;
-            }
           }
         }
-        return isAdminUser ? (
-          <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>
-        ) : (
-          <></>
-        );
+        return isAdminUser ? <div>{content}</div> : <></>;
       },
     },
     {