Index.dml-XWorker

Index.dml是主页面，显示一个用Bootstrap5编写的登录界面。
模型的路径：src\main\resources\org\xworker\web\Index.dml。模型XML作为文本编辑，但一般建议使用模型编辑器来编辑。
<?xml version="1.0" encoding="utf-8"?>

<SimpleControl name="Index" th_createTime="1757227503320" descriptors="xworker.web.controls.SimpleControl"
     mappingPath="/">
    <view title="欢迎来到XWorker">
        <code name="style" _xmeta_id_="code" appendTo="head">
            <code><![CDATA[<style>
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            width: 100%;
            max-width: 400px;
        }
        .card-header {
            background: #fff;
            border-bottom: none;
            padding: 2rem 1rem 1rem;
            text-align: center;
        }
        .card-body {
            padding: 2rem;
        }
        .form-control {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
        }
        .input-group-text {
            background: transparent;
            border-right: none;
        }
        .form-control:focus {
            box-shadow: none;
            border-color: #6a11cb;
        }
        .btn-login {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            border: none;
            padding: 0.75rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }
        .divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
        }
        .divider::before, .divider::after {
            content: "";
            flex: 1;
            border-bottom: 1px solid #ddd;
        }
        .divider span {
            padding: 0 1rem;
            color: #777;
        }
    </style>]]></code>
        </code>
        <bootstrap5 descriptors="xworker.bootstrap.v5.Bootstrap5">
            <code name="code">
                <code><![CDATA[<div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <div class="card login-card">
                    <div class="card-header">
                        <h2 class="mb-3 fw-bold">欢迎来到XWorker</h2>
                        <p class="text-muted">请输入您的账号信息登录系统</p>
                    </div>
                    <div class="card-body">
                        <form id="loginForm">
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label for="password" class="form-label">密码</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                                </div>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="rememberMe">
                                <label class="form-check-label" for="rememberMe">记住我</label>
                                <a href="#" class="float-end text-decoration-none">忘记密码?</a>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-login">登录</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-center py-3">
                        <p class="mb-0">还没有账号? <a href="#" class="text-decoration-none">立即注册</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="position-fixed bottom-0 end-0 p-3">    
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    登录
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    登录成功，欢迎：<span id="userNameSpan"></span>
  </div>
</div>
</div>]]></code>
            </code>
        </bootstrap5>
        <code name="script" appendTo="bottom">
            <code><![CDATA[<script>
// 初始化Toast
    const toastEl = document.getElementById('liveToast');
    const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
    
    // 表单验证和提交
    document.getElementById('loginForm').addEventListener('submit', async function(event) {
        event.preventDefault();
        
        // 简单的表单验证
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        if (!username || !password) {
            alert('请填写用户名和密码');
            return;
        }
        
        // 显示加载状态
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...';
        submitBtn.disabled = true;
        
        try {
            // 发送POST请求到API
            const response = await fetch('${(request.contextPath)?if_exists}/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            });
            
            // 解析JSON响应
            const data = await response.json();
            
            if (data.success) {
                // 登录成功
                document.getElementById('userNameSpan').html = data.userName;
                toast.show();
                
                // 在实际应用中，这里可以跳转到其他页面或执行其他操作
                // window.location.href = '/dashboard';
            } else {
                // 登录失败
                alert('登录失败，请检查用户名和密码');
            }
        } catch (error) {
            console.error('登录请求错误:', error);
            alert('登录请求失败，请稍后重试');
        } finally {
            // 恢复按钮状态
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    });
</script>]]></code>
        </code>
    </view>
    <result name="success" value="org.xworker.web.Index/@view"></result>
</SimpleControl>