feat(Layout): 重构布局组件并添加导航链接

- 移除侧边导航栏，将导航链接移至头部
- 更新导航链接样式和布局
- 添加平台检测以调整头部样式
- 优化页面结构，提高用户体验

src/Layout.tsx

@@ -1,61 +1,60 @@
 import { Icon } from '@iconify-icon/solid';
 import { A } from '@solidjs/router';
+import { platform } from '@tauri-apps/plugin-os';
 import { ParentComponent } from 'solid-js';
 
 interface NavigationLinkProps {
   href: string;
+  end: boolean;
 }
 
 const NavigateLink: ParentComponent<NavigationLinkProps> = (props) => {
   return (
     <A
       href={props.href}
-      class="hover:text-primary-hover"
+      end={props.end}
-      activeClass="text-primary-focus"
+      class="hover:text-primary-hover h-8 px-4 py-2 flex flex-row justify-center items-center gap-2"
-      inactiveClass="text-on-surface">
+      activeClass="text-primary-focus bg-shadow/45"
-      <div class="flex flex-col justify-center items-center gap-2">{props.children}</div>
+      inactiveClass="text-on-surface bg-transparent">
+      {props.children}
     </A>
   );
 };
 
+const os = platform();
+
 const Layout: ParentComponent = (props) => {
   return (
     <main class="flex flex-col items-stretch gap-0 size-full">
-      <header class="flex flex-row items-center py-2 px-4">
+      <header
-        <span class="z-20 text-title-lg italic">ComfyUI Resources</span>
+        class="flex flex-row items-center bg-swatch-neutral-35"
-        <div class="grow" />
+        classList={{ 'ps-20': os === 'macos' }}
-        <div class="flex flex-row items-stretch">
+        data-tauri-drag-region>
-          <input type="text" readOnly class="bg-swatch-neutral-40" />
+        <NavigateLink href="/" end={true}>
-          <button class="icon">
+          <Icon icon="tabler:folder" class="text-[14px] stroke-1" />
-            <Icon icon="tabler:folder-open" class="text-[14px] stroke-1" />
+          <span class="navigate">Models</span>
-          </button>
+        </NavigateLink>
+        <NavigateLink href="/browse">
+          <Icon icon="tabler:world" class="text-[14px] stroke-1" />
+          <span class="navigate">Browse</span>
+        </NavigateLink>
+        <NavigateLink href="/download">
+          <Icon icon="tabler:download" class="text-[14px] stroke-1" />
+          <span class="navigate">Download</span>
+        </NavigateLink>
+        <NavigateLink href="/prompt">
+          <Icon icon="tabler:input-ai" class="text-[14px] stroke-1" />
+          <span class="navigate">Prompt</span>
+        </NavigateLink>
+        <NavigateLink href="/setting">
+          <Icon icon="tabler:settings" class="text-[14px] stroke-1" />
+          <span class="navigate">Settings</span>
+        </NavigateLink>
+        <div class="ml-auto h-8 p-2 flex flex-row justify-center items-center border-l border-outline">
+          <Icon icon="hugeicons:menu-01" class="text-[14px] stroke-1" />
         </div>
       </header>
-      <div class="flex flex-row items-stretch gap-0 grow overflow-hidden">
+      <div class="flex flex-row items-stretch gap-0 grow overflow-hidden">{props.children}</div>
-        <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 p-2">{props.children}</div>
-      </div>
     </main>
   );
 };