feat(install): 实现游戏安装页面功能
- 添加安装路径选择逻辑- 实现调用 Rust 后端进行安装的功能 - 增加安装过程日志显示与自动滚动 - 添加视频背景组件替换原有首页内容 - 引入 sass-embedded 依赖支持 SCSS 样式编写 - 更新 Header 组件增加 backdrop-blur 效果
This commit is contained in:
@@ -1,92 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { open } from '@tauri-apps/plugin-dialog';
|
||||
let installPath = '未选择安装路径';
|
||||
let isInstalling = false;
|
||||
|
||||
// 1. 打开目录选择对话框
|
||||
async function selectInstallDir() {
|
||||
// 默认打开 C:/Program Files,仅限 Windows
|
||||
const defaultPath = 'C:\\Program Files';
|
||||
|
||||
const selected = await open({
|
||||
directory: true, // 必须选择目录
|
||||
multiple: false, // 只能选择一个
|
||||
title: '请选择游戏的安装目录',
|
||||
defaultPath: defaultPath, // 初始打开的路径
|
||||
});
|
||||
|
||||
if (typeof selected === 'string') {
|
||||
installPath = selected;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 调用 Rust 后端命令开始安装
|
||||
async function startInstallation() {
|
||||
if (installPath === '未选择安装路径') {
|
||||
alert('请先选择安装路径!');
|
||||
return;
|
||||
}
|
||||
|
||||
isInstalling = true;
|
||||
try {
|
||||
// 调用我们在 Rust 中定义的 `install_game` 命令
|
||||
// Tauri 会自动处理前端和后端的数据传输
|
||||
const result: string = await invoke('install_game', {
|
||||
targetDir: installPath
|
||||
});
|
||||
|
||||
alert(`安装完成!\n${result}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('安装失败:', error);
|
||||
alert(`安装失败:${error}`);
|
||||
} finally {
|
||||
isInstalling = false;
|
||||
}
|
||||
}
|
||||
import video from '$lib/assets/video/c9df6498_517c_4fee_a39d_72b43f3425fd.mp4';
|
||||
</script>
|
||||
|
||||
<main class="h-screen flex flex-col bg-base ">
|
||||
<div class="app-wallpaper" >
|
||||
<video class="absolute h-screen object-cover -z-10" autoplay muted loop playsinline>
|
||||
<source src="{video}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 pt-10 px-4">
|
||||
<h1 class="text-3xl font-bold">游戏安装程序</h1>
|
||||
</div>
|
||||
<style lang="scss">
|
||||
|
||||
<div class="h-32 shrink-0 p-4 border-base ">
|
||||
|
||||
<div class="flex items-center">
|
||||
<input class="input flex-1" value={installPath} />
|
||||
|
||||
<button class="btn " on:click={selectInstallDir} disabled={isInstalling}>
|
||||
选择安装目录
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-4 text-center btn-primary">
|
||||
<button class="btn btn-block" on:click={startInstallation} disabled={isInstalling}>
|
||||
{isInstalling ? '正在安装...' : '开始安装'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!-- <h1>游戏安装程序</h1>-->
|
||||
|
||||
<!-- <div class="path-display">-->
|
||||
<!-- <p>目标安装路径: <strong>{installPath}</strong></p>-->
|
||||
<!-- <button on:click={selectInstallDir} disabled={isInstalling}>-->
|
||||
<!-- 选择安装目录-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <button class="btn">Default</button>-->
|
||||
<!-- <button-->
|
||||
<!-- on:click={startInstallation}-->
|
||||
<!-- disabled={isInstalling || installPath === '未选择安装路径'}>-->
|
||||
<!-- {isInstalling ? '正在安装...' : '开始安装'}-->
|
||||
<!-- </button>-->
|
||||
|
||||
<style>
|
||||
/* 基础样式 */
|
||||
</style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user