refactor(Layout): 优化布局组件并添加搜索框

- 移除了 WindowDragHandle 组件
- 调整了 NavigateLink 组件的样式
- 重构了 Layout 组件的 header,添加了搜索框和按钮
- 优化了内容区域的样式
This commit is contained in:
Vixalie
2025-07-28 08:34:28 +08:00
parent 5bc2b4d75d
commit 7b03827d3a

View File

@@ -1,15 +1,6 @@
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>
);
};
import { ParentComponent } from 'solid-js';
interface NavigationLinkProps {
href: string;
@@ -20,7 +11,7 @@ const NavigateLink: ParentComponent<NavigationLinkProps> = (props) => {
<A
href={props.href}
class="hover:text-primary-hover"
activeClass="text-primary-active"
activeClass="text-primary-focus"
inactiveClass="text-on-surface">
<div class="flex flex-col justify-center items-center gap-2">{props.children}</div>
</A>
@@ -30,9 +21,15 @@ const NavigateLink: ParentComponent<NavigationLinkProps> = (props) => {
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">
<header class="flex flex-row items-center py-2 px-4">
<span class="z-20 text-title-lg italic">ComfyUI Resources</span>
<div class="grow" />
<div class="flex flex-row items-stretch">
<input type="text" readOnly class="bg-swatch-neutral-40" />
<button class="icon">
<Icon icon="tabler:folder-open" class="text-[14px] stroke-1" />
</button>
</div>
</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">
@@ -57,9 +54,8 @@ const Layout: ParentComponent = (props) => {
<span class="text-body-sm">Settings</span>
</NavigateLink>
</nav>
<div class="grow overflow-hidden">{props.children}</div>
<div class="grow overflow-hidden p-2">{props.children}</div>
</div>
<WindowDragHandle />
</main>
);
};