@aiyiran/myclaw 1.1.25 → 1.1.33

package/assets/myclaw-artifacts.js

@@ -32,6 +32,7 @@
   var pollTimer = null;
   var lastKnownClawName = null; // 本地环境下从 API 获取，remote 环境每次从 hostname 实时派生
   var _preloadCache = {}; // url → Image 对象，防止重复预加载
+  var showHiddenArtifacts = false; // 是否显示被过滤掉的系统/模板内部文件
   var MYCLAW_API_PORT = 18800;
   // 远程环境（公网域名）：nginx 已将 /sync 反代到 127.0.0.1:8080，直接同域访问
   // 本地环境：直接访问 127.0.0.1:18800
@@ -199,14 +200,47 @@
       'user-select: none',
       'flex-shrink: 0',
     ].join(';');
+    var leftGroup = document.createElement('div');
+    leftGroup.style.cssText = 'display:flex;align-items:center;gap:6px;';
+
     var titleSpan = document.createElement('span');
-    titleSpan.textContent = '🎨 学生作品';
-    titleSpan.style.cssText = 'cursor:pointer;border-radius:3px;padding:1px 4px;transition:background 0.15s;';
+    titleSpan.textContent = '⚙️';
+    titleSpan.style.cssText = 'cursor:pointer;border-radius:3px;padding:2px 4px;transition:background 0.15s;font-size:14px;';
     titleSpan.title = '查看统计信息';
     titleSpan.onmouseenter = function () { titleSpan.style.background = 'rgba(255,255,255,0.1)'; };
     titleSpan.onmouseleave = function () { titleSpan.style.background = 'none'; };
     titleSpan.onclick = function () { openStatsModal(); };
-    header.appendChild(titleSpan);
+    leftGroup.appendChild(titleSpan);
+
+    var eyeBtn = document.createElement('span');
+    var updateEyeUI = function() {
+      if (showHiddenArtifacts) {
+        eyeBtn.textContent = '👁';
+        eyeBtn.style.opacity = '1';
+        eyeBtn.style.textDecoration = 'none';
+        eyeBtn.title = '隐藏内部模板文件';
+      } else {
+        eyeBtn.textContent = '👁';
+        eyeBtn.style.opacity = '0.5';
+        eyeBtn.style.textDecoration = 'line-through';
+        eyeBtn.title = '显示内部模板文件';
+      }
+    };
+    eyeBtn.style.cssText = 'cursor:pointer;border-radius:3px;padding:2px 4px;transition:all 0.15s;font-size:13px;';
+    updateEyeUI();
+    eyeBtn.onmouseenter = function() { eyeBtn.style.background = 'rgba(255,255,255,0.1)'; };
+    eyeBtn.onmouseleave = function() { eyeBtn.style.background = 'none'; };
+    eyeBtn.onclick = function() {
+      showHiddenArtifacts = !showHiddenArtifacts;
+      updateEyeUI();
+      var contentEl = document.querySelector('#myclaw-artifacts-content');
+      if (cachedData && contentEl) {
+        renderArtifactsList(contentEl, cachedData);
+      }
+    };
+    leftGroup.appendChild(eyeBtn);
+
+    header.appendChild(leftGroup);
 
     // 搜索框（或获取已存在的搜索框）
     var searchBoxHeader = document.querySelector('#myclaw-search-box');
@@ -243,7 +277,7 @@
     var _scWs = getWorkspaceId();
     showcaseLink.href = 'https://www.yiranlaoshi.com/showcase?claw=' + _scClaw + '&workspace=' + _scWs;
     showcaseLink.target = '_blank';
-    showcaseLink.textContent = '\uD83D\uDC41 \u9879\u76EE\u96C6';
+    showcaseLink.textContent = '我的项目';
     showcaseLink.style.cssText = 'cursor:pointer;padding:2px 10px;border-radius:3px;font-size:12px;background:rgba(255,255,255,0.08);transition:background 0.15s;color:#cdd6f4;text-decoration:none;';
     showcaseLink.onmouseenter = function () { showcaseLink.style.background = 'rgba(255,255,255,0.18)'; };
     showcaseLink.onmouseleave = function () { showcaseLink.style.background = 'rgba(255,255,255,0.08)'; };
@@ -457,10 +491,12 @@
       '__teacher__.json',
       '__teacher-view__.html',
     ];
-    sorted = sorted.filter(function (asset) {
-      var basename = (asset.path || asset.name || '').split('/').pop();
-      return ARTIFACT_BLACKLIST.indexOf(basename) === -1;
-    });
+    if (!showHiddenArtifacts) {
+      sorted = sorted.filter(function (asset) {
+        var basename = (asset.path || asset.name || '').split('/').pop();
+        return ARTIFACT_BLACKLIST.indexOf(basename) === -1;
+      });
+    }
 
     sorted.forEach(function (asset, idx) {
       // 状态判断：基于 last_open 时间戳
@@ -792,7 +828,14 @@
         'background: #fff',
       ].join(';');
 
-      iframe.src = previewUrl + '?t=' + Date.now();
+      // 大文件（音频/视频）走 CDN，其余走本地 server（避免 CDN 无 charset 导致乱码）
+      var assetExt = (asset.path || '').split('.').pop().toLowerCase();
+      var CDN_EXTS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'mp4', 'webm', 'mov', 'avi', 'mkv'];
+      if (CDN_EXTS.indexOf(assetExt) !== -1) {
+        iframe.src = previewUrl + '?t=' + Date.now();
+      } else {
+        iframe.src = MYCLAW_API_BASE + '/api/file?path=' + encodeURIComponent(getWorkspaceId() + '/' + asset.path) + '&t=' + Date.now();
+      }
 
       box.appendChild(iframe);
       overlay.appendChild(box);
@@ -2107,7 +2150,7 @@
 
   // ═══ 作品模板列表弹框 ═══
   // 使用通用文件接口 GET /api/file?path=（路径相对 .openclaw 根）
-  var TEMPLATE_ROOT = 'workspace-ai-demo/skills/yiran-playground-template-use';
+  var TEMPLATE_ROOT = 'skills/yiran-playground-template-use';
 
   function openTemplateModal() {
     if (document.querySelector('#myclaw-template-modal')) return;
@@ -2329,7 +2372,7 @@
 
             // 加载 demo.html（text/html，server 直接返回，iframe 可正常渲染）
             previewIframe.src = MYCLAW_API_BASE + '/api/file?path='
-              + encodeURIComponent(TEMPLATE_ROOT + '/templates/' + tpl['文件夹名'] + '/demo.html');
+              + encodeURIComponent(TEMPLATE_ROOT + '/templates/' + tpl['文件夹名'] + '/__student-view__.html');
           }
 
           row.onclick = setActive;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiyiran/myclaw",
-  "version": "1.1.25",
+  "version": "1.1.33",
   "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,132 @@
+# 课程模板流水线 Skill
+
+这个 skill 面向中文课堂的小专题课程设计流程。
+
+它的目标不是只生成某一个页面，而是把一个“题目灵感 / 设计角度”逐步变成一整套可用的课程任务文件。
+
+---
+
+业务背景请统一参考：
+`业务背景.md`
+
+---
+
+# 当前工作流
+
+## 阶段一：灵感 -> 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,69 @@
+---
+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`
+- `scripts/publish_template.py`
+
+其中：
+- build 负责在原目录生成 `__student-view__.html`、`__teacher-view__.html` 和 `index.html`
+- `index.html` 采用固定脚本规则：左边展示”评价目标”，右边展示”步骤”，不显示任务标题和一句话说明
+- move 负责把任务文件夹移动到 `yiran-playground-template-use` skill 的 `templates/`，并自动触发索引重建
+- publish 负责把模板文件夹内所有资源上传到七牛 CDN，并重写 HTML 中的资源引用为 CDN 绝对地址（见 `cdn-convention.md`）
+
+## 原则
+
+- 先做 demo
+- 再定 __student__.json
+- 再定 __teacher__.json
+- 阶段一到三先在当前工作目录的任务文件夹里完成
+- 所有 HTML 中的外部资源（图片、字体、JS 库等）必须使用 CDN 链接，禁止本地相对路径；使用哪个 CDN 不限
+- publish 脚本会统一重新打包：无论原引用是相对路径还是其他 CDN，只要本地能找到对应文件，都会上传到指定 CDN 并重写引用（见 `cdn-convention.md`）
+- 第4阶段拆成 build、move、publish 三个独立脚本
+- 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>