diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx index 3b58522..2b5bedf 100644 --- a/src/layouts/BasicLayout.tsx +++ b/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 ( @@ -43,22 +48,17 @@ const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamic history.push('/'); }} > - - {intl.formatMessage({ id: 'menu.首页' })} - + {intl.formatMessage({ id: 'menu.首页' })} {breadcrumbRoutes?.map((item: any, index: number) => { // 判断是否是最后一个面包屑项且存在动态名称 - const isLastItem = index === (breadcrumbRoutes.length - 1); - const displayName = (isLastItem && dynamicBreadcrumbName) - ? dynamicBreadcrumbName - : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' }); + const isLastItem = index === breadcrumbRoutes.length - 1; + const displayName = + isLastItem && dynamicBreadcrumbName + ? dynamicBreadcrumbName + : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' }); - return ( - - {displayName} - - ); + return {displayName}; })} ); @@ -77,10 +77,12 @@ const BasicLayout: React.FC = (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 = (props) => { if (action === 'remove') { dispatch({ type: 'tab/closeTab', - payload: { key: targetKey } + payload: { key: targetKey }, }); } }; @@ -118,7 +120,11 @@ const BasicLayout: React.FC = (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 = (props) => { onEdit: handleTabEdit, size: 'small', tabBarGutter: 6, - renderTabBar: (props, DefaultTabBar) => , + renderTabBar: (propsTab, DefaultTabBar) => ( + + ), }} > {children} @@ -137,8 +145,9 @@ const BasicLayout: React.FC = (props) => { ); }; -export default connect(({ breadcrumb, tab }: { breadcrumb: BreadcrumbState; tab: TabModelState }) => ({ - breadcrumb, - tab -}))(BasicLayout); - +export default connect( + ({ breadcrumb, tab }: { breadcrumb: BreadcrumbState; tab: TabModelState }) => ({ + breadcrumb, + tab, + }), +)(BasicLayout); diff --git a/src/models/tab.ts b/src/models/tab.ts index 8105cc8..56a14f4 100644 --- a/src/models/tab.ts +++ b/src/models/tab.ts @@ -168,6 +168,7 @@ const TabModel: TabModelType = { payload: { path: pathname, key: pathname, + // 直接使用菜单名称作为国际化ID tab: currentRoute.name || '未命名页面', }, });