♻️ refactor(channels): migrate edit components to modals structure

Move EditChannel and EditTagModal from standalone pages to modal components
within the channels module structure for consistency with other table modules.

Changes:
- Move EditChannel.js → components/table/channels/modals/EditChannelModal.jsx
- Move EditTagModal.js → components/table/channels/modals/EditTagModal.jsx
- Update import paths in channels/index.jsx
- Remove standalone routes for EditChannel from App.js
- Delete original files from pages/Channel/

This change aligns the channels module with the established modular pattern
used by tokens, users, redemptions, and other table modules, centralizing
all channel management functionality within integrated modal components
instead of separate page routes.

BREAKING CHANGE: EditChannel standalone routes (/console/channel/edit/:id
and /console/channel/add) have been removed. All channel editing is now
handled through modal components within the main channels page.

web/src/App.js

@@ -12,7 +12,6 @@ import PasswordResetForm from './components/auth/PasswordResetForm.js';
 import PasswordResetConfirm from './components/auth/PasswordResetConfirm.js';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
-import EditChannel from './pages/Channel/EditChannel';
 import Redemption from './pages/Redemption';
 import TopUp from './pages/TopUp';
 import Log from './pages/Log';
@@ -61,22 +60,6 @@ function App() {
             </PrivateRoute>
           }
         />
-        <Route
-          path='/console/channel/edit/:id'
-          element={
-            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
-              <EditChannel />
-            </Suspense>
-          }
-        />
-        <Route
-          path='/console/channel/add'
-          element={
-            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
-              <EditChannel />
-            </Suspense>
-          }
-        />
         <Route
           path='/console/token'
           element={

web/src/components/table/channels/index.jsx

@@ -8,8 +8,8 @@ import { useChannelsData } from '../../../hooks/channels/useChannelsData.js';
 import BatchTagModal from './modals/BatchTagModal.jsx';
 import ModelTestModal from './modals/ModelTestModal.jsx';
 import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
-import EditChannel from '../../../pages/Channel/EditChannel.js';
-import EditTagModal from '../../../pages/Channel/EditTagModal.js';
+import EditChannelModal from './modals/EditChannelModal.jsx';
+import EditTagModal from './modals/EditTagModal.jsx';
 
 const ChannelsPage = () => {
   const channelsData = useChannelsData();
@@ -24,7 +24,7 @@ const ChannelsPage = () => {
         handleClose={() => channelsData.setShowEditTag(false)}
         refresh={channelsData.refresh}
       />
-      <EditChannel
+      <EditChannelModal
         refresh={channelsData.refresh}
         visible={channelsData.showEdit}
         handleClose={channelsData.closeEdit}

web/src/pages/Channel/EditChannel.js → web/src/components/table/channels/modals/EditChannelModal.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   API,
@@ -7,9 +6,9 @@ import {
   showInfo,
   showSuccess,
   verifyJSON,
-} from '../../helpers';
-import { useIsMobile } from '../../hooks/common/useIsMobile.js';
-import { CHANNEL_OPTIONS } from '../../constants';
+} from '../../../../helpers';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { CHANNEL_OPTIONS } from '../../../../constants';
 import {
   SideSheet,
   Space,
@@ -28,7 +27,7 @@ import {
   Col,
   Highlight,
 } from '@douyinfe/semi-ui';
-import { getChannelModels, copy, getChannelIcon, getModelCategories } from '../../helpers';
+import { getChannelModels, copy, getChannelIcon, getModelCategories } from '../../../../helpers';
 import {
   IconSave,
   IconClose,
@@ -76,9 +75,8 @@ function type2secretPrompt(type) {
   }
 }
 
-const EditChannel = (props) => {
+const EditChannelModal = (props) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const channelId = props.editingChannel.id;
   const isEdit = channelId !== undefined;
   const [loading, setLoading] = useState(isEdit);
@@ -193,7 +191,7 @@ const EditChannel = (props) => {
         setInputs((inputs) => ({ ...inputs, models: localModels }));
       }
       setBasicModels(localModels);
-      
+
       // 重置手动输入模式状态
       setUseManualInput(false);
     }
@@ -726,9 +724,9 @@ const EditChannel = (props) => {
       onClick,
       ...rest
     } = renderProps;
-    
+
     const searchWords = channelSearchValue ? [channelSearchValue] : [];
-    
+
     // 构建样式类名
     const optionClassName = [
       'flex items-center gap-3 px-3 py-2 transition-all duration-200 rounded-lg mx-2 my-1',
@@ -738,12 +736,12 @@ const EditChannel = (props) => {
       !disabled && 'hover:bg-gray-50 hover:shadow-md cursor-pointer',
       className
     ].filter(Boolean).join(' ');
-    
+
     return (
-      <div 
-        style={style} 
+      <div
+        style={style}
         className={optionClassName}
-        onClick={() => !disabled && onClick()} 
+        onClick={() => !disabled && onClick()}
         onMouseEnter={e => onMouseEnter()}
       >
         <div className="flex items-center gap-3 w-full">
@@ -751,8 +749,8 @@ const EditChannel = (props) => {
             {getChannelIcon(value)}
           </div>
           <div className="flex-1 min-w-0">
-            <Highlight 
-              sourceString={label} 
+            <Highlight
+              sourceString={label}
               searchWords={searchWords}
               className="text-sm font-medium truncate"
             />
@@ -760,7 +758,7 @@ const EditChannel = (props) => {
           {selected && (
             <div className="flex-shrink-0 text-blue-600">
               <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+                <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" />
               </svg>
             </div>
           )}
@@ -926,7 +924,7 @@ const EditChannel = (props) => {
                               </Space>
                             </div>
                           )}
-                          
+
                           {batch && (
                             <Banner
                               type='info'
@@ -934,7 +932,7 @@ const EditChannel = (props) => {
                               className='!rounded-lg mb-3'
                             />
                           )}
-                          
+
                           {useManualInput && !batch ? (
                             <Form.TextArea
                               field='key'
@@ -1466,4 +1464,4 @@ const EditChannel = (props) => {
   );
 };
 
-export default EditChannel;
+export default EditChannelModal; 

web/src/pages/Channel/EditTagModal.js → web/src/components/table/channels/modals/EditTagModal.jsx

@@ -6,7 +6,7 @@ import {
   showSuccess,
   showWarning,
   verifyJSON,
-} from '../../helpers';
+} from '../../../../helpers';
 import {
   SideSheet,
   Space,
@@ -26,7 +26,7 @@ import {
   IconUser,
   IconCode,
 } from '@douyinfe/semi-icons';
-import { getChannelModels } from '../../helpers';
+import { getChannelModels } from '../../../../helpers';
 import { useTranslation } from 'react-i18next';
 
 const { Text, Title } = Typography;
@@ -441,4 +441,4 @@ const EditTagModal = (props) => {
   );
 };
 
-export default EditTagModal;
+export default EditTagModal;