feat(success): 添加外部链接打开功能并优化页面样式- 集成 tauri-plugin-opener 插件以支持外部链接打开

- 新增 handleExternalLink 方法处理链接点击事件
- 更新 success 页面样式，增强视觉效果
- 添加 MiSans 字体支持
- 引入最新资源列表展示功能
- 优化按钮交互效果和页面布局

src/app.css

@@ -13,4 +13,7 @@
 
 body {
     font-family: 'MiSans', sans-serif;
+}
+.font-misans{
+    font-family: 'MiSans', sans-serif;
 }

src/routes/+page.svelte

@@ -49,6 +49,13 @@
 							on:focus={handleFocus}
 							on:click={()=>{goto('/install')}}
 			>安装游戏</button>
+			<button class="btn btn-primary btn-wide "
+							on:mouseenter={()=>{isHover = true}}
+							on:mouseout={()=>{isHover = false}}
+							on:blur={handleBlur}
+							on:focus={handleFocus}
+							on:click={()=>{goto('/success')}}
+			>完成</button>
 		</div>
 	</div>
 </div>

src/routes/success/+page.svelte

@@ -1,21 +1,78 @@
-<script>
+<script lang="ts">
 	import tl from '$lib/assets/images/tl.png'
+	import { onMount } from 'svelte';
+	import { openUrl } from '@tauri-apps/plugin-opener';
+
+	let data:[{attributes:{title:string, slug:string, id:string}}] = [];
+	let loading = true;
+	let error;
+
+	const url = "https://nopj.cn/api/discussions?include=tags.parent&filter[tag]=resources&sort=-createdAt&page[offset]=0&page[limit]=5"
+
+	onMount(async () => {
+		try {
+			const res = await fetch(url,{
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
+
+			if (!res.ok){
+				throw new Error(res.statusText);
+			}
+			let jsonStr = await res.json();
+			console.log(jsonStr.data);
+			data = jsonStr.data
+		}catch (e: any){
+			error = e.message;
+		} finally {
+
+		}
+	})
+
+
+
+	async function handleExternalLink(event: MouseEvent, targetUrl: string) {
+
+		event.preventDefault();
+
+		try {
+			await openUrl(targetUrl);
+		} catch (e) {
+			console.error("无法打开外部链接:", e);
+		}
+	}
 
-	//https://nopj.cn/api/discussions?include=tags.parent&filter[tag]=resources&sort=-createdAt&page[offset]=0
 </script>
 
 <div class="h-screen w-screen flex z-10 pt-8">
 	<div class="flex-1">
 		123
 	</div>
-	<div class=" w-96 bg-base-200 p-4 bg-cover bg-center text-base-300" style="background-image: url({tl})">
-		<h1 class="font-bold text-4xl text-right">NoPJ</h1>
-		<div class="pt-2">
-			<ul>
-				<li>
-					<a href="/">Home</a>
-				</li>
-			</ul>
+	<div class=" w-96 bg-base-200  bg-cover bg-center text-base-300 overflow-hidden relative" style="background-image: url({tl})">
+		<div class="h-full w-full absolute top-0  z-0">
+
+		</div>
+		<div class="z-10 relative p-4 w-full ">
+			<h1 class="font-bold text-4xl text-right">NoPJ</h1>
+			<p class="font-bold text-right pt-2 ">最新资源</p>
+			<div class="pt-4">
+
+				<ul class="list">
+					{#each data as item}
+						<li class="list-row backdrop-blur-xs hover:backdrop-blur-xl hover:font-bold transition-all mt-4  font-misans">
+							<a href="https://nopj.cn/d/{item.attributes.slug}" class="  "
+								 on:click={(e) => handleExternalLink(e, `https://nopj.cn/d/${item.attributes.slug}`)}
+							>
+							<span class="">
+								{item.attributes.title}
+							</span>
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
 		</div>
 	</div>
 </div>