ahdoawhfo/um-react
1
0
Fork 0
mirror of https://git.um-react.app/um/um-react.git synced 2025-11-28 03:23:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust layout for settings

Browse Source
This commit is contained in:
鲁树人
2025-05-18 11:05:50 +09:00
parent 9518b813bd
commit 6cb1f9f87f
7 changed files with 86 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AppRoot.tsx
View File

@@ -12,11 +12,12 @@ import { Footer } from '~/components/Footer';
import { FaqTab } from '~/tabs/FaqTab';
import { SETTINGS_TABS } from '~/features/settings/settingsTabs';
import { Bounce, ToastContainer } from 'react-toastify';
import { SettingsHome } from '~/features/settings/SettingsHome';
// Private to this file only.
const store = setupStore();
const tabClassNames = ({ isActive }: { isActive: boolean }) => `tab ${isActive ? 'tab-active' : ''}`;
const tabClassNames = ({ isActive }: { isActive: boolean }) => `mb-[-2px] tab ${isActive ? 'tab-active' : ''}`;
export function AppRoot() {
useEffect(() => persistSettings(store), []);
@@ -24,7 +25,7 @@ export function AppRoot() {
return (
<BrowserRouter>
<Provider store={store}>
<div role="tablist" className="tabs tabs-border w-full justify-center">
<div role="tablist" className="tabs tabs-border w-full justify-center border-b-2 border-base-200 box-content">
<NavLink to="/" role="tab" className={tabClassNames}>
<MdHome />
应用
@@ -39,10 +40,11 @@ export function AppRoot() {
</NavLink>
</div>
<main className="flex-1 flex justify-center">
<main className="flex-1 flex justify-center min-h-0 overflow-auto">
<Routes>
<Route path="/" Component={MainTab} />
<Route path="/settings" Component={SettingsTab}>
<Route index Component={SettingsHome} />
{Object.entries(SETTINGS_TABS).map(([key, { Tab }]) => (
<Route key={key} path={key} Component={Tab} />
))}

4
src/components/KeyListContainer.tsx
View File

@@ -9,9 +9,9 @@ export interface KeyListContainerProps {
export function KeyListContainer({ keys, children, ref }: KeyListContainerProps) {
const count = keys.length;
return (
<div ref={ref} className="flex grow min-h-0 overflow-auto pr-4 pt-3">
<div ref={ref} className="flex grow min-h-0 pr-4 pt-3">
{count > 0 && (
<ul className="list bg-base-100 rounded-box shadow-md border border-base-300 w-full min-h-0 max-h-[30rem] overflow-auto">
<ul className="list bg-base-100 rounded-box shadow-sm border border-base-300 w-full min-h-0 overflow-auto">
{children}
</ul>
)}