mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 01:07:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(MobileTabBar): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 15:45:20 +08:00
parent f0ef02ab99
commit 58ed5229c1
2 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/MobileTabBar.tsx
View File

@ -14,7 +14,7 @@ import React, { FC, useCallback } from 'react';
import { useMobileRoutes } from '../../mobile-providers'; import { useMobileRoutes } from '../../mobile-providers';
import { useStyles } from './styles'; import { useStyles } from './styles';
import { css, cx, DndContext, DndContextProps, SchemaComponent, useDesignable } from '@nocobase/client'; import { cx, DndContext, DndContextProps, SchemaComponent, useDesignable } from '@nocobase/client';
import { isInnerLink } from '../../utils'; import { isInnerLink } from '../../utils';
import { MobileTabBarInitializer } from './initializer'; import { MobileTabBarInitializer } from './initializer';
import { getMobileTabBarItemSchema, MobileTabBarItem } from './MobileTabBar.Item'; import { getMobileTabBarItemSchema, MobileTabBarItem } from './MobileTabBar.Item';
@ -32,7 +32,7 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
Page: typeof MobileTabBarPage; Page: typeof MobileTabBarPage;
Link: typeof MobileTabBarLink; Link: typeof MobileTabBarLink;
} = ({ enableTabBar = true }) => { } = ({ enableTabBar = true }) => {
const { styles } = useStyles(); const { componentCls, hashId } = useStyles();
const { designable } = useDesignable(); const { designable } = useDesignable();
const { routeList, activeTabBarItem, resource, refresh } = useMobileRoutes(); const { routeList, activeTabBarItem, resource, refresh } = useMobileRoutes();
const validRouteList = routeList.filter((item) => item.schemaUid || isInnerLink(item.options?.url)); const validRouteList = routeList.filter((item) => item.schemaUid || isInnerLink(item.options?.url));
@ -61,19 +61,14 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
// 判断内页的方法：没有激活的 activeTabBarItem 并且 routeList 中有数据 // 判断内页的方法：没有激活的 activeTabBarItem 并且 routeList 中有数据
if (!activeTabBarItem && validRouteList.length > 0) return null; if (!activeTabBarItem && validRouteList.length > 0) return null;
return ( return (
<div className={cx(styles.mobileTabBar, 'mobile-tab-bar')} data-testid="mobile-tab-bar"> <div className={cx(componentCls, hashId, 'mobile-tab-bar')} data-testid="mobile-tab-bar">
<div className={styles.mobileTabBarContent}> <div className="mobile-tab-bar-content">
<DndContext onDragEnd={handleDragEnd}> <DndContext onDragEnd={handleDragEnd}>
<div <div
className={cx( className="mobile-tab-bar-list"
styles.mobileTabBarList, style={{
css({ maxWidth: designable ? 'calc(100% - 58px)' : '100%',
maxWidth: designable ? 'calc(100% - 58px)' : '100%', }}
// '.nb-block-item': {
// maxWidth: `${100 / routeList.length}%`,
// },
}),
)}
> >
{routeList.map((item) => { {routeList.map((item) => {
return <SchemaComponent key={item.id} schema={getMobileTabBarItemSchema(item)} />; return <SchemaComponent key={item.id} schema={getMobileTabBarItemSchema(item)} />;

92
packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts
View File

@ -7,50 +7,56 @@
* For more information, please refer to: https://www.nocobase.com/agreement. * For more information, please refer to: https://www.nocobase.com/agreement.
*/ */
import { createStyles } from 'antd-style'; import { genStyleHook } from '@nocobase/client';
import { NavigationBarHeight } from '../../constants'; import { NavigationBarHeight } from '../../constants';
export const useStyles = createStyles(() => ({ export const useStyles = genStyleHook('nb-mobile-tab-bar', (token) => {
mobileTabBar: { const { componentCls } = token;
position: 'absolute',
bottom: 0, return {
left: 0, [componentCls]: {
right: 0, position: 'absolute',
height: NavigationBarHeight, bottom: 0,
boxSizing: 'border-box', left: 0,
borderTop: '1px solid var(--adm-color-border)', right: 0,
backgroundColor: 'var(--adm-color-background)', height: NavigationBarHeight,
}, boxSizing: 'border-box',
mobileTabBarContent: { borderTop: '1px solid var(--adm-color-border)',
display: 'flex', backgroundColor: 'var(--adm-color-background)',
justifyContent: 'space-between',
alignItems: 'center', '.mobile-tab-bar-content': {
gap: '1em', display: 'flex',
height: '100%', justifyContent: 'space-between',
}, alignItems: 'center',
mobileTabBarList: { gap: '1em',
display: 'flex', height: '100%',
justifyContent: 'space-around', },
flex: 1,
alignItems: 'center', '.mobile-tab-bar-list': {
overflowX: 'auto', display: 'flex',
'.adm-tab-bar-item': { justifyContent: 'space-around',
maxWidth: '100%', flex: 1,
'.adm-tab-bar-item-title': { alignItems: 'center',
maxWidth: '100%', overflowX: 'auto',
overflow: 'hidden', '.adm-tab-bar-item': {
whiteSpace: 'nowrap', maxWidth: '100%',
textOverflow: 'ellipsis', '.adm-tab-bar-item-title': {
maxWidth: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
},
'&>div': {
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
'.ant-btn-icon': {
marginInlineEnd: '0 !important',
},
}, },
}, },
'&>div': { };
flex: 1, });
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
'.ant-btn-icon': {
marginInlineEnd: '0 !important',
},
},
}));