diff --git a/frontend-new/src/api/remoteApi/remoteApi.js b/frontend-new/src/api/remoteApi/remoteApi.js index 94cec36..1df36cf 100644 --- a/frontend-new/src/api/remoteApi/remoteApi.js +++ b/frontend-new/src/api/remoteApi/remoteApi.js @@ -376,9 +376,9 @@ const remoteApi = { } }, - queryConsumerGroupList: async (skipSysGroup = false) => { + queryConsumerGroupList: async (skipSysGroup, address) => { try { - const response = await remoteApi._fetch(remoteApi.buildUrl(`/consumer/groupList.query?skipSysGroup=${skipSysGroup}`)); + const response = await remoteApi._fetch(remoteApi.buildUrl(`/consumer/groupList.query?skipSysGroup=${skipSysGroup}&address=${address}`)); const data = await response.json(); return data; } catch (error) { diff --git a/frontend-new/src/i18n/index.js b/frontend-new/src/i18n/index.js index 612af61..1a5fa71 100644 --- a/frontend-new/src/i18n/index.js +++ b/frontend-new/src/i18n/index.js @@ -278,6 +278,12 @@ export const translations = { "ENTER_IP_HINT": "请输入 IP 地址，按回车键添加，支持 IPv4、IPv6 和 CIDR", "PLEASE_ENTER_DECISION": "请输入决策!", "MENU": "菜单", + "SELECT_PROXY": "选择代理", + "ENABLE_PROXY": "启用代理", + "PROXY_DISABLED": "代理禁用", + "PROXY_ENABLED": "代理启用", + "BROKER_OVERVIEW": "Broker概览", + "TOTAL_MSG_RECEIVED_TODAY": "今天接收的总消息数", }, en: { "DEFAULT": "Default", @@ -534,6 +540,13 @@ export const translations = { "ENTER_IP_HINT": "Please enter IP address, press Enter to add. Supports IPv4, IPv6, and CIDR.", "PLEASE_ENTER_DECISION": "Please enter decision!", "MENU": "Menu", + "SELECT_PROXY": "Select Proxy", + "ENABLE_PROXY": "Enable Proxy", + "PROXY_DISABLED": "Proxy Disabled", + "PROXY_ENABLED": "Proxy Enabled", + "BROKER_OVERVIEW": "Broker Overview", + "TOTAL_MSG_RECEIVED_TODAY": "Total messages received today", + } diff --git a/frontend-new/src/pages/Consumer/consumer.jsx b/frontend-new/src/pages/Consumer/consumer.jsx index 63d461e..f16b12f 100644 --- a/frontend-new/src/pages/Consumer/consumer.jsx +++ b/frontend-new/src/pages/Consumer/consumer.jsx @@ -16,7 +16,7 @@ */ import React, {useCallback, useEffect, useState} from 'react'; -import {Button, Checkbox, Input, message, notification, Spin, Table} from 'antd'; +import {Button, Checkbox, Input, message, notification, Select, Spin, Switch, Table} from 'antd'; import {useLanguage} from '../../i18n/LanguageContext'; import {remoteApi} from '../../api/remoteApi/remoteApi'; import ClientInfoModal from "../../components/consumer/ClientInfoModal"; @@ -46,6 +46,27 @@ const ConsumerGroupList = () => { const [messageApi, msgContextHolder] = message.useMessage(); const [notificationApi, notificationContextHolder] = notification.useNotification(); + const [proxyEnabled, setProxyEnabled] = useState(() => { + try { + const storedValue = localStorage.getItem('proxyEnabled'); + return storedValue ? JSON.parse(storedValue) : false; + } catch (error) { + console.error("Failed to read proxyEnabled from localStorage:", error); + return false; + } + }); + + const [selectedProxy, setSelectedProxy] = useState(() => { + try { + const storedValue = localStorage.getItem('selectedProxy'); + return storedValue || undefined; + } catch (error) { + console.error("Failed to read selectedProxy from localStorage:", error); + return undefined; + } + }); + + const [proxyOptions ,setProxyOptions]= useState([]); const [paginationConf, setPaginationConf] = useState({ current: 1, pageSize: 10, @@ -60,7 +81,12 @@ const ConsumerGroupList = () => { const loadConsumerGroups = useCallback(async (currentPage) => { setLoading(true); try { - const response = await remoteApi.queryConsumerGroupList(false); + var response; + if(!proxyEnabled){ + response = await remoteApi.queryConsumerGroupList(false); + }else{ + response = await remoteApi.queryConsumerGroupList(false, selectedProxy); + } if (response.status === 0) { setAllConsumerGroupList(response.data); if (currentPage != null) { @@ -87,7 +113,6 @@ const ConsumerGroupList = () => { }; const filterList = useCallback((currentPage, data) => { - // 排序处理 let sortedData = [...data]; if (sortConfig.sortKey) { sortedData.sort((a, b) => { @@ -153,6 +178,48 @@ const ConsumerGroupList = () => { filterList(paginationConf.current, sortedList); }, [sortConfig, allConsumerGroupList, paginationConf.current]); + const fetchProxyList = useCallback(async () => { + remoteApi.queryProxyHomePage((resp) => { + setLoading(false); + if (resp.status === 0) { + const {proxyAddrList, currentProxyAddr} = resp.data; + const options = proxyAddrList.map(proxyAddress => ({ + label: proxyAddress, + value: proxyAddress, + })); + setProxyOptions(options || []); + setSelectedProxy(prevSelectedProxy => { + if (prevSelectedProxy) { + return prevSelectedProxy; + } + if (options.length > 0) { + return options[0].value; + } + return undefined; + }); + } else { + notificationApi.error({message: resp.errMsg || t.FETCH_PROXY_LIST_FAILED, duration: 2}); + } + }); + }, [t]); + + useEffect(() => { + localStorage.setItem('proxyEnabled', JSON.stringify(proxyEnabled)); + }, [proxyEnabled]); + + useEffect(() => { + if (selectedProxy) { + localStorage.setItem('selectedProxy', selectedProxy); + } else { + localStorage.removeItem('selectedProxy'); + } + }, [selectedProxy]); + + + useEffect(() => { + fetchProxyList(); + }, []); + useEffect(() => { loadConsumerGroups(); }, [loadConsumerGroups]); @@ -389,16 +456,18 @@ const ConsumerGroupList = () => { <> {msgContextHolder} {notificationContextHolder} -
+
-
-
-
- +
+ {/* 左侧：筛选和操作按钮 */} +
+
+ handleFilterInputChange(e.target.value)} + placeholder="输入订阅组名称" />
{ - {/* setIntervalProcessSwitch(checked)}*/} - {/* checkedChildren={t.AUTO_REFRESH}*/} - {/* unCheckedChildren={t.AUTO_REFRESH}*/} - {/*/>*/} +
+ + {/* 右侧：代理选项 */} +
+ +