feat: 个人记账与预算管理系统 MVP 初始版本

2026-04-28 22:57:38 +08:00
commit d2b2e9887a
88 changed files with 29512 additions and 0 deletions
@@ -0,0 +1,129 @@
+const { chromium } = require('playwright');
+
+async function runChartSwitchTest() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  const results = [];
+  const switchSequence = ['line', 'pie', 'line', 'pie', 'bar', 'pie', 'bar', 'pie', 'line', 'bar', 'pie', 'bar', 'line', 'pie', 'line', 'bar', 'pie', 'bar', 'line', 'pie'];
+
+  console.log('打开统计页面...');
+  await page.goto('http://localhost:5173/statistics', { waitUntil: 'networkidle', timeout: 15000 });
+
+  // 等待更长时间让数据加载
+  console.log('等待数据加载 (15秒)...');
+  await page.waitForTimeout(15000);
+
+  // 检查 DOM 状态
+  const domCheck = await page.evaluate(() => {
+    const echartsContainer = document.querySelector('.echarts-container');
+    const pieContainer = document.querySelector('.pie-chart-container');
+    const canvases = document.querySelectorAll('canvas');
+    return {
+      hasEchartsContainer: !!echartsContainer,
+      hasPieContainer: !!pieContainer,
+      canvasCount: canvases.length,
+      bodyText: document.body.innerText.substring(0, 500)
+    };
+  });
+
+  console.log('\n页面 DOM 状态:');
+  console.log('  .echarts-container:', domCheck.hasEchartsContainer ? '存在' : '不存在');
+  console.log('  .pie-chart-container:', domCheck.hasPieContainer ? '存在' : '不存在');
+  console.log('  canvas 数量:', domCheck.canvasCount);
+  console.log('  页面文本:', domCheck.bodyText.replace(/\n/g, ' ').substring(0, 100));
+
+  console.log('\n开始20次图表切换测试...');
+
+  for (let i = 0; i < switchSequence.length; i++) {
+    const chartType = switchSequence[i];
+    const btnSelector = `[data-type="${chartType}"]`;
+
+    try {
+      await page.click(btnSelector, { timeout: 5000 });
+      await page.waitForTimeout(1500);
+
+      let chartStatus = 'OK';
+      let errorMsg = '';
+
+      if (chartType === 'pie') {
+        const pieCanvas = await page.$$('.pie-chart-container canvas');
+        const trendCanvas = await page.$$('.echarts-container canvas');
+        if (pieCanvas.length === 0) {
+          chartStatus = 'FAIL';
+          errorMsg = '饼图 canvas 为空';
+        } else if (pieCanvas.length > 1) {
+          chartStatus = 'WARN';
+          errorMsg = `饼图 canvas 重复(${pieCanvas.length})`;
+        }
+        if (trendCanvas.length > 0) {
+          chartStatus = 'FAIL';
+          errorMsg = `趋势图未销毁(${trendCanvas.length})`;
+        }
+      } else {
+        const trendCanvas = await page.$$('.echarts-container canvas');
+        if (trendCanvas.length === 0) {
+          chartStatus = 'FAIL';
+          errorMsg = '趋势图 canvas 为空';
+        } else if (trendCanvas.length > 1) {
+          chartStatus = 'WARN';
+          errorMsg = `趋势图 canvas 重复(${trendCanvas.length})`;
+        }
+        const pieCanvas = await page.$$('.pie-chart-container canvas');
+        if (pieCanvas.length > 0) {
+          chartStatus = 'FAIL';
+          errorMsg = `饼图未销毁(${pieCanvas.length})`;
+        }
+      }
+
+      results.push({
+        step: i + 1,
+        to: chartType,
+        status: chartStatus,
+        error: errorMsg
+      });
+
+      console.log(`[${i + 1}/20] ${chartType.padEnd(5)}: ${chartStatus}${errorMsg ? ' - ' + errorMsg : ''}`);
+
+    } catch (e) {
+      results.push({
+        step: i + 1,
+        to: chartType,
+        status: 'FAIL',
+        error: e.message.substring(0, 80)
+      });
+      console.log(`[${i + 1}/20] ${chartType.padEnd(5)}: FAIL - ${e.message.substring(0, 50)}`);
+    }
+  }
+
+  console.log('\n========== 测试结果统计 ==========');
+  const passCount = results.filter(r => r.status === 'OK').length;
+  const warnCount = results.filter(r => r.status === 'WARN').length;
+  const failCount = results.filter(r => r.status === 'FAIL').length;
+
+  console.log(`通过: ${passCount}/20 (${(passCount/20*100).toFixed(1)}%)`);
+  console.log(`警告: ${warnCount}/20`);
+  console.log(`失败: ${failCount}/20`);
+
+  if (failCount > 0) {
+    console.log('\n失败详情:');
+    results.filter(r => r.status === 'FAIL').forEach(r => {
+      console.log(`  Step ${r.step}: ${r.to} - ${r.error}`);
+    });
+  }
+
+  await browser.close();
+
+  return { passCount, failCount, warnCount, details: results };
+}
+
+runChartSwitchTest()
+  .then(result => {
+    console.log('\n测试完成');
+    process.exit(result.failCount > 0 ? 1 : 0);
+  })
+  .catch(e => {
+    console.error('测试失败:', e);
+    process.exit(1);
+  });