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

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

src/lib/components/layout/Header.svelte

@@ -41,9 +41,11 @@
         align-items: center;
         padding: 0 10px;
         user-select: none;
-        position: sticky;
+        position: fixed;
+				width: 100%;
         top: 0;
         z-index: 1000;
+        box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
     }
 
     .window-controls {

src/lib/components/layout/Sidebar.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	// 您可以在此处导入 SvelteKit 的导航链接模块
+	// import { goto } from '$app/navigation';
+
+	// 模拟导航项数据
+	// 确保对象字面量语法正确无误
+	const navItems = [
+		{ icon: '🏠', label: '主页', path: '/' },
+		{ icon: '⭐', label: '收藏', path: '/favorites' },
+		{ icon: '💬', label: '聊天', path: '/chat' },
+		{ icon: '⚙️', label: '设置', path: '/settings' },
+	];
+
+	let activePath: string = '/'; // 明确声明类型
+
+	function navigate(path: string) {
+		activePath = path;
+		// goto(path); // 实际应用中使用 SvelteKit 的导航
+		console.log(`导航到: ${path}`);
+	}
+</script>
+
+<nav class="sidebar">
+	<!-- 顶部图标/Logo -->
+	<div class="sidebar-logo">
+		<span role="img" aria-label="App Logo">⚛️</span>
+	</div>
+
+	<!-- 中间导航图标 -->
+	<div class="nav-list">
+		{#each navItems as item}
+			<button
+				class="nav-item"
+				class:active={activePath === item.path}
+				on:click={() => navigate(item.path)}
+				title={item.label}
+			>
+				{item.icon}
+			</button>
+		{/each}
+	</div>
+
+	<!-- 底部设置/用户图标 -->
+	<div class="bottom-icons">
+		<button class="nav-item" title="用户资料">👤</button>
+		<button class="nav-item" title="退出">↩️</button>
+	</div>
+</nav>
+
+<style>
+    /* 侧边栏的基础样式 */
+    .sidebar {
+        /* 根据图片，侧边栏宽度较窄，可能在 60px 左右 */
+        width: 25px;
+        min-width: 35px; /* 确保它不会收缩 */
+        height: 100%;
+        background-color: var(--main-bg-color); /* 比主背景稍亮 */
+        display: flex;
+        flex-direction: column; /* 垂直排列内容 */
+        align-items: center;
+        padding: 10px 0;
+        box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
+        user-select: none; /* 阻止文本选择 */
+    }
+
+    /* Logo/顶部区域 */
+    .sidebar-logo {
+        font-size: 1rem;
+        margin-bottom: 20px;
+        cursor: pointer;
+    }
+
+    /* 导航列表区域 */
+    .nav-list {
+        flex: 1; /* 占据中间所有剩余垂直空间，将底部图标推到底部 */
+        display: flex;
+        flex-direction: column;
+        gap: 15px; /* 增加图标间的间隔 */
+    }
+
+    /* 底部图标区域 */
+    .bottom-icons {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    /* 导航按钮样式 */
+    .nav-item {
+        background: none;
+        border: none;
+        color: #b0b0b0; /* 默认图标颜色 */
+        font-size: 1rem;
+        width: 30px;
+        height: 30px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: background-color 0.2s, color 0.2s;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* 鼠标悬停效果 */
+    .nav-item:hover {
+        background-color: #3e3e3e;
+        color: #ffffff;
+    }
+
+    /* 激活状态效果（关键：模拟选中高亮） */
+    .nav-item.active {
+        /* 侧边栏上常见的条状高亮 */
+        color: #ffffff;
+        position: relative;
+    }
+    .nav-item.active::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px; /* 高亮的条形宽度 */
+        height: 80%;
+        background-color: #4CAF50; /* 绿色高亮条 */
+        border-radius: 0 4px 4px 0;
+    }
+</style>