@@ -34,6 +34,8 @@ import { LayoutActionComp } from "./layoutActionComp";
3434import { defaultTheme } from "@lowcoder-ee/constants/themeConstants" ;
3535import { clickEvent , eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl" ;
3636import { childrenToProps } from "@lowcoder-ee/comps/generators/multi" ;
37+ import { useAppPathParam } from "util/hooks" ;
38+ import { ALL_APPLICATIONS_URL } from "constants/routesURL" ;
3739
3840const TabBar = React . lazy ( ( ) => import ( "antd-mobile/es/components/tab-bar" ) ) ;
3941const TabBarItem = React . lazy ( ( ) =>
@@ -389,6 +391,7 @@ let MobileTabLayoutTmp = (function () {
389391MobileTabLayoutTmp = withViewFn ( MobileTabLayoutTmp , ( comp ) => {
390392const [ tabIndex , setTabIndex ] = useState ( 0 ) ;
391393const { readOnly} = useContext ( ExternalEditorContext ) ;
394+ const pathParam = useAppPathParam ( ) ;
392395const navStyle = comp . children . navStyle . getView ( ) ;
393396const navItemStyle = comp . children . navItemStyle . getView ( ) ;
394397const navItemHoverStyle = comp . children . navItemHoverStyle . getView ( ) ;
@@ -466,7 +469,23 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
466469 :undefined ,
467470} ) ) }
468471selectedKey = { tabIndex + "" }
469- onChange = { ( key ) => setTabIndex ( Number ( key ) ) }
472+ onChange = { ( key ) => {
473+ const nextIndex = Number ( key ) ;
474+ setTabIndex ( nextIndex ) ;
475+ // push URL with query/hash params like desktop nav
476+ if ( dataOptionType === DataOption . Manual ) {
477+ const selectedTab = tabViews [ nextIndex ] ;
478+ if ( selectedTab ) {
479+ const url = [
480+ ALL_APPLICATIONS_URL ,
481+ pathParam . applicationId ,
482+ pathParam . viewMode ,
483+ nextIndex ,
484+ ] . join ( "/" ) ;
485+ selectedTab . children . action . act ( url ) ;
486+ }
487+ }
488+ } }
470489readOnly = { ! ! readOnly }
471490canvasBg = { bgColor }
472491tabStyle = { {