RockteMQ-AI commented on code in PR #336:
URL: 
https://github.com/apache/rocketmq-dashboard/pull/336#discussion_r3918426713


##########
frontend-new/src/pages/Consumer/consumer.jsx:
##########
@@ -60,7 +81,12 @@ const ConsumerGroupList = () => {
     const loadConsumerGroups = useCallback(async (currentPage) => {
         setLoading(true);
         try {
-            const response = await remoteApi.queryConsumerGroupList(false);
+            var response;

Review Comment:
   Uses `var response;` — prefer `let` or `const` in modern React code. `var` 
has function-scope semantics that can lead to subtle bugs.



##########
frontend-new/src/pages/Consumer/consumer.jsx:
##########
@@ -389,16 +456,18 @@ const ConsumerGroupList = () => {
         <>
             {msgContextHolder}
             {notificationContextHolder}
-            <div style={{padding: '20px'}}>
+            <div style={{ padding: '20px' }}>
                 <Spin spinning={loading} tip={t.LOADING}>
-                    <div style={{marginBottom: '20px'}}>
-                        <div style={{display: 'flex', alignItems: 'center', 
gap: '15px'}}>
-                            <div style={{display: 'flex', alignItems: 
'center'}}>
-                                <label style={{marginRight: 
'8px'}}>{t.SUBSCRIPTION_GROUP}:</label>
+                    <div style={{ marginBottom: '20px', display: 'flex', 
justifyContent: 'space-between', alignItems: 'center' }}>
+                        {/* 左侧:筛选和操作按钮 */}
+                        <div style={{ display: 'flex', alignItems: 'center', 
gap: '15px', flexWrap: 'wrap' }}>
+                            <div style={{ display: 'flex', alignItems: 
'center' }}>
+                                <label style={{ marginRight: '8px', 
whiteSpace: 'nowrap' }}>{t.SUBSCRIPTION_GROUP}:</label>

Review Comment:
   Hardcoded Chinese placeholder `placeholder="输入订阅组名称"` is not using i18n. 
Consider using `placeholder={t.SEARCH_CONSUMER_GROUP_PLACEHOLDER}` to stay 
consistent with the i18n migration pattern used elsewhere in this PR.



##########
frontend-new/src/pages/Consumer/consumer.jsx:
##########
@@ -60,7 +81,12 @@ const ConsumerGroupList = () => {
     const loadConsumerGroups = useCallback(async (currentPage) => {
         setLoading(true);
         try {
-            const response = await remoteApi.queryConsumerGroupList(false);
+            var response;

Review Comment:
   `loadConsumerGroups` useCallback now references `proxyEnabled` and 
`selectedProxy` state, but these are not listed in its dependency array. This 
could cause stale closures where the callback uses outdated proxy settings. 
Consider adding them to the deps array, or restructuring to avoid the 
stale-closure risk.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to