feat(tauri): 添加自定义标题栏和窗口控制功能

- 在布局中引入 Header 组件并渲染
- 设置页面 SSR 为 false 并启用预渲染
- 更新应用 CSS 样式，设置背景色和尺寸- 配置 Tauri 权限以支持窗口操作
- 新增 Header 组件实现窗口最小化、最大化和关闭功能- 安装 @tauri-apps/api 依赖并更新 package.json 和 lock 文件
- 修改 README 内容为 IT Tools项目简介
- 更新 Tauri 配置文件中的产品标识和构建路径

src/app.css

@@ -1 +1,10 @@
 @import 'tailwindcss';
+
+
+:global(body) {
+
+    background-color: #1f1f1f; /* 示例：一个深灰色 */
+    min-height: 100vh;
+    min-width: 100vw;
+    margin: 0; /* 移除浏览器默认的 body 边距 */
+}

src/lib/assets/icon/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m13.414 12l3.293-3.293a1 1 0 0 0-1.414-1.414L12 10.586L8.707 7.293a1 1 0 0 0-1.414 1.414L10.586 12l-3.293 3.293a1 1 0 0 0 1.414 1.414L12 13.414l3.293 3.293a1 1 0 0 0 1.414-1.414Z"/><path fill="currentColor" d="M19.07 4.93A10 10 0 1 0 4.93 19.07A10 10 0 1 0 19.07 4.93m-2.363 10.363a1 1 0 1 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L10.586 12L7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12Z" opacity="0.5"/></svg>

src/lib/components/layout/Header.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { getCurrentWindow } from '@tauri-apps/api/window';
+	import {onMount} from 'svelte';
+
+	const win = getCurrentWindow();
+
+	let isMax = false;
+
+
+	const minimize = () => win.minimize();
+	const closeWindow = () => win.close();
+	const maximize = () => win.toggleMaximize();
+
+
+	onMount(async () => {
+		// 1. 获取初始状态
+		isMax = await win.isMaximized();
+
+		// 2. 使用 onResized 更稳定（而不是 tauri://resize）
+		const unlisten = await win.onResized(async () => {
+			isMax = await win.isMaximized();
+		});
+
+		// 3. 返回清理函数
+		return () => unlisten();
+	});
+
+</script>
+
+<header class="custom-titlebar" data-tauri-drag-region>
+	<div class="app-title" data-tauri-drag-region>
+		🎉 我的Tauri Svelte应用
+	</div>
+
+	<div class="window-controls">
+		<button data-tauri-drag-region="false" class="h-btn" on:click={minimize}>最小化</button>
+		<button data-tauri-drag-region="false" class="h-btn" on:click={maximize}>{ isMax?'取消最大化':'最大化'}</button>
+		<button data-tauri-drag-region="false" class="h-btn btn-close" on:click={closeWindow}>关闭</button>
+	</div>
+</header>
+
+<style>
+    .custom-titlebar {
+        height: 30px;
+        background-color: #333;
+        color: white;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        user-select: none;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+
+
+</style>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import Header from '$lib/components/layout/Header.svelte';
 
 	let { children } = $props();
 </script>
@@ -8,5 +9,6 @@
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
+<Header/>
 
 {@render children()}

src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = true;

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <div>
-	<h1>123{title}</h1>
+	<h1>112323{title}</h1>
 	<p>{description}</p>
 </div>