feat: 首页改为可交互的 Demo CRUD 表格

src/main/java/com/example/hfspace/controller/HelloController.java

@@ -7,67 +7,148 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 /**
- * 演示接口：一个首页 HTML 和一个 JSON 接口，用于验证服务已上线。
+ * 演示接口：一个首页 HTML（含 Demo 数据 CRUD 表格）和一个 JSON 接口。
  */
 @RestController
 public class HelloController {
 
-    /** 首页：返回一段 HTML。 */
+    /** 首页：返回一段带 CRUD 表格的 HTML，直接对接 /api/demo 接口。 */
     @GetMapping(value = "/", produces = "text/html;charset=UTF-8")
     public String home() {
         return """
-            <html>
-              <head><meta charset="utf-8"><title>HF Space Demo</title></head>
-              <body style="font-family: sans-serif; padding: 40px; max-width: 800px; margin: 0 auto;">
-                <h1>🚀 HF Space Spring Boot Demo</h1>
-                <p>部署成功！基于 <strong>wfly-spring</strong> 配置（SQLPub MySQL + Upstash Redis）。</p>
+            <!DOCTYPE html>
+            <html lang="zh">
+            <head>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1">
+              <title>HF Space Demo</title>
+              <style>
+                body { font-family: -apple-system, sans-serif; padding: 24px; max-width: 960px; margin: 0 auto; color: #1f2329; }
+                h1 { margin-bottom: 4px; }
+                .sub { color: #646a73; margin-top: 0; }
+                .card { border: 1px solid #e5e6eb; border-radius: 8px; padding: 16px; margin: 16px 0; }
+                .form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+                input { padding: 8px 10px; border: 1px solid #c9cdd4; border-radius: 6px; font-size: 14px; }
+                input#title { width: 180px; }
+                input#content { flex: 1; min-width: 200px; }
+                button { padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
+                .btn-primary { background: #3370ff; color: #fff; }
+                .btn-ghost { background: #f2f3f5; color: #1f2329; }
+                .btn-danger { background: #f53f3f; color: #fff; }
+                .btn-sm { padding: 4px 10px; font-size: 13px; }
+                table { width: 100%; border-collapse: collapse; margin-top: 8px; }
+                th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #f0f0f0; font-size: 14px; vertical-align: top; }
+                th { color: #646a73; font-weight: 500; background: #fafafa; }
+                td.actions { white-space: nowrap; }
+                .muted { color: #8a8f99; font-size: 12px; }
+                #msg { margin-left: 8px; font-size: 13px; }
+                .ok { color: #00b42a; }
+                .err { color: #f53f3f; }
+                a { color: #3370ff; }
+              </style>
+            </head>
+            <body>
+              <h1>🚀 HF Space Spring Boot Demo</h1>
+              <p class="sub">基于 wfly-spring 配置（SQLPub MySQL + Upstash Redis）。下表直接读写真实数据库 <code>demo_items</code> 表。</p>
 
-                <h2>📡 接口列表</h2>
-                <ul>
-                  <li><strong>基础接口</strong>
-                    <ul>
-                      <li><a href="/api/hello">/api/hello</a> - 返回 JSON</li>
-                    </ul>
-                  </li>
-                  <li><strong>MySQL 示例</strong>（Demo CRUD，MyBatis Plus）
-                    <ul>
-                      <li><code>GET</code> <a href="/api/demo">/api/demo</a> - 列出所有项</li>
-                      <li><code>POST /api/demo</code> - 创建（Body: <code>{"title":"Test","content":"Hello"}</code>）</li>
-                      <li><code>GET /api/demo/{id}</code> - 查询单个</li>
-                      <li><code>PUT /api/demo/{id}</code> - 更新</li>
-                      <li><code>DELETE /api/demo/{id}</code> - 删除（逻辑删除）</li>
-                    </ul>
-                  </li>
-                  <li><strong>Redis 示例</strong>（Upstash 缓存）
-                    <ul>
-                      <li><a href="/api/cache/health">/api/cache/health</a> - Redis 健康检查</li>
-                      <li><code>POST /api/cache</code> - 存缓存（Body: <code>{"key":"foo","value":"bar","ttl":60}</code>）</li>
-                      <li><code>GET /api/cache/{key}</code> - 读缓存</li>
-                      <li><code>DELETE /api/cache/{key}</code> - 删缓存</li>
-                    </ul>
-                  </li>
-                  <li><strong>Druid 监控</strong>
-                    <ul>
-                      <li><a href="/druid/">/druid/</a> - 数据库连接池监控（用户名: admin / 密码: admin123）</li>
-                    </ul>
-                  </li>
-                </ul>
+              <div class="card">
+                <h3 style="margin-top:0;">Demo 数据管理</h3>
+                <div class="form-row">
+                  <input type="hidden" id="editId">
+                  <input id="title" placeholder="标题 title">
+                  <input id="content" placeholder="内容 content">
+                  <button class="btn-primary" onclick="save()">保存</button>
+                  <button class="btn-ghost" onclick="resetForm()">清空</button>
+                  <button class="btn-ghost" onclick="load()">刷新</button>
+                  <span id="msg"></span>
+                </div>
+                <table>
+                  <thead>
+                    <tr><th>ID</th><th>标题</th><th>内容</th><th>更新时间</th><th>操作</th></tr>
+                  </thead>
+                  <tbody id="rows"><tr><td colspan="5" class="muted">加载中…</td></tr></tbody>
+                </table>
+              </div>
 
-                <h2>📚 文档</h2>
+              <div class="card">
+                <h3 style="margin-top:0;">📡 其他接口</h3>
                 <ul>
-                  <li><a href="https://github.com/yourusername/yourrepo/blob/main/README.md">README.md</a> - 快速入门</li>
-                  <li><a href="https://github.com/yourusername/yourrepo/blob/main/ARCHITECTURE.md">ARCHITECTURE.md</a> - 架构详解</li>
-                  <li><a href="https://github.com/yourusername/yourrepo/blob/main/DEPLOY.md">DEPLOY.md</a> - 部署清单</li>
+                  <li><a href="/api/hello">/api/hello</a> · <a href="/api/cache/health">/api/cache/health</a>（Redis） · <a href="/druid/">/druid/</a>（监控 admin/admin123）</li>
                 </ul>
+              </div>
 
-                <h2>✅ 凭据来源</h2>
-                <p>此 demo 直接复用 <code>wfly-spring/application-dev.yaml</code> 的真实配置：</p>
-                <ul>
-                  <li><strong>MySQL</strong>: <code>mysql6.sqlpub.com:3311/vftdream</code>（master）</li>
-                  <li><strong>Redis</strong>: <code>hot-boa-127738.upstash.io</code>（Upstash 主库）</li>
-                </ul>
-                <p>⚠️ <strong>注意</strong>：示例数据会写入真实数据库，生产环境请单独配置。</p>
-              </body>
+              <script>
+                const API = '/api/demo';
+                const $ = id => document.getElementById(id);
+                function msg(text, ok) {
+                  const m = $('msg');
+                  m.textContent = text;
+                  m.className = ok ? 'ok' : 'err';
+                  setTimeout(() => { m.textContent = ''; }, 2500);
+                }
+                function esc(s) {
+                  return String(s == null ? '' : s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+                }
+                async function load() {
+                  const tbody = $('rows');
+                  try {
+                    const res = await fetch(API);
+                    const json = await res.json();
+                    const list = json.data || [];
+                    if (!list.length) { tbody.innerHTML = '<tr><td colspan="5" class="muted">暂无数据，添加一条试试</td></tr>'; return; }
+                    tbody.innerHTML = list.map(it => `
+                      <tr>
+                        <td>${it.id}</td>
+                        <td>${esc(it.title)}</td>
+                        <td>${esc(it.content)}</td>
+                        <td class="muted">${esc(it.updateTime || it.createTime || '')}</td>
+                        <td class="actions">
+                          <button class="btn-ghost btn-sm" onclick="edit(${it.id}, '${esc(it.title).replace(/'/g, "&#39;")}', '${esc(it.content).replace(/'/g, "&#39;")}')">编辑</button>
+                          <button class="btn-danger btn-sm" onclick="del(${it.id})">删除</button>
+                        </td>
+                      </tr>`).join('');
+                  } catch (e) {
+                    tbody.innerHTML = '<tr><td colspan="5" class="err">加载失败：' + esc(e.message) + '</td></tr>';
+                  }
+                }
+                async function save() {
+                  const id = $('editId').value;
+                  const title = $('title').value.trim();
+                  const content = $('content').value.trim();
+                  if (!title) { msg('标题不能为空', false); return; }
+                  const body = JSON.stringify({ title, content });
+                  const opts = { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body };
+                  const url = id ? (API + '/' + id) : API;
+                  try {
+                    const res = await fetch(url, opts);
+                    const json = await res.json();
+                    if (json.code === 0) { msg(id ? '已更新' : '已创建', true); resetForm(); load(); }
+                    else { msg(json.message || '操作失败', false); }
+                  } catch (e) { msg('请求失败：' + e.message, false); }
+                }
+                function edit(id, title, content) {
+                  $('editId').value = id;
+                  $('title').value = title;
+                  $('content').value = content;
+                  $('title').focus();
+                }
+                function resetForm() {
+                  $('editId').value = '';
+                  $('title').value = '';
+                  $('content').value = '';
+                }
+                async function del(id) {
+                  if (!confirm('确定删除 #' + id + ' ?')) return;
+                  try {
+                    const res = await fetch(API + '/' + id, { method: 'DELETE' });
+                    const json = await res.json();
+                    if (json.code === 0) { msg('已删除', true); load(); }
+                    else { msg(json.message || '删除失败', false); }
+                  } catch (e) { msg('请求失败：' + e.message, false); }
+                }
+                load();
+              </script>
+            </body>
             </html>
             """;
     }