feat: loading style
This commit is contained in:
parent
06fa41fffc
commit
0c678a013f
@ -16,7 +16,7 @@ export const AuthContext = createContext<AuthContextProps>(null);
|
|||||||
export const useCurrentUser = () => {
|
export const useCurrentUser = () => {
|
||||||
const { currentUser } = useContext(AuthContext);
|
const { currentUser } = useContext(AuthContext);
|
||||||
return currentUser;
|
return currentUser;
|
||||||
}
|
};
|
||||||
|
|
||||||
export function AuthProvider(props) {
|
export function AuthProvider(props) {
|
||||||
const service = useRequest('users:check', {
|
const service = useRequest('users:check', {
|
||||||
@ -30,7 +30,11 @@ export function AuthProvider(props) {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider value={{ service, currentUser: service.data }}>
|
<AuthContext.Provider value={{ service, currentUser: service.data }}>
|
||||||
{service.loading ? <Spin /> : props.children}
|
{service.loading ? (
|
||||||
|
<Spin size={'large'} className={'nb-spin-center'} />
|
||||||
|
) : (
|
||||||
|
props.children
|
||||||
|
)}
|
||||||
</AuthContext.Provider>
|
</AuthContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ const useOkAction = () => {
|
|||||||
async run() {
|
async run() {
|
||||||
console.log('system_settings.values', form.values);
|
console.log('system_settings.values', form.values);
|
||||||
await resource.save(form.values);
|
await resource.save(form.values);
|
||||||
await service.refresh();
|
await service.mutate(form.values);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -44,7 +44,7 @@ export const MenuPermissionTable = observer((props) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Spin />;
|
return <Spin size={'large'} className={'nb-spin-center'} />;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -25,7 +25,7 @@ export function SystemSettingsProvider(props) {
|
|||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<SystemSettingsContext.Provider value={{ service, resource }}>
|
<SystemSettingsContext.Provider value={{ service, resource }}>
|
||||||
{service.loading ? <Spin /> : props.children}
|
{service.loading ? <Spin size={'large'} className={'nb-spin-center'} /> : props.children}
|
||||||
</SystemSettingsContext.Provider>
|
</SystemSettingsContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -76,7 +76,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
|
|||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const { title } = useSystemSettings();
|
const { title } = useSystemSettings();
|
||||||
const [activeKey, setActiveKey] = useState(match.params.name);
|
const [activeKey, setActiveKey] = useState(match.params.name);
|
||||||
const [, setPageTitle] = usePageTitleContext();
|
const { setPageTitle } = usePageTitleContext();
|
||||||
const onSelect = (info) => {
|
const onSelect = (info) => {
|
||||||
if (!info.schema) {
|
if (!info.schema) {
|
||||||
setActiveKey(null);
|
setActiveKey(null);
|
||||||
@ -149,7 +149,7 @@ function Content({ activeKey }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Spin />;
|
return <Spin size={'large'} className={'nb-spin-center'} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <SchemaRenderer schema={data} />;
|
return <SchemaRenderer schema={data} />;
|
||||||
@ -166,7 +166,7 @@ export function AdminLayout({ route, ...others }: any) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Spin />;
|
return <Spin size={'large'} className={'nb-spin-center'} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const findProperties = (schema: Schema): Schema[] => {
|
const findProperties = (schema: Schema): Schema[] => {
|
||||||
|
@ -33,6 +33,18 @@
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
.nb-spin-center {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
max-height: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
.database-sider {
|
.database-sider {
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
|
@ -59,7 +59,7 @@ export function RouteSchemaRenderer({ route }) {
|
|||||||
);
|
);
|
||||||
const { title } = useSystemSettings();
|
const { title } = useSystemSettings();
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Spin />;
|
return <Spin size={'large'} className={'nb-spin-center'} />;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -6,10 +6,13 @@ export interface PageTitleProviderProps {
|
|||||||
defaultPageTitle?: string;
|
defaultPageTitle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [PageTitleProvider, usePageTitleContext] = constate(({ defaultPageTitle }: PageTitleProviderProps) => {
|
const [PageTitleProvider, usePageTitleContext] = constate(
|
||||||
const { title } = useSystemSettings();
|
({ defaultPageTitle }: PageTitleProviderProps) => {
|
||||||
const [pageTitle, setPageTitle] = useState(defaultPageTitle);
|
const { title } = useSystemSettings();
|
||||||
return [title ? `${pageTitle} - ${title}` : pageTitle, setPageTitle];
|
const [pageTitle, setPageTitle] = useState(defaultPageTitle);
|
||||||
});
|
const documentTitle = title ? `${pageTitle} - ${title}` : pageTitle;
|
||||||
|
return { documentTitle, pageTitle, setPageTitle };
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
export { PageTitleProvider, usePageTitleContext };
|
export { PageTitleProvider, usePageTitleContext };
|
||||||
|
@ -46,7 +46,7 @@ const App = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Spin/>
|
return <Spin size={'large'} className={'nb-spin-center'} />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -6,11 +6,11 @@ import { Helmet } from 'react-helmet';
|
|||||||
|
|
||||||
export const Page = observer((props) => {
|
export const Page = observer((props) => {
|
||||||
const { children, ...others } = props;
|
const { children, ...others } = props;
|
||||||
const [pageTitle] = usePageTitleContext();
|
const { documentTitle, pageTitle } = usePageTitleContext();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{pageTitle}</title>
|
<title>{documentTitle}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<AntdPageHeader ghost={false} title={pageTitle} {...others} />
|
<AntdPageHeader ghost={false} title={pageTitle} {...others} />
|
||||||
<div style={{margin: 24}}>
|
<div style={{margin: 24}}>
|
||||||
|
Loading…
Reference in New Issue
Block a user