+
+ {t.SEND_MESSAGE_INFO} : ( {t.MESSAGE_ID} {producerNode.msgId} )
+
+
+
+ {producerNode.transactionNodeList && producerNode.transactionNodeList.length > 0 && (
+
+
{t.CHECK_TRANSACTION_INFO}:
+
`transaction_${index}`}
+ bordered
+ pagination={false}
+ size="middle"
+ scroll={{ x: 'max-content' }}
+ />
+
+ )}
+
+ )}
+
+
+
+
+
+
+ {t.CONSUME_MESSAGE_TRACE}} key="consumeMessageTrace">
+ {subscriptionNodeList.length === 0 ? (
+ {t.NO_CONSUMER_TRACE_DATA}
+ ) : (
+
+ {subscriptionNodeList.map(subscriptionNode => (
+
+ {t.SUBSCRIPTION_GROUP}: {subscriptionNode.subscriptionGroup}}
+ key={subscriptionNode.subscriptionGroup}
+ >
+ `${subscriptionNode.subscriptionGroup}_${index}`}
+ bordered
+ pagination={false}
+ size="middle"
+ scroll={{ x: 'max-content' }}
+ />
+
+
+ ))}
+
+ )}
+
+
+
+
+ );
+};
+
+export default MessageTraceDetailViewDialog;
diff --git a/frontend-new/src/store/actions/themeActions.js b/frontend-new/src/store/actions/themeActions.js
new file mode 100644
index 0000000..887e0fa
--- /dev/null
+++ b/frontend-new/src/store/actions/themeActions.js
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const SET_THEME = 'SET_THEME';
+
+export const setTheme = (themeName) => ({
+ type: SET_THEME,
+ payload: themeName,
+});
diff --git a/frontend-new/src/store/context/ThemeContext.js b/frontend-new/src/store/context/ThemeContext.js
new file mode 100644
index 0000000..7f2ce65
--- /dev/null
+++ b/frontend-new/src/store/context/ThemeContext.js
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { themes, defaultTheme } from '../../assets/styles/theme';
+import { setTheme } from '../actions/themeActions';
+
+export const useTheme = () => {
+ // 从 Redux store 中取出 currentThemeName
+ const currentThemeName = useSelector(state => state.theme.currentThemeName);
+ const dispatch = useDispatch();
+
+
+ const currentTheme = themes[currentThemeName] || defaultTheme;
+
+ useEffect(() => {
+ localStorage.setItem('appTheme', currentThemeName);
+ }, [currentThemeName]);
+
+ return {
+ currentTheme,
+ currentThemeName,
+ setCurrentThemeName: (themeName) => dispatch(setTheme(themeName)),
+ };
+};
diff --git a/frontend-new/src/store/index.js b/frontend-new/src/store/index.js
new file mode 100644
index 0000000..f303f5d
--- /dev/null
+++ b/frontend-new/src/store/index.js
@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createStore,combineReducers } from 'redux';
+import themeReducer from './reducers/themeReducer';
+
+// 组合所有的 reducers
+const rootReducer = combineReducers({
+ theme: themeReducer, // theme 状态将通过 state.theme 访问
+});
+
+// 创建 Redux store
+const store = createStore(rootReducer);
+
+export default store;
diff --git a/frontend-new/src/store/reducers/themeReducer.js b/frontend-new/src/store/reducers/themeReducer.js
new file mode 100644
index 0000000..9e131ab
--- /dev/null
+++ b/frontend-new/src/store/reducers/themeReducer.js
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SET_THEME } from '../actions/themeActions';
+
+const getInitialTheme = () => {
+ return localStorage.getItem('appTheme') || 'default';
+};
+
+const initialState = {
+ currentThemeName: getInitialTheme(),
+};
+
+const themeReducer = (state = initialState, action) => {
+ switch (action.type) {
+ case SET_THEME:
+ // 注意：reducer 应该返回新的状态对象，而不是直接修改旧状态
+ return {
+ ...state,
+ currentThemeName: action.payload,
+ };
+ default:
+ return state;
+ }
+};
+
+export default themeReducer;