feat(val-blog): add 2026-04-30 dream journey post

2026-08-13 17:00:22 +08:00
parent 691f96e8a6
commit 81978704fc
941 changed files with 195468 additions and 755 deletions
@@ -0,0 +1,74 @@
+import { chromium } from 'playwright';
+
+const BROWSER = await chromium.launch({ headless: true });
+const PAGE = await BROWSER.newPage();
+const errors = [];
+PAGE.on('pageerror', err => errors.push(err.message));
+
+const BASE = 'https://gch3n.online/pindou/';
+
+// STEP 1: Create test image and inject via sessionStorage
+await PAGE.goto(BASE, { waitUntil: 'domcontentloaded', timeout: 15000 });
+
+const imageDataUrl = await PAGE.evaluate(() => {
+  const canvas = document.createElement('canvas');
+  canvas.width = 100; canvas.height = 100;
+  const ctx = canvas.getContext('2d');
+  const g = ctx.createLinearGradient(0, 0, 100, 100);
+  g.addColorStop(0, '#ff0000'); g.addColorStop(0.25, '#00ff00');
+  g.addColorStop(0.5, '#0000ff'); g.addColorStop(0.75, '#ffff00');
+  g.addColorStop(1, '#ff00ff');
+  ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 100);
+  return canvas.toDataURL('image/png');
+});
+
+await PAGE.evaluate((img) => {
+  sessionStorage.setItem('bead-process-state', JSON.stringify({
+    sourceImage: img, extractedImage: null,
+    canvasWidth: 29, canvasHeight: 29, fitMode: 'fit',
+    grid: [], legend: [], totalBeads: 0, usedColors: 0, status: 'idle',
+  }));
+}, imageDataUrl);
+
+// STEP 2: Navigate to editor, then processing
+console.log('=== Navigating to processing ===');
+await PAGE.goto(`${BASE}#/pages/processing/processing`, { waitUntil: 'networkidle', timeout: 15000 });
+await PAGE.waitForTimeout(5000); // Wait for pipeline to run
+
+let hash = await PAGE.evaluate(() => window.location.hash);
+console.log('After processing:', hash);
+
+if (!hash.includes('result')) {
+  await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
+  await PAGE.waitForTimeout(2000);
+}
+
+// STEP 3: Check result
+const state = await PAGE.evaluate(() => {
+  const canvasInner = document.querySelector('.canvas-inner');
+  const allCanvases = document.querySelectorAll('canvas');
+  const emptyState = document.querySelector('.empty-state');
+  const infoBar = document.querySelector('.info-bar');
+  return {
+    emptyVisible: !!emptyState && emptyState.offsetParent !== null,
+    infoBarText: infoBar?.textContent?.trim(),
+    canvasCount: allCanvases.length,
+    canvasSize: allCanvases[0] ? `${allCanvases[0].width}x${allCanvases[0].height}` : 'none',
+    canvasInnerChildCount: canvasInner?.children?.length,
+  };
+});
+
+console.log('\n=== Final Result ===');
+console.log(JSON.stringify(state, null, 2));
+console.log('Page errors:', errors.length, errors.slice(0, 3));
+
+if (state.canvasCount > 0) {
+  console.log('\n✅ SUCCESS: Canvas rendered correctly on production!');
+} else if (state.emptyVisible) {
+  console.log('\n⚠️  Empty state shown - pipeline may not have run');
+} else {
+  console.log('\n❌ FAILED: No canvas and no empty state');
+}
+
+await PAGE.screenshot({ path: '/Users/guchen/.openclaw/workspace/pindou-live-flow.png', fullPage: true });
+await BROWSER.close();