yes.blog/Yes.Blog/Areas/Install/Pages/Index.cshtml

@page
@model Yes.Blog.Areas.Install.Pages.IndexModel
@{
}


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Admin</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="/admin/js/alpine.min.js" defer></script>
    <script src="/admin/js/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/admin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/admin/css/theme.css">
    <style>
        body {
            background-color: #f4f4f4;
            font-family: 'Arial', sans-serif;
        }

        .installation-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 30px;
            background-color: #fff;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        label {
            font-weight: bold;
            color: #333;
        }

        .form-control {
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

            .form-control:focus {
                border-color: #007bff;
                box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            }

        .btn-primary {
            width: 100%;
            border: none;
            border-radius: 4px;
            padding: 10px;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
        }

            .btn-primary:hover {
                background-color: #0056b3;
            }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
    </style>
</head>
<body x-data="data">
    <div class="installation-container">
        <template x-data x-if="errorMessage">
            <div class="alert alert-danger" x-show="errorMessage" x-transition x-text="errorMessage"></div>
        </template>

        <h1>Hyrule安装</h1>


        <div class="form-group">
            <label>数据库类型:</label>
            <select class="form-control" x-model="data.databaseType">
                <option value="">请选择数据类型</option>
                <option value="MySql">MySQL</option>
                <option value="SqlServer">SQL Server</option>
                <option value="PostgreSql">PostgreSQL</option>
            </select>
        </div>
        <div class="form-group" x-show="data.databaseType && data.databaseType=='MySql'">
            <label>数据库版本:</label>
            <input type="text" class="form-control" x-model="data.databaseVersion" placeholder="请填写数据库版本,如 8.4.5">
        </div>
        <div class="form-group">
            <label>数据库地址:</label>
            <input type="text" class="form-control" x-model="data.databaseServer" placeholder="请输入您的数据库地址">
        </div>
        <div class="form-group">
            <label>数据库用户名:</label>
            <input type="text" class="form-control" x-model="data.databaseUser" placeholder="请输入您的数据库用户名">
        </div>
        <div class="form-group">
            <label>数据库密码:</label>
            <input type="text" class="form-control" x-model="data.databasePassword" placeholder="请输入您的数据库密码">
        </div>
        <div class="form-group">
            <label>数据库名称:</label>
            <input type="text" class="form-control" x-model="data.databaseName" placeholder="请输入您的数据库名称">
        </div>

        <template x-data x-if="!installing && !installed">
            <button type="submit" class="btn btn-primary" x-on:click="install">安装</button>
        </template>
        <template x-data x-if="installing && !installed">
            <button type="submit" class="btn btn-primary">安装中......</button>
        </template>

        <template x-data x-if="successMessage">
            <div class="alert alert-success" x-show="successMessage" x-transition x-text="successMessage"></div>
        </template>
    </div>
    <script>
        document.addEventListener('alpine:init', function () {
            Alpine.data('data', function () {
                return {
                    data: {
                        databaseType: "SQLite",
                        useDefaultAdmin: true,
                        databaseName:"Blog"
                    },
                    errorMessage:"",
                    installing : false,
                    installed : false,
                    install() {
                        if(this.installing){
                            return;
                        }
                        this.installing = true;
                        this
                        this.errorMessage = "";
                        this.successMessage = "";
                        axios.post('/install', this.data)
                            .then(res => {
                                console.log("res",res)
                                if(res.data.success){
                                     this.successMessage = "安装成功，默认账号admin，密码admin。3秒后将自动跳转到后台管理登录页面。";
                                     this.installed = true;
                                     setTimeout(function(){ location.href="/admin";},5000);
                                }else{
                                    this.errorMessage = "安装失败："+ res.data.message;
                                }

                            })
                            .catch(error => {
                                this.errorMessage = "安装过程中出现错误！";
                            })
                            .finally(() => {
                                this.installing = false;
                            });
                    }
                };
            })
        });
    </script>
</body>
</html>