feat(ui): 更新页面布局与样式提升用户体验

- 移除无用的空<style>标签
- 安装页面文本提示优化及布局调整
- 首页添加交互式安装按钮并完善页面内容- 全局字体引入并设置默认字体为MiSans- 添加窗口关闭权限以支持功能完整控制
- 头部组件模糊效果样式微调- 视频壁纸组件宽度适配全屏- package-lock.json依赖更新，移除多余peer标记
- 引入sass作为可选样式预处理器支持

package-lock.json

@@ -1202,7 +1202,6 @@
 			"integrity": "sha512-TGFX1pZUt9qqY20Cv5NyYvy0iLWHf2jXi8s+eCGsig7jQMdwZWKUFMR6TbvFNhfDSUpc1sH/Y5EHv20g3HHA3g==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
 				"@sveltejs/acorn-typescript": "^1.0.5",
@@ -1242,7 +1241,6 @@
 			"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
 				"debug": "^4.4.1",
@@ -1822,7 +1820,6 @@
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2552,7 +2549,6 @@
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -2595,7 +2591,6 @@
 			"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
@@ -2612,7 +2607,6 @@
 			"integrity": "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"peerDependencies": {
 				"prettier": "^3.0.0",
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
@@ -2776,13 +2770,34 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.93.3.tgz",
+			"integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"chokidar": "^4.0.0",
+				"immutable": "^5.0.2",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher": "^2.4.1"
+			}
+		},
 		"node_modules/sass-embedded": {
 			"version": "1.93.3",
 			"resolved": "https://registry.npmmirror.com/sass-embedded/-/sass-embedded-1.93.3.tgz",
 			"integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@bufbuild/protobuf": "^2.5.0",
 				"buffer-builder": "^0.2.0",
@@ -3180,7 +3195,6 @@
 			"integrity": "sha512-kjkAjCk41mJfvJZG56XcJNOdJSke94JxtcX8zFzzz2vrt47E0LnoBzU6azIZ1aBxJgUep8qegAkguSf1GjxLXQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3323,7 +3337,6 @@
 			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
 			"dev": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -3345,7 +3358,6 @@
 			"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.5.0",

src-tauri/capabilities/default.json

@@ -13,6 +13,7 @@
     "core:window:allow-unmaximize",
     "core:window:allow-toggle-maximize",
     "core:window:allow-start-dragging",
+		"core:window:allow-close",
     "fs:default",
     "dialog:default"
   ]

src/app.css

@@ -3,3 +3,14 @@
     themes: all;
 }
 
+@font-face {
+    font-family: 'MiSans';
+    src: url('/fonts/MiSans.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    font-family: 'MiSans', sans-serif;
+}

src/lib/components/layout/Header.svelte

@@ -10,7 +10,7 @@
 
 </script>
 
-<header class="h-8 z-50 w-full backdrop-blur absolute top-0 window-controls flex gap-10 px-3 items-center" data-tauri-drag-region>
+<header class="h-8 z-50 w-full backdrop-blur-xs absolute top-0 window-controls flex gap-10 px-3 items-center" data-tauri-drag-region>
 
 	<div class="flex-1" data-tauri-drag-region></div>
 

src/lib/components/layout/VideoWallpaper.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="app-wallpaper absolute top-0 -z-10" >
-	<video class=" h-screen object-cover select-none -z-10 " autoplay muted loop playsinline>
+	<video class=" h-screen w-screen object-cover select-none -z-10 " autoplay muted loop playsinline>
 		<source src="{video}" type="video/mp4">
 	</video>
 </div>

src/routes/+layout.svelte

@@ -23,6 +23,3 @@
 </div>
 
 
-<style>
-
-</style>

src/routes/+page.svelte

@@ -1,12 +1,54 @@
-<div class="relative pt-10 px-4 ">
+<script lang="ts">
-	<h1>123</h1>
+	import { goto } from '$app/navigation';
-	haisdjiasjd
+
-	as
+	let isHover = false;
-	dasdasd
+
-	as
+	// 提取函数：处理“激活”状态
-	d
+	function handleFocus() {
-	asd
+		isHover = true;
-	asd
+	}
-	as
+
-	d
+	// 提取函数：处理“失活”状态
+	function handleBlur() {
+		isHover = false;
+	}
+</script>
+
+
+<!--<div class={'relative pt-10 px-4  h-screen w-screen flex justify-center items-center transition-all ' }}-->
+<!--		 class:backdrop-blur-xs={isHover}-->
+<!--&gt;-->
+<!--	<button class="btn btn-wide" on:mouseenter={()=>{isHover = true}} on:mouseout={()=>{isHover = false}}>安装游戏</button>-->
+<!--</div>-->
+
+
+<div class="hero  min-h-screen transition-all {isHover ? 'bg-neutral-700/30' : ''} "
+		 class:backdrop-blur-xs={isHover}
+
+>
+	<div class="hero-content text-center select-none">
+		<div class="max-w-md" >
+			<h1 class="text-5xl font-bold"
+					on:mouseenter={()=>{isHover = true}}
+					on:mouseout={()=>{isHover = false}}
+					on:blur={handleBlur}
+					on:focus={handleFocus}
+			>逃离鸭科夫</h1>
+			<p class="py-6"
+				 on:mouseenter={()=>{isHover = true}}
+				 on:mouseout={()=>{isHover = false}}
+				 on:blur={handleBlur}
+				 on:focus={handleFocus}
+			>
+				<span class="font-bold">《逃离鸭科夫》</span>是一款鸭子题材PVE俯视角撤离射击游戏。你要在鸭科夫的世界里搜寻物资，建造藏身处，升级装备，从一无所有到做大做强；面对虎视眈眈的敌鸭，想方设法生存下去——或者逃离。
+			</p>
+			<button class="btn btn-primary btn-wide "
+							on:mouseenter={()=>{isHover = true}}
+							on:mouseout={()=>{isHover = false}}
+							on:blur={handleBlur}
+							on:focus={handleFocus}
+							on:click={()=>{goto('/install')}}
+			>安装游戏</button>
+		</div>
+	</div>
 </div>

src/routes/install/+page.svelte

@@ -25,7 +25,7 @@
 			installPath = selected;
 			log('已选择安装目录:'+selected+"，点击开始安装即可开始自动安装");
 		}else if (selected === null) {
-			log("取消选择安装目录");
+			log("未选择安装目录");
 		}else{
 			log("选择安装目录失败");
 		}
@@ -81,16 +81,18 @@
 
 </script>
 
-<main class="h-screen flex flex-col bg-base ">
+<main class="h-screen flex flex-col backdrop-blur bg-neutral-700/30">
 
-	<div class="flex-1 pt-10 px-4 overflow-hidden">
+	<div class="flex-1 pt-10 px-5 overflow-hidden relative ">
-		<h1 class="textarea-xl">选择安装目录</h1>
+		<h1 class="textarea-xl  font-bold absolute">选择目标安装位置</h1>
-		<pre
+		<div class="h-full  pt-10">
-			class="overflow-y-auto h-full whitespace-pre-wrap wrap-break-word text-start"
+			<pre
-			bind:this={logOutputElement}
+				class=" overflow-y-auto h-full whitespace-pre-wrap wrap-break-word   "
-		>
+				bind:this={logOutputElement}
+			>
 {logContent}
 		</pre>
+		</div>
 	</div>
 
 	<div class="h-32 shrink-0 p-4 border-base  ">