✨ feat(channel): enhance channel status management

web/src/components/table/ChannelsTable.js

@@ -42,6 +42,7 @@ import {
   IconTreeTriangleDown,
   IconSearch,
   IconMore,
+  IconList
 } from '@douyinfe/semi-icons';
 import { loadChannelModels, isMobile, copy } from '../../helpers';
 import EditTagModal from '../../pages/Channel/EditTagModal.js';
@@ -53,7 +54,7 @@ const ChannelsTable = () => {
 
   let type2label = undefined;
 
-  const renderType = (type) => {
+  const renderType = (type, multiKey = false) => {
     if (!type2label) {
       type2label = new Map();
       for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
@@ -61,12 +62,24 @@ const ChannelsTable = () => {
       }
       type2label[0] = { value: 0, label: t('未知类型'), color: 'grey' };
     }
+    
+    let icon = getChannelIcon(type);
+    
+    if (multiKey) {
+      icon = (
+        <div className="flex items-center gap-1">
+          <IconList className="text-blue-500" />
+          {icon}
+        </div>
+      );
+    }
+    
     return (
       <Tag
         size='large'
         color={type2label[type]?.color}
         shape='circle'
-        prefixIcon={getChannelIcon(type)}
+        prefixIcon={icon}
       >
         {type2label[type]?.label}
       </Tag>
@@ -86,7 +99,19 @@ const ChannelsTable = () => {
     );
   };
 
-  const renderStatus = (status) => {
+  const renderStatus = (status, channelInfo = undefined) => {
+    if (channelInfo) {
+      if (channelInfo.is_multi_key) {
+        let keySize = channelInfo.multi_key_size;
+        let enabledKeySize = keySize;
+        if (channelInfo.multi_key_status_list) {
+          // multi_key_status_list is a map, key is key, value is status
+          // get multi_key_status_list length
+          enabledKeySize = keySize - Object.keys(channelInfo.multi_key_status_list).length;
+        }
+        return renderMultiKeyStatus(status, keySize, enabledKeySize);
+      }
+    }
     switch (status) {
       case 1:
         return (
@@ -115,6 +140,36 @@ const ChannelsTable = () => {
     }
   };
 
+  const renderMultiKeyStatus = (status, keySize, enabledKeySize) => {
+    switch (status) {
+      case 1:
+        return (
+          <Tag size='large' color='green' shape='circle'>
+            {t('已启用')} {enabledKeySize}/{keySize}
+          </Tag>
+        );
+      case 2:
+        return (
+          <Tag size='large' color='red' shape='circle'>
+            {t('已禁用')} {enabledKeySize}/{keySize}
+          </Tag>
+        );
+      case 3:
+        return (
+          <Tag size='large' color='yellow' shape='circle'>
+            {t('自动禁用')} {enabledKeySize}/{keySize}
+          </Tag>
+        );
+      default:
+        return (
+          <Tag size='large' color='grey' shape='circle'>
+            {t('未知状态')} {enabledKeySize}/{keySize}
+          </Tag>
+        );
+    }
+  }
+
+
   const renderResponseTime = (responseTime) => {
     let time = responseTime / 1000;
     time = time.toFixed(2) + t(' 秒');
@@ -281,6 +336,11 @@ const ChannelsTable = () => {
       dataIndex: 'type',
       render: (text, record, index) => {
         if (record.children === undefined) {
+          if (record.channel_info) {
+            if (record.channel_info.is_multi_key) {
+              return <>{renderType(text, record.channel_info)}</>;
+            }
+          }
           return <>{renderType(text)}</>;
         } else {
           return <>{renderTagType()}</>;
@@ -304,12 +364,12 @@ const ChannelsTable = () => {
               <Tooltip
                 content={t('原因：') + reason + t('，时间：') + timestamp2string(time)}
               >
-                {renderStatus(text)}
+                {renderStatus(text, record.channel_info)}
               </Tooltip>
             </div>
           );
         } else {
-          return renderStatus(text);
+          return renderStatus(text, record.channel_info);
         }
       },
     },