添加切换产品类型组件，用于测试与调试目的

src/app.tsx

@@ -2,8 +2,11 @@ import { PropsWithChildren, useState } from 'react';
 import { useLaunch } from '@tarojs/taro';
 import { IntlProvider } from 'react-intl';
 import { ConfigProvider, Button } from 'antd';
+import { Provider } from 'react-redux';
+import store from './states/store';
 import './app.css';
 import { lightTheme, darkTheme } from './themes';
+import ProductSelector from './components/ProductSelector';
 
 const locale = (window.navigator.language || 'en').toLowerCase().split('-')[0]; // Get locale from browser or default to 'en'
 import messages_en from './assets/i18n/messages/en';
@@ -38,51 +41,54 @@ function App({ children }: PropsWithChildren<React.ReactNode>) {
   // children 是将要会渲染的页面
   // return children
   return (
-    <ConfigProvider theme={currentTheme}>
-      <IntlProvider locale={locale} messages={messages}>
-        <div
-          style={{
-            backgroundColor: currentTheme.token.colorBgLayout,
-            color: currentTheme.token.colorText,
-            borderRadius: '8px',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-          }}
-        >
-          {children}
+    <Provider store={store}>
+      <ConfigProvider theme={currentTheme}>
+        <IntlProvider locale={locale} messages={messages}>
           <div
             style={{
-              position: 'fixed',
-              top: '50%',
-              right: 16,
-              transform: 'translateY(-50%)',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 8, // 按钮间距
-              zIndex: 1000,
+              backgroundColor: currentTheme.token.colorBgLayout,
+              color: currentTheme.token.colorText,
+              borderRadius: '8px',
+              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
             }}
           >
-            <Button
-              type="primary"
-              shape="circle"
-              size="large"
-              onClick={() => changeTheme(darkTheme)}
-              title="Switch to Dark Theme"
+            {children}
+            {process.env.NODE_ENV === 'development' && <ProductSelector />}
+            <div
+              style={{
+                position: 'fixed',
+                top: '50%',
+                right: 16,
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 8, // 按钮间距
+                zIndex: 1000,
+              }}
             >
-              🌙
-            </Button>
-            <Button
-              type="primary"
-              shape="circle"
-              size="large"
-              onClick={() => changeTheme(lightTheme)}
-              title="Switch to Light Theme"
-            >
-              ☀️
-            </Button>
+              <Button
+                type="primary"
+                shape="circle"
+                size="large"
+                onClick={() => changeTheme(darkTheme)}
+                title="Switch to Dark Theme"
+              >
+                🌙
+              </Button>
+              <Button
+                type="primary"
+                shape="circle"
+                size="large"
+                onClick={() => changeTheme(lightTheme)}
+                title="Switch to Light Theme"
+              >
+                ☀️
+              </Button>
+            </div>
           </div>
-        </div>
-      </IntlProvider>
-    </ConfigProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </Provider>
   );
 }
 

src/components/ProductSelector.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Select, Typography } from 'antd';
+import { setProduct } from '../states/productSlice';
+import { RootState } from '../states/store';
+
+const ProductSelector: React.FC = () => {
+  const dispatch = useDispatch();
+  const productName = useSelector(
+    (state: RootState) => state.product.productName
+  );
+
+  const handleProductChange = (value: 'DROS' | 'VETDROS') => {
+    dispatch(
+      setProduct({ productName: value, language: 'en', source: 'Browser' })
+    );
+  };
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 16,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 1000,
+      }}
+    >
+      <Typography.Text>Select Product: </Typography.Text>
+      <Select
+        id="product-select"
+        value={productName}
+        onChange={handleProductChange}
+      >
+        <Select.Option value="DROS">DROS</Select.Option>
+        <Select.Option value="VETDROS">VETDROS</Select.Option>
+      </Select>
+    </div>
+  );
+};
+
+export default ProductSelector;

src/pages/demo/App.tsx

@@ -1,8 +1,7 @@
 // App.tsx
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { Provider, useSelector } from 'react-redux';
-import store from '@/states/store';
+import { useSelector } from 'react-redux';
 import BasicLayout from '../../layouts/BasicLayout';
 import HomePage from './HomePage';
 import AboutPage from './AboutPage';
@@ -37,11 +36,7 @@ const AppContent: React.FC = () => {
 
 const App: React.FC = () => {
   console.log('App component rendered');
-  return (
-    <Provider store={store}>
-      <AppContent />
-    </Provider>
-  );
+  return <AppContent />;
 };
 
 export default App;

src/states/productSlice.ts

@@ -17,7 +17,9 @@ const productSlice = createSlice({
   initialState,
   reducers: {
     setProduct: (state, action: PayloadAction<ProductState>) => {
-      state = action.payload;
+      state.productName = action.payload.productName;
+      state.language = action.payload.language;
+      state.source = action.payload.source;
     },
   },
 });