<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理 - Struts2 CRUD 示例</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1000px; margin: 40px auto; padding: 20px; background:#f7f8fa; }
        h1 { color: #e74c3c; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; background:#fff; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background: #3498db; color: white; }
        tr:nth-child(even) { background: #f9f9f9; }
        .btn { padding: 6px 12px; text-decoration: none; border-radius: 4px; margin-right: 5px; display:inline-block; }
        .btn-edit { background: #f39c12; color: white; }
        .btn-delete { background: #e74c3c; color: white; }
        .btn-add { background: #2ecc71; color: white; padding: 10px 20px; }
        .tip, .lab { background: #fff; padding: 15px; border-radius: 10px; margin: 20px 0; box-shadow:0 4px 14px rgba(0,0,0,.06); }
        .lab { border-left: 4px solid #fa8c16; background:#fff7e6; }
        .stats { display:flex; gap:12px; flex-wrap:wrap; margin:15px 0; }
        .stat { background:#fff; padding:14px 18px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.06); min-width:160px; }
        .stat strong { display:block; font-size:1.4em; color:#3498db; }
        code { background:#f0f0f0; padding:2px 6px; border-radius:4px; }
    </style>
</head>
<body>
    <h1>👥 用户管理 - Struts2 CRUD 示例</h1>

    <div class="lab">
        <strong>实验任务卡</strong>
        <ul>
            <li>先新增一个用户，观察表单提交后为什么会回到列表页</li>
            <li>再编辑一个用户，体会 Struts2 如何把已有数据回填到表单</li>
            <li>最后删除一个用户，理解 <code>redirectAction</code> 的使用场景</li>
        </ul>
    </div>

    <div class="stats">
        <div class="stat"><span>当前用户数</span><strong><s:property value="userList.size()"/></strong></div>
        <div class="stat"><span>演示模式</span><strong>内存列表</strong></div>
        <div class="stat"><span>学习重点</span><strong>CRUD 流程</strong></div>
    </div>
    
    <p><a class="btn btn-add" href="user_edit">+ 添加用户</a></p>
    
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <s:iterator value="userList" var="u">
            <tr>
                <td><s:property value="#u.id"/></td>
                <td><s:property value="#u.name"/></td>
                <td><s:property value="#u.email"/></td>
                <td><s:property value="#u.age"/></td>
                <td>
                    <a class="btn btn-edit" href="user_edit?id=<s:property value='#u.id'/>">编辑</a>
                    <a class="btn btn-delete" href="user_delete?id=<s:property value='#u.id'/>" onclick="return confirm('确定删除?')">删除</a>
                </td>
            </tr>
        </s:iterator>
    </table>
    
    <div class="tip">
        <strong>学习点</strong>
        <ul>
            <li><code>&lt;s:iterator&gt;</code> 遍历集合</li>
            <li><code>redirectAction</code> 结果类型实现 PRG 模式</li>
            <li>同一个 Action 通过不同 method 处理 list/add/edit/update/delete</li>
            <li>这里的数据存在内存里，重启后会恢复初始样本</li>
        </ul>
    </div>
    
    <p><a href="learn">← 返回学习中心</a></p>
</body>
</html>
