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

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

README.md

@@ -1,38 +1,2 @@
-# sv
+# IT Tools
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "it-tools",
 			"version": "0.0.1",
+			"dependencies": {
+				"@tauri-apps/api": "^2.9.0"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.47.1",
@@ -1209,6 +1212,16 @@
 				"vite": "^5.2.0 || ^6 || ^7"
 			}
 		},
+		"node_modules/@tauri-apps/api": {
+			"version": "2.9.0",
+			"resolved": "https://registry.npmmirror.com/@tauri-apps/api/-/api-2.9.0.tgz",
+			"integrity": "sha512-qD5tMjh7utwBk9/5PrTA/aGr3i5QaJ/Mlt7p8NilQ45WgbifUNPyKWsA63iQ8YfQq6R8ajMapU+/Q8nMcPRLNw==",
+			"license": "Apache-2.0 OR MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/tauri"
+			}
+		},
 		"node_modules/@tauri-apps/cli": {
 			"version": "2.9.2",
 			"resolved": "https://registry.npmmirror.com/@tauri-apps/cli/-/cli-2.9.2.tgz",

package.json

@@ -28,5 +28,8 @@
 		"tailwindcss": "^4.1.14",
 		"typescript": "^5.9.3",
 		"vite": "^7.1.10"
+	},
+	"dependencies": {
+		"@tauri-apps/api": "^2.9.0"
 	}
 }

src-tauri/capabilities/default.json

@@ -6,6 +6,12 @@
     "main"
   ],
   "permissions": [
-    "core:default"
+    "core:default",
+    "core:window:allow-close",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-start-dragging"
   ]
 }

src-tauri/tauri.conf.json

@@ -2,9 +2,9 @@
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "it-tools",
   "version": "0.1.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "cn.nopj.ittools",
   "build": {
-    "frontendDist": "../public",
+    "frontendDist": "../src",
     "devUrl": "http://localhost:5173",
     "beforeDevCommand": "npm run dev",
     "beforeBuildCommand": "npm run build"
@@ -35,4 +35,5 @@
       "icons/icon.ico"
     ]
   }
+
 }

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>