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,137 @@
+import { chromium } from 'playwright';
+import { readFileSync } from 'fs';
+
+const perlerPath = '/Users/guchen/.hermes/workspace/pindou/src/data/palettes/compiled/perler.json';
+const palette = JSON.parse(readFileSync(perlerPath, 'utf-8'));
+console.log(`Loaded ${palette.length} colors from perler.json`);
+
+// Pick some distinct colors
+const colors = [
+  palette.find(c => c.id === 'H01') || palette[0],  // White
+  palette.find(c => c.id === 'H05') || palette[4],  // Orange
+  palette.find(c => c.id === 'H06') || palette[5],  // Red
+  palette.find(c => c.id === 'H17') || palette[16], // Blue
+  palette.find(c => c.id === 'H10') || palette[9],  // Green
+].filter(Boolean);
+
+console.log('Test colors:', colors.map(c => `${c.id} ${c.nameZh} rgb(${c.rgb.join(',')})`));
+
+// Create a 10x10 test grid with alternating colors
+const SIZE = 10;
+const grid = [];
+const legendMap = new Map();
+
+for (let row = 0; row < SIZE; row++) {
+  const rowData = [];
+  for (let col = 0; col < SIZE; col++) {
+    const colorIdx = (row + col) % colors.length;
+    const color = colors[colorIdx];
+    rowData.push({ color, row, col });
+    
+    if (!legendMap.has(color.id)) {
+      legendMap.set(color.id, { color, count: 0, symbol: String.fromCharCode(65 + legendMap.size) });
+    }
+    legendMap.get(color.id).count++;
+  }
+  grid.push(rowData);
+}
+
+const legend = Array.from(legendMap.values());
+const totalBeads = SIZE * SIZE;
+const usedColors = legend.length;
+
+// Create sessionStorage payload matching processStore format
+const storageData = {
+  sourceImage: null,
+  extractedImage: null,
+  canvasWidth: SIZE,
+  canvasHeight: SIZE,
+  fitMode: 'fit',
+  grid,
+  legend,
+  totalBeads,
+  usedColors,
+  status: 'done',
+};
+
+console.log('Test grid:', SIZE, 'x', SIZE, 'total beads:', totalBeads, 'colors:', usedColors);
+
+const BROWSER = await chromium.launch({ headless: true });
+const PAGE = await BROWSER.newPage();
+
+// Capture ALL console output
+const logs = [];
+PAGE.on('console', msg => logs.push(`[${msg.type()}] ${msg.text()}`));
+PAGE.on('pageerror', err => logs.push(`[PAGE_ERROR] ${err.message}`));
+
+const BASE = 'http://localhost:5174/pindou/';
+
+// Inject sessionStorage BEFORE navigating
+await PAGE.goto(BASE, { waitUntil: 'domcontentloaded', timeout: 10000 });
+await PAGE.evaluate((data) => {
+  sessionStorage.setItem('bead-process-state', JSON.stringify(data));
+}, storageData);
+
+// Verify it was written
+const stored = await PAGE.evaluate(() => sessionStorage.getItem('bead-process-state'));
+console.log('sessionStorage written:', stored ? `${stored.length} bytes` : 'FAILED');
+
+// Now navigate to result page
+await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
+await PAGE.waitForTimeout(2000);
+
+// Detailed DOM inspection
+const domInfo = await PAGE.evaluate(() => {
+  const canvasInner = document.querySelector('.canvas-inner');
+  const allCanvases = Array.from(document.querySelectorAll('canvas'));
+  const emptyState = document.querySelector('.empty-state');
+  const patternSection = document.querySelector('.pattern-section');
+  const beadPattern = document.querySelector('.bead-pattern');
+  const modeSwitcher = document.querySelector('.mode-switcher');
+  const infoBar = document.querySelector('.info-bar');
+  
+  return {
+    // Empty state
+    emptyStateVisible: !!emptyState && emptyState.offsetParent !== null,
+    emptyStateText: emptyState?.textContent?.trim(),
+    
+    // Pattern section
+    patternSectionVisible: !!patternSection && patternSection.offsetParent !== null,
+    beadPatternExists: !!beadPattern,
+    modeSwitcherText: modeSwitcher?.textContent?.trim(),
+    infoBarText: infoBar?.textContent?.trim(),
+    
+    // Canvas inner
+    canvasInnerExists: !!canvasInner,
+    canvasInnerHTML: canvasInner?.innerHTML?.substring(0, 300),
+    canvasInnerChildCount: canvasInner?.children?.length,
+    canvasInnerTagName: canvasInner?.tagName,
+    canvasInnerSize: canvasInner ? `${canvasInner.offsetWidth}x${canvasInner.offsetHeight}` : 'N/A',
+    
+    // All canvases
+    canvasCount: allCanvases.length,
+    canvases: allCanvases.map(c => ({
+      width: c.width,
+      height: c.height,
+      naturalWidth: c.naturalWidth || c.width,
+      naturalHeight: c.naturalHeight || c.height,
+      parentClass: c.parentElement?.className,
+      parentTag: c.parentElement?.tagName,
+      display: getComputedStyle(c).display,
+      visibility: getComputedStyle(c).visibility,
+    })),
+  };
+});
+
+console.log('\n=== DOM State ===');
+console.log(JSON.stringify(domInfo, null, 2));
+
+// Print ALL console logs
+console.log('\n=== All Console Logs ===');
+logs.forEach(l => console.log(l));
+
+// Screenshot for visual inspection
+await PAGE.screenshot({ path: '/Users/guchen/.openclaw/workspace/pindou-result-debug.png', fullPage: true });
+console.log('\nScreenshot saved to pindou-result-debug.png');
+
+await BROWSER.close();