@aiyiran/myclaw 1.1.25 → 1.1.26

package/.claude/settings.local.json

@@ -43,7 +43,9 @@
       "Bash(pkill -f \"deploy_to_workspace.py\")",
       "Bash(pkill -f \"prepare_playgrounds.py\" pkill -f \"run_playgrounds_flow.py\" pkill -f \"mc new playgrounds\" sleep 1 ps aux)",
       "Bash(mc new *)",
-      "Bash(echo \"exit code: $?\")"
+      "Bash(echo \"exit code: $?\")",
+      "Bash(grep -r \"api/history/file\\\\|api/history\" /Users/yiran/.openclaw/workspace-yiranclaw/myclaw --include=\"*.js\" --include=\"*.py\" 2>/dev/null | head -20)",
+      "Bash(cp -r ~/.openclaw/skills/yiran-playground-template-use /Users/yiran/.openclaw/workspace-yiranclaw/myclaw/skills/ && cp -r ~/.openclaw/skills/yiran-course-template-pipeline /Users/yiran/.openclaw/workspace-yiranclaw/myclaw/skills/ && ls /Users/yiran/.openclaw/workspace-yiranclaw/myclaw/skills/)"
     ]
   }
 }

package/assets/myclaw-artifacts.js

@@ -792,7 +792,14 @@
         'background: #fff',
       ].join(';');
 
-      iframe.src = previewUrl + '?t=' + Date.now();
+      // 文本类文件走本地 server（已有 charset=utf-8），避免 CDN 无 charset 导致中文乱码
+      var assetExt = (asset.path || '').split('.').pop().toLowerCase();
+      var TEXT_EXTS = ['md', 'txt', 'py', 'js', 'ts', 'jsx', 'tsx', 'css', 'json', 'yaml', 'yml', 'sh', 'xml', 'ini', 'toml', 'env', 'vue', 'csv'];
+      if (TEXT_EXTS.indexOf(assetExt) !== -1) {
+        iframe.src = MYCLAW_API_BASE + '/api/file?path=' + encodeURIComponent(getWorkspaceId() + '/' + asset.path) + '&t=' + Date.now();
+      } else {
+        iframe.src = previewUrl + '?t=' + Date.now();
+      }
 
       box.appendChild(iframe);
       overlay.appendChild(box);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiyiran/myclaw",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "description": "",
   "main": "index.js",
   "bin": {

package/patches/patch-manifest.json

@@ -17,6 +17,16 @@
       "name": "yiran-skill-media",
       "strategy": "on",
       "description": "统一多媒体生成 skill（图片+音乐，主备切换）"
+    },
+    {
+      "name": "yiran-playground-template-use",
+      "strategy": "on",
+      "description": "AI Playground 课程模板库（存储、搜索、deploy 一条龙）"
+    },
+    {
+      "name": "yiran-course-template-pipeline",
+      "strategy": "on",
+      "description": "课程模板制作流水线（demo -> student/teacher JSON -> HTML 打包）"
     }
   ],
   "_doc_agents": "Step 3: 将 agent-list/ 下的智能体分发到 ~/.openclaw/ 并注册到 openclaw.json",

package/skills/yiran-course-template-pipeline/README.md

@@ -0,0 +1,127 @@
+# 课程模板流水线 Skill
+
+这个 skill 面向中文课堂的小专题课程设计流程。
+
+它的目标不是只生成某一个页面，而是把一个“题目灵感 / 设计角度”逐步变成一整套可用的课程任务文件。
+
+---
+
+# 当前工作流
+
+## 阶段一：灵感 -> demo 页面
+最开始输入的是：
+- 题目灵感
+- 设计角度
+- 课堂上的切入想法
+
+这一阶段最重要的事情是：
+**先做出 __demo__.html（效果演示页）**
+
+阶段一到阶段三的产物，统一放在：
+**当前工作目录下新建的 `任务名称/` 文件夹里。**
+
+也就是说：
+- 不先放到 templates
+- 不先放到 skill 目录根部
+- 而是在当前工作目录里，先建立一个任务临时文件夹，再往里写 `__demo__.html`、`__student__.json`、`__teacher__.json`
+
+---
+
+## 阶段二：生成 __student__.json
+这一阶段不要求一定已经有 __teacher__.json。
+这一阶段甚至不要求一定已经有完整作品。
+
+这一阶段的核心目标是：
+**先把学生任务的步骤和评价结构 JSON 确立下来。**
+
+对应输出：
+`__student__.json`
+
+---
+
+## 阶段三：生成 __teacher__.json
+在 __student__.json 已经明确后，再整理教师侧信息。
+
+这一阶段的核心目标是：
+**明确题目设计目的、训练重点、适合学生类型，以及老师上课时如何判断和引导。**
+
+对应输出：
+`__teacher__.json`
+
+---
+
+## 阶段四：JSON -> HTML，并按目录打包
+第4阶段现在拆成两个脚本：
+
+### 1）build_template_views.py
+校验通过后，在原文件夹中直接生成：
+- `__student-view__.html`
+- `__teacher-view__.html`
+- `index.html`
+
+其中 `index.html` 采用固定脚本规则：
+- 只展示两块内容
+- 左边是“评价目标”
+- 右边是“步骤”
+- 不显示任务标题
+- 不显示一句话说明
+- 不再依赖临时提示词拼装
+- 统一由脚本直接根据 `__student__.json` 渲染
+
+### 2）move_template_task.py
+在页面已经生成好的前提下，把整个文件夹移动到：
+`yiran-playground-template-use` skill 的 `templates/`
+
+同时按规则改名，例如：
+`a100_给依然老师设计一个AI画像`
+
+并且：
+**move 成功后会自动触发 `yiran-playground-template-use` 的索引重建。**
+
+---
+
+# 当前目录结构
+
+- `SKILL.md`：技能总说明
+- `prompts/阶段1-demo生成.md`：如何把灵感先做成 demo 页面
+- `prompts/阶段2-student生成.md`：如何生成 __student__.json
+- `prompts/阶段3-teacher生成.md`：如何生成 __teacher__.json
+- `prompts/阶段4-打包落盘.md`：如何组织文件并调用第4阶段脚本
+- `scripts/render_teacher_view.py`：把 __teacher__.json 渲染成教师查看页
+- `scripts/render_student_page.py`：把 __student__.json 渲染成学生页
+- `scripts/build_template_views.py`：在原目录生成 __student-view__.html 和 __teacher-view__.html
+- `scripts/move_template_task.py`：移动整个任务文件夹到 templates 并改名，同时自动重建索引
+- `references/teacher-fields.md`：教师侧字段设计与标签规则说明
+- `references/student-fields.md`：学生侧字段说明
+- `references/student-example.json`：学生侧 JSON 示例
+- `references/student-scaffold.json`：学生侧 JSON 脚手架
+- `references/teacher-scaffold.json`：教师侧 JSON 脚手架
+- `assets/student-template.html`：独立学生页模板
+- 模板库和搜索索引统一维护在 `yiran-playground-template-use` skill 中
+
+---
+
+# 模板索引
+
+模板库和索引统一维护在 `yiran-playground-template-use` skill 中。
+
+`move_template_task.py` 成功执行后会自动触发索引重建。如需手动重建，在 `yiran-playground-template-use` skill 中运行：
+
+```bash
+python3 scripts/build_template_index.py
+```
+
+---
+
+# 核心原则
+
+1. 先有灵感，再做 demo，再定 __student__.json，再定 __teacher__.json
+2. 阶段一到三的产物，统一放在当前工作目录下新建的任务文件夹里
+3. __student__.json 先解决学生任务结构
+4. __teacher__.json 再解决题目设计目的与教师判断
+5. 第4阶段拆成 build 和 move 两个独立脚本
+6. templates 作为 skill 的资产目录统一维护
+7. 模板有变化后，要重新构建索引
+8. demo 中的媒体资源优先使用 CDN 链接，不使用本地相对路径；当前固定前缀为 `https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo`，后面拼接资源相对路径
+9. 模板负责布局，提示词负责填内容，脚本负责稳定输出
+10. 所有内容优先服务中文课堂和小学生阅读场景

package/skills/yiran-course-template-pipeline/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: yiran-course-template-pipeline
+description: 面向中文课堂的小专题课程模板流水线。适用于把一个题目灵感或设计角度，先生成 demo 页面，再先后整理成 __student__.json 和 __teacher__.json，最后通过脚本生成页面、整理目录、沉淀模板资产并构建模板索引。
+---
+
+# 课程模板流水线
+
+这个 skill 支持的是一条完整工作流，而不是单点产出。
+
+## 四阶段流程
+
+### 1）灵感 -> demo 页面
+当用户先给出题目灵感、设计角度或课堂切入点时，优先生成 demo 页面。
+
+这一阶段优先使用：
+- `prompts/阶段1-demo生成.md`
+
+### 2）生成 __student__.json
+这个阶段最重要的目标是：
+先把学生任务的步骤和评价结构 JSON 确立下来。
+
+这一阶段优先使用：
+- `prompts/阶段2-student生成.md`
+- `references/student-fields.md`
+- `references/student-example.json`
+- `references/student-scaffold.json`
+
+### 3）生成 __teacher__.json
+在 __student__.json 已经明确后，再整理教师侧信息。
+
+这一阶段优先使用：
+- `prompts/阶段3-teacher生成.md`
+- `references/teacher-fields.md`
+- `references/teacher-scaffold.json`
+
+### 阶段一到三的工作目录规则
+阶段一到阶段三产出的文件，统一放在：
+**当前工作目录下新建的 `任务名称/` 文件夹里。**
+
+也就是说，这几个中间产物先写在当前工作目录的任务文件夹内：
+- `__demo__.html`
+- `__student__.json`
+- `__teacher__.json`
+
+### 4）JSON -> HTML，并按目录打包
+第4阶段拆成两个独立脚本：
+- `scripts/build_template_views.py`
+- `scripts/move_template_task.py`
+
+其中：
+- build 负责在原目录生成 `__student-view__.html`、`__teacher-view__.html` 和 `index.html`
+- `index.html` 采用固定脚本规则：左边展示“评价目标”，右边展示“步骤”，不显示任务标题和一句话说明
+- move 负责把任务文件夹移动到 `yiran-playground-template-use` skill 的 `templates/`，并自动触发索引重建
+
+## 原则
+
+- 先做 demo
+- 再定 __student__.json
+- 再定 __teacher__.json
+- 阶段一到三先在当前工作目录的任务文件夹里完成
+- demo 中的媒体资源优先使用 CDN 链接，不使用本地相对路径；当前固定前缀为 `https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo`，后面拼接资源相对路径
+- 第4阶段拆成 build 和 move 两个独立脚本
+- templates 作为 skill 的资产目录统一维护
+- 模板有变化后，要重新构建索引
+- 全部内容优先中文

package/skills/yiran-course-template-pipeline/assets/a100-teacher.example.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>A100 · 给依然老师设计一个AI画像</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1200px; 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; }
+    .view { margin-top: 18px; display: grid; gap: 16px; }
+    .top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
+    .card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: repeat(2,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; }
+    .section-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
+    .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; }
+    @media (max-width: 900px) { .top, .section-grid, .meta-grid { grid-template-columns: 1fr; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>A100 · 给依然老师设计一个AI画像</h1>
+      <p>这是根据教师 JSON 自动生成的可视化查看页，方便老师快速扫读与判断。</p>
+    </section>
+
+    <section class="view">
+      <div class="top">
+        <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><span class="tag">持续迭代</span></div>
+        </div>
+      </div>
+
+      <div class="section-grid">
+        <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 class="list-item">加入点击切换不同版本画像</div><div class="list-item">给人物加一句语音介绍</div></div></div>
+      </div>
+
+      <div class="section-grid">
+        <div class="card"><h2>卡点和解决方案</h2><div class="list"><div class="list-item issue"><strong>卡点</strong>学生不知道要画谁，描述很泛<strong>解决方案</strong>先让学生说清楚对象是谁，再从发型、衣服、表情这些具体点开始描述</div><div class="list-item issue"><strong>卡点</strong>学生一次改太多，看不出变化<strong>解决方案</strong>提醒学生每次只改一个地方，比如先改头发，再改表情</div></div></div>
+        <div class="card"><h2>课后作业</h2><div class="list"><div class="list-item">回家把老师画像再优化一版，至少改一个地方，并说明你改了什么</div><div class="list-item">给网页再加入一张新版本图片，展示前后变化</div></div></div>
+      </div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/assets/student-template.html

@@ -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>
+          </div>
+          <div class="sample-frame-wrap">
+            <div class="sample-frame-head"><h3>{{示例区标题}}</h3></div>
+            <iframe src="{{示例页面文件}}" title="{{示例区标题}}"></iframe>
+          </div>
+          <div class="goal-panel">
+            <div class="panel-group">
+              <h3>评价目标</h3>
+              {{评价目标区域}}
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/assets/teacher-portrait-demo.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>小专题模板 Demo</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, 0.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,0.88); }
+    .main-section { margin-top: 18px; display: grid; gap: 18px; }
+    .block, .teacher-section { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100, 122, 166, 0.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; }
+    .block-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+    .block-title h2 { margin: 0; font-size: 24px; color: #2d438c; }
+    .badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
+    .badge-teacher { background: #f1edff; color: #7156c8; }
+    .teacher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+    .teacher-card { background: #f8faff; border: 1px solid #e7eefc; border-radius: 18px; padding: 16px; }
+    .teacher-card h3 { margin: 0 0 8px; color: #334d98; font-size: 16px; }
+    .teacher-card p, .teacher-card li { margin: 0; color: #60708b; line-height: 1.85; font-size: 13px; }
+    .teacher-card ul { padding-left: 18px; margin: 0; }
+    .teacher-note { margin-top: 14px; background: #f6f8ff; border: 1px dashed #cfdcff; border-radius: 18px; padding: 14px 16px; }
+    .teacher-note h3 { margin: 0 0 7px; color: #334d98; font-size: 16px; }
+    .teacher-note p { margin: 0; color: #60708b; line-height: 1.85; font-size: 13px; }
+    .footer-note { margin-top: 12px; text-align: center; font-size: 13px; color: #7a879f; }
+    @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; white-space: normal; }
+      .content-layout, .teacher-grid { grid-template-columns: 1fr; }
+      .task-panel, .goal-panel, .sample-frame-wrap, .teacher-section { 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">【学生真正要读的简短说明】</div></div>
+              <div class="task-item"><div class="item-top"><span class="num">2</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+              <div class="task-item"><div class="item-top"><span class="num">3</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+              <div class="task-item"><div class="item-top"><span class="num">4</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+            </div>
+          </div>
+
+          <div class="sample-frame-wrap">
+            <div class="sample-frame-head"><h3>示范样例</h3></div>
+            <iframe src="./example.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>
+
+    <section class="teacher-section">
+      <div class="block-title"><h2>下半区：给老师看</h2><span class="badge badge-teacher">教师区</span></div>
+      <div class="teacher-grid">
+        <div class="teacher-card"><h3>为什么这样设计</h3><p>上半区直接给学生使用，文字短，结构清楚，中间样例突出。</p></div>
+        <div class="teacher-card"><h3>模板使用原则</h3><p>只把学生真正需要阅读的内容放到白卡片里，编号和星级放在卡片外面，做出主次关系。</p></div>
+        <div class="teacher-card"><h3>上半区写法</h3><p>步骤和评价目标都要短句化，面向小学生，避免长句和抽象词。</p></div>
+        <div class="teacher-card"><h3>示例区原则</h3><p>中间 iframe 永远是视觉中心，具体项目案例放在 example.html 或外部链接里。</p></div>
+      </div>
+      <div class="teacher-note"><h3>模板提示</h3><p>后续换专题时，优先替换任务标题、一句话说明、步骤、评价目标和 iframe 地址，不要先改结构。</p></div>
+      <div class="footer-note">这个文件已经同步了新的上半区结构，可作为后续模板继续复用。</div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/assets/teacher-task-view.html

@@ -0,0 +1,110 @@
+<!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: 1200px; 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; }
+    .toolbar { margin-top: 16px; display: grid; gap: 12px; }
+    textarea { width: 100%; min-height: 240px; border: 1px solid #d9e2fb; border-radius: 16px; padding: 14px; font-size: 13px; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; color: #24324a; }
+    button { width: fit-content; border: none; border-radius: 999px; background: #5f82ff; color: #fff; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
+    .view { margin-top: 18px; display: grid; gap: 16px; }
+    .top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
+    .card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: repeat(2,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; }
+    .section-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
+    .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-bottom: 6px; }
+    @media (max-width: 900px) {
+      .top, .section-grid, .meta-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>教师任务查看页</h1>
+      <p>把结构化 JSON 粘贴进来，就能渲染成给老师快速扫读的可视化页面。</p>
+    </section>
+
+    <section class="toolbar">
+      <textarea id="jsonInput">{
+  "任务类别": "A",
+  "任务编号": "100",
+  "任务名称": "给依然老师设计一个AI画像",
+  "主能力标签": "表达构建",
+  "任务类型标签": "视听表达",
+  "适合学生类型": ["初次接触", "需要明确目标", "持续迭代"],
+  "训练重点": ["围绕明确对象生成形象", "把人物图片放进网页中完成展示", "通过小幅修改让作品逐步变好"],
+  "卡点和解决方案": [
+    {"卡点": "学生不知道要画谁，描述很泛", "解决方案": "先说清楚对象是谁，再从发型、衣服、表情这些具体点开始描述"},
+    {"卡点": "学生一次改太多，看不出变化", "解决方案": "提醒学生每次只改一个地方，比如先改头发，再改表情"}
+  ],
+  "可拓展方向": ["给画像加背景音乐", "加入点击切换不同版本画像", "给人物加一句语音介绍"],
+  "课后作业": ["回家把老师画像再优化一版，至少改一个地方，并说明你改了什么", "给网页再加入一张新版本图片，展示前后变化"]
+}</textarea>
+      <button onclick="renderView()">渲染教师页</button>
+    </section>
+
+    <section class="view" id="view"></section>
+  </div>
+
+  <script>
+    function renderList(arr = []) {
+      return `<div class="list">${arr.map(item => `<div class="list-item">${item}</div>`).join('')}</div>`;
+    }
+    function renderIssues(arr = []) {
+      return `<div class="list">${arr.map(item => `<div class="list-item issue"><strong>卡点</strong>${item.卡点 || ''}<strong>解决方案</strong>${item.解决方案 || ''}</div>`).join('')}</div>`;
+    }
+    function renderTags(arr = []) {
+      return `<div class="tags">${arr.map(item => `<span class="tag">${item}</span>`).join('')}</div>`;
+    }
+    function renderView() {
+      const view = document.getElementById('view');
+      try {
+        const data = JSON.parse(document.getElementById('jsonInput').value);
+        view.innerHTML = `
+          <div class="top">
+            <div class="card">
+              <h2>${data.任务类别 || ''}${data.任务编号 || ''} · ${data.任务名称 || ''}</h2>
+              <div class="meta-grid">
+                <div class="meta-item"><div class="label">主能力标签</div><div class="value">${data.主能力标签 || '—'}</div></div>
+                <div class="meta-item"><div class="label">任务类型标签</div><div class="value">${data.任务类型标签 || '—'}</div></div>
+              </div>
+            </div>
+            <div class="card">
+              <h2>适合学生类型</h2>
+              ${renderTags(data.适合学生类型 || [])}
+            </div>
+          </div>
+          <div class="section-grid">
+            <div class="card"><h2>训练重点</h2>${renderList(data.训练重点 || [])}</div>
+            <div class="card"><h2>可拓展方向</h2>${renderList(data.可拓展方向 || [])}</div>
+          </div>
+          <div class="section-grid">
+            <div class="card"><h2>卡点和解决方案</h2>${renderIssues(data['卡点和解决方案'] || [])}</div>
+            <div class="card"><h2>课后作业</h2>${renderList(data.课后作业 || [])}</div>
+          </div>
+        `;
+      } catch (err) {
+        view.innerHTML = `<div class="card"><h2>JSON 解析失败</h2><div class="list-item">${err.message}</div></div>`;
+      }
+    }
+    renderView();
+  </script>
+</body>
+</html>