feat(installer): 实现游戏安装程序页面

- 添加选择安装目录功能,支持 Windows 默认路径
- 集成 Rust 后端 install_game 命令
- 实现安装进度提示与结果反馈- 移除旧网络工具页面与关于页面
- 更新全局样式配置,引入 daisyUI 主题
- 调整窗口控制栏布局与样式
- 添加 Tauri 插件权限配置 (fs, dialog)
- 升级依赖库并添加系统组件支持
This commit is contained in:
Chaos
2025-11-11 16:16:37 +08:00
parent 514c025caf
commit a09f4a7e6e
72 changed files with 708 additions and 320 deletions

View File

@@ -1,14 +1,92 @@
<div class="app-container">
<div class="app-content">
123
<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;
}
}
</script>
<main class="h-screen flex flex-col bg-base ">
<div class="flex-1 pt-10 px-4">
<h1 class="text-3xl font-bold">游戏安装程序</h1>
</div>
</div>
<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>
<script>
</script>