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/223/235/346/230/237/345/276/256/344/277/241/347/237/255/350/247/206/351/242/221/345/210/206/346/236/220//350/264/242/345/212/241/345/210/206/346/236/220.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>