refactor(Layout): 优化布局组件并添加搜索框
- 移除了 WindowDragHandle 组件 - 调整了 NavigateLink 组件的样式 - 重构了 Layout 组件的 header,添加了搜索框和按钮 - 优化了内容区域的样式
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user