From de9d18a2fe2de1fc9ea383ea71c44aa006da91df Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 19 Jul 2025 00:58:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(channels):=20migr?=
 =?UTF-8?q?ate=20edit=20components=20to=20modals=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                                | 17 ---------
 web/src/components/table/channels/index.jsx   |  6 +--
 .../channels/modals/EditChannelModal.jsx}     | 38 +++++++++----------
 .../table/channels/modals/EditTagModal.jsx}   |  6 +--
 4 files changed, 24 insertions(+), 43 deletions(-)
 rename web/src/{pages/Channel/EditChannel.js => components/table/channels/modals/EditChannelModal.jsx} (98%)
 rename web/src/{pages/Channel/EditTagModal.js => components/table/channels/modals/EditTagModal.jsx} (99%)

diff --git a/web/src/App.js b/web/src/App.js
index 41ab040e..bab3707c 100644
--- a/web/src/App.js
+++ b/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={
diff --git a/web/src/components/table/channels/index.jsx b/web/src/components/table/channels/index.jsx
index 45699306..f101ba95 100644
--- a/web/src/components/table/channels/index.jsx
+++ b/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}
diff --git a/web/src/pages/Channel/EditChannel.js b/web/src/components/table/channels/modals/EditChannelModal.jsx
similarity index 98%
rename from web/src/pages/Channel/EditChannel.js
rename to web/src/components/table/channels/modals/EditChannelModal.jsx
index c882fe10..36d70160 100644
--- a/web/src/pages/Channel/EditChannel.js
+++ b/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; 
\ No newline at end of file
diff --git a/web/src/pages/Channel/EditTagModal.js b/web/src/components/table/channels/modals/EditTagModal.jsx
similarity index 99%
rename from web/src/pages/Channel/EditTagModal.js
rename to web/src/components/table/channels/modals/EditTagModal.jsx
index 433d4f09..9ebc8bd6 100644
--- a/web/src/pages/Channel/EditTagModal.js
+++ b/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; 
\ No newline at end of file