npm - @aiyiran/myclaw - Versions diffs - 1.1.24 → 1.1.26 - Mend

@aiyiran/myclaw 1.1.24 → 1.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/skills/yiran-playground-template-use/templates/a103_/345/201/232/344/270/200/344/270/252/344/273/213/347/273/215/351/241/265/351/235/242/__teacher-view__.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>B003 · 做一个介绍页面</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1400px; margin: 0 auto; padding: 20px; }
+    .hero { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); color: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.22); }
+    .hero h1 { margin: 0; font-size: 28px; }
+    .hero p { margin: 8px 0 0; opacity: .92; font-size: 14px; }
+    .layout { margin-top: 18px; display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 16px; align-items: start; }
+    .sidebar { display: grid; gap: 16px; }
+    .card, .preview-card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2, .preview-head h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
+    .meta-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; }
+    .meta-item .label { font-size: 12px; color: #7a89ad; margin-bottom: 6px; }
+    .meta-item .value { font-size: 14px; color: #24324a; font-weight: 700; }
+    .tags { display: flex; flex-wrap: wrap; gap: 8px; }
+    .tag { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #edf2ff; color: #4c65c3; font-size: 13px; font-weight: 700; }
+    .list { display: grid; gap: 10px; }
+    .list-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; line-height: 1.7; font-size: 14px; color: #60708b; }
+    .issue { border-left: 4px solid #8c74ff; background: #faf8ff; }
+    .issue strong { color: #314a96; display: block; margin: 6px 0; }
+    iframe { width: 100%; height: 900px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
+    .empty-box { background: #f8faff; border: 1px dashed #cfdcff; border-radius: 14px; padding: 24px; color: #7a89ad; line-height: 1.8; }
+    @media (max-width: 960px) { .layout { grid-template-columns: 1fr; } iframe { height: 420px; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>B003 · 做一个介绍页面</h1>
+      <p>这是根据教师 JSON 自动生成的可视化查看页，左边快速扫读，右边直接看作品预览。</p>
+    </section>
+    <section class="layout">
+      <div class="sidebar">
+        <div class="card"><h2>基础信息</h2><div class="meta-grid"><div class="meta-item"><div class="label">主能力标签</div><div class="value">表达构建</div></div><div class="meta-item"><div class="label">任务类型标签</div><div class="value">视听表达</div></div></div></div>
+        <div class="card"><h2>适合学生类型</h2><div class="tags"><span class="tag">初次接触网页制作</span><span class="tag">有一点基础想练排版</span></div></div>
+        <div class="card"><h2>训练重点</h2><div class="list"><div class="list-item">图片与文字的组合方式</div><div class="list-item">网页结构的基本层次感</div><div class="list-item">排版的视觉优先级</div></div></div>
+        <div class="card"><h2>卡点和解决方案</h2><div class="list"><div class="list-item issue"><strong>卡点</strong>学生不知道图片和文字该放什么位置，感觉放哪里都不对。<strong>解决方案</strong>引导学生先&#x27;对半分&#x27;——左边图右边文，或者上图文下图，不要一开始就追求复杂排版，先把基本结构搭起来。</div><div class="list-item issue"><strong>卡点</strong>文字写得太长或太短，比例失调。<strong>解决方案</strong>告诉学生一个简单原则：图片大约占页面的 40%~60%，文字作为补充说明，一两句话就够了，不用写成作文。</div></div></div>
+        <div class="card"><h2>可拓展方向</h2><div class="list"><div class="list-item">加入更多内容块：比如加入兴趣标签、联系方式、荣誉墙等，变成多区块的综合介绍页。</div><div class="list-item">做多页面版本：首页是概括，第二页是详细自我介绍，用链接跳转。</div><div class="list-item">加入动画：图片入场动画、文字渐显，让页面更生动。</div></div></div>
+        <div class="card"><h2>课后作业</h2><div class="list"><div class="list-item">回家后把自己的介绍页面发给爸妈或朋友，让他们点评：哪个地方最吸引你？哪个地方可以更好？把反馈记下来，下次上课一起讨论。</div></div></div>
+      </div>
+      <div class="preview-card empty"><div class="preview-head"><h2>作品预览</h2></div><div class="empty-box">当前文件夹下没有找到 example.html / index.html / preview.html</div></div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a103_/345/201/232/344/270/200/344/270/252/344/273/213/347/273/215/351/241/265/351/235/242/__teacher__.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "任务类别": "A",
+  "任务编号": "103",
+  "任务名称": "做一个介绍页面",
+  "主能力标签": "表达构建",
+  "任务类型标签": "视听表达",
+  "适合学生类型": [
+    "初次接触网页制作",
+    "有一点基础想练排版"
+  ],
+  "训练重点": [
+    "图片与文字的组合方式",
+    "网页结构的基本层次感",
+    "排版的视觉优先级"
+  ],
+  "卡点和解决方案": [
+    {
+      "卡点": "学生不知道图片和文字该放什么位置，感觉放哪里都不对。",
+      "解决方案": "引导学生先'对半分'——左边图右边文，或者上图文下图，不要一开始就追求复杂排版，先把基本结构搭起来。"
+    },
+    {
+      "卡点": "文字写得太长或太短，比例失调。",
+      "解决方案": "告诉学生一个简单原则：图片大约占页面的 40%~60%，文字作为补充说明，一两句话就够了，不用写成作文。"
+    }
+  ],
+  "可拓展方向": [
+    "加入更多内容块：比如加入兴趣标签、联系方式、荣誉墙等，变成多区块的综合介绍页。",
+    "做多页面版本：首页是概括，第二页是详细自我介绍，用链接跳转。",
+    "加入动画：图片入场动画、文字渐显，让页面更生动。"
+  ],
+  "课后作业": [
+    "回家后把自己的介绍页面发给爸妈或朋友，让他们点评：哪个地方最吸引你？哪个地方可以更好？把反馈记下来，下次上课一起讨论。"
+  ]
+}

package/skills/yiran-playground-template-use/templates/b100_/345/201/232/344/270/200/344/270/252/346/214/211/351/222/256/351/241/265/351/235/242/__demo__.html ADDED Viewed

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>交互工作坊 - 按钮的奥秘</title>
+    <style>
+        :root {
+            --bg-color: #0f172a;
+            --card-bg: rgba(30, 41, 59, 0.7);
+            --primary: #8b5cf6;
+            --primary-glow: rgba(139, 92, 246, 0.5);
+            --success: #10b981;
+            --text: #f8fafc;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            background-color: var(--bg-color);
+            background-image:
+                radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%);
+            color: var(--text);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+        .container {
+            text-align: center;
+            background: var(--card-bg);
+            backdrop-filter: blur(12px);
+            padding: 3rem;
+            border-radius: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            max-width: 400px;
+            width: 90%;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        h1 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            letter-spacing: -0.025em;
+        }
+        .status-text {
+            border: 1px solid rgba(139, 92, 246, 0.5);
+            font-size: 1.1rem;
+            color: #94a3b8;
+            margin-bottom: 2.5rem;
+            height: 1.5rem;
+            transition: all 0.3s ease;
+        }
+        .main-button {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 1.2rem 2.5rem;
+            font-size: 1.2rem;
+            font-weight: 600;
+            border-radius: 1rem;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 0 20px var(--primary-glow);
+        }
+        .main-button:hover {
+            transform: scale(1.05);
+            filter: brightness(1.1);
+            box-shadow: 0 0 30px var(--primary-glow);
+        }
+        .main-button:active {
+            transform: scale(0.95);
+        }
+        /* 状态改变后的样式 */
+        body.active {
+            background-color: #020617;
+        }
+        body.active .container {
+            border-color: var(--success);
+            box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
+        }
+        body.active .main-button {
+            background: var(--success);
+            box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
+        }
+        body.active .status-text {
+            color: var(--success);
+            font-weight: bold;
+        }
+        /* 呼吸动画 */
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.05); opacity: 0.8; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        .animating {
+            animation: pulse 2s infinite ease-in-out;
+        }
+        /* 提示词角落 */
+        .hint {
+            position: fixed;
+            bottom: 20px;
+            font-size: 0.8rem;
+            opacity: 0.4;
+        }
+    </style>
+</head>
+<body>
+    <div class="container" id="app">
+        <h1 id="title">交互结构练习</h1>
+        <div class="status-text" id="status">等待指令中...</div>
+        <button class="main-button" id="btn" onclick="handleClick()">点我一下！</button>
+    </div>
+    <div class="hint">训练重点：点击事件 -> 数据变化 -> 视觉更新</div>
+    <script>
+        let isActive = false;
+        function handleClick() {
+            isActive = !isActive;
+            const btn = document.getElementById('btn');
+            const status = document.getElementById('status');
+            const body = document.body;
+            if (isActive) {
+                body.classList.add('active');
+                btn.innerText = '变色啦！';
+                status.innerText = '✨ 状态已激活 ✨';
+                btn.classList.add('animating');
+            } else {
+                body.classList.remove('active');
+                btn.innerText = '点我一下！';
+                status.innerText = '等待指令中...';
+                btn.classList.remove('animating');
+            }
+        }
+    </script>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/b100_/345/201/232/344/270/200/344/270/252/346/214/211/351/222/256/351/241/265/351/235/242/__student-view__.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>做一个按钮页面</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1440px; margin: 0 auto; padding: 20px 20px 48px; }
+    .header-bar { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); border-radius: 24px; padding: 20px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.24); }
+    .header-left h1 { margin: 0; font-size: 26px; line-height: 1.3; color: #fff; font-weight: 800; }
+    .header-left .subtitle { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.88); }
+    .main-section { margin-top: 18px; }
+    .block { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100,122,166,.12); }
+    .content-layout { display: grid; grid-template-columns: 220px minmax(0,1fr) 220px; gap: 14px; align-items: stretch; }
+    .task-panel, .goal-panel { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
+    .panel-group h3 { margin: 0 0 10px; color: #334d98; font-size: 17px; }
+    .task-item { margin-bottom: 10px; }
+    .task-item:last-child { margin-bottom: 0; }
+    .item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #7a89ad; }
+    .item-body { background: #fff; border: 1px solid #e7eefc; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #60708b; line-height: 1.7; }
+    .task-item .num { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #edf2ff; color: #7a89ad; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .star-item .num { background: #fff7dc; color: #b89a4f; }
+    .sample-frame-wrap { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 14px; min-width: 0; }
+    .sample-frame-head { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 12px; }
+    .sample-frame-head h3 { margin: 0; color: #334d98; font-size: 17px; }
+    iframe { width: 100%; height: 560px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
+    @media (max-width: 960px) { .page { padding: 14px 12px 32px; } .header-bar { padding: 16px 18px; } .header-left h1 { font-size: 22px; } .header-left .subtitle { font-size: 12px; } .content-layout { grid-template-columns: 1fr; } .task-panel, .goal-panel, .sample-frame-wrap { padding: 14px; } iframe { height: 360px; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="header-bar">
+      <div class="header-left">
+        <h1>做一个按钮页面</h1>
+        <p class="subtitle">亲手做一个会“变魔术”的按钮，学习网页是如何接收指令并产生变化的。</p>
+      </div>
+    </header>
+    <div class="main-section">
+      <section class="block">
+        <div class="content-layout">
+          <div class="task-panel">
+            <div class="panel-group">
+              <h3>步骤</h3>
+              <div class="task-item"><div class="item-top"><span class="num">1</span><span>创造交互按钮</span></div><div class="item-body">在 HTML 里添加一个 button 按钮，并给它起个响亮的名字。</div></div><div class="task-item"><div class="item-top"><span class="num">2</span><span>美化按钮外表</span></div><div class="item-body">用 CSS 给按钮涂上喜欢的颜色，调整大小，让它看起来想让人点一下。</div></div><div class="task-item"><div class="item-top"><span class="num">3</span><span>编写交互灵魂</span></div><div class="item-body">编写一小段 JavaScript 代码，让按钮在被点击时能切换颜色和文字。</div></div>
+            </div>
+          </div>
+          <div class="sample-frame-wrap">
+            <div class="sample-frame-head"><h3>示范样例：神奇的互动按钮</h3></div>
+            <iframe src="demo.html" title="示范样例：神奇的互动按钮"></iframe>
+          </div>
+          <div class="goal-panel">
+            <div class="panel-group">
+              <h3>评价目标</h3>
+              <div class="task-item star-item"><div class="item-top"><span class="num">一星</span><span>一星</span></div><div class="item-body">页面上出现了一个完整的按钮，且排版正常。</div></div><div class="task-item star-item"><div class="item-top"><span class="num">二星</span><span>二星</span></div><div class="item-body">点击按钮后，页面的颜色或文字成功发生了改变。</div></div><div class="task-item star-item"><div class="item-top"><span class="num">三星</span><span>三星</span></div><div class="item-body">交互过程伴随平滑的过渡效果，点击反馈清晰且有趣。</div></div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/b100_/345/201/232/344/270/200/344/270/252/346/214/211/351/222/256/351/241/265/351/235/242/__student__.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "任务标题": "做一个按钮页面",
+  "一句话说明": "亲手做一个会“变魔术”的按钮，学习网页是如何接收指令并产生变化的。",
+  "步骤": [
+    {
+      "标题": "创造交互按钮",
+      "说明": "在 HTML 里添加一个 button 按钮，并给它起个响亮的名字。"
+    },
+    {
+      "标题": "美化按钮外表",
+      "说明": "用 CSS 给按钮涂上喜欢的颜色，调整大小，让它看起来想让人点一下。"
+    },
+    {
+      "标题": "编写交互灵魂",
+      "说明": "编写一小段 JavaScript 代码，让按钮在被点击时能切换颜色和文字。"
+    }
+  ],
+  "评价目标": [
+    {
+      "等级": "一星",
+      "说明": "页面上出现了一个完整的按钮，且排版正常。"
+    },
+    {
+      "等级": "二星",
+      "说明": "点击按钮后，页面的颜色或文字成功发生了改变。"
+    },
+    {
+      "等级": "三星",
+      "说明": "交互过程伴随平滑的过渡效果，点击反馈清晰且有趣。"
+    }
+  ],
+  "示例区标题": "示范样例：神奇的互动按钮",
+  "示例页面文件": "__demo__.html"
+}

package/skills/yiran-playground-template-use/templates/b100_/345/201/232/344/270/200/344/270/252/346/214/211/351/222/256/351/241/265/351/235/242/__teacher-view__.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>B100 · 做一个按钮页面</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1400px; margin: 0 auto; padding: 20px; }
+    .hero { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); color: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.22); }
+    .hero h1 { margin: 0; font-size: 28px; }
+    .hero p { margin: 8px 0 0; opacity: .92; font-size: 14px; }
+    .layout { margin-top: 18px; display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 16px; align-items: start; }
+    .sidebar { display: grid; gap: 16px; }
+    .card, .preview-card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2, .preview-head h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
+    .meta-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; }
+    .meta-item .label { font-size: 12px; color: #7a89ad; margin-bottom: 6px; }
+    .meta-item .value { font-size: 14px; color: #24324a; font-weight: 700; }
+    .tags { display: flex; flex-wrap: wrap; gap: 8px; }
+    .tag { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #edf2ff; color: #4c65c3; font-size: 13px; font-weight: 700; }
+    .list { display: grid; gap: 10px; }
+    .list-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; line-height: 1.7; font-size: 14px; color: #60708b; }
+    .issue { border-left: 4px solid #8c74ff; background: #faf8ff; }
+    .issue strong { color: #314a96; display: block; margin: 6px 0; }
+    iframe { width: 100%; height: 900px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
+    .empty-box { background: #f8faff; border: 1px dashed #cfdcff; border-radius: 14px; padding: 24px; color: #7a89ad; line-height: 1.8; }
+    @media (max-width: 960px) { .layout { grid-template-columns: 1fr; } iframe { height: 420px; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>B100 · 做一个按钮页面</h1>
+      <p>这是根据教师 JSON 自动生成的可视化查看页，左边快速扫读，右边直接看作品预览。</p>
+    </section>
+    <section class="layout">
+      <div class="sidebar">
+        <div class="card"><h2>基础信息</h2><div class="meta-grid"><div class="meta-item"><div class="label">主能力标签</div><div class="value">表达构建</div></div><div class="meta-item"><div class="label">任务类型标签</div><div class="value">游戏机制</div></div></div></div>
+        <div class="card"><h2>适合学生类型</h2><div class="tags"><span class="tag">喜欢做项目</span><span class="tag">需要明确目标</span></div></div>
+        <div class="card"><h2>训练重点</h2><div class="list"><div class="list-item">掌握基础的 JavaScript 点击事件绑定</div><div class="list-item">理解 HTML/CSS/JS 三者如何协作完成交互</div><div class="list-item">学习利用 CSS Class 切换来实现视觉变化</div></div></div>
+        <div class="card"><h2>卡点和解决方案</h2><div class="list"><div class="list-item issue"><strong>卡点</strong>学生容易漏写 onclick 属性中的括号，导致函数不执行。<strong>解决方案</strong>提示学生检查 onclick=&quot;handleClick()&quot; 是否完整，特别是后面的小括号。</div><div class="list-item issue"><strong>卡点</strong>CSS 选择器写错，导致点击后 Class 切换了但样式没变。<strong>解决方案</strong>引导学生检查 .active 类的作用范围，确保它写在了正确的选择器之后。</div></div></div>
+        <div class="card"><h2>可拓展方向</h2><div class="list"><div class="list-item">尝试添加 transition 实现颜色的平滑过渡效果</div><div class="list-item">加入 transform: scale() 实现点击时的弹跳动画</div><div class="list-item">尝试添加 audio 标签，实现点击时的音效反馈</div></div></div>
+        <div class="card"><h2>课后作业</h2><div class="list"><div class="list-item">尝试制作一个“灯泡”页面，点击按钮可以让灯泡发光或者熄灭。</div></div></div>
+      </div>
+      <div class="preview-card"><div class="preview-head"><h2>作品预览</h2></div><iframe src="demo.html" title="作品预览"></iframe></div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/b100_/345/201/232/344/270/200/344/270/252/346/214/211/351/222/256/351/241/265/351/235/242/__teacher__.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "任务类别": "B",
+  "任务编号": "100",
+  "任务名称": "做一个按钮页面",
+  "主能力标签": "表达构建",
+  "任务类型标签": "游戏机制",
+  "适合学生类型": [
+    "喜欢做项目",
+    "需要明确目标"
+  ],
+  "训练重点": [
+    "掌握基础的 JavaScript 点击事件绑定",
+    "理解 HTML/CSS/JS 三者如何协作完成交互",
+    "学习利用 CSS Class 切换来实现视觉变化"
+  ],
+  "卡点和解决方案": [
+    {
+      "卡点": "学生容易漏写 onclick 属性中的括号，导致函数不执行。",
+      "解决方案": "提示学生检查 onclick=\"handleClick()\" 是否完整，特别是后面的小括号。"
+    },
+    {
+      "卡点": "CSS 选择器写错，导致点击后 Class 切换了但样式没变。",
+      "解决方案": "引导学生检查 .active 类的作用范围，确保它写在了正确的选择器之后。"
+    }
+  ],
+  "可拓展方向": [
+    "尝试添加 transition 实现颜色的平滑过渡效果",
+    "加入 transform: scale() 实现点击时的弹跳动画",
+    "尝试添加 audio 标签，实现点击时的音效反馈"
+  ],
+  "课后作业": [
+    "尝试制作一个“灯泡”页面，点击按钮可以让灯泡发光或者熄灭。"
+  ]
+}

package/skills/yiran-playground-template-use/templates/c100_/347/273/231/345/260/217/347/273/204/344/275/234/345/223/201/345/201/232/344/270/200/346/254/241/345/260/217/344/277/256/346/224/271/__demo__.html ADDED Viewed

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>给小组作品做微调训练</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+      background: #f5f7fb;
+      color: #1f2937;
+    }
+    .wrap {
+      max-width: 1380px;
+      margin: 0 auto;
+      padding: 14px 14px 18px;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .hero {
+      background: #fff;
+      border: 1px solid #e5ebf5;
+      border-radius: 18px;
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex: 0 0 auto;
+    }
+    .hero h1 {
+      margin: 0 0 4px;
+      font-size: 24px;
+    }
+    .hero p {
+      margin: 0;
+      color: #5b6b7c;
+      font-size: 14px;
+    }
+    .steps {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+    .step {
+      background: #edf4ff;
+      color: #2457c5;
+      border-radius: 999px;
+      padding: 6px 10px;
+      font-size: 12px;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+    .card {
+      background: #fff;
+      border: 1px solid #e5ebf5;
+      border-radius: 18px;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
+    }
+    .title {
+      margin: 0 0 4px;
+      font-size: 18px;
+    }
+    .image-wrap {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+    }
+    img {
+      width: 100%;
+      max-height: 100%;
+      aspect-ratio: 1 / 1;
+      object-fit: contain;
+      border-radius: 14px;
+      background: #f2f5fb;
+      display: block;
+    }
+    .observe {
+      background: #f8fbff;
+      border: 1px solid #e3ecfb;
+      border-radius: 14px;
+      padding: 10px 12px;
+      font-size: 13px;
+      color: #39506a;
+      flex: 0 0 auto;
+    }
+    .observe strong {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 14px;
+      color: #29476b;
+    }
+    .observe ul {
+      margin: 0;
+      padding-left: 18px;
+    }
+    .observe li { margin-bottom: 4px; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <section class="hero">
+      <div>
+        <h1>微调挑战</h1>
+      </div>
+      <div class="steps">
+        <div class="step">① 先看</div>
+        <div class="step">② 选一点</div>
+        <div class="step">③ 再去改</div>
+      </div>
+    </section>
+    <section class="grid">
+      <article class="card">
+        <h2 class="title">班级小组徽章</h2>
+        <div class="image-wrap">
+          <img src="https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo/%E7%8F%AD%E7%BA%A7%E5%B0%8F%E7%BB%84%E5%BE%BD%E7%AB%A0Logo%E4%BC%98%E5%8C%96%E7%89%88_1024x1024_20260421_185141.png" alt="班级小组徽章">
+        </div>
+        <div class="observe">
+          <strong>先想一想</strong>
+          <ul>
+            <li>哪里已经不错了？</li>
+            <li>哪一小处还想再改？</li>
+            <li>先改哪一点最容易？</li>
+          </ul>
+        </div>
+      </article>
+      <article class="card">
+        <h2 class="title">小组吉祥物</h2>
+        <div class="image-wrap">
+          <img src="https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo/%E5%B0%8F%E7%BB%84%E5%90%89%E7%A5%A5%E7%89%A9%E7%AC%AC%E4%B8%80%E7%89%88_1024x1024_20260421_173654.png" alt="小组吉祥物">
+        </div>
+        <div class="observe">
+          <strong>先想一想</strong>
+          <ul>
+            <li>哪里不像你想的？</li>
+            <li>先改表情还是动作？</li>
+            <li>哪个小改动最有用？</li>
+          </ul>
+        </div>
+      </article>
+      <article class="card">
+        <h2 class="title">小组标志</h2>
+        <div class="image-wrap">
+          <img src="https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo/%E5%B0%8F%E7%BB%84%E6%A0%87%E5%BF%97%E7%AC%AC%E4%B8%80%E7%89%88-%E4%B8%AD%E7%AD%89_1024x1024_20260421_175402.png" alt="小组标志">
+        </div>
+        <div class="observe">
+          <strong>先想一想</strong>
+          <ul>
+            <li>你一眼能看懂它吗？</li>
+            <li>哪一小块有点多？</li>
+            <li>先简化哪里更合适？</li>
+          </ul>
+        </div>
+      </article>
+    </section>
+  </div>
+</body>
+</html>