tab国际化

src/layouts/BasicLayout.tsx

@@ -34,7 +34,12 @@ const MenuRender = (item: any, isSubMenu: boolean) => {
   );
 };
 
-const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamicBreadcrumbName: string | null) => {
+const BreadcrumbRender = (
+  routeBreadcrumb: any,
+  intl: any,
+  history: any,
+  dynamicBreadcrumbName: string | null,
+) => {
   const breadcrumbRoutes = routeBreadcrumb?.routes;
   return (
     <Breadcrumb>
@@ -43,22 +48,17 @@ const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamic
           history.push('/');
         }}
       >
-        <span style={{ cursor: 'pointer' }}>
-          {intl.formatMessage({ id: 'menu.首页' })}
-        </span>
+        <span style={{ cursor: 'pointer' }}>{intl.formatMessage({ id: 'menu.首页' })}</span>
       </Breadcrumb.Item>
       {breadcrumbRoutes?.map((item: any, index: number) => {
         // 判断是否是最后一个面包屑项且存在动态名称
-        const isLastItem = index === (breadcrumbRoutes.length - 1);
-        const displayName = (isLastItem && dynamicBreadcrumbName)
+        const isLastItem = index === breadcrumbRoutes.length - 1;
+        const displayName =
+          isLastItem && dynamicBreadcrumbName
             ? dynamicBreadcrumbName
             : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' });
 
-        return (
-          <Breadcrumb.Item key={item.path}>
-            {displayName}
-          </Breadcrumb.Item>
-        );
+        return <Breadcrumb.Item key={item.path}>{displayName}</Breadcrumb.Item>;
       })}
     </Breadcrumb>
   );
@@ -77,10 +77,12 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const intl = useIntl();
   const history = useHistory();
 
+  console.log('tab model state:', tab);
+
   const handleTabChange = (key: string) => {
     dispatch({
       type: 'tab/switchTab',
-      payload: { key }
+      payload: { key },
     });
   };
 
@@ -88,7 +90,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     if (action === 'remove') {
       dispatch({
         type: 'tab/closeTab',
-        payload: { key: targetKey }
+        payload: { key: targetKey },
       });
     }
   };
@@ -118,7 +120,11 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
             // breadcrumbRender: ({ breadcrumb: routeBreadcrumb }) =>
             //   BreadcrumbRender(routeBreadcrumb, intl, history, breadcrumb.breadcrumbName),
           }}
-          tabList={tab.tabList}
+          // 将tab.tabList转换为需要的格式，添加国际化处理
+          tabList={tab.tabList.map(item => ({
+            ...item,
+            tab: typeof item.tab === 'string' ? intl.formatMessage({ id: `menu.${item.tab}` }) : item.tab
+          }))}
           tabProps={{
             type: 'editable-card',
             hideAdd: true,
@@ -127,7 +133,9 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
             onEdit: handleTabEdit,
             size: 'small',
             tabBarGutter: 6,
-            renderTabBar: (props, DefaultTabBar) => <DefaultTabBar {...props} className="custom-tab-bar" />,
+            renderTabBar: (propsTab, DefaultTabBar) => (
+              <DefaultTabBar {...propsTab} className="custom-tab-bar" />
+            ),
           }}
         >
           {children}
@@ -137,8 +145,9 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   );
 };
 
-export default connect(({ breadcrumb, tab }: { breadcrumb: BreadcrumbState; tab: TabModelState }) => ({
+export default connect(
+  ({ breadcrumb, tab }: { breadcrumb: BreadcrumbState; tab: TabModelState }) => ({
     breadcrumb,
-  tab
-}))(BasicLayout);
-
+    tab,
+  }),
+)(BasicLayout);

src/models/tab.ts

@@ -168,6 +168,7 @@ const TabModel: TabModelType = {
             payload: {
               path: pathname,
               key: pathname,
+              // 直接使用菜单名称作为国际化ID
               tab: currentRoute.name || '未命名页面',
             },
           });