From db1b11deaf449d7486270bf0b627c1ea00d7b972 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Tue, 24 Jun 2025 04:16:40 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20fix(channels-table):=20preserve=20g?=
 =?UTF-8?q?roup=20filter=20when=20switching=20type=20or=20status=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactors `ChannelsTable.js` to ensure that the selected group filter is **never lost** when:

1. Cycling between channel-type tabs.
2. Changing the status dropdown (all / enabled / disabled).

Key points:

• `loadChannels` now detects active search filters (keyword / group / model) and transparently delegates to `searchChannels`, guaranteeing all parameters are sent in every request.
• `searchChannels` accepts optional `typeKey` and `statusF` arguments, enabling reuse without code duplication.
• Loading state handling is unified; no extra renders or side effects were introduced, keeping UI performance intact.
• Duplicate logic removed and responsibilities clearly separated for easier future maintenance.
---
 web/src/components/table/ChannelsTable.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/components/table/ChannelsTable.js b/web/src/components/table/ChannelsTable.js
index b6c505fc..9fc117ec 100644
--- a/web/src/components/table/ChannelsTable.js
+++ b/web/src/components/table/ChannelsTable.js
@@ -882,6 +882,15 @@ const ChannelsTable = () => {
     statusF,
   ) => {
     if (statusF === undefined) statusF = statusFilter;
+
+    const { searchKeyword, searchGroup, searchModel } = getFormValues();
+    if (searchKeyword !== '' || searchGroup !== '' || searchModel !== '') {
+      setLoading(true);
+      await searchChannels(enableTagMode, typeKey, statusF);
+      setLoading(false);
+      return;
+    }
+
     const reqId = ++requestCounter.current; // 记录当前请求序号
     setLoading(true);
     const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
@@ -1054,18 +1063,18 @@ const ChannelsTable = () => {
     };
   };
 
-  const searchChannels = async (enableTagMode) => {
+  const searchChannels = async (enableTagMode, typeKey = activeTypeKey, statusF = statusFilter) => {
     const { searchKeyword, searchGroup, searchModel } = getFormValues();
 
     setSearching(true);
     try {
       if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
-        await loadChannels(activePage - 1, pageSize, idSort, enableTagMode);
+        await loadChannels(activePage - 1, pageSize, idSort, enableTagMode, typeKey, statusF);
         return;
       }
 
-      const typeParam = (activeTypeKey !== 'all') ? `&type=${activeTypeKey}` : '';
-      const statusParam = statusFilter !== 'all' ? `&status=${statusFilter}` : '';
+      const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
+      const statusParam = statusF !== 'all' ? `&status=${statusF}` : '';
       const res = await API.get(
         `/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}&id_sort=${idSort}&tag_mode=${enableTagMode}${typeParam}${statusParam}`,
       );