centersl/lobehub
1
0
Fork 0
mirror of https://github.com/lobehub/lobehub.git synced 2026-03-28 13:39:28 +07:00
Code Issues Packages Projects Releases Wiki Activity

♻️ refactor: 优化 setting Layout 实现

Browse Source
This commit is contained in:
arvinxx
2023-07-29 14:35:29 +08:00
parent fcf33c415c
commit f789935a9f
2 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/setting/index.page.tsx
View File

@@ -1,39 +1,22 @@
import Head from 'next/head';
import { memo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import HeaderSpacing from '@/components/HeaderSpacing';
import { createI18nNext } from '@/locales/create';
import ChatLayout from '@/pages/chat/layout';
import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
import Header from './Header';
import SettingForm from './SettingForm';
import SettingLayout from './layout';
const initI18n = createI18nNext('setting');
const SettingLayout = memo(() => {
const { t } = useTranslation('setting');
const pageTitle = genSiteHeadTitle(t('header.global'));
useEffect(() => {
initI18n.finally();
}, []);
const Setting = memo(() => {
return (
<>
<Head>
<title>{pageTitle}</title>
</Head>
<ChatLayout>
<Header />
<Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
<HeaderSpacing />
<SettingForm />
</Flexbox>
</ChatLayout>
</>
<SettingLayout>
<Header />
<Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
<HeaderSpacing />
<SettingForm />
</Flexbox>
</SettingLayout>
);
});
export default SettingLayout;
export default Setting;

35
src/pages/setting/layout.tsx Normal file
View File

@@ -0,0 +1,35 @@
import Head from 'next/head';
import { ReactNode, memo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Flexbox } from 'react-layout-kit';
import SideBar from '@/features/SideBar';
import { createI18nNext } from '@/locales/create';
import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
const initI18n = createI18nNext('setting');
const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
const { t } = useTranslation('setting');
const pageTitle = genSiteHeadTitle(t('header.global'));
useEffect(() => {
initI18n.finally();
}, []);
return (
<>
<Head>
<title>{pageTitle}</title>
</Head>
<Flexbox horizontal width={'100%'}>
<SideBar />
<Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
{children}
</Flexbox>
</Flexbox>
</>
);
});
export default SettingLayout;