npm - @aiyiran/myclaw - Versions diffs - 1.1.91 → 1.1.92 - Mend

@aiyiran/myclaw 1.1.91 → 1.1.92

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 (32) hide show

package//350/264/246/345/215/225/345/210/206/346/236/220/345/212/251/346/211/213/__demo__.html ADDED Viewed

@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>5月支出财务分析</title>
+  <style>
+    :root {
+      --bg: #f5f7fb;
+      --card: #ffffff;
+      --text: #1f2937;
+      --muted: #6b7280;
+      --line: #e5e7eb;
+      --primary: #2563eb;
+      --good: #059669;
+      --warn: #d97706;
+      --danger: #dc2626;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+    }
+    .wrap {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    h1 {
+      margin: 0 0 8px;
+      font-size: 32px;
+    }
+    .sub {
+      color: var(--muted);
+      margin-bottom: 20px;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      padding: 16px;
+      box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
+    }
+    .card h3 {
+      margin: 0 0 8px;
+      font-size: 14px;
+      color: var(--muted);
+      font-weight: 600;
+    }
+    .big {
+      font-size: 28px;
+      font-weight: 700;
+    }
+    .filters {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    label {
+      display: block;
+      font-size: 13px;
+      color: var(--muted);
+      margin-bottom: 6px;
+    }
+    input, select, button {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      font-size: 14px;
+      background: white;
+    }
+    button {
+      cursor: pointer;
+      background: var(--primary);
+      color: white;
+      border: none;
+      font-weight: 600;
+      margin-top: 20px;
+    }
+    button.secondary {
+      background: white;
+      color: var(--text);
+      border: 1px solid var(--line);
+    }
+    .table-wrap {
+      overflow: auto;
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: 16px;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 900px;
+    }
+    th, td {
+      padding: 12px 14px;
+      border-bottom: 1px solid var(--line);
+      text-align: left;
+      font-size: 14px;
+    }
+    th {
+      background: #f8fafc;
+      color: #374151;
+      position: sticky;
+      top: 0;
+    }
+    .tag {
+      display: inline-block;
+      padding: 4px 8px;
+      border-radius: 999px;
+      font-size: 12px;
+      background: #eff6ff;
+      color: #1d4ed8;
+    }
+    .summary-list {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-top: 20px;
+    }
+    ul.rank {
+      margin: 0;
+      padding-left: 18px;
+    }
+    ul.rank li {
+      margin: 10px 0;
+    }
+    .hint {
+      color: var(--muted);
+      font-size: 13px;
+      margin-top: 8px;
+    }
+    @media (max-width: 960px) {
+      .grid, .filters, .summary-list { grid-template-columns: 1fr 1fr; }
+    }
+    @media (max-width: 640px) {
+      .grid, .filters, .summary-list { grid-template-columns: 1fr; }
+      h1 { font-size: 24px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <h1>5月支出财务分析</h1>
+    <div class="sub">可以筛选、排序、看汇总，也能快速找出高消费项目。</div>
+    <div class="grid">
+      <div class="card">
+        <h3>总支出</h3>
+        <div class="big" id="totalExpense">0</div>
+      </div>
+      <div class="card">
+        <h3>记录条数</h3>
+        <div class="big" id="totalCount">0</div>
+      </div>
+      <div class="card">
+        <h3>单笔最高</h3>
+        <div class="big" id="maxExpense">0</div>
+      </div>
+      <div class="card">
+        <h3>笔均支出</h3>
+        <div class="big" id="avgExpense">0</div>
+      </div>
+    </div>
+    <div class="card" style="margin-bottom: 20px;">
+      <div class="filters">
+        <div>
+          <label>关键词</label>
+          <input id="keyword" placeholder="搜商户、备注、类别" />
+        </div>
+        <div>
+          <label>类别</label>
+          <select id="categoryFilter">
+            <option value="">全部类别</option>
+          </select>
+        </div>
+        <div>
+          <label>最小金额</label>
+          <input id="minAmount" type="number" placeholder="例如 50" />
+        </div>
+        <div>
+          <label>最大金额</label>
+          <input id="maxAmount" type="number" placeholder="例如 300" />
+        </div>
+        <div>
+          <label>排序方式</label>
+          <select id="sortBy">
+            <option value="amountDesc">金额从高到低</option>
+            <option value="amountAsc">金额从低到高</option>
+            <option value="dateAsc">日期从早到晚</option>
+            <option value="dateDesc">日期从晚到早</option>
+          </select>
+        </div>
+        <div>
+          <button id="resetBtn" class="secondary">重置筛选</button>
+        </div>
+      </div>
+      <div class="hint">财务角度的小帮助：你可以先筛选高于 100 元的支出，更容易看到大头花费。</div>
+    </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>日期</th>
+            <th>金额</th>
+            <th>类型</th>
+            <th>商户/事项</th>
+            <th>财务类别</th>
+            <th>备注</th>
+          </tr>
+        </thead>
+        <tbody id="tableBody"></tbody>
+      </table>
+    </div>
+    <div class="summary-list">
+      <div class="card">
+        <h3>类别汇总</h3>
+        <ul class="rank" id="categorySummary"></ul>
+      </div>
+      <div class="card">
+        <h3>商户/事项前五</h3>
+        <ul class="rank" id="merchantSummary"></ul>
+      </div>
+    </div>
+  </div>
+  <script>
+    const rawData = [
+      { date: '5月1日', amount: 38, type: '支出', merchant: '瑞幸咖啡', note: '早餐咖啡' },
+      { date: '5月1日', amount: 126, type: '支出', merchant: '盒马', note: '买菜' },
+      { date: '5月2日', amount: 42, type: '支出', merchant: '美团外卖', note: '午餐' },
+      { date: '5月2日', amount: 28, type: '支出', merchant: '地铁', note: '通勤' },
+      { date: '5月3日', amount: 299, type: '支出', merchant: '京东', note: '蓝牙耳机' },
+      { date: '5月4日', amount: 68, type: '支出', merchant: '滴滴', note: '晚上回家' },
+      { date: '5月5日', amount: 36, type: '支出', merchant: '瑞幸咖啡', note: '咖啡' },
+      { date: '5月6日', amount: 218, type: '支出', merchant: '山姆', note: '日用品' },
+      { date: '5月7日', amount: 88, type: '支出', merchant: '电影院', note: '周末娱乐' },
+      { date: '5月8日', amount: 49, type: '支出', merchant: '美团外卖', note: '晚餐' },
+      { date: '5月9日', amount: 199, type: '支出', merchant: '得到App', note: '课程' },
+      { date: '5月10日', amount: 35, type: '支出', merchant: '便利店', note: '零食' },
+      { date: '5月11日', amount: 520, type: '支出', merchant: '淘宝', note: '衣服' },
+      { date: '5月12日', amount: 45, type: '支出', merchant: '瑞幸咖啡', note: '咖啡' },
+      { date: '5月13日', amount: 168, type: '支出', merchant: '餐厅', note: '朋友聚餐' },
+      { date: '5月14日', amount: 25, type: '支出', merchant: '地铁', note: '通勤' },
+      { date: '5月15日', amount: 980, type: '支出', merchant: '体检', note: '健康检查' },
+      { date: '5月16日', amount: 58, type: '支出', merchant: '美团外卖', note: '午餐' },
+      { date: '5月17日', amount: 32, type: '支出', merchant: '未知消费', note: '备注不清' },
+      { date: '5月18日', amount: 260, type: '支出', merchant: '加油站', note: '出行' },
+      { date: '5月19日', amount: 39, type: '支出', merchant: '瑞幸咖啡', note: '咖啡' },
+      { date: '5月20日', amount: 399, type: '支出', merchant: '拼多多', note: '家居用品' },
+    ];
+    function getCategory(item) {
+      const merchant = item.merchant;
+      const note = item.note;
+      if (merchant.includes('瑞幸') || merchant.includes('美团外卖') || merchant.includes('餐厅') || note.includes('午餐') || note.includes('晚餐') || note.includes('咖啡')) return '餐饮';
+      if (merchant.includes('地铁') || merchant.includes('滴滴') || merchant.includes('加油站')) return '交通';
+      if (merchant.includes('淘宝') || merchant.includes('京东') || merchant.includes('拼多多') || merchant.includes('山姆') || merchant.includes('盒马') || merchant.includes('便利店')) return '购物';
+      if (merchant.includes('体检')) return '医疗健康';
+      if (merchant.includes('电影院')) return '娱乐';
+      if (merchant.includes('得到App')) return '学习成长';
+      return '其他';
+    }
+    const data = rawData.map((item, index) => ({
+      ...item,
+      category: getCategory(item),
+      day: Number(item.date.match(/5月(\d+)日/)[1]),
+      id: index + 1,
+    }));
+    const els = {
+      totalExpense: document.getElementById('totalExpense'),
+      totalCount: document.getElementById('totalCount'),
+      maxExpense: document.getElementById('maxExpense'),
+      avgExpense: document.getElementById('avgExpense'),
+      keyword: document.getElementById('keyword'),
+      categoryFilter: document.getElementById('categoryFilter'),
+      minAmount: document.getElementById('minAmount'),
+      maxAmount: document.getElementById('maxAmount'),
+      sortBy: document.getElementById('sortBy'),
+      resetBtn: document.getElementById('resetBtn'),
+      tableBody: document.getElementById('tableBody'),
+      categorySummary: document.getElementById('categorySummary'),
+      merchantSummary: document.getElementById('merchantSummary'),
+    };
+    function formatMoney(n) {
+      return '¥' + n.toFixed(0);
+    }
+    function fillCategoryOptions() {
+      const categories = [...new Set(data.map(item => item.category))];
+      categories.forEach(category => {
+        const option = document.createElement('option');
+        option.value = category;
+        option.textContent = category;
+        els.categoryFilter.appendChild(option);
+      });
+    }
+    function getFilteredData() {
+      const keyword = els.keyword.value.trim().toLowerCase();
+      const category = els.categoryFilter.value;
+      const minAmount = Number(els.minAmount.value || 0);
+      const maxAmount = els.maxAmount.value ? Number(els.maxAmount.value) : Infinity;
+      let result = data.filter(item => {
+        const matchKeyword = !keyword || [item.date, item.type, item.merchant, item.note, item.category].join(' ').toLowerCase().includes(keyword);
+        const matchCategory = !category || item.category === category;
+        const matchMin = item.amount >= minAmount;
+        const matchMax = item.amount <= maxAmount;
+        return matchKeyword && matchCategory && matchMin && matchMax;
+      });
+      const sortBy = els.sortBy.value;
+      result.sort((a, b) => {
+        if (sortBy === 'amountDesc') return b.amount - a.amount;
+        if (sortBy === 'amountAsc') return a.amount - b.amount;
+        if (sortBy === 'dateAsc') return a.day - b.day;
+        if (sortBy === 'dateDesc') return b.day - a.day;
+        return 0;
+      });
+      return result;
+    }
+    function renderTable(list) {
+      els.tableBody.innerHTML = '';
+      list.forEach(item => {
+        const tr = document.createElement('tr');
+        tr.innerHTML = `
+          <td>${item.date}</td>
+          <td>${formatMoney(item.amount)}</td>
+          <td>${item.type}</td>
+          <td>${item.merchant}</td>
+          <td><span class="tag">${item.category}</span></td>
+          <td>${item.note}</td>
+        `;
+        els.tableBody.appendChild(tr);
+      });
+    }
+    function renderStats(list) {
+      const total = list.reduce((sum, item) => sum + item.amount, 0);
+      const max = list.length ? Math.max(...list.map(item => item.amount)) : 0;
+      const avg = list.length ? total / list.length : 0;
+      els.totalExpense.textContent = formatMoney(total);
+      els.totalCount.textContent = list.length;
+      els.maxExpense.textContent = formatMoney(max);
+      els.avgExpense.textContent = formatMoney(avg);
+    }
+    function renderCategorySummary(list) {
+      const map = new Map();
+      list.forEach(item => {
+        map.set(item.category, (map.get(item.category) || 0) + item.amount);
+      });
+      const sorted = [...map.entries()].sort((a, b) => b[1] - a[1]);
+      els.categorySummary.innerHTML = sorted.map(([name, total]) => `<li><strong>${name}</strong>：${formatMoney(total)}</li>`).join('');
+    }
+    function renderMerchantSummary(list) {
+      const map = new Map();
+      list.forEach(item => {
+        map.set(item.merchant, (map.get(item.merchant) || 0) + item.amount);
+      });
+      const sorted = [...map.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5);
+      els.merchantSummary.innerHTML = sorted.map(([name, total]) => `<li><strong>${name}</strong>：${formatMoney(total)}</li>`).join('');
+    }
+    function render() {
+      const list = getFilteredData();
+      renderTable(list);
+      renderStats(list);
+      renderCategorySummary(list);
+      renderMerchantSummary(list);
+    }
+    [els.keyword, els.categoryFilter, els.minAmount, els.maxAmount, els.sortBy].forEach(el => {
+      el.addEventListener('input', render);
+      el.addEventListener('change', render);
+    });
+    els.resetBtn.addEventListener('click', () => {
+      els.keyword.value = '';
+      els.categoryFilter.value = '';
+      els.minAmount.value = '';
+      els.maxAmount.value = '';
+      els.sortBy.value = 'amountDesc';
+      render();
+    });
+    fillCategoryOptions();
+    render();
+  </script>
+</body>
+</html>

package//350/264/246/345/215/225/345/210/206/346/236/220/345/212/251/346/211/213/__student-view__.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!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; }
+    .tips-block { margin-top: 16px; background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100,122,166,.12); }
+    .tips-block h3 { margin: 0 0 14px; color: #334d98; font-size: 18px; }
+    .tips-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+    .tip-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 16px; padding: 14px; }
+    .tip-title { font-size: 14px; font-weight: 700; color: #334d98; margin-bottom: 8px; }
+    .tip-desc { font-size: 13px; color: #60708b; line-height: 1.7; margin-bottom: 8px; }
+    .tip-prompt { font-size: 12px; color: #4f5f7c; line-height: 1.8; background: #fff; border: 1px dashed #d6e2ff; border-radius: 12px; padding: 10px 12px; }
+    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, .tips-block { padding: 14px; } .tips-list { grid-template-columns: 1fr; } iframe { height: 360px; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="header-bar">
+      <div class="header-left">
+        <h1>做一份自己看得懂的消费报告</h1>
+        <p class="subtitle">下载一份真实账单，让AI帮你分类汇总，生成一份本月消费报告，最后做成一个下个月还能继续用的网页工具。</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">从支付宝、微信或银行App下载最近一个月的账单（Excel或截图都行）。下载后先删掉不想暴露的信息：完整卡号、手机号、家庭地址。保留：日期、金额、商户名称、备注。控制在5分钟内，不要追求完美。</div></div><div class="task-item"><div class="item-top"><span class="num">2</span><span>让AI做第一版分析</span></div><div class="item-body">把账单内容粘贴给AI，用下面这段提示词：「这是我的本月消费账单，请帮我：1.按类别分类（餐饮/交通/购物/学习/医疗/娱乐/其他）；2.汇总每类金额和占比；3.找出3个值得注意的消费现象；4.给我3条具体可执行的建议。不要空泛建议，只根据这份账单说。」</div></div><div class="task-item"><div class="item-top"><span class="num">3</span><span>追问和修正</span></div><div class="item-body">看AI的第一版，找出不对的地方再追问。比如：分类太粗就说「请把外卖和堂食分开」；算错了就说「请重新检查金额，列出计算过程」。目标不是第一版完美，而是能拉回来。</div></div><div class="task-item"><div class="item-top"><span class="num">4</span><span>生成最终报告网页</span></div><div class="item-body">让AI帮你把分析结果做成一个HTML网页，里面包括：总支出、各类别金额、值得注意的消费现象、3条行动建议。参考示例页面的样式。</div></div><div class="task-item"><div class="item-top"><span class="num">5</span><span>存下复用模板</span></div><div class="item-body">让AI给你输出一段提示词，下个月你只需要粘贴新账单就能重新跑。把这段提示词保存下来，这是今天最值钱的东西。</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">完成账单整理，让AI成功输出分类汇总和至少3个消费现象。</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>
+      <section class="tips-block">
+        <h3>小提示</h3>
+        <div class="tips-list">
+          <div class="tip-item"><div class="tip-title">第一版不用完美</div><div class="tip-desc">AI第一次分类不准很正常，重要的是能追问拉回来，而不是一开始就喂完美数据。</div><div class="tip-prompt">参考提示词：你的分类有些粗，请重新分类。把明显的外卖、咖啡、堂食拆开，把一次性大额支出和高频小额支出分开分析。</div></div><div class="tip-item"><div class="tip-title">让AI算错了就追</div><div class="tip-desc">AI会算错金额，发现了直接追问，不要自己手动算。</div><div class="tip-prompt">参考提示词：请检查金额汇总是否有错误。如果你不确定，请列出你用于汇总的明细和计算过程。</div></div>
+        </div>
+      </section>
+    </div>
+  </div>
+</body>
+</html>

package//350/264/246/345/215/225/345/210/206/346/236/220/345/212/251/346/211/213/__student__.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "任务标题": "做一份自己看得懂的消费报告",
+  "一句话说明": "下载一份真实账单，让AI帮你分类汇总，生成一份本月消费报告，最后做成一个下个月还能继续用的网页工具。",
+  "步骤": [
+    {
+      "标题": "下载账单并脱敏",
+      "说明": "从支付宝、微信或银行App下载最近一个月的账单（Excel或截图都行）。下载后先删掉不想暴露的信息：完整卡号、手机号、家庭地址。保留：日期、金额、商户名称、备注。控制在5分钟内，不要追求完美。"
+    },
+    {
+      "标题": "让AI做第一版分析",
+      "说明": "把账单内容粘贴给AI，用下面这段提示词：「这是我的本月消费账单，请帮我：1.按类别分类（餐饮/交通/购物/学习/医疗/娱乐/其他）；2.汇总每类金额和占比；3.找出3个值得注意的消费现象；4.给我3条具体可执行的建议。不要空泛建议，只根据这份账单说。」"
+    },
+    {
+      "标题": "追问和修正",
+      "说明": "看AI的第一版，找出不对的地方再追问。比如：分类太粗就说「请把外卖和堂食分开」；算错了就说「请重新检查金额，列出计算过程」。目标不是第一版完美，而是能拉回来。"
+    },
+    {
+      "标题": "生成最终报告网页",
+      "说明": "让AI帮你把分析结果做成一个HTML网页，里面包括：总支出、各类别金额、值得注意的消费现象、3条行动建议。参考示例页面的样式。"
+    },
+    {
+      "标题": "存下复用模板",
+      "说明": "让AI给你输出一段提示词，下个月你只需要粘贴新账单就能重新跑。把这段提示词保存下来，这是今天最值钱的东西。"
+    }
+  ],
+  "评价目标": [
+    {
+      "等级": "一星",
+      "说明": "完成账单整理，让AI成功输出分类汇总和至少3个消费现象。"
+    },
+    {
+      "等级": "二星",
+      "说明": "经过追问修正，得到一份自己觉得基本准确的消费分析报告。"
+    },
+    {
+      "等级": "三星",
+      "说明": "做出一个可以筛选和查看的消费报告网页，并保存好下个月复用的提示词模板。"
+    }
+  ],
+  "示例区标题": "示范样例",
+  "示例页面文件": "__demo__.html",
+  "小提示": [
+    {
+      "标题": "第一版不用完美",
+      "说明": "AI第一次分类不准很正常，重要的是能追问拉回来，而不是一开始就喂完美数据。",
+      "参考提示词": "你的分类有些粗，请重新分类。把明显的外卖、咖啡、堂食拆开，把一次性大额支出和高频小额支出分开分析。"
+    },
+    {
+      "标题": "让AI算错了就追",
+      "说明": "AI会算错金额，发现了直接追问，不要自己手动算。",
+      "参考提示词": "请检查金额汇总是否有错误。如果你不确定，请列出你用于汇总的明细和计算过程。"
+    }
+  ]
+}

package//350/264/246/345/215/225/345/210/206/346/236/220/345/212/251/346/211/213/__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>D102 · 做一份自己看得懂的消费报告</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>D102 · 做一份自己看得懂的消费报告</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">成人学员（25-45岁）</span><span class="tag">有真实账单可以使用</span><span class="tag">想用AI解决实际生活问题的用户</span></div></div>
+        <div class="card"><h2>训练重点</h2><div class="list"><div class="list-item">用真实数据驱动AI工作，而不是让AI凭空生成</div><div class="list-item">追问和修正能力：第一版不够好时能拉回来</div><div class="list-item">判断力：能识别AI的错误（算错/分类不合理）</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>提前告知：截图或手动复制粘贴也可以，不必非要Excel。导出困难本身就是课程记录的信息之一。</div><div class="list-item issue"><strong>卡点</strong>AI分类结果与实际差异很大，学员觉得AI不好用<strong>解决方案</strong>引导学员追问修正，而不是放弃。核心示范点：第一版不好没关系，能被拉回来才是重点。</div><div class="list-item issue"><strong>卡点</strong>AI算错金额，学员不知道如何处理<strong>解决方案</strong>教学员直接说&#x27;请检查金额并列出计算过程&#x27;，让AI自己暴露错误，而不是学员手动核算。</div><div class="list-item issue"><strong>卡点</strong>学员觉得自己的账单太乱、太私密不敢用<strong>解决方案</strong>强调脱敏步骤5分钟就够，保留日期/金额/商户就足够AI分析，不需要完整流水。</div><div class="list-item issue"><strong>卡点</strong>做出来的网页很空，只有标题没有真实数据<strong>解决方案</strong>要求学员先在对话里确认分析结论，再让AI做网页。顺序是：数据→分析→报告→网页，不能跳步。</div></div></div>
+        <div class="card"><h2>可拓展方向</h2><div class="list"><div class="list-item">多月对比：把两个月的账单都给AI，让它对比消费变化趋势</div><div class="list-item">预算设定：根据本月数据，让AI帮你设定下个月各类别的预算上限</div><div class="list-item">家庭版：把两个人的账单合并分析，识别家庭支出结构</div><div class="list-item">年度复盘：把12个月的数据汇总，做一份年度消费报告</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//350/264/246/345/215/225/345/210/206/346/236/220/345/212/251/346/211/213/__teacher__.json ADDED Viewed

@@ -0,0 +1,50 @@
+{
+  "任务类别": "D",
+  "任务编号": "103",
+  "任务名称": "做一份自己看得懂的消费报告",
+  "主能力标签": "第三能力：问题判断",
+  "任务类型标签": "改编优化",
+  "适合学生类型": [
+    "成人学员（25-45岁）",
+    "有真实账单可以使用",
+    "想用AI解决实际生活问题的用户"
+  ],
+  "训练重点": [
+    "用真实数据驱动AI工作，而不是让AI凭空生成",
+    "追问和修正能力：第一版不够好时能拉回来",
+    "判断力：能识别AI的错误（算错/分类不合理）",
+    "工具化思维：把一次分析沉淀成下个月可复用的提示词模板"
+  ],
+  "卡点和解决方案": [
+    {
+      "卡点": "账单导出很麻烦，卡在第一步",
+      "解决方案": "提前告知：截图或手动复制粘贴也可以，不必非要Excel。导出困难本身就是课程记录的信息之一。"
+    },
+    {
+      "卡点": "AI分类结果与实际差异很大，学员觉得AI不好用",
+      "解决方案": "引导学员追问修正，而不是放弃。核心示范点：第一版不好没关系，能被拉回来才是重点。"
+    },
+    {
+      "卡点": "AI算错金额，学员不知道如何处理",
+      "解决方案": "教学员直接说'请检查金额并列出计算过程'，让AI自己暴露错误，而不是学员手动核算。"
+    },
+    {
+      "卡点": "学员觉得自己的账单太乱、太私密不敢用",
+      "解决方案": "强调脱敏步骤5分钟就够，保留日期/金额/商户就足够AI分析，不需要完整流水。"
+    },
+    {
+      "卡点": "做出来的网页很空，只有标题没有真实数据",
+      "解决方案": "要求学员先在对话里确认分析结论，再让AI做网页。顺序是：数据→分析→报告→网页，不能跳步。"
+    }
+  ],
+  "可拓展方向": [
+    "多月对比：把两个月的账单都给AI，让它对比消费变化趋势",
+    "预算设定：根据本月数据，让AI帮你设定下个月各类别的预算上限",
+    "家庭版：把两个人的账单合并分析，识别家庭支出结构",
+    "年度复盘：把12个月的数据汇总，做一份年度消费报告"
+  ],
+  "课后作业": [
+    "把今天的复用提示词模板存好。下个月账单出来后，自己独立跑一遍，看看和今天的结果有什么变化，把发现写两句话记下来。"
+  ],
+  "_id": "631201a8"
+}