From cf711d55a58c63036d72f830c138444374c83270 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 12 Jul 2025 00:02:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(ui):=20add=20icon=20support?=
 =?UTF-8?q?=20for=20Kling=20(50)=20&=20Jimeng=20(51)=20channels=20and=20ic?=
 =?UTF-8?q?onize=20type=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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            |  6 ++++++
 web/src/pages/Channel/EditChannel.js | 20 +++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index 6f00b914..00862b4a 100644
--- a/web/src/helpers/render.js
+++ b/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} />;
diff --git a/web/src/pages/Channel/EditChannel.js b/web/src/pages/Channel/EditChannel.js
index 07d08221..0b1abfe3 100644
--- a/web/src/pages/Channel/EditChannel.js
+++ b/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'