feat(layout): 添加侧边栏并优化布局结构

- 在 +layout.svelte 中引入 Sidebar 组件并调整整体布局
- 使用 Flexbox 实现侧边栏与主内容区域的响应式布局
- 更新 Header 样式，使用 fixed 定位并添加阴影效果- 新增全局 CSS 变量以统一背景色调
- 添加 @tauri-apps/plugin-store依赖用于本地存储功能
- 创建 Sidebar 组件，包含导航图标及交互逻辑- 移除页面中旧的临时导航列表，替换为新布局结构
- 调整样式细节，增强视觉一致性和用户体验

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
 	import Header from '$lib/components/layout/Header.svelte';
+	import Sidebar from '$lib/components/layout/Sidebar.svelte';
 
 	let { children } = $props();
 </script>
@@ -10,5 +11,36 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 <Header/>
+<div class="app-container">
 
-{@render children()}
+	<!-- 1. 侧边栏: 固定宽度，全高 -->
+	<Sidebar />
+	<!-- 2. 主内容区域: 占据剩余所有空间 (flex-1) -->
+	<main class="main-content">
+		<!-- 渲染子路由的内容 (+page.svelte 或下级 +layout.svelte)
+				 使用标准的 <slot /> 替换了 {@render children()} -->
+
+		{@render children()}
+	</main>
+</div>
+
+<style>
+    /* 确保整个应用容器占满整个视口 */
+    .app-container {
+        display: flex;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden; /* 防止滚动条出现在侧边栏和主内容之间 */
+        background-color: #1e1e1e; /* 模拟深色背景 */
+        color: #f1f1f1;
+				padding-top: 30px;
+    }
+
+    /* 主内容区域占据剩余空间 */
+    .main-content {
+        flex: 1; /* 占据 Flex 容器的剩余空间 */
+        /* 允许主内容区域内部滚动 */
+        overflow-y: auto;
+        padding: 1rem;
+    }
+</style>

src/routes/+page.svelte

@@ -1,9 +1,7 @@
 <div class="app-container">
-
-	<ul>
-
-		<li on:click={() => goto('/about')}>关于</li>
-	</ul>
+	<div class="app-content">
+		123
+	</div>
 </div>
 
 <style>
@@ -12,5 +10,5 @@
 
 <script>
 
-import { goto } from '$app/navigation';
+
 </script>