From 8f93488989bc54129af3f043fd6c15838eb2bf09 Mon Sep 17 00:00:00 2001
From: likingcode <likingcode@users.noreply.github.com>
Date: Mon, 9 Mar 2026 02:04:16 +0800
Subject: [PATCH] feat(v3): add task progress state and error demos for demo
 pages

---
 src/main/resources/static/aop.html    | 32 +++++++++++++++++++++++++++
 src/main/resources/static/events.html | 27 ++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/src/main/resources/static/aop.html b/src/main/resources/static/aop.html
index 550aa91..89167ea 100644
--- a/src/main/resources/static/aop.html
+++ b/src/main/resources/static/aop.html
@@ -43,6 +43,7 @@
 
     <div class="lab">
         <h4>🧪 实验任务卡（AOP）</h4>
+        <label style="display:block;margin-bottom:8px;"><input id="aopTaskDone" type="checkbox" onchange="toggleAopTaskDone(this)"> 本任务我已经完成</label>
         <ul style="padding-left:20px;line-height:1.8;">
             <li>目标：观察同一请求如何触发 Before/After/Around 通知</li>
             <li>步骤1：调用用户接口 <code>/api/users</code></li>
@@ -56,6 +57,7 @@
         <h3>📊 实时性能统计</h3>
         <p>AOP 自动统计所有 Controller 和 Service 方法的执行时间</p>
         <button class="btn btn-primary" onclick="loadStats()">刷新统计数据</button>
+        <button class="btn btn-info" onclick="demoValidationError()">演示校验失败</button>
         <div class="result-box" id="statsResult">点击按钮查看...</div>
     </div>
     
@@ -180,11 +182,41 @@ execution(* com.example.demo.service.*.save*(..))
     <p style="margin-top: 30px;"><a href="/">← 返回学习中心</a></p>
     
     <script>
+        const AOP_TASK_KEY = 'task.aop.done';
+
+        function toggleAopTaskDone(el) {
+            localStorage.setItem(AOP_TASK_KEY, el.checked ? '1' : '0');
+        }
+
+        function initAopTaskState() {
+            const done = localStorage.getItem(AOP_TASK_KEY) === '1';
+            const checkbox = document.getElementById('aopTaskDone');
+            if (checkbox) checkbox.checked = done;
+        }
+
+        async function demoValidationError() {
+            const box = document.getElementById('statsResult');
+            box.textContent = '发送错误示例请求中...';
+            try {
+                const res = await fetch('/api/users', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name: '', email: 'bad', age: 999 })
+                });
+                const data = await res.json();
+                box.textContent = JSON.stringify(data, null, 2);
+            } catch (e) {
+                box.textContent = '错误: ' + e.message;
+            }
+        }
+
         async function loadStats() {
             const res = await fetch('/aop/stats');
             const data = await res.json();
             document.getElementById('statsResult').textContent = JSON.stringify(data, null, 2);
         }
+
+        initAopTaskState();
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/static/events.html b/src/main/resources/static/events.html
index d56f40e..60f8858 100644
--- a/src/main/resources/static/events.html
+++ b/src/main/resources/static/events.html
@@ -45,6 +45,7 @@
 
     <div class="lab">
         <h4>🧪 实验任务卡（事件）</h4>
+        <label style="display:block;margin-bottom:8px;"><input id="eventTaskDone" type="checkbox" onchange="toggleEventTaskDone(this)"> 本任务我已经完成</label>
         <ul style="padding-left:20px;line-height:1.8;">
             <li>目标：体验发布者与监听者解耦</li>
             <li>步骤1：输入 userId/userName，点击“发布登录事件”</li>
@@ -61,6 +62,7 @@
             <input type="text" id="userName" placeholder="用户名" value="张三" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: 150px;">
             <input type="number" id="userId" placeholder="用户ID" value="1" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: 100px;">
             <button class="btn btn-primary" onclick="publishEvent()">发布登录事件</button>
+            <button class="btn btn-warning" onclick="demoEventError()">演示参数错误</button>
         </div>
         <div class="result-box" id="eventResult">等待事件发布...</div>
     </div>
@@ -200,6 +202,29 @@ public class AopEventController {
     <p style="margin-top: 30px;"><a href="/">← 返回学习中心</a></p>
     
     <script>
+        const EVENT_TASK_KEY = 'task.event.done';
+
+        function toggleEventTaskDone(el) {
+            localStorage.setItem(EVENT_TASK_KEY, el.checked ? '1' : '0');
+        }
+
+        function initEventTaskState() {
+            const done = localStorage.getItem(EVENT_TASK_KEY) === '1';
+            const checkbox = document.getElementById('eventTaskDone');
+            if (checkbox) checkbox.checked = done;
+        }
+
+        async function demoEventError() {
+            const resultBox = document.getElementById('eventResult');
+            try {
+                const res = await fetch('/aop/event/publish?userName=', { method: 'POST' });
+                const data = await res.json();
+                resultBox.textContent = JSON.stringify(data, null, 2);
+            } catch (e) {
+                resultBox.textContent = '错误: ' + e.message;
+            }
+        }
+
         async function publishEvent() {
             const userId = document.getElementById('userId').value;
             const userName = document.getElementById('userName').value;
@@ -221,6 +246,8 @@ public class AopEventController {
                 document.getElementById('eventResult').textContent = '错误: ' + e.message;
             }
         }
+
+        initEventTaskState();
     </script>
 </body>
 </html>
\ No newline at end of file