feat(app): 初始化应用路由与基础样式- 添加 about 页面并实现页面间导航

- 更新全局样式，设置背景色与文字颜色
-优化 Header 组件，美化窗口控制按钮
- 引入持久化存储工具类
- 调整 Tauri 配置，设置构建路径与窗口最小尺寸- 替换 SVG 图标文件为 sprite 形式

src-tauri/tauri.conf.json

@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "identifier": "cn.nopj.ittools",
   "build": {
-    "frontendDist": "../src",
+    "frontendDist": "../build",
     "devUrl": "http://localhost:5173",
     "beforeDevCommand": "npm run dev",
     "beforeBuildCommand": "npm run build"
@@ -17,7 +17,9 @@
         "height": 600,
         "resizable": true,
         "fullscreen": false,
-        "decorations": false
+        "decorations": false,
+        "minWidth": 400 ,
+        "minHeight": 300
       }
     ],
     "security": {

src/app.css

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

src/lib/assets/icon/close.svg

@@ -1 +0,0 @@
-<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/assets/icon/sprite.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" >
+
+</svg>

src/lib/components/layout/Header.svelte

@@ -1,48 +1,40 @@
 <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 type="button" aria-label="最小化窗口" data-tauri-drag-region="false" class="h-btn btn-minimize" on:click={minimize}></button>
-		<button data-tauri-drag-region="false" class="h-btn" on:click={maximize}>{ isMax?'取消最大化':'最大化'}</button>
+		<button
-		<button data-tauri-drag-region="false" class="h-btn btn-close" on:click={closeWindow}>关闭</button>
+			type="button"
+			data-tauri-drag-region="false"
+			class="h-btn btn-max"
+			aria-label="最大化窗口"
+			on:click={maximize}></button>
+		<button type="button"
+						data-tauri-drag-region="false"
+						class="h-btn btn-close"
+						aria-label="关闭窗口"
+						on:click={closeWindow}></button>
 	</div>
 </header>
 
 <style>
     .custom-titlebar {
         height: 30px;
-        background-color: #333;
+        background-color: #1f1f1f;
         color: white;
         display: flex;
         justify-content: space-between;
@@ -54,6 +46,54 @@
         z-index: 1000;
     }
 
+    .window-controls {
+        display: flex;
+        gap: 10px;
+    }
 
+    .window-controls button {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    /* 🟡 最小化按钮 */
+    .window-controls button.btn-minimize {
+        background-color: #febc2e;
+    }
+    .window-controls button.btn-minimize:hover {
+        background-color: #ffca45;
+        box-shadow: 0 0 4px #ffca45;
+    }
+    .window-controls button.btn-minimize:active {
+        background-color: #d9a323;
+    }
+
+    /* 🔴 关闭按钮 */
+    .window-controls button.btn-close {
+        background-color: #ff5f57;
+    }
+    .window-controls button.btn-close:hover {
+        background-color: #ff7b73;
+        box-shadow: 0 0 4px #ff7b73;
+    }
+    .window-controls button.btn-close:active {
+        background-color: #e0463c;
+    }
+
+    /* 🟢 最大化按钮（未最大化状态） */
+    .window-controls button.btn-max {
+        background-color: #28c940;
+    }
+    .window-controls button.btn-max:hover {
+        background-color: #34d058;
+        box-shadow: 0 0 4px #34d058;
+    }
+    .window-controls button.btn-max:active {
+        background-color: #1fae39;
+    }
 
 </style>

src/lib/utils/persistedStroeUtil.ts

@@ -0,0 +1,23 @@
+import {writable,type Writable} from 'svelte/store';
+
+export function persistedStore<T> (key: string, initialValue: T): Writable<T> {
+	let storedValue: T;
+	try {
+		const json = localStorage.getItem(key);
+		storedValue = json ? JSON.parse(json) : initialValue;
+	} catch (e) {
+		console.warn(`读取 localStorage key = ${key} 失败`, e);
+		storedValue = initialValue;
+	}
+	const store = writable<T>(storedValue);
+
+	store.subscribe(value => {
+		try {
+			localStorage.setItem(key, JSON.stringify(value));
+		} catch (e) {
+			console.warn(`写入 localStorage key=${key} 失败`, e);
+		}
+	});
+
+	return store;
+}

src/routes/+page.svelte

@@ -1,12 +1,16 @@
-<div>
+<div class="app-container">
-	<h1>112323{title}</h1>
+
-	<p>{description}</p>
+	<ul>
+
+		<li on:click={() => goto('/about')}>关于</li>
+	</ul>
 </div>
 
 <style>
+
 </style>
 
 <script>
-	const title = 'About';
+
-	const description = 'This is the about page';
+import { goto } from '$app/navigation';
 </script>

src/routes/about/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { goto } from '$app/navigation';
+</script>
+
+<ul>
+	<li on:click={() => goto('/')}>首页</li>
+</ul>