🎨 feat(ui): add icon support for Kling (50) & Jimeng (51) channels and iconize type selector

- import Kling & Jimeng icons from @lobehub/icons
- extend getChannelIcon() to return corresponding icons for new channel types 50 (Kling) and 51 (Jimeng)
- enhance EditChannel type selector:
  • introduce useMemo‐based channelOptionList with leading icons
  • utilize getChannelIcon for consistent icon rendering in dropdown options
- minor refactor: add useMemo and getChannelIcon imports in EditChannel.js

web/src/helpers/render.js

@@ -31,6 +31,8 @@ import {
   Coze,
   SiliconCloud,
   FastGPT,
+  Kling,
+  Jimeng,
 } from '@lobehub/icons';
 
 import {
@@ -386,6 +388,10 @@ export function getChannelIcon(channelType) {
       return <XAI size={iconSize} />;
     case 49: // Coze
       return <Coze size={iconSize} />;
+    case 50: // 可灵 Kling
+      return <Kling.Color size={iconSize} />;
+    case 51: // 即梦 Jimeng
+      return <Jimeng.Color size={iconSize} />;
     case 8: // 自定义渠道
     case 22: // 知识库：FastGPT
       return <FastGPT.Color size={iconSize} />;

web/src/pages/Channel/EditChannel.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -27,7 +27,7 @@ import {
   Row,
   Col,
 } from '@douyinfe/semi-ui';
-import { getChannelModels, copy } from '../../helpers';
+import { getChannelModels, copy, getChannelIcon } from '../../helpers';
 import {
   IconSave,
   IconClose,
@@ -474,6 +474,20 @@ const EditChannel = (props) => {
     <Checkbox checked={batch} onChange={() => setBatch(!batch)}>{t('批量创建')}</Checkbox>
   ) : null;
 
+  const channelOptionList = useMemo(
+    () =>
+      CHANNEL_OPTIONS.map((opt) => ({
+        ...opt,
+        label: (
+          <span className="flex items-center gap-2">
+            {getChannelIcon(opt.value)}
+            {opt.label}
+          </span>
+        ),
+      })),
+    [],
+  );
+
   return (
     <>
       <SideSheet
@@ -539,7 +553,7 @@ const EditChannel = (props) => {
                     label={t('类型')}
                     placeholder={t('请选择渠道类型')}
                     rules={[{ required: true, message: t('请选择渠道类型') }]}
-                    optionList={CHANNEL_OPTIONS}
+                    optionList={channelOptionList}
                     style={{ width: '100%' }}
                     filter
                     searchPosition='dropdown'