feat(router): 添加布局组件并集成到路由中

新增 Layout 组件作为应用的主布局结构,包含导航栏和窗口拖拽区域
将 Layout 设置为路由的根组件,统一管理页面布局结构
This commit is contained in:
Vixalie
2025-07-22 14:45:50 +08:00
parent 5ea982b9e9
commit bd7c4ed4cd
2 changed files with 69 additions and 1 deletions

67
src/Layout.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Icon } from '@iconify-icon/solid';
import { A } from '@solidjs/router';
import { Component, ParentComponent } from 'solid-js';
import { Portal } from 'solid-js/web';
const WindowDragHandle: Component = () => {
return (
<Portal>
<div class="fixed inset-x-0 top-0 h-8 z-10" data-tauri-drag-region />
</Portal>
);
};
interface NavigationLinkProps {
href: string;
}
const NavigateLink: ParentComponent<NavigationLinkProps> = (props) => {
return (
<A
href={props.href}
class="hover:text-primary-hover"
activeClass="text-primary-active"
inactiveClass="text-on-surface">
<div class="flex flex-col justify-center items-center gap-2">{props.children}</div>
</A>
);
};
const Layout: ParentComponent = (props) => {
return (
<main class="flex flex-col items-stretch gap-0 size-full">
<header class="h-8 flex flex-row items-center pl-18 py-4">
<span class="z-20 text-title-lg italic">ComfyUI Resources</span>
<div class="grow" />
</header>
<div class="flex flex-row items-stretch gap-0 grow overflow-hidden">
<nav class="flex flex-col items-center gap-6 overflow-hidden w-24 py-4">
<NavigateLink href="/">
<Icon icon="tabler:folder" class="text-[28px] stroke-1" />
<span class="text-body-sm">Models</span>
</NavigateLink>
<NavigateLink href="/browse">
<Icon icon="tabler:world" class="text-[28px] stroke-1" />
<span class="text-body-sm">Browse</span>
</NavigateLink>
<NavigateLink href="/download">
<Icon icon="tabler:download" class="text-[28px] stroke-1" />
<span class="text-body-sm">Download</span>
</NavigateLink>
<NavigateLink href="/prompt">
<Icon icon="tabler:input-ai" class="text-[28px] stroke-1" />
<span class="text-body-sm">Prompt</span>
</NavigateLink>
<NavigateLink href="/setting">
<Icon icon="tabler:settings" class="text-[28px] stroke-1" />
<span class="text-body-sm">Settings</span>
</NavigateLink>
</nav>
<div class="grow overflow-hidden">{props.children}</div>
</div>
<WindowDragHandle />
</main>
);
};
export default Layout;

View File

@@ -5,5 +5,6 @@ import './index.css';
// Load components. // Load components.
import { Router } from '@solidjs/router'; import { Router } from '@solidjs/router';
import { render } from 'solid-js/web'; import { render } from 'solid-js/web';
import Layout from './Layout';
render(() => <Router />, document.getElementById('root') as HTMLElement); render(() => <Router root={Layout} />, document.getElementById('root') as HTMLElement);